From 3ddc0af65445f59a17e878770d3ad50f3d71bb2a Mon Sep 17 00:00:00 2001
From: Ruben Thoms <ruben.thoms@ceetronsolutions.com>
Date: Mon, 18 Nov 2024 15:25:34 +0100
Subject: [PATCH] wip

---
 .../view/components/ReadoutWrapper.tsx        |  4 +-
 .../customDeckGlLayers/CursorTrackingLayer.ts | 42 +++++++++++--------
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/frontend/src/modules/2DViewer/view/components/ReadoutWrapper.tsx b/frontend/src/modules/2DViewer/view/components/ReadoutWrapper.tsx
index 47be35404..85a35f2e9 100644
--- a/frontend/src/modules/2DViewer/view/components/ReadoutWrapper.tsx
+++ b/frontend/src/modules/2DViewer/view/components/ReadoutWrapper.tsx
@@ -50,11 +50,11 @@ export function ReadoutWrapper(props: ReadooutWrapperProps): React.ReactNode {
         setTriggerHomeCounter((prev) => prev + 1);
     }
 
-    function handleMouseEvent(event: MapMouseEvent): void {
+    const handleMouseEvent = React.useCallback(function handleMouseEvent(event: MapMouseEvent): void {
         if (event.type === "hover") {
             assembler.current?.getMultiViewPickingInfo(event);
         }
-    }
+    }, []);
 
     const currentCursorWorldCoordinates: [number, number] | null = pickingInfo[activeViewPortId]?.coordinates
         ? [pickingInfo[activeViewPortId].coordinates?.x ?? 0, pickingInfo[activeViewPortId].coordinates?.y ?? 0]
diff --git a/frontend/src/modules/2DViewer/view/customDeckGlLayers/CursorTrackingLayer.ts b/frontend/src/modules/2DViewer/view/customDeckGlLayers/CursorTrackingLayer.ts
index 07c8f6d34..afba14c70 100644
--- a/frontend/src/modules/2DViewer/view/customDeckGlLayers/CursorTrackingLayer.ts
+++ b/frontend/src/modules/2DViewer/view/customDeckGlLayers/CursorTrackingLayer.ts
@@ -1,15 +1,14 @@
-import { CompositeLayer } from "@deck.gl/core";
+import { CompositeLayer, CompositeLayerProps, Layer, UpdateParameters } from "@deck.gl/core";
 import { IconLayer } from "@deck.gl/layers";
 
 const CROSSHAIR_SVG = `<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 28.7.2, SVG Export Plug-In . SVG Version: 9.03 Build 54978)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
-<rect x="72" y="72" width="9" height="9"/>
-<rect x="9" y="72" width="54" height="9"/>
-<rect x="72" y="9" width="9" height="54"/>
-<rect x="90" y="72" width="54" height="9"/>
-<rect x="72" y="90" width="9" height="54"/>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="150px"
+	 viewBox="0 0 150 150" xml:space="preserve">
+<rect x="72" y="72" width="9" height="9" fill="#eb4034" />
+<rect x="9" y="72" width="54" height="9" fill="#eb4034" />
+<rect x="72" y="9" width="9" height="54" fill="#eb4034" />
+<rect x="90" y="72" width="54" height="9" fill="#eb4034" />
+<rect x="72" y="90" width="9" height="54" fill="#eb4034" />
 </svg>`;
 
 export type CursorTrackingLayerProps = {
@@ -23,26 +22,33 @@ function svgToDataURL(svg: string): string {
 
 export class CursorTrackingLayer extends CompositeLayer<CursorTrackingLayerProps> {
     static layerName: string = "CursorTrackingLayer";
+    private _icon = {
+        id: "cursor-tracking-icon",
+        url: svgToDataURL(CROSSHAIR_SVG),
+        width: 150,
+        height: 150,
+    };
+    private _data: [number, number, number][] = [];
+
+    updateState(params: UpdateParameters<Layer<CursorTrackingLayerProps & Required<CompositeLayerProps>>>): void {
+        this._data = this.props.worldCoordinates ? [[...this.props.worldCoordinates, 0]] : [];
+    }
 
     renderLayers() {
         if (!this.props.worldCoordinates) {
             return [];
         }
+
         return [
             new IconLayer(
                 this.getSubLayerProps({
                     id: "cursor-tracking-icon-layer",
-                    getIcon: () => ({
-                        id: "cursor-tracking-icon",
-                        url: svgToDataURL(CROSSHAIR_SVG),
-                        width: 150,
-                        height: 150,
-                    }),
-                    data: [...this.props.worldCoordinates, 0],
+                    getIcon: () => this._icon,
+                    data: this._data,
                     getPosition: (d: [number, number, number]) => d,
-                    getSize: () => 24,
+                    getSize: 24,
                     sizeUnits: "pixels",
-                    getColor: [255, 0, 0],
+                    getColor: () => [0, 0, 0],
                     pickable: false,
                 })
             ),