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

package/src/Visualizer/hooks.ts

@@ -1,4 +1,3 @@
-import { clone } from "lodash-es";
 import { Ref, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 
 import type { ComputedFeature, Feature, LatLng, SelectedFeatureInfo } from "../mantle";
@@ -7,7 +6,6 @@ import type {
   LayerSelectionReason,
   Camera,
   ComputedLayer,
-  SceneProperty,
   LayerEditEvent,
   CursorType,
   LayerVisibilityEvent,
@@ -15,21 +13,22 @@ import type {
   LayerSelectWithRectStart,
   LayerSelectWithRectMove,
   LayerSelectWithRectEnd,
+  ViewerProperty,
 } from "../Map";
-import { useOverriddenProperty } from "../Map";
 import { SketchEventCallback, SketchEventProps, SketchType } from "../Map/Sketch/types";
 import { TimelineManagerRef } from "../Map/useTimelineManager";
 
 import type { InteractionModeType } from "./interactionMode";
 import { INTERACTION_MODES } from "./interactionMode";
+import useCoreAPI from "./useCoreAPI";
 import useViewport from "./useViewport";
 
 export default function useHooks(
   {
     camera: initialCamera,
     interactionMode: initialInteractionMode,
-    sceneProperty,
     zoomedLayerId,
+    viewerProperty,
     onLayerSelect,
     onCameraChange,
     onInteractionModeChange,
@@ -39,8 +38,8 @@ export default function useHooks(
   }: {
     camera?: Camera;
     interactionMode?: InteractionModeType;
-    sceneProperty?: SceneProperty;
     zoomedLayerId?: string;
+    viewerProperty?: ViewerProperty;
     onLayerSelect?: (
       layerId: string | undefined,
       layer: (() => Promise<ComputedLayer | undefined>) | undefined,
@@ -83,12 +82,24 @@ export default function useHooks(
       reason: LayerSelectionReason | undefined,
       info: SelectedFeatureInfo | undefined,
     ) => {
-      if (selectedLayer.layerId === layerId && selectedLayer.featureId === featureId) return;
+      const isSketchLayer =
+        selectedLayer.layer?.layer.type === "simple" &&
+        selectedLayer.layer?.layer?.data?.isSketchLayer;
+      // Sketch layer feature has a fixed featureId, we need to exclude it from the skip condition
+      if (
+        selectedLayer.layerId === layerId &&
+        selectedLayer.featureId === featureId &&
+        !isSketchLayer
+      )
+        return;
 
       const computedLayer = await layer?.();
       const computedFeature =
         layerId && featureId
-          ? mapRef.current?.engine.findComputedFeatureById?.(layerId, featureId) ?? info?.feature
+          ? (isSketchLayer
+              ? computedLayer?.features?.find(f => f.id === featureId)
+              : mapRef.current?.engine.findComputedFeatureById?.(layerId, featureId)) ??
+            info?.feature
           : undefined;
 
       selectFeature(
@@ -111,70 +122,6 @@ export default function useHooks(
 
   const timelineManagerRef: TimelineManagerRef = useRef();
 
-  // scene
-  const [overriddenSceneProperty, originalOverrideSceneProperty] =
-    useOverriddenProperty(sceneProperty);
-
-  const overrideSceneProperty = useCallback(
-    (pluginId: string, property: SceneProperty) => {
-      if (property.timeline) {
-        const filteredTimeline = clone(property.timeline);
-        delete filteredTimeline.visible;
-        if (Object.keys(filteredTimeline).length > 0) {
-          if (
-            filteredTimeline.current !== undefined ||
-            filteredTimeline.start !== undefined ||
-            filteredTimeline.stop !== undefined
-          ) {
-            timelineManagerRef?.current?.commit({
-              cmd: "SET_TIME",
-              payload: {
-                start:
-                  filteredTimeline.start ?? timelineManagerRef?.current?.computedTimeline.start,
-                stop: filteredTimeline.stop ?? timelineManagerRef?.current?.computedTimeline.stop,
-                current:
-                  filteredTimeline.current ?? timelineManagerRef?.current?.computedTimeline.current,
-              },
-              committer: {
-                source: "overrideSceneProperty",
-                id: pluginId,
-              },
-            });
-          }
-          if (
-            filteredTimeline.multiplier !== undefined ||
-            filteredTimeline.stepType !== undefined ||
-            filteredTimeline.rangeType !== undefined
-          ) {
-            timelineManagerRef?.current?.commit({
-              cmd: "SET_OPTIONS",
-              payload: {
-                stepType: filteredTimeline.stepType,
-                multiplier: filteredTimeline.multiplier,
-                rangeType: filteredTimeline.rangeType,
-              },
-              committer: {
-                source: "overrideSceneProperty",
-                id: pluginId,
-              },
-            });
-          }
-          if (filteredTimeline.animation !== undefined) {
-            timelineManagerRef?.current?.commit({
-              cmd: filteredTimeline.animation ? "PLAY" : "PAUSE",
-              committer: {
-                source: "overrideSceneProperty",
-                id: pluginId,
-              },
-            });
-          }
-        }
-      }
-      originalOverrideSceneProperty(pluginId, property);
-    },
-    [timelineManagerRef, originalOverrideSceneProperty],
-  );
-
   // camera
   const [camera, changeCamera] = useValue(initialCamera, onCameraChange);
 
@@ -306,8 +253,6 @@ export default function useHooks(
       selectedLayer,
       selectedComputedFeature,
       viewport,
-      overriddenSceneProperty,
-      overrideSceneProperty,
       handleCameraForceHorizontalRollChange,
       handleInteractionModeChange: changeInteractionMode,
       onSketchPluginFeatureCreate,
@@ -324,8 +269,6 @@ export default function useHooks(
       selectedLayer,
       selectedComputedFeature,
       viewport,
-      overriddenSceneProperty,
-      overrideSceneProperty,
       changeInteractionMode,
       handleCameraForceHorizontalRollChange,
       onLayerEdit,
@@ -349,20 +292,20 @@ export default function useHooks(
     [],
   );
 
+  useCoreAPI({ viewerProperty });
+
   return {
     mapRef,
     wrapperRef,
     selectedFeature,
     camera,
     featureFlags,
-    overriddenSceneProperty,
     isLayerDragging,
     timelineManagerRef,
     cursor,
     cameraForceHorizontalRoll,
     coreContextValue,
     containerStyle,
-    overrideSceneProperty,
     handleLayerSelect,
     handleLayerDrag,
     handleLayerDrop,

package/src/Visualizer/index.stories.tsx

@@ -15,11 +15,11 @@ export const Cesium: Story = {
   args: {
     ready: true,
     engine: "cesium",
-    sceneProperty: {
+    viewerProperty: {
       tiles: [
         {
           id: "default",
-          tile_type: "default",
+          type: "default",
         },
       ],
     },
@@ -72,57 +72,13 @@ export const API: Story = {
   args: {
     ready: true,
     engine: "cesium",
-    sceneProperty: {
+    viewerProperty: {
       tiles: [
         {
           id: "default",
-          tile_type: "default",
+          type: "default",
         },
       ],
     },
   },
 };
-
-export const Plugin = {
-  args: {
-    ready: true,
-    engine: "cesium",
-    sceneProperty: {
-      tiles: [
-        {
-          id: "default",
-          tile_type: "default",
-        },
-      ],
-    },
-    widgetAlignSystem: {
-      outer: {
-        left: {
-          top: {
-            align: "start",
-            widgets: [
-              {
-                id: "plugin",
-                pluginId: "plugin",
-                extensionId: "test",
-                ...({
-                  __REEARTH_SOURCECODE: `reearth.layers.add(${JSON.stringify({
-                    id: "l",
-                    type: "simple",
-                    data: {
-                      type: "geojson",
-                      value: { type: "Feature", geometry: { type: "Point", coordinates: [0, 0] } },
-                    },
-                    marker: {
-                      imageColor: "#fff",
-                    },
-                  })});`,
-                } as any),
-              },
-            ],
-          },
-        },
-      },
-    },
-  },
-};

package/src/Visualizer/index.tsx

@@ -5,7 +5,7 @@ import { ComputedFeature } from "../mantle";
 import {
   Map,
   type MapRef,
-  type SceneProperty,
+  type ViewerProperty,
   type Layer,
   type LayerSelectionReason,
   type Camera,
@@ -33,9 +33,10 @@ export type CoreVisualizerProps = {
   engine?: EngineType;
   isBuilt?: boolean;
   isEditable?: boolean;
-  sceneProperty?: SceneProperty;
+  viewerProperty?: ViewerProperty;
   layers?: Layer[];
   clusters?: Cluster[]; // TODO: remove completely from beta core
+  time?: string | Date;
   camera?: Camera;
   interactionMode?: InteractionModeType;
   shouldRender?: boolean;
@@ -67,13 +68,14 @@ export const CoreVisualizer = memo(
         engine,
         isBuilt,
         isEditable,
-        sceneProperty,
+        viewerProperty,
         layers,
         clusters,
         small,
         ready,
         hiddenLayers,
         camera: initialCamera,
+        time,
         interactionMode,
         shouldRender,
         meta,
@@ -97,7 +99,6 @@ export const CoreVisualizer = memo(
         selectedFeature,
         camera,
         featureFlags,
-        overriddenSceneProperty,
         isLayerDragging,
         timelineManagerRef,
         cursor,
@@ -121,8 +122,8 @@ export const CoreVisualizer = memo(
         {
           camera: initialCamera,
           interactionMode,
-          sceneProperty,
           zoomedLayerId,
+          viewerProperty,
           onLayerSelect,
           onCameraChange,
           onZoomToLayer,
@@ -154,7 +155,8 @@ export const CoreVisualizer = memo(
                 style={style}
                 featureFlags={featureFlags}
                 shouldRender={shouldRender}
-                property={overriddenSceneProperty}
+                property={viewerProperty}
+                time={time}
                 small={small}
                 ready={ready}
                 timelineManagerRef={timelineManagerRef}

package/src/Visualizer/useCoreAPI.ts

@@ -0,0 +1,30 @@
+import { useEffect, useMemo, useRef } from "react";
+
+import { version } from "../../package.json";
+import { ViewerProperty } from "../engines";
+
+interface CoreAPI {
+  readonly version: string;
+  readonly viewerProperty?: ViewerProperty;
+}
+
+export default ({ viewerProperty }: { viewerProperty?: ViewerProperty }) => {
+  const viewerPropertyRef = useRef(viewerProperty);
+  viewerPropertyRef.current = viewerProperty;
+
+  const coreAPI: CoreAPI = useMemo(
+    () => ({
+      get version() {
+        return version;
+      },
+      get viewerProperty() {
+        return viewerPropertyRef.current;
+      },
+    }),
+    [],
+  );
+
+  useEffect(() => {
+    (window as any).reearth_core = coreAPI;
+  }, [coreAPI]);
+};

package/src/engines/Cesium/Feature/Ellipse/index.stories.tsx

@@ -41,7 +41,7 @@ Default.args = {
     tiles: [
       {
         id: "default",
-        tile_type: "default",
+        type: "default",
       },
     ],
   },

package/src/engines/Cesium/Feature/Frustum/index.stories.tsx

@@ -42,7 +42,7 @@ Default.args = {
     tiles: [
       {
         id: "default",
-        tile_type: "default",
+        type: "default",
       },
     ],
   },

package/src/engines/Cesium/Feature/Model/index.stories.tsx

@@ -41,7 +41,7 @@ Default.args = {
     tiles: [
       {
         id: "default",
-        tile_type: "default",
+        type: "default",
       },
     ],
   },

package/src/engines/Cesium/Feature/Model/index.tsx

@@ -39,7 +39,7 @@ export default function Model({
   id,
   isVisible,
   property,
-  sceneProperty,
+  viewerProperty,
   geometry,
   layer,
   feature,
@@ -120,18 +120,19 @@ export default function Model({
     if (
       !property?.specularEnvironmentMaps &&
       !property?.sphericalHarmonicCoefficients &&
-      !sceneProperty?.light?.specularEnvironmentMaps &&
-      !sceneProperty?.light?.sphericalHarmonicCoefficients
+      !viewerProperty?.scene?.imageBasedLighting?.specularEnvironmentMaps &&
+      !viewerProperty?.scene?.imageBasedLighting?.sphericalHarmonicCoefficients
     )
       return ibl;
 
     const specularEnvironmentMaps =
-      property?.specularEnvironmentMaps ?? sceneProperty?.light?.specularEnvironmentMaps;
+      property?.specularEnvironmentMaps ??
+      viewerProperty?.scene?.imageBasedLighting?.specularEnvironmentMaps;
     const imageBasedLightIntensity =
-      property?.imageBasedLightIntensity ?? sceneProperty?.light?.imageBasedLightIntensity;
+      property?.imageBasedLightIntensity ?? viewerProperty?.scene?.imageBasedLighting?.intensity;
     const sphericalHarmonicCoefficients = arrayToCartecian3(
       property?.sphericalHarmonicCoefficients ??
-        sceneProperty?.light?.sphericalHarmonicCoefficients,
+        viewerProperty?.scene?.imageBasedLighting?.sphericalHarmonicCoefficients,
       imageBasedLightIntensity,
     );
 
@@ -146,9 +147,9 @@ export default function Model({
     property?.specularEnvironmentMaps,
     property?.sphericalHarmonicCoefficients,
     property?.imageBasedLightIntensity,
-    sceneProperty?.light?.specularEnvironmentMaps,
-    sceneProperty?.light?.sphericalHarmonicCoefficients,
-    sceneProperty?.light?.imageBasedLightIntensity,
+    viewerProperty?.scene?.imageBasedLighting?.specularEnvironmentMaps,
+    viewerProperty?.scene?.imageBasedLighting?.sphericalHarmonicCoefficients,
+    viewerProperty?.scene?.imageBasedLighting?.intensity,
   ]);
 
   const { viewer } = useCesium();

package/src/engines/Cesium/Feature/Polygon/index.stories.tsx

@@ -58,7 +58,7 @@ Basic.args = {
     tiles: [
       {
         id: "default",
-        tile_type: "default",
+        type: "default",
       },
     ],
   },
@@ -113,7 +113,7 @@ Excluded.args = {
     tiles: [
       {
         id: "default",
-        tile_type: "default",
+        type: "default",
       },
     ],
   },
@@ -162,13 +162,15 @@ ClampToGround.args = {
     tiles: [
       {
         id: "default",
-        tile_type: "default",
+        type: "default",
       },
     ],
-    terrain: {
-      terrain: true,
-      terrainType: "cesium",
+    globe: {
       depthTestAgainstTerrain: true,
     },
+    terrain: {
+      enabled: true,
+      type: "cesium",
+    },
   },
 };

package/src/engines/Cesium/Feature/Raster/index.stories.tsx

@@ -35,7 +35,7 @@ WMS.args = {
     tiles: [
       {
         id: "default",
-        tile_type: "default",
+        type: "default",
       },
     ],
   },
@@ -70,7 +70,7 @@ MVT.args = {
     tiles: [
       {
         id: "default",
-        tile_type: "default",
+        type: "default",
       },
     ],
   },

package/src/engines/Cesium/Feature/Resource/index.stories.tsx

@@ -39,7 +39,7 @@ Default.args = {
     tiles: [
       {
         id: "default",
-        tile_type: "default",
+        type: "default",
       },
     ],
   },

package/src/engines/Cesium/Feature/Tileset/hooks.ts

@@ -32,7 +32,7 @@ import type {
   ComputedLayer,
   Feature,
   EvalFeature,
-  SceneProperty,
+  ViewerProperty,
   Cesium3DTilesAppearance,
 } from "../../..";
 import { useRefValue } from "../../../../hooks";
@@ -429,7 +429,7 @@ export const useHooks = ({
   boxId,
   isVisible,
   property,
-  sceneProperty,
+  viewerProperty,
   layer,
   meta,
   evalFeature,
@@ -440,7 +440,7 @@ export const useHooks = ({
   boxId: string;
   isVisible?: boolean;
   property?: Property;
-  sceneProperty?: SceneProperty;
+  viewerProperty?: ViewerProperty;
   layer?: ComputedLayer;
   feature?: ComputedFeature;
   meta?: Record<string, unknown>;
@@ -738,19 +738,20 @@ export const useHooks = ({
     if (
       !property?.specularEnvironmentMaps &&
       !property?.sphericalHarmonicCoefficients &&
-      !sceneProperty?.light?.specularEnvironmentMaps &&
-      !sceneProperty?.light?.sphericalHarmonicCoefficients
+      !viewerProperty?.scene?.imageBasedLighting?.specularEnvironmentMaps &&
+      !viewerProperty?.scene?.imageBasedLighting?.sphericalHarmonicCoefficients
     )
       return;
 
     const ibl = new ImageBasedLighting();
     const specularEnvironmentMaps =
-      property?.specularEnvironmentMaps ?? sceneProperty?.light?.specularEnvironmentMaps;
+      property?.specularEnvironmentMaps ??
+      viewerProperty?.scene?.imageBasedLighting?.specularEnvironmentMaps;
     const imageBasedLightIntensity =
-      property?.imageBasedLightIntensity ?? sceneProperty?.light?.imageBasedLightIntensity;
+      property?.imageBasedLightIntensity ?? viewerProperty?.scene?.imageBasedLighting?.intensity;
     const sphericalHarmonicCoefficients = arrayToCartecian3(
       property?.sphericalHarmonicCoefficients ??
-        sceneProperty?.light?.sphericalHarmonicCoefficients,
+        viewerProperty?.scene?.imageBasedLighting?.sphericalHarmonicCoefficients,
       imageBasedLightIntensity,
     );
 
@@ -765,9 +766,9 @@ export const useHooks = ({
     property?.specularEnvironmentMaps,
     property?.sphericalHarmonicCoefficients,
     property?.imageBasedLightIntensity,
-    sceneProperty?.light?.specularEnvironmentMaps,
-    sceneProperty?.light?.sphericalHarmonicCoefficients,
-    sceneProperty?.light?.imageBasedLightIntensity,
+    viewerProperty?.scene?.imageBasedLighting?.specularEnvironmentMaps,
+    viewerProperty?.scene?.imageBasedLighting?.sphericalHarmonicCoefficients,
+    viewerProperty?.scene?.imageBasedLighting?.intensity,
   ]);
 
   const handleReady = useCallback(

package/src/engines/Cesium/Feature/Tileset/index.stories.tsx

@@ -34,7 +34,7 @@ Default.args = {
     tiles: [
       {
         id: "default",
-        tile_type: "default",
+        type: "default",
       },
     ],
   },

package/src/engines/Cesium/Feature/Tileset/index.tsx

@@ -26,7 +26,7 @@ function Tileset({
   property,
   layer,
   feature,
-  sceneProperty,
+  viewerProperty,
   meta,
   evalFeature,
   onComputedFeatureFetch,
@@ -53,7 +53,7 @@ function Tileset({
     layer,
     feature,
     property,
-    sceneProperty,
+    viewerProperty,
     meta,
     evalFeature,
     onComputedFeatureFetch,
@@ -95,7 +95,7 @@ function Tileset({
         <Box
           {...props}
           id={boxId}
-          sceneProperty={sceneProperty}
+          viewerProperty={viewerProperty}
           property={boxProperty as any}
           geometry={builtinBoxProps.geometry}
           feature={feature}
@@ -117,7 +117,7 @@ export default memo(
     prev.isVisible === next.isVisible &&
     prev.property === next.property &&
     prev.layer?.layer === next.layer?.layer &&
-    prev.sceneProperty === next.sceneProperty &&
+    prev.viewerProperty === next.viewerProperty &&
     prev.meta === next.meta &&
     prev.evalFeature === next.evalFeature &&
     prev.onComputedFeatureFetch === next.onComputedFeatureFetch &&

package/src/engines/Cesium/Feature/Tileset/useClippingBox.ts

@@ -411,7 +411,16 @@ export const useClippingBox = ({
     eventHandler.setInputAction(handleMouseUp, ScreenSpaceEventType.LEFT_UP);
   }, [eventHandler, handleMouseDown, handleRawMouseMove, handleMouseUp]);
 
-  useEffect(() => () => eventHandler.destroy(), [eventHandler]);
+  useEffect(
+    () => () => {
+      requestAnimationFrame(() => {
+        if (!eventHandler.isDestroyed()) {
+          eventHandler.destroy();
+        }
+      });
+    },
+    [eventHandler],
+  );
 
   const boxProperty = useMemo(
     () => ({ ...boxState, ...dimensions, allowEnterGround }),

package/src/engines/Cesium/Feature/index.tsx

@@ -127,8 +127,9 @@ export default function Feature({
     if (!isRenderableAppearance(k)) return null;
 
     const useSceneSphericalHarmonicCoefficients =
-      !!props.sceneProperty?.light?.sphericalHarmonicCoefficients;
-    const useSceneSpecularEnvironmentMaps = !!props.sceneProperty?.light?.specularEnvironmentMaps;
+      !!props.viewerProperty?.scene?.imageBasedLighting?.sphericalHarmonicCoefficients;
+    const useSceneSpecularEnvironmentMaps =
+      !!props.viewerProperty?.scene?.imageBasedLighting?.specularEnvironmentMaps;
 
     const isVisible = layer.layer.visible !== false && !isHidden;
 
@@ -205,9 +206,9 @@ export default function Feature({
           const isVisible = layer.layer.visible !== false && !isHidden;
           // NOTE: IBL for 3dtiles is not updated unless Tileset feature component is re-created.
           const useSceneSphericalHarmonicCoefficients =
-            !!props.sceneProperty?.light?.sphericalHarmonicCoefficients;
+            !!props.viewerProperty?.scene?.imageBasedLighting?.sphericalHarmonicCoefficients;
           const useSceneSpecularEnvironmentMaps =
-            !!props.sceneProperty?.light?.specularEnvironmentMaps;
+            !!props.viewerProperty?.scene?.imageBasedLighting?.specularEnvironmentMaps;
           const use3dtilesSphericalHarmonicCoefficients =
             layer?.layer?.type === "simple" &&
             !!layer?.layer?.["3dtiles"]?.sphericalHarmonicCoefficients;

package/src/engines/Cesium/Feature/utils.tsx

@@ -35,7 +35,7 @@ import type {
   ComputedLayer,
   FeatureComponentProps,
   Geometry,
-  SceneProperty,
+  ViewerProperty,
 } from "../..";
 import { Data, Layer, LayerSimple, TimeInterval } from "../../../mantle";
 import { FeatureIndex } from "../FeatureIndex";
@@ -48,7 +48,7 @@ export type FeatureProps<P = any> = {
   layer?: ComputedLayer;
   feature?: ComputedFeature;
   geometry?: Geometry;
-  sceneProperty?: SceneProperty;
+  viewerProperty?: ViewerProperty;
 } & Omit<FeatureComponentProps, "layer">;
 
 export type FeatureComponent = ComponentType<FeatureProps>;
@@ -105,6 +105,7 @@ function EntityExtComponent(
     props.id,
     unselectable,
     hideIndicator,
+    r.current?.cesiumElement,
   ]);
 
   return <Entity ref={composeRefs(ref, r)} {...props} />;