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",