refactor(svelte): prevent jumping nodes

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

packages/svelte/src/lib/components/NodeWrapper/types.ts

@@ -27,4 +27,5 @@ export type NodeWrapperProps = Pick<
   isParent?: boolean;
   zIndex: number;
   node: Node;
+  initialized: boolean;
 };

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,
+      width: (node.size?.width || node.width) ?? 0,
-      height: node.height ?? 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