chore(nodes): flush watcher on post hook

This commit is contained in:
Braks
2022-04-21 22:30:09 +02:00
parent 04fcd082d1
commit 4e3f4541a1

View File

@@ -17,11 +17,21 @@ interface NodeWrapperProps {
const props = defineProps<NodeWrapperProps>()
const { store } = useVueFlow()
const node = useVModel(props, 'node')
provide(NodeId, props.id)
const node = useVModel(props, 'node')
const nodeElement = ref()
const { scale, onDrag, onDragStart, onDragStop } = useDraggableCore(nodeElement, {
handle: node.value.dragHandle,
disabled: !props.draggable,
grid: props.snapGrid,
cancel: `.${store.noDragClassName}`,
enableUserSelectHack: false,
scale: store.viewport.zoom,
})
provide(NodeId, props.id)
const onMouseEnterHandler = () =>
node.value.dragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: node.value }))
const onMouseMoveHandler = () =>
@@ -49,8 +59,12 @@ onMounted(() => {
store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value, forceUpdate: true }]),
)
watch([() => node.value.type, () => node.value.sourcePosition, () => node.value.targetPosition], () =>
nextTick(() => store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value }])),
watch(
[() => node.value.type, () => node.value.sourcePosition, () => node.value.targetPosition],
() => {
store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value }])
},
{ flush: 'post' },
)
store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value, forceUpdate: true }])
@@ -114,22 +128,13 @@ const type = computed(() => {
return slot
})
const { scale, onDrag, onDragStart, onDragStop } = useDraggableCore(nodeElement, {
handle: node.value.dragHandle,
disabled: !props.draggable,
grid: props.snapGrid,
cancel: `.${store.noDragClassName}`,
enableUserSelectHack: false,
scale: store.viewport.zoom,
})
onMounted(() => {
debouncedWatch(
() => store.viewport.zoom,
() => {
scale.value = store.viewport.zoom
},
{ debounce: 5 },
{ debounce: 5, flush: 'post' },
)
})