From 0f22017c0a388bc8012e05063e034fe3f2ab6415 Mon Sep 17 00:00:00 2001
From: Nils Petter Fremming <35219649+nilscognite@users.noreply.github.com>
Date: Fri, 20 Sep 2024 14:14:39 +0200
Subject: [PATCH] Update FlexibleCameraMarkers.ts

---
 .../src/Flexible/FlexibleCameraMarkers.ts     | 58 +++++++++++++------
 1 file changed, 39 insertions(+), 19 deletions(-)

diff --git a/viewer/packages/camera-manager/src/Flexible/FlexibleCameraMarkers.ts b/viewer/packages/camera-manager/src/Flexible/FlexibleCameraMarkers.ts
index ba188a21a6d..9e60e3d76d4 100644
--- a/viewer/packages/camera-manager/src/Flexible/FlexibleCameraMarkers.ts
+++ b/viewer/packages/camera-manager/src/Flexible/FlexibleCameraMarkers.ts
@@ -5,10 +5,12 @@
 import { Scene, Object3D, Vector3, Sprite, SpriteMaterial, CanvasTexture } from 'three';
 import { FlexibleCameraManager } from './FlexibleCameraManager';
 import { FlexibleControlsType } from './FlexibleControlsType';
+import { FlexibleControlsOptions } from './FlexibleControlsOptions';
 
 export class FlexibleCameraMarkers {
   private readonly _scene: Scene;
-  private _targetMarker: Sprite | undefined;
+  private _targetMarker1: Sprite | undefined;
+  private _targetMarker2: Sprite | undefined;
 
   //================================================
   // CONSTRUCTOR
@@ -24,29 +26,38 @@ export class FlexibleCameraMarkers {
 
   public update(manager: FlexibleCameraManager): void {
     if (this.isVisible(manager)) {
-      if (!this._targetMarker) {
-        this._targetMarker = createSprite(manager.options.outerMarkerColor, manager.options.innerMarkerColor);
-        this._scene.add(this._targetMarker);
-        this._targetMarker.visible = true;
-      } else if (!this._targetMarker.visible) {
-        this._targetMarker.visible = true;
+      if (this._targetMarker1 === undefined) {
+        this._targetMarker1 = createSprite(manager.options, true);
+        this._scene.add(this._targetMarker1);
+      }
+      if (this._targetMarker2 === undefined) {
+        this._targetMarker2 = createSprite(manager.options, false);
+        this._scene.add(this._targetMarker2);
+      }
+      for (const marker of this.getMarkers()) {
+        setPosition(marker, manager.controls.getTarget(), manager);
+        if (!marker.visible) {
+          marker.visible = true;
+        }
       }
-      setPosition(this._targetMarker, manager.controls.getTarget(), manager);
     } else {
-      if (this._targetMarker && this._targetMarker.visible) {
-        this._targetMarker.visible = false;
+      for (const marker of this.getMarkers()) {
+        if (marker.visible) {
+          marker.visible = false;
+        }
       }
     }
   }
 
   public dispose(): void {
-    if (this._targetMarker) {
-      this._scene.remove(this._targetMarker);
-      this._targetMarker.material.map?.dispose();
-      this._targetMarker.material.dispose();
-      this._targetMarker.geometry.dispose();
-      this._targetMarker = undefined;
+    for (const marker of this.getMarkers()) {
+      this._scene.remove(marker);
+      marker.material.map?.dispose();
+      marker.material.dispose();
+      marker.geometry.dispose();
     }
+    this._targetMarker1 = undefined;
+    this._targetMarker2 = undefined;
   }
 
   private isVisible(manager: FlexibleCameraManager): boolean {
@@ -64,6 +75,11 @@ export class FlexibleCameraMarkers {
     }
     return true;
   }
+
+  private *getMarkers(): Generator<Sprite> {
+    if (this._targetMarker1 !== undefined) yield this._targetMarker1;
+    if (this._targetMarker2 !== undefined) yield this._targetMarker2;
+  }
 }
 
 function setPosition(object3D: Object3D, position: Vector3, manager: FlexibleCameraManager): void {
@@ -75,9 +91,13 @@ function setPosition(object3D: Object3D, position: Vector3, manager: FlexibleCam
   object3D.updateMatrixWorld();
 }
 
-function createSprite(outerColor: string, innerColor: string): Sprite {
-  const texture = createTexture(25, 3, outerColor, innerColor);
-  const material = new SpriteMaterial({ map: texture, depthTest: false });
+function createSprite(options: FlexibleControlsOptions, depthTest: boolean): Sprite {
+  const texture = createTexture(25, 3, options.outerMarkerColor, options.innerMarkerColor);
+  const material = new SpriteMaterial({ map: texture, depthTest });
+  if (!depthTest) {
+    material.transparent = true;
+    material.opacity = 0.5;
+  }
   const sprite = new Sprite(material);
   sprite.updateMatrixWorld();
   sprite.visible = true;