Started multi purpose selection wheel
Pax1601
29
www/css/SelectionWheel.css
Normal file
@ -0,0 +1,29 @@
|
||||
:root {
|
||||
--blue: #2d3e50AA;
|
||||
--white: #FFFFFFAA;
|
||||
--start_angle: 0deg;
|
||||
--gradient_start: 0deg;
|
||||
--gradient_stop: 0deg;
|
||||
--animation_duration: 0.1s;
|
||||
}
|
||||
|
||||
#selection-wheel {
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(from var(--start_angle), var(--white) 0deg, var(--white) calc(var(--gradient_start) - 1deg), var(--blue) var(--gradient_start), var(--blue) var(--gradient_stop), var(--white) calc(var(--gradient_stop) + 1deg), var(--white) 360deg);
|
||||
-webkit-mask: radial-gradient(transparent 30%,#000 31%);
|
||||
mask: radial-gradient(transparent 30%,#000 31%);
|
||||
}
|
||||
#selection-wheel:before {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
#selection-wheel-container {
|
||||
margin: 0 auto;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
transition: width var(--animation_duration), height var(--animation_duration), left var(--animation_duration), top var(--animation_duration);
|
||||
}
|
||||
|
Before Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 7.3 KiB |
|
Before Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 8.7 KiB |
|
Before Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 7.3 KiB |
|
Before Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 8.0 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.9 KiB |
@ -7,6 +7,7 @@
|
||||
<link rel="stylesheet" href="css/index.css"/>
|
||||
<link rel="stylesheet" href="css/map.css"/>
|
||||
<link rel="stylesheet" href="css/UnitMarker.css"/>
|
||||
<link rel="stylesheet" href="css/SelectionWheel.css"/>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"
|
||||
integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14="
|
||||
crossorigin=""/>
|
||||
@ -20,7 +21,8 @@
|
||||
<script src="js/MissionData.js"></script>
|
||||
<script src="js/Unit.js"></script>
|
||||
<script src="js/UnitMarker.js"></script>
|
||||
<script src="js/UnitsHandler.js"></script>
|
||||
<script src="js/UnitsFactory.js"></script>
|
||||
<script src="js/SelectionWheel.js"></script>
|
||||
<script src="js/index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
@ -30,7 +32,7 @@
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<td id="map-container">
|
||||
<div id="map"></div>
|
||||
<div id="log"></div>
|
||||
<div id="left-panel"></div>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||