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

refactor(core): replace until watcher with onMounted in handle cmp (#1488)

Browse Source
This commit is contained in:
Braks
2024-06-19 11:49:30 +02:00
parent 04524d27fd
commit cf32d59074
1 changed files with 29 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
packages/core/src/components/Handle/Handle.vue
View File

@@ -1,6 +1,5 @@
<script lang="ts" setup>
import { until } from '@vueuse/core'
import { computed, onUnmounted, ref, toRef } from 'vue'
import { computed, onMounted, onUnmounted, ref, toRef } from 'vue'
import type { HandleProps } from '../../types'
import { Position } from '../../types'
import { useHandle, useNode, useVueFlow } from '../../composables'
@@ -97,38 +96,42 @@ const isConnectable = computed(() => {
// todo: remove this and have users handle this themselves using `updateNodeInternals`
// 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.dimensions.width && !!node.dimensions.height)
.toBe(true, { flush: 'post' })
.then(() => {
const existingBounds = node.handleBounds[type.value]?.find((b) => b.id === handleId)
onMounted(() => {
// if the node isn't initialized yet, we can't set up the handle bounds
// the handle bounds will be automatically set up when the node is initialized (`updateNodeDimensions`)
if (!node.dimensions.width || !node.dimensions.height) {
return
}
if (!vueFlowRef.value || existingBounds) {
return
}
const existingBounds = node.handleBounds[type.value]?.find((b) => b.id === handleId)
const viewportNode = vueFlowRef.value.querySelector('.vue-flow__transformationpane')
if (!vueFlowRef.value || existingBounds) {
return
}
if (!nodeEl.value || !handle.value || !viewportNode || !handleId) {
return
}
const viewportNode = vueFlowRef.value.querySelector('.vue-flow__transformationpane')
const nodeBounds = nodeEl.value.getBoundingClientRect()
if (!nodeEl.value || !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]
})
onUnmounted(() => {
// clean up node internals