diff --git a/.changeset/breezy-clouds-sin.md b/.changeset/breezy-clouds-sin.md new file mode 100644 index 00000000..6200aedb --- /dev/null +++ b/.changeset/breezy-clouds-sin.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": minor +--- + +Remove `initialized` property from `GraphNode` type diff --git a/.changeset/tasty-chefs-destroy.md b/.changeset/tasty-chefs-destroy.md new file mode 100644 index 00000000..7672de1b --- /dev/null +++ b/.changeset/tasty-chefs-destroy.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/node-resizer": minor +--- + +Replace node initialized check with dimensions check diff --git a/packages/core/src/components/Handle/Handle.vue b/packages/core/src/components/Handle/Handle.vue index 675edbed..c80b1ec2 100644 --- a/packages/core/src/components/Handle/Handle.vue +++ b/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) diff --git a/packages/core/src/components/Nodes/NodeWrapper.ts b/packages/core/src/components/Nodes/NodeWrapper.ts index f3e69742..36be4f15 100644 --- a/packages/core/src/components/Nodes/NodeWrapper.ts +++ b/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', diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index a90271c4..0c345b5b 100644 --- a/packages/core/src/store/actions.ts +++ b/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 diff --git a/packages/core/src/store/getters.ts b/packages/core/src/store/getters.ts index f021b448..4c534105 100644 --- a/packages/core/src/store/getters.ts +++ b/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) } } diff --git a/packages/core/src/types/node.ts b/packages/core/src/types/node.ts index 84478de6..f098de62 100644 --- a/packages/core/src/types/node.ts +++ b/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> diff --git a/packages/core/src/utils/changes.ts b/packages/core/src/utils/changes.ts index 250a632a..39f3435a 100644 --- a/packages/core/src/utils/changes.ts +++ b/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 } diff --git a/packages/node-resizer/src/NodeResizer.vue b/packages/node-resizer/src/NodeResizer.vue index 64b90f77..d51ddcfa 100644 --- a/packages/node-resizer/src/NodeResizer.vue +++ b/packages/node-resizer/src/NodeResizer.vue @@ -1,5 +1,5 @@