@reearth/core 0.0.7-alpha.5 → 0.0.7-alpha.50

package/src/Map/SpatialId/index.tsx

@@ -0,0 +1,63 @@
+import { forwardRef, ForwardRefRenderFunction, RefObject } from "react";
+
+import {
+  CoordinateIndicator,
+  SpatialIdSpace,
+  VerticalSpaceIndicator,
+} from "../../engines/Cesium/SpatialId";
+import { InteractionModeType } from "../../Visualizer";
+import { GeoidRef } from "../Geoid/types";
+import { EngineRef } from "../types";
+
+import useHooks from "./hooks";
+import { SpatialIdRef } from "./types";
+
+type SpatialIdProps = {
+  engineRef: RefObject<EngineRef | null>;
+  geoidRef: RefObject<GeoidRef | null>;
+  terrainEnabled?: boolean;
+  interactionMode?: InteractionModeType;
+  overrideInteractionMode?: (mode: InteractionModeType) => void;
+  onMount?: () => void;
+};
+
+const SpatialId: ForwardRefRenderFunction<SpatialIdRef, SpatialIdProps> = (
+  { engineRef, geoidRef, terrainEnabled, interactionMode, overrideInteractionMode, onMount },
+  ref,
+) => {
+  const {
+    spatialIdSpaces,
+    verticalSpaceIndicator,
+    coordinateSelector,
+    spaceSelector,
+    groundIndicators,
+  } = useHooks({
+    ref,
+    engineRef,
+    geoidRef,
+    terrainEnabled,
+    interactionMode,
+    overrideInteractionMode,
+    onMount,
+  });
+
+  return (
+    <>
+      {spatialIdSpaces &&
+        spatialIdSpaces.length > 0 &&
+        spatialIdSpaces.map(space => <SpatialIdSpace key={space.id} space={space} />)}
+      {groundIndicators &&
+        groundIndicators.length > 0 &&
+        groundIndicators.map(indicator => (
+          <CoordinateIndicator key={indicator.id} wsen={indicator.wsen} color={indicator.color} />
+        ))}
+      {verticalSpaceIndicator && <VerticalSpaceIndicator indicator={verticalSpaceIndicator} />}
+      {coordinateSelector && (
+        <CoordinateIndicator wsen={coordinateSelector.wsen} color={coordinateSelector.color} />
+      )}
+      {spaceSelector && <SpatialIdSpace space={spaceSelector} />}
+    </>
+  );
+};
+
+export default forwardRef(SpatialId);

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;
+  uid: 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" | "fetchingGeoid" | "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,65 @@
+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,
+  geoidHeight: number,
+): SpatialIdSpaceType => {
+  const space = new Space({ lat, lng, alt }, zoom);
+  const { wsen, height, extrudedHeight } = getRectangeParamsFromSpace(space);
+
+  return {
+    id: uuid(),
+    space,
+    wsen,
+    height: height + geoidHeight,
+    extrudedHeight: extrudedHeight + geoidHeight,
+  };
+};
+
+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

@@ -2,7 +2,9 @@ import { useImperativeHandle, useRef, type Ref, useState, useCallback, useEffect
 
 import { SelectedFeatureInfo } from "../mantle";
 
+import { GeoidRef } from "./Geoid/types";
 import { type MapRef, mapRef } from "./ref";
+import { SpatialIdRef } from "./SpatialId/types";
 import type {
   EngineRef,
   LayersRef,
@@ -13,7 +15,7 @@ import type {
 } from "./types";
 import useTimelineManager, { TimelineManagerRef } from "./useTimelineManager";
 
-import { CursorType } from ".";
+import { SketchEditingFeature } from ".";
 
 export type { MapRef } from "./ref";
 
@@ -24,12 +26,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 +39,20 @@ 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 geoidRef = useRef<GeoidRef>(null);
   const requestingRenderMode = useRef<RequestingRenderMode>(NO_REQUEST_RENDER);
 
   useImperativeHandle(
@@ -50,11 +62,25 @@ export default function ({
         engineRef,
         layersRef,
         sketchRef,
+        spatialIdRef,
+        geoidRef,
         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 +131,39 @@ 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,
+    geoidRef,
     selectedLayer,
     requestingRenderMode,
     handleLayerSelect,
     handleEngineLayerSelect,
+    sketchEditingFeature,
+    setSketchEditingFeature,
+    handleEngineMount,
+    handleLayersMount,
+    handleSketchMount,
+    handleSpatialIdMount,
   };
 }

package/src/Map/index.tsx

@@ -1,10 +1,12 @@
-import { forwardRef, useMemo, type Ref } from "react";
+import { forwardRef, useMemo, type Ref, type JSX } from "react";
 
 import { INTERACTION_MODES } from "../Visualizer/interactionMode";
 
+import Geoid from "./Geoid";
 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 +31,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 +45,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 +60,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 +82,24 @@ function MapFn(
     engineRef,
     layersRef,
     sketchRef,
+    spatialIdRef,
+    geoidRef,
     selectedLayer,
     requestingRenderMode,
     handleLayerSelect,
     handleEngineLayerSelect,
+    sketchEditingFeature,
+    setSketchEditingFeature,
+    handleEngineMount,
+    handleLayersMount,
+    handleSketchMount,
+    handleSpatialIdMount,
   } = useHooks({
     ref,
     timelineManagerRef,
-    cursor,
     onLayerSelect,
+    onMount,
+    onAPIReady,
   });
 
   const selectedLayerIds = useMemo(
@@ -111,6 +124,7 @@ function MapFn(
       timelineManagerRef={timelineManagerRef}
       onLayerSelect={handleEngineLayerSelect}
       featureFlags={featureFlags}
+      onMount={handleEngineMount}
       {...props}>
       <Layers
         ref={layersRef}
@@ -128,7 +142,9 @@ function MapFn(
         meta={props.meta}
         viewerProperty={props.property}
         requestingRenderMode={requestingRenderMode}
+        sketchEditingFeature={sketchEditingFeature}
         onLayerSelect={handleLayerSelect}
+        onMount={handleLayersMount}
       />
       <Sketch
         ref={sketchRef}
@@ -142,7 +158,24 @@ 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}
+        geoidRef={geoidRef}
+        interactionMode={interactionMode}
+        terrainEnabled={!!props.property?.terrain?.enabled}
+        overrideInteractionMode={overrideInteractionMode}
+        onMount={handleSpatialIdMount}
       />
+      <Geoid ref={geoidRef} geoidServer={props.property?.geoid?.server} />
     </Engine>
   ) : null;
 }

package/src/Map/ref.ts

@@ -1,5 +1,7 @@
 import type { RefObject } from "react";
 
+import { GeoidRef } from "./Geoid/types";
+import { SpatialIdRef } from "./SpatialId/types";
 import type { EngineRef, LayersRef, SketchRef } from "./types";
 import { TimelineManagerRef } from "./useTimelineManager";
 import { FunctionKeys, WrappedRef, wrapRef } from "./utils";
@@ -8,6 +10,8 @@ export type MapRef = {
   engine: WrappedRef<EngineRef>;
   layers: WrappedRef<LayersRef>;
   sketch: WrappedRef<SketchRef>;
+  spatialId?: WrappedRef<SpatialIdRef>;
+  geoid: WrappedRef<GeoidRef>;
   timeline?: TimelineManagerRef;
 };
 
@@ -82,6 +86,7 @@ const engineRefKeys: FunctionKeys<EngineRef> = {
   unselectFeatures: 1,
   pickManyFromViewport: 1,
   getExtrudedHeight: 1,
+  getExtrudedPoint: 1,
   getSurfaceDistance: 1,
   equalsEpsilon2d: 1,
   equalsEpsilon3d: 1,
@@ -89,6 +94,8 @@ const engineRefKeys: FunctionKeys<EngineRef> = {
   setCursor: 1,
   bringToFront: 1,
   sendToBack: 1,
+  calcRectangleControlPoint: 1,
+  getCredits: 1,
 };
 
 const layersRefKeys: FunctionKeys<LayersRef> = {
@@ -104,6 +111,7 @@ const layersRefKeys: FunctionKeys<LayersRef> = {
   hide: 1,
   isLayer: 1,
   isComputedLayer: 1,
+  isTempLayer: 1,
   layers: 1,
   override: 1,
   replace: 1,
@@ -122,23 +130,44 @@ 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,
+};
+
+const geoidRefKeys: FunctionKeys<GeoidRef> = {
+  getGeoidHeight: 1,
 };
 
 export function mapRef({
   engineRef,
   layersRef,
   sketchRef,
+  spatialIdRef,
+  geoidRef,
   timelineManagerRef,
 }: {
-  engineRef: RefObject<EngineRef>;
-  layersRef: RefObject<LayersRef>;
-  sketchRef: RefObject<SketchRef>;
+  engineRef: RefObject<EngineRef | null>;
+  layersRef: RefObject<LayersRef | null>;
+  sketchRef: RefObject<SketchRef | null>;
+  spatialIdRef: RefObject<SpatialIdRef | null>;
+  geoidRef: RefObject<GeoidRef | null>;
   timelineManagerRef?: TimelineManagerRef;
 }): MapRef {
   return {
     engine: wrapRef(engineRef, engineRefKeys),
     layers: wrapRef(layersRef, layersRefKeys),
     sketch: wrapRef(sketchRef, sketchRefKeys),
+    spatialId: wrapRef(spatialIdRef, spatialIdRefKeys),
+    geoid: wrapRef(geoidRef, geoidRefKeys),
     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,
@@ -176,7 +187,7 @@ export type EngineRef = {
   tick: () => Date | void;
   inViewport: (location?: LatLng) => boolean;
   onTick: TickEvent;
-  tickEventCallback?: RefObject<TickEventCallback[]>;
+  tickEventCallback?: RefObject<TickEventCallback[] | null>;
   removeTickEventListener: TickEvent;
   findFeatureById: (layerId: string, featureId: string) => Feature | undefined;
   bringToFront: (layerId: string) => void;
@@ -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: () => Credits | undefined;
 } & MouseEventHandles;
 
 export type EngineProps = {
@@ -220,7 +237,8 @@ export type EngineProps = {
   isLayerDragging?: boolean;
   shouldRender?: boolean;
   meta?: Record<string, unknown>;
-  layersRef?: RefObject<LayersRef>;
+  displayCredits?: boolean;
+  layersRef?: RefObject<LayersRef | null>;
   requestingRenderMode?: MutableRefObject<RequestingRenderMode>;
   timelineManagerRef?: TimelineManagerRef;
   onLayerSelect?: (
@@ -243,6 +261,7 @@ export type EngineProps = {
   onLayerSelectWithRectStart?: (e: LayerSelectWithRectStart) => void;
   onLayerSelectWithRectMove?: (e: LayerSelectWithRectMove) => void;
   onLayerSelectWithRectEnd?: (e: LayerSelectWithRectEnd) => void;
+  onCreditsUpdate?: (credits?: Credits) => void;
 };
 
 export type LayerEditEvent = {
@@ -360,4 +379,21 @@ 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 CreditItem = {
+  html?: string;
+};
+
+export type Credits = {
+  engine: {
+    cesium?: CreditItem;
+  };
+  lightbox: CreditItem[];
+  screen: CreditItem[];
 };

package/src/Map/types/viewerProperty.ts

@@ -37,6 +37,7 @@ export type SceneMode = "3d" | "2d" | "columbus";
 
 export type ViewerProperty = {
   globe?: GlobeProperty;
+  geoid?: GeoidProperty;
   terrain?: TerrainProperty;
   scene?: SceneProperty;
   tiles?: TileProperty[];
@@ -56,6 +57,13 @@ export type GlobeProperty = {
   depthTestAgainstTerrain?: boolean;
 };
 
+export type GeoidProperty = {
+  server: {
+    url: string;
+    geoidProperty: string;
+  };
+};
+
 export type GlobeAtmosphereProperty = {
   enabled?: boolean;
   lightIntensity?: number;
@@ -132,6 +140,8 @@ export type TileLabelProperty = {
   id: string;
   labelType: "japan_gsi_optimal_bvmap";
   style: Record<string, any>;
+  near?: number;
+  far?: number;
 };
 
 export type SkyProperty = {

package/src/Map/useTimelineManager.ts

@@ -87,7 +87,7 @@ type Props = {
     multiplier?: number;
     rangeType?: "unbounded" | "clamped" | "bounced";
   };
-  engineRef?: RefObject<EngineRef>;
+  engineRef?: RefObject<EngineRef | null>;
   timelineManagerRef?: TimelineManagerRef;
 };
 
@@ -112,7 +112,7 @@ export default ({ init, engineRef, timelineManagerRef }: Props) => {
     const currentTime = current.getTime();
 
     const convertedStartTime = startTime > currentTime ? currentTime : startTime;
-    const convertedStopTime = stopTime <= currentTime ? currentTime + DEFAULT_RANGE : stopTime;
+    const convertedStopTime = stopTime < currentTime ? currentTime + DEFAULT_RANGE : stopTime;
 
     return {
       start: new Date(convertedStartTime),

package/src/Map/utils.ts

@@ -6,7 +6,7 @@ export function useGet<T>(value: T): () => T {
   return useCallback(() => ref.current, []);
 }
 
-export function wrapRef<T>(ref: RefObject<T>, keys: FunctionKeys<T>): WrappedRef<T> {
+export function wrapRef<T>(ref: RefObject<T | null>, keys: FunctionKeys<T>): WrappedRef<T> {
   return Object.fromEntries(
     (Object.keys(keys) as (keyof T)[]).map(k => {
       return [k, (...args: any[]) => (ref.current?.[k] as any)?.(...args)];