From 129d1018b3847a8d6c9c3f6246b05883efbd1182 Mon Sep 17 00:00:00 2001
From: Pedro Dinis <pdinisricardo@gmail.com>
Date: Wed, 4 Dec 2024 18:40:22 +0200
Subject: [PATCH] Add validations to check if label name will go off document
 container

---
 src/components/DocumentPage/DocumentPage.vue | 21 ++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/DocumentPage/DocumentPage.vue b/src/components/DocumentPage/DocumentPage.vue
index d4ac32a7..c72e4ea2 100644
--- a/src/components/DocumentPage/DocumentPage.vue
+++ b/src/components/DocumentPage/DocumentPage.vue
@@ -83,7 +83,10 @@
                   :key="`label${annotation.id}`"
                   :config="{
                     listening: false,
-                    ...annotationLabelRect(bbox),
+                    ...annotationLabelRect(
+                      bbox,
+                      labelOfAnnotation(annotation).name
+                    ),
                   }"
                 >
                   <v-tag
@@ -150,7 +153,10 @@
           :key="`label${documentAnnotationSelected.id}`"
           :config="{
             listening: false,
-            ...annotationLabelRect(documentAnnotationSelected.span),
+            ...annotationLabelRect(
+              documentAnnotationSelected.span,
+              documentAnnotationSelected.labelName
+            ),
           }"
         >
           <v-tag
@@ -683,10 +689,17 @@ export default {
     /**
      * Builds the konva config object for the annotation label.
      */
-    annotationLabelRect(bbox) {
+    annotationLabelRect(bbox, labelName) {
       const rect = this.bboxToRect(this.page, bbox, true);
+
+      // calculations to check if label name will go off document
+      const calculatedX =
+        rect.x + labelName.length * 5.4 < this.scaledViewport.width
+          ? rect.x
+          : this.scaledViewport.width - labelName.length * 5.4;
+
       return {
-        x: rect.x,
+        x: calculatedX,
         y: rect.y,
       };
     },