More work on database editing

client/src/interfaces.ts

@@ -204,6 +204,8 @@ export interface UnitBlueprint {
     filename?: string;
     liveries?: { [key: string]: { name: string, countries: string[] } };
     cost?: number;
+    barrelHeight?: number;
+    muzzleVelocity?: number;
 }
 
 export interface UnitSpawnOptions {

client/src/map/map.ts

@@ -19,8 +19,19 @@ import { CoalitionAreaContextMenu } from "../contextmenus/coalitionareacontextme
 import { DrawingCursor } from "./coalitionarea/drawingcursor";
 import { AirbaseSpawnContextMenu } from "../contextmenus/airbasespawnmenu";
 import { Popup } from "../popups/popup";
+import { GestureHandling } from "leaflet-gesture-handling";
+import { TouchBoxSelect } from "./touchboxselect";
 
-L.Map.addInitHook('addHandler', 'boxSelect', BoxSelect);
+var hasTouchScreen = false;
+if ("maxTouchPoints" in navigator) 
+    hasTouchScreen = navigator.maxTouchPoints > 0;
+
+if (hasTouchScreen) 
+    L.Map.addInitHook('addHandler', 'boxSelect', TouchBoxSelect);
+else 
+    L.Map.addInitHook('addHandler', 'boxSelect', BoxSelect);
+
+L.Map.addInitHook("addHandler", "gestureHandling", GestureHandling);
 
 // TODO would be nice to convert to ts - yes
 require("../../public/javascripts/leaflet.nauticscale.js")
@@ -77,8 +88,22 @@ export class Map extends L.Map {
      */
     constructor(ID: string){
         /* Init the leaflet map */
-        //@ts-ignore Needed because the boxSelect option is non-standard
-        super(ID, { zoomSnap: 0, zoomDelta: 0.25, preferCanvas: true, doubleClickZoom: false, zoomControl: false, boxZoom: false, boxSelect: true, zoomAnimation: true, maxBoundsViscosity: 1.0, minZoom: 7, keyboard: true, keyboardPanDelta: 0 });
+        super(ID, { 
+            zoomSnap: 0, 
+            zoomDelta: 0.25, 
+            preferCanvas: true, 
+            doubleClickZoom: false, 
+            zoomControl: false, 
+            boxZoom: false, 
+            //@ts-ignore Needed because the boxSelect option is non-standard
+            boxSelect: true, 
+            zoomAnimation: true, 
+            maxBoundsViscosity: 1.0,
+            minZoom: 7, 
+            keyboard: true,
+            keyboardPanDelta: 0,
+            gestureHandling: hasTouchScreen 
+        });
         this.setView([37.23, -115.8], 10);
 
         this.#ID = ID;
@@ -486,7 +511,7 @@ export class Map extends L.Map {
     }
 
     #onDoubleClick(e: any) {
-        this.deselectAllCoalitionAreas();
+
     }
 
     #onContextMenu(e: any) {

client/src/map/touchboxselect.ts

@@ -0,0 +1,136 @@
+import { Map, Point } from 'leaflet';
+import { Handler } from 'leaflet';
+import { Util } from 'leaflet';
+import { DomUtil } from 'leaflet';
+import { DomEvent } from 'leaflet';
+import { LatLngBounds } from 'leaflet';
+import { Bounds } from 'leaflet';
+
+export var TouchBoxSelect = Handler.extend({
+	initialize: function (map: Map) {
+		this._map = map;
+		this._container = map.getContainer();
+		this._pane = map.getPanes().overlayPane;
+		this._resetStateTimeout = 0;
+		this._doubleClicked = false;
+		map.on('unload', this._destroy, this);
+	},
+
+	addHooks: function () {
+		DomEvent.on(this._container, 'touchstart', this._onMouseDown, this);
+	},
+
+	removeHooks: function () {
+		DomEvent.off(this._container, 'touchstart', this._onMouseDown, this);
+	},
+
+	moved: function () {
+		return this._moved;
+	},
+
+	_destroy: function () {
+		DomUtil.remove(this._pane);
+		delete this._pane;
+	},
+
+	_resetState: function () {
+		this._resetStateTimeout = 0;
+		this._moved = false;
+	},
+
+	_clearDeferredResetState: function () {
+		if (this._resetStateTimeout !== 0) {
+			clearTimeout(this._resetStateTimeout);
+			this._resetStateTimeout = 0;
+		}
+	},
+
+	_onMouseDown: function (e: any) {
+		if ((e.which == 0)) {
+			this._map.fire('selectionstart');
+			// Clear the deferred resetState if it hasn't executed yet, otherwise it
+			// will interrupt the interaction and orphan a box element in the container.
+			this._clearDeferredResetState();
+			this._resetState();
+
+			DomUtil.disableTextSelection();
+			DomUtil.disableImageDrag();
+
+			this._startPoint = this._getMousePosition(e);
+
+			//@ts-ignore
+			DomEvent.on(document, {
+				contextmenu: DomEvent.stop,
+				touchmove: this._onMouseMove,
+				touchend: this._onMouseUp
+			}, this);
+		} else {
+			return false;
+		}
+	},
+
+	_onMouseMove: function (e: any) {
+		if (!this._moved) {
+			this._moved = true;
+
+			this._box = DomUtil.create('div', 'leaflet-zoom-box', this._container);
+			DomUtil.addClass(this._container, 'leaflet-crosshair');
+		}
+
+		this._point = this._getMousePosition(e);
+
+		var bounds = new Bounds(this._point, this._startPoint),
+			size = bounds.getSize();
+
+		if (bounds.min != undefined)
+			DomUtil.setPosition(this._box, bounds.min);
+
+		this._box.style.width = size.x + 'px';
+		this._box.style.height = size.y + 'px';
+	},
+
+	_finish: function () {
+		if (this._moved) {
+			DomUtil.remove(this._box);
+			DomUtil.removeClass(this._container, 'leaflet-crosshair');
+		}
+
+		DomUtil.enableTextSelection();
+		DomUtil.enableImageDrag();
+
+		//@ts-ignore
+		DomEvent.off(document, {
+			contextmenu: DomEvent.stop,
+			touchmove: this._onMouseMove,
+			touchend: this._onMouseUp
+		}, this);
+	},
+
+	_onMouseUp: function (e: any) {
+		if ((e.which !== 0)) { return; }
+
+		this._finish();
+
+		if (!this._moved) { return; }
+		// Postpone to next JS tick so internal click event handling
+		// still see it as "moved".
+		window.setTimeout(Util.bind(this._resetState, this), 0);
+		var bounds = new LatLngBounds(
+			this._map.containerPointToLatLng(this._startPoint),
+			this._map.containerPointToLatLng(this._point));
+
+		this._map.fire('selectionend', { selectionBounds: bounds });
+	},
+
+	_getMousePosition(e: any) {
+		var scale = DomUtil.getScale(this._container), offset = scale.boundingClientRect; // left and top  values are in page scale (like the event clientX/Y)
+	
+		return new Point(
+			// offset.left/top values are in page scale (like clientX/Y),
+			// whereas clientLeft/Top (border width) values are the original values (before CSS scale applies).
+			(e.touches[0].clientX - offset.left) / scale.x - this._container.clientLeft,
+			(e.touches[0].clientY - offset.top) / scale.y - this._container.clientTop
+		);
+	}
+});
+

client/src/popups/popup.ts

@@ -28,16 +28,16 @@ export class PopupMessage {
 }
 
 export class Popup extends Panel {
+    #fadeTime: number = 2000; // Milliseconds
     #messages: PopupMessage[] = [];
     #stackAfter: number;
 
-    constructor(ID: string, stackAfter: number = 5) {
+    constructor(ID: string, stackAfter: number = 3) {
         super(ID);
         this.show();
         this.#stackAfter = stackAfter;
     }
 
-    #fadeTime: number = 2000; // Milliseconds
     setFadeTime(fadeTime: number) {
         this.#fadeTime = fadeTime;
     }
@@ -52,7 +52,7 @@ export class Popup extends Panel {
         this.getElement().appendChild(message.getElement());
         this.#messages.push(message);
         if (this.#messages.length > this.#stackAfter) {
-            this.#messages[this.#messages.length - this.#stackAfter].getElement().classList.add("ol-popup-stack");
+            this.#messages[this.#messages.length - this.#stackAfter - 1].getElement().classList.add("ol-popup-stack");
         }
     }
 }

client/src/server/servermanager.ts

@@ -326,7 +326,7 @@ export class ServerManager {
     simulateFireFight(ID: number, latlng: LatLng, altitude: number, callback: CallableFunction = () => {}) {
         var command = { "ID": ID, "location": latlng, "altitude": altitude }
         var data = { "simulateFireFight": command }
-        this.POST(data, callback);
+        this.PUT(data, callback);
     }
 
     setAdvacedOptions(ID: number, isTanker: boolean, isAWACS: boolean, TACAN: TACAN, radio: Radio, generalSettings: GeneralSettings, callback: CallableFunction = () => {}) {