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

comment 360 working

Browse source
This commit is contained in:
isUnknown 2024-12-19 17:11:46 +01:00
parent bc0ae8861f
commit 4daaa3dc88
8 changed files with 134 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -202,6 +202,10 @@ async function replyComment(newComment) {
}
async function addComment(newComment) {
const matchFileParentUri = openedFile.value.url.match(
/projects\/.*?(?=\/[^/]+\/[^/]+$)/
);
newComment.fileParentUri = matchFileParentUri ? matchFileParentUri[0] : null;
const newFile = await api.addComment(newComment);
resetDraftComment();
isAddOpen.value = false;

69
src/components/project/PdfViewer.vue
View file

@ -36,35 +36,6 @@ const { openedFile, isCommentsOpen, comments, draftComment } = storeToRefs(
useDialogStore()
);
const isViewerDisabled = ref(false);
watch(openedFile, () => {
removeCommentMarkers();
setCommentMarkers();
});
watch(isCommentsOpen, (newVal) => {
if (newVal) {
setCommentMarkers();
} else {
removeCommentMarkers();
}
});
watch(openedFile, (newVal, oldVal) => {
if (newVal.url === oldVal.url) return;
isViewerDisabled.value = true;
setTimeout(() => {
isViewerDisabled.value = false;
removeCommentMarkers();
if (newVal.comments) {
setCommentMarkers();
}
}, 100);
});
const currentPageIndex = ref(1);
// Functions
@ -107,46 +78,6 @@ const onPdfLoaded = () => {
observePages();
};
function setCommentMarkers() {
if (!comments.value) return;
comments.value.forEach((comment) => {
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;
const container = document.querySelector(
`.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
);
console.log(container);
container.appendChild(bubble);
setTimeout(() => {
bubble.addEventListener("mouseenter", () => highlight(comment));
bubble.addEventListener("mouseleave", () => unhighlight(comment));
}, 100);
});
}
function highlight(comment) {
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");
}
function removeCommentMarkers() {
document.querySelectorAll(".comment-marker").forEach((bubble) => {
bubble.parentNode.removeChild(bubble);
});
}
</script>
<style scoped>

94
src/stores/dialog.js
View file

@ -11,12 +11,13 @@ export const useDialogStore = defineStore("dialog", () => {
});
function updateFile(newFile) {
console.log(newFile);
openedFile.value = newFile;
if (!content.value.files) return;
content.value.files = content.value.files.map((file) =>
file.id === newFile.id ? newFile : file
);
// if (!content.value.files) return;
// content.value.files = content.value.files.map((file) =>
// file.id === newFile.id ? newFile : file
// );
}
const route = useRoute();
@ -33,7 +34,6 @@ export const useDialogStore = defineStore("dialog", () => {
{ deep: true }
);
function showDraftMarker(draftComment) {
console.log("showDraftMarker");
const bubble = document.createElement("a");
bubble.classList.add("comment-marker");
@ -42,13 +42,91 @@ export const useDialogStore = defineStore("dialog", () => {
bubble.style.top = draftComment.position.y + "%";
bubble.href = "#comment-" + draftComment.id;
const container = document.querySelector(
`.vpv-page-inner-container[aria-label="page ${draftComment.position.pageIndex}"] .page-inner-container`
);
const container = draftComment.position.pageIndex
? document.querySelector(
`.vpv-page-inner-container[aria-label="page ${draftComment.position.pageIndex}"] .page-inner-container`
)
: document.querySelector(".track");
container.appendChild(bubble);
}
const isViewerDisabled = ref(false);
watch(isCommentsOpen, (newVal) => {
if (newVal) {
setCommentMarkers();
} else {
removeCommentMarkers();
}
});
watch(openedFile, () => {
removeCommentMarkers();
if (isCommentsOpen.value) {
setCommentMarkers();
}
});
watch(openedFile, (newVal, oldVal) => {
if (!isCommentsOpen.value || !oldVal || newVal.url == oldVal.url) return;
isViewerDisabled.value = true;
setTimeout(() => {
isViewerDisabled.value = false;
removeCommentMarkers();
if (newVal.comments) {
setCommentMarkers();
}
}, 100);
});
function setCommentMarkers() {
if (!comments.value) return;
comments.value.forEach((comment) => {
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;
let container = comment.position?.pageIndex
? document.querySelector(
`.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
)
: document.querySelector(".track");
const timeOut = container ? 0 : 500;
setTimeout(() => {
container = comment.position?.pageIndex
? document.querySelector(
`.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
)
: document.querySelector(".track");
container.appendChild(bubble);
setTimeout(() => {
bubble.addEventListener("mouseenter", () => highlight(comment));
bubble.addEventListener("mouseleave", () => unhighlight(comment));
}, 100);
}, timeOut);
});
}
function removeCommentMarkers() {
document.querySelectorAll(".comment-marker").forEach((bubble) => {
bubble.parentNode.removeChild(bubble);
});
}
function highlight(comment) {
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");
}
return {
content,
openedFile,