refactor: perfomance optimisations through less dependency tracking

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

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -28,11 +28,13 @@ const connectionLineVisible = computed(
   () => !!(store.nodesConnectable && sourceNode.value && store.connectionNodeId && store.connectionHandleType),
 )
 const edges = computed(() => store.edges.filter((edge) => !edge.isHidden))
+const dimensions = computed(() => store.dimensions)
+const transform = computed(() => `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`)
 </script>
 <template>
-  <svg :width="store.dimensions.width" :height="store.dimensions.height" class="vue-flow__edges">
+  <svg :width="dimensions.width" :height="dimensions.height" class="vue-flow__edges">
     <MarkerDefinitions :color="props.arrowHeadColor" />
-    <g :transform="`translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`">
+    <g :transform="transform">
       <template v-for="edge of edges" :key="edge.id">
         <Edge
           :edge="edge"

src/container/Flow/Flow.vue

@@ -118,7 +118,6 @@ const store = useStore(props)
 const hooks = useHooks(emit)
 
 const init = (opts: typeof props) => {
-  store.$state = { ...store.$state, ...opts }
   store.setElements(opts.elements)
   store.setMinZoom(opts.minZoom)
   store.setMaxZoom(opts.maxZoom)

src/container/NodeRenderer/NodeRenderer.vue

@@ -33,6 +33,8 @@ const nodes = computed(() => {
 
   return n.filter((node) => !node.isHidden)
 })
+const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`)
+const snapGrid = computed(() => (store.snapToGrid ? store.snapGrid : undefined))
 
 const type = (node: TNode) => {
   const nodeType = node.type || 'default'
@@ -42,19 +44,17 @@ const type = (node: TNode) => {
   }
   return type
 }
+const selected = (nodeId: string) => store.selectedElements?.some(({ id }) => id === nodeId)
 </script>
 <template>
-  <div
-    class="vue-flow__nodes"
-    :style="{ transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})` }"
-  >
+  <div class="vue-flow__nodes" :style="{ transform }">
     <template v-for="node of nodes" :key="node.id">
       <Node
         :node="node"
         :type="type(node)"
-        :snap-grid="store.snapToGrid ? store.snapGrid : undefined"
+        :snap-grid="snapGrid"
         :select-nodes-on-drag="props.selectNodesOnDrag"
-        :selected="store.selectedElements?.some(({ id }) => id === node.id)"
+        :selected="selected(node.id)"
       >
         <template #default="nodeProps">
           <slot :name="`node-${node.type}`" v-bind="nodeProps"></slot>

src/container/ZoomPane/ZoomPane.vue

@@ -55,6 +55,7 @@ const clampedZoom = clamp(props.defaultZoom, store.minZoom, store.maxZoom)
 const transform = ref({ x: clampedX, y: clampedY, zoom: clampedZoom })
 const d3Zoom = ref(zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store.maxZoom]).translateExtent(store.translateExtent))
 const d3Selection = ref()
+store.transform = [transform.value.x, transform.value.y, transform.value.zoom]
 
 until(zoomPaneEl)
   .toBeTruthy()
@@ -185,8 +186,10 @@ store.dimensions = {
   height: height.value,
 }
 
-watch(width, (val) => (store.dimensions.width = val))
-watch(height, (val) => (store.dimensions.height = val))
+watch([width, height], ([newWidth, newHeight]) => {
+  store.dimensions.width = newWidth
+  store.dimensions.height = newHeight
+})
 watch(transform, (val) => (store.transform = [val.x, val.y, val.zoom]))
 
 const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper()