From 5550c5f0f6e31e0fa2b88f99023d2eab3108ef22 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 20 Aug 2020 12:26:33 +0200
Subject: [PATCH] refactor(nodes): no jumping nodes on start

---
 src/components/Nodes/wrapNode.tsx    | 2 ++
 src/container/NodeRenderer/index.tsx | 2 ++
 src/style.css                        | 3 +--
 src/types/index.ts                   | 1 +
 4 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx
index 97cdb2b0..c59a1257 100644
--- a/src/components/Nodes/wrapNode.tsx
+++ b/src/components/Nodes/wrapNode.tsx
@@ -186,6 +186,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     sourcePosition,
     targetPosition,
     isHidden,
+    isInitialized,
   }: WrapNodeProps) => {
     const updateNodeDimensions = useStoreActions((actions) => actions.updateNodeDimensions);
     const setSelectedElements = useStoreActions((actions) => actions.setSelectedElements);
@@ -282,6 +283,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       zIndex: selected ? 10 : 3,
       transform: `translate(${xPos}px,${yPos}px)`,
       pointerEvents: isSelectable || isDraggable || onClick ? 'all' : 'none',
+      visibility: isInitialized ? 'visible' : 'hidden',
       ...style,
     };
 
diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx
index 8960e467..76b814be 100644
--- a/src/container/NodeRenderer/index.tsx
+++ b/src/container/NodeRenderer/index.tsx
@@ -37,6 +37,7 @@ function renderNode(
   const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
   const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined'));
   const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined'));
+  const isInitialized = node.__rf.width !== null && node.__rf.height !== null;
 
   return (
     <NodeComponent
@@ -64,6 +65,7 @@ function renderNode(
       targetPosition={node.targetPosition}
       selectNodesOnDrag={props.selectNodesOnDrag}
       isHidden={node.isHidden}
+      isInitialized={isInitialized}
     />
   );
 }
diff --git a/src/style.css b/src/style.css
index d6c8a389..4ca6545d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -117,7 +117,6 @@
 .react-flow__node-default.selectable,
 .react-flow__node-input.selectable,
 .react-flow__node-output.selectable {
-
   &.selected,
   &.selected:hover {
     box-shadow: 0 0 0 1px #333;
@@ -194,4 +193,4 @@
   right: 0;
   top: 50%;
   transform: translate(0, -50%);
-}
\ No newline at end of file
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index 742135cb..08376b16 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -171,6 +171,7 @@ export interface WrapNodeProps {
   sourcePosition?: Position;
   targetPosition?: Position;
   isHidden?: boolean;
+  isInitialized?: boolean;
 }
 
 export type FitViewParams = {