Pages Tab hide/show grid

BeethovensWerkstatt · Dec 4, 2023 · 4e61e89 · 4e61e89
1 parent 35de2f6
commit 4e61e89
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 1 deletion.
diff --git a/src/components/FacsimileComponent.vue b/src/components/FacsimileComponent.vue
@@ -32,6 +32,7 @@ export default {
   props: {
 
   },
+
   computed: {
     /**
      * the tileSource for the current page
@@ -68,7 +69,8 @@ export default {
     showGrid () {
       const tab = this.$store.getters.explorerTab
       const validTabs = ['pages']
-      return validTabs.indexOf(tab) !== -1
+      const gridFlag = this.$store.getters.pageShowGrid
+      return gridFlag && validTabs.indexOf(tab) !== -1
     },
 
     /**
@@ -794,6 +796,10 @@ export default {
           // this.focusActiveWritingZone()
         }
       })
+    this.unwatchGrid = this.$store.watch((state, getters) => getters.pageShowGrid,
+      (newVal, oldVal) => {
+        this.renderGrid()
+      })
 
     this.openFacsimile()
   },
@@ -810,6 +816,7 @@ export default {
     this.unwatchTileSource()
     this.unwatchSVG()
     this.unwatchSystems()
+    this.unwatchGrid()
   }
 }
 

diff --git a/src/components/PagesTab.vue b/src/components/PagesTab.vue
@@ -6,6 +6,11 @@
           <i class="icon" :class="{'icon-arrow-left': pageTabSidebarVisible, 'icon-arrow-right': !pageTabSidebarVisible}"></i>
         </button>
       </div>
+      <div class="menuItem">
+        <button class="btn" @click="$store.dispatch('togglePageShowGrid')">
+          {{ pageShowGrid ? 'Hide Grid' : 'Show Grid' }}
+        </button>
+      </div>
       <div class="osdButtons">
         <div class="osdButton" id="zoomOut"><i class="icon icon-minus"></i></div>
         <div class="osdButton" id="zoomIn"><i class="icon icon-plus"></i></div>
@@ -131,6 +136,7 @@ export default {
       'currentPageAngle',
       'pageBorderPoints',
       'pageBorderPointsIncomplete',
+      'pageShowGrid',
       'currentPageDimensions',
       'allDocsLoaded',
       'pageTabRightSidebarVisible',

diff --git a/src/store/gui/index.js b/src/store/gui/index.js
@@ -53,6 +53,7 @@ const guiModule = {
     pageTabSidebarWidth: 310,
     pageTabRightSidebarVisible: true,
     pageTabRightSidebarWidth: 430,
+    pageShowGrid: true,
     zonesTabLeftSidebarVisible: true,
     zonesTabLeftSidebarWidth: 310,
     zonesTabRightSidebarVisible: true,
@@ -161,6 +162,14 @@ const guiModule = {
     TOGGLE_PAGETAB_RIGHT_SIDEBAR_VISIBILITY (state) {
       state.pageTabRightSidebarVisible = !state.pageTabRightSidebarVisible
     },
+    /**
+     * toggles visibility of grid in pageTab
+     * @memberof store.gui.mutations
+     * @param {[type]} state  [description]
+     */
+    TOGGLE_PAGE_SHOW_GRID (state) {
+      state.pageShowGrid = !state.pageShowGrid
+    },
 
     /**
      * sets width of left sidebar in zonesTab
@@ -416,6 +425,21 @@ const guiModule = {
     togglePageTabRightSidebar ({ commit }) {
       commit('TOGGLE_PAGETAB_RIGHT_SIDEBAR_VISIBILITY')
     },
+    /**
+     * toggles visibility of the zonesTab left sidebar
+     * @memberof store.gui.actions
+     * @param  {[type]} commit               [description]
+     * @return {[type]}        [description]
+     */
+    togglePageTabLeftSidebar ({ commit }) {
+      commit('TOGGLE_PAGETAB_SIDEBAR_VISIBILITY')
+    },
+    /**
+     * toggles visibility of the grid on the pageTab
+     */
+    togglePageShowGrid ({ commit }) {
+      commit('TOGGLE_PAGE_SHOW_GRID')
+    },
 
     /**
      * toggles visibility of the zonesTab left sidebar
@@ -678,6 +702,15 @@ const guiModule = {
     pageTabRightSidebarWidth: (state) => {
       return state.pageTabRightSidebarWidth
     },
+    /**
+     * returns visibility of grid on pageTab
+     * @memberof store.gui.getters
+     * @param  {[type]} state               [description]
+     * @return {[type]}       [description]
+     */
+    pageShowGrid: (state) => {
+      return state.pageShowGrid
+    },
 
     /**
      * returns visibility of left sidebar on zonesTab