From d7b6df5b4fc3b0451bd863fb27935c359e7af7f0 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sat, 4 Sep 2021 20:19:59 -0500
Subject: [PATCH] Performance improvements :)

---
 src/components/tree/Branches.vue | 30 +++++++++++++++++-------------
 src/data/layers/demo.ts          |  2 --
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/tree/Branches.vue b/src/components/tree/Branches.vue
index 9c763b6..8b0e0ab 100644
--- a/src/components/tree/Branches.vue
+++ b/src/components/tree/Branches.vue
@@ -27,14 +27,16 @@ export default defineComponent({
     data() {
         return {
             observer: new MutationObserver(this.updateNodes as (...args: unknown[]) => void),
-            resizeObserver: new ResizeObserver(this.updateNodes as (...args: unknown[]) => void),
+            resizeObserver: new ResizeObserver(this.updateBounds as (...args: unknown[]) => void),
             nodes: {},
-            links: []
+            links: [],
+            boundingRect: new DOMRect()
         } as {
             observer: MutationObserver;
             resizeObserver: ResizeObserver;
             nodes: Record<string, BranchNode>;
             links: Array<BranchLink>;
+            boundingRect: DOMRect;
         };
     },
     mounted() {
@@ -64,17 +66,22 @@ export default defineComponent({
         }
     },
     methods: {
-        updateNodes() {
+        updateBounds() {
             if (this.$refs.resizeListener != undefined) {
-                const containerRect = (this.$refs
-                    .resizeListener as HTMLElement).getBoundingClientRect();
-                Object.keys(this.nodes).forEach(id => this.updateNode(id, containerRect));
+                this.boundingRect = (this.$refs
+                   .resizeListener as HTMLElement).getBoundingClientRect();
+                this.updateNodes();
             }
         },
-        updateNode(id: string, containerRect: DOMRect) {
+        updateNodes() {
+            if (this.$refs.resizeListener != undefined) {
+                Object.keys(this.nodes).forEach(id => this.updateNode(id));
+            }
+        },
+        updateNode(id: string) {
             const linkStartRect = this.nodes[id].element.getBoundingClientRect();
-            this.nodes[id].x = linkStartRect.x + linkStartRect.width / 2 - containerRect.x;
-            this.nodes[id].y = linkStartRect.y + linkStartRect.height / 2 - containerRect.y;
+            this.nodes[id].x = linkStartRect.x + linkStartRect.width / 2 - this.boundingRect.x;
+            this.nodes[id].y = linkStartRect.y + linkStartRect.height / 2 - this.boundingRect.y;
         },
         registerNode(id: string, component: ComponentPublicInstance) {
             const element = component.$el.parentElement;
@@ -82,10 +89,7 @@ export default defineComponent({
             this.observer.observe(element, observerOptions);
             this.$nextTick(() => {
                 if (this.$refs.resizeListener != undefined) {
-                    this.updateNode(
-                        id,
-                        (this.$refs.resizeListener as HTMLElement).getBoundingClientRect()
-                    );
+                    this.updateNode(id);
                 }
             });
         },
diff --git a/src/data/layers/demo.ts b/src/data/layers/demo.ts
index 32179da..0626f3f 100644
--- a/src/data/layers/demo.ts
+++ b/src/data/layers/demo.ts
@@ -112,8 +112,6 @@ export default {
     return true;
   },
   upgrades: {
-    rows: 999,
-    cols: 5,
     data: {
       11: {
         title: "Gain points",