alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(docs): update intersection example

Browse Source
This commit is contained in:
braks
2024-02-03 20:07:32 +01:00
committed by Braks
parent 11f92f4a4a
commit d732597065
4 changed files with 16 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/examples/intersection/App.vue
View File

@@ -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>

1
docs/examples/intersection/index.ts
View File

@@ -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'

7
docs/examples/intersection/initial-elements.js
View File

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