From 189dbfe7252d5389135a863ac113b7ed8b4fad94 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Tue, 1 Mar 2022 23:32:21 -0600
Subject: [PATCH] Fixed branches' positions not being accurate
---
src/components/links/Links.vue | 29 ++++++++++++++---------------
src/features/tabs/TabFamily.vue | 1 +
2 files changed, 15 insertions(+), 15 deletions(-)
diff --git a/src/components/links/Links.vue b/src/components/links/Links.vue
index 8cd888a..569f38b 100644
--- a/src/components/links/Links.vue
+++ b/src/components/links/Links.vue
@@ -26,10 +26,9 @@ const _props = defineProps<{ links?: Link[] }>();
const links = toRef(_props, "links");
const observer = new MutationObserver(updateNodes);
-const resizeObserver = new ResizeObserver(updateBounds);
+const resizeObserver = new ResizeObserver(updateNodes);
const nodes = ref<Record<string, LinkNode | undefined>>({});
-const boundingRect = ref(new DOMRect());
const resizeListener = ref<Element | null>(null);
@@ -39,7 +38,6 @@ onMounted(() => {
if (resListener != null) {
resizeObserver.observe(resListener);
}
- updateNodes();
});
const validLinks = computed(
@@ -58,7 +56,7 @@ const validLinks = computed(
const observerOptions = {
attributes: true,
childList: true,
- subtree: true
+ subtree: false
};
provide(RegisterLinkNodeInjectionKey, (id, element) => {
@@ -74,27 +72,28 @@ provide(UnregisterLinkNodeInjectionKey, id => {
nodes.value[id] = undefined;
});
+let isDirty = true;
+let boundingRect = resizeListener.value?.getBoundingClientRect();
function updateNodes() {
- if (resizeListener.value != null) {
- Object.keys(nodes.value).forEach(id => updateNode(id));
+ if (resizeListener.value != null && isDirty) {
+ isDirty = false;
+ nextTick(() => {
+ boundingRect = resizeListener.value?.getBoundingClientRect();
+ Object.keys(nodes.value).forEach(id => updateNode(id));
+ isDirty = true
+ });
}
}
function updateNode(id: string) {
const node = nodes.value[id];
- if (!node) {
+ if (!node || boundingRect == null) {
return;
}
const linkStartRect = node.element.getBoundingClientRect();
- node.x = linkStartRect.x + linkStartRect.width / 2 - boundingRect.value.x;
- node.y = linkStartRect.y + linkStartRect.height / 2 - boundingRect.value.y;
-}
-function updateBounds() {
- if (resizeListener.value != null) {
- boundingRect.value = resizeListener.value.getBoundingClientRect();
- updateNodes();
- }
+ node.x = linkStartRect.x + linkStartRect.width / 2 - boundingRect.x;
+ node.y = linkStartRect.y + linkStartRect.height / 2 - boundingRect.y;
}
</script>
diff --git a/src/features/tabs/TabFamily.vue b/src/features/tabs/TabFamily.vue
index 0592a2a..a625da6 100644
--- a/src/features/tabs/TabFamily.vue
+++ b/src/features/tabs/TabFamily.vue
@@ -165,6 +165,7 @@ export default defineComponent({
.tab-buttons-container {
width: calc(100% - 14px);
+ z-index: 4;
}
.tab-buttons-container:not(.floating) {