comments > get absolute position of new comment

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

@@ -72,4 +72,67 @@ Comments:
   isRead: false
   position:
     x: null
-    y: null
+    y: null
+- 
+  page:
+    uri: projects/miss-dior-blooming-bouquet
+    title: Miss Dior Blooming Bouquet
+  file:
+    uuid: file://s0lNtRA0Z7ybTCWG
+    pageIndex: 1
+  replies: [ ]
+  text: test
+  author:
+    name: Adrien Payet
+    email: adrien.payet@outlook.com
+    uuid: user://WWjXgPWk
+    role: admin
+  date: 2024-11-06T16:19:29+01:00
+  id: m360ymc1
+  type: comment
+  isRead: false
+  position:
+    x: "148.03332519531"
+    y: 162
+- 
+  page:
+    uri: projects/miss-dior-blooming-bouquet
+    title: Miss Dior Blooming Bouquet
+  file:
+    uuid: file://s0lNtRA0Z7ybTCWG
+    pageIndex: 1
+  replies: [ ]
+  text: Nouveau commentaire positionné
+  author:
+    name: Adrien Payet
+    email: adrien.payet@outlook.com
+    uuid: user://WWjXgPWk
+    role: admin
+  date: 2024-11-06T16:33:11+01:00
+  id: m361g8sk
+  type: comment
+  isRead: false
+  position:
+    x: "215.03332519531"
+    y: 181
+- 
+  page:
+    uri: projects/miss-dior-blooming-bouquet
+    title: Miss Dior Blooming Bouquet
+  file:
+    uuid: file://s0lNtRA0Z7ybTCWG
+    pageIndex: 1
+  replies: [ ]
+  text: commentaire positionné
+  author:
+    name: Adrien Payet
+    email: adrien.payet@outlook.com
+    uuid: user://WWjXgPWk
+    role: admin
+  date: 2024-11-06T16:35:30+01:00
+  id: m361j842
+  type: comment
+  isRead: false
+  position:
+    x: '239.03332519531'
+    y: 74

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

@@ -21,8 +21,8 @@ return [
         'file' => $file,
         'filePageIndex' => $data->filePageIndex,
         'position' => [
-          'x' => null,
-          'y' => null
+          'x' => $data->position->x,
+          'y' => $data->position->y
         ],
         'replies' => [],
         'text' => $data->text,

src/components/comments/Comments.vue

@@ -49,7 +49,7 @@
       v-if="!openedComment && !isAddOpen"
       id="create-comment"
       class="btn btn--white-20 | w-full"
-      @click="isAddOpen = true"
+      @click="toggleCommentPositionMode(true)"
     >
       Ajouter un commentaire
     </button>
@@ -100,7 +100,7 @@
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
 import uniqid from "uniqid";
-import { computed, ref } from "vue";
+import { watch, ref } from "vue";
 import { useUserStore } from "../../stores/user";
 import { usePageStore } from "../../stores/page";
 import { useApiStore } from "../../stores/api";
@@ -120,19 +120,25 @@ const api = useApiStore();
 
 const openedComment = ref(null);
 
+const newCommentPageIndex = ref(null);
+const newCommentPosition = ref(null);
 const newCommentText = ref("");
 const isAddOpen = ref(false);
 const emits = defineEmits(["update:file"]);
-const sortedComments = computed(() => {
-  return comments.reverse();
-});
-const sortedReplies = computed(() => {
-  const sortedReplies =
-    openedComment.value && openedComment.value.replies
-      ? openedComment.value.replies.slice().reverse()
-      : [];
-  return sortedReplies;
-});
+const sortedComments = ref(comments.reverse());
+const sortedReplies =
+  openedComment.value && openedComment.value.replies
+    ? ref(openedComment.value.replies.slice().reverse())
+    : ref([]);
+
+watch(
+  () => comments,
+  (newVal) => {
+    sortedComments.value = newVal.reverse();
+  }
+);
+
+const viewContainer = document.querySelector(".vpv-pages-inner-container");
 
 // Functions
 function handleSubmit(event) {
@@ -140,11 +146,16 @@ function handleSubmit(event) {
   const date = dayjs().format();
   const newComment = {
     pageUri: page.uri + "/client-brief",
-    filePageIndex: currentPageIndex,
+    filePageIndex: newCommentPageIndex.value,
     fileName: file.name,
     userUuid: user.uuid,
     text: newCommentText.value,
     date,
+    position:
+      {
+        x: newCommentPosition.value.x,
+        y: newCommentPosition.value.y,
+      } ?? false,
     id: uniqid(),
   };
   if (openedComment.value) {
@@ -180,6 +191,42 @@ function changeFile(newFile) {
 function closeComment() {
   openedComment.value = null;
 }
+
+function toggleCommentPositionMode(enable) {
+  if (enable) {
+    viewContainer.classList.add("waiting-comment");
+    viewContainer.addEventListener("click", handleCommentPositionClick);
+  } else {
+    viewContainer.classList.remove("waiting-comment");
+    viewContainer.removeEventListener("click", handleCommentPositionClick);
+  }
+}
+
+function handleCommentPositionClick(event) {
+  const pageContainer = event.target.closest(".page-inner-container");
+
+  const pageLabel = pageContainer
+    .closest(".vpv-page-inner-container")
+    .getAttribute("aria-label");
+  const pageIndex = pageLabel.charAt(pageLabel.length - 1);
+
+  newCommentPageIndex.value = parseInt(pageIndex);
+
+  const viewRect = viewContainer.getBoundingClientRect();
+  const pageRect = pageContainer.getBoundingClientRect();
+  const pageScroll = viewRect.top - pageRect.top;
+
+  const mouseTop = event.clientY;
+  const y = mouseTop - viewRect.top + pageScroll;
+  const x = event.clientX - pageRect.left;
+
+  newCommentPosition.value = {
+    x,
+    y,
+  };
+  isAddOpen.value = true;
+  toggleCommentPositionMode(false);
+}
 </script>
 
 <style>
@@ -275,4 +322,10 @@ function closeComment() {
 #comments-container form footer > * {
   flex-grow: 1;
 }
+
+.vpv-pages-inner-container.waiting-comment .page-inner-container,
+.vpv-pages-inner-container.waiting-comment .vpv-text-layer-text,
+.vpv-pages-inner-container.waiting-comment .vpv-text-layer-wrapper {
+  cursor: cell !important;
+}
 </style>

src/components/project/ProjectStep.vue

@@ -41,6 +41,7 @@
               data-icon="document"
             ></div>
           </template>
+          <footer>2 commentaire(s)</footer>
         </article>
       </div>
     </router-link>