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

chore(core): remove reactivity transform from handle

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-04-01 00:35:45 +02:00
committed by Braks
parent c4f287c574
commit d0ac0b66ea
1 changed files with 36 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/Handle/Handle.vue
+36 -34
View File
@@ -3,17 +3,17 @@ import { isFunction, isString } from '@vueuse/core'
import type { Position } from '../../types'
import type { HandleProps } from '../../types/handle'
const { position = 'top' as Position, connectable = true, id, isValidConnection, ...props } = defineProps<HandleProps>()
const { position = 'top' as Position, connectable, id, isValidConnection, ...props } = defineProps<HandleProps>()
const type = toRef(props, 'type', 'source')
const { connectionStartHandle, vueFlowRef, nodesConnectable } = $(useVueFlow())
const { connectionStartHandle, vueFlowRef, nodesConnectable, noDragClassName } = useVueFlow()
const { id: nodeId, node, nodeEl, connectedEdges } = useNode()
const handle = ref<HTMLDivElement>()
const handleId = $computed(() => id ?? `${nodeId}__handle-${position}`)
const handleId = computed(() => id ?? `${nodeId}__handle-${position}`)
const { handlePointerDown, handleClick } = useHandle({
nodeId,
@@ -25,50 +25,52 @@ const { handlePointerDown, handleClick } = useHandle({
const isConnectable = computed(() => {
if (isString(connectable) && connectable === 'single') {
return !connectedEdges.value.some((edge) => {
const handle = edge[`${type.value}Handle`]
const id = edge[`${type.value}Handle`]
if (edge[type.value] !== nodeId) return false
if (edge[type.value] !== nodeId) {
return false
}
return handle ? handle === handleId : true
return id ? id === handleId.value : true
})
} else if (isFunction(connectable)) {
}
if (isFunction(connectable)) {
return connectable(node, connectedEdges.value)
}
return isDef(connectable) ? connectable : nodesConnectable
return isDef(connectable) ? connectable : nodesConnectable.value
})
onMounted(() => {
// 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)
// 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, { flush: 'post' })
.then(() => {
const existingBounds = node.handleBounds[type.value]?.find((b) => b.id === handleId.value)
if (!vueFlowRef || existingBounds) return
if (!vueFlowRef.value || existingBounds) return
const viewportNode = vueFlowRef.querySelector('.vue-flow__transformationpane')
const viewportNode = vueFlowRef.value.querySelector('.vue-flow__transformationpane')
if (!nodeEl || !handle.value || !viewportNode || !handleId) return
if (!nodeEl || !handle.value || !viewportNode || !handleId.value) return
const nodeBounds = nodeEl.value.getBoundingClientRect()
const nodeBounds = nodeEl.value.getBoundingClientRect()
const handleBounds = handle.value.getBoundingClientRect()
const handleBounds = handle.value.getBoundingClientRect()
const style = window.getComputedStyle(viewportNode)
const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform)
const style = window.getComputedStyle(viewportNode)
const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform)
const nextBounds = {
id: handleId,
position,
x: (handleBounds.left - nodeBounds.left) / zoom,
y: (handleBounds.top - nodeBounds.top) / zoom,
...getDimensions(handle.value),
}
const nextBounds = {
id: handleId.value,
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]
})
})
node.handleBounds[type.value] = [...(node.handleBounds[type.value] ?? []), nextBounds]
})
</script>
<script lang="ts">
@@ -85,13 +87,13 @@ export default {
:data-handleid="handleId"
:data-nodeid="nodeId"
:data-handlepos="position"
class="vue-flow__handle nodrag"
class="vue-flow__handle"
:class="[
`vue-flow__handle-${position}`,
`vue-flow__handle-${handleId}`,
noDragClassName,
type,
{
source: type !== 'target',
target: type === 'target',
connectable: isConnectable,
connecting:
connectionStartHandle &&