Plugin refactoring prefinal (#33)

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.322');
+    const mapglAPI = await load();
 
     const map = new mapglAPI.Map('container', {
         center: [47.245286302641034, 56.134743473834099],
@@ -20,19 +20,11 @@ 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/',
         floorsControl: { position: 'centerRight' },
-        poiConfig: {
-            primary: {
-                fontSize: 14,
-            },
-            secondary: {
-                fontSize: 14,
-            },
-        },
-        hoverHighlight: {
-            intencity: 0.1,
+        hoverOptions: {
+            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}">
@@ -23,7 +22,7 @@ const content = /* HTML */ `
 `;
 
 /**
- * A control for change floor layer level on the plugin.
+ * A control for change floor layer level in the plugin.
  * It appears on the map only if you set the `floorControl` option within @type PluginOptions to `true`.
  * @hidden
  * @internal
@@ -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,33 +1,31 @@
-import { Id } from '../types/plugin';
-
 /**
- * Floor level data
+ * Floor level data.
  */
 export interface FloorLevel {
-    modelId: Id; // id модели этажа или здания
+    modelId: string; // id модели этажа или здания
     text: string;
     icon?: 'parking' | 'building' | string;
 }
 
 /**
- * Options for the method show
+ * Options for the show method.
  */
 export interface ControlShowOptions {
-    buildingModelId: Id;
-    activeModelId: Id;
+    buildingModelId: string;
+    activeModelId: string;
     floorLevels?: FloorLevel[];
 }
 
 /**
- * Event that emitted on button presses of the control
+ * Event that emitted on button presses of the control.
  */
 export interface FloorChangeEvent {
-    modelId: Id; // id модели этажа или здания
+    modelId: string; // id модели этажа или здания
 }
 
 export interface ControlEventTable {
     /**
-     * Emitted when floor's plan was changed
+     * Emitted when floor's plan was changed.
      */
     floorchange: FloorChangeEvent;
 }

src/defaultOptions.ts

@@ -1,24 +1,14 @@
 import type { PluginOptions } from './types/plugin';
 
 export const defaultOptions: Required<PluginOptions> = {
-    hoverHighlight: {
+    hoverOptions: {
         color: '#ffffff',
-        intencity: 0.0,
     },
     modelsBaseUrl: '',
     modelsLoadStrategy: 'waitAll',
-    poiConfig: {
-        primary: {
-            fontSize: 14,
-            fontColor: '#000000',
-        },
-        secondary: {
-            fontSize: 14,
-            fontColor: '#000000',
-        },
-    },
     floorsControl: {
         position: 'centerLeft',
     },
     groundCoveringColor: '#F8F8EBCC',
+    zIndex: 0,
 };

src/external/evented.ts

@@ -1,5 +1,5 @@
 /**
- * Event emitter
+ * Event emitter.
  */
 export class Evented<M> {
     private events: { [K in keyof M]?: Array<(ev: M[K]) => void> };
@@ -12,9 +12,10 @@ export class Evented<M> {
     }
 
     /**
-     * Registers event listener
-     * @param type Event type
-     * @param listener Event handler
+     * Registers event listener.
+     *
+     * @param type Event type.
+     * @param listener Event handler.
      */
     public on<K extends keyof M>(type: K, listener: (ev: M[K]) => void): this {
         let eventsByType = this.events[type];
@@ -26,9 +27,10 @@ export class Evented<M> {
     }
 
     /**
-     * Registers event listener which will be called once
-     * @param type Event type
-     * @param listener Event handler
+     * Registers event listener which will be called once.
+     *
+     * @param type Event type.
+     * @param listener Event handler.
      */
     public once<K extends keyof M>(type: K, listener: (ev: M[K]) => void): this {
         const wrapper = (data: M[K]) => {
@@ -42,9 +44,10 @@ export class Evented<M> {
     }
 
     /**
-     * Removes event listener registered with `on`
-     * @param type Event type
-     * @param listener Event handler
+     * Removes event listener registered with `on`.
+     *
+     * @param type Event type.
+     * @param listener Event handler.
      */
     public off<K extends keyof M>(type: K, listener: (ev: M[K]) => void): this {
         const eventsByType = this.events[type];
@@ -63,9 +66,10 @@ export class Evented<M> {
     }
 
     /**
-     * Calls all event listeners with event type `type`
-     * @param type Event type
-     * @param data Data transferred to events
+     * Calls all event listeners with event type `type`.
+     *
+     * @param type Event type.
+     * @param data Data transferred to events.
      */
     public emit<K extends keyof M>(type: K, data?: M[K]): this {
         const eventsByType = this.events[type];

src/labelGroups.ts

@@ -0,0 +1,73 @@
+import type { Map as MapGL, Label, LabelImage } from '@2gis/mapgl/types';
+import type { BuildingState, LabelGroupOptions, PluginOptions } from './types/plugin';
+import type { GltfPlugin } from './plugin';
+// import { pluginEvents } from './constants';
+// import { createLabelEvenData } from './utils/events';
+
+const DEFAULT_IMAGE: LabelImage = {
+    url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHJ4PSI0IiBmaWxsPSIjZWFlYWVhIi8+PHJlY3QgeD0iMSIgeT0iMSIgd2lkdGg9IjI2IiBoZWlnaHQ9IjI2IiByeD0iMyIgZmlsbD0id2hpdGUiLz48L3N2Zz4=',
+    size: [38, 38],
+    stretchX: [[4, 24]],
+    stretchY: [[4, 24]],
+    padding: [5, 10, 5, 10],
+};
+
+export class LabelGroups {
+    private labelsByGroupId: Map<string, Label[]> = new Map();
+
+    constructor(
+        private map: MapGL,
+        private plugin: GltfPlugin,
+        private options: Required<PluginOptions>,
+    ) {}
+
+    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: image === 'default' ? DEFAULT_IMAGE : image,
+                minZoom,
+                maxZoom,
+                color,
+                fontSize,
+                relativeAnchor: [0.5, 1],
+                zIndex: this.options.zIndex + 0.00001, // чтобы были выше моделей
+            });
+
+            // 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();
+    }
+}