create store for comment draft

This commit is contained in:
isUnknown 2024-12-19 16:03:20 +01:00
parent 13cbfd8309
commit 94ae220174
7 changed files with 162 additions and 47 deletions

View file

@ -118,15 +118,12 @@ import { useRoute } from "vue-router";
dayjs.locale("fr");
const emits = defineEmits(["show-draft-marker"]);
const { user } = useUserStore();
const { page } = usePageStore();
const dialog = useDialogStore();
const { comments, openedFile } = storeToRefs(useDialogStore());
const { comments, openedFile, draftComment } = storeToRefs(useDialogStore());
const api = useApiStore();
const draftComment = ref({});
const openedComment = ref(null);
const isAddOpen = ref(false);
@ -150,17 +147,10 @@ watch(isAddOpen, (newVal) => {
}
});
watch(
draftComment,
(newVal) => {
if (newVal.position) {
emits("show-draft-marker", newVal);
}
},
{ deep: true }
);
const viewContainer = document.querySelector(".vpv-pages-inner-container");
const viewContainer =
openedFile.value.type === "document"
? document.querySelector(".vpv-pages-inner-container")
: document.querySelector(".track");
window.addEventListener("keydown", (event) => {
if (
@ -171,6 +161,7 @@ window.addEventListener("keydown", (event) => {
handleSubmit();
}
});
// Functions
function handleSubmit(event = null) {
if (event) {
@ -240,8 +231,18 @@ function toggleCommentPositionMode(enable) {
}
function handleCommentPositionClick(event) {
if (openedFile.value.type === "document") {
prepareDraftCommentInPdf(event);
} else {
prepareDraftCommentInImage(event);
}
isAddOpen.value = true;
toggleCommentPositionMode(false);
}
function prepareDraftCommentInPdf(event) {
const pageContainer = event.target.closest(".page-inner-container");
if (!pageContainer) return;
if (!pageContainer || !viewContainer) return;
const pageLabel = pageContainer
.closest(".vpv-page-inner-container")
@ -259,13 +260,30 @@ function handleCommentPositionClick(event) {
const relativeX = (x / pageRect.width) * 100;
const relativeY = (y / pageRect.height) * 100;
console.log(pageIndex);
draftComment.value.position = {
x: relativeX,
y: relativeY,
pageIndex: parseInt(pageIndex),
};
isAddOpen.value = true;
toggleCommentPositionMode(false);
}
function prepareDraftCommentInImage(event) {
if (!viewContainer) return;
const imageRect = viewContainer.getBoundingClientRect();
const mouseTop = event.clientY;
const mouseLeft = event.clientX;
const relativeX = ((mouseLeft - imageRect.left) / imageRect.width) * 100;
const relativeY = ((mouseTop - imageRect.top) / imageRect.height) * 100;
draftComment.value.position = {
x: relativeX,
y: relativeY,
};
}
function openComment(comment) {
@ -366,6 +384,8 @@ function openComment(comment) {
flex-grow: 1;
}
.track.waiting-comment,
.track.waiting-comment .drag-zone,
.vpv-pages-inner-container.waiting-comment .page-inner-container,
.vpv-pages-inner-container.waiting-comment .vpv-text-layer-text,
.vpv-pages-inner-container.waiting-comment .vpv-text-layer-wrapper {