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 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>
|
||||
|
||||
|
|
|
@ -165,6 +165,7 @@ export default defineComponent({
|
|||
|
||||
.tab-buttons-container {
|
||||
width: calc(100% - 14px);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.tab-buttons-container:not(.floating) {
|
||||
|
|
Loading…
Reference in a new issue