compdfkit_web_viewer/packages/webview/src/components/CustomButton/CToolButton.vue

<template>
  <div
    class="button custom-button"
    :class="{
      active: isActive,
      [type]: type,
      [className]: className,
      'with-text': forms.includes(toolName)
    }"
    @click="onClick()"
    :title="title"
  >
    <Highlight v-if="toolName === 'highlight'" />
    <Underline v-if="toolName === 'underline'" />
    <Strikeout v-if="toolName === 'strikeout'" />
    <Squiggle v-if="toolName === 'squiggly'" />
    <Ink v-if="toolName === 'ink'" />
    <EllipseTool v-if="toolName === 'circle'" />
    <RectangleTool v-if="toolName === 'square'" />
    <ArrowTool v-if="toolName === 'arrow'" />
    <LineTool v-if="toolName === 'line'" />
    <Text v-if="toolName === 'freetext'" />
    <Stamp v-if="toolName === 'stamp'" />
    <Image v-if="toolName === 'image'" />
    <Link v-if="toolName === 'link'" />
    
    <template v-if="toolName === 'textfield'">
      <TextFieldIcon />
      <span>{{ $t('header.textField') }}</span>
    </template>
    <template v-if="toolName === 'checkbox'">
      <CheckBoxIcon />
      <span>{{ $t('header.checkbox') }}</span>
    </template>
    <template v-if="toolName === 'radiobutton'">
      <RadioButtonIcon />
      <span>{{ $t('header.radioButton') }}</span>
    </template>
    <template v-if="toolName === 'listbox'">
      <ListBoxIcon />
      <span>{{ $t('header.listBox') }}</span>
    </template>
    <template v-if="toolName === 'combobox'">
      <ComboBoxIcon />
      <span>{{ $t('header.comboButton') }}</span>
    </template>
    <template v-if="toolName === 'pushbutton'">
      <PushButtonIcon />
      <span>{{ $t('header.button') }}</span>
    </template>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useViewerStore } from '@/stores/modules/viewer'
import { useDocumentStore } from '@/stores/modules/document'
import { computed } from 'vue'
import core from '@/core'
const useViewer = useViewerStore()
const useDocument = useDocumentStore()

const { item } = defineProps(['item'])
const {
  type,
  title,
  disabled,
  className,
  toolName
} = item

const markups = ['highlight', 'underline', 'squiggly', 'strikeout']
const shapes = ['square', 'circle', 'arrow', 'line']
const annotations = ['ink', 'freetext', 'stamp', 'image', 'link']
const forms = ['textfield', 'checkbox', 'radiobutton', 'listbox', 'combobox', 'pushbutton']
const toolType = computed(() => {
  if (markups.includes(toolName)) return 'markup'
  if (shapes.includes(toolName)) return 'shape'
  if (annotations.includes(toolName)) return 'annotation'
  if (forms.includes(toolName)) return 'form'
})

const activeTool = computed(() => useDocument.getActiveTool)

const isActive = computed(() => {
  return toolName === activeTool.value
})

const changeActiveTool = (tool) => {
  useDocument.setToolState(tool)
  
  useViewer.toggleActiveHand(false)
  core.switchTool(0)
  
  core.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 onClick = (() => {
  if (markups.includes(toolName)) changeMarkupTool(toolName)
  if (shapes.includes(toolName)) changeShapeTool(toolName)
  if (annotations.includes(toolName)) changeActiveTool(toolName)
  if (forms.includes(toolName)) changeActiveTool(toolName)
})
</script>

<style lang="scss" scoped>
.custom-button {
  width: auto;
}
</style>