@reearth/core 0.0.7-alpha.0 → 0.0.7-alpha.10

package/src/engines/Cesium/{useEngineRef.test.tsx → hooks/useEngineRef.test.tsx}

@@ -12,7 +12,7 @@ import { useRef } from "react";
 import type { CesiumComponentRef } from "resium";
 import { vi, expect, test, afterEach } from "vitest";
 
-import type { EngineRef, Clock } from "..";
+import type { EngineRef, Clock } from "../../..";
 
 import useEngineRef from "./useEngineRef";
 
@@ -57,86 +57,86 @@ test("bind mouse events", () => {
   expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
 
   result.current.current?.onDoubleClick(mockMouseEventCallback);
-  expect(result.current.current?.mouseEventCallbacks.doubleclick[0]).toBe(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.doubleClick[0]).toBe(mockMouseEventCallback);
 
-  result.current.current?.mouseEventCallbacks.doubleclick[0]?.(props);
+  result.current.current?.mouseEventCallbacks.doubleClick[0]?.(props);
   expect(mockMouseEventCallback).toHaveBeenCalledTimes(2);
   expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
 
   result.current.current?.onMouseDown(mockMouseEventCallback);
-  expect(result.current.current?.mouseEventCallbacks.mousedown[0]).toBe(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.mouseDown[0]).toBe(mockMouseEventCallback);
 
-  result.current.current?.mouseEventCallbacks.mousedown[0]?.(props);
+  result.current.current?.mouseEventCallbacks.mouseDown[0]?.(props);
   expect(mockMouseEventCallback).toHaveBeenCalledTimes(3);
   expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
 
   result.current.current?.onMouseUp(mockMouseEventCallback);
-  expect(result.current.current?.mouseEventCallbacks.mouseup[0]).toBe(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.mouseUp[0]).toBe(mockMouseEventCallback);
 
-  result.current.current?.mouseEventCallbacks.mouseup[0]?.(props);
+  result.current.current?.mouseEventCallbacks.mouseUp[0]?.(props);
   expect(mockMouseEventCallback).toHaveBeenCalledTimes(4);
   expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
 
   result.current.current?.onRightClick(mockMouseEventCallback);
-  expect(result.current.current?.mouseEventCallbacks.rightclick[0]).toBe(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.rightClick[0]).toBe(mockMouseEventCallback);
 
-  result.current.current?.mouseEventCallbacks.rightclick[0]?.(props);
+  result.current.current?.mouseEventCallbacks.rightClick[0]?.(props);
   expect(mockMouseEventCallback).toHaveBeenCalledTimes(5);
   expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
 
   result.current.current?.onRightDown(mockMouseEventCallback);
-  expect(result.current.current?.mouseEventCallbacks.rightdown[0]).toBe(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.rightDown[0]).toBe(mockMouseEventCallback);
 
-  result.current.current?.mouseEventCallbacks.rightdown[0]?.(props);
+  result.current.current?.mouseEventCallbacks.rightDown[0]?.(props);
   expect(mockMouseEventCallback).toHaveBeenCalledTimes(6);
   expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
 
   result.current.current?.onRightUp(mockMouseEventCallback);
-  expect(result.current.current?.mouseEventCallbacks.rightup[0]).toBe(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.rightUp[0]).toBe(mockMouseEventCallback);
 
-  result.current.current?.mouseEventCallbacks.rightup[0]?.(props);
+  result.current.current?.mouseEventCallbacks.rightUp[0]?.(props);
   expect(mockMouseEventCallback).toHaveBeenCalledTimes(7);
   expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
 
   result.current.current?.onMiddleClick(mockMouseEventCallback);
-  expect(result.current.current?.mouseEventCallbacks.middleclick[0]).toBe(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.middleClick[0]).toBe(mockMouseEventCallback);
 
-  result.current.current?.mouseEventCallbacks.middleclick[0]?.(props);
+  result.current.current?.mouseEventCallbacks.middleClick[0]?.(props);
   expect(mockMouseEventCallback).toHaveBeenCalledTimes(8);
   expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
 
   result.current.current?.onMiddleDown(mockMouseEventCallback);
-  expect(result.current.current?.mouseEventCallbacks.middledown[0]).toBe(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.middleDown[0]).toBe(mockMouseEventCallback);
 
-  result.current.current?.mouseEventCallbacks.middledown[0]?.(props);
+  result.current.current?.mouseEventCallbacks.middleDown[0]?.(props);
   expect(mockMouseEventCallback).toHaveBeenCalledTimes(9);
   expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
 
   result.current.current?.onMiddleUp(mockMouseEventCallback);
-  expect(result.current.current?.mouseEventCallbacks.middleup[0]).toBe(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.middleUp[0]).toBe(mockMouseEventCallback);
 
-  result.current.current?.mouseEventCallbacks.middleup[0]?.(props);
+  result.current.current?.mouseEventCallbacks.middleUp[0]?.(props);
   expect(mockMouseEventCallback).toHaveBeenCalledTimes(10);
   expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
 
   result.current.current?.onMouseMove(mockMouseEventCallback);
-  expect(result.current.current?.mouseEventCallbacks.mousemove[0]).toBe(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.mouseMove[0]).toBe(mockMouseEventCallback);
 
-  result.current.current?.mouseEventCallbacks.mousemove[0]?.(props);
+  result.current.current?.mouseEventCallbacks.mouseMove[0]?.(props);
   expect(mockMouseEventCallback).toHaveBeenCalledTimes(11);
   expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
 
   result.current.current?.onMouseEnter(mockMouseEventCallback);
-  expect(result.current.current?.mouseEventCallbacks.mouseenter[0]).toBe(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.mouseEnter[0]).toBe(mockMouseEventCallback);
 
-  result.current.current?.mouseEventCallbacks.mouseenter[0]?.(props);
+  result.current.current?.mouseEventCallbacks.mouseEnter[0]?.(props);
   expect(mockMouseEventCallback).toHaveBeenCalledTimes(12);
   expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
 
   result.current.current?.onMouseLeave(mockMouseEventCallback);
-  expect(result.current.current?.mouseEventCallbacks.mouseleave[0]).toBe(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.mouseLeave[0]).toBe(mockMouseEventCallback);
 
-  result.current.current?.mouseEventCallbacks.mouseleave[0]?.(props);
+  result.current.current?.mouseEventCallbacks.mouseLeave[0]?.(props);
   expect(mockMouseEventCallback).toHaveBeenCalledTimes(13);
   expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
 
@@ -188,10 +188,11 @@ test("zoom", async () => {
     return engineRef;
   });
 
-  const commons = await import("./common");
+  const commons = await import("../common");
+  const zoom = vi.spyOn(commons, "zoom");
 
   result.current.current?.zoomIn(10);
-  expect(commons.zoom).toHaveBeenCalledTimes(1);
+  expect(zoom).toHaveBeenCalledTimes(1);
   expect(commons.zoom).toHaveBeenCalledWith(
     {
       viewer,
@@ -221,6 +222,7 @@ test("call orbit when camera focuses on center", async () => {
           rotateUp: vi.fn(),
           look: vi.fn(),
           move: vi.fn(),
+          getPickRay: vi.fn(),
           positionCartographic: new Cartesian3(),
         },
         mode: SceneMode.SCENE3D,
@@ -247,15 +249,14 @@ test("call orbit when camera focuses on center", async () => {
     return [engineRef, cesium] as const;
   });
 
-  const commons = await import("./common");
+  const commons = await import("../common");
+  const getCenterCamera = vi.spyOn(commons, "getCenterCamera");
 
   const [engineRef, cesium] = result.current;
 
   engineRef.current?.orbit(90);
-  expect(commons.getCenterCamera).toHaveBeenCalled();
-  expect(cesium.current.cesiumElement?.scene.camera.rotateLeft).toHaveBeenCalled();
-  expect(cesium.current.cesiumElement?.scene.camera.rotateUp).toHaveBeenCalled();
-  expect(cesium.current.cesiumElement?.scene.camera.lookAtTransform).toHaveBeenCalledTimes(2);
+  expect(getCenterCamera).toHaveBeenCalled();
+  expect(cesium.current.cesiumElement?.scene.camera.lookAtTransform).toHaveBeenCalledTimes(1);
 });
 
 test("call orbit when camera does not focus on center", async () => {
@@ -268,6 +269,7 @@ test("call orbit when camera does not focus on center", async () => {
           rotateUp: vi.fn(),
           look: vi.fn(),
           move: vi.fn(),
+          getPickRay: vi.fn(),
           positionWC: new Cartesian3(),
           positionCartographic: new Cartesian3(),
         },
@@ -294,12 +296,13 @@ test("call orbit when camera does not focus on center", async () => {
     return [engineRef, cesium] as const;
   });
 
-  const commons = await import("./common");
+  const commons = await import("../common");
+  const getCenterCamera = vi.spyOn(commons, "getCenterCamera");
 
   const [engineRef, cesium] = result.current;
 
   engineRef.current?.orbit(90);
-  expect(commons.getCenterCamera).toHaveBeenCalled();
+  expect(getCenterCamera).toHaveBeenCalled();
   expect(cesium.current.cesiumElement?.scene.camera.look).toHaveBeenCalledTimes(2);
   expect(cesium.current.cesiumElement?.scene.camera.lookAtTransform).toHaveBeenCalledTimes(2);
 });
@@ -314,6 +317,7 @@ test("orbit on 2D mode", async () => {
           rotateUp: vi.fn(),
           look: vi.fn(),
           move: vi.fn(),
+          getPickRay: vi.fn(),
           positionWC: new Cartesian3(),
           positionCartographic: new Cartesian3(),
         },

package/src/engines/Cesium/{useEngineRef.ts → hooks/useEngineRef.ts}

@@ -4,11 +4,9 @@ import { ClockStep, JulianDate, Math as CesiumMath } from "cesium";
 import { useImperativeHandle, Ref, RefObject, useMemo, useRef } from "react";
 import { CesiumComponentRef } from "resium";
 
-import type { EngineRef, MouseEventProps, Feature, ComputedFeature } from "..";
-import { MouseEventCallbacks, TickEventCallback } from "../../Map";
-import { SketchType } from "../../Map/Sketch/types";
-import { Position2d, Position3d } from "../../types";
-
+import type { EngineRef, MouseEventProps, Feature, ComputedFeature } from "../..";
+import { MouseEventCallbacks, TickEventCallback, SketchType } from "../../../Map";
+import { Position2d, Position3d } from "../../../types";
 import {
   getLocationFromScreen,
   flyTo,
@@ -34,11 +32,11 @@ import {
   cartesianToLatLngHeight,
   getExtrudedHeight,
   getOverriddenScreenSpaceCameraOptions,
-} from "./common";
-import { attachTag, getTag } from "./Feature";
-import { PickedFeature, pickManyFromViewportAsFeature } from "./pickMany";
-import { createGeometry } from "./Sketch/createGeometry";
-import { CursorType } from "./types";
+} from "../common";
+import { attachTag, getTag } from "../Feature";
+import { PickedFeature, pickManyFromViewportAsFeature } from "../pickMany";
+import { createGeometry } from "../Sketch/createGeometry";
+import { CursorType } from "../types";
 import {
   convertCesium3DTileFeatureProperties,
   convertEntityDescription,
@@ -46,7 +44,7 @@ import {
   convertObjToComputedFeature,
   findEntity,
   findFeaturesFromLayer,
-} from "./utils/utils";
+} from "../utils/utils";
 
 export default function useEngineRef(
   ref: Ref<EngineRef>,
@@ -55,18 +53,18 @@ export default function useEngineRef(
   const cancelCameraFlight = useRef<() => void>();
   const mouseEventCallbacks = useRef<MouseEventCallbacks>({
     click: [],
-    doubleclick: [],
-    mousedown: [],
-    mouseup: [],
-    rightclick: [],
-    rightdown: [],
-    rightup: [],
-    middleclick: [],
-    middledown: [],
-    middleup: [],
-    mousemove: [],
-    mouseenter: [],
-    mouseleave: [],
+    doubleClick: [],
+    mouseDown: [],
+    mouseUp: [],
+    rightClick: [],
+    rightDown: [],
+    rightUp: [],
+    middleClick: [],
+    middleDown: [],
+    middleUp: [],
+    mouseMove: [],
+    mouseEnter: [],
+    mouseLeave: [],
     wheel: [],
   });
   const tickEventCallback = useRef<TickEventCallback[]>([]);
@@ -239,6 +237,8 @@ export default function useEngineRef(
       setView: camera => {
         const viewer = cesium.current?.cesiumElement;
         if (!viewer || viewer.isDestroyed()) return false;
+        if (camera.lat === undefined || camera.lng === undefined || camera.height === undefined)
+          return false;
         const scene = viewer.scene;
         if (camera.lng || camera.lat || camera.height) {
           const xyz = Cesium.Cartesian3.fromDegrees(camera.lng, camera.lat, camera.height);
@@ -539,13 +539,15 @@ export default function useEngineRef(
         const oldTransform = Cesium.Matrix4.clone(camera.transform);
 
         const center = getCenterCamera({ camera, scene });
-        // Get fixed frame from center to globe ellipsoid.
-        const frame = Cesium.Transforms.eastNorthUpToFixedFrame(
-          center || camera.positionWC,
-          scene.globe.ellipsoid,
-        );
+        if (center || camera.positionWC) {
+          // Get fixed frame from center to globe ellipsoid.
+          const frame = Cesium.Transforms.eastNorthUpToFixedFrame(
+            center || camera.positionWC,
+            scene.globe.ellipsoid,
+          );
 
-        camera.lookAtTransform(frame);
+          camera.lookAtTransform(frame);
+        }
 
         if (viewer.scene.mode !== Cesium.SceneMode.SCENE3D) {
           camera.move(
@@ -675,40 +677,40 @@ export default function useEngineRef(
         mouseEventCallbacks.current.click.push(cb);
       },
       onDoubleClick: (cb: (props: MouseEventProps) => void) => {
-        mouseEventCallbacks.current.doubleclick.push(cb);
+        mouseEventCallbacks.current.doubleClick.push(cb);
       },
       onMouseDown: (cb: (props: MouseEventProps) => void) => {
-        mouseEventCallbacks.current.mousedown.push(cb);
+        mouseEventCallbacks.current.mouseDown.push(cb);
       },
       onMouseUp: (cb: (props: MouseEventProps) => void) => {
-        mouseEventCallbacks.current.mouseup.push(cb);
+        mouseEventCallbacks.current.mouseUp.push(cb);
       },
       onRightClick: (cb: (props: MouseEventProps) => void) => {
-        mouseEventCallbacks.current.rightclick.push(cb);
+        mouseEventCallbacks.current.rightClick.push(cb);
       },
       onRightDown: (cb: (props: MouseEventProps) => void) => {
-        mouseEventCallbacks.current.rightdown.push(cb);
+        mouseEventCallbacks.current.rightDown.push(cb);
       },
       onRightUp: (cb: (props: MouseEventProps) => void) => {
-        mouseEventCallbacks.current.rightup.push(cb);
+        mouseEventCallbacks.current.rightUp.push(cb);
       },
       onMiddleClick: (cb: (props: MouseEventProps) => void) => {
-        mouseEventCallbacks.current.middleclick.push(cb);
+        mouseEventCallbacks.current.middleClick.push(cb);
       },
       onMiddleDown: (cb: (props: MouseEventProps) => void) => {
-        mouseEventCallbacks.current.middledown.push(cb);
+        mouseEventCallbacks.current.middleDown.push(cb);
       },
       onMiddleUp: (cb: (props: MouseEventProps) => void) => {
-        mouseEventCallbacks.current.middleup.push(cb);
+        mouseEventCallbacks.current.middleUp.push(cb);
       },
       onMouseMove: (cb: (props: MouseEventProps) => void) => {
-        mouseEventCallbacks.current.mousemove.push(cb);
+        mouseEventCallbacks.current.mouseMove.push(cb);
       },
       onMouseEnter: (cb: (props: MouseEventProps) => void) => {
-        mouseEventCallbacks.current.mouseenter.push(cb);
+        mouseEventCallbacks.current.mouseEnter.push(cb);
       },
       onMouseLeave: (cb: (props: MouseEventProps) => void) => {
-        mouseEventCallbacks.current.mouseleave.push(cb);
+        mouseEventCallbacks.current.mouseLeave.push(cb);
       },
       onWheel: (cb: (props: MouseEventProps) => void) => {
         mouseEventCallbacks.current.wheel.push(cb);

package/src/engines/Cesium/hooks/useExplicitRender.ts

@@ -0,0 +1,65 @@
+import { Viewer } from "cesium";
+import { MutableRefObject, RefObject, useCallback, useEffect, useRef } from "react";
+import { CesiumComponentRef } from "resium";
+
+import { RequestingRenderMode, ViewerProperty } from "../../../Map";
+import { FORCE_REQUEST_RENDER, NO_REQUEST_RENDER, REQUEST_RENDER_ONCE } from "../../../Map/hooks";
+
+export default ({
+  cesium,
+  requestingRenderMode,
+  isLayerDragging,
+  shouldRender,
+  property,
+}: {
+  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  requestingRenderMode?: MutableRefObject<RequestingRenderMode>;
+  isLayerDragging?: boolean;
+  shouldRender?: boolean;
+  property?: ViewerProperty;
+}) => {
+  // explicit rendering
+  const explicitRender = useCallback(() => {
+    const viewer = cesium.current?.cesiumElement;
+    if (!requestingRenderMode?.current || !viewer || viewer.isDestroyed()) return;
+    viewer.scene.requestRender();
+    if (requestingRenderMode.current === REQUEST_RENDER_ONCE) {
+      requestingRenderMode.current = NO_REQUEST_RENDER;
+    }
+  }, [cesium, requestingRenderMode]);
+
+  const explicitRenderRef = useRef<() => void>();
+
+  useEffect(() => {
+    explicitRenderRef.current = explicitRender;
+  }, [explicitRender]);
+
+  useEffect(() => {
+    const viewer = cesium.current?.cesiumElement;
+    if (!viewer || viewer.isDestroyed()) return;
+    return viewer.scene.postUpdate.addEventListener(() => {
+      explicitRenderRef.current?.();
+    });
+  }, [cesium]);
+
+  // render one frame when scene property changes
+  useEffect(() => {
+    if (requestingRenderMode) {
+      requestingRenderMode.current = REQUEST_RENDER_ONCE;
+    }
+  }, [property, requestingRenderMode]);
+
+  // force render when timeline is animating or is shouldRender
+  useEffect(() => {
+    const viewer = cesium.current?.cesiumElement;
+    if (!viewer || viewer.isDestroyed()) return;
+    if (requestingRenderMode) {
+      requestingRenderMode.current =
+        isLayerDragging || shouldRender
+          ? FORCE_REQUEST_RENDER
+          : requestingRenderMode.current === REQUEST_RENDER_ONCE
+            ? REQUEST_RENDER_ONCE
+            : NO_REQUEST_RENDER;
+    }
+  }, [cesium, isLayerDragging, shouldRender, requestingRenderMode]);
+};

package/src/engines/Cesium/hooks/useLayerDragDrop.ts

@@ -0,0 +1,77 @@
+import { Cartesian3, Entity, Viewer } from "cesium";
+import CesiumDnD, { Context } from "cesium-dnd";
+import { RefObject, useCallback, useEffect, useRef } from "react";
+import { CesiumComponentRef } from "resium";
+
+import { LatLng } from "../../../utils";
+import { isDraggable, isSelectable } from "../common";
+import { getTag } from "../Feature";
+import { convertCartesian3ToPosition } from "../utils/utils";
+
+export default ({
+  cesium,
+  isLayerDraggable,
+  onLayerDrag,
+  onLayerDrop,
+}: {
+  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  isLayerDraggable?: boolean;
+  onLayerDrag?: (layerId: string, featureId: string | undefined, position: LatLng) => void;
+  onLayerDrop?: (
+    layerId: string,
+    featureId: string | undefined,
+    position: LatLng | undefined,
+  ) => void;
+}) => {
+  // enable Drag and Drop Layers
+  const handleLayerDrag = useCallback(
+    (e: Entity, position: Cartesian3 | undefined, _context: Context): boolean | void => {
+      const viewer = cesium.current?.cesiumElement;
+      if (!viewer || viewer.isDestroyed() || !isSelectable(e) || !isDraggable(e)) return false;
+
+      const pos = convertCartesian3ToPosition(cesium.current?.cesiumElement, position);
+      if (!pos) return false;
+
+      const tag = getTag(e);
+      if (!tag) return false;
+
+      onLayerDrag?.(tag.layerId || "", tag.featureId, pos);
+    },
+    [cesium, onLayerDrag],
+  );
+
+  const handleLayerDrop = useCallback(
+    (e: Entity, position: Cartesian3 | undefined): boolean | void => {
+      const viewer = cesium.current?.cesiumElement;
+      if (!viewer || viewer.isDestroyed()) return false;
+
+      const tag = getTag(e);
+      const pos = convertCartesian3ToPosition(cesium.current?.cesiumElement, position);
+      onLayerDrop?.(tag?.layerId || "", tag?.featureId || "", pos);
+
+      return false; // let apollo-client handle optimistic updates
+    },
+    [cesium, onLayerDrop],
+  );
+
+  const cesiumDnD = useRef<CesiumDnD>();
+  useEffect(() => {
+    const viewer = cesium.current?.cesiumElement;
+    if (!viewer || viewer.isDestroyed()) return;
+    cesiumDnD.current = new CesiumDnD(viewer, {
+      onDrag: handleLayerDrag,
+      onDrop: handleLayerDrop,
+      dragDelay: 1000,
+      initialDisabled: !isLayerDraggable,
+    });
+    return () => {
+      if (!viewer || viewer.isDestroyed()) return;
+      cesiumDnD.current?.disable();
+    };
+  }, [cesium, isLayerDraggable, handleLayerDrag, handleLayerDrop]);
+
+  return {
+    handleLayerDrag,
+    handleLayerDrop,
+  };
+};

package/src/engines/Cesium/{VertexTerrainElevationMaterial.ts → hooks/useOverrideGlobeShader/VertexTerrainElevationMaterial.ts}

@@ -1,7 +1,8 @@
 import { Ellipsoid, Material } from "cesium";
 
-import { createColorMapImage } from "./Feature/HeatMap/colorMap";
-import { turboColorMap } from "./Feature/HeatMap/constants";
+import { createColorMapImage } from "../../Feature/HeatMap/colorMap";
+import { turboColorMap } from "../../Feature/HeatMap/constants";
+
 import { JapanSeaLevelEllipsoid } from "./JapanSeaLevelEllipsoid";
 import source from "./vertexTerrainElevationMaterial.glsl?raw";
 

package/src/engines/Cesium/{useOverrideGlobeShader.ts → hooks/useOverrideGlobeShader/useOverrideGlobeShader.ts}

@@ -8,15 +8,15 @@ import { Viewer, Globe, Material, Cartesian3 } from "cesium";
 import { RefObject, useCallback, useEffect, useMemo, useRef } from "react";
 import { CesiumComponentRef } from "resium";
 
-import { TerrainProperty } from "..";
-import { useImmutableFunction } from "../../hooks/useRefFunction";
-import { StringMatcher } from "../../utils/StringMatcher";
-
-import { createColorMapImage } from "./Feature/HeatMap/colorMap";
-import GlobeFSDefinitions from "./Shaders/OverriddenShaders/GlobeFS/Definitions.glsl?raw";
-import HeatmapForTerrainFS from "./Shaders/OverriddenShaders/GlobeFS/HeatmapForTerrain.glsl?raw";
-import IBLFS from "./Shaders/OverriddenShaders/GlobeFS/IBL.glsl?raw";
-import { PrivateCesiumGlobe } from "./types";
+import { TerrainProperty } from "../../..";
+import { useImmutableFunction } from "../../../../hooks/useRefFunction";
+import { StringMatcher } from "../../../../utils/StringMatcher";
+import { createColorMapImage } from "../../Feature/HeatMap/colorMap";
+import GlobeFSDefinitions from "../../Shaders/OverriddenShaders/GlobeFS/Definitions.glsl?raw";
+import HeatmapForTerrainFS from "../../Shaders/OverriddenShaders/GlobeFS/HeatmapForTerrain.glsl?raw";
+import IBLFS from "../../Shaders/OverriddenShaders/GlobeFS/IBL.glsl?raw";
+import { PrivateCesiumGlobe } from "../../types";
+
 import { VertexTerrainElevationMaterial } from "./VertexTerrainElevationMaterial";
 
 const defaultMatcher = new StringMatcher()
@@ -122,17 +122,19 @@ const useIBL = ({
 
 const useTerrainHeatmap = ({
   cesium,
-  terrain: {
-    heatmapType,
-    heatmapMaxHeight,
-    heatmapMinHeight,
-    heatmapLogarithmic,
-    heatmapColorLUT,
-  } = {},
+  terrain,
 }: {
   cesium: RefObject<CesiumComponentRef<Viewer>>;
   terrain: TerrainProperty | undefined;
 }) => {
+  const {
+    type: heatmapType,
+    maxHeight: heatmapMaxHeight,
+    minHeight: heatmapMinHeight,
+    logarithmic: heatmapLogarithmic,
+    colorLUT: heatmapColorLUT,
+  } = terrain?.elevationHeatMap ?? {};
+
   const isCustomHeatmapEnabled = useMemo(() => heatmapType === "custom", [heatmapType]);
 
   const shaderForTerrainHeatmap = useMemo(
@@ -141,7 +143,7 @@ const useTerrainHeatmap = ({
         [
           "#ifdef APPLY_COLOR_TO_ALPHA",
           "vec3 colorDiff = abs(color.rgb - colorToAlpha.rgb);",
-          "colorDiff.r = max(max(colorDiff.r, colorDiff.g), colorDiff.b);",
+          "colorDiff.r = czm_maximumComponent(colorDiff);",
           "alpha = czm_branchFreeTernary(colorDiff.r < colorToAlpha.a, 0.0, alpha);",
           "#endif",
         ],
@@ -206,6 +208,7 @@ export const useOverrideGlobeShader = ({
     enableLighting,
   });
 
+  // Terrain Heatmap is actually a built-in feature for globe, it renders as a heatmap using terrain height data.
   const { isCustomHeatmapEnabled, shaderForTerrainHeatmap } = useTerrainHeatmap({
     cesium,
     terrain,

package/src/engines/Cesium/hooks/useViewerProperty.ts

@@ -0,0 +1,90 @@
+import { Cartesian3, Color, DirectionalLight, SceneMode, SunLight, Viewer } from "cesium";
+import { RefObject, useMemo } from "react";
+import { CesiumComponentRef } from "resium";
+
+import { ViewerProperty } from "../..";
+
+// TODO: move all viewer property -> resium component prop logic here (from the gerneal long Cesium/hooks file)
+export default ({
+  cesium,
+  property,
+}: {
+  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  property?: ViewerProperty;
+}) => {
+  const sceneLight = useMemo(() => {
+    let light;
+    if (property?.scene?.light?.type === "sunLight") {
+      light = new SunLight({
+        color: property.scene?.light?.color
+          ? Color.fromCssColorString(property.scene.light.color)
+          : undefined,
+        intensity: property.scene?.light?.intensity,
+      });
+    } else if (property?.scene?.light?.type === "directionalLight") {
+      light = new DirectionalLight({
+        direction: new Cartesian3(
+          property?.scene?.light?.direction?.[0] ?? 1,
+          property?.scene?.light?.direction?.[1] ?? 0,
+          property?.scene?.light?.direction?.[2] ?? 0,
+        ),
+        color: property.scene?.light?.color
+          ? Color.fromCssColorString(property.scene.light.color)
+          : undefined,
+        intensity: property.scene?.light?.intensity,
+      });
+    } else {
+      light = cesium.current?.cesiumElement?.scene.light;
+      if (light) {
+        light.color = property?.scene?.light?.color
+          ? Color.fromCssColorString(property.scene.light.color)
+          : light.color;
+        light.intensity = property?.scene?.light?.intensity
+          ? property.scene.light.intensity
+          : light.intensity;
+      }
+    }
+    return light;
+  }, [
+    cesium,
+    property?.scene?.light?.type,
+    property?.scene?.light?.color,
+    property?.scene?.light?.direction,
+    property?.scene?.light?.intensity,
+  ]);
+
+  const sceneBackgroundColor = useMemo(
+    () =>
+      property?.scene?.backgroundColor
+        ? Color.fromCssColorString(property.scene.backgroundColor)
+        : undefined,
+    [property?.scene?.backgroundColor],
+  );
+
+  const sceneMsaaSamples = useMemo(() => {
+    // TODO: FXAA doesn't support alpha blending in Cesium, so we will enable FXAA when this is fixed.
+    // viewer.scene.postProcessStages.fxaa.enabled = property?.render?.antialias === "high";
+    return property?.render?.antialias === "extreme"
+      ? 8
+      : property?.render?.antialias === "high"
+        ? 6
+        : property?.render?.antialias === "medium"
+          ? 4
+          : 1;
+  }, [property?.render?.antialias]);
+
+  const sceneMode = useMemo(() => {
+    return property?.scene?.mode === "2d"
+      ? SceneMode.SCENE2D
+      : property?.scene?.mode === "columbus"
+        ? SceneMode.COLUMBUS_VIEW
+        : SceneMode.SCENE3D;
+  }, [property?.scene?.mode]);
+
+  return {
+    sceneLight,
+    sceneBackgroundColor,
+    sceneMsaaSamples,
+    sceneMode,
+  };
+};