Plugin Refactoring PreFinal

demo/index.ts

@@ -6,7 +6,7 @@ import { REALTY_SCENE, REALTY_SCENE_1 } from './mocks';
 let isDarkTheme = false;
 
 async function start() {
-    const mapglAPI = await load('https://mapgl.2gis.com/api/js/v0.0.323');
+    const mapglAPI = await load();
 
     const map = new mapglAPI.Map('container', {
         center: [47.245286302641034, 56.134743473834099],
@@ -15,6 +15,7 @@ async function start() {
         pitch: 45,
         rotation: 330,
         enableTrackResize: true,
+        webglVersion: 1,
     });
 
     (window as any).map = map;
@@ -23,16 +24,8 @@ async function start() {
         modelsLoadStrategy: 'dontWaitAll',
         modelsBaseUrl: 'https://disk.2gis.com/digital-twin/models_s3/realty_ads/zgktechnology/',
         floorsControl: { position: 'centerRight' },
-        poiConfig: {
-            primary: {
-                fontSize: 14,
-            },
-            secondary: {
-                fontSize: 14,
-            },
-        },
         hoverOptions: {
-            color: '#FFEFEF',
+            color: '#FFF3F3',
         },
         groundCoveringColor: 'rgba(0, 0, 0, 0.8)',
     });

package.json

@@ -37,7 +37,7 @@
   "author": "2GIS WebMaps Team",
   "license": "BSD-2-Clause",
   "devDependencies": {
-    "@2gis/mapgl": "1.37.2",
+    "@2gis/mapgl": "1.46.0",
     "@documentalist/compiler": "^2.8.1",
     "@types/geojson": "^7946.0.10",
     "@types/jest": "^27.4.0",

src/constants.ts

@@ -1,5 +1,7 @@
 import type { GeoJsonSourceOptions } from '@2gis/mapgl/types';
 
+export const PLUGIN_PREFIX = '__mapglPlugins_mapgl-gltf2';
+
 export const GROUND_COVERING_SOURCE_DATA: GeoJsonSourceOptions['data'] = {
     type: 'Feature',
     properties: {},
@@ -17,9 +19,10 @@ export const GROUND_COVERING_SOURCE_DATA: GeoJsonSourceOptions['data'] = {
     },
 };
 
-export const GROUND_COVERING_SOURCE_PURPOSE = '__mapglPlugins_mapgl-gltf';
+export const GROUND_COVERING_SOURCE_PURPOSE = `${PLUGIN_PREFIX}-covering`;
+export const GROUND_COVERING_LAYER_ID = `${PLUGIN_PREFIX}-covering`;
 export const GROUND_COVERING_LAYER = {
-    id: '__mapglPlugins_mapgl-gltf',
+    id: GROUND_COVERING_LAYER_ID,
     type: 'polygon',
     style: {
         color: ['to-color', ['sourceAttr', 'color']],
@@ -30,3 +33,5 @@ export const GROUND_COVERING_LAYER = {
         ['to-boolean', ['sourceAttr', 'color']],
     ],
 };
+
+export const pluginEvents = ['click', 'mousemove', 'mouseover', 'mouseout'] as const;

src/control/index.ts

@@ -5,7 +5,6 @@ import icon_building from 'raw-loader!./icon_building.svg';
 import icon_parking from 'raw-loader!./icon_parking.svg';
 import classes from './control.module.css';
 import { Control } from './control';
-import { Id } from '../types';
 
 const content = /* HTML */ `
     <div class="${classes.root}">
@@ -120,15 +119,15 @@ export class GltfFloorControl extends Control {
         });
     }
 
-    private _controlHandler = (modelId: Id) => () => {
+    private _controlHandler = (modelId: string) => () => {
         this._switchCurrentFloorLevel(modelId);
 
         this.emit('floorchange', {
             modelId,
         });
     };
 
-    private _switchCurrentFloorLevel(modelId: Id) {
+    private _switchCurrentFloorLevel(modelId: string) {
         if (this._currentFloorId === undefined) {
             return;
         }

src/control/types.ts

@@ -1,10 +1,8 @@
-import { Id } from '../types/plugin';
-
 /**
  * Floor level data
  */
 export interface FloorLevel {
-    modelId: Id; // id модели этажа или здания
+    modelId: string; // id модели этажа или здания
     text: string;
     icon?: 'parking' | 'building' | string;
 }
@@ -13,16 +11,16 @@ export interface FloorLevel {
  * Options for the method show
  */
 export interface ControlShowOptions {
-    buildingModelId: Id;
-    activeModelId: Id;
+    buildingModelId: string;
+    activeModelId: string;
     floorLevels?: FloorLevel[];
 }
 
 /**
  * Event that emitted on button presses of the control
  */
 export interface FloorChangeEvent {
-    modelId: Id; // id модели этажа или здания
+    modelId: string; // id модели этажа или здания
 }
 
 export interface ControlEventTable {

src/defaultOptions.ts

@@ -6,16 +6,6 @@ export const defaultOptions: Required<PluginOptions> = {
     },
     modelsBaseUrl: '',
     modelsLoadStrategy: 'waitAll',
-    poiConfig: {
-        primary: {
-            fontSize: 14,
-            fontColor: '#000000',
-        },
-        secondary: {
-            fontSize: 14,
-            fontColor: '#000000',
-        },
-    },
     floorsControl: {
         position: 'centerLeft',
     },

src/labelGroups.ts

@@ -0,0 +1,61 @@
+import type { Map as MapGL, Label } from '@2gis/mapgl/types';
+import type { BuildingState, LabelGroupOptions } from './types/plugin';
+import { GltfPlugin } from './plugin';
+// import { pluginEvents } from './constants';
+// import { createLabelEvenData } from './utils/events';
+
+export class LabelGroups {
+    private labelsByGroupId: Map<string, Label[]> = new Map();
+
+    constructor(private map: MapGL, private plugin: GltfPlugin) {}
+
+    public add(groupOptions: LabelGroupOptions, state?: BuildingState) {
+        const { id } = groupOptions;
+        if (this.labelsByGroupId.has(id)) {
+            console.error(
+                `Poi group with id "${id}" already exists. Please use different identifiers for poi groups`,
+            );
+            return;
+        }
+
+        const { image, minZoom, maxZoom, fontColor: color, fontSize } = groupOptions;
+        const labels = groupOptions.labels.map((labelOptions) => {
+            const { coordinates, text, userData } = labelOptions;
+            const label = new mapgl.Label(this.map, {
+                coordinates, // + label.elevation ?? groupOptions.elevation
+                text,
+                userData,
+                image,
+                minZoom,
+                maxZoom,
+                color,
+                fontSize,
+                relativeAnchor: [0.5, 1],
+                zIndex: 1, // чтобы были выше моделей
+            });
+
+            // pluginEvents.forEach((eventType) => {
+            //     label.on(eventType, (ev) => {
+            //         this.plugin.emit(eventType, createLabelEvenData(ev, labelOptions, state));
+            //     });
+            // });
+
+            return label;
+        });
+
+        this.labelsByGroupId.set(id, labels);
+    }
+
+    public remove(id: string) {
+        const labels = this.labelsByGroupId.get(id);
+        this.labelsByGroupId.delete(id);
+        labels?.forEach((label) => label.destroy());
+    }
+
+    public destroy() {
+        this.labelsByGroupId.forEach((labels) => {
+            labels.forEach((label) => label.destroy());
+        });
+        this.labelsByGroupId.clear();
+    }
+}