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

6
src/components/comments/Comments.vue
View file

@ -153,6 +153,7 @@ watch(isAddOpen, (newVal) => {
watch(
draftComment,
(newVal) => {
console.log(newVal.position);
if (newVal.position) {
emits("show-draft-bubble", newVal);
} else {
@ -248,8 +249,6 @@ function handleCommentPositionClick(event) {
.getAttribute("aria-label");
const pageIndex = pageLabel.charAt(pageLabel.length - 1);
draftComment.value.pageIndex = parseInt(pageIndex);
const viewRect = viewContainer.getBoundingClientRect();
const pageRect = pageContainer.getBoundingClientRect();
const pageScroll = viewRect.top - pageRect.top;
@ -264,6 +263,7 @@ function handleCommentPositionClick(event) {
draftComment.value.position = {
x: relativeX,
y: relativeY,
pageIndex: parseInt(pageIndex),
};
isAddOpen.value = true;
toggleCommentPositionMode(false);
@ -394,6 +394,6 @@ function openComment(comment) {
}
.comment-marker.active,
.comment-marker:focus {
background-image: var(--icon-comment-focus)
background-image: var(--icon-comment-focus);
}
</style>

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>