From 94b8a9270d03fd9e83d9d67425b8710602e15517 Mon Sep 17 00:00:00 2001 From: PeekabooSteam Date: Sat, 12 Aug 2023 17:45:38 +0100 Subject: [PATCH 1/3] Ctrl-click-deselect --- client/src/panels/unitcontrolpanel.ts | 23 ++++++++++++++++++++--- client/src/unit/unit.ts | 25 +++++++++++++++++++++++-- client/src/unit/unitsmanager.ts | 10 ++++++++++ 3 files changed, 53 insertions(+), 5 deletions(-) diff --git a/client/src/panels/unitcontrolpanel.ts b/client/src/panels/unitcontrolpanel.ts index a26be730..d2e55363 100644 --- a/client/src/panels/unitcontrolpanel.ts +++ b/client/src/panels/unitcontrolpanel.ts @@ -85,6 +85,12 @@ export class UnitControlPanel extends Panel { }); this.hide(); + + // This is for when a ctrl-click happens on the map for deselection and we need to remove the selected unit from the panel + document.addEventListener( "unitDeselected", ( ev:CustomEventInit ) => { + this.getElement().querySelector( `button[data-unit-id="${ev.detail.unit.ID}"]` )?.remove(); + }); + } show() { @@ -107,15 +113,26 @@ export class UnitControlPanel extends Panel { var callsign = unit.getUnitName() || ""; var label = unit.getDatabase()?.getByName(unit.getName())?.label || unit.getName(); + button.setAttribute("data-unit-id", "" + unit.ID ); button.setAttribute("data-label", label); button.setAttribute("data-callsign", callsign); button.setAttribute("data-coalition", unit.getCoalition()); button.classList.add("pill", "highlight-coalition") - button.addEventListener("click", () => { - getUnitsManager().deselectAllUnits(); - getUnitsManager().selectUnit(unit.ID, true); + button.addEventListener("click", ( ev:MouseEventInit ) => { + + // Ctrl-click deselection + if ( ev.ctrlKey === true && ev.shiftKey === false && ev.altKey === false ) { + getUnitsManager().deselectUnit( unit.ID ); + button.remove(); + + // Deselect all + } else { + getUnitsManager().deselectAllUnits(); + getUnitsManager().selectUnit(unit.ID, true); + } + }); return (button); })); diff --git a/client/src/unit/unit.ts b/client/src/unit/unit.ts index 12440ddd..3a3f2cd4 100644 --- a/client/src/unit/unit.ts +++ b/client/src/unit/unit.ts @@ -708,9 +708,30 @@ export class Unit extends CustomMarker { #onClick(e: any) { if (!this.#preventClick) { if (getMap().getState() === IDLE || getMap().getState() === MOVE_UNIT || e.originalEvent.ctrlKey) { - if (!e.originalEvent.ctrlKey) + + if (!e.originalEvent.ctrlKey) { getUnitsManager().deselectAllUnits(); - this.setSelected(!this.getSelected()); + } + + const unitIsSelected = !this.getSelected(); + + this.setSelected( unitIsSelected ); + + + // Tell everyone a unit (de-)selection has happened, usually a panel or something. + + const detail = { + "detail": { + "unit": this + } + }; + + if ( unitIsSelected ) { + document.dispatchEvent( new CustomEvent( "unitSelected", detail ) ); + } else { + document.dispatchEvent( new CustomEvent( "unitDeselected", detail ) ); + } + } } diff --git a/client/src/unit/unitsmanager.ts b/client/src/unit/unitsmanager.ts index bfec1c53..1ba92461 100644 --- a/client/src/unit/unitsmanager.ts +++ b/client/src/unit/unitsmanager.ts @@ -196,6 +196,16 @@ export class UnitsManager { } } + deselectUnit( ID:number ) { + + if ( this.#units.hasOwnProperty( ID ) ) { + this.#units[ID].setSelected(false); + } else { + console.error( `deselectUnit(): no unit found with ID "${ID}".` ); + } + + } + selectUnitsByHotgroup(hotgroup: number) { this.deselectAllUnits(); this.getUnitsByHotgroup(hotgroup).forEach((unit: Unit) => unit.setSelected(true)) From 06e1cbeb7ed6a5b75575030c617c0ce9dcb23f7e Mon Sep 17 00:00:00 2001 From: PeekabooSteam Date: Mon, 14 Aug 2023 23:12:14 +0100 Subject: [PATCH 2/3] Changed events to use pre-existing names --- client/src/panels/unitcontrolpanel.ts | 4 ++-- client/src/unit/unit.ts | 8 +++----- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/client/src/panels/unitcontrolpanel.ts b/client/src/panels/unitcontrolpanel.ts index d2e55363..7c262781 100644 --- a/client/src/panels/unitcontrolpanel.ts +++ b/client/src/panels/unitcontrolpanel.ts @@ -87,8 +87,8 @@ export class UnitControlPanel extends Panel { this.hide(); // This is for when a ctrl-click happens on the map for deselection and we need to remove the selected unit from the panel - document.addEventListener( "unitDeselected", ( ev:CustomEventInit ) => { - this.getElement().querySelector( `button[data-unit-id="${ev.detail.unit.ID}"]` )?.remove(); + document.addEventListener( "unitDeselection", ( ev:CustomEventInit ) => { + this.getElement().querySelector( `button[data-unit-id="${ev.detail.ID}"]` )?.remove(); }); } diff --git a/client/src/unit/unit.ts b/client/src/unit/unit.ts index 3a3f2cd4..f44346e3 100644 --- a/client/src/unit/unit.ts +++ b/client/src/unit/unit.ts @@ -721,15 +721,13 @@ export class Unit extends CustomMarker { // Tell everyone a unit (de-)selection has happened, usually a panel or something. const detail = { - "detail": { - "unit": this - } + "detail": this }; if ( unitIsSelected ) { - document.dispatchEvent( new CustomEvent( "unitSelected", detail ) ); + document.dispatchEvent( new CustomEvent( "unitSelection", detail ) ); } else { - document.dispatchEvent( new CustomEvent( "unitDeselected", detail ) ); + document.dispatchEvent( new CustomEvent( "unitDeselection", detail ) ); } } From f544b0afaa5cd8f8c5081ecfabdffcb9826f4118 Mon Sep 17 00:00:00 2001 From: Pax1601 Date: Tue, 15 Aug 2023 11:09:00 +0200 Subject: [PATCH 3/3] Minimal code refactoring --- client/demo.js | 18 +++++++++++++++++- client/src/panels/unitcontrolpanel.ts | 3 --- client/src/unit/unit.ts | 23 +++++------------------ client/src/unit/unitsmanager.ts | 2 -- 4 files changed, 22 insertions(+), 24 deletions(-) diff --git a/client/demo.js b/client/demo.js index 2a3360b0..d4c68aff 100644 --- a/client/demo.js +++ b/client/demo.js @@ -80,7 +80,23 @@ const DEMO_UNIT_DATA = { contacts: [], activePath: [ ], isLeader: false - } + }, + ["6"]:{ category: "Aircraft", alive: true, human: false, controlled: false, coalition: 1, country: 0, name: "FA-18C_hornet", unitName: "Bad boi 1-2", groupName: "Bad group 1", state: 1, task: "Being bad", + hasTask: false, position: { lat: 36.8, lng: -116, alt: 1000 }, speed: 200, heading: 315 * Math.PI / 180, isTanker: false, 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", guidance: 0, category: 0, missileCategory: 0 } ], + contacts: [{ID: 1, detectionMethod: 16}], + activePath: [ ] + }, } const DEMO_WEAPONS_DATA = { diff --git a/client/src/panels/unitcontrolpanel.ts b/client/src/panels/unitcontrolpanel.ts index 7c262781..0f276367 100644 --- a/client/src/panels/unitcontrolpanel.ts +++ b/client/src/panels/unitcontrolpanel.ts @@ -121,18 +121,15 @@ export class UnitControlPanel extends Panel { button.classList.add("pill", "highlight-coalition") button.addEventListener("click", ( ev:MouseEventInit ) => { - // Ctrl-click deselection if ( ev.ctrlKey === true && ev.shiftKey === false && ev.altKey === false ) { getUnitsManager().deselectUnit( unit.ID ); button.remove(); - // Deselect all } else { getUnitsManager().deselectAllUnits(); getUnitsManager().selectUnit(unit.ID, true); } - }); return (button); })); diff --git a/client/src/unit/unit.ts b/client/src/unit/unit.ts index f44346e3..409a4a14 100644 --- a/client/src/unit/unit.ts +++ b/client/src/unit/unit.ts @@ -708,28 +708,15 @@ export class Unit extends CustomMarker { #onClick(e: any) { if (!this.#preventClick) { if (getMap().getState() === IDLE || getMap().getState() === MOVE_UNIT || e.originalEvent.ctrlKey) { - - if (!e.originalEvent.ctrlKey) { + if (!e.originalEvent.ctrlKey) getUnitsManager().deselectAllUnits(); - } - - const unitIsSelected = !this.getSelected(); - - this.setSelected( unitIsSelected ); - - // Tell everyone a unit (de-)selection has happened, usually a panel or something. - - const detail = { - "detail": this - }; - - if ( unitIsSelected ) { - document.dispatchEvent( new CustomEvent( "unitSelection", detail ) ); + this.setSelected( !this.getSelected() ); + if ( this.getSelected() ) { + document.dispatchEvent( new CustomEvent( "unitSelection", { "detail": this })); } else { - document.dispatchEvent( new CustomEvent( "unitDeselection", detail ) ); + document.dispatchEvent( new CustomEvent( "unitDeselection", { "detail": this })); } - } } diff --git a/client/src/unit/unitsmanager.ts b/client/src/unit/unitsmanager.ts index 1ba92461..7cf35804 100644 --- a/client/src/unit/unitsmanager.ts +++ b/client/src/unit/unitsmanager.ts @@ -197,13 +197,11 @@ export class UnitsManager { } deselectUnit( ID:number ) { - if ( this.#units.hasOwnProperty( ID ) ) { this.#units[ID].setSelected(false); } else { console.error( `deselectUnit(): no unit found with ID "${ID}".` ); } - } selectUnitsByHotgroup(hotgroup: number) {