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

show absolutely positioned comment (not relative to zoom)

Browse source
This commit is contained in:
isUnknown 2024-11-11 15:06:56 +01:00
parent 14321b1e8d
commit 7d2343fc4d
6 changed files with 91 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/components/project/client-brief/PdfViewer.vue
View file

@ -34,7 +34,7 @@
v-if="isCommentsOpen"
:current-page-index="currentPageIndex"
:file="file"
:comments="file.comments"
:comments="file.comments ?? []"
@update:file="changeFile"
/>
</div>
@ -64,6 +64,12 @@ watch(isOpen, (newValue) => {
const isCommentsOpen = ref(false);
const currentPageIndex = ref(1);
watch(isCommentsOpen, (newVal) => {
if (newVal) {
setCommentBubbles();
}
});
// Functions
const onPdfLoaded = () => {
const wrapper = document.querySelector(".vpv-pages-inner-container");
@ -108,9 +114,29 @@ const onPdfLoaded = () => {
function changeFile(newFile) {
emits("update:file", newFile);
}
function setCommentBubbles() {
file.comments.forEach((comment) => {
const bubble = document.createElement("button");
bubble.classList.add("comment-bubble");
bubble.style.left = comment.position.x + "px";
bubble.style.top = comment.position.y + "px";
const container = document.querySelector(
`.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
);
container.appendChild(bubble);
});
}
</script>
<style>
button.comment-bubble {
position: absolute;
width: 1.2rem;
height: 1.2rem;
background: url("/assets/svg/comment-bubble.svg") no-repeat !important;
}
#vpv-container {
width: var(--dialog-max-w);
height: calc(var(--dialog-max-h) - var(--dialog-header-h));