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>