show absolutely positioned comment (not relative to zoom)

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));