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) {