From 8f2d94ae556d5851bcc39442828c4a24a86ddd52 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 6 Apr 2022 15:28:58 +0200
Subject: [PATCH] refactor(nodes!): Remove dimensions option, replace with
 width and height

* Can be used to set width, height (similar to style prop but with easier access)
---
 package/src/components/Nodes/NodeWrapper.vue | 26 ++++++--------------
 package/src/types/node.ts                    | 19 +++++++++++++-
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/package/src/components/Nodes/NodeWrapper.vue b/package/src/components/Nodes/NodeWrapper.vue
index f857417f..f545d7f4 100644
--- a/package/src/components/Nodes/NodeWrapper.vue
+++ b/package/src/components/Nodes/NodeWrapper.vue
@@ -44,18 +44,6 @@ const onSelectNodeHandler = (event: MouseEvent) => {
 }
 
 onMounted(() => {
-  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`
-  }
-
   useResizeObserver(nodeElement, () =>
     store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value, forceUpdate: true }]),
   )
@@ -68,13 +56,15 @@ onMounted(() => {
 })
 
 const getClass = () => (node.value.class instanceof Function ? node.value.class(node.value) : node.value.class)
-const getStyle = () => (node.value.style instanceof Function ? node.value.style(node.value) : node.value.style)
+const getStyle = () => {
+  const styles = (node.value.style instanceof Function ? node.value.style(node.value) : node.value.style) || {}
+  const width = node.value.width instanceof Function ? node.value.width(node.value) : node.value.width
+  const height = node.value.height instanceof Function ? node.value.height(node.value) : node.value.height
+  if (width) styles.width = typeof width === 'string' ? width : `${width}px`
+  if (height) styles.height = typeof height === 'string' ? height : `${height}px`
 
-const scale = controlledComputed(
-  () => store.transform[2],
-  () => store.transform[2],
-)
-const scaleDebounced = debouncedRef(scale, 5)
+  return styles
+}
 
 watch(
   [() => node.value.position, () => store.getNode(node.value.parentNode!)],
diff --git a/package/src/types/node.ts b/package/src/types/node.ts
index 0ce0ff44..9e40a7d3 100644
--- a/package/src/types/node.ts
+++ b/package/src/types/node.ts
@@ -10,6 +10,10 @@ export type NodeHandleBounds = {
   target?: HandleElement[]
 }
 
+type WidthHeight = number | `${`parent` | string}(${`+` | `-`}${number})`
+type WidthFunc = <Data = ElementData>(node: GraphNode<Data>) => number | string | void
+type HeightFunc = <Data = ElementData>(node: GraphNode<Data>) => number | string | void
+
 export interface Node<Data = ElementData> extends Element<Data> {
   /** node position x, y */
   position: XYPosition
@@ -35,7 +39,20 @@ 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>
+
+  /**
+   * Fixed width of node, applied as style
+   * You can pass a number which will be used in pixel values (width: 300 -> width: 300px)
+   * or pass a string with units (width: `10rem` -> width: 10rem)
+   */
+  width?: number | string | WidthFunc
+
+  /**
+   * Fixed height of node, applied as style
+   * You can pass a number which will be used in pixel values (height: 300 -> height: 300px)
+   * or pass a string with units (height: `10rem` -> height: 10rem)
+   */
+  height?: number | string | HeightFunc
 }
 
 export interface GraphNode<Data = ElementData> extends Node<Data> {