fix(core): wait until nodes are initialized

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

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<ExtendedViewport>(() => {
-    if (d3Zoom && d3Selection && dimensions.width && dimensions.height) {
+    if (isReady.value) {
       return {
         initialized: true,
         zoomIn: (options) => {

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,
+    })
   })
 </script>