profectus/TMT-Demo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Performance improvements :)

Browse source
This commit is contained in:
thepaperpilot 2021-09-04 20:19:59 -05:00
parent 433795e52e
commit d7b6df5b4f
2 changed files with 17 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/components/tree/Branches.vue
View file

@ -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);
}
});
},

2
src/data/layers/demo.ts
View file

@ -112,8 +112,6 @@ export default {
return true;
},
upgrades: {
rows: 999,
cols: 5,
data: {
11: {
title: "Gain points",