From e3e35109f151b3bc2acf43259005947cf5828e01 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 25 Feb 2023 00:03:18 +0100
Subject: [PATCH] refactor(core): cleanup node styles

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/components/Nodes/NodeWrapper.vue | 3 ++-
 packages/core/src/container/Viewport/Transform.vue | 7 +------
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/components/Nodes/NodeWrapper.vue b/packages/core/src/components/Nodes/NodeWrapper.vue
index 5ac5c6c9..4d17c5bb 100644
--- a/packages/core/src/components/Nodes/NodeWrapper.vue
+++ b/packages/core/src/components/Nodes/NodeWrapper.vue
@@ -267,8 +267,8 @@ export default {
     class="vue-flow__node"
     :class="[
       `vue-flow__node-${type === false ? 'default' : name}`,
-      noPanClassName,
       {
+        [noPanClassName]: draggable,
         dragging,
         selected: node.selected,
         selectable,
@@ -279,6 +279,7 @@ export default {
       zIndex: node.computedPosition.z ?? zIndex,
       transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`,
       pointerEvents: selectable || draggable ? 'all' : 'none',
+      visibility: node.initialized ? 'visible' : 'hidden',
       ...getStyle,
     }"
     :tabIndex="focusable ? 0 : undefined"
diff --git a/packages/core/src/container/Viewport/Transform.vue b/packages/core/src/container/Viewport/Transform.vue
index 7015b9c3..9aa753e4 100644
--- a/packages/core/src/container/Viewport/Transform.vue
+++ b/packages/core/src/container/Viewport/Transform.vue
@@ -4,8 +4,6 @@ import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 
 const { id, viewport, emits, d3Zoom, d3Selection, dimensions, ...rest } = useVueFlow()
 
-let isReady = $ref(false)
-
 until(() => d3Zoom.value && d3Selection.value && dimensions.value.width > 0 && dimensions.value.height > 0)
   .toBeTruthy()
   .then(() => {
@@ -20,9 +18,6 @@ until(() => d3Zoom.value && d3Selection.value && dimensions.value.width > 0 && d
         dimensions,
         ...rest,
       })
-
-      // hide graph until nodes are ready, so we don't have jumping nodes
-      isReady = true
     }, 1)
   })
 </script>
@@ -38,7 +33,7 @@ export default {
   <div
     :key="`transform-${id}`"
     class="vue-flow__transformationpane vue-flow__container"
-    :style="{ transform: `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})`, opacity: isReady ? undefined : 0 }"
+    :style="{ transform: `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})` }"
   >
     <EdgeRenderer />