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