refactor(core): remove initialized from graph-nodes (#1457)

* refactor(core): remove `initialized` from graph-nodes

* chore(changeset): add

* refactor(node-resizer): replace node initialized check

* chore(changeset): add

Author: bcakmakoglu

.changeset/breezy-clouds-sin.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Remove `initialized` property from `GraphNode` type

.changeset/tasty-chefs-destroy.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/node-resizer": minor
+---
+
+Replace node initialized check with dimensions check

packages/core/src/components/Handle/Handle.vue

@@ -97,7 +97,7 @@ const isConnectable = computed(() => {
 
 // todo: remove this and have users handle this themselves using `updateNodeInternals`
 // set up handle bounds if they don't exist yet and the node has been initialized (i.e. the handle was added after the node has already been mounted)
-until(() => node.initialized)
+until(() => !!node.dimensions.width && !!node.dimensions.height)
   .toBe(true, { flush: 'post' })
   .then(() => {
     const existingBounds = node.handleBounds[type.value]?.find((b) => b.id === handleId)

packages/core/src/components/Nodes/NodeWrapper.ts

@@ -84,6 +84,8 @@ const NodeWrapper = defineComponent({
 
     const isFocusable = toRef(() => (typeof node.focusable === 'undefined' ? nodesFocusable.value : node.focusable))
 
+    const isInit = toRef(() => !!node.dimensions.width && !!node.dimensions.height)
+
     const nodeCmp = computed(() => {
       const name = node.type || 'default'
 
@@ -227,7 +229,7 @@ const NodeWrapper = defineComponent({
       node.extent === 'parent' ||
       (typeof node.extent === 'object' && 'range' in node.extent && node.extent.range === 'parent')
     ) {
-      until(() => node.initialized)
+      until(() => isInit)
         .toBe(true)
         .then(clampPosition)
     }
@@ -260,7 +262,7 @@ const NodeWrapper = defineComponent({
             getClass.value,
           ],
           'style': {
-            visibility: node.initialized ? 'visible' : 'hidden',
+            visibility: isInit.value ? 'visible' : 'hidden',
             zIndex: node.computedPosition.z ?? zIndex.value,
             transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`,
             pointerEvents: isSelectable.value || isDraggable.value ? 'all' : 'none',

packages/core/src/store/actions.ts

@@ -1,6 +1,5 @@
 import { zoomIdentity } from 'd3-zoom'
 import type { ComputedRef } from 'vue'
-import { nextTick } from 'vue'
 import { until } from '@vueuse/core'
 import type {
   Actions,
@@ -163,7 +162,6 @@ export function useActions(
           node.dimensions = dimensions
           node.handleBounds.source = getHandleBounds('.source', update.nodeElement, nodeBounds, zoom)
           node.handleBounds.target = getHandleBounds('.target', update.nodeElement, nodeBounds, zoom)
-          node.initialized = true
 
           changes[i] = {
             id: node.id,
@@ -175,10 +173,8 @@ export function useActions(
     }
 
     if (!state.fitViewOnInitDone && state.fitViewOnInit) {
-      nextTick(() => {
-        viewportHelper.value.fitView()
-        state.fitViewOnInitDone = true
-      })
+      viewportHelper.value.fitView()
+      state.fitViewOnInitDone = true
     }
 
     if (changes.length) {
@@ -813,7 +809,6 @@ export function useActions(
         isParent: _____,
         resizing: ______,
         dragging: _______,
-        initialized: ________,
         events: _________,
         ...rest
       } = node

packages/core/src/store/getters.ts

@@ -134,7 +134,7 @@ export function useGetters(
     const initializedNodes: GraphNode[] = []
 
     for (const node of state.nodes) {
-      if (node.initialized && node.handleBounds !== undefined) {
+      if (!!node.dimensions.width && !!node.dimensions.height && node.handleBounds !== undefined) {
         initializedNodes.push(node)
       }
     }

packages/core/src/types/node.ts

@@ -125,7 +125,6 @@ export interface GraphNode<
   selected: boolean
   resizing: boolean
   dragging: boolean
-  initialized: boolean
   data: Data
   /** @deprecated will be removed in the next major version */
   events: Partial<NodeEventsHandler<CustomEvents>>

packages/core/src/utils/changes.ts

@@ -183,7 +183,9 @@ export function applyChanges<
               const parent = elements[elementIds.indexOf(element.parentNode)]
 
               if (parent && isGraphNode(parent)) {
-                if (!parent.initialized) {
+                const parentInit = !!parent.dimensions.width && !!parent.dimensions.height
+
+                if (!parentInit) {
                   nextTick(() => {
                     handleParentExpand(element, parent)
                   })
@@ -192,10 +194,6 @@ export function applyChanges<
                 }
               }
             }
-
-            if (!element.initialized) {
-              element.initialized = true
-            }
           }
           break
       }

packages/node-resizer/src/NodeResizer.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { inject, toRef, watch } from 'vue'
+import { computed, inject, toRef, watch } from 'vue'
 import type { NodeDimensionChange } from '@vue-flow/core'
 import { NodeIdInjection, useVueFlow } from '@vue-flow/core'
 import ResizeControl from './ResizeControl.vue'
@@ -22,10 +22,16 @@ const contextNodeId = inject(NodeIdInjection, null)
 
 const nodeId = toRef(() => (typeof props.nodeId === 'string' ? props.nodeId : contextNodeId))
 
-const node = toRef(() => findNode(nodeId.value))
+const node = computed(() => findNode(nodeId.value))
 
 watch(
-  [() => props.minWidth, () => props.minHeight, () => props.maxWidth, () => props.maxHeight, () => node.value?.initialized],
+  [
+    () => props.minWidth,
+    () => props.minHeight,
+    () => props.maxWidth,
+    () => props.maxHeight,
+    () => !!node.value?.dimensions.width && !!node.value.dimensions.height,
+  ],
   ([minWidth, minHeight, maxWidth, maxHeight, isInitialized]) => {
     const n = node.value