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