comment 360 working

public/content/projects/1_miss-dior-blooming-bouquet/4_virtual-sample/1_piste-1/0_6.png.txt

@@ -1 +1,34 @@
+Comments:
+
+- 
+  location:
+    page:
+      uri: >
+        projects/miss-dior-blooming-bouquet/virtual-sample/piste-1
+      title: Piste 1
+    project:
+      title: Miss Dior Blooming Bouquet
+      uri: projects/miss-dior-blooming-bouquet
+    dialogUri: >
+      /projects/miss-dior-blooming-bouquet?dialog=virtual-sample
+    file:
+      uuid: file://J9q2ceZL2aW19oEU
+      url: >
+        http://localhost:8888/media/pages/projects/miss-dior-blooming-bouquet/virtual-sample/piste-1/f26b2c223b-1733765560/0_6.png
+  position:
+    x: '50.119047619048'
+    y: '42.563482466747'
+  text: test
+  author:
+    name: Adrien Payet
+    email: adrien.payet@outlook.com
+    uuid: user://WWjXgPWk
+    role: admin
+  date: 2024-12-19T16:49:15+01:00
+  id: 4b311fe6-a6e4-486f-a9ce-b8820a234e2e
+  type: comment
+  replies: [ ]
+
+----
+
 Uuid: J9q2ceZL2aW19oEU

public/content/projects/1_miss-dior-blooming-bouquet/4_virtual-sample/adrien-payet_-az60.pdf.txt

@@ -1,5 +1,5 @@
-Uuid: WrFkfiMVZuxwdYad
+Comments: 
 
 ----
 
-Comments: 
+Uuid: WrFkfiMVZuxwdYad

public/site/blueprints/files/default.yml

@@ -0,0 +1,3 @@
+fields:
+  comments:
+    type: hidden

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

@@ -9,17 +9,11 @@ return [
       $json = file_get_contents('php://input');
       $data = json_decode($json);
 
-      $parsedUrl = parse_url($data->dialogUri);
+      $page = page($data->fileParentUri);
-      $query = $parsedUrl['query'] ?? null;
+      $project = $page->parent()->template() == "project" ? $page->parent() : $page->parent()->parent();
-      parse_str($query, $queryParams);
-      $stepSlug = $queryParams['dialog'] ?? null;
-
-      $targetPageUri = $stepSlug ? $parsedUrl['path'] . '/' . $stepSlug : $parsedUrl['path'];
-
-      $project = page($parsedUrl['path']);
-      $page = page($targetPageUri);
       $file = $page->file($data->fileName);
       $user = kirby()->user($data->userUuid);   
+      
 
       $comments = $file->comments()->isEmpty() == true ? [] : Yaml::decode($file->comments()->value());
 
@@ -41,13 +35,13 @@ return [
         "type" => "comment",
       ];
 
-      if ($data->position->pageIndex) {
+      if (isset($data->position->pageIndex)) {
         $commentData["position"]["pageIndex"] = $data->position->pageIndex;
       }
 
       $newComment = new Comment($commentData);
 
-      $comments[] = $newComment->toArray();
+      $comments[] = $newComment->toArray();      
       
       $newFile = $file->update([
         'comments' => $comments

public/site/plugins/helpers/index.php

@@ -19,7 +19,7 @@ function getFileData($file) {
     $data['tags'] = $file->tags()->split();
   };
 
-  if($file->extension() == "pdf") {
+  if($file->comments()->exists()) {
     $data['comments'] = $file->comments()->exists() && $file->comments() ? Data::decode($file->comments()->value(), 'yaml') : [];
     $data['cover'] = $file->cover()->exists() && $file->cover()->isNotEmpty() ? $file->cover()->toFile()->resize(576)->url() : false;
   } 

src/components/comments/Comments.vue

@@ -202,6 +202,10 @@ async function replyComment(newComment) {
 }
 
 async function addComment(newComment) {
+  const matchFileParentUri = openedFile.value.url.match(
+    /projects\/.*?(?=\/[^/]+\/[^/]+$)/
+  );
+  newComment.fileParentUri = matchFileParentUri ? matchFileParentUri[0] : null;
   const newFile = await api.addComment(newComment);
   resetDraftComment();
   isAddOpen.value = false;

src/components/project/PdfViewer.vue

@@ -36,35 +36,6 @@ const { openedFile, isCommentsOpen, comments, draftComment } = storeToRefs(
   useDialogStore()
 );
 
-const isViewerDisabled = ref(false);
-
-watch(openedFile, () => {
-  removeCommentMarkers();
-  setCommentMarkers();
-});
-
-watch(isCommentsOpen, (newVal) => {
-  if (newVal) {
-    setCommentMarkers();
-  } else {
-    removeCommentMarkers();
-  }
-});
-
-watch(openedFile, (newVal, oldVal) => {
-  if (newVal.url === oldVal.url) return;
-
-  isViewerDisabled.value = true;
-
-  setTimeout(() => {
-    isViewerDisabled.value = false;
-    removeCommentMarkers();
-    if (newVal.comments) {
-      setCommentMarkers();
-    }
-  }, 100);
-});
-
 const currentPageIndex = ref(1);
 
 // Functions
@@ -107,46 +78,6 @@ const onPdfLoaded = () => {
 
   observePages();
 };
-
-function setCommentMarkers() {
-  if (!comments.value) return;
-  comments.value.forEach((comment) => {
-    const bubble = document.createElement("a");
-
-    bubble.classList.add("comment-marker");
-    bubble.style.left = comment.position.x + "%";
-    bubble.style.top = comment.position.y + "%";
-    bubble.href = "#comment-" + comment.id;
-
-    const container = document.querySelector(
-      `.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
-    );
-
-    console.log(container);
-
-    container.appendChild(bubble);
-
-    setTimeout(() => {
-      bubble.addEventListener("mouseenter", () => highlight(comment));
-      bubble.addEventListener("mouseleave", () => unhighlight(comment));
-    }, 100);
-  });
-}
-
-function highlight(comment) {
-  const target = document.querySelector("#comment-" + comment.id);
-  target.classList.add("highlight");
-}
-function unhighlight(comment) {
-  const target = document.querySelector("#comment-" + comment.id);
-  target.classList.remove("highlight");
-}
-
-function removeCommentMarkers() {
-  document.querySelectorAll(".comment-marker").forEach((bubble) => {
-    bubble.parentNode.removeChild(bubble);
-  });
-}
 </script>
 
 <style scoped>

src/stores/dialog.js

@@ -11,12 +11,13 @@ export const useDialogStore = defineStore("dialog", () => {
   });
 
   function updateFile(newFile) {
+    console.log(newFile);
     openedFile.value = newFile;
 
-    if (!content.value.files) return;
+    // if (!content.value.files) return;
-    content.value.files = content.value.files.map((file) =>
+    // content.value.files = content.value.files.map((file) =>
-      file.id === newFile.id ? newFile : file
+    //   file.id === newFile.id ? newFile : file
-    );
+    // );
   }
 
   const route = useRoute();
@@ -33,7 +34,6 @@ export const useDialogStore = defineStore("dialog", () => {
     { deep: true }
   );
   function showDraftMarker(draftComment) {
-    console.log("showDraftMarker");
     const bubble = document.createElement("a");
 
     bubble.classList.add("comment-marker");
@@ -42,13 +42,91 @@ export const useDialogStore = defineStore("dialog", () => {
     bubble.style.top = draftComment.position.y + "%";
     bubble.href = "#comment-" + draftComment.id;
 
-    const container = document.querySelector(
+    const container = draftComment.position.pageIndex
-      `.vpv-page-inner-container[aria-label="page ${draftComment.position.pageIndex}"] .page-inner-container`
+      ? document.querySelector(
-    );
+          `.vpv-page-inner-container[aria-label="page ${draftComment.position.pageIndex}"] .page-inner-container`
+        )
+      : document.querySelector(".track");
 
     container.appendChild(bubble);
   }
 
+  const isViewerDisabled = ref(false);
+  watch(isCommentsOpen, (newVal) => {
+    if (newVal) {
+      setCommentMarkers();
+    } else {
+      removeCommentMarkers();
+    }
+  });
+  watch(openedFile, () => {
+    removeCommentMarkers();
+    if (isCommentsOpen.value) {
+      setCommentMarkers();
+    }
+  });
+  watch(openedFile, (newVal, oldVal) => {
+    if (!isCommentsOpen.value || !oldVal || newVal.url == oldVal.url) return;
+
+    isViewerDisabled.value = true;
+
+    setTimeout(() => {
+      isViewerDisabled.value = false;
+      removeCommentMarkers();
+      if (newVal.comments) {
+        setCommentMarkers();
+      }
+    }, 100);
+  });
+  function setCommentMarkers() {
+    if (!comments.value) return;
+    comments.value.forEach((comment) => {
+      const bubble = document.createElement("a");
+
+      bubble.classList.add("comment-marker");
+      bubble.style.left = comment.position.x + "%";
+      bubble.style.top = comment.position.y + "%";
+      bubble.href = "#comment-" + comment.id;
+
+      let container = comment.position?.pageIndex
+        ? document.querySelector(
+            `.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
+          )
+        : document.querySelector(".track");
+
+      const timeOut = container ? 0 : 500;
+      setTimeout(() => {
+        container = comment.position?.pageIndex
+          ? document.querySelector(
+              `.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
+            )
+          : document.querySelector(".track");
+
+        container.appendChild(bubble);
+
+        setTimeout(() => {
+          bubble.addEventListener("mouseenter", () => highlight(comment));
+          bubble.addEventListener("mouseleave", () => unhighlight(comment));
+        }, 100);
+      }, timeOut);
+    });
+  }
+
+  function removeCommentMarkers() {
+    document.querySelectorAll(".comment-marker").forEach((bubble) => {
+      bubble.parentNode.removeChild(bubble);
+    });
+  }
+
+  function highlight(comment) {
+    const target = document.querySelector("#comment-" + comment.id);
+    target.classList.add("highlight");
+  }
+  function unhighlight(comment) {
+    const target = document.querySelector("#comment-" + comment.id);
+    target.classList.remove("highlight");
+  }
+
   return {
     content,
     openedFile,