refactor(flow)!: properly nest components

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

src/composables/useHandle.ts

@@ -85,7 +85,7 @@ export default (store: FlowStore = useStore()) =>
     if (!doc) return
     let validConnectFunc: ValidConnectionFunc = isValidConnection ?? (() => true)
     if (!isValidConnection) {
-      const node = store.getNodes.find((n) => n.id === nodeId)
+      const node = store.getNode(nodeId)
       if (node) validConnectFunc = (!isTarget ? node.isValidTargetPos : node.isValidSourcePos) ?? (() => true)
     }
     const elementBelow = doc.elementFromPoint(event.clientX, event.clientY)

src/container/Renderer/Renderer.vue

@@ -2,6 +2,7 @@
 import { useStore, useWindow, useZoomPanHelper } from '../../composables'
 import { FlowInstance } from '../../types'
 import { onLoadGetEdges, onLoadGetElements, onLoadGetNodes, onLoadProject, onLoadToObject } from '../../utils'
+import ZoomPane from '../ZoomPane/ZoomPane.vue'
 
 const store = useStore()
 
@@ -36,6 +37,24 @@ export default {
 </script>
 <template>
   <div class="vue-flow__renderer">
-    <slot />
+    <ZoomPane :key="`zoom-pane-${store.id}`">
+      <template
+        v-for="nodeName of Object.keys(store.getNodeTypes)"
+        #[`node-${nodeName}`]="nodeProps"
+        :key="`node-${nodeName}-${store.id}`"
+      >
+        <slot :name="`node-${nodeName}`" v-bind="nodeProps" />
+      </template>
+      <template
+        v-for="edgeName of Object.keys(store.getEdgeTypes)"
+        #[`edge-${edgeName}`]="edgeProps"
+        :key="`edge-${edgeName}-${store.id}`"
+      >
+        <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
+      </template>
+      <template #custom-connection-line="customConnectionLineProps">
+        <slot name="custom-connection-line" v-bind="customConnectionLineProps" />
+      </template>
+    </ZoomPane>
   </div>
 </template>

src/container/SelectionPane/SelectionPane.vue

@@ -4,6 +4,8 @@ import { useStore, useKeyPress } from '../../composables'
 import { getConnectedEdges } from '../../utils'
 import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
 import UserSelection from '../../components/UserSelection/UserSelection.vue'
+import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
+import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 
 const store = useStore()
 const userSelection = ref(false)
@@ -49,7 +51,27 @@ export default {
 }
 </script>
 <template>
-  <slot></slot>
+  <NodeRenderer :key="`node-renderer-${store.id}`">
+    <template
+      v-for="nodeName of Object.keys(store.getNodeTypes)"
+      #[`node-${nodeName}`]="nodeProps"
+      :key="`node-${nodeName}-${store.id}`"
+    >
+      <slot :name="`node-${nodeName}`" v-bind="nodeProps" />
+    </template>
+  </NodeRenderer>
+  <EdgeRenderer :key="`edge-renderer-${store.id}`">
+    <template
+      v-for="edgeName of Object.keys(store.getEdgeTypes)"
+      #[`edge-${edgeName}`]="edgeProps"
+      :key="`edge-${edgeName}-${store.id}`"
+    >
+      <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
+    </template>
+    <template #custom-connection-line="customConnectionLineProps">
+      <slot name="custom-connection-line" v-bind="customConnectionLineProps" />
+    </template>
+  </EdgeRenderer>
   <UserSelection v-if="userSelection" :key="`user-selection-${store.id}`" />
   <NodesSelection v-if="store.nodesSelectionActive" :key="`nodes-selction-${store.id}`" />
   <div :key="`flow-pane-${store.id}`" class="vue-flow__pane" @click="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />

src/container/VueFlow/VueFlow.vue

@@ -1,10 +1,5 @@
 <script lang="ts" setup>
 import Renderer from '../Renderer/Renderer.vue'
-import ZoomPane from '../ZoomPane/ZoomPane.vue'
-import SelectionPane from '../SelectionPane/SelectionPane.vue'
-import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
-import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
-import LoadingIndicator from '../../components/Loading/LoadingIndicator.vue'
 import { createHooks, initFlow } from '../../composables'
 import type { FlowProps } from '../../types/flow'
 
@@ -23,14 +18,13 @@ const props = withDefaults(defineProps<FlowProps>(), {
   panOnScroll: false,
   paneMoveable: true,
 })
-const emit = defineEmits([...Object.keys(createHooks()), 'update:nodes', 'update:edges'])
+const emit = defineEmits([...Object.keys(createHooks()), 'update:nodes', 'update:edges', 'update:elements', 'update:modelValue'])
 const store = initFlow(emit, props.id)
-const { nodes, edges } = useVModels(props, emit)
-store.setState(props)
+nextTick(() => store.setState(props))
 watch(
   () => props,
-  () => store.setState(props),
-  { flush: 'post', deep: true },
+  (v) => nextTick(() => store.setState(v)),
+  { flush: 'sync', deep: true },
 )
 </script>
 <script lang="ts">
@@ -40,47 +34,25 @@ export default {
 </script>
 <template>
   <div class="vue-flow">
-    <Suspense timeout="0">
-      <template #default>
-        <Renderer :key="`renderer-${store.id}`">
-          <ZoomPane :key="`zoom-pane-${store.id}`">
-            <template #default="zoomPaneProps">
-              <SelectionPane :key="`selection-pane-${store.id}`">
-                <NodeRenderer :key="`node-renderer-${store.id}`">
-                  <template
-                    v-for="nodeName of Object.keys(store.getNodeTypes)"
-                    #[`node-${nodeName}`]="nodeProps"
-                    :key="`node-${nodeName}-${store.id}`"
-                  >
-                    <slot :name="`node-${nodeName}`" v-bind="nodeProps" />
-                  </template>
-                </NodeRenderer>
-                <EdgeRenderer :key="`edge-renderer-${store.id}`">
-                  <template
-                    v-for="edgeName of Object.keys(store.getEdgeTypes)"
-                    #[`edge-${edgeName}`]="edgeProps"
-                    :key="`edge-${edgeName}-${store.id}`"
-                  >
-                    <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
-                  </template>
-                  <template #custom-connection-line="customConnectionLineProps">
-                    <slot name="custom-connection-line" v-bind="customConnectionLineProps" />
-                  </template>
-                </EdgeRenderer>
-              </SelectionPane>
-              <slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
-            </template>
-          </ZoomPane>
-        </Renderer>
+    <Renderer :key="`renderer-${store.id}`">
+      <template
+        v-for="nodeName of Object.keys(store.getNodeTypes)"
+        #[`node-${nodeName}`]="nodeProps"
+        :key="`node-${nodeName}-${store.id}`"
+      >
+        <slot :name="`node-${nodeName}`" v-bind="nodeProps" />
       </template>
-      <template #fallback>
-        <slot name="loading-indicator">
-          <LoadingIndicator v-if="store.loading && store.loading !== '' && !store.isReady" :label="store.loading">
-            <slot name="loading-label" />
-          </LoadingIndicator>
-        </slot>
+      <template
+        v-for="edgeName of Object.keys(store.getEdgeTypes)"
+        #[`edge-${edgeName}`]="edgeProps"
+        :key="`edge-${edgeName}-${store.id}`"
+      >
+        <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
       </template>
-    </Suspense>
+      <template #custom-connection-line="customConnectionLineProps">
+        <slot name="custom-connection-line" v-bind="customConnectionLineProps" />
+      </template>
+    </Renderer>
     <slot v-bind="store"></slot>
   </div>
 </template>

src/container/ZoomPane/ZoomPane.vue

@@ -2,8 +2,9 @@
 import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
 import { FlowTransform, PanOnScrollMode } from '../../types'
-import { useKeyPress, useStore, useWindow } from '../../composables'
+import { useKeyPress, useStore } from '../../composables'
 import { clamp, clampPosition } from '../../utils'
+import SelectionPane from '../SelectionPane/SelectionPane.vue'
 
 const store = useStore()
 const zoomPaneEl = templateRef<HTMLDivElement>('zoomPane', null)
@@ -30,9 +31,9 @@ const d3Zoom = ref(zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store
 const d3Selection = ref()
 
 store.transform = [transform.value.x, transform.value.y, transform.value.zoom]
+const { width, height } = useElementBounding(zoomPaneEl)
 
-nextTick(async () => {
-  await until(zoomPaneEl).toBeTruthy()
+onMounted(() => {
   const d3z = d3Zoom.value!
   d3Selection.value = select(zoomPaneEl.value).call(d3z)
   const d3s = d3Selection.value!
@@ -154,20 +155,14 @@ nextTick(async () => {
     // default filter for d3-zoom
     return (!event.ctrlKey || event.type === 'wheel') && !event.button
   })
-})
 
-const { width, height } = useElementBounding(zoomPaneEl)
-
-// skip waiting for ssr
-const window = useWindow()
-if ('screen' in window) await until(() => store.isReady).toBe(true)
-
-nextTick(() => {
   watch(
     [width, height],
     ([newWidth, newHeight]) => {
-      store.dimensions.width = newWidth
-      store.dimensions.height = newHeight
+      nextTick(() => {
+        store.dimensions.width = newWidth
+        store.dimensions.height = newHeight
+      })
     },
     { flush: 'sync', immediate: true },
   )
@@ -175,7 +170,7 @@ nextTick(() => {
     transform,
     (val) => {
       const { x, y } = clampPosition(val, store.translateExtent)
-      store.transform = [x, y, clamp(val.zoom, store.minZoom, store.maxZoom)]
+      nextTick(() => (store.transform = [x, y, clamp(val.zoom, store.minZoom, store.maxZoom)]))
     },
     { flush: 'sync', immediate: true },
   )
@@ -188,6 +183,24 @@ export default {
 </script>
 <template>
   <div ref="zoomPane" class="vue-flow__zoompane">
-    <slot />
+    <SelectionPane :key="`selection-pane-${store.id}`">
+      <template
+        v-for="nodeName of Object.keys(store.getNodeTypes)"
+        #[`node-${nodeName}`]="nodeProps"
+        :key="`node-${nodeName}-${store.id}`"
+      >
+        <slot :name="`node-${nodeName}`" v-bind="nodeProps" />
+      </template>
+      <template
+        v-for="edgeName of Object.keys(store.getEdgeTypes)"
+        #[`edge-${edgeName}`]="edgeProps"
+        :key="`edge-${edgeName}-${store.id}`"
+      >
+        <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
+      </template>
+      <template #custom-connection-line="customConnectionLineProps">
+        <slot name="custom-connection-line" v-bind="customConnectionLineProps" />
+      </template>
+    </SelectionPane>
   </div>
 </template>

src/types/flow.ts

@@ -113,7 +113,7 @@ export type FlowInstance<DataNode = any, DataEdge = DataNode> = {
 }
 
 export interface FlowProps<DataNode = any, DataEdge = DataNode> {
-  modelValue?: any
+  modelValue?: any[]
   nodes?: Node<DataNode>[]
   edges?: Edge<DataEdge>[]
   elements?: Elements