compdfkit_web_viewer/packages/webview/src/components/Signatures/DigitalSignCreatePanel.vue

<template>
  <Dialog class="digital-signature-dialog trackpad" :show="true" :dialogName="dialogName">
    <template #header>
      <CloseB class="close" @click="close" />
    </template>

    <div class="paint-container" ref="paintContainer">
      <canvas id="digitalTrackpadCanvas" :width="canvasWidth" :height="canvasHeight"></canvas>
    </div>

    <template #footer>
      <div class="rect-button white" @click="clear">{{ $t('signatures.clear') }}</div>
      <div class="rect-button white" @click="close">{{ $t('cancel') }}</div>
      <div class="rect-button blue" @click="save">{{ $t('ok') }}</div>
    </template>
  </Dialog>
</template>

<script setup>
import { computed, watch, ref, nextTick } from 'vue'
import { useViewerStore } from '@/stores/modules/viewer'
import { useDocumentStore } from '@/stores/modules/document'
import core from '@/core'
import { isMobile } from '@/helpers/device'

const emits = defineEmits(['modifyImage'])
const dialogName = 'digitalSignCreatePanel'

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

const show = computed(() => useViewer.isElementOpen(dialogName))

const canvasWidth = ref(578)
const canvasHeight = ref(isMobile ? 0 : 270)
const paintContainer = ref()

watch(() => show.value, (newValue, oldValue) => {
  if (newValue) {
    if (isMobile) {
      nextTick(() => {
        const { clientWidth, clientHeight } = paintContainer.value
        clientWidth && canvasWidth.value !== clientWidth && (canvasWidth.value = clientWidth)
        clientHeight && canvasHeight.value !== clientHeight && (canvasHeight.value = clientHeight)
      })
    }
  }
})

const close = () => {
  useViewer.closeElement(dialogName)
  clear()
}

const clear = () => {
  core.handleSign({
    flag: 'clear'
  })
}

const save = () => {
  const imageBase64 = core.handleSign({
    type: 1,
    flag: 'image',
  })
  emits('modifyImage', imageBase64)
  close()
}
</script>

<style lang="scss">
.digital-signature-dialog {

  .dialog-container {
    padding: 16px 24px;

    main {
      margin-top: 40px;
      margin-bottom: 12px;
    }

    footer {

      .rect-button.white {
        border-radius: 2px;
      }

      .rect-button:first-child {
        margin-right: auto;
      }
    }
  }

  .paint-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 270px;
    background-color: #F2F3F5;

    canvas {
      z-index: 1;
    }

    p {
      position: absolute;
      font-size: 14px;
      line-height: 16px;
      color: #757780;
      pointer-events: none;
    }
  }
}

@media screen and (max-width: 640px) {

  .digital-signature-dialog.trackpad {

    .dialog-container {
      display: flex;
      flex-direction: column;
      width: 90vh;
      height: 90vw;
      transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      -o-transform: rotate(90deg);

      main {
        flex: 1;

        .paint-container {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>