diff --git a/package/src/components/Nodes/NodeWrapper.vue b/package/src/components/Nodes/NodeWrapper.vue index 96d56cc1..3223fcfd 100644 --- a/package/src/components/Nodes/NodeWrapper.vue +++ b/package/src/components/Nodes/NodeWrapper.vue @@ -73,6 +73,8 @@ const onDragStop: DraggableEventListener = ({ event, data: { deltaX, deltaY } }) store.hooks.nodeDragStop.trigger({ event, node: node.value }) } +const size = ref>() + onMounted(() => { useResizeObserver(nodeElement, () => store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value, forceUpdate: true }]), @@ -82,6 +84,18 @@ onMounted(() => { nextTick(() => store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value }])), ) + const { width, height } = nodeElement.value.getBoundingClientRect() + + const hasCustomSize = node.value.dimensions && node.value.dimensions.width !== 0 && node.value.dimensions.height !== 0 + const widthMatch = width === node.value.dimensions.width + const heightMatch = height === node.value.dimensions.height + + if (hasCustomSize && (!widthMatch || !heightMatch)) { + size.value = {} + if (!widthMatch) size.value!.width = `${node.value.dimensions.width}px` + if (!heightMatch) size.value!.height = `${node.value.dimensions.height}px` + } + store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value }]) }) @@ -179,6 +193,7 @@ export default { zIndex: node.computedPosition.z, transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`, pointerEvents: props.selectable || props.draggable ? 'all' : 'none', + ...size, ...getStyle(), }" :data-id="node.id" diff --git a/package/src/types/node.ts b/package/src/types/node.ts index 51e833e7..0dff398e 100644 --- a/package/src/types/node.ts +++ b/package/src/types/node.ts @@ -35,6 +35,7 @@ export interface Node extends Element { expandParent?: boolean /** define node as a child node by setting a parent node id */ parentNode?: string + dimensions?: Partial } export interface GraphNode extends Node { @@ -54,7 +55,7 @@ export interface NodeProps { /** node DOM-element */ nodeElement: HTMLDivElement type: string - data: Data + data?: Data selected: boolean connectable: boolean /** absolute position in relation to parent elements + z-index */ diff --git a/package/src/utils/graph.ts b/package/src/utils/graph.ts index 1d69c776..20f302d5 100644 --- a/package/src/utils/graph.ts +++ b/package/src/utils/graph.ts @@ -87,7 +87,7 @@ export const parseNode = (node: Node, nodeExtent: CoordinateExtent, defaults?: P return { ...(defaults as GraphNode), - ...node, + ...(node as GraphNode), id: node.id.toString(), } }