streamlined connections

packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte

@@ -2,21 +2,59 @@
   import cc from 'classcat';
 
   import { useStore } from '$lib/store';
+  import {
+    ConnectionLineType,
+    getBezierPath,
+    getConnectionStatus,
+    getSmoothStepPath,
+    getStraightPath
+  } from '@xyflow/system';
 
   export let containerStyle: string = '';
   export let style: string = '';
   export let isCustomComponent: boolean = false;
 
-  const { width, height, connection } = useStore();
+  const { width, height, connection, connectionLineType } = useStore();
+
+  let path: string | null = null;
+
+  $: if ($connection.inProgress && !isCustomComponent) {
+    const { from, to, fromPosition, toPosition } = $connection;
+    const pathParams = {
+      sourceX: from.x,
+      sourceY: from.y,
+      sourcePosition: fromPosition,
+      targetX: to.x,
+      targetY: to.y,
+      targetPosition: toPosition
+    };
+
+    switch ($connectionLineType) {
+      case ConnectionLineType.Bezier:
+        [path] = getBezierPath(pathParams);
+        break;
+      case ConnectionLineType.Step:
+        [path] = getSmoothStepPath({
+          ...pathParams,
+          borderRadius: 0
+        });
+        break;
+      case ConnectionLineType.SmoothStep:
+        [path] = getSmoothStepPath(pathParams);
+        break;
+      default:
+        [path] = getStraightPath(pathParams);
+    }
+  }
 </script>
 
-{#if $connection.path}
+{#if $connection.inProgress}
   <svg width={$width} height={$height} class="svelte-flow__connectionline" style={containerStyle}>
-    <g class={cc(['svelte-flow__connection', $connection.status])}>
+    <g class={cc(['svelte-flow__connection', getConnectionStatus($connection.isValid)])}>
       <slot name="connectionLine" />
       <!-- slot fallbacks do not work if slots are forwarded in parent -->
       {#if !isCustomComponent}
-        <path d={$connection.path} {style} fill="none" class="svelte-flow__connection-path" />
+        <path d={path} {style} fill="none" class="svelte-flow__connection-path" />
       {/if}
     </g>
   </svg>

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -103,7 +103,7 @@
           $onConnectEndAction?.(event);
         },
         getTransform: () => [$viewport.x, $viewport.y, $viewport.zoom],
-        getFromHandle: () => $connection.startHandle
+        getFromHandle: () => $connection.fromHandle
       });
     }
   }
@@ -128,21 +128,20 @@
     prevConnections = connections ?? new Map();
   }
 
-  $: connectionInProcess = !!$connection.startHandle;
+  $: connectionInProcess = !!$connection.fromHandle;
   $: connectingFrom =
-    $connection.startHandle?.nodeId === nodeId &&
-    $connection.startHandle?.type === type &&
-    $connection.startHandle?.handleId === handleId;
+    $connection.fromHandle?.nodeId === nodeId &&
+    $connection.fromHandle?.type === type &&
+    $connection.fromHandle?.id === handleId;
   $: connectingTo =
-    $connection.endHandle?.nodeId === nodeId &&
-    $connection.endHandle?.type === type &&
-    $connection.endHandle?.handleId === handleId;
+    $connection.toHandle?.nodeId === nodeId &&
+    $connection.toHandle?.type === type &&
+    $connection.toHandle?.id === handleId;
   $: isPossibleEndHandle =
     $connectionMode === ConnectionMode.Strict
-      ? $connection.startHandle?.type !== type
-      : nodeId !== $connection.startHandle?.nodeId ||
-        handleId !== $connection.startHandle?.handleId;
-  $: valid = connectingTo && $connection.status === 'valid';
+      ? $connection.fromHandle?.type !== type
+      : nodeId !== $connection.fromHandle?.nodeId || handleId !== $connection.fromHandle?.id;
+  $: valid = connectingTo && $connection.isValid;
 </script>
 
 <!--