feat: Enable left click to specify camera anchor/rotation point #1775

equinor · Nov 15, 2023 · 8366e70 · 8366e70
1 parent 40d8092
commit 8366e70
Showing 1 changed file with 27 additions and 2 deletions.
diff --git a/typescript/packages/subsurface-viewer/src/components/Map.tsx b/typescript/packages/subsurface-viewer/src/components/Map.tsx
@@ -12,7 +12,13 @@ import type {
     Viewport,
     PickingInfo,
 } from "@deck.gl/core/typed";
-import { OrthographicView, OrbitView, PointLight } from "@deck.gl/core/typed";
+import {
+    OrthographicView,
+    OrbitView,
+    PointLight,
+    LinearInterpolator,
+    FlyToInterpolator,
+} from "@deck.gl/core/typed";
 import type { Feature, FeatureCollection } from "geojson";
 import React, { useEffect, useState, useCallback, useRef } from "react";
 import JSON_CONVERTER_CONFIG from "../utils/configuration";
@@ -286,6 +292,7 @@ export interface ViewStateType {
     rotationOrbit: number;
     minZoom?: number;
     maxZoom?: number;
+    transitionDuration?: number;
 }
 
 interface marginsType {
@@ -917,11 +924,29 @@ const Map: React.FC<MapProps> = ({
             infos: PickingInfo[],
             event: MjolnirEvent
         ): void => {
+            if ((event as MjolnirPointerEvent).leftButton) {
+                // Left button click identifies new camera rotation anchor.
+                const viewstateKeys = Object.keys(viewStates);
+                if (infos.length >= 1 && viewstateKeys.length === 1) {
+                    const info = infos[0];
+                    if (info.coordinate) {
+                        const x = info.coordinate[0];
+                        const y = info.coordinate[1];
+                        const z = info.coordinate[2];
+
+                        const vs = cloneDeep(viewStates);
+                        vs[viewstateKeys[0]].target = [x, y, z];
+                        vs[viewstateKeys[0]].transitionDuration = 1000;
+                        setViewStates(vs);
+                    }
+                }
+            }
+
             if (!onMouseEvent) return;
             const ev = handleMouseEvent(type, infos, event);
             onMouseEvent(ev);
         },
-        [onMouseEvent]
+        [onMouseEvent, viewStates]
     );
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any