@canvas-harness/react 0.0.1 → 0.0.2

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

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

package/dist/index.js

@@ -979,6 +979,7 @@ function CanvasSurface({
   onCreateDrag,
   arrowDefaults,
   background,
+  selectionColor,
   renderCustomNodeView,
   children
 }) {
@@ -1011,6 +1012,7 @@ function CanvasSurface({
       width: w,
       height: h,
       background,
+      selectionColor,
       onOverlayChange: (ids) => setMountedIds(ids)
     });
     r.start();
@@ -1024,6 +1026,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 +1066,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 +1074,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 };