create store for comment draft
This commit is contained in:
parent
13cbfd8309
commit
94ae220174
7 changed files with 162 additions and 47 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue