Realty Scene refactoring (#32)

2gis · Mar 1, 2024 · 0a007f6 · 0a007f6
1 parent 627a318
commit 0a007f6
Show file tree

Hide file tree

Showing 11 changed files with 614 additions and 768 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -6,25 +6,12 @@
         <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
         <style>
             html,
-            body {
-                height: 100%;
-                margin: 0;
-                padding: 0;
-            }
-
-            body {
-                padding: 12px;
-            }
-
+            body,
             #container {
-                height: 400px;
-                width: 800px;
-            }
-
-            #stats {
-                background-color: rgba(255, 255, 255, 0.8);
-                max-width: 100%;
-                overflow-y: auto;
+                margin: 0;
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
             }
         </style>
     </head>

diff --git a/demo/index.ts b/demo/index.ts
@@ -10,7 +10,7 @@ async function start() {
 
     const map = new mapglAPI.Map('container', {
         center: [47.245286302641034, 56.134743473834099],
-        zoom: 17.9,
+        zoom: 18.9,
         key: 'cb20c5bf-34d3-4f0e-9b2b-33e9b8edb57f',
         pitch: 45,
         rotation: 330,
@@ -20,7 +20,7 @@ async function start() {
     (window as any).map = map;
 
     const plugin = new GltfPlugin(map, {
-        modelsLoadStrategy: 'dontWaitAll',
+        modelsLoadStrategy: 'waitAll',
         modelsBaseUrl: 'https://disk.2gis.com/digital-twin/models_s3/realty_ads/zgktechnology/',
         floorsControl: { position: 'centerRight' },
         poiConfig: {
@@ -34,7 +34,7 @@ async function start() {
         hoverHighlight: {
             intencity: 0.1,
         },
-        groundCoveringColor: 'rgba(233, 232, 220, 0.8)',
+        groundCoveringColor: 'rgba(0, 0, 0, 0.8)',
     });
 
     (window as any).gltfPlugin = plugin;
@@ -46,7 +46,7 @@ async function start() {
         .getContainer()
         .addEventListener('click', () => {
             plugin.removeRealtyScene();
-            plugin.addRealtyScene(REALTY_SCENE, { modelId: '03a234cb', floorId: '235034' });
+            plugin.addRealtyScene(REALTY_SCENE);
         });
 
     new mapglAPI.Control(map, '<button>Remove Scene</button>', {
@@ -63,7 +63,9 @@ async function start() {
         .getContainer()
         .addEventListener('click', () => {
             plugin.removeRealtyScene();
-            plugin.addRealtyScene(REALTY_SCENE_1, { modelId: 'ds321ba234cb' });
+            plugin.addRealtyScene(REALTY_SCENE_1, {
+                buildingId: 'ds321ba234cb',
+            });
         });
 
     new mapglAPI.Control(map, '<button>Remove Scene 1</button>', {

diff --git a/demo/mocks.ts b/demo/mocks.ts
@@ -7,14 +7,15 @@ export const REALTY_SCENE: BuildingOptions[] = [
         modelUrl: 'zgktechnology1.glb',
         rotateZ: -15.1240072739039,
         linkedIds: ['70030076555823021'],
+        interactive: true,
         mapOptions: {
             center: [47.24547737708662, 56.134591508663135],
             pitch: 40,
             zoom: 19,
             rotation: -41.4,
         },
         popupOptions: {
-            coordinates: [47.24511721603574, 56.13451456056651],
+            coordinates: [47.24498128610925, 56.13451011334241],
             title: 'Корпус 1. 11 этажей',
             description: 'Срок сдачи: IV кв. 2024 г. <br />15 мин. пешком до ст. м. Московская',
         },
@@ -29,9 +30,10 @@ export const REALTY_SCENE: BuildingOptions[] = [
                     zoom: 20,
                     rotation: -57.5,
                 },
+                isUnderground: true,
                 poiGroups: [
                     {
-                        id: 1111,
+                        id: '1111',
                         type: 'primary',
                         minZoom: 19.5,
                         elevation: 5,
@@ -81,7 +83,6 @@ export const REALTY_SCENE: BuildingOptions[] = [
                 id: '000034',
                 text: '11',
                 modelUrl: 'zgktechnology1_floor11.glb',
-                isUnderground: true,
                 mapOptions: {
                     center: [47.24556663327373, 56.13456998211929],
                     pitch: 40,
@@ -90,7 +91,7 @@ export const REALTY_SCENE: BuildingOptions[] = [
                 },
                 poiGroups: [
                     {
-                        id: 1111,
+                        id: '1111',
                         type: 'primary',
                         minZoom: 19,
                         elevation: 35,
@@ -142,8 +143,9 @@ export const REALTY_SCENE: BuildingOptions[] = [
         modelId: '1ba234cb',
         coordinates: [47.245286302641034, 56.134743473834099],
         modelUrl: 'zgktechnology2.glb',
-        rotateY: -15.1240072739039,
+        rotateZ: -15.1240072739039,
         linkedIds: ['70030076555821177'],
+        interactive: true,
         mapOptions: {
             center: [47.245008950283065, 56.1344698491912],
             pitch: 45,
@@ -160,7 +162,6 @@ export const REALTY_SCENE: BuildingOptions[] = [
                 id: 'aaa777',
                 text: '2-15',
                 modelUrl: 'zgktechnology2_floor2.glb',
-                isUnderground: true,
                 mapOptions: {
                     center: [47.24463456947374, 56.134675042798094],
                     pitch: 35,
@@ -169,7 +170,7 @@ export const REALTY_SCENE: BuildingOptions[] = [
                 },
                 poiGroups: [
                     {
-                        id: 1111,
+                        id: '1111',
                         type: 'primary',
                         minZoom: 19.7,
                         elevation: 7,
@@ -255,7 +256,7 @@ export const REALTY_SCENE: BuildingOptions[] = [
                 },
                 poiGroups: [
                     {
-                        id: 1111,
+                        id: '1111',
                         type: 'primary',
                         minZoom: 18.9,
                         elevation: 53,
@@ -335,7 +336,7 @@ export const REALTY_SCENE: BuildingOptions[] = [
         modelId: 'eda234cb',
         coordinates: [47.245286302641034, 56.134743473834099],
         modelUrl: 'zgktechnology_construction.glb',
-        rotateY: -15.1240072739039,
+        rotateZ: -15.1240072739039,
         linkedIds: ['70030076561388553'],
         interactive: false,
     },
@@ -346,8 +347,9 @@ export const REALTY_SCENE_1: BuildingOptions[] = [
         modelId: 'ds321ba234cb',
         coordinates: [47.245286302641034, 56.134743473834099],
         modelUrl: 'zgktechnology2.glb',
-        rotateY: -15.1240072739039,
+        rotateZ: -15.1240072739039,
         linkedIds: ['70030076555823021', '70030076555821177', '70030076555823021'],
+        interactive: true,
         mapOptions: {
             center: [47.245008950283065, 56.1344698491912],
             pitch: 45,
@@ -388,7 +390,7 @@ export const REALTY_SCENE_1: BuildingOptions[] = [
         modelId: '345feda234cb',
         coordinates: [47.245286302641034, 56.134743473834099],
         modelUrl: 'zgktechnology_construction.glb',
-        rotateY: -15.1240072739039,
+        rotateZ: -15.1240072739039,
         linkedIds: ['70030076561388553'],
         interactive: false,
     },

diff --git a/src/control/index.ts b/src/control/index.ts
@@ -1,13 +1,11 @@
 import type { Map as MapGL, ControlOptions } from '@2gis/mapgl/types';
-
-import type { Id } from '../types/plugin';
-import type { ControlShowOptions } from './types';
+import type { ControlShowOptions, FloorLevel } from './types';
 
 import icon_building from 'raw-loader!./icon_building.svg';
 import icon_parking from 'raw-loader!./icon_parking.svg';
-import { Control } from './control';
 import classes from './control.module.css';
-import { createCompoundId } from '../utils/common';
+import { Control } from './control';
+import { Id } from '../types';
 
 const content = /* HTML */ `
     <div class="${classes.root}">
@@ -31,7 +29,6 @@ const content = /* HTML */ `
  * @internal
  */
 export class GltfFloorControl extends Control {
-    private _map: MapGL;
     private _root: HTMLElement;
     private _content: HTMLElement;
     private _contentHome: HTMLElement;
@@ -41,7 +38,6 @@ export class GltfFloorControl extends Control {
 
     constructor(map: MapGL, options: ControlOptions) {
         super(map, content, options);
-        this._map = map;
         this._root = this._wrap.querySelector(`.${classes.root}`) as HTMLElement;
         this._content = this._wrap.querySelector(`.${classes.content}`) as HTMLElement;
         this._contentHome = this._wrap.querySelector(`.${classes.contentHome}`) as HTMLElement;
@@ -52,16 +48,16 @@ export class GltfFloorControl extends Control {
     public show(options: ControlShowOptions) {
         this._removeButtonsEventListeners();
 
-        const { modelId, floorId, floorLevels = [] } = options;
+        const { buildingModelId, activeModelId, floorLevels = [] } = options;
 
-        this._currentFloorId = createCompoundId(modelId, floorId);
+        this._currentFloorId = activeModelId;
         this._root.style.display = 'block';
         this._content.innerHTML = '';
         this._contentHome.innerHTML = '';
         let currentButton: HTMLElement | undefined;
 
-        floorLevels.forEach(({ floorId, text, icon }) => {
-            const rootContent = floorId === undefined ? this._contentHome : this._content;
+        floorLevels.forEach(({ modelId, text, icon }) => {
+            const rootContent = modelId === buildingModelId ? this._contentHome : this._content;
             const button = document.createElement('button');
             let buttonContent = text;
             if (icon) {
@@ -75,14 +71,13 @@ export class GltfFloorControl extends Control {
             }
             button.className = classes.control;
             button.innerHTML = `<div class="${classes.label}">${buttonContent}</div>`;
-            const id = createCompoundId(modelId, floorId);
-            button.name = id;
-            if (this._currentFloorId === id) {
+            button.name = modelId;
+            if (this._currentFloorId === modelId) {
                 button.disabled = true;
                 currentButton = button;
             }
 
-            const handler = this._controlHandler(modelId, floorId);
+            const handler = this._controlHandler(modelId);
             button.addEventListener('click', handler);
 
             this._handlers.set(button, handler);
@@ -125,22 +120,19 @@ export class GltfFloorControl extends Control {
         });
     }
 
-    private _controlHandler = (modelId: Id, floorId?: Id) => () => {
-        this.switchCurrentFloorLevel(modelId, floorId);
+    private _controlHandler = (modelId: Id) => () => {
+        this._switchCurrentFloorLevel(modelId);
 
-        this.emit('floorChange', {
+        this.emit('floorchange', {
             modelId,
-            floorId,
         });
     };
 
-    public switchCurrentFloorLevel(modelId: Id, floorId?: Id) {
+    private _switchCurrentFloorLevel(modelId: Id) {
         if (this._currentFloorId === undefined) {
             return;
         }
 
-        const id = createCompoundId(modelId, floorId);
-
         const buttonToDisabled: HTMLButtonElement | null = this._wrap.querySelector(
             `.${classes.control}[name="${this._currentFloorId}"]`,
         );
@@ -149,12 +141,12 @@ export class GltfFloorControl extends Control {
         }
 
         const buttonToEnabled: HTMLButtonElement | null = this._wrap.querySelector(
-            `.${classes.control}[name="${id}"]`,
+            `.${classes.control}[name="${modelId}"]`,
         );
         if (buttonToEnabled) {
             buttonToEnabled.disabled = true;
         }
 
-        this._currentFloorId = id;
+        this._currentFloorId = modelId;
     }
 }
diff --git a/src/control/types.ts b/src/control/types.ts
@@ -4,7 +4,7 @@ import { Id } from '../types/plugin';
  * Floor level data
  */
 export interface FloorLevel {
-    floorId?: Id;
+    modelId: Id; // id модели этажа или здания
     text: string;
     icon?: 'parking' | 'building' | string;
 }
@@ -13,22 +13,21 @@ export interface FloorLevel {
  * Options for the method show
  */
 export interface ControlShowOptions {
-    modelId: Id;
-    floorId?: Id;
+    buildingModelId: Id;
+    activeModelId: Id;
     floorLevels?: FloorLevel[];
 }
 
 /**
  * Event that emitted on button presses of the control
  */
 export interface FloorChangeEvent {
-    modelId: Id;
-    floorId?: Id;
+    modelId: Id; // id модели этажа или здания
 }
 
 export interface ControlEventTable {
     /**
      * Emitted when floor's plan was changed
      */
-    floorChange: FloorChangeEvent;
+    floorchange: FloorChangeEvent;
 }