designtopack/src/stores/dialog.js

import { defineStore } from "pinia";
import { ref, computed, watch } from "vue";
import { useRoute } from "vue-router";

export const useDialogStore = defineStore("dialog", () => {
  const content = ref(null);
  const openedFile = ref(null);

  const comments = computed(() => {
    return openedFile.value.comments;
  });

  function updateFile(newFile) {
    openedFile.value = newFile;

    if (!content.value.files) return;
    content.value.files = content.value.files.map((file) =>
      file.id === newFile.id ? newFile : file
    );
  }

  const route = useRoute();
  const isCommentsOpen = ref(
    route.query.hasOwnProperty("comments") ? true : false
  );

  const draftComment = ref({});
  watch(
    draftComment,
    (newVal) => {
      if (draftComment.value.position) showDraftMarker(newVal);
    },
    { deep: true }
  );
  function showDraftMarker(draftComment) {
    console.log("showDraftMarker");
    const bubble = document.createElement("a");

    bubble.classList.add("comment-marker");
    bubble.classList.add("comment-marker--draft");
    bubble.style.left = draftComment.position.x + "%";
    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`
    );

    container.appendChild(bubble);
  }

  return {
    content,
    openedFile,
    comments,
    draftComment,
    isCommentsOpen,
    updateFile,
  };
});