From 3705a39fa80ebf36c5968d2c60816e20b62cd863 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Nov 2021 11:22:56 +0100
Subject: [PATCH] refactor: perfomance optimisations through less dependency
 tracking

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 index.html                                  |  2 +-
 src/components/Edges/Edge.vue               |  4 +++-
 src/components/Nodes/Node.vue               | 15 +++------------
 src/container/EdgeRenderer/EdgeRenderer.vue |  6 ++++--
 src/container/Flow/Flow.vue                 |  1 -
 src/container/NodeRenderer/NodeRenderer.vue | 12 ++++++------
 src/container/ZoomPane/ZoomPane.vue         |  7 +++++--
 7 files changed, 22 insertions(+), 25 deletions(-)
diff --git a/index.html b/index.html
index d98e6453..d56acde6 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8" />
   <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Vite App</title>
+  <title>🌊 Vue Flow</title>
 </head>
 <body>
 <div id="root"></div>
diff --git a/src/components/Edges/Edge.vue b/src/components/Edges/Edge.vue
index e6bd536a..993f03a9 100644
--- a/src/components/Edges/Edge.vue
+++ b/src/components/Edges/Edge.vue
@@ -99,6 +99,7 @@ const targetNodeHandles = computed(() =>
 
 const sourceHandle = computed(() => {
   if (nodes.value.sourceNode) return getHandle(nodes.value.sourceNode.__rf?.handleBounds.source, props.edge.sourceHandle ?? null)
+  else return null
 })
 const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle ?? null))
 const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
@@ -115,6 +116,7 @@ const edgePos = computed(() =>
     targetPosition.value,
   ),
 )
+const elementsSelectable = computed(() => store.elementsSelectable)
 </script>
 <template>
   <g
@@ -125,7 +127,7 @@ const edgePos = computed(() =>
       {
         selected: isSelected,
         animated: props.edge.animated,
-        inactive: !store.elementsSelectable,
+        inactive: !elementsSelectable,
         updating,
       },
       props.edge.class,
diff --git a/src/components/Nodes/Node.vue b/src/components/Nodes/Node.vue
index 23204496..ba1ba67a 100644
--- a/src/components/Nodes/Node.vue
+++ b/src/components/Nodes/Node.vue
@@ -26,6 +26,7 @@ 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 scale = computed(() => store.transform[2])
 
 const onMouseEnterHandler = () =>
   props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node }))
@@ -117,17 +118,7 @@ onMounted(() => {
     }),
   )
 
-  watch(
-    () => props.node.type,
-    () => {
-      store.updateNodeDimensions({
-        id: props.node.id,
-        nodeElement: nodeElement.value,
-        forceUpdate: true,
-      })
-    },
-  )
-  watch([() => props.node.sourcePosition, () => props.node.targetPosition], () => {
+  watch([props.node.type, props.node.sourcePosition, props.node.targetPosition], () => {
     nextTick(() => {
       store.updateNodeDimensions({
         id: props.node.id,
@@ -143,7 +134,7 @@ onMounted(() => {
   <DraggableCore
     cancel=".nodrag"
     :disabled="!draggable"
-    :scale="store.transform[2]"
+    :scale="scale"
     :grid="props.snapGrid"
     :enable-user-select-hack="false"
     @start="onDragStart"
diff --git a/src/container/EdgeRenderer/EdgeRenderer.vue b/src/container/EdgeRenderer/EdgeRenderer.vue
index db37fe31..c0654984 100644
--- a/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/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"
diff --git a/src/container/Flow/Flow.vue b/src/container/Flow/Flow.vue
index a4f48af4..e1abe3cf 100644
--- a/src/container/Flow/Flow.vue
+++ b/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)
diff --git a/src/container/NodeRenderer/NodeRenderer.vue b/src/container/NodeRenderer/NodeRenderer.vue
index e64e91e2..37992722 100644
--- a/src/container/NodeRenderer/NodeRenderer.vue
+++ b/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>
diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue
index 6ad4238b..17237619 100644
--- a/src/container/ZoomPane/ZoomPane.vue
+++ b/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()
