diff --git a/client/demo.js b/client/demo.js index 335c1bbd..ac74f3c9 100644 --- a/client/demo.js +++ b/client/demo.js @@ -2,7 +2,7 @@ const { random } = require('@turf/turf'); var basicAuth = require('express-basic-auth') var enc = new TextEncoder(); -var DEMO_UNIT_DATA = { +const DEMO_UNIT_DATA = { ["1"]:{ category: "Aircraft", alive: true, human: false, controlled: true, coalition: 2, country: 0, name: "KC-135", unitName: "Cool guy 1-1 who also has a very long name", groupName: "Cool group 1", state: 1, task: "Being cool!", hasTask: true, position: { lat: 37, lng: -116, alt: 1000 }, speed: 200, heading: 45, isTanker: true, isAWACS: false, onOff: true, followRoads: false, fuel: 50, desiredSpeed: 300, desiredSpeedType: 1, desiredAltitude: 1000, desiredAltitudeType: 1, leaderID: 0, @@ -142,25 +142,25 @@ class DemoDataGenerator { }, })) - for (let i = 8; i < 100; i++) { - var randomUnit = { category: "Aircraft", alive: true, human: false, controlled: true, coalition: 2, country: 0, name: "KC-135", unitName: "Cool guy 1-1 who also has a very long name", groupName: "Cool group 1", state: 1, task: "Being cool!", - hasTask: true, position: { lat: 37 + Math.random(), lng: -116 + Math.random(), alt: 1000 }, speed: 200, heading: 45, isTanker: true, isAWACS: false, onOff: true, followRoads: false, fuel: 50, - desiredSpeed: 300, desiredSpeedType: 1, desiredAltitude: 1000, desiredAltitudeType: 1, leaderID: 0, - formationOffset: { x: 0, y: 0, z: 0 }, - targetID: 0, - targetPosition: { lat: 0, lng: 0, alt: 0 }, - ROE: 1, - reactionToThreat: 1, - emissionsCountermeasures: 1, - TACAN: { isOn: false, XY: 'Y', callsign: 'TKR', channel: 40 }, - radio: { frequency: 124000000, callsign: 1, callsignNumber: 1 }, - generalSettings: { prohibitAA: false, prohibitAfterburner: false, prohibitAG: false, prohibitAirWpn: false, prohibitJettison: false }, - ammo: [{ quantity: 2, name: "A cool missile\0Ciao", guidance: 0, category: 0, missileCategory: 0 }, { quantity: 2, name: "A cool missile with a longer name\0Ciao", guidance: 0, category: 0, missileCategory: 0 }, { quantity: 2, name: "A cool missile\0Ciao", guidance: 0, category: 0, missileCategory: 0 } , { quantity: 2, name: "A cool missile\0Ciao", guidance: 0, category: 0, missileCategory: 0 } , { quantity: 2, name: "A cool missile\0Ciao", guidance: 0, category: 0, missileCategory: 0 } , { quantity: 2, name: "A cool missile\0Ciao", guidance: 0, category: 0, missileCategory: 0 } , { quantity: 2, name: "A cool missile\0Ciao", guidance: 0, category: 0, missileCategory: 0 } , { quantity: 2, name: "A cool missile\0Ciao", guidance: 0, category: 0, missileCategory: 0 } , { quantity: 2, name: "A cool missile\0Ciao", guidance: 0, category: 0, missileCategory: 0 } ], - contacts: [{ID: 2, detectionMethod: 1}, {ID: 3, detectionMethod: 4}, {ID: 4, detectionMethod: 1}], - activePath: [] - } - DEMO_UNIT_DATA[i.toString()] = randomUnit; - } + //for (let i = 8; i < 100; i++) { + // var randomUnit = { category: "Aircraft", alive: true, human: false, controlled: true, coalition: 2, country: 0, name: "KC-135", unitName: "Cool guy 1-1 who also has a very long name", groupName: "Cool group 1", state: 1, task: "Being cool!", + // hasTask: true, position: { lat: 37 + Math.random(), lng: -116 + Math.random(), alt: 1000 }, speed: 200, heading: 45, isTanker: true, isAWACS: false, onOff: true, followRoads: false, fuel: 50, + // desiredSpeed: 300, desiredSpeedType: 1, desiredAltitude: 1000, desiredAltitudeType: 1, leaderID: 0, + // formationOffset: { x: 0, y: 0, z: 0 }, + // targetID: 0, + // targetPosition: { lat: 0, lng: 0, alt: 0 }, + // ROE: 1, + // reactionToThreat: 1, + // emissionsCountermeasures: 1, + // TACAN: { isOn: false, XY: 'Y', callsign: 'TKR', channel: 40 }, + // radio: { frequency: 124000000, callsign: 1, callsignNumber: 1 }, + // generalSettings: { prohibitAA: false, prohibitAfterburner: false, prohibitAG: false, prohibitAirWpn: false, prohibitJettison: false }, + // ammo: [{ quantity: 2, name: "A cool missile\0Ciao", guidance: 0, category: 0, missileCategory: 0 }, { quantity: 2, name: "A cool missile with a longer name\0Ciao", guidance: 0, category: 0, missileCategory: 0 }, { quantity: 2, name: "A cool missile\0Ciao", guidance: 0, category: 0, missileCategory: 0 } , { quantity: 2, name: "A cool missile\0Ciao", guidance: 0, category: 0, missileCategory: 0 } , { quantity: 2, name: "A cool missile\0Ciao", guidance: 0, category: 0, missileCategory: 0 } , { quantity: 2, name: "A cool missile\0Ciao", guidance: 0, category: 0, missileCategory: 0 } , { quantity: 2, name: "A cool missile\0Ciao", guidance: 0, category: 0, missileCategory: 0 } , { quantity: 2, name: "A cool missile\0Ciao", guidance: 0, category: 0, missileCategory: 0 } , { quantity: 2, name: "A cool missile\0Ciao", guidance: 0, category: 0, missileCategory: 0 } ], + // contacts: [{ID: 2, detectionMethod: 1}, {ID: 3, detectionMethod: 4}, {ID: 4, detectionMethod: 1}], + // activePath: [] + // } + // DEMO_UNIT_DATA[i.toString()] = randomUnit; + //} this.startTime = Date.now(); diff --git a/client/src/controls/unitspawnmenu.ts b/client/src/controls/unitspawnmenu.ts index 7bdaceea..f7d53d9d 100644 --- a/client/src/controls/unitspawnmenu.ts +++ b/client/src/controls/unitspawnmenu.ts @@ -236,8 +236,8 @@ export class UnitSpawnMenu { this.showCirclesPreviews(); }); - this.#engagementCircle = new Circle(this.spawnOptions.latlng, { radius: 0, weight: 4, opacity: 0.8, fillOpacity: 0, dashArray: "4 8" }); - this.#acquisitionCircle = new Circle(this.spawnOptions.latlng, { radius: 0, weight: 2, opacity: 0.8, fillOpacity: 0, dashArray: "8 12" }); + this.#engagementCircle = new Circle(this.spawnOptions.latlng, { radius: 0, weight: 4, opacity: 0.8, fillOpacity: 0, dashArray: "4 8", interactive: false, bubblingMouseEvents: false }); + this.#acquisitionCircle = new Circle(this.spawnOptions.latlng, { radius: 0, weight: 2, opacity: 0.8, fillOpacity: 0, dashArray: "8 12", interactive: false, bubblingMouseEvents: false }); } getContainer() { diff --git a/client/src/unit/unit.ts b/client/src/unit/unit.ts index 49fb687e..02c14605 100644 --- a/client/src/unit/unit.ts +++ b/client/src/unit/unit.ts @@ -152,8 +152,8 @@ export class Unit extends CustomMarker { this.#pathPolyline.addTo(getApp().getMap()); this.#targetPositionMarker = new TargetMarker(new LatLng(0, 0)); this.#targetPositionPolyline = new Polyline([], { color: '#FF0000', weight: 3, opacity: 0.5, smoothFactor: 1 }); - this.#engagementCircle = new Circle(this.getPosition(), { radius: 0, weight: 4, opacity: 1, fillOpacity: 0, dashArray: "4 8" }); - this.#acquisitionCircle = new Circle(this.getPosition(), { radius: 0, weight: 2, opacity: 1, fillOpacity: 0, dashArray: "8 12" }); + this.#engagementCircle = new Circle(this.getPosition(), { radius: 0, weight: 4, opacity: 1, fillOpacity: 0, dashArray: "4 8", interactive: false, bubblingMouseEvents: false }); + this.#acquisitionCircle = new Circle(this.getPosition(), { radius: 0, weight: 2, opacity: 1, fillOpacity: 0, dashArray: "8 12", interactive: false, bubblingMouseEvents: false }); this.on('click', (e) => this.#onClick(e)); this.on('dblclick', (e) => this.#onDoubleClick(e)); @@ -181,7 +181,12 @@ export class Unit extends CustomMarker { document.addEventListener("mapVisibilityOptionsChanged", (ev: CustomEventInit) => { this.#updateMarker(); - this.#drawRanges(); + + /* Circles don't like to be updated when the map is zooming */ + if (!getApp().getMap().isZooming()) + this.#drawRanges(); + else + this.once("zoomend", () => { this.#drawRanges(); }) if (this.getSelected()) this.drawLines(); @@ -205,7 +210,7 @@ export class Unit extends CustomMarker { case DataIndexes.alive: this.setAlive(dataExtractor.extractBool()); updateMarker = true; break; case DataIndexes.human: this.#human = dataExtractor.extractBool(); break; case DataIndexes.controlled: this.#controlled = dataExtractor.extractBool(); updateMarker = true; break; - case DataIndexes.coalition: this.#coalition = enumToCoalition(dataExtractor.extractUInt8()); updateMarker = true; break; + case DataIndexes.coalition: this.#coalition = enumToCoalition(dataExtractor.extractUInt8()); updateMarker = true; this.#clearRanges(); break; case DataIndexes.country: this.#country = dataExtractor.extractUInt8(); break; case DataIndexes.name: this.#name = dataExtractor.extractString(); break; case DataIndexes.unitName: this.#unitName = dataExtractor.extractString(); break; @@ -343,9 +348,10 @@ export class Unit extends CustomMarker { this.#selected = selected; /* Circles don't like to be updated when the map is zooming */ - if (!getApp().getMap().isZooming()) { + if (!getApp().getMap().isZooming()) this.#drawRanges(); - } + else + this.once("zoomend", () => { this.#drawRanges(); }) if (selected) { this.#updateMarker(); @@ -535,7 +541,11 @@ export class Unit extends CustomMarker { this.getElement()?.appendChild(el); - this.#drawRanges(); + /* Circles don't like to be updated when the map is zooming */ + if (!getApp().getMap().isZooming()) + this.#drawRanges(); + else + this.once("zoomend", () => { this.#drawRanges(); }) } /********************** Visibility *************************/ @@ -569,7 +579,11 @@ export class Unit extends CustomMarker { } if (!this.getHidden()) { - this.#drawRanges(); + /* Circles don't like to be updated when the map is zooming */ + if (!getApp().getMap().isZooming()) + this.#drawRanges(); + else + this.once("zoomend", () => { this.#drawRanges(); }) } else { this.#clearRanges(); }