studio-variable/designtopack
4
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

virtual sample > dynamic : fix comments panel when active track is single file

Browse source
This commit is contained in:
isUnknown 2025-02-07 17:39:34 +01:00
parent 037fad871a
commit 9e8c8b1923
2 changed files with 30 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/project/virtual-sample/DynamicView.vue
View file

@ -81,7 +81,7 @@ watch(
singleFile, singleFile,
(newValue) => { (newValue) => {
if (newValue) { if (newValue) {
openedFile.value = singleFile; openedFile.value = newValue;
} }
}, },
{ immediate: true } { immediate: true }

57
src/stores/dialog.js
View file

@ -1,8 +1,8 @@
import { defineStore } from "pinia"; import { defineStore } from 'pinia';
import { ref, computed, watch } from "vue"; import { ref, computed, watch } from 'vue';
import { useRoute } from "vue-router"; import { useRoute } from 'vue-router';
export const useDialogStore = defineStore("dialog", () => { export const useDialogStore = defineStore('dialog', () => {
const content = ref(null); const content = ref(null);
const openedFile = ref(null); const openedFile = ref(null);
const activeTracks = ref(null); const activeTracks = ref(null);
@ -23,7 +23,7 @@ export const useDialogStore = defineStore("dialog", () => {
const route = useRoute(); const route = useRoute();
const isCommentPanelEnabled = ref(true); const isCommentPanelEnabled = ref(true);
const isCommentsOpen = ref( const isCommentsOpen = ref(
route.query.hasOwnProperty("comments") ? true : false route.query.hasOwnProperty('comments') ? true : false
); );
const openedComment = ref(null); const openedComment = ref(null);
@ -36,19 +36,19 @@ export const useDialogStore = defineStore("dialog", () => {
{ deep: true } { deep: true }
); );
function showDraftMarker(draftComment) { function showDraftMarker(draftComment) {
const bubble = document.createElement("a"); const bubble = document.createElement('a');
bubble.classList.add("comment-marker"); bubble.classList.add('comment-marker');
bubble.classList.add("comment-marker--draft"); bubble.classList.add('comment-marker--draft');
bubble.style.left = draftComment.position.x + "%"; bubble.style.left = draftComment.position.x + '%';
bubble.style.top = draftComment.position.y + "%"; bubble.style.top = draftComment.position.y + '%';
bubble.href = "#comment-" + draftComment.id; bubble.href = '#comment-' + draftComment.id;
const container = draftComment.position.pageIndex const container = draftComment.position.pageIndex
? document.querySelector( ? document.querySelector(
`.vpv-page-inner-container[aria-label="page ${draftComment.position.pageIndex}"] .page-inner-container` `.vpv-page-inner-container[aria-label="page ${draftComment.position.pageIndex}"] .page-inner-container`
) )
: document.querySelector(".track"); : document.querySelector('.track');
container.appendChild(bubble); container.appendChild(bubble);
} }
@ -87,22 +87,23 @@ export const useDialogStore = defineStore("dialog", () => {
const correspondingMarker = document.querySelector( const correspondingMarker = document.querySelector(
`.comment-marker[href="#comment-${comment.id}"]` `.comment-marker[href="#comment-${comment.id}"]`
); );
console.log(openedFile.value);
if (comment.location.file.uuid !== openedFile.value.uuid) return; if (comment.location.file.uuid !== openedFile.value.uuid) return;
if (comment.type === "comment-reply") return; if (comment.type === 'comment-reply') return;
if (correspondingMarker) return; if (correspondingMarker) return;
const bubble = document.createElement("a"); const bubble = document.createElement('a');
bubble.classList.add("comment-marker"); bubble.classList.add('comment-marker');
bubble.style.left = comment.position.x + "%"; bubble.style.left = comment.position.x + '%';
bubble.style.top = comment.position.y + "%"; bubble.style.top = comment.position.y + '%';
bubble.href = "#comment-" + comment.id; bubble.href = '#comment-' + comment.id;
let container = comment.position?.pageIndex let container = comment.position?.pageIndex
? document.querySelector( ? document.querySelector(
`.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container` `.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
) )
: document.querySelector(".track"); : document.querySelector('.track');
const timeOut = container ? 0 : 500; const timeOut = container ? 0 : 500;
setTimeout(() => { setTimeout(() => {
@ -110,13 +111,13 @@ export const useDialogStore = defineStore("dialog", () => {
? document.querySelector( ? document.querySelector(
`.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container` `.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
) )
: document.querySelector(".track"); : document.querySelector('.track');
try { try {
container.appendChild(bubble); container.appendChild(bubble);
setTimeout(() => { setTimeout(() => {
bubble.addEventListener("mouseenter", () => highlight(comment)); bubble.addEventListener('mouseenter', () => highlight(comment));
bubble.addEventListener("mouseleave", () => unhighlight(comment)); bubble.addEventListener('mouseleave', () => unhighlight(comment));
}, 100); }, 100);
} catch (error) { } catch (error) {
console.error( console.error(
@ -128,19 +129,19 @@ export const useDialogStore = defineStore("dialog", () => {
} }
function removeCommentMarkers() { function removeCommentMarkers() {
console.log("remove comment markers"); console.log('remove comment markers');
document.querySelectorAll(".comment-marker").forEach((bubble) => { document.querySelectorAll('.comment-marker').forEach((bubble) => {
bubble.parentNode.removeChild(bubble); bubble.parentNode.removeChild(bubble);
}); });
} }
function highlight(comment) { function highlight(comment) {
const target = document.querySelector("#comment-" + comment.id); const target = document.querySelector('#comment-' + comment.id);
target.classList.add("highlight"); target.classList.add('highlight');
} }
function unhighlight(comment) { function unhighlight(comment) {
const target = document.querySelector("#comment-" + comment.id); const target = document.querySelector('#comment-' + comment.id);
target.classList.remove("highlight"); target.classList.remove('highlight');
} }
return { return {