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

package/dist/index.d.ts

@@ -374,9 +374,7 @@ export declare type Credit = {
     html?: string;
 };
 
-export declare type CursorType = "auto" | "grab" | "crosshair";
-
-declare type CursorType_2 = "default" | "auto" | "help" | "pointer" | "grab" | "crosshair";
+declare type CursorType = "default" | "auto" | "help" | "pointer" | "grab" | "crosshair";
 
 export declare type Data = {
     type: DataType;
@@ -557,7 +555,7 @@ export declare type EngineRef = {
         type: SketchType;
         controlPoints: Position3d[];
     }) => LineString | Polygon_2 | MultiPolygon | Point | undefined;
-    setCursor: (cursor: CursorType_2) => void;
+    setCursor: (cursor: CursorType) => void;
     flyTo: FlyTo;
     flyToBBox: (bbox: [number, number, number, number], options?: CameraOptions & {
         heading?: number;
@@ -1093,9 +1091,7 @@ declare const Map_2: ForwardRefExoticComponent<    {
 engines?: Record<string, Engine> | undefined;
 engine?: string | undefined;
 onAPIReady?: (() => void) | undefined;
-} & Omit<Props_2, "Feature" | "viewerProperty" | "selectionReason" | "delegatedDataTypes" | "clusterComponent" | "selectedLayerId"> & Omit<EngineProps, "onLayerSelect" | "selectedLayerId" | "layerSelectionReason"> & Omit<SketchProps, "engineRef" | "SketchComponent" | "layersRef"> & {
-cursor?: CursorType | undefined;
-} & RefAttributes<MapRef>>;
+} & Omit<Props_2, "Feature" | "viewerProperty" | "selectionReason" | "delegatedDataTypes" | "clusterComponent" | "selectedLayerId"> & Omit<EngineProps, "onLayerSelect" | "selectedLayerId" | "layerSelectionReason"> & Omit<SketchProps, "engineRef" | "SketchComponent" | "layersRef"> & RefAttributes<MapRef>>;
 export { Map_2 as Map }
 
 export declare type MapRef = {
@@ -1338,9 +1334,7 @@ export declare type Props = {
     engines?: Record<string, Engine>;
     engine?: string;
     onAPIReady?: () => void;
-} & Omit<Props_2, "Feature" | "clusterComponent" | "selectionReason" | "delegatedDataTypes" | "selectedLayerId" | "viewerProperty"> & Omit<EngineProps, "onLayerSelect" | "layerSelectionReason" | "selectedLayerId"> & Omit<SketchProps, "layersRef" | "engineRef" | "SketchComponent"> & {
-    cursor?: CursorType;
-};
+} & Omit<Props_2, "Feature" | "clusterComponent" | "selectionReason" | "delegatedDataTypes" | "selectedLayerId" | "viewerProperty"> & Omit<EngineProps, "onLayerSelect" | "layerSelectionReason" | "selectedLayerId"> & Omit<SketchProps, "layersRef" | "engineRef" | "SketchComponent">;
 
 declare type Props_2 = Omit<Props_3, "atomMap" | "isHidden" | "selectedLayerId"> & {
     selectedLayer?: {
@@ -1600,9 +1594,16 @@ export declare type Spacing = {
 declare type SpatialIdPickSpaceOptions = {
     zoom?: number;
     maxHeight?: number;
-    color?: string;
+    minHeight?: number;
     dataOnly?: boolean;
     rightClickToExit?: boolean;
+    color?: string;
+    outlineColor?: string;
+    groundIndicatorColor?: string;
+    selectorColor?: string;
+    selectorOutlineColor?: string;
+    verticalSpaceIndicatorColor?: string;
+    verticalSpaceIndicatorOutlineColor?: string;
 };
 
 declare type SpatialIdRef = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reearth/core",
-  "version": "0.0.7-alpha.30",
+  "version": "0.0.7-alpha.32",
   "author": "Re:Earth contributors <community@reearth.io>",
   "license": "Apache-2.0",
   "description": "A library that abstracts a map engine as one common API.",

package/src/Map/Sketch/hooks.ts

@@ -16,6 +16,7 @@ import { v4 as uuidv4 } from "uuid";
 import { InterpreterFrom, StateFrom } from "xstate";
 
 import { ControlPointMouseEventHandler } from "../../engines/Cesium/Sketch";
+import { useWindowEvent } from "../../utils/use-window-event";
 import { InteractionModeType } from "../../Visualizer/interactionMode";
 import { Feature, EngineRef, LayersRef, SketchRef } from "../types";
 import { useGet } from "../utils";
@@ -34,7 +35,6 @@ import {
 import usePluginSketchLayer from "./usePluginSketchLayer";
 import useSketch from "./useSketch";
 import useSketchFeature from "./useSketchFeature";
-import { useWindowEvent } from "./utils";
 
 import { OnLayerSelectType } from ".";
 
@@ -90,10 +90,16 @@ export default function ({
   const [type, updateType] = useState<SketchType | undefined>();
   const [from, updateFrom] = useState<"editor" | "plugin">("editor");
 
-  const setType = useCallback((type: SketchType | undefined, from?: "editor" | "plugin") => {
-    updateType(type);
-    updateFrom(from ?? "editor");
-  }, []);
+  const setType = useCallback(
+    (type: SketchType | undefined, from?: "editor" | "plugin") => {
+      updateType(type);
+      updateFrom(from ?? "editor");
+      if (type) {
+        engineRef.current?.setCursor("crosshair");
+      }
+    },
+    [engineRef],
+  );
 
   const [disableInteraction, setDisableInteraction] = useState(false);
 
@@ -611,6 +617,12 @@ export default function ({
     });
   }, [overrideInteractionMode]);
 
+  useEffect(() => {
+    if (!isEditing) {
+      overrideInteractionModeRef.current?.("default");
+    }
+  }, [isEditing]);
+
   return {
     state,
     isEditing,

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

@@ -1,5 +1,6 @@
 import {
   ForwardedRef,
+  RefObject,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -7,19 +8,23 @@ import {
   useRef,
   useState,
 } from "react";
-import { RefObject } from "use-callback-ref/dist/es5/types";
+import { v4 as uuid } from "uuid";
 
+import { useWindowEvent } from "../../utils/use-window-event";
 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 { createSpatialIdFloorSpaces, createSpatialIdSpace, getSpaceData } from "./utils";
+import { createSpatialIdSpace, getSpaceData, getVerticalLimits } from "./utils";
 
 type Props = {
   ref: ForwardedRef<SpatialIdRef>;
@@ -30,12 +35,6 @@ type Props = {
   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,
@@ -46,32 +45,66 @@ export default ({
 }: 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 [spatialIdSpaces, setSpatialIdSpaces] = useState<SpatialIdSpaceType[] | null>(null);
+  const [verticalSpaceIndicator, setVerticalSpaceIndicator] =
+    useState<VerticalSpaceIndicatorType | null>(null);
+  const [coordinateSelector, setCoordinateSelector] = useState<CoordinateSelectorType | null>(null);
+  const lastCoordinateSelector = useRef<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>>({
-    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 [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);
     },
-    [overrideInteractionMode],
+    [engineRef, overrideInteractionMode],
   );
 
   const interactionModeRef = useRef(interactionMode);
@@ -79,26 +112,30 @@ export default ({
 
   const finishPicking = useCallback(() => {
     setState("idle");
-    setSelectorSpace(null);
     setBasePosition(null);
     setBaseCoordinate(null);
-    setFloorSpaces([]);
+    setSpaceSelector(null);
+    setCoordinateSelector(null);
+    lastCoordinateSelector.current = null;
+    setVerticalSpaceIndicator(null);
     overrideInteractionMode?.(
       interactionModeRef.current === "spatialId"
         ? "default"
         : interactionModeRef.current ?? "default",
     );
+    engineRef.current?.setCursor("default");
     engineRef.current?.requestRender();
   }, [overrideInteractionMode, engineRef]);
 
-  // handle events
   const handleMouseUp = useCallback(
     (props: MouseEventProps) => {
       if (state === "idle") return;
       if (tempSwitchToMoveMode.current) return;
 
+      // handle coordinate picking
       if (state === "coordinate") {
-        if (!selectorSpace || props.lat === undefined || props.lng === undefined) return;
+        if (!coordinateSelector || props.lat === undefined || props.lng === undefined) return;
+
         setState("floor");
         setBaseCoordinate([props.lng, props.lat, terrainEnabled ? props.height ?? 0 : 0]);
         setBasePosition(
@@ -107,27 +144,48 @@ export default ({
           }) ?? null,
         );
 
-        setSelectorSpace(prev =>
-          prev ? { ...prev, type: "selector", color: pickOptions.color } : null,
+        lastCoordinateSelector.current = coordinateSelector;
+        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 floorSpaces = createSpatialIdFloorSpaces(
-          selectorSpace.space,
-          pickOptions.maxHeight,
-          pickOptions.color,
+        const { id, wsen } = createSpatialIdSpace(
+          props.lng,
+          props.lat,
+          terrainEnabled ? props.height ?? 0 : 0,
+          pickOptions.zoom,
         );
-        setFloorSpaces(floorSpaces);
+        setVerticalSpaceIndicator({
+          id,
+          wsen,
+          height: verticalLimits.top,
+          extrudedHeight: verticalLimits.bottom,
+          color: pickOptions.verticalSpaceIndicatorColor,
+          outlineColor: pickOptions.verticalSpaceIndicatorOutlineColor,
+        });
+        engineRef.current?.requestRender();
       } else if (state === "floor") {
-        if (!selectorSpace) return;
+        if (!spaceSelector) return;
 
         const confirmedSpace: SpatialIdSpaceType = {
-          ...selectorSpace,
-          type: "confirmed",
+          ...spaceSelector,
+          id: uuid(),
           color: pickOptions.color,
+          outlineColor: pickOptions.outlineColor,
         };
 
         if (!pickOptions.dataOnly) {
-          setSpatialIdSpaces(prev => [...prev, confirmedSpace]);
+          setSpatialIdSpaces(prev => (prev ? [...prev, confirmedSpace] : [confirmedSpace]));
         }
 
         finishPicking();
@@ -136,7 +194,16 @@ export default ({
         onSpacePickEvents.current.forEach(cb => cb(spaceData));
       }
     },
-    [state, terrainEnabled, engineRef, selectorSpace, pickOptions, finishPicking],
+    [
+      state,
+      terrainEnabled,
+      engineRef,
+      spaceSelector,
+      pickOptions,
+      verticalLimits,
+      coordinateSelector,
+      finishPicking,
+    ],
   );
 
   const handleMouseMove = useCallback(
@@ -154,9 +221,13 @@ export default ({
           pickOptions.zoom,
         );
 
-        if (newSpace.space.id === selectorSpace?.space.id) return;
-
-        setSelectorSpace({ ...newSpace, type: "coordinate", color: pickOptions.color });
+        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 ||
@@ -166,40 +237,69 @@ export default ({
         )
           return;
 
-        const height =
+        const offset =
           engineRef.current?.getExtrudedHeight(basePosition, [props.x, props.y], true) ?? 0;
 
-        if (baseCoordinate[2] + height > pickOptions.maxHeight) return;
+        if (
+          baseCoordinate[2] + offset > verticalLimits.top ||
+          baseCoordinate[2] + offset < verticalLimits.bottom
+        )
+          return;
 
         const newSpace = createSpatialIdSpace(
           baseCoordinate[0],
           baseCoordinate[1],
-          baseCoordinate[2] + height,
+          baseCoordinate[2] + offset,
           pickOptions.zoom,
         );
 
-        if (newSpace.space.id === selectorSpace?.space.id || newSpace.space.zfxy.f < 0) return;
+        if (newSpace.space.id === spaceSelector?.space.id) return;
 
-        setSelectorSpace({ ...newSpace, type: "selector", color: pickOptions.color });
+        setSpaceSelector({
+          ...newSpace,
+          color: pickOptions.selectorColor,
+          outlineColor: pickOptions.selectorOutlineColor,
+        });
       }
     },
-    [state, selectorSpace, basePosition, baseCoordinate, engineRef, terrainEnabled, pickOptions],
+    [
+      state,
+      spaceSelector,
+      basePosition,
+      baseCoordinate,
+      engineRef,
+      terrainEnabled,
+      pickOptions,
+      verticalLimits,
+      coordinateSelector?.spaceId,
+    ],
   );
 
-  const handleMouseRightClick = useCallback(() => {
+  const cancel = useCallback(() => {
     if (state === "idle") return;
     if (state === "coordinate" && pickOptions.rightClickToExit) {
       finishPicking();
     } else if (state === "floor") {
-      setSelectorSpace(null);
+      setSpaceSelector(null);
       setBasePosition(null);
       setBaseCoordinate(null);
-      setFloorSpaces([]);
+      setVerticalSpaceIndicator(null);
+      setCoordinateSelector(lastCoordinateSelector.current);
       setState("coordinate");
     }
     engineRef.current?.requestRender();
   }, [state, pickOptions, engineRef, finishPicking]);
 
+  const handleMouseRightClick = useCallback(() => {
+    cancel();
+  }, [cancel]);
+
+  useWindowEvent("keydown", event => {
+    if (event.code === "Escape") {
+      cancel();
+    }
+  });
+
   // bind mouse events
   const eventsBinded = useRef(false);
 
@@ -288,6 +388,10 @@ export default ({
   }, [onMount]);
 
   return {
-    spaces,
+    spatialIdSpaces,
+    verticalSpaceIndicator,
+    coordinateSelector,
+    spaceSelector,
+    groundIndicators,
   };
 };

package/src/Map/SpatialId/index.tsx

@@ -1,7 +1,10 @@
-import { forwardRef, ForwardRefRenderFunction } from "react";
-import { RefObject } from "use-callback-ref/dist/es5/types";
+import { forwardRef, ForwardRefRenderFunction, RefObject } from "react";
 
-import SpatialIdSpace from "../../engines/Cesium/SpatialId";
+import {
+  CoordinateIndicator,
+  SpatialIdSpace,
+  VerticalSpaceIndicator,
+} from "../../engines/Cesium/SpatialId";
 import { InteractionModeType } from "../../Visualizer";
 import { EngineRef } from "../types";
 
@@ -20,7 +23,13 @@ const SpatialId: ForwardRefRenderFunction<SpatialIdRef, SpatialIdProps> = (
   { engineRef, terrainEnabled, interactionMode, overrideInteractionMode, onMount },
   ref,
 ) => {
-  const { spaces } = useHooks({
+  const {
+    spatialIdSpaces,
+    verticalSpaceIndicator,
+    coordinateSelector,
+    spaceSelector,
+    groundIndicators,
+  } = useHooks({
     ref,
     engineRef,
     terrainEnabled,
@@ -28,9 +37,24 @@ const SpatialId: ForwardRefRenderFunction<SpatialIdRef, SpatialIdProps> = (
     overrideInteractionMode,
     onMount,
   });
-  return spaces.length > 0
-    ? spaces.map(space => <SpatialIdSpace key={space.id} space={space} />)
-    : null;
+
+  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

@@ -6,16 +6,39 @@ export type SpatialIdSpaceType = {
   wsen: [number, number, number, number];
   height: number;
   extrudedHeight: number;
-  type?: "selector" | "floor" | "coordinate" | "confirmed";
   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;
-  color?: string;
+  minHeight?: number;
   dataOnly?: boolean;
   rightClickToExit?: boolean;
+  color?: string;
+  outlineColor?: string;
+  groundIndicatorColor?: string;
+  selectorColor?: string;
+  selectorOutlineColor?: string;
+  verticalSpaceIndicatorColor?: string;
+  verticalSpaceIndicatorOutlineColor?: string;
 };
 
 export type SpatialIdRef = {

package/src/Map/SpatialId/utils.ts

@@ -1,7 +1,7 @@
-import { Space } from "@reearth/spatial-id-sdk";
 import { v4 as uuid } from "uuid";
 
-import { SPATIALID_DEFAULT_COLOR, SPATIALID_DEFAULT_MAX_HEIGHT } from "./hooks";
+import { Space } from "@reearth/spatial-id-sdk";
+
 import { SpatialIdSpaceType, SpatialIdSpaceData } from "./types";
 
 const getRectangeParamsFromSpace = (space: Space) => {
@@ -35,34 +35,6 @@ export const createSpatialIdSpace = (
   };
 };
 
-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,
@@ -77,3 +49,16 @@ export const getSpaceData = (space: Space): SpatialIdSpaceData => {
     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

@@ -14,7 +14,7 @@ import type {
 } from "./types";
 import useTimelineManager, { TimelineManagerRef } from "./useTimelineManager";
 
-import { CursorType, SketchEditingFeature } from ".";
+import { SketchEditingFeature } from ".";
 
 export type { MapRef } from "./ref";
 
@@ -25,14 +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,
@@ -130,12 +128,6 @@ export default function ({
     timelineManagerRef,
   });
 
-  useEffect(() => {
-    if (cursor) {
-      engineRef.current?.setCursor(cursor);
-    }
-  }, [cursor]);
-
   const [sketchEditingFeature, setSketchEditingFeature] = useState<
     SketchEditingFeature | undefined
   >();