Improve indoor code structure (internal-8666)

GitOrigin-RevId: fddd003f56c9ef805bf2f2fe4800b4af9de4758f

Author: aleksproger

debug/indoor.html

@@ -37,12 +37,13 @@
             bearing: -15,
             pitch: 50,
             center: [24.941915, 60.171768],
-            hash: true,
-            style: style
+            hash: true
         });
 
         map.addControl(new mapboxgl.NavigationControl());
         map.addControl(new mapboxgl.AttributionControl());
+
+        map.setStyle(style);
     </script>
 </body>
 

package.json

@@ -199,7 +199,7 @@
       ]
     },
     {
-      "limit": "5.4 kb",
+      "limit": "5.41 kb",
       "gzip": true,
       "path": "dist/mapbox-gl.css"
     }

src/css/mapbox-gl.css

@@ -845,6 +845,12 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
     width: 50px;
     height: 50px;
     font-weight: bold;
+    text-align: center;
+    line-height: normal;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .mapboxgl-ctrl button.mapboxgl-ctrl-level-button:first-child {

src/source/geojson_source.ts

@@ -465,7 +465,7 @@ class GeoJSONSource extends Evented<SourceEvents> implements ISource {
             scaleFactor: this.map.getScaleFactor(),
             partial,
             worldview: this.map.getWorldview(),
-            indoor: this.map.indoor ? this.map.indoor.getIndoorTileOptions(this.id, this.scope) : null
+            indoor: this.map.getIndoorTileOptions(this.id, this.scope)
         };
 
         tile.request = this.actor.send(message, params, (err, data: WorkerSourceVectorTileResult) => {

src/source/vector_tile_source.ts

@@ -273,7 +273,7 @@ class VectorTileSource extends Evented<SourceEvents> implements ISource<'vector'
             tessellationStep: this.map._tessellationStep,
             scaleFactor: this.map.getScaleFactor(),
             worldview: this.map.getWorldview() || this.worldviewDefault,
-            indoor: this.map.indoor ? this.map.indoor.getIndoorTileOptions(this.id, this.scope) : null
+            indoor: this.map.getIndoorTileOptions(this.id, this.scope)
         };
 
         // If we request a Mapbox URL, use the `worldview` param in the WorkerTile

src/style/indoor_data.ts

@@ -16,6 +16,8 @@ export type IndoorFloor = {
 
 export type IndoorEvents = {
     'selector-update': IndoorControlModel;
+    'buildings-appeared': Record<string, never>;
+    'buildings-disappeared': Record<string, never>;
 };
 
 export type IndoorControlFloor = {

src/style/indoor_manager.ts

@@ -98,6 +98,7 @@ export default class IndoorManager extends Evented<IndoorEvents> {
         const closestBuilding = (closestBuildingId && buildings) ? buildings[closestBuildingId] : undefined;
 
         if (!closestBuilding) {
+            this.fire(new Event('buildings-disappeared', {}));
             this.fire(new Event('selector-update', {
                 selectedFloorId: null,
                 activeFloorsVisible: this._activeFloorsVisible,
@@ -106,6 +107,7 @@ export default class IndoorManager extends Evented<IndoorEvents> {
             return;
         }
 
+        this.fire(new Event('buildings-appeared', {}));
         let buildingActiveFloorId: string | null = null;
         for (const floorId of closestBuilding.floorIds) {
             if (this._activeFloors && this._activeFloors.has(floorId)) {

src/style/style.ts

@@ -67,6 +67,7 @@ import {TargetFeature} from '../util/vectortile_to_geojson';
 import {loadIconset} from './load_iconset';
 import {ImageId} from '../style-spec/expression/types/image_id';
 import {ImageProvider} from '../render/image_provider';
+import IndoorManager from './indoor_manager';
 
 import type {PropertyValidatorOptions} from '../style-spec/validate/validate_property';
 import type Tile from '../source/tile';
@@ -276,6 +277,7 @@ class Style extends Evented<MapEvents> {
     imageManager: ImageManager;
     glyphManager: GlyphManager;
     modelManager: ModelManager;
+    indoorManager: IndoorManager;
     ambientLight: Lights<Ambient> | null | undefined;
     directionalLight: Lights<Directional> | null | undefined;
     light: Light;
@@ -414,6 +416,8 @@ class Style extends Evented<MapEvents> {
 
         this._hasDataDrivenEmissive = false;
 
+        this.indoorManager = new IndoorManager(this);
+
         if (options.dispatcher) {
             this.dispatcher = options.dispatcher;
         } else {
@@ -888,6 +892,7 @@ class Style extends Evented<MapEvents> {
                 this._loadImports(json.imports, validate)
                     .then(() => {
                         this._reloadImports();
+                        this._setupIndoor();
                         this.fire(new Event(isRootStyle ? 'style.load' : 'style.import.load'));
                     })
                     .catch((e) => {
@@ -897,6 +902,7 @@ class Style extends Evented<MapEvents> {
                     });
             } else {
                 this._reloadImports();
+                this._setupIndoor();
                 this.fire(new Event(isRootStyle ? 'style.load' : 'style.import.load'));
             }
         };
@@ -2466,7 +2472,7 @@ class Style extends Evented<MapEvents> {
     }
 
     setIndoorData(mapId: string, params: ActorMessages['setIndoorData']['params']) {
-        this.map.indoor.setIndoorData(params);
+        this.indoorManager.setIndoorData(params);
     }
 
     updateIndoorDependentLayers() {
@@ -3220,6 +3226,7 @@ class Style extends Evented<MapEvents> {
             fog: this.stylesheet.fog,
             snow: this.stylesheet.snow,
             rain: this.stylesheet.rain,
+            indoor: this.stylesheet.indoor,
             center: this.stylesheet.center,
             'color-theme': this.stylesheet['color-theme'],
             zoom: this.stylesheet.zoom,
@@ -4016,6 +4023,7 @@ class Style extends Evented<MapEvents> {
         delete this.terrain;
         delete this.ambientLight;
         delete this.directionalLight;
+        this.indoorManager.destroy();
 
         // Shared managers should be removed only on removing the root style
         if (this.isRootStyle()) {
@@ -4615,6 +4623,25 @@ class Style extends Evented<MapEvents> {
         this.dispatcher.broadcast('clearCaches');
     }
 
+    _setupIndoor() {
+        this.indoorManager.on('buildings-appeared', () => {
+            this.map._addIndoorControl();
+        });
+
+        this.indoorManager.on('buildings-disappeared', () => {
+            this.map._removeIndoorControl();
+        });
+
+        const updateUI = () => {
+            this.indoorManager._updateUI(this.map.transform.zoom, this.map.transform.center, this.map.transform.getBounds());
+        };
+
+        this.map.on('move', updateUI);
+        this.map.on('idle', updateUI);
+
+        updateUI();
+    }
+
     destroy() {
         this._clearWorkerCaches();
         this.fragments.forEach(fragment => {

src/ui/control/indoor_control.ts

@@ -26,7 +26,9 @@ class IndoorControl implements IControl {
     onAdd(map: Map): HTMLElement {
         this._map = map;
         this._container = DOM.create('div', 'mapboxgl-ctrl mapboxgl-ctrl-group');
-        this._map.indoor.on('selector-update', (controlModel: IndoorControlModel) => this._onIndoorUpdate(controlModel));
+        if (this._map.style) {
+            this._map.style.indoorManager.on('selector-update', (controlModel: IndoorControlModel) => this._onIndoorUpdate(controlModel));
+        }
         return this._container;
     }
 
@@ -52,8 +54,8 @@ class IndoorControl implements IControl {
             this._container.remove();
         }
 
-        if (this._map && this._map.indoor) {
-            this._map.indoor.off('selector-update', this._onIndoorUpdate);
+        if (this._map && this._map.style) {
+            this._map.style.indoorManager.off('selector-update', this._onIndoorUpdate);
             this._map = null;
         }
     }

src/ui/map.ts

@@ -18,7 +18,6 @@ import {
     postAddedAppearanceEvent
 } from '../util/mapbox';
 import Style from '../style/style';
-import IndoorManager from '../style/indoor_manager';
 import EvaluationParameters from '../style/evaluation_parameters';
 import Painter from '../render/painter';
 import Transform from '../geo/transform';
@@ -106,6 +105,7 @@ import type {SpriteFormat} from '../render/image_manager';
 import type {PitchRotateKey} from './handler_manager';
 import type {CustomSourceInterface} from '../source/custom_source';
 import type {RasterQueryParameters, RasterQueryResult} from '../source/raster_array_tile_source';
+import type {IndoorTileOptions} from '../style/indoor_data';
 
 export type ControlPosition = 'top-left' | 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left';
 
@@ -436,9 +436,7 @@ const defaultOptions = {
  */
 export class Map extends Camera {
     style?: Style;
-    indoor: IndoorManager;
     painter: Painter;
-
     _container: HTMLElement;
     _missingCSSCanary: HTMLElement;
     _canvasContainer: HTMLElement;
@@ -788,7 +786,6 @@ export class Map extends Camera {
             }
             this._postStyleLoadEvent();
             this._postStyleWithAppearanceEvent();
-            this._setupIndoor();
         });
 
         this.on('data', (event) => {
@@ -4125,26 +4122,33 @@ export class Map extends Camera {
      * map._selectIndoorFloor('floor-1');
      */
     _selectIndoorFloor(floorId: string) {
-        this.indoor.selectFloor(floorId);
+        this.style.indoorManager.selectFloor(floorId);
     }
 
     _setIndoorActiveFloorsVisibility(activeFloorsVisible: boolean) {
-        this.indoor.setActiveFloorsVisibility(activeFloorsVisible);
+        this.style.indoorManager.setActiveFloorsVisibility(activeFloorsVisible);
     }
 
     _addIndoorControl() {
         if (!this._indoorControl) {
             this._indoorControl = new IndoorControl();
+            this.addControl(this._indoorControl, 'right');
         }
-
-        this.addControl(this._indoorControl, 'right');
     }
 
     _removeIndoorControl() {
         if (!this._indoorControl) {
             return;
         }
         this.removeControl(this._indoorControl);
+        this._indoorControl = null;
+    }
+
+    getIndoorTileOptions(source: string, scope: string): IndoorTileOptions | null {
+        if (!this.style.isIndoorEnabled()) {
+            return null;
+        }
+        return this.style.indoorManager.getIndoorTileOptions(source, scope);
     }
 
     _updateContainerDimensions() {
@@ -4183,27 +4187,6 @@ export class Map extends Camera {
         }
     }
 
-    _setupIndoor() {
-        if (!this.style.isIndoorEnabled()) {
-            return;
-        }
-
-        this.indoor = new IndoorManager(this.style);
-
-        this.on('load', () => {
-            this._addIndoorControl();
-            this.indoor._updateUI(this.transform.zoom, this.transform.center, this.transform.getBounds());
-
-            this.on('move', () => {
-                this.indoor._updateUI(this.transform.zoom, this.transform.center, this.transform.getBounds());
-            });
-
-            this.on('idle', () => {
-                this.indoor._updateUI(this.transform.zoom, this.transform.center, this.transform.getBounds());
-            });
-        });
-    }
-
     _setupContainer() {
         const container = this._container;
         container.classList.add('mapboxgl-map');
@@ -4901,9 +4884,6 @@ export class Map extends Camera {
         if (this.style) {
             this.style.destroy();
         }
-        if (this.indoor) {
-            this.indoor.destroy();
-        }
         this.painter.destroy();
         if (this.handlers) this.handlers.destroy();
         this.handlers = undefined;