5dc276af52
feat: add optional chaining to prevent types errors and add an example of helper lines (#1904) * docs: code errors in "Updating Node Data" (#1900) fix(docs): Example of fixing code errors in "Updating Node Data" * fix: add optional chaining to prevent errors in link filtering * feat: add an example of helper lines * refactor: In the HelperLines example, replace the observer with dimensions --------- Co-authored-by: Charles Lee <114982593+rookie-orange@users.noreply.github.com> Co-authored-by: J <gongjie0422@163.com>
47 lines
1.7 KiB
Vue
47 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import type { GraphNode, Node, NodeChange } from '@vue-flow/core'
|
|
import { VueFlow, useVueFlow } from '@vue-flow/core'
|
|
import { ref } from 'vue'
|
|
import HelperLines from './HelperLines.vue'
|
|
import { getHelperLines } from './utils'
|
|
import { initialNodes } from './initialElements'
|
|
|
|
const { applyNodeChanges } = useVueFlow()
|
|
|
|
const nodes = ref<Node[]>(initialNodes)
|
|
|
|
const helperLineHorizontal = ref<number | undefined>(undefined)
|
|
const helperLineVertical = ref<number | undefined>(undefined)
|
|
|
|
function updateHelperLines(changes: NodeChange[], nodes: GraphNode[]) {
|
|
helperLineHorizontal.value = undefined
|
|
helperLineVertical.value = undefined
|
|
|
|
if (changes.length === 1 && changes[0].type === 'position' && changes[0].dragging && changes[0].position) {
|
|
const helperLines = getHelperLines(changes[0], nodes)
|
|
|
|
// if we have a helper line, we snap the node to the helper line position
|
|
// this is being done by manipulating the node position inside the change object
|
|
changes[0].position.x = helperLines.snapPosition.x ?? changes[0].position.x
|
|
changes[0].position.y = helperLines.snapPosition.y ?? changes[0].position.y
|
|
|
|
// if helper lines are returned, we set them so that they can be displayed
|
|
helperLineHorizontal.value = helperLines.horizontal
|
|
helperLineVertical.value = helperLines.vertical
|
|
}
|
|
|
|
return changes
|
|
}
|
|
|
|
function onNodesChange(changes: NodeChange[]) {
|
|
const updatedChanges = updateHelperLines(changes, nodes.value as GraphNode[])
|
|
nodes.value = applyNodeChanges(updatedChanges)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<VueFlow :nodes="nodes" fit-view-on-init @nodes-change="onNodesChange">
|
|
<HelperLines :horizontal="helperLineHorizontal" :vertical="helperLineVertical" />
|
|
</VueFlow>
|
|
</template>
|