From d73259706551411db855f7a51ba7811879609f71 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 3 Feb 2024 20:07:32 +0100
Subject: [PATCH] chore(docs): update intersection example

---
 docs/examples/index.ts                        |  3 +--
 docs/examples/intersection/App.vue            | 24 ++++++++++++-------
 docs/examples/intersection/index.ts           |  1 -
 .../examples/intersection/initial-elements.js |  7 ------
 4 files changed, 16 insertions(+), 19 deletions(-)
 delete mode 100644 docs/examples/intersection/initial-elements.js

diff --git a/docs/examples/index.ts b/docs/examples/index.ts
index d619cbed..8fb1c3fe 100644
--- a/docs/examples/index.ts
+++ b/docs/examples/index.ts
@@ -14,7 +14,7 @@ import { InteractionApp, InteractionCSS, InteractionControls } from './interacti
 import { MultiApp, MultiCSS, MultiFlow } from './multi'
 import { TeleportApp, TeleportCSS, TeleportSidebar, TeleportableNode, TeleportableUseTransition } from './teleport'
 import { TransitionApp, TransitionCSS, TransitionEdge } from './transition'
-import { IntersectionApp, IntersectionCSS, IntersectionElements } from './intersection'
+import { IntersectionApp, IntersectionCSS } from './intersection'
 import { SnapToHandleApp, SnappableConnectionLine } from './connection-radius'
 import { NodeResizerApp, ResizableNode } from './node-resizer'
 import { ToolbarApp, ToolbarNode } from './node-toolbar'
@@ -109,7 +109,6 @@ export const exampleImports = {
   },
   intersection: {
     'App.vue': IntersectionApp,
-    'initial-elements.js': IntersectionElements,
     'style.css': IntersectionCSS,
   },
   snappable: {
diff --git a/docs/examples/intersection/App.vue b/docs/examples/intersection/App.vue
index 7305257e..54f9d74f 100644
--- a/docs/examples/intersection/App.vue
+++ b/docs/examples/intersection/App.vue
@@ -1,27 +1,33 @@
 <script setup>
-import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
-import { initialElements } from './initial-elements.js'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 
 /**
  * You can either use `getIntersectingNodes` to check if a given node intersects with others
  * or `isNodeIntersecting` to check if a node is intersecting with a given area
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { onNodeDrag, getIntersectingNodes, isNodeIntersecting, getNodes } = useVueFlow()
+const { onNodeDrag, getIntersectingNodes, isNodeIntersecting, getNodes, updateNode } = useVueFlow()
 
-const elements = ref(initialElements)
+const nodes = ref([
+  { id: '1', label: 'Node 1', position: { x: 0, y: 0 } },
+  { id: '2', label: 'Node 2', position: { x: 400, y: 400 } },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 0 } },
+  { id: '4', label: 'Node 4', position: { x: 0, y: 400 } },
+  { id: '5', style: { borderColor: 'red' }, label: 'Drag me over another node', position: { x: 200, y: 200 } },
+])
 
 onNodeDrag(({ intersections }) => {
   const intersectionIds = intersections.map((intersection) => intersection.id)
 
-  getNodes.value.forEach((n) => {
-    const isIntersecting = intersectionIds.includes(n.id)
-    n.class = isIntersecting ? 'intersecting' : ''
-  })
+  for (const node of getNodes.value) {
+    const isIntersecting = intersectionIds.includes(node.id)
+
+    updateNode(node.id, { class: isIntersecting ? 'intersecting' : '' })
+  }
 })
 </script>
 
 <template>
-  <VueFlow v-model="elements" fit-view-on-init :default-viewport="{ zoom: 1.5 }" :min-zoom="0.2" :max-zoom="4" />
+  <VueFlow :nodes="nodes" fit-view-on-init />
 </template>
diff --git a/docs/examples/intersection/index.ts b/docs/examples/intersection/index.ts
index eaccae3d..981a712c 100644
--- a/docs/examples/intersection/index.ts
+++ b/docs/examples/intersection/index.ts
@@ -1,3 +1,2 @@
 export { default as IntersectionApp } from './App.vue?raw'
-export { default as IntersectionElements } from './initial-elements.js?raw'
 export { default as IntersectionCSS } from './style.css?inline'
diff --git a/docs/examples/intersection/initial-elements.js b/docs/examples/intersection/initial-elements.js
deleted file mode 100644
index ce06a3d5..00000000
--- a/docs/examples/intersection/initial-elements.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export const initialElements = [
-  { id: '1', label: 'Node 1', position: { x: 0, y: 0 } },
-  { id: '2', label: 'Node 2', position: { x: 400, y: 400 } },
-  { id: '3', label: 'Node 3', position: { x: 400, y: 0 } },
-  { id: '4', label: 'Node 4', position: { x: 0, y: 400 } },
-  { id: '5', style: { borderColor: 'red' }, label: 'Drag me over another node', position: { x: 200, y: 200 } },
-]