refactor(nodes): add computed attr for width/height and absolute position

packages/react/src/components/ConnectionLine/index.tsx

@@ -65,10 +65,10 @@ const ConnectionLine = ({
   }
 
   const fromHandle = handleId ? handleBounds.find((d) => d.id === handleId) : handleBounds[0];
-  const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.width ?? 0) / 2;
-  const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.height ?? 0;
-  const fromX = (fromNode.positionAbsolute?.x ?? 0) + fromHandleX;
-  const fromY = (fromNode.positionAbsolute?.y ?? 0) + fromHandleY;
+  const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.computed?.width ?? 0) / 2;
+  const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.computed?.height ?? 0;
+  const fromX = (fromNode.computed?.positionAbsolute?.x ?? 0) + fromHandleX;
+  const fromY = (fromNode.computed?.positionAbsolute?.y ?? 0) + fromHandleY;
   const fromPosition = fromHandle?.position;
   const toPosition = fromPosition ? oppositePosition[fromPosition] : null;
 

packages/react/src/components/Nodes/wrapNode.tsx

@@ -52,8 +52,8 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
     disableKeyboardA11y,
     ariaLabel,
     rfId,
-    sizeWidth,
-    sizeHeight,
+    width,
+    height,
   }: WrapNodeProps) => {
     const store = useStoreApi();
     const nodeRef = useRef<HTMLDivElement>(null);
@@ -186,8 +186,8 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
           transform: `translate(${xPosOrigin}px,${yPosOrigin}px)`,
           pointerEvents: hasPointerEvents ? 'all' : 'none',
           visibility: initialized ? 'visible' : 'hidden',
-          width: sizeWidth,
-          height: sizeHeight,
+          width,
+          height,
           ...style,
         }}
         data-id={id}