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