@canvas-harness/react 0.0.2 → 0.0.4

package/dist/index.cjs

@@ -18,6 +18,54 @@ function useCanvasStore() {
   }
   return store;
 }
+function useInteractionState() {
+  const store = useCanvasStore();
+  return react.useSyncExternalStore(
+    (cb) => store.subscribe("interaction", cb),
+    () => store.getInteractionState()
+  );
+}
+function useInteractionMode() {
+  const store = useCanvasStore();
+  return react.useSyncExternalStore(
+    (cb) => {
+      let lastMode = store.getInteractionState().mode;
+      return store.subscribe("interaction", (state) => {
+        if (state.mode !== lastMode) {
+          lastMode = state.mode;
+          cb();
+        }
+      });
+    },
+    () => store.getInteractionState().mode
+  );
+}
+function useCursor() {
+  const store = useCanvasStore();
+  return react.useSyncExternalStore(
+    (cb) => store.subscribe("interaction", cb),
+    () => store.getInteractionState().pointer
+  );
+}
+function useIsMoving() {
+  const mode = useInteractionMode();
+  return mode === "panning" || mode === "zooming" || mode === "dragging" || mode === "resizing" || mode === "rotating";
+}
+var EMPTY_DRAGGED = [];
+function useDraggedIds() {
+  const store = useCanvasStore();
+  return react.useSyncExternalStore(
+    (cb) => store.subscribe("interaction", cb),
+    () => {
+      const state = store.getInteractionState();
+      return state.draggedIds.length === 0 ? EMPTY_DRAGGED : state.draggedIds;
+    }
+  );
+}
+function useIsPenActive() {
+  const cursor = useCursor();
+  return cursor?.pointerType === "pen";
+}
 function EditorMount({
   store,
   factory = core.createDefaultTextareaEditor
@@ -713,7 +761,9 @@ var useOverlayHost = () => {
   }, []);
   return { mountedIds, setMountedIds };
 };
-var usePanZoom = (ref, store) => {
+var usePanZoom = (ref, store, tool) => {
+  const toolRef = react.useRef(tool);
+  toolRef.current = tool;
   react.useEffect(() => {
     const el = ref.current;
     if (!el) return;
@@ -851,7 +901,8 @@ var usePanZoom = (ref, store) => {
         }
         return;
       }
-      if (e.button === 1 || e.button === 0 && panActivatedBySpace) {
+      const handToolActive = toolRef.current === "pan";
+      if (e.button === 1 || e.button === 0 && (panActivatedBySpace || handToolActive)) {
         panning = true;
         lastX = e.clientX;
         lastY = e.clientY;
@@ -994,8 +1045,9 @@ function CanvasSurface({
   const toolRef = react.useRef(tool);
   toolRef.current = tool;
   const { w, h } = useResizeObserver(wrapRef);
-  usePanZoom(wrapRef, store);
+  usePanZoom(wrapRef, store, tool);
   useInteractionGesture(wrapRef, store, tool);
+  const interactionMode = useInteractionMode();
   useArrowTool(wrapRef, store, tool === "arrow", arrowDefaults);
   const { mountedIds, setMountedIds } = useOverlayHost();
   const [camera, setCamera] = react.useState(() => store.getCamera());
@@ -1206,7 +1258,7 @@ function CanvasSurface({
         inset: 0,
         background: "#f8fafc",
         overflow: "hidden",
-        cursor: tool === "select" ? "default" : "crosshair",
+        cursor: tool === "pan" ? interactionMode === "panning" ? "grabbing" : "grab" : tool === "select" ? "default" : "crosshair",
         touchAction: "none"
       },
       children: [
@@ -1556,54 +1608,6 @@ function useCamera() {
     () => store.getCamera()
   );
 }
-function useInteractionState() {
-  const store = useCanvasStore();
-  return react.useSyncExternalStore(
-    (cb) => store.subscribe("interaction", cb),
-    () => store.getInteractionState()
-  );
-}
-function useInteractionMode() {
-  const store = useCanvasStore();
-  return react.useSyncExternalStore(
-    (cb) => {
-      let lastMode = store.getInteractionState().mode;
-      return store.subscribe("interaction", (state) => {
-        if (state.mode !== lastMode) {
-          lastMode = state.mode;
-          cb();
-        }
-      });
-    },
-    () => store.getInteractionState().mode
-  );
-}
-function useCursor() {
-  const store = useCanvasStore();
-  return react.useSyncExternalStore(
-    (cb) => store.subscribe("interaction", cb),
-    () => store.getInteractionState().pointer
-  );
-}
-function useIsMoving() {
-  const mode = useInteractionMode();
-  return mode === "panning" || mode === "zooming" || mode === "dragging" || mode === "resizing" || mode === "rotating";
-}
-var EMPTY_DRAGGED = [];
-function useDraggedIds() {
-  const store = useCanvasStore();
-  return react.useSyncExternalStore(
-    (cb) => store.subscribe("interaction", cb),
-    () => {
-      const state = store.getInteractionState();
-      return state.draggedIds.length === 0 ? EMPTY_DRAGGED : state.draggedIds;
-    }
-  );
-}
-function useIsPenActive() {
-  const cursor = useCursor();
-  return cursor?.pointerType === "pen";
-}
 function useLocalPresence() {
   const store = useCanvasStore();
   return react.useSyncExternalStore(