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>({}); -const boundingRect = ref(new DOMRect()); const resizeListener = ref(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; } 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) {