feat: enhance canvas connection handling with custom animation and edge management

- Added a custom connection line component with animation for improved visual feedback during node interactions. - Implemented CSS animations for temporary connection lines, enhancing the user experience in the canvas. - Refactored edge creation and removal logic to support optimistic updates, improving performance during node manipulations. - Introduced a utility function to compute edge reconnections after node deletions, streamlining edge management.
2026-03-28 13:26:47 +01:00
parent e5f27d7d29
commit fb24205da0
5 changed files with 425 additions and 91 deletions
--- a/components/canvas/canvas-placement-context.tsx
+++ b/components/canvas/canvas-placement-context.tsx
@@ -9,7 +9,7 @@ import {
 } from "react";
 import type { ReactMutation } from "convex/react";
 import type { FunctionReference } from "convex/server";
-import { useReactFlow, useStore, type Edge as RFEdge } from "@xyflow/react";
+import { useStore, type Edge as RFEdge } from "@xyflow/react";

 import type { Id } from "@/convex/_generated/dataModel";
 import { NODE_DEFAULTS, NODE_HANDLE_MAP } from "@/lib/canvas-utils";
@@ -89,6 +89,10 @@ type CreateNodeWithIntersectionInput = {
  width?: number;
  height?: number;
  data?: Record<string, unknown>;
+  /**
+   * Optionaler Bildschirmpunkt für Hit-Test auf eine Kante. Nur wenn gesetzt,
+   * kann eine bestehende Kante gesplittet werden — ohne dieses Feld niemals.
+   */
  clientPosition?: FlowPoint;
  zIndex?: number;
  /** Correlate optimistic node id with server id after create (see canvas move flush). */
@@ -183,7 +187,6 @@ export function CanvasPlacementProvider({
  onCreateNodeSettled,
  children,
 }: CanvasPlacementProviderProps) {
-  const { flowToScreenPosition } = useReactFlow();
  const edges = useStore((store) => store.edges);

  const createNodeWithIntersection = useCallback(
@@ -205,17 +208,10 @@ export function CanvasPlacementProvider({

      const effectiveWidth = width ?? defaults.width;
      const effectiveHeight = height ?? defaults.height;
-      const centerClientPosition = flowToScreenPosition({
-        x: position.x + effectiveWidth / 2,
-        y: position.y + effectiveHeight / 2,
-      });

-      const hitEdgeFromClientPosition = clientPosition
+      const hitEdge = clientPosition
        ? getIntersectedPersistedEdge(clientPosition, edges)
        : undefined;
-      const hitEdge =
-        hitEdgeFromClientPosition ??
-        getIntersectedPersistedEdge(centerClientPosition, edges);

      const baseNodePayload = {
        canvasId,
@@ -279,7 +275,6 @@ export function CanvasPlacementProvider({
      createNode,
      createNodeWithEdgeSplit,
      edges,
-      flowToScreenPosition,
      onCreateNodeSettled,
    ],
  );
--- a/components/canvas/canvas.tsx
+++ b/components/canvas/canvas.tsx
@@ -31,6 +31,7 @@ import { authClient } from "@/lib/auth-client";

 import { nodeTypes } from "./node-types";
 import {
+  computeBridgeCreatesForDeletedNodes,
  convexNodeDocWithMergedStorageUrl,
  convexNodeToRF,
  convexEdgeToRF,
@@ -48,6 +49,7 @@ import {
 import CanvasToolbar from "@/components/canvas/canvas-toolbar";
 import { CanvasCommandPalette } from "@/components/canvas/canvas-command-palette";
 import { CanvasPlacementProvider } from "@/components/canvas/canvas-placement-context";
+import CustomConnectionLine from "@/components/canvas/custom-connection-line";

 interface CanvasInnerProps {
  canvasId: Id<"canvases">;
@@ -66,6 +68,17 @@ function clientRequestIdFromOptimisticNodeId(id: string): string | null {
  return suffix.length > 0 ? suffix : null;
 }

+/** Kanten-Split nach Drag: wartet auf echte Node-ID, wenn der Knoten noch optimistisch ist. */
+type PendingEdgeSplit = {
+  intersectedEdgeId: Id<"edges">;
+  sourceNodeId: Id<"nodes">;
+  targetNodeId: Id<"nodes">;
+  intersectedSourceHandle?: string;
+  intersectedTargetHandle?: string;
+  middleSourceHandle?: string;
+  middleTargetHandle?: string;
+};
+
 function withResolvedCompareData(nodes: RFNode[], edges: RFEdge[]): RFNode[] {
  const persistedEdges = edges.filter((edge) => edge.className !== "temp");
  let hasNodeUpdates = false;
@@ -380,40 +393,8 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
    new Map<string, { positionX: number; positionY: number }>(),
  );
  const resolvedRealIdByClientRequestRef = useRef(new Map<string, Id<"nodes">>());
-
-  /** Pairing: create kann vor oder nach Drag-Ende fertig sein — was zuerst kommt, speichert; das andere triggert moveNode. */
-  const syncPendingMoveForClientRequest = useCallback(
-    (clientRequestId: string | undefined, realId?: Id<"nodes">) => {
-      if (!clientRequestId) return;
-
-      if (realId !== undefined) {
-        const pending = pendingMoveAfterCreateRef.current.get(clientRequestId);
-        if (pending) {
-          pendingMoveAfterCreateRef.current.delete(clientRequestId);
-          resolvedRealIdByClientRequestRef.current.delete(clientRequestId);
-          void moveNode({
-            nodeId: realId,
-            positionX: pending.positionX,
-            positionY: pending.positionY,
-          });
-          return;
-        }
-        resolvedRealIdByClientRequestRef.current.set(clientRequestId, realId);
-        return;
-      }
-
-      const r = resolvedRealIdByClientRequestRef.current.get(clientRequestId);
-      const p = pendingMoveAfterCreateRef.current.get(clientRequestId);
-      if (!r || !p) return;
-      pendingMoveAfterCreateRef.current.delete(clientRequestId);
-      resolvedRealIdByClientRequestRef.current.delete(clientRequestId);
-      void moveNode({
-        nodeId: r,
-        positionX: p.positionX,
-        positionY: p.positionY,
-      });
-    },
-    [moveNode],
+  const pendingEdgeSplitByClientRequestRef = useRef(
+    new Map<string, PendingEdgeSplit>(),
  );

  const createNode = useMutation(api.nodes.create).withOptimisticUpdate(
@@ -513,9 +494,165 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
  });

  const createNodeWithEdgeSplit = useMutation(api.nodes.createWithEdgeSplit);
-  const batchRemoveNodes = useMutation(api.nodes.batchRemove);
-  const createEdge = useMutation(api.edges.create);
-  const removeEdge = useMutation(api.edges.remove);
+
+  const batchRemoveNodes = useMutation(api.nodes.batchRemove).withOptimisticUpdate(
+    (localStore, args) => {
+      const nodeList = localStore.getQuery(api.nodes.list, { canvasId });
+      const edgeList = localStore.getQuery(api.edges.list, { canvasId });
+      if (nodeList === undefined || edgeList === undefined) return;
+
+      const removeSet = new Set<string>(args.nodeIds.map((id) => id as string));
+      localStore.setQuery(
+        api.nodes.list,
+        { canvasId },
+        nodeList.filter((n) => !removeSet.has(n._id)),
+      );
+      localStore.setQuery(
+        api.edges.list,
+        { canvasId },
+        edgeList.filter(
+          (e) =>
+            !removeSet.has(e.sourceNodeId) && !removeSet.has(e.targetNodeId),
+        ),
+      );
+    },
+  );
+
+  const createEdge = useMutation(api.edges.create).withOptimisticUpdate(
+    (localStore, args) => {
+      const edgeList = localStore.getQuery(api.edges.list, {
+        canvasId: args.canvasId,
+      });
+      if (edgeList === undefined) return;
+
+      const tempId = `${OPTIMISTIC_EDGE_PREFIX}${Date.now()}_${Math.random().toString(36).slice(2, 11)}` as Id<"edges">;
+      const synthetic: Doc<"edges"> = {
+        _id: tempId,
+        _creationTime: Date.now(),
+        canvasId: args.canvasId,
+        sourceNodeId: args.sourceNodeId,
+        targetNodeId: args.targetNodeId,
+        sourceHandle: args.sourceHandle,
+        targetHandle: args.targetHandle,
+      };
+      localStore.setQuery(
+        api.edges.list,
+        { canvasId: args.canvasId },
+        [...edgeList, synthetic],
+      );
+    },
+  );
+
+  const removeEdge = useMutation(api.edges.remove).withOptimisticUpdate(
+    (localStore, args) => {
+      const edgeList = localStore.getQuery(api.edges.list, { canvasId });
+      if (edgeList === undefined) return;
+      localStore.setQuery(
+        api.edges.list,
+        { canvasId },
+        edgeList.filter((e) => e._id !== args.edgeId),
+      );
+    },
+  );
+
+  const commitEdgeIntersectionSplit = useCallback(
+    async (
+      middleNodeId: Id<"nodes">,
+      intersectedEdge: RFEdge,
+      handles: NonNullable<(typeof NODE_HANDLE_MAP)[string]>,
+    ) => {
+      await Promise.all([
+        createEdge({
+          canvasId,
+          sourceNodeId: intersectedEdge.source as Id<"nodes">,
+          targetNodeId: middleNodeId,
+          sourceHandle: normalizeHandle(intersectedEdge.sourceHandle),
+          targetHandle: normalizeHandle(handles.target),
+        }),
+        createEdge({
+          canvasId,
+          sourceNodeId: middleNodeId,
+          targetNodeId: intersectedEdge.target as Id<"nodes">,
+          sourceHandle: normalizeHandle(handles.source),
+          targetHandle: normalizeHandle(intersectedEdge.targetHandle),
+        }),
+        removeEdge({ edgeId: intersectedEdge.id as Id<"edges"> }),
+      ]);
+    },
+    [canvasId, createEdge, removeEdge],
+  );
+
+  const flushPendingEdgeSplit = useCallback(
+    (clientRequestId: string, realMiddleNodeId: Id<"nodes">) => {
+      const pending = pendingEdgeSplitByClientRequestRef.current.get(
+        clientRequestId,
+      );
+      if (!pending) return;
+      pendingEdgeSplitByClientRequestRef.current.delete(clientRequestId);
+      void Promise.all([
+        createEdge({
+          canvasId,
+          sourceNodeId: pending.sourceNodeId,
+          targetNodeId: realMiddleNodeId,
+          sourceHandle: pending.intersectedSourceHandle,
+          targetHandle: pending.middleTargetHandle,
+        }),
+        createEdge({
+          canvasId,
+          sourceNodeId: realMiddleNodeId,
+          targetNodeId: pending.targetNodeId,
+          sourceHandle: pending.middleSourceHandle,
+          targetHandle: pending.intersectedTargetHandle,
+        }),
+        removeEdge({ edgeId: pending.intersectedEdgeId }),
+      ]).catch((error: unknown) => {
+        console.error("[Canvas pending edge split failed]", {
+          clientRequestId,
+          realMiddleNodeId,
+          error: String(error),
+        });
+      });
+    },
+    [canvasId, createEdge, removeEdge],
+  );
+
+  /** Pairing: create kann vor oder nach Drag-Ende fertig sein — was zuerst kommt, speichert; das andere triggert moveNode. Zusätzlich: Kanten-Split erst mit echter Node-ID (nach create). */
+  const syncPendingMoveForClientRequest = useCallback(
+    (clientRequestId: string | undefined, realId?: Id<"nodes">) => {
+      if (!clientRequestId) return;
+
+      if (realId !== undefined) {
+        const pending = pendingMoveAfterCreateRef.current.get(clientRequestId);
+        if (pending) {
+          pendingMoveAfterCreateRef.current.delete(clientRequestId);
+          resolvedRealIdByClientRequestRef.current.delete(clientRequestId);
+          void moveNode({
+            nodeId: realId,
+            positionX: pending.positionX,
+            positionY: pending.positionY,
+          });
+          flushPendingEdgeSplit(clientRequestId, realId);
+          return;
+        }
+        resolvedRealIdByClientRequestRef.current.set(clientRequestId, realId);
+        flushPendingEdgeSplit(clientRequestId, realId);
+        return;
+      }
+
+      const r = resolvedRealIdByClientRequestRef.current.get(clientRequestId);
+      const p = pendingMoveAfterCreateRef.current.get(clientRequestId);
+      if (!r || !p) return;
+      pendingMoveAfterCreateRef.current.delete(clientRequestId);
+      resolvedRealIdByClientRequestRef.current.delete(clientRequestId);
+      void moveNode({
+        nodeId: r,
+        positionX: p.positionX,
+        positionY: p.positionY,
+      });
+      flushPendingEdgeSplit(clientRequestId, r);
+    },
+    [moveNode, flushPendingEdgeSplit],
+  );

  // ─── Lokaler State (für flüssiges Dragging) ───────────────────
  const [nodes, setNodes] = useState<RFNode[]>([]);
@@ -1075,23 +1212,36 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
            return;
          }

-          await createEdge({
-            canvasId,
-            sourceNodeId: intersectedEdge.source as Id<"nodes">,
-            targetNodeId: node.id as Id<"nodes">,
-            sourceHandle: normalizeHandle(intersectedEdge.sourceHandle),
-            targetHandle: normalizeHandle(handles.target),
-          });
+          const optimisticCid = clientRequestIdFromOptimisticNodeId(node.id);
+          let middleNodeId = node.id as Id<"nodes">;
+          if (optimisticCid) {
+            const resolvedMiddle =
+              resolvedRealIdByClientRequestRef.current.get(optimisticCid);
+            if (resolvedMiddle) {
+              middleNodeId = resolvedMiddle;
+            } else {
+              pendingEdgeSplitByClientRequestRef.current.set(optimisticCid, {
+                intersectedEdgeId: intersectedEdge.id as Id<"edges">,
+                sourceNodeId: intersectedEdge.source as Id<"nodes">,
+                targetNodeId: intersectedEdge.target as Id<"nodes">,
+                intersectedSourceHandle: normalizeHandle(
+                  intersectedEdge.sourceHandle,
+                ),
+                intersectedTargetHandle: normalizeHandle(
+                  intersectedEdge.targetHandle,
+                ),
+                middleSourceHandle: normalizeHandle(handles.source),
+                middleTargetHandle: normalizeHandle(handles.target),
+              });
+              return;
+            }
+          }

-          await createEdge({
-            canvasId,
-            sourceNodeId: node.id as Id<"nodes">,
-            targetNodeId: intersectedEdge.target as Id<"nodes">,
-            sourceHandle: normalizeHandle(handles.source),
-            targetHandle: normalizeHandle(intersectedEdge.targetHandle),
-          });
-
-          await removeEdge({ edgeId: intersectedEdge.id as Id<"edges"> });
+          await commitEdgeIntersectionSplit(
+            middleNodeId,
+            intersectedEdge,
+            handles,
+          );
        } catch (error) {
          console.error("[Canvas edge intersection split failed]", {
            canvasId,
@@ -1110,10 +1260,9 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
    [
      batchMoveNodes,
      canvasId,
-      createEdge,
+      commitEdgeIntersectionSplit,
      edges,
      moveNode,
-      removeEdge,
      setHighlightedIntersectionEdge,
      syncPendingMoveForClientRequest,
    ],
@@ -1147,28 +1296,20 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
        deletingNodeIds.current.add(id);
      }

-      // Auto-Reconnect: Für jeden gelöschten Node eingehende und ausgehende Edges verbinden
-      const edgePromises: Promise<unknown>[] = [];
-      for (const node of deletedNodes) {
-        const incomingEdges = edges.filter((e) => e.target === node.id);
-        const outgoingEdges = edges.filter((e) => e.source === node.id);
-
-        if (incomingEdges.length > 0 && outgoingEdges.length > 0) {
-          for (const incoming of incomingEdges) {
-            for (const outgoing of outgoingEdges) {
-              edgePromises.push(
-                createEdge({
-                  canvasId,
-                  sourceNodeId: incoming.source as Id<"nodes">,
-                  targetNodeId: outgoing.target as Id<"nodes">,
-                  sourceHandle: incoming.sourceHandle ?? undefined,
-                  targetHandle: outgoing.targetHandle ?? undefined,
-                }),
-              );
-            }
-          }
-        }
-      }
+      const bridgeCreates = computeBridgeCreatesForDeletedNodes(
+        deletedNodes,
+        nodes,
+        edges,
+      );
+      const edgePromises = bridgeCreates.map((b) =>
+        createEdge({
+          canvasId,
+          sourceNodeId: b.sourceNodeId,
+          targetNodeId: b.targetNodeId,
+          sourceHandle: b.sourceHandle,
+          targetHandle: b.targetHandle,
+        }),
+      );

      // Batch-Delete + Auto-Reconnect parallel, dann deletingNodeIds aufräumen
      void Promise.all([
@@ -1195,7 +1336,7 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
        toast.info(title);
      }
    },
-    [edges, batchRemoveNodes, createEdge, canvasId],
+    [nodes, edges, batchRemoveNodes, createEdge, canvasId],
  );

  // ─── Edge löschen → Convex ────────────────────────────────────
@@ -1294,6 +1435,7 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
          edges={edges}
          onlyRenderVisibleElements
          defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}
+          connectionLineComponent={CustomConnectionLine}
          nodeTypes={nodeTypes}
          onNodesChange={onNodesChange}
          onEdgesChange={onEdgesChange}
--- a/components/canvas/custom-connection-line.tsx
+++ b/components/canvas/custom-connection-line.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import {
+  ConnectionLineType,
+  getBezierPath,
+  getSimpleBezierPath,
+  getSmoothStepPath,
+  getStraightPath,
+  type ConnectionLineComponentProps,
+} from "@xyflow/react";
+import { connectionLineAccentRgb } from "@/lib/canvas-utils";
+
+export default function CustomConnectionLine({
+  connectionLineType,
+  fromNode,
+  fromHandle,
+  fromX,
+  fromY,
+  toX,
+  toY,
+  fromPosition,
+  toPosition,
+  connectionStatus,
+}: ConnectionLineComponentProps) {
+  const pathParams = {
+    sourceX: fromX,
+    sourceY: fromY,
+    sourcePosition: fromPosition,
+    targetX: toX,
+    targetY: toY,
+    targetPosition: toPosition,
+  };
+
+  let path = "";
+  switch (connectionLineType) {
+    case ConnectionLineType.Bezier:
+      [path] = getBezierPath(pathParams);
+      break;
+    case ConnectionLineType.SimpleBezier:
+      [path] = getSimpleBezierPath(pathParams);
+      break;
+    case ConnectionLineType.Step:
+      [path] = getSmoothStepPath({
+        ...pathParams,
+        borderRadius: 0,
+      });
+      break;
+    case ConnectionLineType.SmoothStep:
+      [path] = getSmoothStepPath(pathParams);
+      break;
+    default:
+      [path] = getStraightPath(pathParams);
+  }
+
+  const [r, g, b] = connectionLineAccentRgb(fromNode.type, fromHandle.id);
+  const opacity = connectionStatus === "invalid" ? 0.45 : 1;
+
+  return (
+    <path
+      d={path}
+      fill="none"
+      className="ls-connection-line-marching"
+      style={{
+        stroke: `rgb(${r}, ${g}, ${b})`,
+        strokeWidth: 2.5,
+        strokeLinecap: "round",
+        strokeDasharray: "10 8",
+        opacity,
+      }}
+    />
+  );
+}