@canvas-harness/react 0.0.1 → 0.0.3

package/dist/index.d.cts

@@ -116,6 +116,21 @@ type CanvasProps = {
      * <Canvas background={{ color: '#fffaf3', pattern: 'dots', gap: 24 }} />
      */
     background?: CanvasBackground;
+    /**
+     * Color for all selection chrome: outline, resize + rotate handles,
+     * edge endpoint + midpoint handles, marquee, drag-create preview,
+     * and the draft edge during creation. Defaults to `#3b82f6`. Update
+     * by changing the prop — `<Canvas>` calls
+     * `renderer.setSelectionColor` without recreating the renderer.
+     *
+     * Accepts any CSS color literal (hex, rgb(), named). Typically you
+     * also want to pass the same value to `<Minimap viewportColor={...} />`
+     * so the two stay visually in sync.
+     *
+     * @example
+     * <Canvas selectionColor="#10b981" />
+     */
+    selectionColor?: string;
     /**
      * Render a custom node's React subtree. Called once per
      * library-mounted custom-node id; positioning is handled by the
@@ -449,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

@@ -116,6 +116,21 @@ type CanvasProps = {
      * <Canvas background={{ color: '#fffaf3', pattern: 'dots', gap: 24 }} />
      */
     background?: CanvasBackground;
+    /**
+     * Color for all selection chrome: outline, resize + rotate handles,
+     * edge endpoint + midpoint handles, marquee, drag-create preview,
+     * and the draft edge during creation. Defaults to `#3b82f6`. Update
+     * by changing the prop — `<Canvas>` calls
+     * `renderer.setSelectionColor` without recreating the renderer.
+     *
+     * Accepts any CSS color literal (hex, rgb(), named). Typically you
+     * also want to pass the same value to `<Minimap viewportColor={...} />`
+     * so the two stay visually in sync.
+     *
+     * @example
+     * <Canvas selectionColor="#10b981" />
+     */
+    selectionColor?: string;
     /**
      * Render a custom node's React subtree. Called once per
      * library-mounted custom-node id; positioning is handled by the
@@ -449,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;
@@ -979,6 +1030,7 @@ function CanvasSurface({
   onCreateDrag,
   arrowDefaults,
   background,
+  selectionColor,
   renderCustomNodeView,
   children
 }) {
@@ -991,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());
@@ -1011,6 +1064,7 @@ function CanvasSurface({
       width: w,
       height: h,
       background,
+      selectionColor,
       onOverlayChange: (ids) => setMountedIds(ids)
     });
     r.start();
@@ -1024,6 +1078,9 @@ function CanvasSurface({
   useEffect(() => {
     rendererRef.current?.setBackground(background);
   }, [background]);
+  useEffect(() => {
+    if (selectionColor !== void 0) rendererRef.current?.setSelectionColor(selectionColor);
+  }, [selectionColor]);
   useEffect(() => {
     const el = wrapRef.current;
     if (!el) return;
@@ -1061,6 +1118,7 @@ function CanvasSurface({
       el.removeEventListener("dblclick", onDoubleClickHandler);
     };
   }, [store, onClick, onDoubleClick]);
+  const justCommittedRef = useRef(false);
   useEffect(() => {
     const el = wrapRef.current;
     if (!el || !onCreateDrag) return;
@@ -1068,7 +1126,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 };
@@ -1199,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: [
@@ -1549,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(