@canvas-harness/react 0.0.2 → 0.0.3

package/dist/index.d.cts

@@ -464,7 +464,7 @@ declare function useCanRedo(): boolean;
  * zoom; this hook handles primary-button gestures only.
  */
 
-type InteractionTool = 'select' | 'rect' | 'ellipse' | 'diamond' | 'capsule' | 'arrow' | 'text';
+type InteractionTool = 'select' | 'pan' | 'rect' | 'ellipse' | 'diamond' | 'capsule' | 'arrow' | 'text';
 
 /**
  * @canvas-harness/react

package/dist/index.d.ts

@@ -464,7 +464,7 @@ declare function useCanRedo(): boolean;
  * zoom; this hook handles primary-button gestures only.
  */
 
-type InteractionTool = 'select' | 'rect' | 'ellipse' | 'diamond' | 'capsule' | 'arrow' | 'text';
+type InteractionTool = 'select' | 'pan' | 'rect' | 'ellipse' | 'diamond' | 'capsule' | 'arrow' | 'text';
 
 /**
  * @canvas-harness/react

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createRenderer, DEFAULT_MINIMAP_MAX_NODES, renderMinimapContent, sceneBounds, drawMinimapViewport, worldViewportFromCamera, screenToWorld, hitTestAny, copy, cut, paste, createPalmRejectionState, createDefaultTextareaEditor, minimapScreenToWorld, notePenActive, shouldRejectTouch, notePenInactive, asEdgeId, midpointToCubicControls, projectToNodeBoundary, marqueeNodes, shouldAutoFit, computeAutoFitHeight, hitTestPoint, worldToNodeLocal, edgeLabelBoundsWorld, asNodeId, zoomAtScreenPoint, clampZoom, panByScreen } from '@canvas-harness/core';
-import { createContext, useContext, useRef, useState, useEffect, useSyncExternalStore } from 'react';
+import { createContext, useContext, useSyncExternalStore, useRef, useState, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/Canvas.tsx
@@ -16,6 +16,54 @@ function useCanvasStore() {
   }
   return store;
 }
+function useInteractionState() {
+  const store = useCanvasStore();
+  return useSyncExternalStore(
+    (cb) => store.subscribe("interaction", cb),
+    () => store.getInteractionState()
+  );
+}
+function useInteractionMode() {
+  const store = useCanvasStore();
+  return 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 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 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 = createDefaultTextareaEditor
@@ -711,7 +759,9 @@ var useOverlayHost = () => {
   }, []);
   return { mountedIds, setMountedIds };
 };
-var usePanZoom = (ref, store) => {
+var usePanZoom = (ref, store, tool) => {
+  const toolRef = useRef(tool);
+  toolRef.current = tool;
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
@@ -849,7 +899,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;
@@ -992,8 +1043,9 @@ function CanvasSurface({
   const toolRef = 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] = useState(() => store.getCamera());
@@ -1204,7 +1256,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: [
@@ -1554,54 +1606,6 @@ function useCamera() {
     () => store.getCamera()
   );
 }
-function useInteractionState() {
-  const store = useCanvasStore();
-  return useSyncExternalStore(
-    (cb) => store.subscribe("interaction", cb),
-    () => store.getInteractionState()
-  );
-}
-function useInteractionMode() {
-  const store = useCanvasStore();
-  return 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 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 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 useSyncExternalStore(