Remove methods and types (#25)

* Fix plugin on mapgl styles reload * removeModels method * Add removeRealtyScene method * Init fix. Min|max zoom. Stats * Remove redundant from npm package. Now tests have individual data mocks * REmove min|max zoom * Tests * Types * remove some fixes * Style change test * Fix review * Fix review * Ru » En
2gis · Sep 28, 2023 · 81c4dfa · 81c4dfa
1 parent 4c2ae9b
commit 81c4dfa
Show file tree

Hide file tree

Showing 31 changed files with 1,030 additions and 399 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,7 @@
 dist/
 node_modules/
+__diff_output__
 
 .vscode/
+
+.DS_Store
diff --git a/demo/index.html b/demo/index.html
@@ -8,27 +8,29 @@
             html,
             body {
                 height: 100%;
-                padding: 0;
                 margin: 0;
+                padding: 0;
             }
 
-            .outer {
-                display: flex;
-                height: 100%;
-                align-items: center;
-                justify-content: center;
+            body {
+                padding: 12px;
             }
 
             #container {
-                height: 50%;
+                height: 400px;
                 width: 800px;
             }
+
+            #stats {
+                background-color: rgba(255, 255, 255, 0.8);
+                max-width: 100%;
+                overflow-y: auto;
+            }
         </style>
     </head>
     <body>
-        <div class="outer">
-            <div class="aux"></div>
-            <div id="container"></div>
-        </div>
+        <div id="container"></div>
+        <h2>Stats</h2>
+        <div id="stats"></div>
     </body>
 </html>
diff --git a/demo/index.ts b/demo/index.ts
@@ -1,7 +1,9 @@
 import { load } from '@2gis/mapgl';
 
 import { GltfPlugin } from '../src/index';
-import { realtyScene } from './realtySceneData';
+import { REALTY_SCENE, REALTY_SCENE_1 } from './mocks';
+
+let isDarkTheme = false;
 
 async function start() {
     const mapglAPI = await load();
@@ -18,9 +20,10 @@ async function start() {
     (window as any).map = map;
 
     const plugin = new GltfPlugin(map, {
-        modelsLoadStrategy: 'waitAll',
+        modelsLoadStrategy: 'dontWaitAll',
         modelsBaseUrl: 'https://disk.2gis.com/digital-twin/models_s3/realty_ads/zgktechnology/',
         dracoScriptsUrl: 'libs/draco/',
+        floorsControl: { position: 'centerRight' },
         poiConfig: {
             primary: {
                 fontSize: 14,
@@ -34,93 +37,109 @@ async function start() {
         },
     });
 
-    const defaultState = {
-        modelId: '03a234cb',
-        // floorId: '235034',
-    };
+    (window as any).gltfPlugin = plugin;
+    (window as any).realtyScene = REALTY_SCENE;
+
+    new mapglAPI.Control(map, '<button>Add Scene</button>', {
+        position: 'topLeft',
+    })
+        .getContainer()
+        .addEventListener('click', () => {
+            plugin.removeRealtyScene();
+            plugin.addRealtyScene(REALTY_SCENE, { modelId: '03a234cb', floorId: '235034' });
+        });
+
+    new mapglAPI.Control(map, '<button>Remove Scene</button>', {
+        position: 'topLeft',
+    })
+        .getContainer()
+        .addEventListener('click', () => {
+            plugin.removeRealtyScene();
+        });
+
+    new mapglAPI.Control(map, '<button>Add Scene 1</button>', {
+        position: 'topLeft',
+    })
+        .getContainer()
+        .addEventListener('click', () => {
+            plugin.removeRealtyScene();
+            plugin.addRealtyScene(REALTY_SCENE_1, { modelId: 'ds321ba234cb' });
+        });
+
+    new mapglAPI.Control(map, '<button>Remove Scene 1</button>', {
+        position: 'topLeft',
+    })
+        .getContainer()
+        .addEventListener('click', () => {
+            plugin.removeRealtyScene();
+        });
+
+    new mapglAPI.Control(map, '<button>Add Model</button>', {
+        position: 'topLeft',
+    })
+        .getContainer()
+        .addEventListener('click', () => {
+            plugin.addModel(REALTY_SCENE[0]);
+        });
+
+    new mapglAPI.Control(map, '<button>Remove Model</button>', {
+        position: 'topLeft',
+    })
+        .getContainer()
+        .addEventListener('click', () => {
+            plugin.removeModel(REALTY_SCENE[0].modelId);
+        });
 
-    plugin.addRealtyScene(realtyScene);
+    new mapglAPI.Control(map, '<button>Add Models</button>', {
+        position: 'topLeft',
+    })
+        .getContainer()
+        .addEventListener('click', () => {
+            plugin.addModels(REALTY_SCENE.slice(1));
+        });
+
+    new mapglAPI.Control(map, '<button>Remove Models</button>', {
+        position: 'topLeft',
+    })
+        .getContainer()
+        .addEventListener('click', () => {
+            plugin.removeModels(REALTY_SCENE.slice(1).map((m) => m.modelId));
+        });
+
+    new mapglAPI.Control(map, '<button style="margin-top: 8px">Toggle Theme</button>', {
+        position: 'topLeft',
+    })
+        .getContainer()
+        .addEventListener('click', () => {
+            map.setStyleById(
+                isDarkTheme
+                    ? 'c080bb6a-8134-4993-93a1-5b4d8c36a59b'
+                    : 'e05ac437-fcc2-4845-ad74-b1de9ce07555',
+            );
+            isDarkTheme = !isDarkTheme;
+        });
 
     (['click'] as const).forEach((eventName) => {
         plugin.on(eventName, (e) => {
             console.log(e);
         });
     });
 
-    /*
-    const models: ModelOptions[] = [];
-    for (let i = 0; i < 10; i++) {
-        let lonRnd = (Math.random() / 100) * (Math.random() > 0.5 ? 1 : -1);
-        let latRnd = (Math.random() / 100) * (Math.random() > 0.5 ? 1 : -1);
-        models.push({
-            modelId: i,
-            coordinates: [82.8865 + lonRnd, 54.9809 + latRnd],
-            modelUrl: 'models/cube_draco.glb',
-            rotateX: 90,
-            scale: 3000,
-            linkedIds: ['141373143530065', '70030076379181421'],
-            userData: {
-                test: 'Test userData ' + i,
-            },
-        });
-    }
-
-    plugin
-        .addModels(models)
-        .then(() => {
-            console.log('Models are loaded');
-        })
-        .catch((e) => {
-            console.error(e);
-        });
+    const statsTable = document.getElementById('stats');
 
-    plugin.addPoiGroup(
-        {
-            id: 1,
-            type: 'primary',
-            minZoom: 15,
-            elevation: 130,
-            fontSize: 16,
-            fontColor: '#3a3a3a',
-            data: [
-                {
-                    coordinates: [82.886454, 54.980388],
-                    elevation: 130,
-                    label: '3к\n78.4 м²',
-                    userData: {
-                        url: 'https://a101.ru/kvartiry/360810/',
-                    },
-                },
-            ],
-        },
-        {
-            modelId: '12345',
-            floorId: '234234',
-        },
-    );
-
-    plugin.addPoiGroup(
-        {
-            id: 2,
-            type: 'secondary',
-            minZoom: 17,
-            elevation: 30,
-            data: [
-                {
-                    coordinates: [82.886554, 54.980988],
-                    label: '10 м²',
-                    userData: {
-                        url: 'https://a101.ru/kvartiry/360810/',
-                    },
-                },
-            ],
-        },
-        {
-            modelId: '12345',
-            floorId: '234234',
-        },
-    );
-    */
+    const printStats = () => {
+        if (!statsTable) {
+            return;
+        }
+        statsTable.innerHTML = `<pre>${JSON.stringify(
+            plugin.getModelRendererInfo(),
+            null,
+            2,
+        )}</pre>`;
+
+        requestAnimationFrame(printStats);
+    };
+    requestAnimationFrame(printStats);
 }
 
 start();