diff --git a/packages/core/src/composables/useViewport.ts b/packages/core/src/composables/useViewport.ts index 9206671a..7074ba74 100644 --- a/packages/core/src/composables/useViewport.ts +++ b/packages/core/src/composables/useViewport.ts @@ -27,6 +27,10 @@ export default (state: State, getters: ComputedGetters) => { const { getNodes } = $(getters) + const nodesInitialized = computed(() => nodes.filter((node) => node.initialized).length === nodes.length) + + const isReady = computed(() => !!d3Zoom && !!d3Selection && !!dimensions.width && !!dimensions.height && nodesInitialized.value) + function zoom(scale: number, duration?: number) { if (d3Selection && d3Zoom) { d3Zoom.scaleBy(transition(d3Selection, duration), scale) @@ -45,7 +49,7 @@ export default (state: State, getters: ComputedGetters) => { } return computed(() => { - if (d3Zoom && d3Selection && dimensions.width && dimensions.height) { + if (isReady.value) { return { initialized: true, zoomIn: (options) => { diff --git a/packages/core/src/container/Viewport/Transform.vue b/packages/core/src/container/Viewport/Transform.vue index 9aa753e4..098fad0e 100644 --- a/packages/core/src/container/Viewport/Transform.vue +++ b/packages/core/src/container/Viewport/Transform.vue @@ -7,18 +7,16 @@ const { id, viewport, emits, d3Zoom, d3Selection, dimensions, ...rest } = useVue until(() => d3Zoom.value && d3Selection.value && dimensions.value.width > 0 && dimensions.value.height > 0) .toBeTruthy() .then(() => { - setTimeout(() => { - // emit pane ready event - emits.paneReady({ - id, - viewport, - emits, - d3Zoom, - d3Selection, - dimensions, - ...rest, - }) - }, 1) + // emit pane ready event + emits.paneReady({ + id, + viewport, + emits, + d3Zoom, + d3Selection, + dimensions, + ...rest, + }) })