show absolutely positioned comment (not relative to zoom)

public/assets/svg/comment-bubble.svg

@@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="white" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.625 9.625C4.97018 9.625 5.25 9.34518 5.25 9C5.25 8.65482 4.97018 8.375 4.625 8.375C4.27982 8.375 4 8.65482 4 9C4 9.34518 4.27982 9.625 4.625 9.625Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8.6875 9.625C9.03268 9.625 9.3125 9.34518 9.3125 9C9.3125 8.65482 9.03268 8.375 8.6875 8.375C8.34232 8.375 8.0625 8.65482 8.0625 9C8.0625 9.34518 8.34232 9.625 8.6875 9.625Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12.75 9.625C13.0952 9.625 13.375 9.34518 13.375 9C13.375 8.65482 13.0952 8.375 12.75 8.375C12.4048 8.375 12.125 8.65482 12.125 9C12.125 9.34518 12.4048 9.625 12.75 9.625Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9 0.875001C7.5303 0.875459 6.08825 1.27455 4.82743 2.02977C3.56661 2.78499 2.53425 3.86805 1.84029 5.1636C1.14634 6.45914 0.816789 7.91866 0.886737 9.38669C0.956684 10.8547 1.42351 12.2763 2.2375 13.5L0.875 17.125L5.4375 16.3C6.53613 16.8369 7.74178 17.1188 8.96456 17.1249C10.1873 17.131 11.3957 16.8609 12.4996 16.335C13.6035 15.809 14.5745 15.0407 15.3401 14.0872C16.1057 13.1338 16.6462 12.0198 16.9214 10.8284C17.1966 9.63696 17.1993 8.39878 16.9293 7.20616C16.6593 6.01354 16.1237 4.89723 15.3622 3.94046C14.6008 2.98368 13.6332 2.21111 12.5316 1.68034C11.43 1.14957 10.2228 0.87428 9 0.875001Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/38969543_extrait-de-louis-sullivan-form-follow-function.-de-la-tour-de-bureaux-artistiquement-consideree.pdf.txt

@@ -6,4 +6,51 @@ Uuid: s0lNtRA0Z7ybTCWG
 
 ----
 
-Template: document
+Template: document
+
+----
+
+Comments:
+
+- 
+  page:
+    uri: projects/miss-dior-blooming-bouquet
+    title: Miss Dior Blooming Bouquet
+  file:
+    uuid: file://s0lNtRA0Z7ybTCWG
+  replies: [ ]
+  text: test
+  author:
+    name: Adrien Payet
+    email: adrien.payet@outlook.com
+    uuid: user://WWjXgPWk
+    role: admin
+  date: 2024-11-11T14:30:48+01:00
+  id: m3d2a41o
+  type: comment
+  isRead: false
+  position:
+    pageIndex: 1
+    x: "225.5333404541"
+    y: 181
+- 
+  page:
+    uri: projects/miss-dior-blooming-bouquet
+    title: Miss Dior Blooming Bouquet
+  file:
+    uuid: file://s0lNtRA0Z7ybTCWG
+  replies: [ ]
+  text: autre test
+  author:
+    name: Adrien Payet
+    email: adrien.payet@outlook.com
+    uuid: user://WWjXgPWk
+    role: admin
+  position:
+    pageIndex: 1
+    x: '69.533340454102'
+    y: 117
+  date: 2024-11-11T14:40:41+01:00
+  id: m3d2mtm8
+  type: comment
+  isRead: false

public/site/plugins/comments/routes/create.php

@@ -19,8 +19,8 @@ return [
       $data = [
         'page' => $page,
         'file' => $file,
-        'filePageIndex' => $data->filePageIndex,
         'position' => [
+          'pageIndex' => $data->position->pageIndex,
           'x' => $data->position->x,
           'y' => $data->position->y
         ],

public/site/plugins/comments/src/BaseComment.php

@@ -5,7 +5,6 @@ namespace adrienpayet\comments;
 class BaseComment {
   protected $page;
   protected $file;
-  protected $filePageIndex;
   protected $position;
   protected $replies;
   protected $text;
@@ -18,7 +17,7 @@ class BaseComment {
   public function __construct($data) {
     $page = $data['page'];
     $file = $data['file'];
-    $filePageIndex = $data['filePageIndex'];
+    $position = $data['position'];
     $replies = $data['replies'] ?? [];
     $text = $data['text'];
     $author = $data['author'];
@@ -32,7 +31,6 @@ class BaseComment {
     ];
     $this->file = [
         'uuid' => (string) $file->uuid(),
-        'pageIndex' => $filePageIndex, 
     ];
     $this->replies = $replies ?? [];
     $this->text = $text;
@@ -46,6 +44,7 @@ class BaseComment {
     $this->id = $id;
     $this->type = $type;
     $this->isRead = false;
+    $this->position = $position;
   }
 
   public function page() {
@@ -94,6 +93,10 @@ class BaseComment {
     return $this->isRead;
   }
 
+  public function pageIndex() {
+    $this->position['pageIndex'];
+  }
+
   public function toArray() {
     return [
         'page' => $this->page,
@@ -101,6 +104,7 @@ class BaseComment {
         'replies' => $this->replies,
         'text' => $this->text,
         'author' => $this->author,
+        'position' => $this->position,
         'date' => $this->date,
         'id' => $this->id,
         'type' => $this->type,

src/components/comments/Comments.vue

@@ -153,13 +153,13 @@ function handleSubmit(event) {
   const date = dayjs().format();
   const newComment = {
     pageUri: page.uri + "/client-brief",
-    filePageIndex: newCommentPageIndex.value,
     fileName: file.name,
     userUuid: user.uuid,
     text: newCommentText.value,
     date,
     position:
       {
+        pageIndex: newCommentPageIndex.value,
         x: newCommentPosition.value.x,
         y: newCommentPosition.value.y,
       } ?? false,
@@ -168,6 +168,7 @@ function handleSubmit(event) {
   if (openedComment.value) {
     replyComment(newComment);
   } else {
+    console.log(newComment);
     addComment(newComment);
   }
 }

src/components/project/client-brief/PdfViewer.vue

@@ -34,7 +34,7 @@
         v-if="isCommentsOpen"
         :current-page-index="currentPageIndex"
         :file="file"
-        :comments="file.comments"
+        :comments="file.comments ?? []"
         @update:file="changeFile"
       />
     </div>
@@ -64,6 +64,12 @@ watch(isOpen, (newValue) => {
 const isCommentsOpen = ref(false);
 const currentPageIndex = ref(1);
 
+watch(isCommentsOpen, (newVal) => {
+  if (newVal) {
+    setCommentBubbles();
+  }
+});
+
 // Functions
 const onPdfLoaded = () => {
   const wrapper = document.querySelector(".vpv-pages-inner-container");
@@ -108,9 +114,29 @@ const onPdfLoaded = () => {
 function changeFile(newFile) {
   emits("update:file", newFile);
 }
+
+function setCommentBubbles() {
+  file.comments.forEach((comment) => {
+    const bubble = document.createElement("button");
+    bubble.classList.add("comment-bubble");
+    bubble.style.left = comment.position.x + "px";
+    bubble.style.top = comment.position.y + "px";
+    const container = document.querySelector(
+      `.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
+    );
+
+    container.appendChild(bubble);
+  });
+}
 </script>
 
 <style>
+button.comment-bubble {
+  position: absolute;
+  width: 1.2rem;
+  height: 1.2rem;
+  background: url("/assets/svg/comment-bubble.svg") no-repeat !important;
+}
 #vpv-container {
   width: var(--dialog-max-w);
   height: calc(var(--dialog-max-h) - var(--dialog-header-h));