chore(examples): cleanup

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

examples/vite/src/Basic/Basic.vue

@@ -12,7 +12,7 @@ const elements = ref<Elements>([
   { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
   { id: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
   { id: 'e1-2', source: '1', target: '2', animated: true },
-  { id: 'e1-3', source: '1', target: '5' },
+  { id: 'e1-3', source: '1', target: '3' },
 ])
 const { onNodeDragStop, onEdgeClick, onConnect, addEdges, setTransform, toObject } = useVueFlow({
   minZoom: 0.2,

examples/vite/src/CustomNode/ColorSelectorNode.vue

@@ -11,6 +11,7 @@ interface Data {
 interface ColorSelectorNodeProps extends NodeProps<Data, {}, 'selectorNode'> {
   data: Data
 }
+
 const props = defineProps<ColorSelectorNodeProps>()
 
 const targetHandleStyle: CSSProperties = { background: '#555' }

examples/vite/src/CustomNode/CustomNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Elements, Node, SnapGrid } from '@vue-flow/core'
-import { ConnectionMode, Position, VueFlow, isEdge, useVueFlow } from '@vue-flow/core'
+import { Position, VueFlow, isEdge, useVueFlow } from '@vue-flow/core'
 
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
@@ -24,7 +24,6 @@ const elements = ref<Elements>([
     type: 'selectorNode',
     data: { onChange, color: bgColor },
     style: { border: '1px solid #777', padding: '10px' },
-    parentNode: '1',
     position: { x: 250, y: 50 },
   },
   {
@@ -48,7 +47,6 @@ const elements = ref<Elements>([
 ])
 
 useVueFlow({
-  connectionMode: ConnectionMode.Loose,
   connectionLineOptions: {
     style: connectionLineStyle,
   },
@@ -57,19 +55,32 @@ useVueFlow({
 })
 
 function nodeStroke(n: Node) {
-  if (n.type === 'input') return '#0041d0'
-  if (n.type === 'selectorNode') return bgColor.value
-  if (n.type === 'output') return '#ff0072'
-  return '#eee'
+  switch (n.type) {
+    case 'selectorNode':
+      return bgColor.value
+    case 'input':
+      return '#0041d0'
+    case 'output':
+      return '#ff0072'
+    default:
+      return '#eee'
+  }
 }
+
 function nodeColor(n: Node) {
-  if (n.type === 'selectorNode') return bgColor.value
+  if (n.type === 'selectorNode') {
+    return bgColor.value
+  }
+
   return '#fff'
 }
 
 function onChange(event: InputEvent) {
   elements.value.forEach((e) => {
-    if (isEdge(e) || e.id !== '2') return e
+    if (isEdge(e) || e.id !== '2') {
+      return e
+    }
+
     bgColor.value = (event.target as HTMLInputElement).value
   })
 }