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>

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" :type="type(edge)" :marker-end-id="props.markerEndId" :edge-updater-radius="props.edgeUpdaterRadius">
-          <template #default="edgeProps">
-            <slot :name="`edge-${edge.type}`" v-bind="edgeProps"></slot>
-          </template>
-        </Edge>
-      </template>
+      <Edge
+        v-for="edge of store.getEdges"
+        :key="edge.id"
+        :edge="edge"
+        :type="type(edge)"
+        :marker-end-id="props.markerEndId"
+        :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="node"
-          :type="type(node)"
-          :snap-grid="snapGrid"
-          :select-nodes-on-drag="props.selectNodesOnDrag"
-          :selected="selected(node.id)"
-        >
-          <template #default="nodeProps">
-            <slot :name="`node-${node.type}`" v-bind="nodeProps"></slot>
-          </template>
-        </Node>
-      </template>
+      <Node
+        v-for="node of store.getNodes"
+        :key="node.id"
+        :node="node"
+        :type="type(node)"
+        :snap-grid="snapGrid"
+        :select-nodes-on-drag="props.selectNodesOnDrag"
+      >
+        <template #default="nodeProps">
+          <slot :name="`node-${node.type}`" v-bind="nodeProps"></slot>
+        </template>
+      </Node>
     </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 },