@visualli/react 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualli/react",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "React canvas renderer for .visualli files \u2014 built on @visualli/core",
   "repository": {
     "type": "git",
@@ -30,10 +30,12 @@
     "react-dom": "^18.0.0"
   },
   "dependencies": {
+    "@visualli/bindings": "*",
     "@visualli/core": "*",
     "zustand": "^4.5.2",
     "konva": "^9.3.6",
-    "react-konva": "^18.2.10"
+    "react-konva": "^18.2.10",
+    "react-use-measure": "^1.1.2"
   },
   "devDependencies": {
     "@types/react": "^18.3.0",

package/src/VisualliCanvas.tsx

@@ -212,20 +212,20 @@ export default function VisualliCanvas(props: VisualliCanvasProps) {
         containers: getContainersForLayer(doc, currentLayerId) as ContainerGroup[],
       };
     } catch { return { flatNodes: [] as FlatNode[], connections: [] as MindMapConnection[], containers: [] as ContainerGroup[] }; }
-  }, [doc, currentLayerId]);
-
-  // ── Stores ────────────────────────────────────────────────────────────────
-  const setNodes  = useNodeStore(s => s.setNodes);
-  const nodes     = useNodeStore(s => s.nodes);
-  const updateNodePosition = useNodeStore(s => s.updateNodePosition);
-  const setCenter = useViewportStore(s => s.setCenter);
-  const setZoom   = useViewportStore(s => s.setZoom);
-  const viewport  = useViewportStore(s => ({
-    centerX: s.centerX, centerY: s.centerY, zoomLevel: s.zoomLevel,
-    canvasWidth: s.canvasWidth, canvasHeight: s.canvasHeight,
-  }));
-  const clearSel  = useSelectionStore(s => s.clear);
-  const select    = useSelectionStore(s => s.select);
+    }, [doc, currentLayerId]);
+    const viewport  = useViewportStore(s => ({
+      centerX: s.centerX, centerY: s.centerY, zoomLevel: s.zoomLevel,
+      canvasWidth: s.canvasWidth, canvasHeight: s.canvasHeight,
+    }));
+    const setCenter = useViewportStore(s => s.setCenter);
+    const setZoom = useViewportStore(s => s.setZoom);
+
+    const nodes = useNodeStore(s => s.nodes);
+    const setNodes = useNodeStore(s => s.setNodes);
+    const updateNodePosition = useNodeStore(s => s.updateNodePosition);
+
+    const clearSel  = useSelectionStore(s => s.clear);
+    const select    = useSelectionStore(s => s.select);
 
   // Sync nodes → store
   useEffect(() => {

package/src/components/KonvaEdge.tsx

@@ -46,12 +46,14 @@ export interface KonvaEdgeProps {
 
 const EDGE_SPACING = 25; // Increased spacing to ensure arrow head stays out of organic shapes
 const STROKE_COLOR = '#000000';
+const STROKE_COLOR_DARK = '#ffffff';
 const STROKE_WIDTH = 2.5;
 
 const KonvaEdge = memo(function KonvaEdge({
   sourceNode: from,
   targetNode: to,
   connection,
+  isDark = false,
   zoomLevel = 1.0,
 }: KonvaEdgeProps) {
   const label = (connection as { label?: string } | undefined)?.label;
@@ -194,11 +196,13 @@ const KonvaEdge = memo(function KonvaEdge({
   }, [from.x, from.y, from.width, from.branchCount, to.x, to.y, to.width, to.branchCount, label, zoomLevel]);
 
   // ── Render ────────────────────────────────────────────────────────────────
+  const strokeColor = isDark ? STROKE_COLOR_DARK : STROKE_COLOR;
+  
   return (
     <Group>
       <Line
         points={points}
-        stroke={STROKE_COLOR}
+        stroke={strokeColor}
         strokeWidth={STROKE_WIDTH}
         tension={0}
         opacity={0.9}
@@ -209,7 +213,7 @@ const KonvaEdge = memo(function KonvaEdge({
       />
       <Line
         points={arrowHeadPoints}
-        stroke={STROKE_COLOR}
+        stroke={strokeColor}
         strokeWidth={STROKE_WIDTH}
         lineCap="round"
         lineJoin="round"