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

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
       }