@reearth/core 0.0.7-alpha.5 → 0.0.7-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reearth/core",
-  "version": "0.0.7-alpha.5",
+  "version": "0.0.7-beta.1",
   "author": "Re:Earth contributors <community@reearth.io>",
   "license": "Apache-2.0",
   "description": "A library that abstracts a map engine as one common API.",
@@ -27,9 +27,9 @@
     "node": ">=20"
   },
   "peerDependencies": {
-    "cesium": "1.x",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "cesium": "1.x"
   },
   "dependencies": {
     "@reearth/cesium-mvt-imagery-provider": "1.5.4",
@@ -61,7 +61,7 @@
     "react-error-boundary": "4.0.11",
     "react-nl2br": "1.0.4",
     "react-use": "17.5.0",
-    "resium": "^1.18.0",
+    "resium": "1.17.4",
     "suspend-react": "0.1.3",
     "tiny-invariant": "1.3.3",
     "use-callback-ref": "1.3.2",
@@ -95,7 +95,7 @@
     "@typescript-eslint/eslint-plugin": "7.2.0",
     "@typescript-eslint/parser": "7.2.0",
     "@vitejs/plugin-react": "4.2.1",
-    "cesium": "1.116.0",
+    "cesium": "1.118.0",
     "eslint": "8.57.0",
     "eslint-config-reearth": "0.3.0",
     "eslint-plugin-react-hooks": "4.6.0",

package/src/Map/ClusteredLayers/index.tsx

@@ -1,7 +1,7 @@
 import { ComponentType, useMemo, useCallback, ReactNode } from "react";
 
 import LayerComponent, { type CommonProps, type Props as LayerProps } from "../Layer";
-import type { Layer, Atom, Typography, DataType, ViewerProperty } from "../types";
+import type { Layer, Atom, Typography, DataType } from "../types";
 
 export type Props = {
   layers?: Layer[];
@@ -14,7 +14,7 @@ export type Props = {
   isHidden?: (id: string) => boolean;
   clusters?: Cluster[];
   delegatedDataTypes?: DataType[];
-  viewerProperty?: ViewerProperty;
+  sceneProperty?: any;
   clusterComponent?: ClusterComponentType;
   Feature?: LayerProps["Feature"];
 } & Omit<CommonProps, "isSelected" | "isHidden" | "selectedFeatureId">;

package/src/Map/Layer/index.tsx

@@ -9,7 +9,7 @@ import type {
   ComputedFeature,
   LayerSimple,
 } from "../../mantle";
-import { ViewerProperty } from "../types";
+import { SceneProperty } from "../types";
 
 import useHooks, { type Atom, type EvalFeature } from "./hooks";
 
@@ -29,7 +29,7 @@ export type CommonProps = {
 
 export type FeatureComponentProps = {
   layer: ComputedLayer;
-  viewerProperty?: ViewerProperty;
+  sceneProperty?: SceneProperty;
   onFeatureRequest?: (range: DataRange) => void;
   onLayerFetch?: (value: Partial<Pick<LayerSimple, "properties">>) => void;
   onFeatureFetch?: (features: Feature[]) => void;
@@ -44,7 +44,7 @@ export type Props = {
   atom?: Atom;
   overrides?: Record<string, any>;
   delegatedDataTypes?: DataType[];
-  viewerProperty?: ViewerProperty;
+  sceneProperty?: any;
   selectedFeatureId?: string;
   /** Feature component should be injected by a map engine. */
   Feature?: ComponentType<FeatureComponentProps>;

package/src/Map/Layers/hooks.ts

@@ -52,7 +52,6 @@ export type Ref = {
   override: (id: string, layer?: (Partial<Layer> & { property?: any }) | null) => void;
   deleteLayer: (...ids: string[]) => void;
   isLayer: (obj: any) => obj is LazyLayer;
-  isComputedLayer: (obj: any) => obj is ComputedLayer;
   layers: () => LazyLayer[];
   walk: <T>(
     fn: (layer: LazyLayer, index: number, parents: LazyLayer[]) => T | void,
@@ -456,13 +455,6 @@ export default function useHooks({
     [lazyLayerPrototype],
   );
 
-  const isComputedLayer = useCallback(
-    (obj: any): obj is ComputedLayer => {
-      return typeof obj === "object" && Object.getPrototypeOf(obj) === lazyComputedLayerPrototype;
-    },
-    [lazyComputedLayerPrototype],
-  );
-
   const rootLayers = useCallback(() => {
     return [...(layersRef() ?? []), ...tempLayersRef.current]
       .map(l => findById(l.id))
@@ -559,7 +551,6 @@ export default function useHooks({
       deleteLayer,
       findByIds,
       isLayer,
-      isComputedLayer,
       layers: rootLayers,
       walk,
       find,
@@ -584,7 +575,6 @@ export default function useHooks({
       deleteLayer,
       findByIds,
       isLayer,
-      isComputedLayer,
       rootLayers,
       walk,
       find,

package/src/Map/Layers/index.tsx

@@ -2,7 +2,7 @@ import { forwardRef, RefObject, type ForwardRefRenderFunction, type MutableRefOb
 
 import { SelectedFeatureInfo } from "../../mantle";
 import ClusteredLayers, { type Props as ClusteredLayerProps } from "../ClusteredLayers";
-import type { ComputedLayer, EngineRef, RequestingRenderMode, ViewerProperty } from "../types";
+import type { ComputedLayer, EngineRef, RequestingRenderMode } from "../types";
 
 import useHooks, { LayerSelectionReason, type Ref } from "./hooks";
 
@@ -36,7 +36,7 @@ export type Props = Omit<ClusteredLayerProps, "atomMap" | "isHidden" | "selected
     reason?: LayerSelectionReason;
   };
   hiddenLayers?: string[];
-  viewerProperty?: ViewerProperty;
+  sceneProperty?: any;
   requestingRenderMode?: MutableRefObject<RequestingRenderMode>;
   engineRef?: RefObject<EngineRef>;
   onLayerSelect?: (

package/src/Map/Sketch/hooks.ts

@@ -24,16 +24,15 @@ import {
   MouseEventProps,
   SketchRef,
 } from "../types";
-import { useGet } from "../utils";
 
-import { PRESET_APPEARANCE, PRESET_COLOR } from "./preset";
+import { PRESET_APPEARANCE } from "./preset";
 import { Position3d, createSketchMachine } from "./sketchMachine";
 import {
   GeometryOptionsXYZ,
   SketchType,
   SketchFeature,
+  SketchAppearance,
   SketchEventProps,
-  SketchOptions,
 } from "./types";
 import { useWindowEvent } from "./utils";
 
@@ -74,25 +73,16 @@ export default function useHooks({
   const [state, send] = useMachine(sketchMachine);
   const [type, updateType] = useState<SketchType | undefined>();
   const [from, updateFrom] = useState<"editor" | "plugin">("editor");
+  const [color, updateColor] = useState<string>();
+  const [disableShadow, updateDisableShadow] = useState(false);
+  const [enableRelativeHeight, updateEnableRelativeHeight] = useState(false);
   const [disableInteraction, setDisableInteraction] = useState(false);
-
-  const [sketchOptions, setSketchOptions] = useState<SketchOptions>({
-    color: PRESET_COLOR,
-    appearance: PRESET_APPEARANCE,
-    dataOnly: false,
-    disableShadow: false,
-    enableRelativeHeight: false,
-    rightClickToAbort: true,
-    autoResetInteractionMode: true,
-  });
-
-  const overrideOptions = useCallback((options: SketchOptions) => {
-    setSketchOptions(prev => ({
-      ...prev,
-      ...options,
-      appearance: merge(cloneDeep(prev.appearance), options.appearance),
-    }));
-  }, []);
+  const [defaultAppearance, updateDefaultAppearance] = useState<SketchAppearance | undefined>(
+    PRESET_APPEARANCE,
+  );
+  const createDataOnlyForPluginEnabledRef = useRef(false);
+  const allowRightClickToAbortEnabledRef = useRef(true);
+  const allowAutoResetInteractionModeRef = useRef(true);
 
   const [geometryOptions, setGeometryOptions] = useState<GeometryOptionsXYZ | null>(null);
   const [extrudedHeight, setExtrudedHeight] = useState(0);
@@ -104,6 +94,34 @@ export default function useHooks({
     updateFrom(from ?? "editor");
   }, []);
 
+  const setColor = useCallback((color: string) => {
+    updateColor(color);
+  }, []);
+
+  const setDisableShadow = useCallback((disable: boolean) => {
+    updateDisableShadow(!!disable);
+  }, []);
+
+  const setEnableRelativeHeight = useCallback((enable: boolean) => {
+    updateEnableRelativeHeight(!!enable);
+  }, []);
+
+  const setDefaultAppearance = useCallback((appearance: SketchAppearance) => {
+    updateDefaultAppearance(merge(cloneDeep(PRESET_APPEARANCE), appearance));
+  }, []);
+
+  const createDataOnly = useCallback((dataOnly: boolean) => {
+    createDataOnlyForPluginEnabledRef.current = !!dataOnly;
+  }, []);
+
+  const allowRightClickToAbort = useCallback((allow: boolean) => {
+    allowRightClickToAbortEnabledRef.current = !!allow;
+  }, []);
+
+  const allowAutoResetInteractionMode = useCallback((allow: boolean) => {
+    allowAutoResetInteractionModeRef.current = !!allow;
+  }, []);
+
   const createFeature = useCallback(() => {
     const geoOptions = type === "marker" ? markerGeometryRef.current : geometryOptions;
     if (geoOptions == null) {
@@ -151,11 +169,11 @@ export default function useHooks({
             features: [{ ...feature, id: feature.properties.id }],
           },
         },
-        ...sketchOptions.appearance,
+        ...defaultAppearance,
       });
       return { layerId: newLayer?.id, featureId: feature.properties.id };
     },
-    [layersRef, sketchOptions.appearance],
+    [layersRef, defaultAppearance],
   );
 
   const pluginSketchLayerFeatureAdd = useCallback(
@@ -208,7 +226,7 @@ export default function useHooks({
         return;
       }
 
-      if (!sketchOptions.dataOnly) {
+      if (!createDataOnlyForPluginEnabledRef.current) {
         const selectedLayer = layersRef.current?.selectedLayer();
         const { layerId, featureId } =
           selectedLayer?.id?.length !== PLUGIN_LAYER_ID_LENGTH ||
@@ -244,7 +262,6 @@ export default function useHooks({
     [
       layersRef,
       from,
-      sketchOptions.dataOnly,
       pluginSketchLayerCreate,
       pluginSketchLayerFeatureAdd,
       onSketchFeatureCreate,
@@ -464,7 +481,7 @@ export default function useHooks({
   );
 
   const handleRightClick = useCallback(() => {
-    if (!sketchOptions.rightClickToAbort) {
+    if (!allowRightClickToAbortEnabledRef.current) {
       return;
     }
     if (type !== undefined) {
@@ -473,7 +490,7 @@ export default function useHooks({
     if (state.matches("idle")) return;
     send({ type: "ABORT" });
     updateGeometryOptions(undefined);
-  }, [type, state, sketchOptions.rightClickToAbort, send, updateGeometryOptions]);
+  }, [type, state, send, updateGeometryOptions]);
 
   const mouseDownEventRef = useRef<MouseEventCallback>(handleLeftDown);
   mouseDownEventRef.current = handleLeftDown;
@@ -569,41 +586,44 @@ export default function useHooks({
   useEffect(() => {
     if (type) {
       overrideInteractionMode?.("sketch");
-    } else if (sketchOptions.autoResetInteractionMode) {
+    } else if (allowAutoResetInteractionModeRef.current) {
       overrideInteractionMode?.("default");
     }
 
     onSketchTypeChange?.(type, from);
-  }, [
-    type,
-    from,
-    sketchOptions.autoResetInteractionMode,
-    overrideInteractionMode,
-    onSketchTypeChange,
-  ]);
-
-  // API
-  const getType = useGet(type);
-  const getOptions = useGet(sketchOptions);
+  }, [type, from, overrideInteractionMode, onSketchTypeChange]);
 
   useImperativeHandle(
     ref,
     () => ({
-      getType,
       setType,
-      getOptions,
-      overrideOptions,
+      setColor,
+      setDefaultAppearance,
+      createDataOnly,
+      disableShadow: setDisableShadow,
+      enableRelativeHeight: setEnableRelativeHeight,
+      allowRightClickToAbort,
+      allowAutoResetInteractionMode,
     }),
-    [getType, setType, getOptions, overrideOptions],
+    [
+      setType,
+      setColor,
+      setDisableShadow,
+      setEnableRelativeHeight,
+      setDefaultAppearance,
+      createDataOnly,
+      allowRightClickToAbort,
+      allowAutoResetInteractionMode,
+    ],
   );
 
   return {
     state,
     extrudedHeight,
     geometryOptions,
-    color: sketchOptions.color,
-    disableShadow: sketchOptions.disableShadow,
-    enableRelativeHeight: sketchOptions.enableRelativeHeight,
+    color,
+    disableShadow,
+    enableRelativeHeight,
   } as any;
 }
 

package/src/Map/Sketch/index.tsx

@@ -1,16 +1,38 @@
 // Reference: Sketch feature is basically referenced from https://github.com/takram-design-engineering/plateau-view/blob/main/libs/sketch/src/SketchTool.tsx
 
-import { ForwardRefRenderFunction, RefObject, forwardRef } from "react";
+import { type LineString, type MultiPolygon, type Polygon } from "geojson";
+import { ComponentType, ForwardRefRenderFunction, RefObject, forwardRef } from "react";
+import { RequireExactlyOne } from "type-fest";
 
 import { ComputedLayer, SelectedFeatureInfo } from "../../mantle";
+import { Position3d } from "../../types";
 import { InteractionModeType } from "../../Visualizer/interactionMode";
 import { EngineRef, Feature, LayerSelectionReason, LayersRef, SketchRef } from "../types";
 
 import useHooks from "./hooks";
-import { SketchComponentType, SketchEventProps, SketchFeature, SketchType } from "./types";
+import { SketchEventProps, SketchFeature, SketchType } from "./types";
 
 export * from "./types";
 
+export type SketchComponentType = ComponentType<SketchComponentProps>;
+
+type GeometryOptions = {
+  type: SketchType;
+  controlPoints: readonly Position3d[];
+};
+
+type SketchComponentProps = RequireExactlyOne<
+  {
+    geometry?: LineString | Polygon | MultiPolygon | null;
+    geometryOptions?: GeometryOptions | null;
+    extrudedHeight?: number;
+    disableShadow?: boolean;
+    enableRelativeHeight?: boolean;
+    color?: string;
+  },
+  "geometry" | "geometryOptions"
+>;
+
 export type OnLayerSelectType = (
   layerId: string | undefined,
   featureId: string | undefined,

package/src/Map/Sketch/preset.ts

@@ -27,5 +27,3 @@ export const PRESET_APPEARANCE: SketchAppearance = {
     strokeWidth: 2,
   },
 };
-
-export const PRESET_COLOR: string = "#FFFFFF";

package/src/Map/Sketch/types.ts

@@ -1,29 +1,8 @@
 import { Feature as GeojsonFeature, MultiPolygon, Polygon, Point, LineString } from "geojson";
-import { ComponentType } from "react";
-import { RequireExactlyOne } from "type-fest";
 
 import { LayerAppearanceTypes } from "../../mantle";
 import { Position3d } from "../../types";
 
-type GeometryOptions = {
-  type: SketchType;
-  controlPoints: readonly Position3d[];
-};
-
-type SketchComponentProps = RequireExactlyOne<
-  {
-    geometry?: LineString | Polygon | MultiPolygon | null;
-    geometryOptions?: GeometryOptions | null;
-    extrudedHeight?: number;
-    disableShadow?: boolean;
-    enableRelativeHeight?: boolean;
-    color?: string;
-  },
-  "geometry" | "geometryOptions"
->;
-
-export type SketchComponentType = ComponentType<SketchComponentProps>;
-
 export type SketchType =
   | "marker"
   | "polyline"
@@ -34,16 +13,6 @@ export type SketchType =
   | "extrudedRectangle"
   | "extrudedPolygon";
 
-export type SketchOptions = {
-  color?: string;
-  appearance?: SketchAppearance;
-  dataOnly?: boolean;
-  disableShadow?: boolean;
-  enableRelativeHeight?: boolean;
-  rightClickToAbort?: boolean;
-  autoResetInteractionMode?: boolean;
-};
-
 export type GeometryOptionsXYZ = {
   type: SketchType;
   controlPoints: Position3d[];

package/src/Map/hooks.ts

@@ -9,6 +9,7 @@ import type {
   LayerSelectionReason,
   ComputedLayer,
   RequestingRenderMode,
+  SceneProperty,
   SketchRef,
 } from "./types";
 import useTimelineManager, { TimelineManagerRef } from "./useTimelineManager";
@@ -23,11 +24,13 @@ export const REQUEST_RENDER_ONCE = 1;
 
 export default function ({
   ref,
+  sceneProperty,
   timelineManagerRef,
   cursor,
   onLayerSelect,
 }: {
   ref: Ref<MapRef>;
+  sceneProperty?: SceneProperty;
   timelineManagerRef?: TimelineManagerRef;
   cursor?: CursorType;
   onLayerSelect?: (
@@ -101,6 +104,7 @@ export default function ({
   );
 
   useTimelineManager({
+    init: sceneProperty?.timeline,
     engineRef,
     timelineManagerRef,
   });

package/src/Map/index.tsx

@@ -8,7 +8,7 @@ import Sketch, { SketchProps } from "./Sketch";
 import type { Engine, EngineProps } from "./types";
 
 export * from "./types";
-export { useGet, type WrappedRef, type Undefinable } from "./utils";
+export { useGet, type WrappedRef, type Undefinable, useOverriddenProperty } from "./utils";
 
 export type {
   NaiveLayer,
@@ -36,12 +36,7 @@ export type Props = {
   engine?: string;
 } & Omit<
   LayersProps,
-  | "Feature"
-  | "clusterComponent"
-  | "selectionReason"
-  | "delegatedDataTypes"
-  | "selectedLayerId"
-  | "viewerProperty"
+  "Feature" | "clusterComponent" | "selectionReason" | "delegatedDataTypes" | "selectedLayerId"
 > &
   Omit<EngineProps, "onLayerSelect" | "layerSelectionReason" | "selectedLayerId"> &
   Omit<SketchProps, "layersRef" | "engineRef" | "SketchComponent"> & {
@@ -59,6 +54,7 @@ function MapFn(
     layers,
     overrides,
     timelineManagerRef,
+    sceneProperty,
     interactionMode,
     selectedFeature,
     cursor,
@@ -84,6 +80,7 @@ function MapFn(
     handleEngineLayerSelect,
   } = useHooks({
     ref,
+    sceneProperty,
     timelineManagerRef,
     cursor,
     onLayerSelect,
@@ -126,7 +123,7 @@ function MapFn(
         clusterComponent={currentEngine?.clusterComponent}
         delegatedDataTypes={currentEngine.delegatedDataTypes}
         meta={props.meta}
-        viewerProperty={props.property}
+        sceneProperty={props.property}
         requestingRenderMode={requestingRenderMode}
         onLayerSelect={handleLayerSelect}
       />

package/src/Map/ref.ts

@@ -103,7 +103,6 @@ const layersRefKeys: FunctionKeys<LayersRef> = {
   findByTags: 1,
   hide: 1,
   isLayer: 1,
-  isComputedLayer: 1,
   layers: 1,
   override: 1,
   replace: 1,
@@ -118,10 +117,14 @@ const layersRefKeys: FunctionKeys<LayersRef> = {
 };
 
 const sketchRefKeys: FunctionKeys<SketchRef> = {
-  getType: 1,
   setType: 1,
-  getOptions: 1,
-  overrideOptions: 1,
+  setColor: 1,
+  setDefaultAppearance: 1,
+  createDataOnly: 1,
+  disableShadow: 1,
+  enableRelativeHeight: 1,
+  allowRightClickToAbort: 1,
+  allowAutoResetInteractionMode: 1,
 };
 
 export function mapRef({