compdfkit_web_viewer/packages/webview/src/components/Annotate/Annotate.vue

<template>
  <template v-for="(tool, index) in item" :key="`${tool.type}-${tool.dataElement || index}`">
    <StickyNoteButton v-if="tool.type === 'note' && !tool.hidden" :data-element="tool.dataElement" />
    <div v-else-if="['highlight', 'underline', 'strikeout', 'squiggly'].includes(tool.type)" class="markup-container">
      <Button v-if="tool.type === 'highlight' && !tool.hidden" :data-element="tool.dataElement" :class="{ active: markupActive && markupTool === 'highlight' }" @click.stop="changeMarkupTool('highlight')" :title="$t('header.highlight')"><Highlight /></Button>
      <Button v-if="tool.type === 'underline' && !tool.hidden" :data-element="tool.dataElement" :class="{ active: markupActive && markupTool === 'underline' }" @click.stop="changeMarkupTool('underline')" :title="$t('header.underline')"><Underline /></Button>
      <Button v-if="tool.type === 'strikeout' && !tool.hidden" :data-element="tool.dataElement" :class="{ active: markupActive && markupTool === 'strikeout' }" @click.stop="changeMarkupTool('strikeout')" :title="$t('header.strikeout')"><Strikeout /></Button>
      <Button v-if="tool.type === 'squiggly' && !tool.hidden" :data-element="tool.dataElement" :class="{ active: markupActive && markupTool === 'squiggly' }" @click.stop="changeMarkupTool('squiggly')" :title="$t('header.squiggly')"><Squiggle /></Button>
    </div>
    <Button v-if="tool.type === 'note' && !tool.hidden" :data-element="tool.dataElement" :class="{ active: activeTool === 'ink' }" @click="changeActiveTool('ink')" :title="$t('header.ink')">
      <Ink />
    </Button>
    <div v-else-if="['circle', 'square', 'arrow', 'line'].includes(tool.type)" class="shape-container">
      <Button v-if="tool.type === 'circle' && !tool.hidden" :data-element="tool.dataElement" :class="{ active: shapeActive && shapeTool === 'circle' }" @click.stop="changeShapeTool('circle')" :title="$t('header.circle')">
        <EllipseTool />
      </Button>
      <Button v-if="tool.type === 'square' && !tool.hidden" :data-element="tool.dataElement" :class="{ active: shapeActive && shapeTool === 'square' }" @click.stop="changeShapeTool('square')" :title="$t('header.square')">
        <RectangleTool />
      </Button>
      <Button v-if="tool.type === 'arrow' && !tool.hidden" :data-element="tool.dataElement" :class="{ active: shapeActive && shapeTool === 'arrow' }" @click.stop="changeShapeTool('arrow')" :title="$t('header.arrow')">
        <ArrowTool />
      </Button>
      <Button v-if="tool.type === 'line' && !tool.hidden" :data-element="tool.dataElement" :class="{ active: shapeActive && shapeTool === 'line' }" @click.stop="changeShapeTool('line')" :title="$t('header.line')">
        <LineTool />
      </Button>
    </div>
    <Button v-else-if="tool.type === 'freetext' && !tool.hidden" :data-element="tool.dataElement" :class="{ active: activeTool === 'freetext' }" @click="changeActiveTool('freetext')" :title="$t('header.freetext')">
      <Text />
    </Button>
    <Button v-else-if="tool.type === 'stamp' && !tool.hidden" :data-element="tool.dataElement" :class="{ active: activeTool === 'stamp' }" @click="changeActiveTool('stamp')" :title="$t('header.stamp')">
      <Stamp />
    </Button>
    <Button v-else-if="tool.type === 'image' && !tool.hidden" :data-element="tool.dataElement" :class="{ active: activeTool === 'image' }" @click="changeActiveTool('image')" :title="$t('header.image')">
      <Image />
    </Button>
    <Button v-else-if="tool.type === 'link' && !tool.hidden" :data-element="tool.dataElement" :class="{ active: activeTool === 'link' }" @click="changeActiveTool('link')" :title="$t('header.link')">
      <Link />
    </Button>
  </template>
  <div class="divider pc"></div>
  <div v-if="showColors.includes(activeTool)" class="colors-container">
    <span class="cell-container">
      <span class="cell-outer" :class="{ active: activeToolColor === '#FF0000' }" @click="setActiveToolColor('#FF0000')">
        <span class="cell red"></span></span>
    </span>
    <span class="cell-container">
      <span class="cell-outer" :class="{ active: activeToolColor === '#FFEC66' }" @click="setActiveToolColor('#FFEC66')">
        <span class="cell yellow"></span></span>
    </span>
    <span class="cell-container">
      <span class="cell-outer" :class="{ active: activeToolColor === '#2D77FA' }" @click="setActiveToolColor('#2D77FA')">
        <span class="cell blue"></span></span>
    </span>
    <span class="cell-container">
      <span class="cell-outer" :class="{ active: activeToolColor === '#64BC38' }" @click="setActiveToolColor('#64BC38')">
        <span class="cell green"></span></span>
    </span>
  </div>
</template>

<script setup>
  import { computed, onUnmounted } from 'vue'
  import { useViewerStore } from '@/stores/modules/viewer'
  import { useDocumentStore } from '@/stores/modules/document'
  import core from '@/core'
  const { switchTool, switchAnnotationEditorMode } = core

  const { item } = defineProps(['item'])

  const useDocument = useDocumentStore()
  const useViewer = useViewerStore()

  const activeTool = computed(() => useDocument.getActiveTool)
  const markupActive = computed(() => {
    const markups = ['highlight', 'underline', 'squiggly', 'strikeout']
    return markups.includes(activeTool.value)
  })
  
  const showColors = ['highlight', 'underline', 'squiggly', 'strikeout', 'square', 'circle', 'arrow', 'line', 'ink']

  const shapeActive = computed(() => {
    const shapes = ['square', 'circle', 'arrow', 'line']
    return shapes.includes(activeTool.value)
  })

  const markupTool = computed(() => useDocument.getMarkupToolState)

  const shapeTool = computed(() => useDocument.getShapeToolState)

  const activeToolColor = computed(() => useDocument.getActiveToolColor)

  const changeActiveTool = (tool) => {
    useDocument.setToolState(tool)
    
    useViewer.toggleActiveHand(false)
    switchTool(0)
    
    switchAnnotationEditorMode(0)

    if (tool === 'stamp') {
      useViewer.toggleElement('stampPanel')
    } else {
      useViewer.closeElement('stampPanel')
    }

    if (activeTool.value === 'image') {
      document.getElementById('signImageInput').click()
    }
  }

  const changeMarkupTool = (tool) => {
    useDocument.setMarkupToolState(tool)
    changeActiveTool(tool)
  }

  const changeShapeTool = (tool) => {
    useDocument.setShapeToolState(tool)
    changeActiveTool(tool)
  }

  const setActiveToolColor = (color) => {
    useDocument.setActiveToolColor(color)
  }

  const unselectImage = () => {
    if (activeTool.value === 'image') {
      changeActiveTool('image')
    }
  }
  core.addEvent('imageChange', unselectImage)

  onUnmounted(() => {
    core.removeEvent('imageChange', unselectImage)
  })
</script>

<style lang="scss">
.shape-container, .markup-container {
  display: flex;
  align-items: center;
}
.colors-container {
  display: flex;
  padding: 5px 8px;
  border: 1px solid var(--c-findbar-input-border);
  span {
    display: block;
  }
  .cell-container {
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    .cell-outer {
      border: 2px solid transparent;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      & + .cell-outer {
        margin-left: 8px;
      }
      &.active {
        border-color: var(--c-header-circle-bg);
      }
      .cell {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        &.red {
          background-color: #FF0000;
        }
        &.yellow {
          background-color: #FFEC66;
        }
        &.blue {
          background-color: #2D77FA;
        }
        &.green {
          background-color: #64BC38;
        }
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
}
</style>