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

regression: calculate handle bounds regardless of update

Browse Source
This commit is contained in:
Braks
2022-04-04 21:42:48 +02:00
parent 9a47c15662
commit 0e48b77e14
2 changed files with 36 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Edges/EdgeWrapper.vue
+28 -29
View File
@@ -70,35 +70,33 @@ const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.p
const edgeUpdaterRadius = computed(() => store.edgeUpdaterRadius) const edgeUpdaterRadius = computed(() => store.edgeUpdaterRadius)
onMounted(() => { onMounted(() => {
nextTick(() => { watch(
watch( [
[ sourcePosition,
sourcePosition, targetPosition,
targetPosition, () => edge.value.sourceNode.position,
() => edge.value.sourceNode.position, () => edge.value.targetNode.position,
() => edge.value.targetNode.position, () => edge.value.sourceNode.computedPosition,
() => edge.value.sourceNode.computedPosition, () => edge.value.targetNode.computedPosition,
() => edge.value.targetNode.computedPosition, () => edge.value.sourceNode.dimensions,
() => edge.value.sourceNode.dimensions, () => edge.value.targetNode.dimensions,
() => edge.value.targetNode.dimensions, ],
], () => {
() => { const { sourceX, sourceY, targetY, targetX } = getEdgePositions(
const { sourceX, sourceY, targetY, targetX } = getEdgePositions( edge.value.sourceNode,
edge.value.sourceNode, sourceHandle.value,
sourceHandle.value, sourcePosition.value,
sourcePosition.value, edge.value.targetNode,
edge.value.targetNode, targetHandle.value,
targetHandle.value, targetPosition.value,
targetPosition.value, )
) if (edge.value.sourceX !== sourceX) edge.value.sourceX = sourceX
if (edge.value.sourceX !== sourceX) edge.value.sourceX = sourceX if (edge.value.sourceY !== sourceY) edge.value.sourceY = sourceY
if (edge.value.sourceY !== sourceY) edge.value.sourceY = sourceY if (edge.value.targetX !== targetX) edge.value.targetX = targetX
if (edge.value.targetX !== targetX) edge.value.targetX = targetX if (edge.value.targetY !== targetY) edge.value.targetY = targetY
if (edge.value.targetY !== targetY) edge.value.targetY = targetY },
}, { immediate: true, deep: true },
{ immediate: true, deep: true }, )
)
})
}) })
</script> </script>
<script lang="ts"> <script lang="ts">
@@ -112,6 +110,7 @@ export default {
:class="[ :class="[
'vue-flow__edge', 'vue-flow__edge',
`vue-flow__edge-${edge.type || 'default'}`, `vue-flow__edge-${edge.type || 'default'}`,
store.noPanClassName,
{ {
selected: edge.selected, selected: edge.selected,
animated: edge.animated, animated: edge.animated,
src/store/actions.ts
+8 -9
View File
@@ -1,19 +1,19 @@
import useState from './state' import useState from './state'
import { import {
CoordinateExtent,
EdgeChange,
Actions, Actions,
ComputedGetters, ComputedGetters,
State, Connection,
CoordinateExtent,
Edge,
EdgeChange,
Getters,
GraphEdge,
GraphNode, GraphNode,
Node, Node,
NodeChange, NodeChange,
NodeDimensionChange, NodeDimensionChange,
Edge,
Connection,
GraphEdge,
NodePositionChange, NodePositionChange,
Getters, State,
} from '~/types' } from '~/types'
import { import {
applyChanges, applyChanges,
@@ -149,11 +149,10 @@ export default (state: State, getters: ComputedGetters): Actions => {
dimensions.height && dimensions.height &&
(node.dimensions.width !== dimensions.width || node.dimensions.height !== dimensions.height || update.forceUpdate) (node.dimensions.width !== dimensions.width || node.dimensions.height !== dimensions.height || update.forceUpdate)
) )
node.handleBounds = getHandleBounds(update.nodeElement, state.transform[2])
if (doUpdate) { if (doUpdate) {
const handleBounds = getHandleBounds(update.nodeElement, state.transform[2])
node.dimensions = dimensions node.dimensions = dimensions
node.handleBounds = handleBounds
res.push({ res.push({
id: node.id, id: node.id,