feat: add connection component

Author: cwandev

apps/www/assets/css/tailwind.css

@@ -68,6 +68,8 @@
     --input: 214.3 31.8% 91.4%;
     --ring: 221.2 83.2% 53.3%;
     --radius: 0.5rem;
+
+    --shadcn-ring: oklch(0.708 0 0);
   }
 
   .dark {
@@ -98,6 +100,8 @@
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 224.3 76.3% 48%;
+
+    --shadcn-ring: oklch(0.439 0 0);
   }
 }
 
@@ -109,13 +113,17 @@
   body {
     @apply bg-background text-foreground;
   }
+
   :root {
     --color-background: hsl(var(--background));
     --color-muted-foreground: hsl(var(--muted-foreground));
+    --color-ring: var(--shadcn-ring);
   }
+
   .dark {
     --color-background: hsl(var(--background));
     --color-muted-foreground: hsl(var(--muted-foreground));
+    --color-ring: var(--shadcn-ring);
   }
 }
 

packages/elements/src/canvas/Canvas.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { FlowEmits, FlowProps } from '@vue-flow/core'
+import type { FlowEmits, FlowProps, FlowSlots } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
 import { VueFlow } from '@vue-flow/core'
 import { useForwardPropsEmits } from 'reka-ui'
@@ -17,14 +17,17 @@ const props = withDefaults(defineProps<FlowProps>(), {
 })
 
 const emits = defineEmits<FlowEmits>()
-
+const slots = defineSlots<FlowSlots>()
 const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
   <VueFlow data-slot="canvas" v-bind="forwarded">
     <Background />
     <Controls />
-    <slot />
+
+    <template v-if="slots['connection-line']" #connection-line="connectionLineProps">
+      <slot name="connection-line" v-bind="connectionLineProps" />
+    </template>
   </VueFlow>
 </template>

packages/elements/src/connection/Connection.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { ConnectionLineProps } from '@vue-flow/core'
+import { computed } from 'vue'
+
+const props = defineProps<ConnectionLineProps>()
+
+const HALF = 0.5
+
+const pathD = computed(() => {
+  const { sourceX, sourceY, targetX, targetY } = props
+  const controlX1 = sourceX + (targetX - sourceX) * HALF
+  const controlX2 = sourceX + (targetX - sourceX) * HALF
+  return `M${sourceX},${sourceY} C ${controlX1},${sourceY} ${controlX2},${targetY} ${targetX},${targetY}`
+})
+</script>
+
+<template>
+  <g>
+    <path
+      class="animated"
+      fill="none"
+      stroke="var(--color-ring)"
+      :stroke-width="1"
+      :d="pathD"
+    />
+
+    <circle
+      :cx="targetX"
+      :cy="targetY"
+      fill="#fff"
+      :r="3"
+      stroke="var(--color-ring)"
+      :stroke-width="1"
+    />
+  </g>
+</template>

packages/elements/src/connection/index.ts

@@ -0,0 +1 @@
+export { default as Connection } from './Connection.vue'

packages/examples/src/workflow.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Edge, Node } from '@vue-flow/core'
 import { Canvas } from '@repo/elements/canvas'
+import { Connection } from '@repo/elements/connection'
 import { nanoid } from 'nanoid'
 import { ref } from 'vue'
 
@@ -33,6 +34,10 @@ const edges = ref<Edge[]>([
 
 <template>
   <div style="height: 400px">
-    <Canvas :nodes="nodes" :edges="edges" />
+    <Canvas :nodes="nodes" :edges="edges">
+      <template #connection-line="connectionLineProps">
+        <Connection v-bind="connectionLineProps" />
+      </template>
+    </Canvas>
   </div>
 </template>