From f2b36f2d335382fab8e6fb04dbb23ffad0be0e40 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 23 Oct 2023 16:00:20 +0200
Subject: [PATCH] refactor(svelte): prevent jumping nodes

---
 .../svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte | 2 ++
 packages/svelte/src/lib/components/NodeWrapper/types.ts      | 1 +
 .../src/lib/container/NodeRenderer/NodeRenderer.svelte       | 5 +++--
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index 2d8e9627..fa1cd154 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -39,6 +39,7 @@
   export let targetPosition: NodeWrapperProps['targetPosition'] = undefined;
   export let zIndex: NodeWrapperProps['zIndex'];
   export let dragHandle: NodeWrapperProps['dragHandle'] = undefined;
+  export let initialized: NodeWrapperProps['initialized'] = false;
   let className: string = '';
   export { className as class };
 
@@ -159,6 +160,7 @@
     style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)"
     style:width={node.size?.width && `${node.size?.width}px`}
     style:height={node.size?.height && `${node.size?.height}px`}
+    style:visibility={initialized ? 'visible' : 'hidden'}
     {style}
     on:click={onSelectNodeHandler}
     on:mouseenter={(event) => dispatch('nodemouseenter', { node, event })}
diff --git a/packages/svelte/src/lib/components/NodeWrapper/types.ts b/packages/svelte/src/lib/components/NodeWrapper/types.ts
index 83d27e84..f4f5c310 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/types.ts
+++ b/packages/svelte/src/lib/components/NodeWrapper/types.ts
@@ -27,4 +27,5 @@ export type NodeWrapperProps = Pick<
   isParent?: boolean;
   zIndex: number;
   node: Node;
+  initialized: boolean;
 };
diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
index 35ddc630..c4f9ec6f 100644
--- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
+++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
@@ -35,8 +35,8 @@
     {@const posOrigin = getPositionWithOrigin({
       x: node.positionAbsolute?.x ?? 0,
       y: node.positionAbsolute?.y ?? 0,
-      width: node.width ?? 0,
-      height: node.height ?? 0,
+      width: (node.size?.width || node.width) ?? 0,
+      height: (node.size?.height || node.height) ?? 0,
       origin: node.origin
     })}
     <NodeWrapper
@@ -65,6 +65,7 @@
       dragging={node.dragging}
       zIndex={node[internalsSymbol]?.z ?? 0}
       dragHandle={node.dragHandle}
+      initialized={(!!node.width && !!node.height) || (!!node.size?.width && !!node.size?.height)}
       {resizeObserver}
       on:nodeclick
       on:nodemouseenter