feat: offload parsing elements to worker

* when we're not in ssr environment we use a web worker to parse the elements as this blocks the main thread when there's a good amount of nodes/edges to parse
* when in ssr we don't really care about the main thread blocking so we just parse them like usual
* update vite to latest

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

src/container/SelectionPane/SelectionPane.vue

@@ -46,9 +46,13 @@ onMounted(() => {
     }
   })
 
-  useKeyPress(props.multiSelectionKeyCode, (keyPressed) => (store.multiSelectionActive = keyPressed))
+  useKeyPress(props.multiSelectionKeyCode, (keyPressed) => {
+    store.multiSelectionActive = keyPressed
+  })
 
-  useKeyPress(props.selectionKeyCode, (keyPressed) => (selectionKeyPresed.value = keyPressed))
+  useKeyPress(props.selectionKeyCode, (keyPressed) => {
+    selectionKeyPresed.value = keyPressed
+  })
 })
 const userSelection = computed(() => selectionKeyPresed.value && (store.selectionActive || store.elementsSelectable))
 const nodesSelectionActive = computed(() => store.nodesSelectionActive)

src/container/VueFlow/VueFlow.vue

@@ -15,12 +15,14 @@ import {
   EdgeTypes,
   FlowStore,
   FlowState,
+  FlowInstance,
 } from '../../types'
 import ZoomPane from '../../container/ZoomPane/ZoomPane.vue'
 import SelectionPane from '../../container/SelectionPane/SelectionPane.vue'
 import NodeRenderer from '../../container/NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../../container/EdgeRenderer/EdgeRenderer.vue'
-import { createHooks, initFlow } from '../../composables'
+import { createHooks, initFlow, useZoomPanHelper } from '../../composables'
+import { onLoadGetElements, onLoadProject, onLoadToObject } from '~/utils'
 
 export interface FlowProps extends Partial<FlowOptions> {
   id?: string
@@ -110,7 +112,7 @@ const options = Object.assign({}, props, store.$state, props)
 // if there are preloaded elements we overwrite the current elements with the stored ones
 if (store.elements.length) elements.value = store.elements
 
-const init = (state: FlowState) => {
+const init = async (state: FlowState) => {
   for (const opt of Object.keys(state)) {
     const val = state[opt as keyof FlowState]
     if (typeof val !== 'undefined') {
@@ -119,7 +121,7 @@ const init = (state: FlowState) => {
       } else (store as any)[opt] = val
     }
   }
-  store.setElements(elements.value)
+  await store.setElements(elements.value)
   store.setMinZoom(state.minZoom)
   store.setMaxZoom(state.maxZoom)
   store.setTranslateExtent(state.translateExtent)
@@ -145,7 +147,24 @@ watch(
   },
   { flush: 'post', deep: true },
 )
-init(options)
+const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper(store)
+
+invoke(async () => {
+  await init(options)
+  const instance: FlowInstance = {
+    fitView: (params = { padding: 0.1 }) => fitView(params),
+    zoomIn,
+    zoomOut,
+    zoomTo,
+    setTransform,
+    project: onLoadProject(store),
+    getElements: onLoadGetElements(store),
+    toObject: onLoadToObject(store),
+  }
+  store.hooks.load.trigger(instance)
+  store.isReady = true
+  store.instance = instance
+})
 </script>
 <template>
   <div class="vue-flow">

src/container/ZoomPane/ZoomPane.vue

@@ -54,7 +54,6 @@ const transform = ref({ x: clampedX, y: clampedY, zoom: clampedZoom })
 const d3Zoom = ref(zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store.maxZoom]).translateExtent(store.translateExtent))
 const d3Selection = ref()
 
-const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper()
 store.transform = [transform.value.x, transform.value.y, transform.value.zoom]
 
 invoke(async () => {
@@ -184,19 +183,6 @@ store.dimensions = {
 
 invoke(async () => {
   await until(() => !isNaN(width.value) && width.value > 0 && !isNaN(height.value) && height.value > 0).toBeTruthy()
-  const instance: FlowInstance = {
-    fitView: (params = { padding: 0.1 }) => fitView(params),
-    zoomIn,
-    zoomOut,
-    zoomTo,
-    setTransform,
-    project: onLoadProject(store),
-    getElements: onLoadGetElements(store),
-    toObject: onLoadToObject(store),
-  }
-  store.hooks.load.trigger(instance)
-  store.isReady = true
-  store.instance = instance
 })
 
 watch(
@@ -225,11 +211,6 @@ watch(
         v-bind="{
           transform,
           dimensions: { width, height },
-          zoomIn,
-          zoomOut,
-          zoomTo,
-          setTransform,
-          fitView,
         }"
       />
     </Suspense>