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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reearth/core",
-  "version": "0.0.7-alpha.0",
+  "version": "0.0.7-alpha.10",
   "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.118.x",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "cesium": "1.x"
+    "react-dom": "^18.2.0"
   },
   "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.17.4",
+    "resium": "1.18.1",
     "suspend-react": "0.1.3",
     "tiny-invariant": "1.3.3",
     "use-callback-ref": "1.3.2",
@@ -89,13 +89,13 @@
     "@types/lodash-es": "4.17.12",
     "@types/node": "20.12.7",
     "@types/pbf": "3.0.5",
-    "@types/react": "18.2.6",
-    "@types/react-dom": "18.2.6",
+    "@types/react": "18.3.0",
+    "@types/react-dom": "18.3.0",
     "@types/uuid": "9.0.8",
     "@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",
@@ -108,7 +108,7 @@
     "storybook": "8.0.8",
     "typescript": "5.2.2",
     "vite": "5.0.8",
-    "vite-plugin-cesium": "1.2.22",
+    "vite-plugin-cesium": "1.2.23",
     "vite-plugin-dts": "3.8.1",
     "vite-plugin-svgr": "4.2.0",
     "vite-tsconfig-paths": "^4.3.2",

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 } from "../types";
+import type { Layer, Atom, Typography, DataType, ViewerProperty } from "../types";
 
 export type Props = {
   layers?: Layer[];
@@ -14,7 +14,7 @@ export type Props = {
   isHidden?: (id: string) => boolean;
   clusters?: Cluster[];
   delegatedDataTypes?: DataType[];
-  sceneProperty?: any;
+  viewerProperty?: ViewerProperty;
   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 { SceneProperty } from "../types";
+import { ViewerProperty } from "../types";
 
 import useHooks, { type Atom, type EvalFeature } from "./hooks";
 
@@ -29,7 +29,7 @@ export type CommonProps = {
 
 export type FeatureComponentProps = {
   layer: ComputedLayer;
-  sceneProperty?: SceneProperty;
+  viewerProperty?: ViewerProperty;
   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[];
-  sceneProperty?: any;
+  viewerProperty?: ViewerProperty;
   selectedFeatureId?: string;
   /** Feature component should be injected by a map engine. */
   Feature?: ComponentType<FeatureComponentProps>;

package/src/Map/Layers/hooks.ts

@@ -52,6 +52,7 @@ 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,
@@ -455,6 +456,13 @@ 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))
@@ -551,6 +559,7 @@ export default function useHooks({
       deleteLayer,
       findByIds,
       isLayer,
+      isComputedLayer,
       layers: rootLayers,
       walk,
       find,
@@ -575,6 +584,7 @@ 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 } from "../types";
+import type { ComputedLayer, EngineRef, RequestingRenderMode, ViewerProperty } 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[];
-  sceneProperty?: any;
+  viewerProperty?: ViewerProperty;
   requestingRenderMode?: MutableRefObject<RequestingRenderMode>;
   engineRef?: RefObject<EngineRef>;
   onLayerSelect?: (

package/src/Map/Sketch/hooks.ts

@@ -24,15 +24,16 @@ import {
   MouseEventProps,
   SketchRef,
 } from "../types";
+import { useGet } from "../utils";
 
-import { PRESET_APPEARANCE } from "./preset";
+import { PRESET_APPEARANCE, PRESET_COLOR } from "./preset";
 import { Position3d, createSketchMachine } from "./sketchMachine";
 import {
   GeometryOptionsXYZ,
   SketchType,
   SketchFeature,
-  SketchAppearance,
   SketchEventProps,
+  SketchOptions,
 } from "./types";
 import { useWindowEvent } from "./utils";
 
@@ -73,16 +74,25 @@ 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 [defaultAppearance, updateDefaultAppearance] = useState<SketchAppearance | undefined>(
-    PRESET_APPEARANCE,
-  );
-  const createDataOnlyForPluginEnabledRef = useRef(false);
-  const allowRightClickToAbortEnabledRef = useRef(true);
-  const allowAutoResetInteractionModeRef = useRef(true);
+
+  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 [geometryOptions, setGeometryOptions] = useState<GeometryOptionsXYZ | null>(null);
   const [extrudedHeight, setExtrudedHeight] = useState(0);
@@ -94,34 +104,6 @@ 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) {
@@ -169,11 +151,11 @@ export default function useHooks({
             features: [{ ...feature, id: feature.properties.id }],
           },
         },
-        ...defaultAppearance,
+        ...sketchOptions.appearance,
       });
       return { layerId: newLayer?.id, featureId: feature.properties.id };
     },
-    [layersRef, defaultAppearance],
+    [layersRef, sketchOptions.appearance],
   );
 
   const pluginSketchLayerFeatureAdd = useCallback(
@@ -220,13 +202,16 @@ export default function useHooks({
 
   const handleFeatureCreate = useCallback(
     (feature: SketchFeature) => {
-      updateType(undefined);
+      if (sketchOptions.autoResetInteractionMode) {
+        updateType(undefined);
+      }
+
       if (from === "editor") {
         onSketchFeatureCreate?.(feature);
         return;
       }
 
-      if (!createDataOnlyForPluginEnabledRef.current) {
+      if (!sketchOptions.dataOnly) {
         const selectedLayer = layersRef.current?.selectedLayer();
         const { layerId, featureId } =
           selectedLayer?.id?.length !== PLUGIN_LAYER_ID_LENGTH ||
@@ -262,6 +247,8 @@ export default function useHooks({
     [
       layersRef,
       from,
+      sketchOptions.dataOnly,
+      sketchOptions.autoResetInteractionMode,
       pluginSketchLayerCreate,
       pluginSketchLayerFeatureAdd,
       onSketchFeatureCreate,
@@ -481,7 +468,7 @@ export default function useHooks({
   );
 
   const handleRightClick = useCallback(() => {
-    if (!allowRightClickToAbortEnabledRef.current) {
+    if (!sketchOptions.rightClickToAbort) {
       return;
     }
     if (type !== undefined) {
@@ -490,7 +477,7 @@ export default function useHooks({
     if (state.matches("idle")) return;
     send({ type: "ABORT" });
     updateGeometryOptions(undefined);
-  }, [type, state, send, updateGeometryOptions]);
+  }, [type, state, sketchOptions.rightClickToAbort, send, updateGeometryOptions]);
 
   const mouseDownEventRef = useRef<MouseEventCallback>(handleLeftDown);
   mouseDownEventRef.current = handleLeftDown;
@@ -583,47 +570,40 @@ export default function useHooks({
     }
   }, [type, send, updateGeometryOptions]);
 
+  const fromRef = useRef(from);
+  fromRef.current = from;
+  const overrideInteractionModeRef = useRef(overrideInteractionMode);
+  overrideInteractionModeRef.current = overrideInteractionMode;
+  const onSketchTypeChangeRef = useRef(onSketchTypeChange);
+  onSketchTypeChangeRef.current = onSketchTypeChange;
+
   useEffect(() => {
-    if (type) {
-      overrideInteractionMode?.("sketch");
-    } else if (allowAutoResetInteractionModeRef.current) {
-      overrideInteractionMode?.("default");
-    }
+    overrideInteractionModeRef.current?.(type ? "sketch" : "default");
+    onSketchTypeChangeRef.current?.(type, fromRef.current);
+  }, [type]);
 
-    onSketchTypeChange?.(type, from);
-  }, [type, from, overrideInteractionMode, onSketchTypeChange]);
+  // API
+  const getType = useGet(type);
+  const getOptions = useGet(sketchOptions);
 
   useImperativeHandle(
     ref,
     () => ({
+      getType,
       setType,
-      setColor,
-      setDefaultAppearance,
-      createDataOnly,
-      disableShadow: setDisableShadow,
-      enableRelativeHeight: setEnableRelativeHeight,
-      allowRightClickToAbort,
-      allowAutoResetInteractionMode,
+      getOptions,
+      overrideOptions,
     }),
-    [
-      setType,
-      setColor,
-      setDisableShadow,
-      setEnableRelativeHeight,
-      setDefaultAppearance,
-      createDataOnly,
-      allowRightClickToAbort,
-      allowAutoResetInteractionMode,
-    ],
+    [getType, setType, getOptions, overrideOptions],
   );
 
   return {
     state,
     extrudedHeight,
     geometryOptions,
-    color,
-    disableShadow,
-    enableRelativeHeight,
+    color: sketchOptions.color,
+    disableShadow: sketchOptions.disableShadow,
+    enableRelativeHeight: sketchOptions.enableRelativeHeight,
   } as any;
 }
 

package/src/Map/Sketch/index.tsx

@@ -1,38 +1,16 @@
 // Reference: Sketch feature is basically referenced from https://github.com/takram-design-engineering/plateau-view/blob/main/libs/sketch/src/SketchTool.tsx
 
-import { type LineString, type MultiPolygon, type Polygon } from "geojson";
-import { ComponentType, ForwardRefRenderFunction, RefObject, forwardRef } from "react";
-import { RequireExactlyOne } from "type-fest";
+import { ForwardRefRenderFunction, RefObject, forwardRef } from "react";
 
 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 { SketchEventProps, SketchFeature, SketchType } from "./types";
+import { SketchComponentType, 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,3 +27,5 @@ export const PRESET_APPEARANCE: SketchAppearance = {
     strokeWidth: 2,
   },
 };
+
+export const PRESET_COLOR: string = "#FFFFFF";

package/src/Map/Sketch/types.ts

@@ -1,8 +1,29 @@
 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"
@@ -13,6 +34,16 @@ 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,7 +9,6 @@ import type {
   LayerSelectionReason,
   ComputedLayer,
   RequestingRenderMode,
-  SceneProperty,
   SketchRef,
 } from "./types";
 import useTimelineManager, { TimelineManagerRef } from "./useTimelineManager";
@@ -24,13 +23,11 @@ export const REQUEST_RENDER_ONCE = 1;
 
 export default function ({
   ref,
-  sceneProperty,
   timelineManagerRef,
   cursor,
   onLayerSelect,
 }: {
   ref: Ref<MapRef>;
-  sceneProperty?: SceneProperty;
   timelineManagerRef?: TimelineManagerRef;
   cursor?: CursorType;
   onLayerSelect?: (
@@ -104,7 +101,6 @@ 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, useOverriddenProperty } from "./utils";
+export { useGet, type WrappedRef, type Undefinable } from "./utils";
 
 export type {
   NaiveLayer,
@@ -36,7 +36,12 @@ export type Props = {
   engine?: string;
 } & Omit<
   LayersProps,
-  "Feature" | "clusterComponent" | "selectionReason" | "delegatedDataTypes" | "selectedLayerId"
+  | "Feature"
+  | "clusterComponent"
+  | "selectionReason"
+  | "delegatedDataTypes"
+  | "selectedLayerId"
+  | "viewerProperty"
 > &
   Omit<EngineProps, "onLayerSelect" | "layerSelectionReason" | "selectedLayerId"> &
   Omit<SketchProps, "layersRef" | "engineRef" | "SketchComponent"> & {
@@ -54,7 +59,6 @@ function MapFn(
     layers,
     overrides,
     timelineManagerRef,
-    sceneProperty,
     interactionMode,
     selectedFeature,
     cursor,
@@ -80,7 +84,6 @@ function MapFn(
     handleEngineLayerSelect,
   } = useHooks({
     ref,
-    sceneProperty,
     timelineManagerRef,
     cursor,
     onLayerSelect,
@@ -123,7 +126,7 @@ function MapFn(
         clusterComponent={currentEngine?.clusterComponent}
         delegatedDataTypes={currentEngine.delegatedDataTypes}
         meta={props.meta}
-        sceneProperty={props.property}
+        viewerProperty={props.property}
         requestingRenderMode={requestingRenderMode}
         onLayerSelect={handleLayerSelect}
       />

package/src/Map/ref.ts

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