From 964c9b72506159f07112d91283b51d301255f40f Mon Sep 17 00:00:00 2001 From: Julien Touchais <5978-julien.touchais@users.noreply.forgemia.inra.fr> Date: Mon, 25 Nov 2024 16:00:43 +0100 Subject: [PATCH] fix(linear-sequence): :bug: wrong boxes placement --- src/components/SequenceBoard.vue | 64 ++++++++++---------------------- 1 file changed, 19 insertions(+), 45 deletions(-) diff --git a/src/components/SequenceBoard.vue b/src/components/SequenceBoard.vue index 4bb8ace..a46b891 100644 --- a/src/components/SequenceBoard.vue +++ b/src/components/SequenceBoard.vue @@ -363,37 +363,6 @@ const updateHighlightedGroupsLineCount = {} )) -/** - * Number of lines over which the sequence spreads. - */ -const lineCount = ref<number>() - -/** - * Updates the number of lines over which the sequence spreads. - * @returns The updated line count. - */ -const updateLineCount = (): typeof lineCount.value => - (lineCount.value = - lineHeight.value && - Math.round( - (sequenceContainerElement.value?.clientHeight || 0) / lineHeight.value - )) - -/** - * Number of columns over which the sequence spreads. - */ -const columnCount = ref<number>() - -/** - * Updates the number of columns over which the sequence spreads. - * @returns The updated column count. - */ -const updateColumnCount = (): typeof columnCount.value => { - updateLineCount() - return (columnCount.value = - lineCount.value && Math.ceil(nucleotideGroupsCount.value / lineCount.value)) -} - /** * Width of the sequence container. */ @@ -416,21 +385,26 @@ useMutationObserver( */ const updateSequenceContainerContentWidth = (): typeof sequenceContainerContentWidth.value => { - updateColumnCount() + const firstSequenceGroupElement = sequenceGroupElements.value[0] + if (!firstSequenceGroupElement) return + + const sequenceContainerElementWidth = + sequenceContainerElement.value?.offsetWidth + if (!sequenceContainerElementWidth) return + + const sequenceGroupElementRightMargin = parseInt( + window.getComputedStyle(firstSequenceGroupElement).marginRight + ) + if (!sequenceGroupElementRightMargin) return + + const sequenceGroupElementWidth = + firstSequenceGroupElement.offsetWidth + sequenceGroupElementRightMargin + if (!sequenceGroupElementWidth) return + return (sequenceContainerContentWidth.value = - columnCount.value && - columnCount.value * - ((sequenceContainerElement.value?.children[0] as HTMLElement) - ?.offsetWidth + - parseInt( - window.getComputedStyle( - sequenceContainerElement.value?.children[0]! - ).marginRight - )) - - parseInt( - window.getComputedStyle(sequenceContainerElement.value?.children[0]!) - .marginRight - )) + sequenceContainerElementWidth - + ((sequenceContainerElementWidth % sequenceGroupElementWidth) + + sequenceGroupElementRightMargin)) } /** -- GitLab