feat: Add suspensions to node, noderenderer and around zoom-pane

* bind zoompanhelper functions to zoom-pane slot

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

src/components/Nodes/Node.vue

@@ -144,47 +144,33 @@ onMounted(() => {
     @move="onDrag"
     @stop="onDragStop"
   >
-    <div
-      ref="node-element"
-      :class="[
-        'vue-flow__node',
-        `vue-flow__node-${props.node.type}`,
-        {
-          selected: props.selected,
-          selectable: selectable,
-        },
-        props.node.class,
-      ]"
-      :style="{
-        zIndex: props.selected ? 10 : 3,
-        transform: `translate(${props.node.__rf?.position?.x}px,${props.node.__rf?.position?.y}px)`,
-        pointerEvents: selectable || draggable ? 'all' : 'none',
-        opacity: props.node.__rf?.width !== null && props.node.__rf?.height !== null ? 1 : 0,
-        ...props.node.style,
-      }"
-      :data-id="props.node.id"
-      @mouseenter="onMouseEnterHandler"
-      @mousemove="onMouseMoveHandler"
-      @mouseleave="onMouseLeaveHandler"
-      @contextmenu="onContextMenuHandler"
-      @click="onSelectNodeHandler"
-    >
-      <slot
-        v-bind="{
-          id: props.node.id,
-          data: props.node.data,
-          type: props.node.type,
-          xPos: props.node.__rf?.position?.x,
-          yPos: props.node.__rf?.position?.y,
-          selected: props.selected,
-          connectable,
-          sourcePosition: props.node.sourcePosition,
-          targetPosition: props.node.targetPosition,
-          dragging: props.node.__rf?.isDragging,
+    <Suspense>
+      <div
+        ref="node-element"
+        :class="[
+          'vue-flow__node',
+          `vue-flow__node-${props.node.type}`,
+          {
+            selected: props.selected,
+            selectable: selectable,
+          },
+          props.node.class,
+        ]"
+        :style="{
+          zIndex: props.selected ? 10 : 3,
+          transform: `translate(${props.node.__rf?.position?.x}px,${props.node.__rf?.position?.y}px)`,
+          pointerEvents: selectable || draggable ? 'all' : 'none',
+          opacity: props.node.__rf?.width !== null && props.node.__rf?.height !== null ? 1 : 0,
+          ...props.node.style,
         }"
+        :data-id="props.node.id"
+        @mouseenter="onMouseEnterHandler"
+        @mousemove="onMouseMoveHandler"
+        @mouseleave="onMouseLeaveHandler"
+        @contextmenu="onContextMenuHandler"
+        @click="onSelectNodeHandler"
       >
-        <component
-          :is="props.type"
+        <slot
           v-bind="{
             id: props.node.id,
             data: props.node.data,
@@ -197,8 +183,24 @@ onMounted(() => {
             targetPosition: props.node.targetPosition,
             dragging: props.node.__rf?.isDragging,
           }"
-        />
-      </slot>
-    </div>
+        >
+          <component
+            :is="props.type"
+            v-bind="{
+              id: props.node.id,
+              data: props.node.data,
+              type: props.node.type,
+              xPos: props.node.__rf?.position?.x,
+              yPos: props.node.__rf?.position?.y,
+              selected: props.selected,
+              connectable,
+              sourcePosition: props.node.sourcePosition,
+              targetPosition: props.node.targetPosition,
+              dragging: props.node.__rf?.isDragging,
+            }"
+          />
+        </slot>
+      </div>
+    </Suspense>
   </DraggableCore>
 </template>

src/container/NodeRenderer/NodeRenderer.vue

@@ -48,18 +48,20 @@ const selected = (nodeId: string) => store.selectedElements?.some(({ id }) => id
 </script>
 <template>
   <div class="vue-flow__nodes" :style="{ transform }">
-    <template v-for="node of nodes" :key="node.id">
-      <Node
-        :node="node"
-        :type="type(node)"
-        :snap-grid="snapGrid"
-        :select-nodes-on-drag="props.selectNodesOnDrag"
-        :selected="selected(node.id)"
-      >
-        <template #default="nodeProps">
-          <slot :name="`node-${node.type}`" v-bind="nodeProps"></slot>
-        </template>
-      </Node>
-    </template>
+    <Suspense>
+      <template v-for="node of nodes" :key="node.id">
+        <Node
+          :node="node"
+          :type="type(node)"
+          :snap-grid="snapGrid"
+          :select-nodes-on-drag="props.selectNodesOnDrag"
+          :selected="selected(node.id)"
+        >
+          <template #default="nodeProps">
+            <slot :name="`node-${node.type}`" v-bind="nodeProps"></slot>
+          </template>
+        </Node>
+      </template>
+    </Suspense>
   </div>
 </template>

src/container/VueFlow/VueFlow.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { CSSProperties, onBeforeUnmount } from 'vue'
+import { invoke } from '@vueuse/core'
 import {
   ConnectionLineType,
   ConnectionMode,
@@ -131,7 +132,10 @@ watch(
   (val) => init(val),
   { flush: 'pre', deep: true },
 )
-init(props)
+invoke(async () => {
+  await until(props.elements).toMatch((y) => y.length > 0)
+  init(props)
+})
 
 const nodeTypes = computed(() => {
   let types = defaultNodeTypes
@@ -148,48 +152,50 @@ const edgeTypes = computed(() => {
 </script>
 <template>
   <div class="vue-flow">
-    <ZoomPane
-      :selection-key-code="props.selectionKeyCode"
-      :zoom-activation-key-code="props.zoomActivationKeyCode"
-      :default-zoom="props.defaultZoom"
-      :default-position="props.defaultPosition"
-      :zoom-on-scroll="props.zoomOnScroll"
-      :zoom-on-pinch="props.zoomOnPinch"
-      :zoom-on-double-click="props.zoomOnDoubleClick"
-      :pan-on-scroll="props.panOnScroll"
-      :pan-on-scroll-speed="props.panOnScrollSpeed"
-      :pan-on-scroll-mode="props.panOnScrollMode"
-      :pane-moveable="props.paneMoveable"
-    >
-      <template #default="zoomPaneProps">
-        <SelectionPane
-          :delete-key-code="props.deleteKeyCode"
-          :multi-selection-key-code="props.multiSelectionKeyCode"
-          :selection-key-code="props.selectionKeyCode"
-        >
-          <NodeRenderer :node-types="nodeTypes" :select-nodes-on-drag="props.selectNodesOnDrag">
-            <template v-for="nodeName of Object.keys(nodeTypes)" #[`node-${nodeName}`]="nodeProps">
-              <slot :name="`node-${nodeName}`" v-bind="nodeProps"></slot>
-            </template>
-          </NodeRenderer>
-          <EdgeRenderer
-            :connection-line-type="props.connectionLineType"
-            :connection-line-style="props.connectionLineStyle"
-            :arrow-head-color="props.arrowHeadColor"
-            :marker-end-id="props.markerEndId"
-            :edge-types="edgeTypes"
+    <Suspense>
+      <ZoomPane
+        :selection-key-code="props.selectionKeyCode"
+        :zoom-activation-key-code="props.zoomActivationKeyCode"
+        :default-zoom="props.defaultZoom"
+        :default-position="props.defaultPosition"
+        :zoom-on-scroll="props.zoomOnScroll"
+        :zoom-on-pinch="props.zoomOnPinch"
+        :zoom-on-double-click="props.zoomOnDoubleClick"
+        :pan-on-scroll="props.panOnScroll"
+        :pan-on-scroll-speed="props.panOnScrollSpeed"
+        :pan-on-scroll-mode="props.panOnScrollMode"
+        :pane-moveable="props.paneMoveable"
+      >
+        <template #default="zoomPaneProps">
+          <SelectionPane
+            :delete-key-code="props.deleteKeyCode"
+            :multi-selection-key-code="props.multiSelectionKeyCode"
+            :selection-key-code="props.selectionKeyCode"
           >
-            <template v-for="edgeName of Object.keys(edgeTypes)" #[`edge-${edgeName}`]="edgeProps">
-              <slot :name="`edge-${edgeName}`" v-bind="edgeProps"></slot>
-            </template>
-            <template #custom-connection-line="customConnectionLineProps">
-              <slot name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
-            </template>
-          </EdgeRenderer>
-        </SelectionPane>
-        <slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
-      </template>
-    </ZoomPane>
+            <NodeRenderer :node-types="nodeTypes" :select-nodes-on-drag="props.selectNodesOnDrag">
+              <template v-for="nodeName of Object.keys(nodeTypes)" #[`node-${nodeName}`]="nodeProps">
+                <slot :name="`node-${nodeName}`" v-bind="nodeProps"></slot>
+              </template>
+            </NodeRenderer>
+            <EdgeRenderer
+              :connection-line-type="props.connectionLineType"
+              :connection-line-style="props.connectionLineStyle"
+              :arrow-head-color="props.arrowHeadColor"
+              :marker-end-id="props.markerEndId"
+              :edge-types="edgeTypes"
+            >
+              <template v-for="edgeName of Object.keys(edgeTypes)" #[`edge-${edgeName}`]="edgeProps">
+                <slot :name="`edge-${edgeName}`" v-bind="edgeProps"></slot>
+              </template>
+              <template #custom-connection-line="customConnectionLineProps">
+                <slot name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
+              </template>
+            </EdgeRenderer>
+          </SelectionPane>
+          <slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
+        </template>
+      </ZoomPane>
+    </Suspense>
     <slot v-bind="{ ...props, store, hooks }"></slot>
   </div>
 </template>

src/container/ZoomPane/ZoomPane.vue

@@ -212,7 +212,17 @@ watchOnce(
 <template>
   <Suspense>
     <div ref="zoomPane" class="vue-flow__renderer vue-flow__zoompane">
-      <slot v-bind="{ transform, dimensions: { width, height } }"></slot>
+      <slot
+        v-bind="{
+          transform,
+          dimensions: { width, height },
+          zoomIn,
+          zoomOut,
+          zoomTo,
+          setTransform,
+          fitView,
+        }"
+      ></slot>
     </div>
   </Suspense>
 </template>