diff --git a/packages/core/src/components/Nodes/NodeWrapper.ts b/packages/core/src/components/Nodes/NodeWrapper.ts index 26109c4c..deb648ee 100644 --- a/packages/core/src/components/Nodes/NodeWrapper.ts +++ b/packages/core/src/components/Nodes/NodeWrapper.ts @@ -199,10 +199,10 @@ const NodeWrapper = defineComponent({ getClass.value, ], 'style': { + visibility: node.value.initialized ? 'visible' : 'hidden', zIndex: node.value.computedPosition.z ?? zIndex(), transform: `translate(${node.value.computedPosition.x}px,${node.value.computedPosition.y}px)`, pointerEvents: props.selectable || props.draggable ? 'all' : 'none', - visibility: node.value.initialized ? 'visible' : 'hidden', ...getStyle.value, }, 'tabIndex': props.focusable ? 0 : undefined, diff --git a/packages/core/src/composables/useOnInitHandler.ts b/packages/core/src/composables/useOnInitHandler.ts index 16998af0..8fed0f45 100644 --- a/packages/core/src/composables/useOnInitHandler.ts +++ b/packages/core/src/composables/useOnInitHandler.ts @@ -9,24 +9,6 @@ export function useOnInitHandler() { (isInitialized) => { if (isInitialized) { setTimeout(() => { - // todo: call these when *nodes* are initialized instead of the viewport - // currently doesn't work quite right because the viewport dimensions are not yet available when the nodes are initialized - if (!vfInstance.fitViewOnInitDone.value && vfInstance.fitViewOnInit.value) { - vfInstance.fitView() - } - - vfInstance.fitViewOnInitDone.value = true - - // Here, we are making all nodes visible once we have the dimensions. - if (!document.querySelector('#vue-flow__initialized-styles')) { - const style = document.createElement('style') - style.id = 'vue-flow__initialized-styles' - document.head.appendChild(style) - - const css = `.vue-flow__node { visibility: visible !important; }` - style.appendChild(document.createTextNode(css)) - } - vfInstance.emits.init(vfInstance) vfInstance.emits.paneReady(vfInstance) }, 1) diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index 983a359d..ca5b2b07 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -1,5 +1,6 @@ import { zoomIdentity } from 'd3-zoom' import type { ComputedRef } from 'vue' +import { nextTick } from 'vue' import { until } from '@vueuse/core' import type { Actions, @@ -180,6 +181,13 @@ export function useActions( return res }, []) + if (!state.fitViewOnInitDone && state.fitViewOnInit) { + nextTick(() => { + viewportHelper.value.fitView() + state.fitViewOnInitDone = true + }) + } + if (changes.length) { state.hooks.nodesChange.trigger(changes) }