From 24c999a335186cd457b38f99e4ef9590447134df Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 21 Nov 2023 15:18:35 +0100
Subject: [PATCH] chore(astro): use width/height attrs

---
 .../src/components/ReactFlowExample/index.tsx |  6 ++---
 .../components/SvelteFlowExample/index.svelte | 24 +++++++------------
 .../components/NodeWrapper/NodeWrapper.svelte |  4 +++-
 .../svelte/src/lib/store/initial-store.ts     |  6 +----
 4 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/examples/astro-xyflow/src/components/ReactFlowExample/index.tsx b/examples/astro-xyflow/src/components/ReactFlowExample/index.tsx
index ae5a5c87..ca21eeb7 100644
--- a/examples/astro-xyflow/src/components/ReactFlowExample/index.tsx
+++ b/examples/astro-xyflow/src/components/ReactFlowExample/index.tsx
@@ -27,7 +27,7 @@ const initialNodes: Node[] = [
     type: 'input',
     data: { label: 'Node 1' },
     position: { x: 250, y: 5 },
-    size: nodeSize,
+    ...nodeSize,
     handles: [
       {
         type: 'source',
@@ -41,7 +41,7 @@ const initialNodes: Node[] = [
     id: '2',
     data: { label: 'Node 2' },
     position: { x: 100, y: 100 },
-    size: nodeSize,
+    ...nodeSize,
     handles: [
       {
         type: 'source',
@@ -65,7 +65,7 @@ const initialNodes: Node[] = [
     id: '3',
     data: { label: 'Node 3' },
     position: { x: 400, y: 100 },
-    size: nodeSize,
+    ...nodeSize,
     handles: [
       {
         type: 'source',
diff --git a/examples/astro-xyflow/src/components/SvelteFlowExample/index.svelte b/examples/astro-xyflow/src/components/SvelteFlowExample/index.svelte
index cfa8a449..73196d53 100644
--- a/examples/astro-xyflow/src/components/SvelteFlowExample/index.svelte
+++ b/examples/astro-xyflow/src/components/SvelteFlowExample/index.svelte
@@ -11,10 +11,8 @@
       data: { label: 'Node 0' },
       sourcePosition: Position.Right,
       targetPosition: Position.Left,
-      size: {
-        width: 100,
-        height: 40,
-      },
+      width: 100,
+      height: 40,
       handles: [
         { type: 'source', x: 100, y: 20, position: Position.Right },
         { type: 'target', x: 0, y: 20, position: Position.Left },
@@ -26,10 +24,8 @@
       data: { label: 'A' },
       sourcePosition: Position.Right,
       targetPosition: Position.Left,
-      size: {
-        width: 100,
-        height: 40,
-      },
+      width: 100,
+      height: 40,
       handles: [
         { type: 'source', x: 100, y: 20, position: Position.Right },
         { type: 'target', x: 0, y: 20, position: Position.Left },
@@ -41,10 +37,8 @@
       data: { label: 'B' },
       sourcePosition: Position.Right,
       targetPosition: Position.Left,
-      size: {
-        width: 100,
-        height: 40,
-      },
+      width: 100,
+      height: 40,
       handles: [
         { type: 'source', x: 100, y: 20, position: Position.Right },
         { type: 'target', x: 0, y: 20, position: Position.Left },
@@ -56,10 +50,8 @@
       data: { label: 'C' },
       sourcePosition: Position.Right,
       targetPosition: Position.Left,
-      size: {
-        width: 100,
-        height: 40,
-      },
+      width: 100,
+      height: 40,
       handles: [
         { type: 'source', x: 100, y: 20, position: Position.Right },
         { type: 'target', x: 0, y: 20, position: Position.Left },
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index eb2c1472..a59e522d 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -170,7 +170,9 @@
     style:z-index={zIndex}
     style:transform="translate({positionOriginX}px, {positionOriginY}px)"
     style:visibility={initialized ? 'visible' : 'hidden'}
-    style="{style} {width ? `;width=${width}px` : ''} {height ? `;height=${height}px;` : ''}"
+    style:width={width === undefined ? undefined : `${width}px`}
+    style:height={height === undefined ? undefined : `${height}px`}
+    {style}
     on:click={onSelectNodeHandler}
     on:mouseenter={(event) => dispatch('nodemouseenter', { node, event })}
     on:mouseleave={(event) => dispatch('nodemouseleave', { node, event })}
diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts
index d6b621d9..dbbb17fc 100644
--- a/packages/svelte/src/lib/store/initial-store.ts
+++ b/packages/svelte/src/lib/store/initial-store.ts
@@ -76,11 +76,7 @@ export const getInitialStore = ({
   let viewport: Viewport = { x: 0, y: 0, zoom: 1 };
 
   if (fitView && width && height) {
-    const nodesWithDimensions = nextNodes.map((node) => ({
-      ...node,
-      width: node.size?.width,
-      height: node.size?.height
-    }));
+    const nodesWithDimensions = nextNodes.filter((node) => node.width && node.height);
     const bounds = getNodesBounds(nodesWithDimensions, [0, 0]);
     viewport = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
   }