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>

package.json

@@ -59,7 +59,7 @@
     "typescript": "^4.4.4",
     "typescript-transform-paths": "^3.3.1",
     "unplugin-auto-import": "^0.4.12",
-    "vite": "^2.6.10",
+    "vite": "^2.6.14",
     "vite-svg-loader": "^2.2.0",
     "vue": "^3.2.22",
     "vue-router": "^4.0.12",

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>

src/store/index.ts

@@ -1,91 +1,2 @@
-import { ConnectionMode, EdgeTypes, FlowState, NodeTypes, PanOnScrollMode } from '~/types'
-import { createHooks } from '~/composables'
-import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
-
-export const defaultNodeTypes: NodeTypes = {
-  input: markRaw(InputNode),
-  default: markRaw(DefaultNode),
-  output: markRaw(OutputNode),
-}
-
-export const defaultEdgeTypes: EdgeTypes = {
-  default: markRaw(BezierEdge),
-  straight: markRaw(StraightEdge),
-  step: markRaw(StepEdge),
-  smoothstep: markRaw(SmoothStepEdge),
-}
-
-export const initialState = (): FlowState => ({
-  dimensions: {
-    width: 0,
-    height: 0,
-  },
-  transform: [0, 0, 1],
-  elements: [],
-  nodes: [],
-  edges: [],
-  selectedElements: undefined,
-  selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
-
-  d3Zoom: undefined,
-  d3Selection: undefined,
-  d3ZoomHandler: undefined,
-  minZoom: 0.5,
-  maxZoom: 2,
-  translateExtent: [
-    [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
-    [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
-  ],
-
-  nodeExtent: [
-    [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
-    [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
-  ],
-  zoomOnScroll: true,
-  zoomOnPinch: true,
-  zoomOnDoubleClick: true,
-  panOnScroll: false,
-  panOnScrollSpeed: 0.5,
-  panOnScrollMode: PanOnScrollMode.Free,
-  paneMoveable: true,
-  edgeUpdaterRadius: 10,
-
-  nodesSelectionActive: false,
-  selectionActive: false,
-
-  userSelectionRect: {
-    startX: 0,
-    startY: 0,
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
-    draw: false,
-  },
-
-  arrowHeadColor: '#b1b1b7',
-  connectionNodeId: undefined,
-  connectionHandleId: undefined,
-  connectionHandleType: 'source',
-  connectionPosition: { x: NaN, y: NaN },
-  connectionMode: ConnectionMode.Loose,
-
-  snapGrid: [15, 15],
-  snapToGrid: false,
-
-  nodesDraggable: true,
-  nodesConnectable: true,
-  elementsSelectable: true,
-
-  multiSelectionActive: false,
-
-  isReady: false,
-  hooks: createHooks(),
-  storageKey: undefined,
-  instance: undefined,
-
-  vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
-})
-
 export { default as useStateStore } from './stateStore'
+export { defaultEdgeTypes, defaultNodeTypes, initialState } from './utils'

src/store/stateStore.ts

@@ -1,10 +1,10 @@
 import { setActivePinia, createPinia, defineStore, StoreDefinition } from 'pinia'
 import diff from 'microdiff'
-import { parseElements } from './utils'
+import { parseElements, defaultNodeTypes, defaultEdgeTypes } from './utils'
 import { FlowState, Node, FlowActions, Elements, FlowGetters, Edge, EdgeTypes, NodeTypes } from '~/types'
 import { clampPosition, getDimensions, getConnectedEdges, getNodesInside, getRectOfNodes, isNode } from '~/utils'
 import { getHandleBounds } from '~/components/Nodes/utils'
-import { defaultEdgeTypes, defaultNodeTypes } from '~/store/index'
+import parseElementsWorker from '~/workers/parseElements'
 
 const pinia = createPinia()
 
@@ -13,9 +13,6 @@ export default function flowStore(
   preloadedState: FlowState,
 ): StoreDefinition<string, FlowState, FlowGetters, FlowActions> {
   setActivePinia(pinia)
-  const { nextEdges, nextNodes } = parseElements(preloadedState.elements, [], [], preloadedState.nodeExtent)
-  preloadedState.nodes = nextNodes
-  preloadedState.edges = nextEdges
 
   return defineStore({
     id: id ?? 'vue-flow',
@@ -52,11 +49,23 @@ export default function flowStore(
       },
     },
     actions: {
-      setElements(elements) {
+      async setElements(elements) {
-        const { nextNodes, nextEdges } = parseElements(elements, this.nodes, this.edges, this.nodeExtent)
+        let next: any = {
+          nextEdges: [],
+          nextNodes: [],
+        }
+        if (import.meta.env.SSR || typeof window === 'undefined') {
+          next = parseElements(elements, this.nodes, this.edges, this.nodeExtent)
+        } else {
+          const { workerFn, workerTerminate } = parseElementsWorker()
+          next = await workerFn(toRaw(elements), toRaw(this.nodes), toRaw(this.edges), toRaw(this.nodeExtent)).catch(() =>
+            workerTerminate('ERROR'),
+          )
+          workerTerminate('SUCCESS')
+        }
         this.elements = elements
-        this.nodes = nextNodes
+        this.nodes = next.nextNodes
-        this.edges = nextEdges
+        this.edges = next.nextEdges
       },
       updateNodeDimensions({ id, nodeElement, forceUpdate }) {
         const i = this.nodes.map((x) => x.id).indexOf(id)

src/store/utils.ts

@@ -1,11 +1,99 @@
-import { Edge, Elements, Node, NodeExtent } from '~/types'
+import { ConnectionMode, Edge, EdgeTypes, Elements, FlowState, Node, NodeExtent, NodeTypes, PanOnScrollMode } from '~/types'
 import { isEdge, isNode, parseEdge, parseNode } from '~/utils'
+import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
+import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
+import { createHooks } from '~/composables'
 
 type NextElements = {
   nextNodes: Node[]
   nextEdges: Edge[]
 }
 
+export const defaultNodeTypes: NodeTypes = {
+  input: markRaw(InputNode),
+  default: markRaw(DefaultNode),
+  output: markRaw(OutputNode),
+}
+
+export const defaultEdgeTypes: EdgeTypes = {
+  default: markRaw(BezierEdge),
+  straight: markRaw(StraightEdge),
+  step: markRaw(StepEdge),
+  smoothstep: markRaw(SmoothStepEdge),
+}
+
+export const initialState = (): FlowState => ({
+  dimensions: {
+    width: 0,
+    height: 0,
+  },
+  transform: [0, 0, 1],
+  elements: [],
+  nodes: [],
+  edges: [],
+  selectedElements: undefined,
+  selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
+
+  d3Zoom: undefined,
+  d3Selection: undefined,
+  d3ZoomHandler: undefined,
+  minZoom: 0.5,
+  maxZoom: 2,
+  translateExtent: [
+    [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
+    [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
+  ],
+
+  nodeExtent: [
+    [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
+    [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
+  ],
+  zoomOnScroll: true,
+  zoomOnPinch: true,
+  zoomOnDoubleClick: true,
+  panOnScroll: false,
+  panOnScrollSpeed: 0.5,
+  panOnScrollMode: PanOnScrollMode.Free,
+  paneMoveable: true,
+  edgeUpdaterRadius: 10,
+
+  nodesSelectionActive: false,
+  selectionActive: false,
+
+  userSelectionRect: {
+    startX: 0,
+    startY: 0,
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    draw: false,
+  },
+
+  arrowHeadColor: '#b1b1b7',
+  connectionNodeId: undefined,
+  connectionHandleId: undefined,
+  connectionHandleType: 'source',
+  connectionPosition: { x: NaN, y: NaN },
+  connectionMode: ConnectionMode.Loose,
+
+  snapGrid: [15, 15],
+  snapToGrid: false,
+
+  nodesDraggable: true,
+  nodesConnectable: true,
+  elementsSelectable: true,
+
+  multiSelectionActive: false,
+
+  isReady: false,
+  hooks: createHooks(),
+  storageKey: undefined,
+  instance: undefined,
+
+  vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
+})
+
 export const parseElements = (elements: Elements, nodes: Node[], edges: Edge[], nodeExtent: NodeExtent) => {
   const nextElements: NextElements = {
     nextNodes: [],

src/workers/parseElements.ts

@@ -0,0 +1,80 @@
+import { Connection, Edge, Elements, Node, NodeExtent, XYPosition } from '~/types'
+
+export default () =>
+  useWebWorkerFn((elements: Elements, nodes: Node[], edges: Edge[], nodeExtent: NodeExtent) => {
+    const clamp = (val: number, min = 0, max = 1): number => Math.min(Math.max(val, min), max)
+
+    const clampPosition = (position: XYPosition, extent: NodeExtent): XYPosition => ({
+      x: clamp(position.x, extent[0][0], extent[1][0]),
+      y: clamp(position.y, extent[0][1], extent[1][1]),
+    })
+
+    const parseNode = (node: Node, nodeExtent: NodeExtent): Node =>
+      Object.assign(node, {
+        id: node.id.toString(),
+        type: node.type || 'default',
+        __rf: {
+          position: clampPosition(node.position, nodeExtent),
+          width: undefined,
+          height: undefined,
+          handleBounds: {},
+          isDragging: false,
+        },
+      })
+
+    const parseEdge = (edge: Edge): Edge =>
+      Object.assign(edge, {
+        source: edge.source.toString(),
+        target: edge.target.toString(),
+        sourceHandle: edge.sourceHandle ? edge.sourceHandle.toString() : null,
+        targetHandle: edge.targetHandle ? edge.targetHandle.toString() : null,
+        id: edge.id.toString(),
+        type: edge.type || 'default',
+      })
+
+    const isEdge = (element: Node | Connection | Edge): element is Edge =>
+      'id' in element && 'source' in element && 'target' in element
+
+    const isNode = (element: Node | Connection | Edge): element is Node =>
+      'id' in element && !('source' in element) && !('target' in element)
+
+    const nextElements: any = {
+      nextNodes: [],
+      nextEdges: [],
+    }
+
+    for (const element of elements) {
+      if (isNode(element)) {
+        const storeNode = nodes[nodes.map((x) => x.id).indexOf(element.id)]
+
+        if (storeNode) {
+          const updatedNode: Node = Object.assign(storeNode, element)
+          if (!updatedNode.__rf) updatedNode.__rf = {}
+
+          if (storeNode.position.x !== element.position.x || storeNode.position.y !== element.position.y) {
+            updatedNode.__rf.position = element.position
+          }
+
+          if (typeof element.type !== 'undefined' && element.type !== storeNode.type) {
+            // we reset the elements dimensions here in order to force a re-calculation of the bounds.
+            // When the type of a node changes it is possible that the number or positions of handles changes too.
+            updatedNode.__rf.width = undefined
+          }
+
+          nextElements.nextNodes.push(updatedNode)
+        } else {
+          nextElements.nextNodes.push(parseNode(element, nodeExtent))
+        }
+      } else if (isEdge(element)) {
+        const storeEdge = edges[edges.map((x) => x.id).indexOf(element.id)]
+
+        if (storeEdge) {
+          nextElements.nextEdges.push(Object.assign(storeEdge, element))
+        } else {
+          nextElements.nextEdges.push(parseEdge(element))
+        }
+      }
+    }
+
+    return nextElements
+  })

yarn.lock

@@ -5456,10 +5456,10 @@ vite-svg-loader@^2.2.0:
     "@vue/compiler-sfc" "^3.0.11"
     svgo "^2.3.0"
 
-vite@^2.6.10:
+vite@^2.6.14:
-  version "2.6.10"
+  version "2.6.14"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-2.6.10.tgz#7a4f420c6e2c7d9062c7f9ce4578a817c72b3842"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.6.14.tgz#35c09a15e4df823410819a2a239ab11efb186271"
-  integrity sha512-XbevwpDJMs3lKiGEj0UQScsOCpwHIjFgfzPnFVkPgnxsF9oPv1uGyckLg58XkXv6LnO46KN9yZqJzINFmAxtUg==
+  integrity sha512-2HA9xGyi+EhY2MXo0+A2dRsqsAG3eFNEVIo12olkWhOmc8LfiM+eMdrXf+Ruje9gdXgvSqjLI9freec1RUM5EA==
   dependencies:
     esbuild "^0.13.2"
     postcss "^8.3.8"