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(() => {
// set up handle bounds if they don't exist yet (i.e. the handle was added after the node has already been mounted)
const existingBounds = node.handleBounds[type.value]?.find((b) => b.id === handleId)
if (!vueFlowRef || existingBounds) return
// 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)
until(() => node.initialized)
.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 { m22: zoom } = new window.DOMMatrixReadOnly(style.transform)
const handleBounds = handle.value.getBoundingClientRect()
const nextBounds = {
id: handleId,
position,
x: (handleBounds.left - nodeBounds.left) / zoom,
y: (handleBounds.top - nodeBounds.top) / zoom,
...getDimensions(handle.value),
}
const style = window.getComputedStyle(viewportNode)
const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform)
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>