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

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/constants.ts

@@ -0,0 +1,16 @@
+import { SpatialIdPickSpaceOptions } from "./types";
+
+export const SPATIALID_DEFAULT_OPTIONS: Required<SpatialIdPickSpaceOptions> = {
+  zoom: 20,
+  maxHeight: 4000,
+  minHeight: -1000,
+  dataOnly: false,
+  rightClickToExit: true,
+  color: "#00bebe44",
+  outlineColor: "#00bebe55",
+  groundIndicatorColor: "#00000066",
+  selectorColor: "#ff990099",
+  selectorOutlineColor: "#ff9900aa",
+  verticalSpaceIndicatorColor: "#ffffff33",
+  verticalSpaceIndicatorOutlineColor: "#ffffff55",
+};

package/src/Map/SpatialId/hooks.ts

@@ -0,0 +1,382 @@
+import {
+  ForwardedRef,
+  RefObject,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { v4 as uuid } from "uuid";
+
+import { InteractionModeType } from "../../Visualizer";
+import { EngineRef, MouseEventProps } from "../types";
+
+import { SPATIALID_DEFAULT_OPTIONS } from "./constants";
+import {
+  SpatialIdRef,
+  SpatialIdSpacePickingState,
+  SpatialIdSpaceType,
+  SpatialIdSpaceData,
+  SpatialIdPickSpaceOptions,
+  VerticalSpaceIndicatorType,
+  CoordinateSelectorType,
+} from "./types";
+import { createSpatialIdSpace, getSpaceData, getVerticalLimits } from "./utils";
+
+type Props = {
+  ref: ForwardedRef<SpatialIdRef>;
+  engineRef: RefObject<EngineRef>;
+  terrainEnabled?: boolean;
+  interactionMode?: InteractionModeType;
+  overrideInteractionMode?: (mode: InteractionModeType) => void;
+  onMount?: () => void;
+};
+
+export default ({
+  ref,
+  engineRef,
+  terrainEnabled,
+  interactionMode,
+  overrideInteractionMode,
+  onMount,
+}: Props) => {
+  const [state, setState] = useState<SpatialIdSpacePickingState>("idle");
+
+  const [spatialIdSpaces, setSpatialIdSpaces] = useState<SpatialIdSpaceType[] | null>(null);
+  const [verticalSpaceIndicator, setVerticalSpaceIndicator] =
+    useState<VerticalSpaceIndicatorType | null>(null);
+  const [coordinateSelector, setCoordinateSelector] = useState<CoordinateSelectorType | null>(null);
+  const [spaceSelector, setSpaceSelector] = useState<SpatialIdSpaceType | null>(null);
+
+  const [basePosition, setBasePosition] = useState<[number, number, number] | null>(null);
+  const [baseCoordinate, setBaseCoordinate] = useState<[number, number, number] | null>(null);
+
+  const [pickOptions, setPickOptions] =
+    useState<Required<SpatialIdPickSpaceOptions>>(SPATIALID_DEFAULT_OPTIONS);
+
+  const verticalLimits = useMemo(
+    () => getVerticalLimits(pickOptions.maxHeight, pickOptions.minHeight, pickOptions.zoom),
+    [pickOptions.maxHeight, pickOptions.minHeight, pickOptions.zoom],
+  );
+
+  const groundIndicators = useMemo(() => {
+    const allSpaces = [...(spatialIdSpaces ?? []), ...(spaceSelector ? [spaceSelector] : [])];
+
+    if (!allSpaces) return null;
+    // find unique spaces by space.space.zfxy.z, space.space.zfxy.x, space.space.zfxy.y
+    const uniqueSpaces = allSpaces.reduce((acc, space) => {
+      if (
+        !acc.find(
+          s =>
+            s.space.zfxy.z === space.space.zfxy.z &&
+            s.space.zfxy.x === space.space.zfxy.x &&
+            s.space.zfxy.y === space.space.zfxy.y,
+        )
+      ) {
+        acc.push(space);
+      }
+      return acc;
+    }, [] as SpatialIdSpaceType[]);
+
+    if (uniqueSpaces.length === 0) return null;
+
+    return uniqueSpaces.map(space => {
+      const { wsen } = space;
+      return {
+        id: uuid(),
+        spaceId: space.space.id,
+        wsen,
+        color: pickOptions.groundIndicatorColor,
+      };
+    });
+  }, [spatialIdSpaces, spaceSelector, pickOptions.groundIndicatorColor]);
+
+  const pickSpace = useCallback(
+    (options?: SpatialIdPickSpaceOptions) => {
+      setState("coordinate");
+      setPickOptions(prev => ({ ...prev, ...options }));
+      overrideInteractionMode?.("spatialId");
+      setTimeout(() => {
+        engineRef.current?.setCursor("crosshair");
+      }, 100);
+    },
+    [engineRef, overrideInteractionMode],
+  );
+
+  const interactionModeRef = useRef(interactionMode);
+  interactionModeRef.current = interactionMode;
+
+  const finishPicking = useCallback(() => {
+    setState("idle");
+    setBasePosition(null);
+    setBaseCoordinate(null);
+    setSpaceSelector(null);
+    setCoordinateSelector(null);
+    setVerticalSpaceIndicator(null);
+    overrideInteractionMode?.(
+      interactionModeRef.current === "spatialId"
+        ? "default"
+        : interactionModeRef.current ?? "default",
+    );
+    engineRef.current?.setCursor("default");
+    engineRef.current?.requestRender();
+  }, [overrideInteractionMode, engineRef]);
+
+  const handleMouseUp = useCallback(
+    (props: MouseEventProps) => {
+      if (state === "idle") return;
+      if (tempSwitchToMoveMode.current) return;
+
+      // handle coordinate picking
+      if (state === "coordinate") {
+        if (!coordinateSelector || 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,
+        );
+
+        setCoordinateSelector(null);
+
+        const initialSpaceSelectorSpace = createSpatialIdSpace(
+          props.lng,
+          props.lat,
+          terrainEnabled ? props.height ?? 0 : 0,
+          pickOptions.zoom,
+        );
+        setSpaceSelector({
+          ...initialSpaceSelectorSpace,
+          color: pickOptions.color,
+          outlineColor: pickOptions.outlineColor,
+        });
+
+        const { id, wsen } = createSpatialIdSpace(
+          props.lng,
+          props.lat,
+          terrainEnabled ? props.height ?? 0 : 0,
+          pickOptions.zoom,
+        );
+        setVerticalSpaceIndicator({
+          id,
+          wsen,
+          height: verticalLimits.top,
+          extrudedHeight: verticalLimits.bottom,
+          color: pickOptions.verticalSpaceIndicatorColor,
+          outlineColor: pickOptions.verticalSpaceIndicatorOutlineColor,
+        });
+        engineRef.current?.requestRender();
+      } else if (state === "floor") {
+        if (!spaceSelector) return;
+
+        const confirmedSpace: SpatialIdSpaceType = {
+          ...spaceSelector,
+          id: uuid(),
+          color: pickOptions.color,
+          outlineColor: pickOptions.outlineColor,
+        };
+
+        if (!pickOptions.dataOnly) {
+          setSpatialIdSpaces(prev => (prev ? [...prev, confirmedSpace] : [confirmedSpace]));
+        }
+
+        finishPicking();
+
+        const spaceData = getSpaceData(confirmedSpace.space);
+        onSpacePickEvents.current.forEach(cb => cb(spaceData));
+      }
+    },
+    [
+      state,
+      terrainEnabled,
+      engineRef,
+      spaceSelector,
+      pickOptions,
+      verticalLimits,
+      coordinateSelector,
+      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 === coordinateSelector?.spaceId) return;
+        setCoordinateSelector({
+          id: uuid(),
+          spaceId: newSpace.space.id,
+          wsen: newSpace.wsen,
+          color: pickOptions.selectorColor,
+        });
+      } else if (state === "floor") {
+        if (
+          props.x === undefined ||
+          props.y === undefined ||
+          basePosition === null ||
+          baseCoordinate === null
+        )
+          return;
+
+        const offset =
+          engineRef.current?.getExtrudedHeight(basePosition, [props.x, props.y], true) ?? 0;
+
+        if (
+          baseCoordinate[2] + offset > verticalLimits.top ||
+          baseCoordinate[2] + offset < verticalLimits.bottom
+        )
+          return;
+
+        const newSpace = createSpatialIdSpace(
+          baseCoordinate[0],
+          baseCoordinate[1],
+          baseCoordinate[2] + offset,
+          pickOptions.zoom,
+        );
+
+        if (newSpace.space.id === spaceSelector?.space.id) return;
+
+        setSpaceSelector({
+          ...newSpace,
+          color: pickOptions.selectorColor,
+          outlineColor: pickOptions.selectorOutlineColor,
+        });
+      }
+    },
+    [
+      state,
+      spaceSelector,
+      basePosition,
+      baseCoordinate,
+      engineRef,
+      terrainEnabled,
+      pickOptions,
+      verticalLimits,
+      coordinateSelector?.spaceId,
+    ],
+  );
+
+  const handleMouseRightClick = useCallback(() => {
+    if (state === "idle") return;
+    if (state === "coordinate" && pickOptions.rightClickToExit) {
+      finishPicking();
+    } else if (state === "floor") {
+      setSpaceSelector(null);
+      setBasePosition(null);
+      setBaseCoordinate(null);
+      setVerticalSpaceIndicator(null);
+      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 {
+    spatialIdSpaces,
+    verticalSpaceIndicator,
+    coordinateSelector,
+    spaceSelector,
+    groundIndicators,
+  };
+};

package/src/Map/SpatialId/index.tsx

@@ -0,0 +1,60 @@
+import { forwardRef, ForwardRefRenderFunction, RefObject } from "react";
+
+import {
+  CoordinateIndicator,
+  SpatialIdSpace,
+  VerticalSpaceIndicator,
+} 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 {
+    spatialIdSpaces,
+    verticalSpaceIndicator,
+    coordinateSelector,
+    spaceSelector,
+    groundIndicators,
+  } = useHooks({
+    ref,
+    engineRef,
+    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);