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

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

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