Feature: PDF Annotations plugin

src/plugins/pdfAnnotations/.orig/BIMDataPDFAnnotations/BIMDataPDFAnnotations.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="bimdata-pdf-annotations">
+    <div class="bimdata-pdf-annotations__note-params">
+      <BIMDataInput v-model="currentNoteId" type="number" min="1" />
+      <div
+        class="color-input"
+        :style="{ 'background-color': currentColor }"
+        @click="isOpenColorSelector = !isOpenColorSelector"
+      >
+        <Transition name="fade">
+          <BIMDataColorSelector
+            v-show="isOpenColorSelector"
+            class="color-selector"
+            :model-value="currentColor.slice(1)"
+            @update:model-value="currentColor = `#${$event}`"
+          />
+        </Transition>
+      </div>
+    </div>
+    <BIMDataButton color="primary" fill radius icon @click="addAnnotation">
+      <BIMDataIconPlus size="xs" />
+    </BIMDataButton>
+  </div>
+</template>
+
+<script>
+import { computed, inject, ref } from "vue";
+import PDFAnnotation from "./PDFAnnotation.vue";
+
+export default {
+  setup() {
+    const $viewer = inject("$viewer");
+    const viewer = $viewer.localContext.pluginComponentInstances.get("plan");
+
+    const model = computed(() => viewer.model);
+    const isFirstOpening = ref(true);
+    const isOpenColorSelector = ref(false);
+
+    const currentNoteId = ref(1);
+    const currentPage = computed(() => (viewer.pdfPageIndex ?? 0) + 1);
+    const currentColor = ref("#008000");
+
+    const addAnnotation = () => {
+      viewer.startAnnotationMode(({ x, y }) => {
+        createAnnotation({
+          id: currentNoteId.value,
+          page: currentPage.value,
+          color: currentColor.value,
+          x,
+          y,
+        });
+        viewer.stopAnnotationMode();
+      });
+    };
+
+    const createAnnotation = ({ id, page, color, x, y }) => {
+      const noteId = +id;
+      const isVisible = computed(() => currentPage.value === page);
+      const isActive = computed(() => +currentNoteId.value === noteId);
+
+      const annotation = $viewer.state.addAnnotation({
+        component: PDFAnnotation,
+        props: {
+          noteId,
+          color,
+          isVisible,
+          isActive,
+          remove: () => deleteAnnotation(annotation),
+        },
+        x,
+        y,
+        z: 0,
+      });
+    };
+
+    const deleteAnnotation = annotation => {
+      $viewer.state.removeAnnotation(annotation);
+    };
+
+    return {
+      // References
+      currentColor,
+      currentNoteId,
+      isFirstOpening,
+      isOpenColorSelector,
+      model,
+      // Methods
+      addAnnotation,
+    };
+  },
+  onOpen() {
+    this.currentNoteId = 1;
+    this.currentColor = "#008000";
+  },
+  onClose() {
+    this.currentNoteId = -1;
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.bimdata-pdf-annotations {
+  &__note-params {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    .color-input {
+      position: relative;
+      z-index: 1;
+      min-width: 28px;
+      height: 28px;
+      border-radius: 4px;
+
+      .color-selector {
+        position: absolute;
+        top: 36px;
+        right: 0;
+      }
+    }
+  }
+}
+</style>

src/plugins/pdfAnnotations/.orig/BIMDataPDFAnnotations/PDFAnnotation.vue

@@ -0,0 +1,142 @@
+<template>
+  <div
+    v-show="isVisible"
+    ref="pin"
+    class="pdf-annotation"
+    :style="{
+      cursor: isActive ? (grabbing ? 'grabbing' : 'grab') : 'default',
+    }"
+  >
+    <div class="pdf-annotation__cursor">
+      <BIMDataIconLocation :custom-size="28 * resolution" :fill-color="color" />
+      <span class="pdf-annotation__cursor__title">{{ noteId }}</span>
+    </div>
+
+    <template v-if="isActive">
+      <BIMDataButton
+        class="pdf-annotation__btn-delete"
+        color="primary"
+        :width="`${20 * resolution}px`"
+        :height="`${20 * resolution}px`"
+        fill
+        rounded
+        icon
+        @click="isOpenDelete = true"
+      >
+        <BIMDataIconClose :custom-size="10 * resolution" />
+      </BIMDataButton>
+    </template>
+
+    <Transition name="fade">
+      <template v-if="isOpenDelete">
+        <BIMDataSafeZoneInline
+          class="pdf-annotation__safe-zone"
+          @confirm-delete="remove(), (isOpenDelete = false)"
+          @cancel-delete="isOpenDelete = false"
+        >
+          <template #content>
+            {{ $t("pdfAnnotations.delete") }}
+          </template>
+        </BIMDataSafeZoneInline>
+      </template>
+    </Transition>
+  </div>
+</template>
+
+<script>
+import { ref, inject } from "vue";
+import useGrabbing from "../../composables/grabbing.js";
+
+export default {
+  props: {
+    noteId: {
+      type: Number,
+      required: true,
+    },
+    color: {
+      type: String,
+      required: true,
+    },
+    isVisible: {
+      type: Object,
+      required: true,
+    },
+    isActive: {
+      type: Object,
+      required: true,
+    },
+    remove: {
+      type: Function,
+      required: true,
+    },
+  },
+  emits: ["grab"],
+  setup(props, { emit }) {
+    const isOpenDelete = ref(false);
+
+    const $viewer = inject("$viewer");
+
+    const { templateRef: pin, grabbing } = useGrabbing(event => {
+      if (!props.isActive) return;
+
+      const { movementX, movementY } = event;
+      const { x, y, height, width } = pin.value.getBoundingClientRect();
+
+      const dx = x + width / 2;
+      const dy = y + height;
+
+      emit("grab", {
+        clientX: dx + movementX,
+        clientY: dy + movementY,
+      });
+    });
+
+    return {
+      // References
+      grabbing,
+      isOpenDelete,
+      pin,
+      resolution: $viewer.localContext.resolution,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.pdf-annotation {
+  height: calc(28px * var(--bimdata-local-context-resolution));
+  transform: translate(-50%, -100%);
+
+  &__cursor {
+    position: relative;
+
+    &__title {
+      position: absolute;
+      top: calc(-14px * var(--bimdata-local-context-resolution));
+      left: calc(18px * var(--bimdata-local-context-resolution));
+      min-width: calc(20px * var(--bimdata-local-context-resolution));
+      height: calc(20px * var(--bimdata-local-context-resolution));
+      border-radius: calc(10px * var(--bimdata-local-context-resolution));
+      border: calc(1px * var(--bimdata-local-context-resolution)) solid
+        var(--color-primary);
+      background-color: var(--color-white);
+
+      font-size: calc(12px * var(--bimdata-local-context-resolution));
+      padding: 1px 3px;
+      text-align: center;
+    }
+  }
+
+  &__btn-delete {
+    position: absolute;
+    top: calc(-14px * var(--bimdata-local-context-resolution));
+    left: calc(-8px * var(--bimdata-local-context-resolution));
+  }
+
+  &__safe-zone {
+    position: absolute;
+    top: calc(-25px * var(--bimdata-local-context-resolution));
+    left: calc(-113px * var(--bimdata-local-context-resolution));
+  }
+}
+</style>

src/plugins/pdfAnnotations/.orig/BIMDataPDFAnnotations/plugin.js

@@ -0,0 +1,31 @@
+import BIMDataPDFAnnotations from "./BIMDataPDFAnnotations.vue";
+
+// TODO: this plugin should be moved to the SDK
+
+export default {
+  name: "pdfAnnotations",
+  component: BIMDataPDFAnnotations,
+  addToWindows: ["plan"],
+  button: {
+    position: "right",
+    content: "simple",
+    keepOpen: true,
+    tooltip: "pdfAnnotations.tooltip",
+    icon: {
+      component: "BIMDataIconLocation",
+      options: {
+        size: "m",
+      },
+    },
+  },
+  i18n: {
+    en: {
+      tooltip: "PDF Annotations",
+      delete: "Delete",
+    },
+    fr: {
+      tooltip: "Annotations PDF",
+      delete: "Supprimer",
+    },
+  },
+};