@reearth/core 0.0.7-alpha.3 → 0.0.7-alpha.31

package/src/Map/SpatialId/types.ts

@@ -0,0 +1,68 @@
+import { Space } from "@reearth/spatial-id-sdk";
+
+export type SpatialIdSpaceType = {
+  id: string;
+  space: Space;
+  wsen: [number, number, number, number];
+  height: number;
+  extrudedHeight: number;
+  color?: string;
+  outlineColor?: string;
+};
+
+export type VerticalSpaceIndicatorType = {
+  id: string;
+  wsen: [number, number, number, number];
+  height: number;
+  extrudedHeight: number;
+  color: string;
+  outlineColor: string;
+};
+
+export type CoordinateSelectorType = {
+  id: string;
+  spaceId: string;
+  wsen: [number, number, number, number];
+  color: string;
+};
+
+export type SpatialIdPickSpaceOptions = {
+  zoom?: number;
+  maxHeight?: number;
+  minHeight?: number;
+  dataOnly?: boolean;
+  rightClickToExit?: boolean;
+  color?: string;
+  outlineColor?: string;
+  groundIndicatorColor?: string;
+  selectorColor?: string;
+  selectorOutlineColor?: string;
+  verticalSpaceIndicatorColor?: string;
+  verticalSpaceIndicatorOutlineColor?: string;
+};
+
+export type SpatialIdRef = {
+  pickSpace: (options?: SpatialIdPickSpaceOptions) => void;
+  exitPickSpace: () => void;
+  onSpacePick: (cb: (space: SpatialIdSpaceData) => void) => void;
+};
+
+export type SpatialIdSpacePickingState = "idle" | "coordinate" | "floor";
+
+export type SpatialIdSpaceData = {
+  id: string;
+  center: { lat: number; lng: number; alt?: number };
+  alt: number;
+  zoom: number;
+  zfxy: {
+    z: number;
+    f: number;
+    x: number;
+    y: number;
+  };
+  zfxyStr: string;
+  tilehash: string;
+  hilbertTilehash: string;
+  hilbertIndex: string;
+  vertices: [number, number, number][];
+};

package/src/Map/SpatialId/utils.ts

@@ -0,0 +1,64 @@
+import { v4 as uuid } from "uuid";
+
+import { Space } from "@reearth/spatial-id-sdk";
+
+import { SpatialIdSpaceType, SpatialIdSpaceData } from "./types";
+
+const getRectangeParamsFromSpace = (space: Space) => {
+  const vertices = space.vertices3d();
+  const wsen: [number, number, number, number] = [
+    vertices[0][0],
+    vertices[1][1],
+    vertices[2][0],
+    vertices[3][1],
+  ];
+  const height = vertices[0][2];
+  const extrudedHeight = vertices[4][2];
+  return { wsen, height, extrudedHeight };
+};
+
+export const createSpatialIdSpace = (
+  lng: number,
+  lat: number,
+  alt: number,
+  zoom: number,
+): SpatialIdSpaceType => {
+  const space = new Space({ lat, lng, alt }, zoom);
+  const { wsen, height, extrudedHeight } = getRectangeParamsFromSpace(space);
+
+  return {
+    id: uuid(),
+    space,
+    wsen,
+    height,
+    extrudedHeight,
+  };
+};
+
+export const getSpaceData = (space: Space): SpatialIdSpaceData => {
+  return {
+    id: space.id,
+    center: space.center,
+    alt: space.alt,
+    zoom: space.zoom,
+    zfxy: space.zfxy,
+    zfxyStr: space.zfxyStr,
+    tilehash: space.tilehash,
+    hilbertTilehash: space.hilbertTilehash,
+    hilbertIndex: space.hilbertIndex.toString(),
+    vertices: space.vertices3d(),
+  };
+};
+
+export const getVerticalLimits = (
+  maxHeigth: number,
+  minHeight: number,
+  zoom: number,
+): { top: number; bottom: number } => {
+  // lat/lng doesn't matter
+  const topSpace = new Space({ lat: 0, lng: 0, alt: maxHeigth }, zoom);
+  const bottomSpace = new Space({ lat: 0, lng: 0, alt: minHeight }, zoom);
+  const { height } = getRectangeParamsFromSpace(topSpace);
+  const { extrudedHeight } = getRectangeParamsFromSpace(bottomSpace);
+  return { top: height, bottom: extrudedHeight };
+};

package/src/Map/hooks.ts

@@ -3,6 +3,7 @@ import { useImperativeHandle, useRef, type Ref, useState, useCallback, useEffect
 import { SelectedFeatureInfo } from "../mantle";
 
 import { type MapRef, mapRef } from "./ref";
+import { SpatialIdRef } from "./SpatialId/types";
 import type {
   EngineRef,
   LayersRef,
@@ -13,7 +14,7 @@ import type {
 } from "./types";
 import useTimelineManager, { TimelineManagerRef } from "./useTimelineManager";
 
-import { CursorType } from ".";
+import { SketchEditingFeature } from ".";
 
 export type { MapRef } from "./ref";
 
@@ -24,12 +25,12 @@ export const REQUEST_RENDER_ONCE = 1;
 export default function ({
   ref,
   timelineManagerRef,
-  cursor,
   onLayerSelect,
+  onMount,
+  onAPIReady,
 }: {
   ref: Ref<MapRef>;
   timelineManagerRef?: TimelineManagerRef;
-  cursor?: CursorType;
   onLayerSelect?: (
     layerId: string | undefined,
     featureId: string | undefined,
@@ -37,10 +38,19 @@ export default function ({
     options?: LayerSelectionReason,
     info?: SelectedFeatureInfo,
   ) => void;
+  onMount?: () => void;
+  onAPIReady?: () => void;
 }) {
+  const [mapAPIReady, setMapAPIReady] = useState({
+    engine: false,
+    layers: false,
+    sketch: false,
+    spatialId: false,
+  });
   const engineRef = useRef<EngineRef>(null);
   const layersRef = useRef<LayersRef>(null);
   const sketchRef = useRef<SketchRef>(null);
+  const spatialIdRef = useRef<SpatialIdRef>(null);
   const requestingRenderMode = useRef<RequestingRenderMode>(NO_REQUEST_RENDER);
 
   useImperativeHandle(
@@ -50,11 +60,24 @@ export default function ({
         engineRef,
         layersRef,
         sketchRef,
+        spatialIdRef,
         timelineManagerRef,
       }),
     [timelineManagerRef],
   );
 
+  useEffect(() => {
+    if (
+      onAPIReady &&
+      mapAPIReady.engine &&
+      mapAPIReady.layers &&
+      mapAPIReady.sketch &&
+      mapAPIReady.spatialId
+    ) {
+      onAPIReady?.();
+    }
+  }, [onAPIReady, mapAPIReady]);
+
   // selectLayer logic
   // 1. Map/hooks(here) is the source
   //    1.2 State updates propagate up, through onLayerSelect, to update
@@ -105,19 +128,38 @@ export default function ({
     timelineManagerRef,
   });
 
-  useEffect(() => {
-    if (cursor) {
-      engineRef.current?.setCursor(cursor);
-    }
-  }, [cursor]);
+  const [sketchEditingFeature, setSketchEditingFeature] = useState<
+    SketchEditingFeature | undefined
+  >();
+
+  const handleEngineMount = useCallback(() => {
+    setMapAPIReady(s => ({ ...s, engine: true }));
+    onMount?.();
+  }, [onMount]);
+  const handleLayersMount = useCallback(() => {
+    setMapAPIReady(s => ({ ...s, layers: true }));
+  }, []);
+  const handleSketchMount = useCallback(() => {
+    setMapAPIReady(s => ({ ...s, sketch: true }));
+  }, []);
+  const handleSpatialIdMount = useCallback(() => {
+    setMapAPIReady(s => ({ ...s, spatialId: true }));
+  }, []);
 
   return {
     engineRef,
     layersRef,
     sketchRef,
+    spatialIdRef,
     selectedLayer,
     requestingRenderMode,
     handleLayerSelect,
     handleEngineLayerSelect,
+    sketchEditingFeature,
+    setSketchEditingFeature,
+    handleEngineMount,
+    handleLayersMount,
+    handleSketchMount,
+    handleSpatialIdMount,
   };
 }

package/src/Map/index.tsx

@@ -5,6 +5,7 @@ import { INTERACTION_MODES } from "../Visualizer/interactionMode";
 import useHooks, { MapRef } from "./hooks";
 import Layers, { type Props as LayersProps } from "./Layers";
 import Sketch, { SketchProps } from "./Sketch";
+import SpatialId from "./SpatialId";
 import type { Engine, EngineProps } from "./types";
 
 export * from "./types";
@@ -29,11 +30,10 @@ export type { TimelineCommitter, TimelineManagerRef } from "./useTimelineManager
 
 export type { MapRef } from "./hooks";
 
-export type CursorType = "auto" | "grab" | "crosshair";
-
 export type Props = {
   engines?: Record<string, Engine>;
   engine?: string;
+  onAPIReady?: () => void;
 } & Omit<
   LayersProps,
   | "Feature"
@@ -44,9 +44,7 @@ export type Props = {
   | "viewerProperty"
 > &
   Omit<EngineProps, "onLayerSelect" | "layerSelectionReason" | "selectedLayerId"> &
-  Omit<SketchProps, "layersRef" | "engineRef" | "SketchComponent"> & {
-    cursor?: CursorType;
-  };
+  Omit<SketchProps, "layersRef" | "engineRef" | "SketchComponent">;
 
 function MapFn(
   {
@@ -61,13 +59,18 @@ function MapFn(
     timelineManagerRef,
     interactionMode,
     selectedFeature,
-    cursor,
     onLayerSelect,
     overrideInteractionMode,
     onSketchTypeChange,
     onSketchFeatureCreate,
     onSketchPluginFeatureCreate,
+    onSketchFeatureUpdate,
+    onSketchPluginFeatureUpdate,
+    onSketchFeatureDelete,
+    onSketchPluginFeatureDelete,
     featureFlags = INTERACTION_MODES.default,
+    onMount,
+    onAPIReady,
     ...props
   }: Props,
   ref: Ref<MapRef>,
@@ -78,15 +81,23 @@ function MapFn(
     engineRef,
     layersRef,
     sketchRef,
+    spatialIdRef,
     selectedLayer,
     requestingRenderMode,
     handleLayerSelect,
     handleEngineLayerSelect,
+    sketchEditingFeature,
+    setSketchEditingFeature,
+    handleEngineMount,
+    handleLayersMount,
+    handleSketchMount,
+    handleSpatialIdMount,
   } = useHooks({
     ref,
     timelineManagerRef,
-    cursor,
     onLayerSelect,
+    onMount,
+    onAPIReady,
   });
 
   const selectedLayerIds = useMemo(
@@ -111,6 +122,7 @@ function MapFn(
       timelineManagerRef={timelineManagerRef}
       onLayerSelect={handleEngineLayerSelect}
       featureFlags={featureFlags}
+      onMount={handleEngineMount}
       {...props}>
       <Layers
         ref={layersRef}
@@ -128,7 +140,9 @@ function MapFn(
         meta={props.meta}
         viewerProperty={props.property}
         requestingRenderMode={requestingRenderMode}
+        sketchEditingFeature={sketchEditingFeature}
         onLayerSelect={handleLayerSelect}
+        onMount={handleLayersMount}
       />
       <Sketch
         ref={sketchRef}
@@ -142,6 +156,21 @@ function MapFn(
         onSketchTypeChange={onSketchTypeChange}
         onSketchFeatureCreate={onSketchFeatureCreate}
         onSketchPluginFeatureCreate={onSketchPluginFeatureCreate}
+        onSketchFeatureUpdate={onSketchFeatureUpdate}
+        onSketchPluginFeatureUpdate={onSketchPluginFeatureUpdate}
+        onSketchFeatureDelete={onSketchFeatureDelete}
+        onSketchPluginFeatureDelete={onSketchPluginFeatureDelete}
+        sketchEditingFeature={sketchEditingFeature}
+        onSketchEditFeature={setSketchEditingFeature}
+        onMount={handleSketchMount}
+      />
+      <SpatialId
+        ref={spatialIdRef}
+        engineRef={engineRef}
+        interactionMode={interactionMode}
+        terrainEnabled={!!props.property?.terrain?.enabled}
+        overrideInteractionMode={overrideInteractionMode}
+        onMount={handleSpatialIdMount}
       />
     </Engine>
   ) : null;

package/src/Map/ref.ts

@@ -1,5 +1,6 @@
 import type { RefObject } from "react";
 
+import { SpatialIdRef } from "./SpatialId/types";
 import type { EngineRef, LayersRef, SketchRef } from "./types";
 import { TimelineManagerRef } from "./useTimelineManager";
 import { FunctionKeys, WrappedRef, wrapRef } from "./utils";
@@ -8,6 +9,7 @@ export type MapRef = {
   engine: WrappedRef<EngineRef>;
   layers: WrappedRef<LayersRef>;
   sketch: WrappedRef<SketchRef>;
+  spatialId?: WrappedRef<SpatialIdRef>;
   timeline?: TimelineManagerRef;
 };
 
@@ -82,6 +84,7 @@ const engineRefKeys: FunctionKeys<EngineRef> = {
   unselectFeatures: 1,
   pickManyFromViewport: 1,
   getExtrudedHeight: 1,
+  getExtrudedPoint: 1,
   getSurfaceDistance: 1,
   equalsEpsilon2d: 1,
   equalsEpsilon3d: 1,
@@ -89,6 +92,8 @@ const engineRefKeys: FunctionKeys<EngineRef> = {
   setCursor: 1,
   bringToFront: 1,
   sendToBack: 1,
+  calcRectangleControlPoint: 1,
+  getCredits: 1,
 };
 
 const layersRefKeys: FunctionKeys<LayersRef> = {
@@ -103,6 +108,8 @@ const layersRefKeys: FunctionKeys<LayersRef> = {
   findByTags: 1,
   hide: 1,
   isLayer: 1,
+  isComputedLayer: 1,
+  isTempLayer: 1,
   layers: 1,
   override: 1,
   replace: 1,
@@ -121,23 +128,37 @@ const sketchRefKeys: FunctionKeys<SketchRef> = {
   setType: 1,
   getOptions: 1,
   overrideOptions: 1,
+  editFeature: 1,
+  applyEdit: 1,
+  cancelEdit: 1,
+  deleteFeature: 1,
+  onEditFeatureChange: 1,
+};
+
+const spatialIdRefKeys: FunctionKeys<SpatialIdRef> = {
+  pickSpace: 1,
+  exitPickSpace: 1,
+  onSpacePick: 1,
 };
 
 export function mapRef({
   engineRef,
   layersRef,
   sketchRef,
+  spatialIdRef,
   timelineManagerRef,
 }: {
   engineRef: RefObject<EngineRef>;
   layersRef: RefObject<LayersRef>;
   sketchRef: RefObject<SketchRef>;
+  spatialIdRef: RefObject<SpatialIdRef>;
   timelineManagerRef?: TimelineManagerRef;
 }): MapRef {
   return {
     engine: wrapRef(engineRef, engineRefKeys),
     layers: wrapRef(layersRef, layersRefKeys),
     sketch: wrapRef(sketchRef, sketchRefKeys),
+    spatialId: wrapRef(spatialIdRef, spatialIdRefKeys),
     timeline: timelineManagerRef,
   };
 }

package/src/Map/types/index.ts

@@ -38,7 +38,13 @@ import type {
   LayerSelectionReason,
   Ref as LayersRef,
 } from "../Layers";
-import { SketchType, SketchOptions, SketchComponentType } from "../Sketch/types";
+import {
+  SketchType,
+  SketchOptions,
+  SketchComponentType,
+  SketchEditFeatureChangeCb,
+  SketchEditingFeature,
+} from "../Sketch/types";
 import type { TimelineManagerRef } from "../useTimelineManager";
 
 import type { SceneMode, ViewerProperty } from "./viewerProperty";
@@ -113,7 +119,12 @@ export type EngineRef = {
   getExtrudedHeight: (
     position: [x: number, y: number, z: number],
     windowPosition: [x: number, y: number],
+    allowNegative?: boolean,
   ) => number | undefined;
+  getExtrudedPoint: (
+    position: [x: number, y: number, z: number],
+    extrutedHeight: number,
+  ) => Position3d | undefined;
   getSurfaceDistance: (point1: Cartesian3, point2: Cartesian3) => number | undefined;
   equalsEpsilon2d: (
     point1: Position2d,
@@ -196,6 +207,12 @@ export type EngineRef = {
     // TODO: Get condition as expression for plugin
     condition?: (f: PickedFeature) => boolean,
   ) => PickedFeature[] | undefined;
+  calcRectangleControlPoint: (
+    p1: Position3d,
+    p2: Position3d,
+    p3: Position3d,
+  ) => [p1: Position3d, p2: Position3d, p3: Position3d];
+  getCredits: () => Credit[] | undefined;
 } & MouseEventHandles;
 
 export type EngineProps = {
@@ -220,6 +237,7 @@ export type EngineProps = {
   isLayerDragging?: boolean;
   shouldRender?: boolean;
   meta?: Record<string, unknown>;
+  displayCredits?: boolean;
   layersRef?: RefObject<LayersRef>;
   requestingRenderMode?: MutableRefObject<RequestingRenderMode>;
   timelineManagerRef?: TimelineManagerRef;
@@ -243,6 +261,7 @@ export type EngineProps = {
   onLayerSelectWithRectStart?: (e: LayerSelectWithRectStart) => void;
   onLayerSelectWithRectMove?: (e: LayerSelectWithRectMove) => void;
   onLayerSelectWithRectEnd?: (e: LayerSelectWithRectEnd) => void;
+  onCreditsUpdate?: (credits: Credit[]) => void;
 };
 
 export type LayerEditEvent = {
@@ -360,4 +379,13 @@ export type SketchRef = {
   setType: (type: SketchType | undefined, from?: "editor" | "plugin") => void;
   getOptions: () => SketchOptions;
   overrideOptions: (options: SketchOptions) => void;
+  editFeature: (feature: SketchEditingFeature | undefined) => void;
+  cancelEdit: (ignoreAutoReSelect?: boolean) => void;
+  applyEdit: () => void;
+  deleteFeature: (layerId: string, featureId: string) => void;
+  onEditFeatureChange: (cb: SketchEditFeatureChangeCb) => void;
+};
+
+export type Credit = {
+  html?: string;
 };

package/src/Map/types/viewerProperty.ts

@@ -132,6 +132,8 @@ export type TileLabelProperty = {
   id: string;
   labelType: "japan_gsi_optimal_bvmap";
   style: Record<string, any>;
+  near?: number;
+  far?: number;
 };
 
 export type SkyProperty = {

package/src/Visualizer/coreContext.tsx

@@ -26,6 +26,8 @@ type CoreContext = {
   handleCameraForceHorizontalRollChange?: (enable?: boolean) => void;
   handleInteractionModeChange?: (mode?: InteractionModeType | undefined) => void;
   onSketchPluginFeatureCreate?: (cb: SketchEventCallback) => void;
+  onSketchPluginFeatureUpdate?: (cb: SketchEventCallback) => void;
+  onSketchPluginFeatureDelete?: (cb: SketchEventCallback) => void;
   onSketchTypeChange?: (cb: (type: SketchType | undefined) => void) => void;
   onLayerVisibility?: (cb: (e: LayerVisibilityEvent) => void) => void;
   onLayerLoad?: (cb: (e: LayerLoadEvent) => void) => void;

package/src/Visualizer/hooks.ts

@@ -7,7 +7,6 @@ import type {
   Camera,
   ComputedLayer,
   LayerEditEvent,
-  CursorType,
   LayerVisibilityEvent,
   LayerLoadEvent,
   LayerSelectWithRectStart,
@@ -82,12 +81,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(
@@ -119,21 +130,19 @@ export default function useHooks(
   }, []);
 
   // interaction mode
-  const [_interactionMode, changeInteractionMode] = useValue(
-    initialInteractionMode,
+  const [interactionMode, changeInteractionMode] = useValue(
+    initialInteractionMode || "default",
     onInteractionModeChange,
   );
-  const interactionMode = _interactionMode || "default";
 
-  const [cursor, setCursor] = useState<CursorType>("auto");
   useEffect(() => {
-    setCursor(
-      interactionMode === "sketch" ? "crosshair" : interactionMode === "move" ? "grab" : "auto",
-    );
+    if (interactionMode === "default") {
+      mapRef?.current?.engine?.setCursor("auto");
+    }
   }, [interactionMode]);
 
   // feature flags
-  const featureFlags = INTERACTION_MODES[interactionMode];
+  const featureFlags = INTERACTION_MODES[interactionMode ?? "default"];
 
   // layer edit
   const onLayerEditRef = useRef<(e: LayerEditEvent) => void>();
@@ -194,6 +203,25 @@ export default function useHooks(
     onSketchPluginFeatureCreateCallbacksRef.current.forEach(fn => fn(props));
   }, []);
 
+  const onSketchPluginFeatureUpdateCallbacksRef = useRef<SketchEventCallback[]>([]);
+  const onSketchPluginFeatureUpdate = useCallback((cb: SketchEventCallback) => {
+    onSketchPluginFeatureUpdateCallbacksRef.current.push(cb);
+  }, []);
+  const handleSketchPluginFeatureUpdate = useCallback((props: SketchEventProps) => {
+    onSketchPluginFeatureUpdateCallbacksRef.current.forEach(fn => fn(props));
+  }, []);
+
+  const onSketchPluginFeatureDeleteCallbacksRef = useRef<SketchEventCallback[]>([]);
+  const onSketchPluginFeatureDelete = useCallback((cb: SketchEventCallback) => {
+    onSketchPluginFeatureDeleteCallbacksRef.current.push(cb);
+  }, []);
+  const handleSketchPluginFeatureDelete = useCallback(
+    (props: { layerId: string; featureId: string }) => {
+      onSketchPluginFeatureDeleteCallbacksRef.current.forEach(fn => fn(props));
+    },
+    [],
+  );
+
   const onSketchTypeChangeCallbacksRef = useRef<((type: SketchType | undefined) => void)[]>([]);
   const onSketchTypeChange = useCallback((cb: (type: SketchType | undefined) => void) => {
     onSketchTypeChangeCallbacksRef.current.push(cb);
@@ -244,6 +272,8 @@ export default function useHooks(
       handleCameraForceHorizontalRollChange,
       handleInteractionModeChange: changeInteractionMode,
       onSketchPluginFeatureCreate,
+      onSketchPluginFeatureUpdate,
+      onSketchPluginFeatureDelete,
       onSketchTypeChange,
       onLayerVisibility,
       onLayerLoad,
@@ -261,6 +291,8 @@ export default function useHooks(
       handleCameraForceHorizontalRollChange,
       onLayerEdit,
       onSketchPluginFeatureCreate,
+      onSketchPluginFeatureUpdate,
+      onSketchPluginFeatureDelete,
       onSketchTypeChange,
       onLayerVisibility,
       onLayerLoad,
@@ -290,10 +322,10 @@ export default function useHooks(
     featureFlags,
     isLayerDragging,
     timelineManagerRef,
-    cursor,
     cameraForceHorizontalRoll,
     coreContextValue,
     containerStyle,
+    overriddenInteractionMode: interactionMode,
     handleLayerSelect,
     handleLayerDrag,
     handleLayerDrop,
@@ -301,6 +333,8 @@ export default function useHooks(
     handleCameraChange: changeCamera,
     handleInteractionModeChange: changeInteractionMode,
     handleSketchPluginFeatureCreate,
+    handleSketchPluginFeatureUpdate,
+    handleSketchPluginFeatureDelete,
     handleSketchTypeChange,
     handleLayerVisibility,
     handleLayerLoad,