fix: store actions blocking main thread

* map function overwriting nodes causes main thread to be blocked
* instead use splice

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,