feat(slots): Add node and edge renderer slots

* more flexibility by having the ability to use the node/edge-renderer and wrapper
* export renderer and wrapper from lib entry

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

src/components/Edges/index.ts

@@ -4,3 +4,4 @@ export { default as SmoothStepEdge } from './SmoothStepEdge.vue'
 export { default as StraightEdge } from './StraightEdge.vue'
 export { default as EdgeAnchor } from './EdgeAnchor.vue'
 export { default as EdgeText } from './EdgeText.vue'
+export { default as EdgeWrapper } from './Edge.vue'

src/components/Nodes/index.ts

@@ -1,3 +1,4 @@
 export { default as DefaultNode } from './DefaultNode.vue'
 export { default as InputNode } from './InputNode.vue'
 export { default as OutputNode } from './OutputNode.vue'
+export { default as NodeWrapper } from './Node.vue'

src/container/VueFlow/VueFlow.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { CSSProperties, onBeforeUnmount } from 'vue'
-import diff from 'microdiff'
 import { invoke } from '@vueuse/core'
 import {
   ConnectionLineType,
@@ -155,7 +154,7 @@ invoke(async () => {
   store.instance = instance
 })
 
-throttledWatch(elements, (val) => store.setElements(val), { flush: 'post', deep: true, throttle: 10 })
+throttledWatch(elements, store.setElements, { flush: 'post', deep: true, throttle: 10 })
 throttledWatch(store.elements, (val) => (elements.value = val), { flush: 'post', deep: true, throttle: 10 })
 
 onMounted(() => {
@@ -179,58 +178,65 @@ const transitionName = computed(() => {
   <div class="vue-flow">
     <Transition key="vue-flow-transition" :name="transitionName">
       <Suspense>
-        <ZoomPane
+        <template #default>
-          key="zoom-pane"
+          <ZoomPane
-          :selection-key-code="store.selectionKeyCode"
+            v-show="store.isReady"
-          :zoom-activation-key-code="store.zoomActivationKeyCode"
+            key="zoom-pane"
-          :default-zoom="store.defaultZoom"
+            :selection-key-code="store.selectionKeyCode"
-          :default-position="store.defaultPosition"
+            :zoom-activation-key-code="store.zoomActivationKeyCode"
-          :zoom-on-scroll="store.zoomOnScroll"
+            :default-zoom="store.defaultZoom"
-          :zoom-on-pinch="store.zoomOnPinch"
+            :default-position="store.defaultPosition"
-          :zoom-on-double-click="store.zoomOnDoubleClick"
+            :zoom-on-scroll="store.zoomOnScroll"
-          :pan-on-scroll="store.panOnScroll"
+            :zoom-on-pinch="store.zoomOnPinch"
-          :pan-on-scroll-speed="store.panOnScrollSpeed"
+            :zoom-on-double-click="store.zoomOnDoubleClick"
-          :pan-on-scroll-mode="store.panOnScrollMode"
+            :pan-on-scroll="store.panOnScroll"
-          :pane-moveable="store.paneMoveable"
+            :pan-on-scroll-speed="store.panOnScrollSpeed"
-        >
+            :pan-on-scroll-mode="store.panOnScrollMode"
-          <template #default="zoomPaneProps">
+            :pane-moveable="store.paneMoveable"
-            <SelectionPane
+          >
-              key="selection-pane"
+            <template #default="zoomPaneProps">
-              :delete-key-code="store.deleteKeyCode"
+              <SelectionPane
-              :multi-selection-key-code="store.multiSelectionKeyCode"
+                key="selection-pane"
-              :selection-key-code="store.selectionKeyCode"
+                :delete-key-code="store.deleteKeyCode"
-            >
+                :multi-selection-key-code="store.multiSelectionKeyCode"
-              <NodeRenderer key="node-renderer" :select-nodes-on-drag="store.selectNodesOnDrag">
+                :selection-key-code="store.selectionKeyCode"
-                <template
-                  v-for="nodeName of Object.keys(store.getNodeTypes)"
-                  #[`node-${nodeName}`]="nodeProps"
-                  :key="`node-${nodeName}`"
-                >
-                  <slot :name="`node-${nodeName}`" v-bind="nodeProps"></slot>
-                </template>
-              </NodeRenderer>
-              <EdgeRenderer
-                key="edge-renderer"
-                :connection-line-type="store.connectionLineType"
-                :connection-line-style="store.connectionLineStyle"
-                :arrow-head-color="store.arrowHeadColor"
-                :marker-end-id="store.markerEndId"
               >
-                <template
+                <slot name="node-renderer" v-bind="{ nodes: store.getNodes, nodeTypes: store.getNodeTypes }">
-                  v-for="edgeName of Object.keys(store.getEdgeTypes)"
+                  <NodeRenderer key="node-renderer" :select-nodes-on-drag="store.selectNodesOnDrag">
-                  #[`edge-${edgeName}`]="edgeProps"
+                    <template
-                  :key="`edge-${edgeName}`"
+                      v-for="nodeName of Object.keys(store.getNodeTypes)"
-                >
+                      #[`node-${nodeName}`]="nodeProps"
-                  <slot :name="`edge-${edgeName}`" v-bind="edgeProps"></slot>
+                      :key="`node-${nodeName}`"
-                </template>
+                    >
-                <template #custom-connection-line="customConnectionLineProps">
+                      <slot :name="`node-${nodeName}`" v-bind="nodeProps"></slot>
-                  <slot key="connection-line" name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
+                    </template>
-                </template>
+                  </NodeRenderer>
-              </EdgeRenderer>
+                </slot>
-            </SelectionPane>
+                <slot name="edge-renderer" v-bind="{ edges: store.getEdges, edgeTypes: store.getEdgeTypes }">
-            <slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
+                  <EdgeRenderer
-          </template>
+                    key="edge-renderer"
-        </ZoomPane>
+                    :connection-line-type="store.connectionLineType"
+                    :connection-line-style="store.connectionLineStyle"
+                    :arrow-head-color="store.arrowHeadColor"
+                    :marker-end-id="store.markerEndId"
+                  >
+                    <template
+                      v-for="edgeName of Object.keys(store.getEdgeTypes)"
+                      #[`edge-${edgeName}`]="edgeProps"
+                      :key="`edge-${edgeName}`"
+                    >
+                      <slot :name="`edge-${edgeName}`" v-bind="edgeProps"></slot>
+                    </template>
+                    <template #custom-connection-line="customConnectionLineProps">
+                      <slot key="connection-line" name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
+                    </template>
+                  </EdgeRenderer>
+                </slot>
+              </SelectionPane>
+              <slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
+            </template>
+          </ZoomPane>
+        </template>
         <template v-if="store.loading" #fallback>
           <slot key="loading-indicator" name="loading-indicator">
             <LoadingIndicator key="default-loading-indicator" v-bind="store.loading">

src/container/ZoomPane/ZoomPane.vue

@@ -181,7 +181,8 @@ store.dimensions = {
   height: height.value,
 }
 
-await until(() => store.isReady).toBe(true)
+// skip waiting for ssr
+if (import.meta.env.SSR || typeof window === 'undefined') await until(() => store.isReady)
 
 watch(
   [width, height],

src/index.ts

@@ -1,4 +1,6 @@
 export { default as VueFlow } from './container/VueFlow/VueFlow.vue'
+export { default as NodeRenderer } from './container/NodeRenderer/NodeRenderer.vue'
+export { default as EdgeRenderer } from './container/EdgeRenderer/EdgeRenderer.vue'
 export { default as Handle } from './components/Handle/Handle.vue'
 export * from './components/Edges'
 export * from './components/Nodes'