feat(nodes): Allow pre-defined dimensions of a node

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<Record<string, string>>()
+
 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"

package/src/types/node.ts

@@ -35,6 +35,7 @@ export interface Node<Data = ElementData> extends Element<Data> {
   expandParent?: boolean
   /** define node as a child node by setting a parent node id */
   parentNode?: string
+  dimensions?: Partial<Dimensions>
 }
 
 export interface GraphNode<Data = ElementData> extends Node<Data> {
@@ -54,7 +55,7 @@ export interface NodeProps<Data = ElementData> {
   /** node DOM-element */
   nodeElement: HTMLDivElement
   type: string
-  data: Data
+  data?: Data
   selected: boolean
   connectable: boolean
   /** absolute position in relation to parent elements + z-index */

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(),
   }
 }