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() { data() {
return { return {
observer: new MutationObserver(this.updateNodes as (...args: unknown[]) => void), 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: {}, nodes: {},
links: [] links: [],
boundingRect: new DOMRect()
} as { } as {
observer: MutationObserver; observer: MutationObserver;
resizeObserver: ResizeObserver; resizeObserver: ResizeObserver;
nodes: Record<string, BranchNode>; nodes: Record<string, BranchNode>;
links: Array<BranchLink>; links: Array<BranchLink>;
boundingRect: DOMRect;
}; };
}, },
mounted() { mounted() {
@ -64,17 +66,22 @@ export default defineComponent({
} }
}, },
methods: { methods: {
updateNodes() { updateBounds() {
if (this.$refs.resizeListener != undefined) { if (this.$refs.resizeListener != undefined) {
const containerRect = (this.$refs this.boundingRect = (this.$refs
.resizeListener as HTMLElement).getBoundingClientRect(); .resizeListener as HTMLElement).getBoundingClientRect();
Object.keys(this.nodes).forEach(id => this.updateNode(id, containerRect)); 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(); const linkStartRect = this.nodes[id].element.getBoundingClientRect();
this.nodes[id].x = linkStartRect.x + linkStartRect.width / 2 - containerRect.x; this.nodes[id].x = linkStartRect.x + linkStartRect.width / 2 - this.boundingRect.x;
this.nodes[id].y = linkStartRect.y + linkStartRect.height / 2 - containerRect.y; this.nodes[id].y = linkStartRect.y + linkStartRect.height / 2 - this.boundingRect.y;
}, },
registerNode(id: string, component: ComponentPublicInstance) { registerNode(id: string, component: ComponentPublicInstance) {
const element = component.$el.parentElement; const element = component.$el.parentElement;
@ -82,10 +89,7 @@ export default defineComponent({
this.observer.observe(element, observerOptions); this.observer.observe(element, observerOptions);
this.$nextTick(() => { this.$nextTick(() => {
if (this.$refs.resizeListener != undefined) { if (this.$refs.resizeListener != undefined) {
this.updateNode( this.updateNode(id);
id,
(this.$refs.resizeListener as HTMLElement).getBoundingClientRect()
);
} }
}); });
}, },

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

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