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

fix(core): await node init to add handle bounds in Handle

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2022-12-14 12:44:36 +01:00
committed by Braks
parent 8734a16ae6
commit b411c1e411
1 changed files with 22 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/Handle/Handle.vue
+22 -17
View File
@@ -39,30 +39,35 @@ const isConnectable = computed(() => {
}) })
onMounted(() => { onMounted(() => {
// set up handle bounds if they don't exist yet (i.e. the handle was added after the node has already been mounted) // set up handle bounds if they don't exist yet and the node has been initialized (i.e. the handle was added after the node has already been mounted)
const existingBounds = node.handleBounds[type.value]?.find((b) => b.id === handleId) until(() => node.initialized)
if (!vueFlowRef || existingBounds) return .toBe(true)
.then(() => {
const existingBounds = node.handleBounds[type.value]?.find((b) => b.id === handleId)
const viewportNode = vueFlowRef.querySelector('.vue-flow__transformationpane') if (!vueFlowRef || existingBounds) return
if (!nodeEl || !handle.value || !viewportNode) return const viewportNode = vueFlowRef.querySelector('.vue-flow__transformationpane')
const nodeBounds = nodeEl.value.getBoundingClientRect() if (!nodeEl || !handle.value || !viewportNode || !handleId) return
const handleBounds = handle.value.getBoundingClientRect() const nodeBounds = nodeEl.value.getBoundingClientRect()
const style = window.getComputedStyle(viewportNode) const handleBounds = handle.value.getBoundingClientRect()
const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform)
const nextBounds = { const style = window.getComputedStyle(viewportNode)
id: handleId, const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform)
position,
x: (handleBounds.left - nodeBounds.left) / zoom,
y: (handleBounds.top - nodeBounds.top) / zoom,
...getDimensions(handle.value),
}
node.handleBounds[type.value] = [...(node.handleBounds[type.value] ?? []), nextBounds] const nextBounds = {
id: handleId,
position,
x: (handleBounds.left - nodeBounds.left) / zoom,
y: (handleBounds.top - nodeBounds.top) / zoom,
...getDimensions(handle.value),
}
node.handleBounds[type.value] = [...(node.handleBounds[type.value] ?? []), nextBounds]
})
}) })
</script> </script>