Fixed branches' positions not being accurate
This commit is contained in:
parent
576efc39ea
commit
189dbfe725
2 changed files with 15 additions and 15 deletions
|
@ -26,10 +26,9 @@ const _props = defineProps<{ links?: Link[] }>();
|
||||||
const links = toRef(_props, "links");
|
const links = toRef(_props, "links");
|
||||||
|
|
||||||
const observer = new MutationObserver(updateNodes);
|
const observer = new MutationObserver(updateNodes);
|
||||||
const resizeObserver = new ResizeObserver(updateBounds);
|
const resizeObserver = new ResizeObserver(updateNodes);
|
||||||
|
|
||||||
const nodes = ref<Record<string, LinkNode | undefined>>({});
|
const nodes = ref<Record<string, LinkNode | undefined>>({});
|
||||||
const boundingRect = ref(new DOMRect());
|
|
||||||
|
|
||||||
const resizeListener = ref<Element | null>(null);
|
const resizeListener = ref<Element | null>(null);
|
||||||
|
|
||||||
|
@ -39,7 +38,6 @@ onMounted(() => {
|
||||||
if (resListener != null) {
|
if (resListener != null) {
|
||||||
resizeObserver.observe(resListener);
|
resizeObserver.observe(resListener);
|
||||||
}
|
}
|
||||||
updateNodes();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const validLinks = computed(
|
const validLinks = computed(
|
||||||
|
@ -58,7 +56,7 @@ const validLinks = computed(
|
||||||
const observerOptions = {
|
const observerOptions = {
|
||||||
attributes: true,
|
attributes: true,
|
||||||
childList: true,
|
childList: true,
|
||||||
subtree: true
|
subtree: false
|
||||||
};
|
};
|
||||||
|
|
||||||
provide(RegisterLinkNodeInjectionKey, (id, element) => {
|
provide(RegisterLinkNodeInjectionKey, (id, element) => {
|
||||||
|
@ -74,27 +72,28 @@ provide(UnregisterLinkNodeInjectionKey, id => {
|
||||||
nodes.value[id] = undefined;
|
nodes.value[id] = undefined;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let isDirty = true;
|
||||||
|
let boundingRect = resizeListener.value?.getBoundingClientRect();
|
||||||
function updateNodes() {
|
function updateNodes() {
|
||||||
if (resizeListener.value != null) {
|
if (resizeListener.value != null && isDirty) {
|
||||||
|
isDirty = false;
|
||||||
|
nextTick(() => {
|
||||||
|
boundingRect = resizeListener.value?.getBoundingClientRect();
|
||||||
Object.keys(nodes.value).forEach(id => updateNode(id));
|
Object.keys(nodes.value).forEach(id => updateNode(id));
|
||||||
|
isDirty = true
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateNode(id: string) {
|
function updateNode(id: string) {
|
||||||
const node = nodes.value[id];
|
const node = nodes.value[id];
|
||||||
if (!node) {
|
if (!node || boundingRect == null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const linkStartRect = node.element.getBoundingClientRect();
|
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() {
|
node.x = linkStartRect.x + linkStartRect.width / 2 - boundingRect.x;
|
||||||
if (resizeListener.value != null) {
|
node.y = linkStartRect.y + linkStartRect.height / 2 - boundingRect.y;
|
||||||
boundingRect.value = resizeListener.value.getBoundingClientRect();
|
|
||||||
updateNodes();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -165,6 +165,7 @@ export default defineComponent({
|
||||||
|
|
||||||
.tab-buttons-container {
|
.tab-buttons-container {
|
||||||
width: calc(100% - 14px);
|
width: calc(100% - 14px);
|
||||||
|
z-index: 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-buttons-container:not(.floating) {
|
.tab-buttons-container:not(.floating) {
|
||||||
|
|
Loading…
Reference in a new issue