chore(docs): update intersection example

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: {

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) => {
+  for (const node of getNodes.value) {
-    const isIntersecting = intersectionIds.includes(n.id)
+    const isIntersecting = intersectionIds.includes(node.id)
-    n.class = isIntersecting ? 'intersecting' : ''
+
-  })
+    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>

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'

docs/examples/intersection/initial-elements.js

@@ -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 } },
-]