Фикс стрелок

src/DiagramEditor.tsx

@@ -129,18 +129,25 @@ function toRfNodes(doc: DiagramDocument | null): Node[] {
 }
 
 function toRfEdges(doc: DiagramDocument | null): Edge[] {
-  return (doc?.edges ?? []).map((edge) => ({
+  const nodeIds = new Set((doc?.nodes ?? []).map((node) => node.id));
-    id: edge.id,
+  // Defends against documents saved by an older/buggy version, or edited by
-    source: edge.source,
+  // hand — an edge pointing at a node id that no longer exists renders as a
-    target: edge.target,
+  // degenerate path (xyflow falls back to position (0, 0) for the missing
-    sourceHandle: edge.sourceHandle,
+  // endpoint), which is exactly the "arrows in the corner" bug.
-    targetHandle: edge.targetHandle,
+  return (doc?.edges ?? [])
-    type: edge.type ?? DEFAULT_EDGE_TYPE,
+    .filter((edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target))
-    markerEnd: DEFAULT_MARKER_END,
+    .map((edge) => ({
-    label: edge.label,
+      id: edge.id,
-    zIndex: edge.zIndex,
+      source: edge.source,
-    data: edge.data,
+      target: edge.target,
-  }));
+      sourceHandle: edge.sourceHandle,
+      targetHandle: edge.targetHandle,
+      type: edge.type ?? DEFAULT_EDGE_TYPE,
+      markerEnd: DEFAULT_MARKER_END,
+      label: edge.label,
+      zIndex: edge.zIndex,
+      data: edge.data,
+    }));
 }
 
 function isEditableTarget(target: EventTarget | null): boolean {

src/diagram.css

@@ -30,8 +30,15 @@
   background: color-mix(in srgb, canvastext 8%, canvas);
 }
 
+/*
+ * opacity/pointer-events, not display:none — hiding via display collapses the
+ * handle to 0x0, and xyflow computes edge paths from the handle's actual
+ * layout position, so every edge that references a handle id would snap to
+ * a degenerate point the moment view mode hid it.
+ */
 .diagram-flow--view-mode .react-flow__handle {
-  display: none;
+  opacity: 0;
+  pointer-events: none;
 }
 
 /*