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

update(edges): Use proper handle bounds

Browse Source
This commit is contained in:
Braks
2022-04-11 11:30:10 +02:00
parent 96c844a64c
commit bc88e18f22
3 changed files with 15 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package/src/components/Edges/EdgeWrapper.vue
+8 -11
View File
@@ -64,9 +64,9 @@ const targetNodeHandles = computed(() => {
return edge.value.targetNode.handleBounds.target
}
const targetBounds = edge.value.targetNode.handleBounds.target || []
const sourceBounds = edge.value.targetNode.handleBounds.source || []
return [...sourceBounds, ...targetBounds]
const targetBounds = edge.value.targetNode.handleBounds.target
const sourceBounds = edge.value.targetNode.handleBounds.source
return targetBounds ?? sourceBounds
})
const sourceNodeHandles = computed(() => {
@@ -74,17 +74,14 @@ const sourceNodeHandles = computed(() => {
return edge.value.sourceNode.handleBounds.source
}
const targetBounds = edge.value.sourceNode.handleBounds.target || []
const sourceBounds = edge.value.sourceNode.handleBounds.source || []
return [...sourceBounds, ...targetBounds]
const targetBounds = edge.value.sourceNode.handleBounds.target
const sourceBounds = edge.value.sourceNode.handleBounds.source
return sourceBounds ?? targetBounds
})
const sourceHandle = controlledComputed(
() => edge.value.sourceNode.handleBounds,
() => getHandle(sourceNodeHandles.value, edge.value.sourceHandle),
)
const sourceHandle = computed(() => getHandle(sourceNodeHandles.value, edge.value.sourceHandle))
const targetHandle = computed(() => getHandle(targetNodeHandles.value, edge.value.targetHandle))
const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.position : Position.Top))
package/src/components/Handle/Handle.vue
+6 -4
View File
@@ -1,10 +1,10 @@
<script lang="ts" setup>
import { useHandle, useVueFlow } from '../../composables'
import { Position } from '../../types'
import { ConnectionMode, Position } from '../../types'
import { NodeId } from '../../context'
import type { HandleProps } from '../../types/handle'
const { id, hooks, connectionStartHandle } = useVueFlow()
const { id, hooks, connectionStartHandle, connectionMode } = useVueFlow()
const props = withDefaults(defineProps<HandleProps>(), {
type: 'source',
position: 'top' as Position,
@@ -13,11 +13,13 @@ const props = withDefaults(defineProps<HandleProps>(), {
const nodeId = inject(NodeId, '')
const handleId = props.id ?? `${nodeId}__handle-${props.position}`
const handleId = computed(() =>
props.id ?? connectionMode.value === ConnectionMode.Strict ? null : `${nodeId}__handle-${props.position}`,
)
const { onMouseDown, onClick } = useHandle()
const onMouseDownHandler = (event: MouseEvent) =>
onMouseDown(event, handleId, nodeId, props.type === 'target', props.isValidConnection, undefined)
onMouseDown(event, handleId.value, nodeId, props.type === 'target', props.isValidConnection, undefined)
const onClickHandler = (event: MouseEvent) => onClick(event, props.id ?? null, nodeId, props.type, props.isValidConnection)
</script>
<script lang="ts">