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

package/src/Map/Sketch/useSketchFeature.ts

@@ -0,0 +1,198 @@
+import { Dispatch, RefObject, SetStateAction, useCallback } from "react";
+
+import { LazyLayer } from "../Layers";
+import { LayersRef } from "../types";
+
+import { SketchEventProps, SketchFeature, SketchOptions, SketchType } from "./types";
+
+import { OnLayerSelectType } from ".";
+
+type Props = {
+  sketchOptions: SketchOptions;
+  from: "editor" | "plugin";
+  updateType: Dispatch<SetStateAction<SketchType | undefined>>;
+  layersRef: RefObject<LayersRef>;
+  pluginSketchLayerCreate: (feature: SketchFeature) => {
+    layerId: string | undefined;
+    featureId: string;
+  };
+  pluginSketchLayerFeatureAdd: (
+    layer: LazyLayer,
+    feature: SketchFeature,
+  ) =>
+    | {
+        layerId?: undefined;
+        featureId?: undefined;
+      }
+    | {
+        layerId: string;
+        featureId: string;
+      };
+  pluginSketchLayerFeatureUpdate: (
+    layer: LazyLayer,
+    feature: SketchFeature,
+  ) =>
+    | {
+        layerId?: undefined;
+        featureId?: undefined;
+      }
+    | {
+        layerId: string;
+        featureId: string;
+      };
+  pluginSketchLayerFeatureRemove: (layer: LazyLayer, featureId: string) => void;
+  onSketchFeatureCreate?: (feature: SketchFeature | null) => void;
+  onSketchFeatureUpdate?: (feature: SketchFeature) => void;
+  onSketchFeatureDelete?: (layerId: string, featureId: string) => void;
+  onSketchPluginFeatureCreate?: (props: SketchEventProps) => void;
+  onSketchPluginFeatureUpdate?: (props: SketchEventProps) => void;
+  onSketchPluginFeatureDelete?: (props: { layerId: string; featureId: string }) => void;
+  onLayerSelect?: OnLayerSelectType;
+};
+
+export default ({
+  sketchOptions,
+  from,
+  updateType,
+  layersRef,
+  onSketchFeatureCreate,
+  pluginSketchLayerCreate,
+  pluginSketchLayerFeatureAdd,
+  pluginSketchLayerFeatureUpdate,
+  pluginSketchLayerFeatureRemove,
+  onSketchPluginFeatureCreate,
+  onSketchPluginFeatureUpdate,
+  onSketchPluginFeatureDelete,
+  onSketchFeatureUpdate,
+  onSketchFeatureDelete,
+  onLayerSelect,
+}: Props) => {
+  const handleFeatureCreate = useCallback(
+    (feature: SketchFeature) => {
+      if (sketchOptions.autoResetInteractionMode) {
+        updateType(undefined);
+      }
+
+      if (from === "editor" && sketchOptions.dataOnly) {
+        onSketchFeatureCreate?.(feature);
+        return;
+      }
+
+      if (!sketchOptions.dataOnly) {
+        const selectedLayer = layersRef.current?.selectedLayer();
+        const { layerId, featureId } =
+          !layersRef?.current?.isTempLayer(selectedLayer?.id) ||
+          selectedLayer?.type !== "simple" ||
+          selectedLayer.computed?.layer.type !== "simple"
+            ? pluginSketchLayerCreate(feature)
+            : pluginSketchLayerFeatureAdd(selectedLayer, feature);
+
+        if (layerId && featureId) {
+          requestAnimationFrame(() => {
+            onLayerSelect?.(
+              layerId,
+              featureId,
+              layerId
+                ? () =>
+                    new Promise(resolve => {
+                      // Wait until computed feature is ready
+                      queueMicrotask(() => {
+                        resolve(layersRef.current?.findById?.(layerId)?.computed);
+                      });
+                    })
+                : undefined,
+              undefined,
+              undefined,
+            );
+          });
+
+          onSketchPluginFeatureCreate?.({ layerId, featureId, feature });
+        }
+      } else {
+        onSketchPluginFeatureCreate?.({ feature });
+      }
+    },
+    [
+      layersRef,
+      from,
+      sketchOptions.dataOnly,
+      sketchOptions.autoResetInteractionMode,
+      pluginSketchLayerCreate,
+      pluginSketchLayerFeatureAdd,
+      onSketchFeatureCreate,
+      onSketchPluginFeatureCreate,
+      onLayerSelect,
+      updateType,
+    ],
+  );
+
+  const handleFeatureUpdate = useCallback(
+    (feature: SketchFeature) => {
+      if (from === "editor" && sketchOptions.dataOnly) {
+        onSketchFeatureUpdate?.(feature);
+        return;
+      }
+
+      if (!sketchOptions.dataOnly) {
+        const selectedLayer = layersRef.current?.selectedLayer();
+        if (!selectedLayer) return;
+
+        const { layerId, featureId } = pluginSketchLayerFeatureUpdate(selectedLayer, feature);
+
+        if (layerId && featureId) {
+          setTimeout(() => {
+            layersRef.current?.selectFeatures([
+              {
+                layerId,
+                featureId: [featureId],
+              },
+            ]);
+          }, 20);
+
+          onSketchPluginFeatureUpdate?.({ layerId, featureId, feature });
+        }
+      } else {
+        onSketchPluginFeatureUpdate?.({ feature });
+      }
+    },
+    [
+      from,
+      sketchOptions.dataOnly,
+      layersRef,
+      pluginSketchLayerFeatureUpdate,
+      onSketchFeatureUpdate,
+      onSketchPluginFeatureUpdate,
+    ],
+  );
+
+  const handleFeatureDelete = useCallback(
+    (layerId: string, featureId: string) => {
+      if (from === "editor" && sketchOptions.dataOnly) {
+        onSketchFeatureDelete?.(layerId, featureId);
+        return;
+      }
+
+      if (!sketchOptions.dataOnly) {
+        const layer = layersRef.current?.findById(layerId);
+        if (!layer) return;
+        pluginSketchLayerFeatureRemove(layer, featureId);
+        layersRef.current?.selectFeatures([]);
+      }
+      onSketchPluginFeatureDelete?.({ layerId, featureId });
+    },
+    [
+      from,
+      sketchOptions.dataOnly,
+      layersRef,
+      pluginSketchLayerFeatureRemove,
+      onSketchFeatureDelete,
+      onSketchPluginFeatureDelete,
+    ],
+  );
+
+  return {
+    handleFeatureCreate,
+    handleFeatureUpdate,
+    handleFeatureDelete,
+  };
+};

package/src/Map/SpatialId/hooks.ts

@@ -0,0 +1,293 @@
+import {
+  ForwardedRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { RefObject } from "use-callback-ref/dist/es5/types";
+
+import { InteractionModeType } from "../../Visualizer";
+import { EngineRef, MouseEventProps } from "../types";
+
+import {
+  SpatialIdRef,
+  SpatialIdSpacePickingState,
+  SpatialIdSpaceType,
+  SpatialIdSpaceData,
+  SpatialIdPickSpaceOptions,
+} from "./types";
+import { createSpatialIdFloorSpaces, createSpatialIdSpace, getSpaceData } from "./utils";
+
+type Props = {
+  ref: ForwardedRef<SpatialIdRef>;
+  engineRef: RefObject<EngineRef>;
+  terrainEnabled?: boolean;
+  interactionMode?: InteractionModeType;
+  overrideInteractionMode?: (mode: InteractionModeType) => void;
+  onMount?: () => void;
+};
+
+export const SPATIALID_DEFAULT_ZOOM = 20;
+export const SPATIALID_DEFAULT_MAX_HEIGHT = 1000;
+export const SPATIALID_DEFAULT_COLOR = "#00bebe";
+export const SPATIALID_DEFAULT_DATA_ONLY = false;
+export const SPATIALID_DEFAULT_RIGHT_CLICK_TO_EXIT = true;
+
+export default ({
+  ref,
+  engineRef,
+  terrainEnabled,
+  interactionMode,
+  overrideInteractionMode,
+  onMount,
+}: Props) => {
+  const [state, setState] = useState<SpatialIdSpacePickingState>("idle");
+
+  const [spatialIdSpaces, setSpatialIdSpaces] = useState<SpatialIdSpaceType[]>([]);
+  const [floorSpaces, setFloorSpaces] = useState<SpatialIdSpaceType[]>([]);
+  const [selectorSpace, setSelectorSpace] = useState<SpatialIdSpaceType | null>(null);
+
+  const spaces = useMemo(() => {
+    return [...spatialIdSpaces, ...floorSpaces, ...(selectorSpace ? [selectorSpace] : [])];
+  }, [spatialIdSpaces, floorSpaces, selectorSpace]);
+
+  const [basePosition, setBasePosition] = useState<[number, number, number] | null>(null);
+  const [baseCoordinate, setBaseCoordinate] = useState<[number, number, number] | null>(null);
+
+  const [pickOptions, setPickOptions] = useState<Required<SpatialIdPickSpaceOptions>>({
+    zoom: SPATIALID_DEFAULT_ZOOM,
+    maxHeight: SPATIALID_DEFAULT_MAX_HEIGHT,
+    color: SPATIALID_DEFAULT_COLOR,
+    dataOnly: SPATIALID_DEFAULT_DATA_ONLY,
+    rightClickToExit: SPATIALID_DEFAULT_RIGHT_CLICK_TO_EXIT,
+  });
+
+  const pickSpace = useCallback(
+    (options?: SpatialIdPickSpaceOptions) => {
+      setState("coordinate");
+      setPickOptions(prev => ({ ...prev, ...options }));
+      overrideInteractionMode?.("spatialId");
+    },
+    [overrideInteractionMode],
+  );
+
+  const interactionModeRef = useRef(interactionMode);
+  interactionModeRef.current = interactionMode;
+
+  const finishPicking = useCallback(() => {
+    setState("idle");
+    setSelectorSpace(null);
+    setBasePosition(null);
+    setBaseCoordinate(null);
+    setFloorSpaces([]);
+    overrideInteractionMode?.(
+      interactionModeRef.current === "spatialId"
+        ? "default"
+        : interactionModeRef.current ?? "default",
+    );
+    engineRef.current?.requestRender();
+  }, [overrideInteractionMode, engineRef]);
+
+  // handle events
+  const handleMouseUp = useCallback(
+    (props: MouseEventProps) => {
+      if (state === "idle") return;
+      if (tempSwitchToMoveMode.current) return;
+
+      if (state === "coordinate") {
+        if (!selectorSpace || props.lat === undefined || props.lng === undefined) return;
+        setState("floor");
+        setBaseCoordinate([props.lng, props.lat, terrainEnabled ? props.height ?? 0 : 0]);
+        setBasePosition(
+          engineRef.current?.toXYZ(props.lng, props.lat, props.height ?? 0, {
+            useGlobeEllipsoid: !terrainEnabled,
+          }) ?? null,
+        );
+
+        setSelectorSpace(prev =>
+          prev ? { ...prev, type: "selector", color: pickOptions.color } : null,
+        );
+
+        const floorSpaces = createSpatialIdFloorSpaces(
+          selectorSpace.space,
+          pickOptions.maxHeight,
+          pickOptions.color,
+        );
+        setFloorSpaces(floorSpaces);
+      } else if (state === "floor") {
+        if (!selectorSpace) return;
+
+        const confirmedSpace: SpatialIdSpaceType = {
+          ...selectorSpace,
+          type: "confirmed",
+          color: pickOptions.color,
+        };
+
+        if (!pickOptions.dataOnly) {
+          setSpatialIdSpaces(prev => [...prev, confirmedSpace]);
+        }
+
+        finishPicking();
+
+        const spaceData = getSpaceData(confirmedSpace.space);
+        onSpacePickEvents.current.forEach(cb => cb(spaceData));
+      }
+    },
+    [state, terrainEnabled, engineRef, selectorSpace, pickOptions, finishPicking],
+  );
+
+  const handleMouseMove = useCallback(
+    (props: MouseEventProps) => {
+      if (state === "idle") return;
+      if (tempSwitchToMoveMode.current) return;
+
+      if (state === "coordinate") {
+        if (props.lat === undefined || props.lng === undefined) return;
+
+        const newSpace = createSpatialIdSpace(
+          props.lng,
+          props.lat,
+          terrainEnabled ? props.height ?? 0 : 0,
+          pickOptions.zoom,
+        );
+
+        if (newSpace.space.id === selectorSpace?.space.id) return;
+
+        setSelectorSpace({ ...newSpace, type: "coordinate", color: pickOptions.color });
+      } else if (state === "floor") {
+        if (
+          props.x === undefined ||
+          props.y === undefined ||
+          basePosition === null ||
+          baseCoordinate === null
+        )
+          return;
+
+        const height =
+          engineRef.current?.getExtrudedHeight(basePosition, [props.x, props.y], true) ?? 0;
+
+        if (baseCoordinate[2] + height > pickOptions.maxHeight) return;
+
+        const newSpace = createSpatialIdSpace(
+          baseCoordinate[0],
+          baseCoordinate[1],
+          baseCoordinate[2] + height,
+          pickOptions.zoom,
+        );
+
+        if (newSpace.space.id === selectorSpace?.space.id || newSpace.space.zfxy.f < 0) return;
+
+        setSelectorSpace({ ...newSpace, type: "selector", color: pickOptions.color });
+      }
+    },
+    [state, selectorSpace, basePosition, baseCoordinate, engineRef, terrainEnabled, pickOptions],
+  );
+
+  const handleMouseRightClick = useCallback(() => {
+    if (state === "idle") return;
+    if (state === "coordinate" && pickOptions.rightClickToExit) {
+      finishPicking();
+    } else if (state === "floor") {
+      setSelectorSpace(null);
+      setBasePosition(null);
+      setBaseCoordinate(null);
+      setFloorSpaces([]);
+      setState("coordinate");
+    }
+    engineRef.current?.requestRender();
+  }, [state, pickOptions, engineRef, finishPicking]);
+
+  // bind mouse events
+  const eventsBinded = useRef(false);
+
+  const handleMouseUpRef = useRef(handleMouseUp);
+  handleMouseUpRef.current = handleMouseUp;
+  const handleMouseUpForRef = useCallback((props: MouseEventProps) => {
+    handleMouseUpRef.current(props);
+  }, []);
+
+  const handleMouseMoveRef = useRef(handleMouseMove);
+  handleMouseMoveRef.current = handleMouseMove;
+  const handleMouseMoveForRef = useCallback((props: MouseEventProps) => {
+    handleMouseMoveRef.current(props);
+  }, []);
+
+  const handleMouseRightClickRef = useRef(handleMouseRightClick);
+  handleMouseRightClickRef.current = handleMouseRightClick;
+  const handleMouseRightClickForRef = useCallback(() => {
+    handleMouseRightClickRef.current();
+  }, []);
+
+  useEffect(() => {
+    if (eventsBinded.current || !engineRef.current) return;
+    eventsBinded.current = true;
+    engineRef.current.onMouseUp(handleMouseUpForRef);
+    engineRef.current.onMouseMove(handleMouseMoveForRef);
+    engineRef.current.onRightClick(handleMouseRightClickForRef);
+  }, [engineRef, handleMouseUpForRef, handleMouseMoveForRef, handleMouseRightClickForRef]);
+
+  // cancel picking when interaction mode changes
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  const finishPickingRef = useRef(finishPicking);
+  finishPickingRef.current = finishPicking;
+  useEffect(() => {
+    if (tempSwitchToMoveMode.current) return;
+    if (interactionMode !== "spatialId" && stateRef.current !== "idle") {
+      finishPickingRef.current();
+    }
+  }, [interactionMode]);
+
+  // events
+  const onSpacePickEvents = useRef<((space: SpatialIdSpaceData) => void)[]>([]);
+
+  const bindEventOnSpacePick = useCallback((cb: (space: SpatialIdSpaceData) => void) => {
+    onSpacePickEvents.current.push(cb);
+  }, []);
+
+  // ref
+  useImperativeHandle(
+    ref,
+    () => ({
+      pickSpace,
+      onSpacePick: bindEventOnSpacePick,
+      exitPickSpace: finishPicking,
+    }),
+    [pickSpace, bindEventOnSpacePick, finishPicking],
+  );
+
+  // press space to move
+  const tempSwitchToMoveMode = useRef(false);
+  useEffect(() => {
+    const handleKeydown = (e: KeyboardEvent) => {
+      if (e.code === "Space" && stateRef.current !== "idle") {
+        tempSwitchToMoveMode.current = true;
+        overrideInteractionMode?.("move");
+      }
+    };
+    window.addEventListener("keydown", handleKeydown);
+    return () => {
+      window.removeEventListener("keydown", handleKeydown);
+    };
+  }, [overrideInteractionMode]);
+
+  useEffect(() => {
+    return window.addEventListener("keyup", e => {
+      if (e.code === "Space" && tempSwitchToMoveMode.current) {
+        tempSwitchToMoveMode.current = false;
+        overrideInteractionMode?.("spatialId");
+      }
+    });
+  }, [overrideInteractionMode]);
+
+  useEffect(() => {
+    onMount?.();
+  }, [onMount]);
+
+  return {
+    spaces,
+  };
+};

package/src/Map/SpatialId/index.tsx

@@ -0,0 +1,36 @@
+import { forwardRef, ForwardRefRenderFunction } from "react";
+import { RefObject } from "use-callback-ref/dist/es5/types";
+
+import SpatialIdSpace from "../../engines/Cesium/SpatialId";
+import { InteractionModeType } from "../../Visualizer";
+import { EngineRef } from "../types";
+
+import useHooks from "./hooks";
+import { SpatialIdRef } from "./types";
+
+type SpatialIdProps = {
+  engineRef: RefObject<EngineRef>;
+  terrainEnabled?: boolean;
+  interactionMode?: InteractionModeType;
+  overrideInteractionMode?: (mode: InteractionModeType) => void;
+  onMount?: () => void;
+};
+
+const SpatialId: ForwardRefRenderFunction<SpatialIdRef, SpatialIdProps> = (
+  { engineRef, terrainEnabled, interactionMode, overrideInteractionMode, onMount },
+  ref,
+) => {
+  const { spaces } = useHooks({
+    ref,
+    engineRef,
+    terrainEnabled,
+    interactionMode,
+    overrideInteractionMode,
+    onMount,
+  });
+  return spaces.length > 0
+    ? spaces.map(space => <SpatialIdSpace key={space.id} space={space} />)
+    : null;
+};
+
+export default forwardRef(SpatialId);

package/src/Map/SpatialId/types.ts

@@ -0,0 +1,45 @@
+import { Space } from "@reearth/spatial-id-sdk";
+
+export type SpatialIdSpaceType = {
+  id: string;
+  space: Space;
+  wsen: [number, number, number, number];
+  height: number;
+  extrudedHeight: number;
+  type?: "selector" | "floor" | "coordinate" | "confirmed";
+  color?: string;
+};
+
+export type SpatialIdPickSpaceOptions = {
+  zoom?: number;
+  maxHeight?: number;
+  color?: string;
+  dataOnly?: boolean;
+  rightClickToExit?: boolean;
+};
+
+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,79 @@
+import { Space } from "@reearth/spatial-id-sdk";
+import { v4 as uuid } from "uuid";
+
+import { SPATIALID_DEFAULT_COLOR, SPATIALID_DEFAULT_MAX_HEIGHT } from "./hooks";
+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 createSpatialIdFloorSpaces = (
+  space: Space,
+  maxHeight = SPATIALID_DEFAULT_MAX_HEIGHT,
+  color = SPATIALID_DEFAULT_COLOR,
+) => {
+  const floorSpaces: SpatialIdSpaceType[] = [];
+  const { height, extrudedHeight } = getRectangeParamsFromSpace(space);
+  const heightStep = extrudedHeight - height;
+  for (let h = 0; h < maxHeight; h += heightStep) {
+    const fSpace = new Space({ lat: space.center.lat, lng: space.center.lng, alt: h }, space.zoom);
+    const {
+      wsen: fWsen,
+      height: fHeight,
+      extrudedHeight: fExtrudedHeight,
+    } = getRectangeParamsFromSpace(fSpace);
+    floorSpaces.push({
+      id: uuid(),
+      space: fSpace,
+      wsen: fWsen,
+      height: fHeight,
+      extrudedHeight: fExtrudedHeight,
+      type: "floor",
+      color,
+    });
+  }
+  return floorSpaces;
+};
+
+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(),
+  };
+};