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

fix: store actions blocking main thread

Browse Source 
* map function overwriting nodes causes main thread to be blocked
* instead use splice
This commit is contained in:
Braks
2021-10-20 23:46:47 +02:00
parent ff7ee5c7fe
commit 5f500bca18
5 changed files with 91 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Nodes/Node.vue
+31 -35
View File
@@ -1,28 +1,20 @@
<script lang="ts" setup>
import { DraggableEventListener } from '@braks/revue-draggable'
import { Node, NodeDimensionUpdate, NodeType, SnapGrid } from '~/types'
import { Node, NodeType, SnapGrid } from '~/types'
import { NodeIdContextKey } from '~/context'
import { useHooks, useStore } from '~/composables'
interface NodeProps {
node: Node
type: NodeType
scale?: number
selected?: boolean
draggable?: boolean
selectable?: boolean
connectable?: boolean
selectNodesOnDrag?: boolean
snapGrid?: SnapGrid
}
const props = withDefaults(defineProps<NodeProps>(), {
selected: false,
draggable: true,
selectable: true,
connectable: true,
selectNodesOnDrag: true,
scale: 1,
})
const store = useStore()
@@ -31,6 +23,10 @@ provide(NodeIdContextKey, props.node.id)
const nodeElement = templateRef<HTMLDivElement>('node-element', null)
const selectable = computed(() => props.node.selectable ?? store.elementsSelectable)
const draggable = computed(() => props.node.draggable ?? store.nodesDraggable)
const connectable = computed(() => props.node.connectable ?? store.nodesConnectable)
const onMouseEnterHandler = () =>
props.node.__rf.isDragging && ((event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node }))
@@ -41,10 +37,11 @@ const onMouseLeaveHandler = () =>
props.node.__rf.isDragging && ((event: MouseEvent) => hooks.nodeMouseLeave.trigger({ event, node: props.node }))
const onContextMenuHandler = () => (event: MouseEvent) => hooks.nodeContextMenu.trigger({ event, node: props.node })
const onSelectNodeHandler = (event: MouseEvent) => {
if (!props.draggable) {
if (!draggable) {
const n = props.node
if (props.selectable) {
if (selectable) {
store.unsetNodesSelection()
if (!props.selected) {
@@ -60,13 +57,13 @@ const onDragStart: DraggableEventListener = ({ event }) => {
const n = props.node
hooks.nodeDragStart.trigger({ event, node: n })
if (props.selectNodesOnDrag && props.selectable) {
if (props.selectNodesOnDrag && selectable) {
store.unsetNodesSelection()
if (!props.selected) {
store.addSelectedElements([n])
}
} else if (!props.selectNodesOnDrag && !props.selected && props.selectable) {
} else if (!props.selectNodesOnDrag && !props.selected && selectable) {
store.unsetNodesSelection()
store.addSelectedElements([])
}
@@ -93,7 +90,7 @@ const onDragStop: DraggableEventListener = ({ event }) => {
// onDragStop also gets called when user just clicks on a node.
// Because of that we set dragging to true inside the onDrag handler and handle the click here
if (!props.node.__rf.isDragging) {
if (props.selectable && !props.selectNodesOnDrag && !props.selected) {
if (selectable && !props.selectNodesOnDrag && !props.selected) {
store.addSelectedElements([n])
}
hooks.nodeClick.trigger({ event, node: n })
@@ -109,30 +106,29 @@ const onDragStop: DraggableEventListener = ({ event }) => {
hooks.nodeDragStop.trigger({ event, node: n })
}
useResizeObserver(nodeElement, (entries) => {
const updates: NodeDimensionUpdate[] = entries.map((entry) => ({
id: entry.target.getAttribute('data-id') as string,
nodeElement: entry.target as HTMLDivElement,
}))
store.updateNodeDimensions(updates)
})
onMounted(() => {
store.updateNodeDimensions([
{
id: props.node.id,
nodeElement: nodeElement.value,
forceUpdate: true,
},
])
store.updateNodeDimensions({
id: props.node.id,
nodeElement: nodeElement.value,
forceUpdate: true,
})
useResizeObserver(nodeElement, (entries) =>
entries.forEach((entry) => {
store.updateNodeDimensions({
id: entry.target.getAttribute('data-id') as string,
nodeElement: entry.target as HTMLDivElement,
})
}),
)
})
</script>
<template>
<DraggableCore
cancel=".nodrag"
:disabled="!props.draggable"
:scale="props.scale"
:disabled="!draggable"
:scale="store.transform[2]"
:grid="props.snapGrid"
:enable-user-select-hack="false"
@start="onDragStart"
@@ -146,13 +142,13 @@ onMounted(() => {
`vue-flow__node-${props.node.type}`,
{
selected: props.selected,
selectable: props.selectable,
selectable: selectable,
},
]"
:style="{
zIndex: props.selected ? 10 : 3,
transform: `translate(${props.node.__rf.position.x}px,${props.node.__rf.position.y}px)`,
pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
pointerEvents: selectable || draggable ? 'all' : 'none',
opacity: props.node.__rf.width !== null && props.node.__rf.height !== null ? 1 : 0,
...props.node.style,
}"
@@ -170,7 +166,7 @@ onMounted(() => {
xPos: props.node.__rf.position.x,
yPos: props.node.__rf.position.y,
selected: props.selected,
connectable: props.connectable,
connectable,
sourcePosition: props.node.sourcePosition,
targetPosition: props.node.targetPosition,
dragging: props.node.__rf.isDragging,
@@ -184,7 +180,7 @@ onMounted(() => {
xPos: props.node.__rf.position.x,
yPos: props.node.__rf.position.y,
selected: props.selected,
connectable: props.connectable,
connectable,
sourcePosition: props.node.sourcePosition,
targetPosition: props.node.targetPosition,
dragging: props.node.__rf.isDragging,
src/container/Flow/Flow.vue
+1 -1
View File
@@ -151,7 +151,7 @@ const edgeTypes = createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes })
:multi-selection-key-code="props.multiSelectionKeyCode"
:selection-key-code="props.selectionKeyCode"
>
<NodeRenderer :node-types="nodeTypes">
<NodeRenderer :node-types="nodeTypes" :select-nodes-on-drag="props.selectNodesOnDrag">
<template v-for="nodeName of Object.keys(nodeTypes)" #[`node-${nodeName}`]="nodeProps">
<slot :name="`node-${nodeName}`" v-bind="nodeProps"></slot>
</template>
src/container/NodeRenderer/NodeRenderer.vue
+5 -5
View File
@@ -6,9 +6,12 @@ import { useStore } from '~/composables'
interface NodeRendererProps {
nodeTypes: Record<string, NodeType>
selectNodesOnDrag?: boolean
}
const props = defineProps<NodeRendererProps>()
const props = withDefaults(defineProps<NodeRendererProps>(), {
selectNodesOnDrag: true,
})
const store = useStore()
@@ -49,12 +52,9 @@ const type = (node: TNode) => {
<Node
:node="node"
:type="type(node)"
:scale="store.transform[2]"
:snap-grid="store.snapToGrid ? store.snapGrid : undefined"
:select-nodes-on-drag="props.selectNodesOnDrag"
:selected="store.selectedElements?.some(({ id }) => id === node.id)"
:selectable="node.selectable || store.elementsSelectable"
:connectable="node.connectable || store.nodesConnectable"
:draggable="node.draggable || store.nodesDraggable"
>
<template #default="nodeProps">
<slot :name="`node-${node.type}`" v-bind="nodeProps"></slot>
src/store/useFlowStore.ts
+53 -71
View File
@@ -1,6 +1,6 @@
import { setActivePinia, createPinia, defineStore, StoreDefinition } from 'pinia'
import isEqual from 'fast-deep-equal'
import { Edge, FlowState, Node, NodeDiffUpdate, RevueFlowActions, XYPosition } from '~/types'
import { Edge, FlowState, Node, RevueFlowActions } from '~/types'
import { clampPosition, getDimensions } from '~/utils'
import { getConnectedEdges, getNodesInside, getRectOfNodes, isEdge, isNode, parseEdge, parseNode } from '~/utils/graph'
import { getHandleBounds } from '~/components/Nodes/utils'
@@ -69,83 +69,70 @@ export default function useFlowStore(preloadedState: FlowState): StoreDefinition
this.nodes = nextNodes
this.edges = nextEdges
},
updateNodeDimensions(updates) {
this.nodes = this.nodes.map((node) => {
const update = updates.find((u) => u.id === node.id)
if (update) {
const dimensions = getDimensions(update.nodeElement)
const doUpdate =
dimensions.width &&
dimensions.height &&
(node.__rf.width !== dimensions.width || node.__rf.height !== dimensions.height || update.forceUpdate)
updateNodeDimensions({ id, nodeElement, forceUpdate }) {
const i = this.nodes.map((x) => x.id).indexOf(id)
const node = this.nodes[i]
const dimensions = getDimensions(nodeElement)
const doUpdate =
dimensions.width &&
dimensions.height &&
(node.__rf.width !== dimensions.width || node.__rf.height !== dimensions.height || forceUpdate)
if (doUpdate) {
const handleBounds = getHandleBounds(update.nodeElement, this.transform[2])
if (doUpdate) {
const handleBounds = getHandleBounds(nodeElement, this.transform[2])
return {
...node,
__rf: {
...node.__rf,
...dimensions,
handleBounds,
},
}
}
}
return node
})
this.nodes.splice(i, 1, {
...node,
__rf: {
...node.__rf,
...dimensions,
handleBounds,
},
})
}
},
updateNodePos(payload) {
const { id, pos } = payload
let position: XYPosition = pos
updateNodePos({ id, pos }) {
const i = this.nodes.map((x) => x.id).indexOf(id)
const node = this.nodes[i]
if (this.snapToGrid) {
const [gridSizeX, gridSizeY] = this.snapGrid
position = {
pos = {
x: gridSizeX * Math.round(pos.x / gridSizeX),
y: gridSizeY * Math.round(pos.y / gridSizeY),
}
}
this.nodes = this.nodes.map((node) => {
if (node.id === id) {
return {
...node,
__rf: {
...node.__rf,
position,
},
}
}
return node
this.nodes.splice(i, 1, {
...node,
__rf: {
...node.__rf,
position: pos,
},
})
},
updateNodePosDiff(payload: NodeDiffUpdate) {
const { id, diff, isDragging } = payload
updateNodePosDiff({ id, diff, isDragging }) {
const i = this.nodes.map((x) => x.id || this.selectedElements?.find((sNode) => sNode.id === id)).indexOf(id)
const node = this.nodes[i]
this.nodes = this.nodes.map((node) => {
if (id === node.id || this.selectedElements?.find((sNode) => sNode.id === node.id)) {
const updatedNode = {
...node,
__rf: {
...node.__rf,
isDragging,
},
}
const updatedNode = {
...node,
__rf: {
...node.__rf,
isDragging,
},
}
if (diff) {
updatedNode.__rf.position = {
x: node.__rf.position.x + diff.x,
y: node.__rf.position.y + diff.y,
}
}
return updatedNode
if (diff) {
updatedNode.__rf.position = {
x: node.__rf.position.x + diff.x,
y: node.__rf.position.y + diff.y,
}
}
return node
this.nodes.splice(i, 1, {
...node,
...updatedNode,
})
},
setUserSelection(mousePos) {
@@ -198,26 +185,21 @@ export default function useFlowStore(preloadedState: FlowState): StoreDefinition
const selectedElementsUpdated = !isEqual(selectedElementsArr, this.selectedElements)
this.selectedElements = selectedElementsUpdated ? selectedElementsArr : this.selectedElements
},
initD3Zoom(payload) {
const { d3Zoom, d3Selection, d3ZoomHandler } = payload
initD3Zoom({ d3ZoomHandler, d3Zoom, d3Selection }) {
this.d3Zoom = d3Zoom
this.d3Selection = d3Selection
this.d3ZoomHandler = d3ZoomHandler
},
setMinZoom(minZoom) {
this.d3Zoom?.scaleExtent([minZoom, this.maxZoom])
this.minZoom = minZoom
},
setMaxZoom(maxZoom) {
this.d3Zoom?.scaleExtent([this.minZoom, maxZoom])
this.maxZoom = maxZoom
},
setTranslateExtent(translateExtent) {
this.d3Zoom?.translateExtent(translateExtent)
this.translateExtent = translateExtent
},
setNodeExtent(nodeExtent) {
@@ -241,10 +223,10 @@ export default function useFlowStore(preloadedState: FlowState): StoreDefinition
updateSize(size) {
this.dimensions = size
},
setConnectionNodeId(payload) {
this.connectionNodeId = payload.connectionNodeId
this.connectionHandleId = payload.connectionHandleId
this.connectionHandleType = payload.connectionHandleType
setConnectionNodeId({ connectionHandleId, connectionHandleType, connectionNodeId }) {
this.connectionNodeId = connectionNodeId
this.connectionHandleId = connectionHandleId
this.connectionHandleType = connectionHandleType
},
setInteractive(isInteractive) {
this.nodesDraggable = isInteractive
src/types/actions.ts
+1 -1
View File
@@ -5,7 +5,7 @@ import { SetConnectionId } from './connection'
export interface RevueFlowActions {
setElements: (elements: Elements) => void
updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void
updateNodeDimensions: (update: NodeDimensionUpdate) => void
updateNodePos: (payload: NodePosUpdate) => void
updateNodePosDiff: (payload: NodeDiffUpdate) => void
setUserSelection: (mousePos: XYPosition) => void