From 9e8c8b1923b299c6646a8ce92d21beac65f6c8a1 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 7 Feb 2025 17:39:34 +0100
Subject: [PATCH] virtual sample > dynamic : fix comments panel when active
 track is single file

---
 .../project/virtual-sample/DynamicView.vue    |  2 +-
 src/stores/dialog.js                          | 57 ++++++++++---------
 2 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/src/components/project/virtual-sample/DynamicView.vue b/src/components/project/virtual-sample/DynamicView.vue
index bb34a1e..8a9690b 100644
--- a/src/components/project/virtual-sample/DynamicView.vue
+++ b/src/components/project/virtual-sample/DynamicView.vue
@@ -81,7 +81,7 @@ watch(
   singleFile,
   (newValue) => {
     if (newValue) {
-      openedFile.value = singleFile;
+      openedFile.value = newValue;
     }
   },
   { immediate: true }
diff --git a/src/stores/dialog.js b/src/stores/dialog.js
index 437477a..d86c171 100644
--- a/src/stores/dialog.js
+++ b/src/stores/dialog.js
@@ -1,8 +1,8 @@
-import { defineStore } from "pinia";
-import { ref, computed, watch } from "vue";
-import { useRoute } from "vue-router";
+import { defineStore } from 'pinia';
+import { ref, computed, watch } from 'vue';
+import { useRoute } from 'vue-router';
 
-export const useDialogStore = defineStore("dialog", () => {
+export const useDialogStore = defineStore('dialog', () => {
   const content = ref(null);
   const openedFile = ref(null);
   const activeTracks = ref(null);
@@ -23,7 +23,7 @@ export const useDialogStore = defineStore("dialog", () => {
   const route = useRoute();
   const isCommentPanelEnabled = ref(true);
   const isCommentsOpen = ref(
-    route.query.hasOwnProperty("comments") ? true : false
+    route.query.hasOwnProperty('comments') ? true : false
   );
   const openedComment = ref(null);
 
@@ -36,19 +36,19 @@ export const useDialogStore = defineStore("dialog", () => {
     { deep: true }
   );
   function showDraftMarker(draftComment) {
-    const bubble = document.createElement("a");
+    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;
+    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 = draftComment.position.pageIndex
       ? document.querySelector(
           `.vpv-page-inner-container[aria-label="page ${draftComment.position.pageIndex}"] .page-inner-container`
         )
-      : document.querySelector(".track");
+      : document.querySelector('.track');
 
     container.appendChild(bubble);
   }
@@ -87,22 +87,23 @@ export const useDialogStore = defineStore("dialog", () => {
       const correspondingMarker = document.querySelector(
         `.comment-marker[href="#comment-${comment.id}"]`
       );
+      console.log(openedFile.value);
       if (comment.location.file.uuid !== openedFile.value.uuid) return;
-      if (comment.type === "comment-reply") return;
+      if (comment.type === 'comment-reply') return;
       if (correspondingMarker) return;
 
-      const bubble = document.createElement("a");
+      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;
+      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");
+        : document.querySelector('.track');
 
       const timeOut = container ? 0 : 500;
       setTimeout(() => {
@@ -110,13 +111,13 @@ export const useDialogStore = defineStore("dialog", () => {
           ? document.querySelector(
               `.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
             )
-          : document.querySelector(".track");
+          : document.querySelector('.track');
 
         try {
           container.appendChild(bubble);
           setTimeout(() => {
-            bubble.addEventListener("mouseenter", () => highlight(comment));
-            bubble.addEventListener("mouseleave", () => unhighlight(comment));
+            bubble.addEventListener('mouseenter', () => highlight(comment));
+            bubble.addEventListener('mouseleave', () => unhighlight(comment));
           }, 100);
         } catch (error) {
           console.error(
@@ -128,19 +129,19 @@ export const useDialogStore = defineStore("dialog", () => {
   }
 
   function removeCommentMarkers() {
-    console.log("remove comment markers");
-    document.querySelectorAll(".comment-marker").forEach((bubble) => {
+    console.log('remove comment markers');
+    document.querySelectorAll('.comment-marker').forEach((bubble) => {
       bubble.parentNode.removeChild(bubble);
     });
   }
 
   function highlight(comment) {
-    const target = document.querySelector("#comment-" + comment.id);
-    target.classList.add("highlight");
+    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");
+    const target = document.querySelector('#comment-' + comment.id);
+    target.classList.remove('highlight');
   }
 
   return {