Plugin refactoring prerel (#34)

2gis · Apr 25, 2024 · 93dea4f · 93dea4f
1 parent 2f13748
commit 93dea4f
Show file tree

Hide file tree

Showing 30 changed files with 351 additions and 131 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -1,21 +1,26 @@
 name: Release mapgl-gltf
 
 on:
-  release:
-    types: [created]
+    release:
+        types: [created]
 
 jobs:
-
-  release-mapgl-gltf:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm run build
-      - run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+    release-mapgl-gltf:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: 16
+                  registry-url: https://registry.npmjs.org/
+            - run: npm ci
+            - run: npm run build
+            - run: echo $GITHUB_REF_NAME
+            - run: |
+                  if [[ $GITHUB_REF_NAME == v1.* ]]; then
+                    npm publish --access public --tag ver.1
+                  else
+                    npm publish --access public
+                  fi
+              env:
+                  NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
diff --git a/README.md b/README.md
@@ -35,18 +35,6 @@ plugin.addModels([{
 }]);
 ```
 
-## Release
-
-1. Update the package version by running `npm version patch|minor|major`. This command returns a new package version. Let assume it's 1.2.3
-1. Push changes to github and merge them to the «master» branch
-1. Go to https://github.com/2gis/mapgl-gltf/releases/new
-1. Click the «Choose tag» button and create a new tag according to the version in package.json, for example v1.2.3
-1. Make sure the release target is the «master» branch
-1. Paste the release tag into the «Release title» field, for example v1.2.3
-1. Add a release description
-1. Click the «Publish release» button
-1. Go to https://github.com/2gis/mapgl-gltf/actions and wait for completing the release workflow
-
 ## Testing
 
 If you write screenshot tests, you will need run `npm run docker:test` after coding.
@@ -55,4 +43,4 @@ This guarantees the authenticity of the screenshots used.
 
 ## Documentation
 
-You can find the more information in the official [documentation](https://docs.2gis.ru/ru/mapgl/examples/gltf-plugin).
+You can find the more information in the official [documentation](https://docs.2gis.com/en/mapgl/immersive/gltf2-plugin).
diff --git a/RELEASE.md b/RELEASE.md
@@ -0,0 +1,28 @@
+## Release v2
+
+**All changes have to be made on «master» branch.**
+
+1. Update the package version by running `npm version patch|minor`. This command returns a new package version. Let assume it's 2.3.4
+1. Push changes to github and merge them to the «master» branch
+1. Go to https://github.com/2gis/mapgl-gltf/releases/new
+1. Click the «Choose tag» button and create a new tag according to the version in package.json, for example v2.3.4
+1. Make sure the release target is the «master» branch
+1. Paste the release tag into the «Release title» field, for example v2.3.4
+1. Add a release description
+1. Click the «Publish release» button
+1. Go to https://github.com/2gis/mapgl-gltf/actions and wait for completing the release workflow
+
+## Release v1
+
+**All changes have to be made on «plugin-v1» branch.**
+
+1. Update the package version by running `npm version patch|minor`. This command returns a new package version. Let assume it's 1.2.3
+1. Push changes to github and merge them to the «plugin-v1» branch
+1. Go to https://github.com/2gis/mapgl-gltf/releases/new
+1. Click the «Choose tag» button and create a new tag according to the version in package.json, for example v1.2.3
+1. Make sure the release target is the «plugin-v1» branch
+1. Paste the release tag into the «Release title» field, for example v1.2.3
+1. Add a release description
+1. Unset the «Set as the latest release» checkbox because version 1 release can't be the latest
+1. Click the «Publish release» button
+1. Go to https://github.com/2gis/mapgl-gltf/actions and wait for completing the release workflow
diff --git a/demo/index.ts b/demo/index.ts
@@ -37,7 +37,6 @@ async function start() {
     })
         .getContainer()
         .addEventListener('click', () => {
-            plugin.removeRealtyScene();
             plugin.addRealtyScene(REALTY_SCENE);
         });
 
@@ -54,7 +53,6 @@ async function start() {
     })
         .getContainer()
         .addEventListener('click', () => {
-            plugin.removeRealtyScene();
             plugin.addRealtyScene(REALTY_SCENE_1, {
                 buildingId: 'ds321ba234cb',
             });
@@ -68,6 +66,22 @@ async function start() {
             plugin.removeRealtyScene();
         });
 
+    new mapglAPI.Control(map, '<button>Hide Any Scene</button>', {
+        position: 'topLeft',
+    })
+        .getContainer()
+        .addEventListener('click', () => {
+            plugin.hideRealtyScene();
+        });
+
+    new mapglAPI.Control(map, '<button>Show Any Scene</button>', {
+        position: 'topLeft',
+    })
+        .getContainer()
+        .addEventListener('click', () => {
+            plugin.showRealtyScene();
+        });
+
     new mapglAPI.Control(map, '<button>Add Model</button>', {
         position: 'topLeft',
     })

diff --git a/demo/mocks.ts b/demo/mocks.ts
@@ -45,6 +45,7 @@ export const REALTY_SCENE: BuildingOptions[] = [
                         elevation: 5,
                         fontSize: 12,
                         fontColor: '#3a3a3a',
+                        interactive: true,
                         labels: [
                             {
                                 coordinates: [47.245048150280994, 56.134470449142164],
@@ -75,6 +76,7 @@ export const REALTY_SCENE: BuildingOptions[] = [
                         elevation: 5,
                         fontSize: 12,
                         fontColor: '#3a3a3a',
+                        interactive: true,
                         labels: [
                             {
                                 coordinates: [47.245350349632965, 56.134414208205776],
@@ -125,6 +127,7 @@ export const REALTY_SCENE: BuildingOptions[] = [
                         elevation: 35,
                         fontSize: 12,
                         fontColor: '#fff',
+                        interactive: true,
                         labels: [
                             {
                                 coordinates: [47.245048150280994, 56.134470449142164],
@@ -204,6 +207,7 @@ export const REALTY_SCENE: BuildingOptions[] = [
                         elevation: 7,
                         fontSize: 12,
                         fontColor: '#3a3a3a',
+                        interactive: true,
                         labels: [
                             {
                                 coordinates: [47.24452417991248, 56.13469284843933],
@@ -275,6 +279,7 @@ export const REALTY_SCENE: BuildingOptions[] = [
                         elevation: 53,
                         fontSize: 12,
                         fontColor: '#fff',
+                        interactive: true,
                         labels: [
                             {
                                 coordinates: [47.24452417991248, 56.13469284843933],

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@2gis/mapgl-gltf",
-  "version": "1.3.1",
+  "version": "2.0.0",
   "description": "Plugin for the rendering glTF models with MapGL",
   "main": "dist/bundle.js",
   "typings": "dist/types/index.d.ts",
@@ -9,7 +9,6 @@
     "url": "https://github.com/2gis/mapgl-gltf.git"
   },
   "files": [
-    "dist/libs",
     "dist/types",
     "dist/docs.json",
     "dist/*.LICENSE.txt"
@@ -37,7 +36,7 @@
   "author": "2GIS WebMaps Team",
   "license": "BSD-2-Clause",
   "devDependencies": {
-    "@2gis/mapgl": "1.46.0",
+    "@2gis/mapgl": "^1.47.0",
     "@documentalist/compiler": "^2.8.1",
     "@types/geojson": "^7946.0.10",
     "@types/jest": "^27.4.0",

diff --git a/src/control/index.ts b/src/control/index.ts
@@ -1,5 +1,5 @@
 import type { Map as MapGL, ControlOptions } from '@2gis/mapgl/types';
-import type { ControlShowOptions, FloorLevel } from './types';
+import type { ControlShowOptions } from './types';
 
 import icon_building from 'raw-loader!./icon_building.svg';
 import icon_parking from 'raw-loader!./icon_parking.svg';

diff --git a/src/defaultOptions.ts b/src/defaultOptions.ts
@@ -1,3 +1,4 @@
+import { DEFAULT_FONT_COLOR, DEFAULT_FONT_SIZE, DEFAULT_IMAGE } from './labelGroups';
 import type { PluginOptions } from './types/plugin';
 
 export const defaultOptions: Required<PluginOptions> = {
@@ -6,6 +7,11 @@ export const defaultOptions: Required<PluginOptions> = {
     },
     modelsBaseUrl: '',
     modelsLoadStrategy: 'waitAll',
+    labelGroupDefaults: {
+        fontSize: DEFAULT_FONT_SIZE,
+        fontColor: DEFAULT_FONT_COLOR,
+        image: DEFAULT_IMAGE,
+    },
     floorsControl: {
         position: 'centerLeft',
     },

diff --git a/src/labelGroups.ts b/src/labelGroups.ts
@@ -1,10 +1,13 @@
 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';
+import { pluginEvents } from './constants';
+import { createLabelEvenData } from './utils/events';
 
-const DEFAULT_IMAGE: LabelImage = {
+const DEFAULT_INTERACTIVE = false;
+export const DEFAULT_FONT_SIZE = 14;
+export const DEFAULT_FONT_COLOR = '#000000';
+export const DEFAULT_IMAGE: LabelImage = {
     url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHJ4PSI0IiBmaWxsPSIjZWFlYWVhIi8+PHJlY3QgeD0iMSIgeT0iMSIgd2lkdGg9IjI2IiBoZWlnaHQ9IjI2IiByeD0iMyIgZmlsbD0id2hpdGUiLz48L3N2Zz4=',
     size: [38, 38],
     stretchX: [[4, 24]],
@@ -30,27 +33,39 @@ export class LabelGroups {
             return;
         }
 
-        const { image, minZoom, maxZoom, fontColor: color, fontSize } = groupOptions;
+        const {
+            image,
+            minZoom,
+            maxZoom,
+            fontColor,
+            fontSize,
+            elevation: groupElevation,
+            interactive: groupInteractive,
+        } = groupOptions;
+        const { labelGroupDefaults, zIndex } = this.options;
+
         const labels = groupOptions.labels.map((labelOptions) => {
-            const { coordinates, text, userData } = labelOptions;
+            const { coordinates, text, userData, elevation, interactive } = labelOptions;
             const label = new mapgl.Label(this.map, {
-                coordinates, // + label.elevation ?? groupOptions.elevation
+                coordinates: [...coordinates, elevation ?? groupElevation],
                 text,
                 userData,
-                image: image === 'default' ? DEFAULT_IMAGE : image,
+                image: image === 'default' ? labelGroupDefaults.image ?? DEFAULT_IMAGE : image,
                 minZoom,
                 maxZoom,
-                color,
-                fontSize,
+                color: fontColor ?? labelGroupDefaults.fontColor ?? DEFAULT_FONT_COLOR,
+                fontSize: fontSize ?? labelGroupDefaults.fontSize ?? DEFAULT_FONT_SIZE,
                 relativeAnchor: [0.5, 1],
-                zIndex: this.options.zIndex + 0.00001, // чтобы были выше моделей
+                zIndex: zIndex + 0.00001, // чтобы были выше моделей
+                interactive: interactive ?? groupInteractive ?? DEFAULT_INTERACTIVE,
+                labeling: { type: 'pointLabelsOnly' },
             });
 
-            // pluginEvents.forEach((eventType) => {
-            //     label.on(eventType, (ev) => {
-            //         this.plugin.emit(eventType, createLabelEvenData(ev, labelOptions, state));
-            //     });
-            // });
+            pluginEvents.forEach((eventType) => {
+                label.on(eventType, (ev) => {
+                    this.plugin.emit(eventType, createLabelEvenData(ev, labelOptions, state));
+                });
+            });
 
             return label;
         });

diff --git a/src/plugin.ts b/src/plugin.ts
@@ -295,10 +295,25 @@ export class GltfPlugin extends Evented<GltfPluginEventTable> {
      * @param state A state of building and floor that should be active on realty scene initialization.
      */
     public async addRealtyScene(scene: BuildingOptions[], state?: BuildingState) {
+        this.realtyScene?.destroy();
         this.realtyScene = new RealtyScene(this, this.map, this.options);
         return this.realtyScene.init(scene, state);
     }
 
+    /**
+     * Shows a hidden realty scene on the map.
+     */
+    public showRealtyScene() {
+        this.realtyScene?.show();
+    }
+
+    /**
+     * Hides a shown realty scene on the map.
+     */
+    public hideRealtyScene() {
+        this.realtyScene?.hide();
+    }
+
     /**
      * Removes an interactive realty scene from the map.
      */