Refactoring of files and more svg tidy up

client/src/aic/aic.ts

@@ -1,4 +1,4 @@
-import { ToggleableFeature } from "../toggleablefeature";
+import { ToggleableFeature } from "../features/toggleablefeature";
 import { AICFormation_Azimuth } from "./aicformation/azimuth";
 import { AICFormation_Range } from "./aicformation/range";
 import { AICFormation_Single } from "./aicformation/single";

client/src/atc/unitdatatable.ts

@@ -1,6 +1,6 @@
 import { getUnitsManager } from "..";
 import { Panel } from "../panels/panel";
-import { Unit } from "./unit";
+import { Unit } from "../units/unit";
 
 export class UnitDataTable extends Panel {
     constructor(id: string) {

client/src/index.ts

@@ -7,17 +7,15 @@ import { UnitControlPanel } from "./panels/unitcontrolpanel";
 import { MouseInfoPanel } from "./panels/mouseinfopanel";
 import { AIC } from "./aic/aic";
 import { ATC } from "./atc/atc";
-import { FeatureSwitches } from "./featureswitches";
+import { FeatureSwitches } from "./features/featureswitches";
 import { LogPanel } from "./panels/logpanel";
 import { getConfig, getPaused, setAddress, setCredentials, setPaused, startUpdate, toggleDemoEnabled } from "./server/server";
-import { UnitDataTable } from "./units/unitdatatable";
+import { UnitDataTable } from "./atc/unitdatatable";
 import { keyEventWasInInput } from "./other/utils";
 import { Popup } from "./popups/popup";
 import { Dropdown } from "./controls/dropdown";
 import { HotgroupPanel } from "./panels/hotgrouppanel";
 
-import "@iconfu/svg-inject";
-
 var map: Map;
 
 var unitsManager: UnitsManager;

client/src/map/map.ts

@@ -32,6 +32,8 @@ var destinationPreviewIcon = new L.DivIcon({
     className: "ol-destination-preview"
 })
 
+const visibilityControls: string[] = ["human", "dcs", "aircraft", "groundunit-sam", "groundunit-other", "navyunit", "airbase"];
+
 export class ClickableMiniMap extends MiniMap {
     constructor(layer: L.TileLayer | L.LayerGroup, options?: MiniMapOptions) {
         super(layer, options);
@@ -69,6 +71,7 @@ export class Map extends L.Map {
     #airbaseContextMenu: AirbaseContextMenu = new AirbaseContextMenu("airbase-contextmenu");
 
     #mapSourceDropdown: Dropdown;
+    #optionButtons: { [key: string]: HTMLButtonElement[] } = {}
 
     constructor(ID: string) {
         /* Init the leaflet map */
@@ -130,6 +133,15 @@ export class Map extends L.Map {
             this.panBy(new L.Point( ((this.#panLeft? -1: 0) + (this.#panRight? 1: 0)) * this.#deafultPanDelta, 
                                     ((this.#panUp? -1: 0) + (this.#panDown? 1: 0)) * this.#deafultPanDelta)); 
         }, 20);
+
+        /* Option buttons */
+        this.#optionButtons["visibility"] = visibilityControls.map((option: string, index: number) => {
+            return this.#createOptionButton(option, `visibility/${option.toLowerCase()}.svg`, "", (e: any) => { 
+                getUnitsManager().setHiddenType(option, (e?.currentTarget as HTMLElement)?.classList.contains("off"));
+                (e?.currentTarget as HTMLElement)?.classList.toggle("off");
+            });
+        });
+        document.querySelector("#unit-visibility-control")?.append(...this.#optionButtons["visibility"]);
     }
 
     setLayer(layerName: string) {
@@ -535,4 +547,13 @@ export class Map extends L.Map {
                 this.#destinationPreviewMarkers[idx].setLatLng(!e.originalEvent.shiftKey? latlng: this.getMouseCoordinates());
         })   
     }
+
+    #createOptionButton(value: string, url: string, title: string, callback: EventListenerOrEventListenerObject) {
+        var button = document.createElement("button");
+        button.title = title;
+        button.value = value;
+        button.innerHTML = `<img src="/resources/theme/images/buttons/${url}" onload="SVGInject(this)" />`
+        button.addEventListener("click", callback);
+        return button;
+    }
 } 

client/src/units/unit.ts

@@ -287,9 +287,15 @@ export class Unit extends Marker {
 
     /********************** Visibility *************************/
     updateVisibility() {
-        this.setHidden(document.body.getAttribute(`data-hide-${this.getMissionData().coalition}`) != null ||
-            document.body.getAttribute(`data-hide-${this.getMarkerCategory()}`) != null ||
-            !this.getBaseData().alive)
+        var hidden = false;
+        const hiddenUnits = getUnitsManager().getHiddenTypes();
+        if (this.getMissionData().flags.Human && hiddenUnits.includes("human"))
+            hidden = true;
+        else if (this.getBaseData().AI == false && hiddenUnits.includes("dcs"))
+            hidden = true;
+        else if (hiddenUnits.includes(this.getMarkerCategory()))
+            hidden = true;
+        this.setHidden(document.body.getAttribute(`data-hide-${this.getMissionData().coalition}`) != null || hidden || !this.getBaseData().alive);
     }
 
     setHidden(hidden: boolean) {
@@ -739,7 +745,7 @@ export class GroundUnit extends Unit {
     getMarkerHTML() {
         var role = groundUnitsDatabase.getByName(this.getBaseData().name)?.loadouts[0].roles[0];
         return `<div class="unit" data-object="unit-${this.getMarkerCategory()}" data-coalition="${this.getMissionData().coalition}">
-                    <div class="unit-marker"><img src="/resources/theme/images/units/groundunit-${this.getMarkerCategory()}.svg" onload="SVGInject(this)"/></div>
+                    <div class="unit-marker"><img src="/resources/theme/images/units/${this.getMarkerCategory()}.svg" onload="SVGInject(this)"/></div>
                     <div class="unit-short-label">${role?.substring(0, 1)?.toUpperCase() || ""}</div>
                     <div class="unit-hotgroup">
                         <div class="unit-hotgroup-id"></div>
@@ -750,7 +756,7 @@ export class GroundUnit extends Unit {
     getMarkerCategory() {
         // TODO this is very messy
         var role = groundUnitsDatabase.getByName(this.getBaseData().name)?.loadouts[0].roles[0];
-        var markerCategory = (role === "SAM") ? "sam" : "other";
+        var markerCategory = (role === "SAM") ? "groundunit-sam" : "groundunit-other";
         return markerCategory;
     }
 }

client/src/units/unitsmanager.ts

@@ -10,6 +10,7 @@ export class UnitsManager {
     #copiedUnits: Unit[];
     #selectionEventDisabled: boolean = false;
     #pasteDisabled: boolean = false;
+    #hiddenTypes: string[] = [];
 
     constructor() {
         this.#units = {};
@@ -87,6 +88,23 @@ export class UnitsManager {
         });
     }
 
+    setHiddenType(key: string, value: boolean)
+    {
+        if (value)
+        {
+            if (this.#hiddenTypes.includes(key))
+                delete this.#hiddenTypes[this.#hiddenTypes.indexOf(key)];
+        }
+        else
+            this.#hiddenTypes.push(key);
+        Object.values(this.getUnits()).forEach((unit: Unit) => unit.updateVisibility());
+    }
+
+    getHiddenTypes()
+    {
+        return this.#hiddenTypes;
+    }
+
     selectUnit(ID: number, deselectAllUnits: boolean = true) {
         if (deselectAllUnits)
             this.getSelectedUnits().filter((unit: Unit) => unit.ID !== ID).forEach((unit: Unit) => unit.setSelected(false));