@canvas-harness/react 0.0.1 → 0.0.3

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;
@@ -981,6 +1032,7 @@ function CanvasSurface({
   onCreateDrag,
   arrowDefaults,
   background,
+  selectionColor,
   renderCustomNodeView,
   children
 }) {
@@ -993,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());
@@ -1013,6 +1066,7 @@ function CanvasSurface({
       width: w,
       height: h,
       background,
+      selectionColor,
       onOverlayChange: (ids) => setMountedIds(ids)
     });
     r.start();
@@ -1026,6 +1080,9 @@ function CanvasSurface({
   react.useEffect(() => {
     rendererRef.current?.setBackground(background);
   }, [background]);
+  react.useEffect(() => {
+    if (selectionColor !== void 0) rendererRef.current?.setSelectionColor(selectionColor);
+  }, [selectionColor]);
   react.useEffect(() => {
     const el = wrapRef.current;
     if (!el) return;
@@ -1063,6 +1120,7 @@ function CanvasSurface({
       el.removeEventListener("dblclick", onDoubleClickHandler);
     };
   }, [store, onClick, onDoubleClick]);
+  const justCommittedRef = react.useRef(false);
   react.useEffect(() => {
     const el = wrapRef.current;
     if (!el || !onCreateDrag) return;
@@ -1070,7 +1128,6 @@ function CanvasSurface({
     let startScreen = null;
     let activePointerId = null;
     let committed = false;
-    const justCommittedRef = { current: false };
     const screenFromEvent = (e) => {
       const rect = el.getBoundingClientRect();
       return { x: e.clientX - rect.left, y: e.clientY - rect.top };
@@ -1201,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: [
@@ -1551,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(