@reearth/core 0.0.6 → 0.0.7-alpha.1

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";
 
@@ -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>,
@@ -539,13 +537,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(

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?.heightMap ?? {};
+
   const isCustomHeatmapEnabled = useMemo(() => heatmapType === "custom", [heatmapType]);
 
   const shaderForTerrainHeatmap = useMemo(
@@ -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,
+  };
+};