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

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/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(
@@ -226,7 +208,7 @@ export default function useHooks({
         return;
       }
 
-      if (!createDataOnlyForPluginEnabledRef.current) {
+      if (!sketchOptions.dataOnly) {
         const selectedLayer = layersRef.current?.selectedLayer();
         const { layerId, featureId } =
           selectedLayer?.id?.length !== PLUGIN_LAYER_ID_LENGTH ||
@@ -262,6 +244,7 @@ export default function useHooks({
     [
       layersRef,
       from,
+      sketchOptions.dataOnly,
       pluginSketchLayerCreate,
       pluginSketchLayerFeatureAdd,
       onSketchFeatureCreate,
@@ -481,7 +464,7 @@ export default function useHooks({
   );
 
   const handleRightClick = useCallback(() => {
-    if (!allowRightClickToAbortEnabledRef.current) {
+    if (!sketchOptions.rightClickToAbort) {
       return;
     }
     if (type !== undefined) {
@@ -490,7 +473,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;
@@ -586,44 +569,41 @@ export default function useHooks({
   useEffect(() => {
     if (type) {
       overrideInteractionMode?.("sketch");
-    } else if (allowAutoResetInteractionModeRef.current) {
+    } else if (sketchOptions.autoResetInteractionMode) {
       overrideInteractionMode?.("default");
     }
 
     onSketchTypeChange?.(type, from);
-  }, [type, from, overrideInteractionMode, onSketchTypeChange]);
+  }, [
+    type,
+    from,
+    sketchOptions.autoResetInteractionMode,
+    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

@@ -117,14 +117,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({