compdfkit_web_viewer/packages/webview/src/stores/modules/viewer.js

import { defineStore } from 'pinia'
import core from '@/core'

export const useViewerStore = defineStore({
  id: 'viewer',
  state: () => ({
    fullMode: false,
    currentPage: 0,
    searchStatus: false,
    scale: '',
    oldScale: '',
    newScale: '',
    themeMode: 'Light',
    pageMode: 0,
    webviewerMode: 'Standalone',
    scrollMode: 'Vertical',
    pageLabels: [],
    zoomLevel: ['auto', 'page-fit', 0.5, 1, 1.25, 1.5, 2, 2.5],
    activeTab: 0,
    activeStickNote: false,
    activeActiveMeasure: false,
    activeHand: false,
    verified: false,
    activeElements: {
      leftPanel: false,
      rightPanel: false,
      pageModePanel: false,
      stampPanel: false,
      linkPanel: false,
      compareSettingDialog: false,
      languageDialog: false,
      setPasswordModal: false,
      signCreatePanel: false,
      downloadSettingDialog: false,
      printSettingDialog: false,
      editTextPanel: false,
      preventDialog: false,
      insertPageSettingDialog: false,
      deletePageDialog: false
    },
    activeElementsTab: {
      leftPanelTab: 'THUMBS',
      rightPanelTab: 'GENERAL',
      stampPanelTab: 'STANDARD',
      signPanelTab: 'trackpad'
    },
    headers: [
      {
        type: 'toggleElementButton',
        img: 'icon-header-sidebar-line',
        element: 'leftPanel',
        dataElement: 'leftPanelButton',
        title: 'Left Panel',
        class: 'toggle-button'
      },
      {
        type: 'divider',
        hidden: [
          'small-mobile'
        ]
      },
      {
        type: 'pageDisplayButton',
        dataElement: 'pageDisplayButton',
        element: 'pageDisplayButton',
        title: 'Page Display'
      },
      {
        type: 'fullScreenButton',
        dataElement: 'fullScreenButton',
        element: 'fullScreenButton',
        title: 'Full Screen'
      },
      {
        type: 'handToolButton',
        dataElement: 'handToolButton',
        element: 'handToolButton',
        title: 'Pan Tool'
      },
      {
        type: 'divider',
        hidden: [
          'small-mobile'
        ]
      },
      {
        type: 'zoomOverlay',
        dataElement: 'zoomOverlayButton',
        element: 'zoomOverlay',
        hiddenOnMobileDevice: true
      },
      {
        type: 'divider',
        hidden: [
          'small-mobile'
        ]
      },
      {
        type: 'themeMode',
        dataElement: 'themeMode',
        element: 'themeMode'
      },
      {
        type: 'stickyNoteButton',
        dataElement: 'stickyNoteButton',
        element: 'stickyNoteButton',
        hidden: false,
      },
      {
        type: 'measureButton',
        dataElement: 'measureButton',
        element: 'measureButton',
        hidden: true,
      },
      {
        type: 'compareButton',
        dataElement: 'compareButton',
        element: 'compareButton',
        hidden: true,
      },
      {
        type: 'saveButton',
        dataElement: 'saveButton',
        element: 'saveButton',
        hidden: true,
      }
    ],
    rightHeaders: [
      {
        type: 'openFileButton',
        dataElement: 'openFileButton',
        element: 'openFileButton',
        title: 'Open File'
      },
      {
        type: 'searchButton',
        dataElement: 'searchButton',
        element: 'searchButton',
        title: 'Search'
      },
      {
        type: 'toggleRightPanelButton',
        img: 'icon-header-sidebar-line',
        element: 'rightPanel',
        dataElement: 'rightPanelButton',
        title: 'Right Panel',
        id: 'propertyPanelButton'
      },
      {
        type: 'downloadButton',
        dataElement: 'downloadButton',
        element: 'downloadButton',
        title: 'Download'
      },
      {
        type: 'flattenButton',
        dataElement: 'flattenButton',
        element: 'flattenButton',
        title: 'Save as Flattened PDF'
      },
      {
        type: 'printButton',
        dataElement: 'printButton',
        element: 'printButton',
        title: 'Print'
      }
    ],
    toolMode: 'view',
    tools: {
      annotation: [
        {
          type: 'markup',
          dataElement: 'markup',
          element: 'markup',
          hidden: false,
        }
      ],
      form: [
        {
          type: 'textFieldButton',
          dataElement: 'textFieldButton',
          element: 'textFieldButton',
          title: 'Form Field'
        },
        {
          type: 'checkBoxButton',
          dataElement: 'checkBoxButton',
          element: 'checkBoxButton',
          title: 'Check Box'
        },
        {
          type: 'radioButton',
          dataElement: 'radioButton',
          element: 'radioButton',
          title: 'Radio Button'
        },
        {
          type: 'listBox',
          dataElement: 'listBox',
          element: 'listBox',
          title: 'List Box'
        },
        {
          type: 'comboBox',
          dataElement: 'comboBox',
          element: 'comboBox',
          title: 'Combo Box'
        },
        {
          type: 'pushButton',
          dataElement: 'pushButton',
          element: 'pushButton',
          title: 'Push Button'
        }
      ],
      security: [
        {
          type: 'securitySelect',
          dataElement: 'securitySelect',
          element: 'securitySelect',
          title: 'Security'
        },
        {
          type: 'watermarkSelect',
          dataElement: 'watermarkSelect',
          element: 'watermarkSelect',
          title: 'Watermark'
        }
      ],
      compare: [
        {
          type: 'comparedToolbar'
        }
      ],
      editor: [
        {
          type: 'editTextToolbar'
        }
      ]
    },
    downloading: false,
    downloadError: '',
    popoverChanged: false,
    /*  '': 不在compare模式下
        'finished': 覆盖对比完成
        'end': 覆盖对比完成，关闭对比结果，回到初始对比页面
        'next': 内容对比完成 */
    compareStatus: '',
    upload: true, // 未上传文件的upload按钮
    uploadLoading: false, // 上传中的loading效果
    compareMode: 'content'
  }),
  getters: {
    getFullMode () {
      return this.fullMode
    },
    getCurrentPage () {
      return this.currentPage
    },
    getThemeMode () {
      return this.themeMode
    },
    getPageMode () {
      return this.pageMode
    },
    getScrollMode () {
      return this.scrollMode
    },
    getWebviewerMode () {
      return this.webviewerMode
    },
    getActiveHeaderItems () {
      return this.headers
    },
    getActiveRightHeaderItems () {
      return this.rightHeaders
    },
    isElementOpen: (state) => {
      return (dataElement) => state.activeElements[dataElement]
    },
    getActiveElementTab: (state) => {
      return (dataElement) => state.activeElementsTab[dataElement]
    },
    getScale () {
      return Math.round(this.scale * 100)
    },
    getOldScale () {
      return Math.round(this.oldScale * 100)
    },
    getNewScale () {
      return Math.round(this.newScale * 100)
    },
    getActiveStickNote () {
      return this.activeStickNote
    },
    getActiveMeasure () {
      return this.activeActiveMeasure
    },
    getActiveHand () {
      return this.activeHand
    },
    getSearchStatus () {
      return this.searchStatus
    },
    getToolMode () {
      return this.toolMode
    },
    getToolItems () {
      return this.tools
    },
    getDownloading () {
      return this.downloading
    },
    getDownloadError () {
      return this.downloadError
    },
    getPopoverChanged () {
      return this.popoverChanged
    },
    getCompareStatus () {
      return this.compareStatus
    },
    getUpload () {
      return this.upload
    },
    getUploadLoading () {
      return this.uploadLoading
    },
    getCompareMode () {
      return this.compareMode
    },
    getVerified () {
      return this.verified
    }
  },
  actions: {
    resetSetting () {
      this.fullMode = false
      this.currentPage = 0
      this.scale = '',
      this.themeMode = 'Light'
      this.pageMode = 0
      this.scrollMode = 'Vertical'
      this.activeTab = 0
      this.searchStatus = false
      this.activeElements = {
        leftPanel: false,
        rightPanel: false,
        pageModePanel: false,
        stampPanel: false,
        linkPanel: false,
        compareSettingDialog: false,
        languageDialog: false,
        preventDialog: false,
        setPasswordModal: false,
        signCreatePanel: false,
        downloadSettingDialog: false,
        printSettingDialog: false,
        editTextPanel: false,
        insertPageSettingDialog: false,
        deletePageDialog: false
      },
      this.activeElementsTab = {
        leftPanelTab: 'THUMBS',
        rightPanelTab: 'GENERAL',
        stampPanelTab: 'STANDARD',
        signPanelTab: 'trackpad'
      }
    },
    resetPanels () {
      this.searchStatus = false
      this.activeElements = {
        leftPanel: false,
        rightPanel: false,
        pageModePanel: false,
        stampPanel: false
      }
    },
    setVierified (verified) {
      this.verified = verified
    },
    setFullMode (fullMode) {
      return this.fullMode = fullMode
    },
    setCurrentPage (currentPage) {
      this.currentPage = currentPage
    },
    setThemeMode (themeMode) {
      this.themeMode = themeMode
    },
    setPageMode (mode) {
      this.pageMode = mode
    },
    setScrollMode (mode) {
      this.scrollMode = mode
    },
    setWebviewerMode (mode) {
      this.webviewerMode = mode
    },
    setCurrentScale (scale) {
      this.scale = scale
    },
    setOldCurrentScale (scale) {
      this.oldScale = scale
    },
    setNewCurrentScale (scale) {
      this.newScale = scale
    },
    openElement (dataElement) {
      this.activeElements[dataElement] = true
    },
    closeElement (dataElement) {
      this.activeElements[dataElement] = false
    },
    toggleElement (dataElement) {
      if (this.activeElements[dataElement]) {
        this.closeElement(dataElement)
      } else {
        this.openElement(dataElement)
      }

      if (dataElement === 'signCreatePanel' && this.activeElements[dataElement]) {
        this.setActiveSignWay('trackpad')
      }
    },
    setActiveElementTab (dataElement, tab) {
      this.activeElementsTab[dataElement] = tab
    },
    toggleActiveStickNote () {
      this.activeStickNote = !this.activeStickNote
    },
    closeActiveStickNote () {
      this.activeStickNote = false
    },
    toggleActiveMeasure () {
      this.activeActiveMeasure = !this.activeActiveMeasure
    },
    closeActiveMeasure () {
      this.activeActiveMeasure = false
    },
    toggleActiveHand (value) {
      this.activeHand = value
    },
    closeActiveHand () {
      this.activeHand = false
    },
    setSearchStatus (value) {
      this.searchStatus = value
    },
    setActiceToolMode (mode) {
      this.toolMode = mode
      this.activeElements['stampPanel'] = false
      this.activeElements['linkPanel'] = false
      this.activeElements['editTextPanel'] = false
      core.setToolMode(mode)
    },
    setDownloading (boolean) {
      this.downloading = boolean
    },
    setDownloadError (text) {
      this.downloadError = text
    },
    setActiveSignWay (way) {
      this.activeElementsTab['signPanelTab'] = way
      if (this.activeElementsTab['signPanelTab'] === 'trackpad') {
        core.handleSign('create')
      }
    },
    setPopoverChanged (bool) {
      this.popoverChanged = bool
    },
    setCompareStatus (string) {
      this.compareStatus = string
    },
    setUpload (bool) {
      this.upload = bool
    },
    setUploadLoading (bool) {
      this.uploadLoading = bool
    },
    setCompareMode (mode) {
      this.compareMode = mode
    }
  }
})