fix: store actions blocking main thread

* map function overwriting nodes causes main thread to be blocked * instead use splice
bcakmakoglu · Oct 20, 2021 · 5f500bc · 5f500bc · vercel · Oct 20, 2021
1 parent ff7ee5c
commit 5f500bc
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 113 deletions.
diff --git a/src/components/Nodes/Node.vue b/src/components/Nodes/Node.vue
@@ -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,

diff --git a/src/container/Flow/Flow.vue b/src/container/Flow/Flow.vue
@@ -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>

diff --git a/src/container/NodeRenderer/NodeRenderer.vue b/src/container/NodeRenderer/NodeRenderer.vue
@@ -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>

diff --git a/src/store/useFlowStore.ts b/src/store/useFlowStore.ts
@@ -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,
-              },
-            }
-
-            if (diff) {
-              updatedNode.__rf.position = {
-                x: node.__rf.position.x + diff.x,
-                y: node.__rf.position.y + diff.y,
-              }
-            }
+        const updatedNode = {
+          ...node,
+          __rf: {
+            ...node.__rf,
+            isDragging,
+          },
+        }
 
-            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

diff --git a/src/types/actions.ts b/src/types/actions.ts
@@ -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