studio-variable/designtopack
3
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,
(newValue) => {
if (newValue) {
openedFile.value = singleFile;
openedFile.value = newValue;
}
},
{ immediate: true }

57
src/stores/dialog.js
View file

@ -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 {