chore(examples): cleanup easy connect example

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
bcakmakoglu · Jan 3, 2025 · 9434e94 · 9434e94
1 parent 4e8c099
commit 9434e94
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 41 deletions.
diff --git a/examples/vite/src/EasyConnect/EasyConnect.vue b/examples/vite/src/EasyConnect/EasyConnect.vue
@@ -1,12 +1,10 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { Background } from '@vue-flow/background'
-import { Controls } from '@vue-flow/controls'
-import { MiniMap } from '@vue-flow/minimap'
-import type { Elements } from '@vue-flow/core'
+import type { Node } from '@vue-flow/core'
 import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
 import CustomNode from './CustomNode.vue'
-import CustomConnectionLine from './CustomConnectionLine.vue'
+import FloatingConnectionLine from './FloatingConnectionLine.vue'
 import FloatingEdge from './FloatingEdge.vue'
 
 const { onConnect, addEdges } = useVueFlow()
@@ -20,7 +18,7 @@ const defaultEdgeOptions = {
   },
 }
 
-const elements = ref<Elements>([
+const nodes = ref<Node[]>([
   {
     id: '1',
     type: 'custom',
@@ -43,37 +41,31 @@ const elements = ref<Elements>([
   },
 ])
 
+const edges = ref([])
+
 onConnect(addEdges)
 </script>
 
 <template>
-  <div style="height: 100vh">
-    <VueFlow
-      v-model="elements"
-      :elevate-nodes-on-select="false"
-      class="vue-flow-basic-example"
-      :default-zoom="1.5"
-      :default-edge-options="defaultEdgeOptions"
-      :min-zoom="0.2"
-      :max-zoom="4"
-    >
-      <Background pattern-color="#aaa" :gap="8" />
-
-      <MiniMap />
-
-      <Controls />
+  <VueFlow
+    v-model:nodes="nodes"
+    v-model:edges="edges"
+    :elevate-nodes-on-select="false"
+    :default-edge-options="defaultEdgeOptions"
+    fit-view-on-init
+  >
+    <Background pattern-color="#aaa" :gap="8" />
 
-      <template #node-custom="props">
-        <CustomNode :id="props.id" />
-      </template>
+    <template #node-custom="props">
+      <CustomNode :id="props.id" />
+    </template>
 
-      <template #edge-floating="fProps">
-        <FloatingEdge v-bind="fProps" />
-      </template>
+    <template #edge-floating="fProps">
+      <FloatingEdge v-bind="fProps" />
+    </template>
 
-      <template #connection-line="cProps">
-        <CustomConnectionLine v-bind="cProps" />
-      </template>
-    </VueFlow>
-  </div>
+    <template #connection-line="cProps">
+      <FloatingConnectionLine v-bind="cProps" />
+    </template>
+  </VueFlow>
 </template>
diff --git a/.../src/EasyConnect/CustomConnectionLine.vue → ...rc/EasyConnect/FloatingConnectionLine.vue b/.../src/EasyConnect/CustomConnectionLine.vue → ...rc/EasyConnect/FloatingConnectionLine.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { GraphNode } from '@vue-flow/core'
-import { getStraightPath } from '@vue-flow/core'
+import type { ConnectionLineProps } from '@vue-flow/core'
+import { BaseEdge, getStraightPath } from '@vue-flow/core'
 import { computed } from 'vue'
 
-const props = defineProps<{ sourceNode: GraphNode; sourceX: number; sourceY: number; targetX: number; targetY: number }>()
+const props = defineProps<ConnectionLineProps>()
 
 const edgePath = computed(() =>
   getStraightPath({
@@ -15,13 +15,12 @@ const edgePath = computed(() =>
 
 <template>
   <g>
-    <path
+    <BaseEdge
       :style="{
         strokeWidth: 3,
         stroke: 'black',
       }"
-      fill="none"
-      :d="edgePath[0]"
+      :path="edgePath[0]"
     />
     <circle :cx="targetX" :cy="targetY" fill="black" :r="3" stroke="black" :stroke-width="1.5" />
   </g>

diff --git a/examples/vite/src/EasyConnect/FloatingEdge.vue b/examples/vite/src/EasyConnect/FloatingEdge.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { GraphNode } from '@vue-flow/core'
-import { getStraightPath } from '@vue-flow/core'
+import type { EdgeProps } from '@vue-flow/core'
+import { BaseEdge, getStraightPath } from '@vue-flow/core'
 import { computed } from 'vue'
 
 import { getEdgeParams } from './utils'
 
-const props = defineProps<{ id: string; sourceNode: GraphNode; targetNode: GraphNode; markerEnd: string; style: any }>()
+const props = defineProps<EdgeProps>()
 
 const edgeParams = computed(() => getEdgeParams(props.sourceNode, props.targetNode))
 
@@ -20,5 +20,5 @@ const edgePath = computed(() =>
 </script>
 
 <template>
-  <path :id="id" class="vue-flow__edge-path" :d="edgePath[0]" :marker-end="markerEnd" :style="style" />
+  <BaseEdge :id="id" :path="edgePath[0]" :marker-end="markerEnd" :style="style" />
 </template>