alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: offload parsing elements to worker

Browse Source 
* 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>
This commit is contained in:
Braks
2021-11-20 15:52:28 +01:00
parent d1e59ef322
commit d335944e56
9 changed files with 222 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -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",

8
src/container/SelectionPane/SelectionPane.vue
View File

@@ -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)

27
src/container/VueFlow/VueFlow.vue
View File

@@ -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">

19
src/container/ZoomPane/ZoomPane.vue
View File

@@ -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>

91
src/store/index.ts
View File

@@ -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'

27
src/store/stateStore.ts
View File

@@ -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) {
const { nextNodes, nextEdges } = parseElements(elements, this.nodes, this.edges, this.nodeExtent)
async setElements(elements) {
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.edges = nextEdges
this.nodes = next.nextNodes
this.edges = next.nextEdges
},
updateNodeDimensions({ id, nodeElement, forceUpdate }) {
const i = this.nodes.map((x) => x.id).indexOf(id)

90
src/store/utils.ts
View File

@@ -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: [],

80
src/workers/parseElements.ts Normal file
View File

@@ -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
})

8
yarn.lock
View File

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