Make indoor control UI trivial (internal-9489)

aleksproger · github-actions[bot] · commit 2b136365ce0d · 2026-02-02T18:58:12.000Z
GitOrigin-RevId: 6c5fa581083a5ab5f10b794937f7da7b1023324d
diff --git a/src/style/indoor_manager.ts b/src/style/indoor_manager.ts
@@ -1,33 +1,27 @@
 import {bindAll} from '../util/util';
 import {Event, Evented} from '../util/evented';
 import LngLat from '../geo/lng_lat';
-import IndoorControl from '../ui/control/indoor_control';
 
 import type {IndoorBuilding, IndoorData, IndoorEvents, IndoorState, IndoorTileOptions} from './indoor_data';
 import type Style from './style';
 import type {LngLatBounds} from '../geo/lng_lat';
-
 export default class IndoorManager extends Evented<IndoorEvents> {
     _style: Style;
     _selectedFloorId: string | null;
     _closestBuildingId: string | null;
     _buildings: Record<string, IndoorBuilding> | null;
-    _indoorControl: IndoorControl | null;
-
     _activeFloors: Set<string> | null;
     _indoorState: IndoorState | null;
     _activeFloorsVisible: boolean;
-
     constructor(style: Style) {
         super();
         this._style = style;
         this._buildings = {};
-        this._indoorControl = null;
+
         this._activeFloors = new Set();
         this._activeFloorsVisible = true;
         this._indoorState = {selectedFloorId: null, lastActiveFloors: null, activeFloorsVisible: true};
         bindAll(['_updateUI'], this);
-
         const setupObservers = () => {
             if (this._style.isIndoorEnabled()) {
                 this._style.map.on('load', this._updateUI);
@@ -36,33 +30,26 @@ export default class IndoorManager extends Evented<IndoorEvents> {
                 this._updateUI();
             }
         };
-
         this._style.on('style.load', setupObservers);
     }
-
     destroy() {
         this._buildings = {};
         this._activeFloors = new Set();
         this._indoorState = null;
-        this._removeIndoorControl();
     }
-
     selectFloor(floorId: string | null) {
         if (floorId === this._selectedFloorId && this._activeFloorsVisible) {
             return;
         }
-
         this._selectedFloorId = floorId;
         this._activeFloorsVisible = true;
         this._updateActiveFloors();
     }
-
     setActiveFloorsVisibility(activeFloorsVisible: boolean) {
         this._activeFloorsVisible = activeFloorsVisible;
         this._updateActiveFloors();
         this._updateIndoorSelector();
     }
-
     /// Fan in data sent from different tiles and sources and merge it into the one state
     /// Both buildings and active floors updates are additive-only
     setIndoorData(indoorData: IndoorData) {
@@ -78,42 +65,22 @@ export default class IndoorManager extends Evented<IndoorEvents> {
                 this._buildings[id] = building;
             }
         }
-
         for (const floorId of indoorData.activeFloors) {
             this._activeFloors.add(floorId);
         }
-
         // Next step: Add debouncing to prevent excessive selector updates, though not visible
         this._updateIndoorSelector();
     }
-
     getIndoorTileOptions(sourceId: string, scope: string): IndoorTileOptions | null {
         const sourceLayers = this._style.getIndoorSourceLayers(sourceId, scope);
         if (!sourceLayers || !this._indoorState) {
             return null;
         }
-
         return {
             sourceLayers,
             indoorState: this._indoorState
         };
     }
-
-    _addIndoorControl() {
-        if (!this._indoorControl) {
-            this._indoorControl = new IndoorControl();
-            this._style.map.addControl(this._indoorControl, 'right');
-        }
-    }
-
-    _removeIndoorControl() {
-        if (!this._indoorControl) {
-            return;
-        }
-        this._indoorControl.onRemove();
-        this._indoorControl = null;
-    }
-
     _updateUI() {
         const transform = this._style.map.transform;
         const closestBuildingId = findClosestBuildingId(this._buildings, transform.center, transform.getBounds(), transform.zoom);
@@ -122,31 +89,24 @@ export default class IndoorManager extends Evented<IndoorEvents> {
             this._updateIndoorSelector();
         }
     }
-
-    _updateIndoorSelector() {
+    getControlState() {
         const buildings = this._buildings;
         const closestBuildingId = this._closestBuildingId;
         const closestBuilding = (closestBuildingId && buildings) ? buildings[closestBuildingId] : undefined;
-
         if (!closestBuilding) {
-            this._removeIndoorControl();
-            this.fire(new Event('selector-update', {
+            return {
                 selectedFloorId: null,
                 activeFloorsVisible: this._activeFloorsVisible,
                 floors: []
-            }));
-            return;
+            };
         }
-
-        this._addIndoorControl();
         let buildingActiveFloorId: string | null = null;
         for (const floorId of closestBuilding.floorIds) {
             if (this._activeFloors && this._activeFloors.has(floorId)) {
                 buildingActiveFloorId = floorId;
                 break;
             }
         }
-
         // Dedupe floors by zIndex before sending to the control:
         // we should only show one floor per zIndex for a given building.
         const floors = Array.from(closestBuilding.floorIds)
@@ -157,14 +117,15 @@ export default class IndoorManager extends Evented<IndoorEvents> {
             }))
             .sort((a, b) => b.zIndex - a.zIndex)
             .filter((floor, idx, arr) => idx === 0 || floor.zIndex !== arr[idx - 1].zIndex);
-
-        this.fire(new Event('selector-update', {
+        return {
             selectedFloorId: buildingActiveFloorId,
             activeFloorsVisible: this._activeFloorsVisible,
             floors
-        }));
+        };
+    }
+    _updateIndoorSelector() {
+        this.fire(new Event('selector-update', this.getControlState()));
     }
-
     // Update previous state and pass it to tiles
     // Resolve active floors to construct new set based on data from tiles
     // Tiles will resolve individual subsets of activeFloors and send it in setIndoorData
@@ -175,16 +136,13 @@ export default class IndoorManager extends Evented<IndoorEvents> {
         this._style.updateIndoorDependentLayers();
     }
 }
-
 function findClosestBuildingId(buildings: Record<string, IndoorBuilding>, mapCenter: LngLat, mapBounds: LngLatBounds, zoom: number): string | null {
     const indoorMinimumZoom: number = 16.0;
     let closestBuildingId: string | null = null;
     let minDistance = Number.MAX_SAFE_INTEGER;
-
     if (zoom < indoorMinimumZoom) {
         return null;
     }
-
     for (const [id, building] of Object.entries(buildings)) {
         const buildingCenter = building.center;
         if (buildingCenter) {
@@ -195,6 +153,5 @@ function findClosestBuildingId(buildings: Record<string, IndoorBuilding>, mapCen
             }
         }
     }
-
     return closestBuildingId;
 }
diff --git a/src/ui/control/indoor_control.ts b/src/ui/control/indoor_control.ts
@@ -20,18 +20,31 @@ class IndoorControl implements IControl {
     _model: IndoorControlModel | null;
 
     constructor() {
-        bindAll(['_onIndoorUpdate'], this);
+        bindAll(['_onIndoorUpdate', '_onStyleData'], this);
     }
 
     onAdd(map: Map): HTMLElement {
         this._map = map;
         this._container = DOM.create('div', 'mapboxgl-ctrl mapboxgl-ctrl-group');
-        if (this._map.style) {
-            this._map.style.indoorManager.on('selector-update', (controlModel: IndoorControlModel) => this._onIndoorUpdate(controlModel));
-        }
+        this._container.style.display = 'none';
+        this._map.on('styledata', this._onStyleData);
+        this._updateConnection();
         return this._container;
     }
 
+    _onStyleData() {
+        this._updateConnection();
+    }
+
+    _updateConnection() {
+        if (this._map && this._map.style && this._map.style.indoorManager) {
+            const manager = this._map.style.indoorManager;
+            manager.off('selector-update', this._onIndoorUpdate);
+            manager.on('selector-update', this._onIndoorUpdate);
+            this._onIndoorUpdate(manager.getControlState());
+        }
+    }
+
     _createButton(className: string, fn: (e: Event) => unknown): HTMLButtonElement {
         const a = DOM.create('button', className, this._container);
         a.type = 'button';
@@ -53,15 +66,17 @@ class IndoorControl implements IControl {
         if (this._container) {
             this._container.remove();
         }
-
-        if (this._map && this._map.style) {
-            this._map.style.indoorManager.off('selector-update', this._onIndoorUpdate);
+        if (this._map) {
+            this._map.off('styledata', this._onStyleData);
+            if (this._map.style) {
+                this._map.style.indoorManager.off('selector-update', this._onIndoorUpdate);
+            }
             this._map = null;
         }
     }
 
     getDefaultPosition(): ControlPosition {
-        return 'right';
+        return 'top-right';
     }
 
     _onIndoorUpdate(model: IndoorControlModel | null) {
@@ -70,16 +85,12 @@ class IndoorControl implements IControl {
             this._container.style.display = 'none';
             return;
         }
-
         const oldModel = this._model;
         this._model = model;
         this._container.style.display = 'inline-block';
-        this._container.style.borderRadius = '8px';
-
         if (oldModel) {
             Array.from(this._container.children).forEach(child => child.remove());
         }
-
         if (model.floors.length > 0) {
             this.addBuildingsToggleButton();
             this.addCurrentFloors(model.floors, model.activeFloorsVisible);
@@ -95,15 +106,11 @@ class IndoorControl implements IControl {
             }
         });
         DOM.create('span', `mapboxgl-ctrl-icon`, buildingsButton).setAttribute('aria-hidden', 'true');
-
         buildingsButton.classList.add('mapboxgl-ctrl-level-button', 'mapboxgl-ctrl-buildings-toggle');
-
         if (this._model && !this._model.activeFloorsVisible) {
             buildingsButton.classList.add('mapboxgl-ctrl-level-button-selected');
         }
-
         this._container.append(buildingsButton);
-        this._createSeparator();
     }
 
     _updateBuildingsButtonState() {
@@ -128,11 +135,9 @@ class IndoorControl implements IControl {
             const zIndexText = floor.zIndex.toString();
             const buttonTitle = floorName ? Array.from(floorName).slice(0, 3).join('') : zIndexText;
             this._setButtonTitle(levelButton, buttonTitle);
-
             if (this._model && floor.id === this._model.selectedFloorId && showSelectedFloor) {
                 levelButton.classList.add('mapboxgl-ctrl-level-button-selected');
             }
-
             this._container.append(levelButton);
 
             // Add separator after each button except the last one
@@ -142,5 +147,4 @@ class IndoorControl implements IControl {
         }
     }
 }
-
 export default IndoorControl;
diff --git a/test/unit/ui/control/indoor_control.test.ts b/test/unit/ui/control/indoor_control.test.ts
@@ -0,0 +1,79 @@
+import {test, describe, expect, vi} from '../../../util/vitest';
+import IndoorControl from '../../../../src/ui/control/indoor_control';
+
+import type {Map} from '../../../../src/ui/map';
+
+const createMockIndoorManager = (overrides = {}) => ({
+    on: vi.fn(),
+    off: vi.fn(),
+    getControlState: vi.fn().mockReturnValue({floors: [], activeFloorsVisible: true}),
+    updateControl: vi.fn(),
+    ...overrides
+});
+
+type Mock = ReturnType<typeof vi.fn>;
+
+type MockIndoorManager = ReturnType<typeof createMockIndoorManager>;
+
+const createMockMap = (indoorManager?: MockIndoorManager, overrides = {}) => ({
+    on: vi.fn(),
+    off: vi.fn(),
+    style: indoorManager ? {indoorManager} : undefined,
+    ...overrides
+} as unknown as Map);
+
+describe('IndoorControl', () => {
+    test('default position is top-right', () => {
+        const control = new IndoorControl();
+        expect(control.getDefaultPosition()).toBe('top-right');
+    });
+
+    test('onAdd subscribes to styledata and requests initial state', () => {
+        const indoorManager = createMockIndoorManager();
+        const map = createMockMap(indoorManager);
+
+        const control = new IndoorControl();
+        control.onAdd(map);
+
+        expect(map.on).toHaveBeenCalledWith('styledata', expect.any(Function));
+        expect(indoorManager.on).toHaveBeenCalledWith('selector-update', expect.any(Function));
+        expect(indoorManager.getControlState).toHaveBeenCalled();
+    });
+
+    test('re-binds on styledata event', () => {
+        const indoorManager = createMockIndoorManager();
+        const map = createMockMap(indoorManager);
+
+        const control = new IndoorControl();
+        control.onAdd(map);
+
+        const styleDataListener = (map.on as Mock).mock.calls[0][1] as () => void;
+
+        styleDataListener();
+
+        expect(indoorManager.off).toHaveBeenCalledWith('selector-update', expect.any(Function));
+        expect(indoorManager.on).toHaveBeenCalledTimes(2);
+        expect(indoorManager.getControlState).toHaveBeenCalledTimes(2);
+    });
+
+    test('onRemove cleans up listeners', () => {
+        const indoorManager = createMockIndoorManager();
+        const map = createMockMap(indoorManager);
+
+        const control = new IndoorControl();
+        control.onAdd(map);
+        control.onRemove();
+
+        expect(map.off).toHaveBeenCalledWith('styledata', expect.any(Function));
+        expect(indoorManager.off).toHaveBeenCalledWith('selector-update', expect.any(Function));
+    });
+
+    test('handles missing style or indoorManager gracefully', () => {
+        const map = createMockMap(undefined);
+
+        const control = new IndoorControl();
+        control.onAdd(map);
+
+        expect(map.on).toHaveBeenCalledWith('styledata', expect.any(Function));
+    });
+});
