straight lines

studio/frontend/src/features/canvas-lab/canvas-lab-page.tsx

@@ -1,6 +1,7 @@
 import {
   Background,
   BackgroundVariant,
+  type EdgeTypes,
   type Node,
   type NodeTypes,
   Panel,
@@ -15,6 +16,7 @@ import { EyeIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { previewCanvas } from "./api";
 import { BlockSheet } from "./components/block-sheet";
+import { CanvasEdge } from "./components/canvas-edge";
 import { CanvasNode } from "./components/canvas-node";
 import { ConfigDialog } from "./dialogs/config-dialog";
 import { ImportDialog } from "./dialogs/import-dialog";
@@ -25,6 +27,7 @@ import { importCanvasPayload } from "./utils/import";
 import { buildCanvasPayload } from "./utils/payload";
 
 const NODE_TYPES: NodeTypes = { builder: CanvasNode };
+const EDGE_TYPES: EdgeTypes = { canvas: CanvasEdge };
 
 export function CanvasLabPage(): ReactElement {
   const {
@@ -228,6 +231,11 @@ export function CanvasLabPage(): ReactElement {
             nodes={nodes}
             edges={edges}
             nodeTypes={NODE_TYPES}
+            edgeTypes={EDGE_TYPES}
+            defaultEdgeOptions={{
+              type: "canvas",
+              style: { strokeWidth: 1.5, stroke: "#cbd5f5" },
+            }}
             onNodesChange={onNodesChange}
             onEdgesChange={onEdgesChange}
             onConnect={onConnect}

studio/frontend/src/features/canvas-lab/components/canvas-edge.tsx

@@ -0,0 +1,26 @@
+import { BaseEdge, type EdgeProps, getSmoothStepPath } from "@xyflow/react";
+import { memo } from "react";
+
+export const CanvasEdge = memo(function CanvasEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style,
+}: EdgeProps): JSX.Element {
+  const [path] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    borderRadius: 0,
+    offset: 16,
+  });
+
+  return <BaseEdge id={id} path={path} style={style} />;
+});

studio/frontend/src/features/canvas-lab/utils/graph.ts

@@ -73,7 +73,7 @@ export function applyCanvasConnection(
   if (!(source && target)) {
     return { edges };
   }
-  const nextEdges = addEdge(connection, edges);
+  const nextEdges = addEdge({ ...connection, type: "canvas" }, edges);
   if (isLlmConfig(target)) {
     const ref = `{{ ${source.name} }}`;
     const next = {

studio/frontend/src/features/canvas-lab/utils/import/edges.ts

@@ -20,7 +20,12 @@ export function buildEdges(
       return;
     }
     seen.add(key);
-    edges.push({ id: `e-${key}`, source: sourceId, target: targetId });
+    edges.push({
+      id: `e-${key}`,
+      source: sourceId,
+      target: targetId,
+      type: "canvas",
+    });
   };
 
   if (uiEdges && uiEdges.length > 0) {