diff --git a/typescript/packages/subsurface-viewer/src/components/Map.tsx b/typescript/packages/subsurface-viewer/src/components/Map.tsx index b830d01c29..d835dc6261 100644 --- 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 = ({ 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