update: a couple more perfomance related updates

* check for selected value inside Node instead of the wrapping renderer
* instead of "parsing" elements just return the current store.elements object
* use map funct to find index

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

examples/Stress/StressExample.vue

@@ -49,7 +49,7 @@ const updateElements = () => {
 }
 </script>
 <template>
-  <VueFlow :elements="elements" @load="onLoad" @elementsRemove="onElementsRemove" @connect="onConnect">
+  <VueFlow v-model="elements" @load="onLoad" @elementsRemove="onElementsRemove" @connect="onConnect">
     <MiniMap />
     <Controls />
     <Background />

src/components/Nodes/Node.vue

@@ -7,7 +7,6 @@ import { NodeId } from '../../context'
 interface NodeProps {
   node: Node
   type: NodeType
-  selected?: boolean
   selectNodesOnDrag?: boolean
   snapGrid?: SnapGrid
 }
@@ -30,6 +29,7 @@ const connectable = computed(() =>
   typeof props.node.connectable === 'undefined' ? store.nodesConnectable : props.node.connectable,
 )
 const scale = computed(() => store.transform[2])
+const selected = computed(() => selectable && store.selectedElements?.some(({ id }) => id === props.node.id))
 
 const onMouseEnterHandler = () =>
   props.node.__rf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: props.node }))
@@ -48,7 +48,7 @@ const onSelectNodeHandler = (event: MouseEvent) => {
     if (selectable.value) {
       store.unsetNodesSelection()
 
-      if (!props.selected) store.addSelectedElements([n])
+      if (!selected.value) store.addSelectedElements([n])
     }
     store.hooks.nodeClick.trigger({ event, node: n })
   }
@@ -61,8 +61,8 @@ const onDragStart: DraggableEventListener = ({ event }) => {
   if (props.selectNodesOnDrag && selectable) {
     store.unsetNodesSelection()
 
-    if (!props.selected) store.addSelectedElements([n])
+    if (!selected.value) store.addSelectedElements([n])
-  } else if (!props.selectNodesOnDrag && !props.selected && selectable.value) {
+  } else if (!props.selectNodesOnDrag && !selected.value && selectable.value) {
     store.unsetNodesSelection()
     store.addSelectedElements([])
   }
@@ -89,7 +89,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 (selectable.value && !props.selectNodesOnDrag && !props.selected) {
+    if (selectable.value && !props.selectNodesOnDrag && !selected.value) {
       store.addSelectedElements([n])
     }
     store.hooks.nodeClick.trigger({ event, node: n })
@@ -150,13 +150,13 @@ onMounted(() => {
           'vue-flow__node',
           `vue-flow__node-${props.node.type}`,
           {
-            selected: props.selected,
+            selected,
             selectable: selectable,
           },
           props.node.class,
         ]"
         :style="{
-          zIndex: props.selected ? 10 : 3,
+          zIndex: selected ? 10 : 3,
           transform: `translate(${props.node.__rf?.position?.x}px,${props.node.__rf?.position?.y}px)`,
           pointerEvents: selectable || draggable ? 'all' : 'none',
           opacity: props.node.__rf?.width !== null && props.node.__rf?.height !== null ? 1 : 0,
@@ -176,7 +176,7 @@ onMounted(() => {
             type: props.node.type,
             xPos: props.node.__rf?.position?.x,
             yPos: props.node.__rf?.position?.y,
-            selected: props.selected,
+            selected,
             connectable,
             sourcePosition: props.node.sourcePosition,
             targetPosition: props.node.targetPosition,
@@ -191,7 +191,7 @@ onMounted(() => {
               type: props.node.type,
               xPos: props.node.__rf?.position?.x,
               yPos: props.node.__rf?.position?.y,
-              selected: props.selected,
+              selected,
               connectable,
               sourcePosition: props.node.sourcePosition,
               targetPosition: props.node.targetPosition,

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -41,13 +41,18 @@ const type = (edge: TEdge) => {
   <svg :width="dimensions.width" :height="dimensions.height" class="vue-flow__edges">
     <MarkerDefinitions :color="props.arrowHeadColor" />
     <g :transform="transform">
-      <template v-for="edge of store.getEdges" :key="edge.id">
+      <Edge
-        <Edge :edge="edge" :type="type(edge)" :marker-end-id="props.markerEndId" :edge-updater-radius="props.edgeUpdaterRadius">
+        v-for="edge of store.getEdges"
-          <template #default="edgeProps">
+        :key="edge.id"
-            <slot :name="`edge-${edge.type}`" v-bind="edgeProps"></slot>
+        :edge="edge"
-          </template>
+        :type="type(edge)"
-        </Edge>
+        :marker-end-id="props.markerEndId"
-      </template>
+        :edge-updater-radius="props.edgeUpdaterRadius"
+      >
+        <template #default="edgeProps">
+          <slot :name="`edge-${edge.type}`" v-bind="edgeProps"></slot>
+        </template>
+      </Edge>
       <ConnectionLine
         v-if="connectionLineVisible && sourceNode"
         :source-node="sourceNode"

src/container/NodeRenderer/NodeRenderer.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { invoke } from '@vueuse/core'
 import { Node as TNode } from '../../types'
 import { useStore } from '../../composables'
 import Node from '../../components/Nodes/Node.vue'
@@ -24,24 +25,26 @@ const type = (node: TNode) => {
   }
   return type
 }
-const selected = (nodeId: string) => store.selectedElements?.some(({ id }) => id === nodeId)
+invoke(async () => {
+  await until(store.getNodes).toMatch((y) => y.length > 0)
+  await until(store.transform).toMatch(([x, y, z]) => x !== 0 && y !== 0 && z !== 1)
+})
 </script>
 <template>
   <div class="vue-flow__nodes" :style="{ transform }">
     <Suspense>
-      <template v-for="node of store.getNodes" :key="node.id">
+      <Node
-        <Node
+        v-for="node of store.getNodes"
-          :node="node"
+        :key="node.id"
-          :type="type(node)"
+        :node="node"
-          :snap-grid="snapGrid"
+        :type="type(node)"
-          :select-nodes-on-drag="props.selectNodesOnDrag"
+        :snap-grid="snapGrid"
-          :selected="selected(node.id)"
+        :select-nodes-on-drag="props.selectNodesOnDrag"
-        >
+      >
-          <template #default="nodeProps">
+        <template #default="nodeProps">
-            <slot :name="`node-${node.type}`" v-bind="nodeProps"></slot>
+          <slot :name="`node-${node.type}`" v-bind="nodeProps"></slot>
-          </template>
+        </template>
-        </Node>
+      </Node>
-      </template>
     </Suspense>
   </div>
 </template>

src/container/VueFlow/VueFlow.vue

@@ -130,9 +130,10 @@ invoke(async () => {
 })
 watch(
   elements,
-  (val) => {
+  (val, oldVal) => {
     nextTick(() => {
-      store.setElements(val)
+      const hasDiff = diff(val, oldVal)
+      if (hasDiff.length > 0) store.setElements(val)
     })
   },
   { flush: 'pre', deep: true },
@@ -140,9 +141,10 @@ watch(
 
 watch(
   () => store.elements,
-  (val) => {
+  (val, oldVal) => {
     nextTick(() => {
-      elements.value = val
+      const hasDiff = diff(val, oldVal)
+      if (hasDiff.length > 0) elements.value = val
     })
   },
   { flush: 'pre', deep: true },

src/store/utils.ts

@@ -13,7 +13,7 @@ export const parseElements = (elements: Elements, nodes: Node[], edges: Edge[],
   }
   for (const element of elements) {
     if (isNode(element)) {
-      const storeNode = nodes.find((node) => node.id === element.id)
+      const storeNode = nodes[nodes.map((x) => x.id).indexOf(element.id)]
 
       if (storeNode) {
         const updatedNode: Node = {
@@ -37,7 +37,7 @@ export const parseElements = (elements: Elements, nodes: Node[], edges: Edge[],
         nextElements.nextNodes.push(parseNode(element, nodeExtent))
       }
     } else if (isEdge(element)) {
-      const storeEdge = edges.find((se) => se.id === element.id)
+      const storeEdge = edges[edges.map((x) => x.id).indexOf(element.id)]
 
       if (storeEdge) {
         nextElements.nextEdges.push({

src/utils/graph.ts

@@ -272,25 +272,13 @@ export const getConnectedEdges = (nodes: Node[], edges: Edge[]): Edge[] => {
   return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target))
 }
 
-const parseElements = (nodes: Node[], edges: Edge[]): Elements => [
+export const onLoadGetElements = (currentStore: FlowStore) => (): Elements => currentStore.elements
-  ...nodes.map((node) => {
-    const n = { ...node }
-
-    if (n.__rf?.position) n.position = n.__rf?.position
-
-    return n
-  }),
-  ...edges.map((e) => ({ ...e })),
-]
-
-export const onLoadGetElements = (currentStore: FlowStore) => (): Elements =>
-  parseElements(currentStore.nodes || [], currentStore.edges || [])
 
 export const onLoadToObject = (currentStore: FlowStore) => (): FlowExportObject => {
   // we have to stringify/parse so objects containing refs (like nodes and edges) can potentially be saved in a storage
   return JSON.parse(
     JSON.stringify({
-      elements: parseElements(currentStore.nodes || [], currentStore.edges || []),
+      elements: currentStore.elements,
       position: [currentStore.transform[0], currentStore.transform[1]],
       zoom: currentStore.transform[2],
     }),