Merge pull request #354 from Pax1601/348-ctrl+click-on-units-on-the-units-control-panel-should-remove-them-from-the-list

Ctrl-click-deselect

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 = {

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( "unitDeselection", ( ev:CustomEventInit ) => {
+            this.getElement().querySelector( `button[data-unit-id="${ev.detail.ID}"]` )?.remove();
+        });
+
     }
 
     show() {
@@ -107,15 +113,23 @@ 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);
             }));

client/src/unit/unit.ts

@@ -708,9 +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();
-                this.setSelected(!this.getSelected());
+                
+                this.setSelected( !this.getSelected() );
+                if ( this.getSelected() ) {
+                    document.dispatchEvent( new CustomEvent( "unitSelection", { "detail": this }));
+                } else {
+                    document.dispatchEvent( new CustomEvent( "unitDeselection", { "detail": this }));
+                }
             }
         }
 

client/src/unit/unitsmanager.ts

@@ -196,6 +196,14 @@ 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))