compdfkit_web_viewer/packages/webview/src/components/AnnotationContainer/AnnotationContent.vue

<template>
  <div class="annotation-view">
    <template v-if="annotationsContainers.annotationsCount > 0">
      <div v-for="(pageAnnotations, pageNumber) in annotationsContainers.annotations">
        <template v-if="pageAnnotations.pageAnnotationsCount > 0">
          <div class="page-title">
            <span>{{ $t('leftPanel.page') }} {{ pageNumber * 1 + 1 }}</span>
            <span>{{ pageAnnotations.pageAnnotationsCount }}</span>
          </div>
          <template v-for="(item) in pageAnnotations.annotations">
            <div v-if="!item.isDelete && item.type !== 'link'" class="annotation-item" @click="goToPage(item.pageIndex)">
              <div class="item-header">
                <Highlight v-if="item.type === 'highlight'" />
                <Squiggle v-else-if="item.type === 'squiggly'" />
                <Strikeout v-else-if="item.type === 'strikeout'" />
                <Underline v-else-if="item.type === 'underline'" />
                <Ink v-else-if="item.type === 'ink'" />
                <LineTool v-else-if="item.type === 'line' && (((item.tail === 'None' || item.tail === 'Unknown') && (item.head === 'None' || item.head === 'Unknown')) || (!item.tail && !item.head))" />
                <ArrowTool v-else-if="item.type === 'line' && (item.tail === 'OpenArrow' || item.head === 'OpenArrow' || item.arrow)" />
                <RectangleTool v-else-if="item.type === 'square'" />
                <EllipseTool v-else-if="item.type === 'circle'" />
                <Text v-else-if="item.type === 'freetext'" />
                <Note v-else-if="item.type === 'text'" />
                <Stamp v-else-if="item.type === 'image' || item.type === 'stamp'" />
                <span>{{ dayjs(item.createDate).format('DD/MM/YYYY HH:mm:ss') }}</span>
              </div>
              <div v-if="item.contents || item.content" class="item-content">{{ item.contents || item.content }}</div>
            </div>
          </template>
        </template>
      </div>
    </template>
    <div v-else class="no-annotations">{{ $t('leftPanel.noAnnotations') }}</div>
  </div>
</template>

<script setup>
  import { computed, ref, getCurrentInstance } from 'vue';
  import dayjs from 'dayjs'
  import core from '@/core'
  import { useDocumentStore } from '@/stores/modules/document'

  const useDocument = useDocumentStore()

  let annotationsContainers = computed(() => useDocument.getAllAnnotations)

  const markup = ['highlight', 'underline', 'squiggly', 'strikeout']

  const setAnnotationList = ({ annotations }) => {
    useDocument.initAnnotations(annotations)
    const instance = getCurrentInstance();
    instance?.proxy?.$forceUpdate();
  }
  core.addEvent('annotationChanged', setAnnotationList)

  const goToPage = (page) => {
    core.pageNumberChanged({
      value: (page * 1 + 1).toString()
    })
  }
</script>

<style lang="scss">
  .annotation-view {
    position: relative;
    height: calc(100% - 95px);
    overflow: auto;
    .page-title {
      display: flex;
      justify-content: space-between;
      padding: 6px 16px;
      color: var(--c-side-title);
      background-color: var(--c-side-annotation-bg);
      span {
        font-size: 14px;
        line-height: 20px;
      }
    }
    .annotation-item {
      padding: 4px 16px 12px;
      .item-header {
        display: flex;
        align-items: center;
        padding: 6px 0;
        color: var(--c-side-text);
        span {
          margin-left: 8px;
          font-size: 14px;
          line-height: 20px;
        }
      }
      .item-content {
        font-size: 14px;
        line-height: 20px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        color: var(--c-side-annotation-text);
        word-break: break-all;
      }
    }
    .no-annotations {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 50%);
      color: var(--c-side-text);
      text-align: center;
      font-weight: 700;
      font-size: 14px;
      line-height: 16px;
    }
  }
</style>