- |
+ |
diff --git a/www/js/Map.js b/www/js/Map.js
index 09af6590..86bc0fc0 100644
--- a/www/js/Map.js
+++ b/www/js/Map.js
@@ -4,7 +4,7 @@ class Map
{
this._state = "IDLE";
- this._map = L.map('map').setView([37.23, -115.8], 12);
+ this._map = L.map('map', {doubleClickZoom: false}).setView([37.23, -115.8], 12);
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
@@ -16,13 +16,16 @@ class Map
// Register event handles
this._map.on('contextmenu', (e) => this.onContextMenu(e));
this._map.on('click', (e) => this.onClick(e));
+ this._map.on('dblclick', (e) => this.onDoubleClick(e));
this.setState("IDLE");
+
+ this._selectionWheel = undefined;
}
getMap()
{
- return this._map
+ return this._map;
}
// GET new data from the server
@@ -36,8 +39,8 @@ class Map
var data = JSON.parse(xmlHttp.responseText);
missionData.update(data);
- unitsHandler.update(data);
- leftPanel.update(unitsHandler.getSelectedUnits());
+ unitsFactory.update(data);
+ leftPanel.update(unitsFactory.getSelectedUnits());
};
xmlHttp.onerror = function () {
@@ -63,11 +66,13 @@ class Map
// Event handlers
onContextMenu(e)
{
- unitsHandler.deselectAllUnits();
+ unitsFactory.deselectAllUnits();
+ this._removeSelectionWheel();
}
onClick(e)
{
+ this._removeSelectionWheel();
if (this._state === "IDLE")
{
@@ -76,9 +81,23 @@ class Map
{
if (!e.originalEvent.ctrlKey)
{
- unitsHandler.clearDestinations();
+ unitsFactory.clearDestinations();
}
- unitsHandler.addDestination(e.latlng)
+ unitsFactory.addDestination(e.latlng)
+ }
+ }
+
+ onDoubleClick(e)
+ {
+ this._selectionWheel = new SelectionWheel(e.originalEvent.x, e.originalEvent.y, ['1', '2', '3']);
+ }
+
+ _removeSelectionWheel()
+ {
+ if (this._selectionWheel !== undefined)
+ {
+ this._selectionWheel.remove();
+ this._selectionWheel = undefined;
}
}
}
\ No newline at end of file
diff --git a/www/js/SelectionWheel.js b/www/js/SelectionWheel.js
new file mode 100644
index 00000000..cec004d2
--- /dev/null
+++ b/www/js/SelectionWheel.js
@@ -0,0 +1,50 @@
+class SelectionWheel
+{
+ constructor(x, y, options) {
+ if (options.length > 1)
+ {
+ this._x = x;
+ this._y = y;
+ this._options = options;
+ this._angularSize = 360 / this._options.length;
+
+ this._container = document.createElement("div");
+ this._container.id = 'selection-wheel-container';
+ this._container.style.left = this._x + "px";
+ this._container.style.top = this._y + "px";
+ document.getElementById("map-container").appendChild(this._container);
+
+ this._wheel = document.createElement("div");
+ this._wheel.id = 'selection-wheel';
+ this._container.appendChild(this._wheel);
+ this._wheel.addEventListener('mousemove', (e) => this._onMouseMove(e));
+
+ this._wheel.style.setProperty('--gradient_start', this._angularSize / 2 + 'deg');
+ this._wheel.style.setProperty('--gradient_stop', (360 - this._angularSize / 2) + 'deg');
+
+ window.setTimeout(() => this._show(), 100);
+ }
+ }
+
+ remove()
+ {
+ this._container.removeChild(this._wheel);
+ document.getElementById("map-container").removeChild(this._container);
+ }
+
+ _show()
+ {
+ this._container.style.width = "200px";
+ this._container.style.height = "200px";
+ this._container.style.left = this._x - 100 + "px";
+ this._container.style.top = this._y - 100 + "px";
+ }
+
+ _onMouseMove(e)
+ {
+ var angle = -rad2deg(Math.atan2(e.x - this._x, e.y - this._y)) + 180 + this._angularSize / 2;
+ var index = Math.floor(angle / this._angularSize)
+ this._wheel.style.transform = 'rotate('+ (index * this._angularSize) + 'deg)';
+ }
+}
+
diff --git a/www/js/Unit.js b/www/js/Unit.js
index cf6cc7c9..60fa0428 100644
--- a/www/js/Unit.js
+++ b/www/js/Unit.js
@@ -3,7 +3,7 @@ class Unit
constructor(ID) {
this.ID = ID;
this.marker = new L.Marker.UnitMarker([0, 0], {riseOnHover: true});
- this.marker.addTo(map.getMap()).on('click', () => this.onClick());
+ this.marker.addTo(map.getMap()).on('click', (e) => this.onClick(e));
this._selected = false;
@@ -19,6 +19,14 @@ class Unit
this.activePath = undefined;
this._pathMarkers = [];
+
+ this._pathPolyline = new L.Polyline([], {
+ color: '#2d3e50',
+ weight: 3,
+ opacity: 0.5,
+ smoothFactor: 1
+ });
+ this._pathPolyline.addTo(map.getMap());
}
update(response)
@@ -31,18 +39,28 @@ class Unit
this.altitude = response["altitude"];
this.heading = response["heading"];
this.coalitionID = response["coalitionID"]
+
+ /* Only present if an active path is available */
if ("activePath" in response)
this.activePath = response["activePath"]
this.drawMarker();
- this.drawPath();
+
+ if (this._selected && this.activePath != undefined)
+ {
+ this.drawPath();
+ }
+ else
+ {
+ this.clearPath();
+ }
}
setSelected(selected)
{
this._selected = selected;
this.marker.setSelected(selected);
- unitsHandler.onUnitSelection();
+ unitsFactory.onUnitSelection();
}
getSelected()
@@ -52,8 +70,6 @@ class Unit
addDestination(latlng)
{
- var xy = latlng2xy(latlng.lat, latlng.lng)
-
var xhr = new XMLHttpRequest();
xhr.open("PUT", RESTaddress);
@@ -90,7 +106,10 @@ class Unit
onClick(e)
{
// TODO if ctrl is pressed, don't deselect the other units
- unitsHandler.deselectAllUnits();
+ if (!e.originalEvent.ctrlKey)
+ {
+ unitsFactory.deselectAllUnits();
+ }
this.setSelected(true);
}
@@ -106,16 +125,40 @@ class Unit
drawPath()
{
+ var _points = [];
+ _points.push(new L.LatLng(this.latitude, this.longitude));
+
+ /* Add markers if missing */
+ while (this._pathMarkers.length < Object.keys(this.activePath).length)
+ {
+ var marker = L.marker([0, 0]).addTo(map.getMap());
+ this._pathMarkers.push(marker);
+ }
+
+ /* Remove markers if too many */
+ while (this._pathMarkers.length > Object.keys(this.activePath).length)
+ {
+ map.getMap().removeLayer(this._pathMarkers[this._pathMarkers.length - 1]);
+ this._pathMarkers.splice(this._pathMarkers.length - 1, 1)
+ }
+
+ /* Update the position of the existing markers (to avoid creating markers uselessly) */
for (let WP in this.activePath)
{
var destination = this.activePath[WP];
- if (parseInt(WP) - 1 >= this._pathMarkers.length)
- {
- var marker = L.marker([destination.lat, destination.lng]).addTo(map.getMap());
- this._pathMarkers.push(marker);
- }
this._pathMarkers[parseInt(WP) - 1].setLatLng([destination.lat, destination.lng]);
+ _points.push(new L.LatLng(destination.lat, destination.lng));
+ this._pathPolyline.setLatLngs(_points);
}
- this._pathMarkers
+ }
+
+ clearPath()
+ {
+ for (let WP in this._pathMarkers)
+ {
+ map.getMap().removeLayer(this._pathMarkers[WP]);
+ }
+ this._pathMarkers = [];
+ this._pathPolyline.setLatLngs([]);
}
}
diff --git a/www/js/UnitsFactory.js b/www/js/UnitsFactory.js
new file mode 100644
index 00000000..e5965950
--- /dev/null
+++ b/www/js/UnitsFactory.js
@@ -0,0 +1,76 @@
+class UnitsFactory
+{
+ constructor()
+ {
+ this._units = {};
+ }
+
+ createUnit(ID)
+ {
+ this._units[ID] = new Unit(ID)
+ }
+
+ removeUnit(ID)
+ {
+
+ }
+
+ deselectAllUnits()
+ {
+ for (let ID in this._units)
+ {
+ this._units[ID].setSelected(false);
+ }
+ }
+
+ update(data)
+ {
+ for (let ID in data["units"])
+ {
+ // Create the unit if missing from the local array, then update the data. Drawing is handled by leaflet.
+ if (!(ID in this._units)) this.createUnit(parseInt(ID));
+ this._units[ID].update(data["units"][ID]);
+ }
+ }
+
+ onUnitSelection()
+ {
+ if (this.getSelectedUnits().length > 0) map.setState("UNIT_SELECTED");
+ else map.setState("IDLE");
+ }
+
+ getSelectedUnits()
+ {
+ var selectedUnits = [];
+ for (let ID in this._units)
+ {
+ if (this._units[ID].getSelected())
+ {
+ selectedUnits.push(this._units[ID]);
+ }
+ }
+ return selectedUnits;
+ }
+
+ addDestination(latlng)
+ {
+ for (let ID in this._units)
+ {
+ if (this._units[ID].getSelected())
+ {
+ this._units[ID].addDestination(latlng);
+ }
+ }
+ }
+
+ clearDestinations(latlng)
+ {
+ for (let ID in this._units)
+ {
+ if (this._units[ID].getSelected())
+ {
+ this._units[ID].clearDestinations();
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/www/js/index.js b/www/js/index.js
index d7b7f247..e8d8728b 100644
--- a/www/js/index.js
+++ b/www/js/index.js
@@ -1,5 +1,5 @@
var missionData;
-var unitsHandler;
+var unitsFactory;
var leftPanel;
var map;
var RESTaddress = "http://localhost:30000/restdemo";
@@ -9,7 +9,7 @@ function setup()
resize();
missionData = new MissionData();
leftPanel = new LeftPanel();
- unitsHandler = new UnitsHandler();
+ unitsFactory = new UnitsFactory();
map = new Map();
}
|