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

chore(docs): update example styles (#1469)

Browse Source 
* chore(docs): update basic example styles

* chore(docs): update confirm delete example styles

* chore(docs): update dnd example styles

* chore(docs): update hidden example

* chore(docs): update update node example

* chore(docs): update node toolbar example styles

* chore(docs): update transition example styles

* chore(docs): cleanup basic example els

* chore(docs): cleanup examples
This commit is contained in:
Braks
2024-06-10 23:36:55 +02:00
committed by braks
parent 5dc8711a6b
commit d71de0a92d
34 changed files with 528 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,21 +6,41 @@ 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, updateNode } = useVueFlow()
const { onNodeDrag, getIntersectingNodes, isNodeIntersecting: __, updateNode } = useVueFlow()
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 } },
{
id: '1',
data: { label: 'Node 1' },
position: { x: 0, y: 0 },
},
{
id: '2',
data: { label: 'Node 2' },
position: { x: 400, y: 400 },
},
{
id: '3',
data: { label: 'Node 3' },
position: { x: 400, y: 0 },
},
{
id: '4',
data: { label: 'Node 4' },
position: { x: 0, y: 400 },
},
{
id: '5',
style: { borderColor: 'red' },
data: { label: 'Drag me over another node' },
position: { x: 200, y: 200 },
},
])
onNodeDrag(({ intersections }) => {
const intersectionIds = intersections.map((intersection) => intersection.id)
onNodeDrag(({ node }) => {
const intersectionIds = getIntersectingNodes(node).map((intersection) => intersection.id)
for (const node of getNodes.value) {
for (const node of nodes.value) {
const isIntersecting = intersectionIds.includes(node.id)
updateNode(node.id, { class: isIntersecting ? 'intersecting' : '' })