feat: support spatial id (#64)

example/App.tsx

@@ -37,6 +37,9 @@ function App() {
     handleDeleteSketchFeature,
     handleCreditsUpdate,
     handleGetCredits,
+    handleSpatialIdPick,
+    spatialIdZoom,
+    handleSpatialIdZoomChange,
   } = useHooks();
 
   return (
@@ -61,6 +64,9 @@ function App() {
         handleApplyEditSketchFeature={handleApplyEditSketchFeature}
         handleDeleteSketchFeature={handleDeleteSketchFeature}
         handleGetCredits={handleGetCredits}
+        handleSpatialIdPick={handleSpatialIdPick}
+        spatialIdZoom={spatialIdZoom}
+        handleSpatialIdZoomChange={handleSpatialIdZoomChange}
       />
       <SelectionPanel selectedLayer={selectedLayer} selectedFeature={selectedFeature} />
       <CoreVisualizer

example/components/OptionsPanel/index.tsx

@@ -15,6 +15,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Slider } from "@/components/ui/slider";
 import { Switch } from "@/components/ui/switch";
 import { SKETCH_TOOLS, TILES } from "@/constants";
 import { TEST_LAYERS } from "@/testLayers";
@@ -39,6 +40,9 @@ type OptionsPanelProps = {
   handleApplyEditSketchFeature: () => void;
   handleDeleteSketchFeature: () => void;
   handleGetCredits: () => void;
+  handleSpatialIdPick: () => void;
+  spatialIdZoom: number;
+  handleSpatialIdZoomChange: (v: number[]) => void;
 };
 
 const OptionsPanel: FC<OptionsPanelProps> = ({
@@ -59,6 +63,9 @@ const OptionsPanel: FC<OptionsPanelProps> = ({
   handleApplyEditSketchFeature,
   handleDeleteSketchFeature,
   handleGetCredits,
+  handleSpatialIdPick,
+  spatialIdZoom,
+  handleSpatialIdZoomChange,
 }) => {
   const [open, setOpen] = useState(false);
 
@@ -176,6 +183,20 @@ const OptionsPanel: FC<OptionsPanelProps> = ({
             </div>
           </OptionSection>
 
+          <OptionSection title="Spatial ID">
+            <Slider
+              defaultValue={[20]}
+              min={0}
+              max={25}
+              step={1}
+              value={[spatialIdZoom]}
+              onValueChange={handleSpatialIdZoomChange}
+            />
+            <Button size="sm" variant={"default"} onClick={handleSpatialIdPick}>
+              PickSpace
+            </Button>
+          </OptionSection>
+
           <OptionSection title="Map Ref">
             <div className="flex flex-wrap items-center gap-1">
               <Button size="sm" variant="outline" onClick={handleGetCredits}>

example/components/ui/slider.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

example/hooks.ts

@@ -125,18 +125,25 @@ export default () => {
     ref.current?.sketch.deleteFeature(selectedLayer.id, selectedFeature.id);
   }, [selectedLayer, selectedFeature]);
 
-  const [credits, setCredits] = useState<Credit[]>([]);
+  const [_credits, setCredits] = useState<Credit[]>([]);
   const handleCreditsUpdate = useCallback((credits: Credit[]) => {
     setCredits(credits);
   }, []);
-  useEffect(() => {
-    console.log("Credits:", credits);
-  }, [credits]);
 
   const handleGetCredits = useCallback(() => {
     alert(JSON.stringify(ref.current?.engine?.getCredits()));
   }, []);
 
+  // Spatial ID
+  const [spatialIdZoom, setSpatialIdZoom] = useState<number>(20);
+  const handleSpatialIdZoomChange = useCallback((value: number[]) => {
+    setSpatialIdZoom(value[0]);
+  }, []);
+
+  const handleSpatialIdPick = useCallback(() => {
+    ref.current?.spatialId?.pickSpace({ zoom: spatialIdZoom });
+  }, [spatialIdZoom]);
+
   return {
     isReady,
     ref,
@@ -168,5 +175,8 @@ export default () => {
     handleDeleteSketchFeature,
     handleCreditsUpdate,
     handleGetCredits,
+    handleSpatialIdPick,
+    spatialIdZoom,
+    handleSpatialIdZoomChange,
   };
 };

package.json

@@ -38,12 +38,14 @@
     "@radix-ui/react-icons": "1.3.0",
     "@radix-ui/react-select": "2.1.1",
     "@radix-ui/react-separator": "1.1.0",
+    "@radix-ui/react-slider": "1.2.2",
     "@radix-ui/react-slot": "1.1.0",
     "@radix-ui/react-switch": "1.1.0",
     "@radix-ui/react-toggle": "1.1.0",
     "@reearth/cesium-mvt-imagery-provider": "1.5.4",
     "@rot1024/use-transition": "1.0.0",
     "@seznam/compose-react-refs": "1.0.6",
+    "@spatial-id/javascript-sdk": "https://github.com/spatial-id/javascript-sdk",
     "@turf/invariant": "6.5.0",
     "@turf/turf": "6.5.0",
     "@types/proj4": "2.5.5",

src/Map/Sketch/hooks.ts

@@ -71,6 +71,7 @@ export default function ({
   ref,
   engineRef,
   layersRef,
+  interactionMode,
   selectedFeature,
   overrideInteractionMode,
   onSketchTypeChange,
@@ -333,6 +334,7 @@ export default function ({
   useWindowEvent("keydown", event => {
     if (type === undefined) return;
     if (event.code === "Space") {
+      tempSwitchToMoveMode.current = true;
       setDisableInteraction(true);
       overrideInteractionMode?.("move");
     } else {
@@ -360,6 +362,9 @@ export default function ({
     if (event.code === "Space") {
       overrideInteractionMode?.("sketch");
       setDisableInteraction(false);
+      if (tempSwitchToMoveMode.current) {
+        tempSwitchToMoveMode.current = false;
+      }
     }
   });
 
@@ -376,9 +381,17 @@ export default function ({
   overrideInteractionModeRef.current = overrideInteractionMode;
   const onSketchTypeChangeRef = useRef(onSketchTypeChange);
   onSketchTypeChangeRef.current = onSketchTypeChange;
+  const interactionModeRef = useRef(interactionMode);
+  interactionModeRef.current = interactionMode;
 
   useEffect(() => {
-    overrideInteractionModeRef.current?.(type || sketchEditingFeature ? "sketch" : "default");
+    overrideInteractionModeRef.current?.(
+      type || sketchEditingFeature
+        ? "sketch"
+        : interactionModeRef.current === "sketch"
+          ? "default"
+          : interactionModeRef.current,
+    );
   }, [type, sketchEditingFeature]);
 
   const isEditingRef = useRef(isEditing);
@@ -393,6 +406,19 @@ export default function ({
     }
   }, [type]);
 
+  const typeRef = useRef(type);
+  typeRef.current = type;
+  useEffect(() => {
+    if (tempSwitchToMoveMode.current) return;
+    if (interactionMode !== "sketch") {
+      if (isEditingRef.current) {
+        cancelEditRef.current();
+      } else if (typeRef.current !== undefined) {
+        updateType(undefined);
+      }
+    }
+  }, [interactionMode, updateType]);
+
   // Edit
   const onEditFeatureChangeCbs = useRef<SketchEditFeatureChangeCb[]>([]);
   const onEditFeatureChange = useCallback((cb: SketchEditFeatureChangeCb) => {
@@ -569,8 +595,8 @@ export default function ({
   useEffect(() => {
     return window.addEventListener("keydown", event => {
       if (event.code === "Space" && stateRef.current.matches("editing")) {
-        overrideInteractionMode?.("move");
         tempSwitchToMoveMode.current = true;
+        overrideInteractionMode?.("move");
       } else if (event.code === "Delete" && stateRef.current.matches("editing")) {
         handleDeleteControlPointRef.current();
       }