feat(nodes, edges, store): Add updateNodeDimensions actions

* Returns new changes for updating node dimensions
* Add expandParent prop to nodes when parents should be expanded to fit the new child in them
*
This commit is contained in:
Braks
2022-04-04 21:42:48 +02:00
parent 5cc0da29c0
commit 0093df43a9
11 changed files with 244 additions and 96 deletions
+3 -13
View File
@@ -94,25 +94,15 @@ const onDragStop: DraggableEventListener = ({ event, data: { deltaX, deltaY } })
store.hooks.nodeDragStop.trigger({ event, node: node.value })
}
const updatePosition = (width: number, height: number) => {
const handleBounds = getHandleBounds(nodeElement.value, scale.value, id)
node.value.dimensions = {
width,
height,
}
node.value.handleBounds = handleBounds
}
const removeEmpty = (obj: Record<string, any>) => Object.fromEntries(Object.entries(obj).filter(([_, v]) => v != null))
store.updateNodePosition({ id: node.value.id, diff: { x: 0, y: 0 } })
onMounted(() => {
const dimensions = ref(getDimensions(nodeElement.value))
useResizeObserver(nodeElement, () => (dimensions.value = getDimensions(nodeElement.value)))
useResizeObserver(nodeElement, () => store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value, forceUpdate: true }]))
watch([() => node.value.type, () => node.value.sourcePosition, () => node.value.targetPosition], () =>
nextTick(() => updatePosition(dimensions.value.width, dimensions.value.height)),
nextTick(() => store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value }])),
)
watch(dimensions, ({ width: w, height: h }) => nextTick(() => w > 0 && h > 0 && updatePosition(w, h)), { immediate: true })
store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value }])
})
</script>
<script lang="ts">