Merge branch 'main' of https://framagit.org/isUnknown/design-to-pack

* 'main' of https://framagit.org/isUnknown/design-to-pack:
  comment 360 working
  create comment working
  create store for comment draft

src/components/comments/Comments.vue

@@ -118,15 +118,12 @@ import { useRoute } from "vue-router";
 
 dayjs.locale("fr");
 
-const emits = defineEmits(["show-draft-marker"]);
-
 const { user } = useUserStore();
 const { page } = usePageStore();
 const dialog = useDialogStore();
-const { comments, openedFile } = storeToRefs(useDialogStore());
+const { comments, openedFile, draftComment } = storeToRefs(useDialogStore());
 const api = useApiStore();
 
-const draftComment = ref({});
 const openedComment = ref(null);
 
 const isAddOpen = ref(false);
@@ -150,17 +147,10 @@ watch(isAddOpen, (newVal) => {
   }
 });
 
-watch(
-  draftComment,
-  (newVal) => {
-    if (newVal.position) {
-      emits("show-draft-marker", newVal);
-    }
-  },
-  { deep: true }
-);
-
-const viewContainer = document.querySelector(".vpv-pages-inner-container");
+const viewContainer =
+  openedFile.value.type === "document"
+    ? document.querySelector(".vpv-pages-inner-container")
+    : document.querySelector(".track");
 
 window.addEventListener("keydown", (event) => {
   if (
@@ -171,6 +161,7 @@ window.addEventListener("keydown", (event) => {
     handleSubmit();
   }
 });
+
 // Functions
 function handleSubmit(event = null) {
   if (event) {
@@ -211,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;
@@ -240,8 +235,18 @@ function toggleCommentPositionMode(enable) {
 }
 
 function handleCommentPositionClick(event) {
+  if (openedFile.value.type === "document") {
+    prepareDraftCommentInPdf(event);
+  } else {
+    prepareDraftCommentInImage(event);
+  }
+  isAddOpen.value = true;
+  toggleCommentPositionMode(false);
+}
+
+function prepareDraftCommentInPdf(event) {
   const pageContainer = event.target.closest(".page-inner-container");
-  if (!pageContainer) return;
+  if (!pageContainer || !viewContainer) return;
 
   const pageLabel = pageContainer
     .closest(".vpv-page-inner-container")
@@ -259,13 +264,30 @@ function handleCommentPositionClick(event) {
   const relativeX = (x / pageRect.width) * 100;
   const relativeY = (y / pageRect.height) * 100;
 
+  console.log(pageIndex);
+
   draftComment.value.position = {
     x: relativeX,
     y: relativeY,
     pageIndex: parseInt(pageIndex),
   };
-  isAddOpen.value = true;
-  toggleCommentPositionMode(false);
+}
+
+function prepareDraftCommentInImage(event) {
+  if (!viewContainer) return;
+
+  const imageRect = viewContainer.getBoundingClientRect();
+
+  const mouseTop = event.clientY;
+  const mouseLeft = event.clientX;
+
+  const relativeX = ((mouseLeft - imageRect.left) / imageRect.width) * 100;
+  const relativeY = ((mouseTop - imageRect.top) / imageRect.height) * 100;
+
+  draftComment.value.position = {
+    x: relativeX,
+    y: relativeY,
+  };
 }
 
 function openComment(comment) {
@@ -366,6 +388,8 @@ function openComment(comment) {
   flex-grow: 1;
 }
 
+.track.waiting-comment,
+.track.waiting-comment .drag-zone,
 .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 {

src/components/project/PdfViewer.vue

@@ -18,7 +18,7 @@
       >{{ isCommentsOpen ? "Masquer" : "Afficher" }} les commentaires</span
     >
   </button>
-  <Comments v-if="isCommentsOpen" @show-draft-marker="showDraftMarker" />
+  <Comments v-if="isCommentsOpen" />
 </template>
 
 <script setup>
@@ -32,38 +32,9 @@ import { useRoute, useRouter } from "vue-router";
 const licenseKey = import.meta.env.VITE_VPV_LICENSE ?? 'd0ab730a-ebba-4060-856c-76d322565645';
 useLicense({ licenseKey });
 
-const { openedFile, isCommentsOpen, comments } = storeToRefs(useDialogStore());
-
-const draftComment = ref(null);
-
-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 { openedFile, isCommentsOpen, comments, draftComment } = storeToRefs(
+  useDialogStore()
+);
 
 const currentPageIndex = ref(1);
 
@@ -107,60 +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`
-    );
-
-    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);
-  });
-}
-
-function showDraftMarker(draftComment) {
-  const bubble = document.createElement("a");
-
-  bubble.classList.add("comment-marker");
-  bubble.classList.add("comment-marker--draft");
-  bubble.style.left = draftComment.position.x + "%";
-  bubble.style.top = draftComment.position.y + "%";
-  bubble.href = "#comment-" + draftComment.id;
-
-  const container = document.querySelector(
-    `.vpv-page-inner-container[aria-label="page ${draftComment.position.pageIndex}"] .page-inner-container`
-  );
-
-  container.appendChild(bubble);
-}
 </script>
 
 <style>

src/components/project/virtual-sample/StaticView.vue

@@ -24,7 +24,7 @@
       <span class="label">Verre parachevé</span>
     </button>
   </header>
-  <div class="dialog__inner" id="verre-brut">
+  <div id="vpv-container" class="dialog__inner">
     <PdfViewer />
   </div>
 </template>