From 60fefab45b16ba26dd5b57db68c0ffc3d70394ed Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 31 Mar 2023 22:56:42 +0200
Subject: [PATCH] chore(examples): cleanup

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 examples/vite/src/Basic/Basic.vue             |  2 +-
 .../vite/src/CustomNode/ColorSelectorNode.vue |  1 +
 examples/vite/src/CustomNode/CustomNode.vue   | 29 +++++++++++++------
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/examples/vite/src/Basic/Basic.vue b/examples/vite/src/Basic/Basic.vue
index a556535d..c09fef6a 100644
--- a/examples/vite/src/Basic/Basic.vue
+++ b/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,
diff --git a/examples/vite/src/CustomNode/ColorSelectorNode.vue b/examples/vite/src/CustomNode/ColorSelectorNode.vue
index a5e680f8..9e1754a9 100644
--- a/examples/vite/src/CustomNode/ColorSelectorNode.vue
+++ b/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' }
diff --git a/examples/vite/src/CustomNode/CustomNode.vue b/examples/vite/src/CustomNode/CustomNode.vue
index e6eb7341..37bdb856 100644
--- a/examples/vite/src/CustomNode/CustomNode.vue
+++ b/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
   })
 }