From 21bf6406f01193d4b25025e166c2397367126f38 Mon Sep 17 00:00:00 2001
From: Alexander Myshov <simplex.light@gmail.com>
Date: Thu, 29 Jun 2023 22:13:52 +0700
Subject: [PATCH] Add options for the color of highlighted models

---
 demo/index.ts         |  3 +++
 src/defaultOptions.ts |  4 ++++
 src/loader.ts         | 10 ++++++++--
 src/plugin.ts         |  1 +
 src/realtyScene.ts    | 11 +++++++++--
 src/types/plugin.ts   | 30 +++++++++++++++++++++++++-----
 6 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/demo/index.ts b/demo/index.ts
index c8320bd..dee5a49 100644
--- a/demo/index.ts
+++ b/demo/index.ts
@@ -29,6 +29,9 @@ async function start() {
                 fontSize: 14,
             },
         },
+        hoverHighlight: {
+            intencity: 0.1,
+        },
     });
 
     const defaultState = {
diff --git a/src/defaultOptions.ts b/src/defaultOptions.ts
index 2fd08de..83f8d9f 100644
--- a/src/defaultOptions.ts
+++ b/src/defaultOptions.ts
@@ -5,6 +5,10 @@ export const defaultOptions: Required<PluginOptions> = {
         color: '#ffffff',
         intencity: 3,
     },
+    hoverHighlight: {
+        color: '#ffffff',
+        intencity: 0.0,
+    },
     dracoScriptsUrl: 'https://unpkg.com/@2gis/mapgl-gltf@^1/dist/libs/draco/',
     modelsBaseUrl: '',
     modelsLoadStrategy: 'waitAll',
diff --git a/src/loader.ts b/src/loader.ts
index d7f610f..81139f7 100644
--- a/src/loader.ts
+++ b/src/loader.ts
@@ -5,8 +5,9 @@ import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
 import { degToRad } from './utils/common';
 import { concatUrl, isAbsoluteUrl } from './utils/url';
 import { mapPointFromLngLat, geoToMapDistance } from './utils/geo';
+import { defaultOptions } from './defaultOptions';
 
-import type { ModelOptions } from './types/plugin';
+import type { ModelOptions, HightlightOptions } from './types/plugin';
 
 interface LoaderOptions {
     dracoScriptsUrl: string;
@@ -16,6 +17,7 @@ interface LoaderOptions {
 export class Loader extends GLTFLoader {
     private options: LoaderOptions;
     private models = new Map<string, THREE.Object3D>();
+    private hoverParams = defaultOptions.hoverHighlight;
 
     constructor(options: LoaderOptions) {
         super();
@@ -90,7 +92,7 @@ export class Loader extends GLTFLoader {
                                 map: obj.material.map,
                             });
                             obj.material = newMaterial;
-                            obj.material.emissive = new THREE.Color('#ffffff');
+                            obj.material.emissive = new THREE.Color(this.hoverParams.color);
                             obj.material.emissiveIntensity = 0.0;
                         }
                     });
@@ -121,4 +123,8 @@ export class Loader extends GLTFLoader {
     public getModels() {
         return this.models;
     }
+
+    public setHoverParams(color: HightlightOptions) {
+        this.hoverParams = color;
+    }
 }
diff --git a/src/plugin.ts b/src/plugin.ts
index ce95c5d..66fb14b 100644
--- a/src/plugin.ts
+++ b/src/plugin.ts
@@ -70,6 +70,7 @@ export class GltfPlugin extends Evented<GltfPluginEventTable> {
             modelsBaseUrl: this.options.modelsBaseUrl,
             dracoScriptsUrl: this.options.dracoScriptsUrl,
         });
+        this.loader.setHoverParams(this.options.hoverHighlight);
         this.models = this.loader.getModels();
 
         this.poiGroups = new PoiGroups(this.map, this.options.poiConfig);
diff --git a/src/realtyScene.ts b/src/realtyScene.ts
index 62549fe..c9707cf 100644
--- a/src/realtyScene.ts
+++ b/src/realtyScene.ts
@@ -19,7 +19,7 @@ export class RealtyScene {
     private activePoiGroupIds: Id[] = [];
     private container: HTMLElement;
     private buildingFacadeIds: Id[] = [];
-    // this field is needed when the hightlited
+    // this field is needed when the highlighted
     // model is placed under the floors' control
     private prevHoveredModelId: Id | null = null;
 
@@ -437,6 +437,13 @@ export class RealtyScene {
     }
 
     public toggleHighlightModel(modelId: Id) {
+        // skip toggle if user is using default emissiveIntensity
+        // that means that model won't be hovered
+        const { intencity } = this.options.hoverHighlight;
+        if (intencity === 0) {
+            return;
+        }
+
         const model = this.models.get(String(modelId));
 
         if (model === undefined) {
@@ -450,7 +457,7 @@ export class RealtyScene {
                     obj.material.emissiveIntensity = 0.0;
                     shouldUnsetFlag = true;
                 } else {
-                    obj.material.emissiveIntensity = 0.25;
+                    obj.material.emissiveIntensity = intencity;
                 }
             }
         });
diff --git a/src/types/plugin.ts b/src/types/plugin.ts
index 9867136..5f64907 100644
--- a/src/types/plugin.ts
+++ b/src/types/plugin.ts
@@ -12,13 +12,13 @@ export type ColorRepresentation = ColorModelString | HexColorString | number;
  */
 export interface AmbientLightOptions {
     /**
-     * Numeric value of the RGB component of the color.
-     * Default is 0xffffff
+     * Color of the ambient light.
+     * @default '#ffffff'
      */
     color: ColorRepresentation;
     /**
      * Numeric value of the light's strength/intensity.
-     * Default is 1
+     * @default 3
      */
     intencity: number;
 }
@@ -60,6 +60,23 @@ export interface ControlOptions {
     position: ControlPosition;
 }
 
+/**
+ * Options for the highlight color of hovered models
+ */
+export interface HightlightOptions {
+    /**
+     * Color of the hover
+     * @default '#ffffff
+     */
+    color?: ColorRepresentation;
+    /**
+     * Intensity of the color on the hover
+     * in the range from 0 to 1
+     * @default 0.0
+     */
+    intencity: number;
+}
+
 /**
  * Options for the plugin
  */
@@ -95,11 +112,14 @@ export interface PluginOptions {
          */
         secondary?: PoiConfigGranular;
     };
-
     /**
-     * Floors control
+     * Settings for floors' control
      */
     floorsControl?: ControlOptions;
+    /**
+     * Settings of the highlighted models
+     */
+    hoverHighlight?: HightlightOptions;
 }
 
 /**