fix: api - 打开侧边栏、切换侧边栏tab；添加数字签名后重新渲染缩略图

packages/core/src/annotation/line.js

@@ -75,6 +75,7 @@ export default class Line extends Base {
       width: innerRect.width + 2 * arrowLength,
       height: innerRect.height + 2 * arrowLength
     }
+    if (!rect.width && !rect.height) return
 
     this.svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 

packages/core/src/index.js

@@ -2408,6 +2408,7 @@ class ComPDFKitViewer {
     }
 
     this.pdfViewer.forceRendering()
+    this.pdfSidebar.isOpen && this.pdfThumbnailViewer.forceRendering();
   }
 
   requestFullScreenMode() {

packages/core/src/pdf_sidebar.js

@@ -100,6 +100,10 @@ class PDFSidebar {
     this.l10n = l10n;
 
     // this.#addEventListeners();
+
+    this.eventBus._on("pagesloaded", () => {
+      // this.open()
+    });
   }
 
   reset() {
@@ -108,7 +112,6 @@ class PDFSidebar {
 
     this.#hideUINotification(/* reset = */ true);
     this.switchView(SidebarView.THUMBS);
-
   }
 
   /**

packages/webview/src/apis/index.js

@@ -15,6 +15,7 @@ import textPopup from './textPopup';
 import openElement from './openElement';
 import closeElement from './closeElement';
 import isElementOpen from './isElementOpen';
+import setActiveElementTab from './setActiveElementTab';
 
 export default () => {
   const { locale } = i18n.global
@@ -49,6 +50,7 @@ export default () => {
     openElement: openElement(useViewer),
     closeElement: closeElement(useViewer),
     isElementOpen: isElementOpen(useViewer),
+    setActiveElementTab: setActiveElementTab(useViewer),
   }
   const documentViewer = core.getDocumentViewer(1);
 

packages/webview/src/apis/setActiveElementTab.js

@@ -0,0 +1,7 @@
+export default (store) => (dataElement, tab) => {
+  if (store.activeElementsTab.hasOwnProperty(dataElement)) {
+    store.setActiveElementTab(dataElement, tab);
+  } else {
+    console.warn('DataElement not found.');
+  }
+};

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

@@ -147,7 +147,7 @@ const useDocument = useDocumentStore()
 const useViewer = useViewerStore()
 
 let annotationsContainers = computed(() => useDocument.getAllAnnotations)
-const activePanelTab = computed(() => useViewer.getActiveElementTab('leftPanelTab'))
+const activePanelTab = computed(() => useViewer.getActiveElementTab('leftPanel'))
 const isOpen = computed(() => useViewer.isElementOpen('leftPanel'))
 const annotator = computed(() => useDocument.getAnnotator)
 const toolMode = computed(() => useViewer.getToolMode)
@@ -380,11 +380,10 @@ const selectReturn = (item) => {
 
 const openAnnotationReply = (annotation) => {
   if (activePanelTab.value !== 'ANNOTATION') {
-    useViewer.setActiveElementTab('leftPanelTab', 'ANNOTATION')
+    useViewer.setActiveElementTab('leftPanel', 'ANNOTATION')
   }
   if (!isOpen.value) {
     useViewer.openElement('leftPanel')
-    core.toggleSidebar()
   }
 
   selectReturn(annotation)

packages/webview/src/components/Compare/Compare.vue

@@ -75,7 +75,6 @@
         await loadDocument(data.value, options)
         
         useViewer.toggleElement('leftPanel')
-        core.toggleSidebar()
         const totalPages = core.getPagesCount()
         const scale = core.getScale()
         useDocument.setTotalPages(totalPages)

packages/webview/src/components/Compare/CompareButton.vue

@@ -15,17 +15,16 @@
   const { item } = defineProps(['item'])
 
   const isActive = computed(() => {
-    return useViewer.getActiveElementTab('leftPanelTab') === 'COMPARISON'
+    return useViewer.getActiveElementTab('leftPanel') === 'COMPARISON'
   })
   const onClick = () => {
     if (isActive.value) {
-      useViewer.setActiveElementTab('leftPanelTab', 'THUMBS')
+      useViewer.setActiveElementTab('leftPanel', 'THUMBS')
     } else {
-      useViewer.setActiveElementTab('leftPanelTab', 'COMPARISON')
+      useViewer.setActiveElementTab('leftPanel', 'COMPARISON')
     }
     const isOpen = useViewer.isElementOpen('leftPanel')
     if (isOpen) return
     useViewer.openElement('leftPanel')
-    core.toggleSidebar()
   }
 </script>

packages/webview/src/components/Dialogs/CompareSettingDialog.vue

@@ -448,7 +448,6 @@ const comparing = async () => {
       loading.value = false
       
       // useViewer.toggleElement('leftPanel')
-      // core.toggleSidebar()
       const totalPages = core.getPagesCount()
       const scale = core.getScale()
       useDocument.setTotalPages(totalPages)

packages/webview/src/components/Dialogs/SignatureAppearanceDialog.vue

@@ -119,7 +119,7 @@ const useViewer = useViewerStore()
 const useDocument = useDocumentStore()
 
 const show = computed(() => useViewer.isElementOpen(dialogName))
-const activeSignWay = computed(() => useViewer.getActiveElementTab('signPanelTab'))
+const activeSignWay = computed(() => useViewer.getActiveElementTab('signPanel'))
 const toolMode = computed(() => useViewer.getToolMode)
 const activeTool = computed(() => useDocument.getActiveTool)
 const preview = computed(() => useViewer.getDigitalSignaturePreview)

packages/webview/src/components/DocumentContainer/DocumentContainer.vue

@@ -96,7 +96,7 @@ const topSpace = computed(() => {
   return isDisabled || ['view', 'document'].includes(useViewer.getToolMode) || (toolMode.value === 'compare' && compareStatus.value !== 'finished') ? 0 : 44
 })
 const loading = computed(() => useViewer.getUploadLoading && useViewer.getUpload)
-const activePanelTab = computed(() => useViewer.getActiveElementTab('leftPanelTab'))
+const activePanelTab = computed(() => useViewer.getActiveElementTab('leftPanel'))
 const load = computed(() => useViewer.getUpload)
 const isPageNavOverlayDisabled = computed(() => useViewer.getDisabledElements('pageNavOverlay'))
 
@@ -104,7 +104,7 @@ async function handleUpload(evt) {
   const file = evt.target.files[0];
   if (!file) return
   if (isLeftPanelOpen.value) {
-    core.toggleSidebar()
+    useViewer.closeElement('leftPanel')
   }
   useViewer.$patch({
     fullMode: false,
@@ -121,8 +121,8 @@ async function handleUpload(evt) {
       pageModePanel: false
     },
     activeElementsTab: {
-      leftPanelTab: 'THUMBS',
-      rightPanelTab: 'GENERAL'
+      leftPanel: 'THUMBS',
+      rightPanel: 'GENERAL'
     },
     signatureVerify: 0
   })
@@ -257,7 +257,7 @@ window.instances.UI.loadDocument = async (file, {
 } = {}) => {
   if (!file) return
   if (isLeftPanelOpen.value) {
-    core.toggleSidebar()
+    useViewer.closeElement('leftPanel')
   }
   useViewer.$patch({
     fullMode: false,
@@ -273,8 +273,8 @@ window.instances.UI.loadDocument = async (file, {
       rightPanel: false
     },
     activeElementsTab: {
-      leftPanelTab: 'THUMBS',
-      rightPanelTab: 'GENERAL'
+      leftPanel: 'THUMBS',
+      rightPanel: 'GENERAL'
     }
   })
   useDocument.resetSetting()

packages/webview/src/components/FullScreenButton/FullScreenButton.vue

@@ -37,7 +37,6 @@
     const isiPad = (navigator.userAgent.match(/(iPad)/) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1))
     if (isActive.value && (window.innerWidth < 930 || isiPad)) {
       useViewer.toggleElement('leftPanel')
-      core.toggleSidebar()
     }
     
     const imgUi = document.getElementById("sign-image-save")

packages/webview/src/components/LeftPanel/LeftPanel.vue

@@ -43,7 +43,7 @@
   const useViewer = useViewerStore()
   const useDocument = useDocumentStore()
 
-  const activePanelTab = computed(() => useViewer.getActiveElementTab('leftPanelTab'))
+  const activePanelTab = computed(() => useViewer.getActiveElementTab('leftPanel'))
   const isOpen = computed(() => useViewer.isElementOpen('leftPanel'))
   const activeTool = computed(() => useDocument.getActiveTool)
 

packages/webview/src/components/LeftPanel/LeftPanelTabs.vue

@@ -3,7 +3,7 @@
     :className="activePanelTab === 'THUMBS' ? 'active' : ''"
     img="icon-thumbnail"
     :title="$t('leftPanel.thumbnails')"
-    dataElement="THUMBS"
+    data-element="THUMBS"
     :isActive="activePanelTab === 'THUMBS'"
     @click="setActiveLeftPanelTab('THUMBS', 'thumbs')"
   >
@@ -13,7 +13,7 @@
     :className="activePanelTab === 'OUTLINE' ? 'active' : ''"
     img="icon-outline"
     :title="$t('leftPanel.outlines')"
-    dataElement="OUTLINE"
+    data-element="OUTLINE"
     :isActive="activePanelTab === 'OUTLINE'"
     @click="setActiveLeftPanelTab('OUTLINE', 'outline')"
   >
@@ -23,7 +23,7 @@
     :className="activePanelTab === 'ANNOTATION' ? 'active' : ''"
     img="icon-annotation"
     :title="$t('leftPanel.annotations')"
-    dataElement="ANNOTATION"
+    data-element="ANNOTATION"
     :isActive="activePanelTab === 'ANNOTATION'"
     @click="setActiveLeftPanelTab('ANNOTATION', 'none')"
   >
@@ -34,7 +34,7 @@
     v-if="activeLeftPanel && activePanelTab === 'LAYER'"
     img="icon-view-layers"
     :title="$t('leftPanel.layers')"
-    dataElement="Layers"
+    data-element="Layers"
     :isActive="activePanelTab === 'LAYER'"
     @click="setActiveLeftPanelTab('LAYER', 'layers')"
   >
@@ -45,7 +45,7 @@
     v-if="activeLeftPanel && activePanelTab === 'COMPARISON'"
     img="icon-compare"
     title="Compare"
-    dataElement="COMPARISON"
+    data-element="COMPARISON"
     :isActive="activePanelTab === 'COMPARISON'"
     @click="setActiveLeftPanelTab('COMPARISON')"
   />
@@ -53,7 +53,7 @@
     :className="activePanelTab === 'SIGNATURE' ? 'active' : ''"
     img="icon-signature"
     :title="$t('leftPanel.signature')"
-    dataElement="Signature"
+    data-element="SIGNATURE"
     :isActive="activePanelTab === 'SIGNATURE'"
     @click="setActiveLeftPanelTab('SIGNATURE', 'none')"
   >
@@ -63,7 +63,7 @@
     :className="activePanelTab === 'SEARCH' ? 'active' : ''"
     img="icon-search"
     :title="$t('leftPanel.search')"
-    dataElement="Search"
+    data-element="SEARCH"
     :isActive="activePanelTab === 'SEARCH'"
     @click="setActiveLeftPanelTab('SEARCH', 'none')"
   >
@@ -79,12 +79,12 @@
 
   defineProps(['activePanelTab'])
   const activeLeftPanel = computed(() => useViewer.isElementOpen('leftPanel'))
-  const activePanelTab = computed(() => useViewer.getActiveElementTab('leftPanelTab'))
+  const activePanelTab = computed(() => useViewer.getActiveElementTab('leftPanel'))
   const useViewer = useViewerStore()
 
   const setActiveLeftPanelTab = (tab, mode) => {
     if (tab === activePanelTab.value) return
-    useViewer.setActiveElementTab('leftPanelTab', tab)
+    useViewer.setActiveElementTab('leftPanel', tab, mode)
     
     if (tab === 'SEARCH') {
       core.webViewerNamedAction('FindOpen')
@@ -93,9 +93,5 @@
       core.clearSearchResults()
       useViewer.setSearchStatus(false)
     }
-
-    setTimeout(() => {
-      core.webViewerPageMode(mode)
-    }, 0)
   }
 </script>

packages/webview/src/components/LinkPanel/LinkPanel.vue

@@ -3,23 +3,26 @@
     <div class="sidebar-title">{{ $t('linkPanel.linkTo') }}</div>
     <div class="sidebar-tabs-header">
       <Button
-        :className="activePanelTab === 'url' ? 'active' : ''"
-        :isActive="activePanelTab === 'url'"
-        @click="setActivePanelTab('url')"
+        :className="activePanelTab === 'URL' ? 'active' : ''"
+        :isActive="activePanelTab === 'URL'"
+        data-element="URL"
+        @click="setActivePanelTab('URL')"
       >
         <span>{{ $t('linkPanel.url') }}</span>
       </Button>
       <Button
-        :className="activePanelTab === 'page' ? 'active' : ''"
-        :isActive="activePanelTab === 'page'"
-        @click="setActivePanelTab('page')"
+        :className="activePanelTab === 'PAGE' ? 'active' : ''"
+        :isActive="activePanelTab === 'PAGE'"
+        data-element="PAGE"
+        @click="setActivePanelTab('PAGE')"
       >
         <span>{{ $t('linkPanel.goToPages') }}</span>
       </Button>
       <Button
-        :className="activePanelTab === 'email' ? 'active' : ''"
-        :isActive="activePanelTab === 'email'"
-        @click="setActivePanelTab('email')"
+        :className="activePanelTab === 'EMAIL' ? 'active' : ''"
+        :isActive="activePanelTab === 'EMAIL'"
+        data-element="EMAIL"
+        @click="setActivePanelTab('EMAIL')"
       >
         <span>{{ $t('linkPanel.email') }}</span>
       </Button>
@@ -27,19 +30,19 @@
 
     <div class="sidebar-content">
       <!-- Url -->
-      <div class="input-container" :class="{ hidden: activePanelTab !== 'url' }">
+      <div class="input-container" :class="{ hidden: activePanelTab !== 'URL' }">
         <input type="text" placeholder="https://www.compdf.com" v-model="urlValue">
         <EmptyInput v-show="urlValue" @click="empty" />
       </div>
 
       <!-- Page -->
-      <div class="input-container" :class="{ hidden: activePanelTab !== 'page' }">
+      <div class="input-container" :class="{ hidden: activePanelTab !== 'PAGE' }">
         <input type="text" pattern="\d*" :placeholder="`1~${totalPages}`" v-model="pageValue" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))">
         <EmptyInput v-show="pageValue" @click="empty" />
       </div>
 
       <!-- Email -->
-      <div class="input-container" :class="{ hidden: activePanelTab !== 'email' }">
+      <div class="input-container" :class="{ hidden: activePanelTab !== 'EMAIL' }">
         <input type="text" placeholder="support@compdf.com" v-model="emailValue">
         <EmptyInput v-show="emailValue" @click="empty" />
       </div>

packages/webview/src/components/RightPanel/RightPanel.vue

@@ -264,7 +264,7 @@
     }
   })
 
-  const activePanelTab = computed(() => useViewer.getActiveElementTab('rightPanelTab'))
+  const activePanelTab = computed(() => useViewer.getActiveElementTab('rightPanel'))
   const isOpen = computed(() => useViewer.isElementOpen('rightPanel'))
   const activeTool = computed(() => useDocument.getActiveTool)
   const totalPages = computed(() => useDocument.getTotalPages)
@@ -397,7 +397,7 @@
     } else {
       selectedElement.value = props.type.replace('-', '')
       if (selectedElement.value === 'listbox' || selectedElement.value === 'combobox' || selectedElement.value === 'pushbutton') {
-        useViewer.setActiveElementTab('rightPanelTab', 'PREFERENCE')
+        useViewer.setActiveElementTab('rightPanel', 'PREFERENCE')
       }
       selectedElement.value !== 'checkbox' && (isOneCheckbox.value = true)
     }

packages/webview/src/components/RightPanel/RightPanelTabs.vue

@@ -1,7 +1,7 @@
 <template>
   <Button
     :className="activePanelTab === 'GENERAL' ? 'active' : ''"
-    dataElement="GENERAL"
+    data-element="GENERAL"
     :isActive="activePanelTab === 'GENERAL'"
     @click="setActiveRightPanelTab('GENERAL', 'general')"
   >
@@ -10,7 +10,7 @@
   <div class="divider"></div>
   <Button
     :className="activePanelTab === 'APPEARANCE' ? 'active' : ''"
-    dataElement="APPEARANCE"
+    data-element="APPEARANCE"
     :isActive="activePanelTab === 'APPEARANCE'"
     @click="setActiveRightPanelTab('APPEARANCE', 'appearance')"
   >
@@ -19,7 +19,7 @@
   <div class="divider"></div>
   <Button
     :className="activePanelTab === 'PREFERENCE' ? 'active' : ''"
-    dataElement="PREFERENCE"
+    data-element="PREFERENCE"
     :isActive="activePanelTab === 'PREFERENCE'"
     @click="setActiveRightPanelTab('PREFERENCE', 'preferences')"
   >
@@ -33,6 +33,6 @@
   defineProps(['activePanelTab'])
   const useViewer = useViewerStore()
   const setActiveRightPanelTab = (tab, mode) => {
-    useViewer.setActiveElementTab('rightPanelTab', tab)
+    useViewer.setActiveElementTab('rightPanel', tab)
   }
 </script>

packages/webview/src/components/SearchButton/index.vue

@@ -25,7 +25,7 @@
   const load = computed(() => useViewer.getUpload)
 
   const isLeftPanelOpen = computed(() => useViewer.isElementOpen('leftPanel'))
-  const activeLeftPanelTab = computed(() => useViewer.getActiveElementTab('leftPanelTab'))
+  const activeLeftPanelTab = computed(() => useViewer.getActiveElementTab('leftPanel'))
 
   const onClick = () => {
     core.webViewerNamedAction('Find')
@@ -34,12 +34,10 @@
     } else if (isLeftPanelOpen.value) {
       useViewer.setSearchStatus(false)
       useViewer.toggleElement('leftPanel')
-      core.toggleSidebar()
     } else {
       useViewer.setSearchStatus(true)
       useViewer.toggleElement('leftPanel')
-      core.toggleSidebar()
     }
-    useViewer.setActiveElementTab('leftPanelTab', 'SEARCH')
+    useViewer.setActiveElementTab('leftPanel', 'SEARCH')
   }
 </script>

packages/webview/src/components/SearchContainer/SearchHeader.vue

@@ -90,7 +90,7 @@
     rawActiveIndex.value = 0
   })
 
-  const activeTab = computed(() => useViewer.getActiveElementTab('leftPanelTab'))
+  const activeTab = computed(() => useViewer.getActiveElementTab('leftPanel'))
   const isLeftPanelOpen = computed(() => useViewer.isElementOpen('leftPanel'))
   watch([activeTab, isLeftPanelOpen], () => {
     if (activeTab.value !== 'SEARCH' || !isLeftPanelOpen.value) {

packages/webview/src/components/SignatureToolBar/SignatureVerifyBar.vue

@@ -35,7 +35,7 @@
 
   const viewAll = () => {
     useViewer.openElement('leftPanel')
-    useViewer.setActiveElementTab('leftPanelTab', 'SIGNATURE')
+    useViewer.setActiveElementTab('leftPanel', 'SIGNATURE')
   }
 </script>
 

packages/webview/src/components/Signatures/SignCreatePanel.vue

@@ -89,7 +89,7 @@ const useViewer = useViewerStore()
 const useDocument = useDocumentStore()
 
 const show = computed(() => useViewer.isElementOpen('signCreatePanel'))
-const activeSignWay = computed(() => useViewer.getActiveElementTab('signPanelTab'))
+const activeSignWay = computed(() => useViewer.getActiveElementTab('signPanel'))
 const toolMode = computed(() => useViewer.getToolMode)
 const activeTool = computed(() => useDocument.getActiveTool)
 

packages/webview/src/components/StampPanel/StampPanel.vue

@@ -5,6 +5,7 @@
       <Button
         :className="activePanelTab === 'STANDARD' ? 'active' : ''"
         :isActive="activePanelTab === 'STANDARD'"
+        data-element="STANDARD"
         @click="setActiveStampPanelTab('STANDARD')"
       >
         <span>{{ $t('stampPanel.standard') }}</span>
@@ -12,6 +13,7 @@
       <Button
         :className="activePanelTab === 'DYNAMIC' ? 'active' : ''"
         :isActive="activePanelTab === 'DYNAMIC'"
+        data-element="DYNAMIC"
         @click="setActiveStampPanelTab('DYNAMIC')"
       >
         <span>{{ $t('stampPanel.dynamic') }}</span>
@@ -73,7 +75,7 @@
   const useViewer = useViewerStore()
   const useDocument = useDocumentStore()
 
-  const activePanelTab = computed(() => useViewer.getActiveElementTab('stampPanelTab'))
+  const activePanelTab = computed(() => useViewer.getActiveElementTab('stampPanel'))
   const isOpen = computed(() => useViewer.isElementOpen('stampPanel'))
   const activeTool = computed(() => useDocument.getActiveTool)
   const currentPage = computed(() => useViewer.getCurrentPage)
@@ -98,7 +100,7 @@
   })
 
   const setActiveStampPanelTab = (tab) => {
-    useViewer.setActiveElementTab('stampPanelTab', tab)
+    useViewer.setActiveElementTab('stampPanel', tab)
   }
 
   const updateCurrentTime = () => {

packages/webview/src/components/ToggleElementButton/ToggleElementButton.vue

@@ -14,13 +14,12 @@
   const isActive = computed(() => {
     return useViewer.isElementOpen(item.element)
   })
-  const activeLeftPanelTab = computed(() => useViewer.getActiveElementTab('leftPanelTab'))
+  const activeLeftPanelTab = computed(() => useViewer.getActiveElementTab('leftPanel'))
 
   const onClick = () => {
     if (activeLeftPanelTab.value === 'SEARCH') {
       core.webViewerNamedAction('Find')
     }
     useViewer.toggleElement(item.element)
-    core.toggleSidebar()
   }
 </script>

packages/webview/src/components/ToggleRightPanelButton/index.vue

@@ -30,7 +30,6 @@
   watch(toolMode, (newValue, oldValue) => {
     if (oldValue === 'form' && newValue !== 'form') {
       useViewer.closeElement(item.element)
-      core.toggleSidebar()
     }
   })
 
@@ -58,7 +57,6 @@
       } else if (toolMode.value === 'editor') {
         useViewer.toggleElement('contentEditorPanel')
       }
-      core.toggleSidebar()
     }, 1);
   }
 

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

@@ -55,10 +55,10 @@ export const useViewerStore = defineStore({
       preview: null,
     },
     activeElementsTab: {
-      leftPanelTab: 'THUMBS',
-      rightPanelTab: 'GENERAL',
-      stampPanelTab: 'STANDARD',
-      signPanelTab: 'keyboard'
+      leftPanel: 'THUMBS',
+      rightPanel: 'GENERAL',
+      stampPanel: 'STANDARD',
+      signPanel: 'keyboard'
     },
     disabledElements: {
       header: { disabled: false },
@@ -574,14 +574,15 @@ export const useViewerStore = defineStore({
         addDigitalFileDialog: false
       }
       this.activeElementsTab = {
-        leftPanelTab: 'THUMBS',
-        rightPanelTab: 'GENERAL',
-        stampPanelTab: 'STANDARD',
-        signPanelTab: 'trackpad'
+        leftPanel: 'THUMBS',
+        rightPanel: 'GENERAL',
+        stampPanel: 'STANDARD',
+        signPanel: 'trackpad'
       }
       this.signatureVerify = 0
     },
     resetPanels () {
+      this.activeElements.leftPanel && this.closeElement('leftPanel')
       this.searchStatus = false
       this.activeElements = {
         leftPanel: false,
@@ -627,10 +628,14 @@ export const useViewerStore = defineStore({
       this.newScale = scale
     },
     openElement (dataElement) {
+      if(this.activeElements[dataElement]) return
       this.activeElements[dataElement] = true
+      dataElement === 'leftPanel' && core.toggleSidebar()
     },
     closeElement (dataElement) {
+      if(!this.activeElements[dataElement]) return
       this.activeElements[dataElement] = false
+      dataElement === 'leftPanel' && core.toggleSidebar() && setTimeout(() => core.webViewerPageMode('none'), 0)
     },
     toggleElement (dataElement) {
       if (this.activeElements[dataElement]) {
@@ -639,8 +644,14 @@ export const useViewerStore = defineStore({
         this.openElement(dataElement)
       }
     },
-    setActiveElementTab (dataElement, tab) {
+    setActiveElementTab (dataElement, tab, mode) {
       this.activeElementsTab[dataElement] = tab
+
+      const tabMap = {
+        THUMBS: 'thumbs',
+        OUTLINE: 'outline'
+      }
+      tabMap[tab] && setTimeout(() => core.webViewerPageMode(tabMap[tab]), 0)
     },
     toggleActiveStickNote () {
       this.activeStickNote = !this.activeStickNote
@@ -677,7 +688,7 @@ export const useViewerStore = defineStore({
       this.downloadError = text
     },
     setActiveSignWay (way) {
-      this.activeElementsTab['signPanelTab'] = way
+      this.activeElementsTab['signPanel'] = way
     },
     setPopoverChanged (bool) {
       this.popoverChanged = bool