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

pdf viewer : show draft comment marker

Browse source
This commit is contained in:
isUnknown 2024-11-19 16:59:20 +01:00
parent b3c921cd31
commit 8b9bd9e4ab
2 changed files with 14 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/project/brief/PdfViewer.vue
View file

@ -67,17 +67,17 @@ const currentPageIndex = ref(1);
watch(isCommentsOpen, (newVal) => {
if (newVal) {
setCommentBubbles();
setCommentMarkers();
} else {
removeCommentBubbles();
removeCommentMarkers();
}
});
watch(openedFile, (newVal) => {
removeCommentBubbles();
removeCommentMarkers();
if (newVal.comments) {
console.log(newVal.comments);
setCommentBubbles();
setCommentMarkers();
}
});
@ -122,7 +122,7 @@ const onPdfLoaded = () => {
observePages();
};
function setCommentBubbles() {
function setCommentMarkers() {
if (!comments.value) return;
comments.value.forEach((comment) => {
const bubble = document.createElement("a");
@ -154,26 +154,28 @@ function unhighlight(comment) {
target.classList.remove("highlight");
}
function removeCommentBubbles() {
function removeCommentMarkers() {
document.querySelectorAll(".comment-marker").forEach((bubble) => {
bubble.parentNode.removeChild(bubble);
});
}
function showDraftBubble(draftComment) {
console.log(draftComment);
const bubble = document.createElement("a");
bubble.classList.add("comment-bubble");
bubble.classList.add("comment-bubble--draft");
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.pageIndex}"] .page-inner-container`
`.vpv-page-inner-container[aria-label="page ${draftComment.position.pageIndex}"] .page-inner-container`
);
container.appendChild(bubble);
console.log(container);
}
</script>