Add feature - zoom in and out

electron/src/renderer/assets/js/simulator.js

@@ -511,7 +511,7 @@ export default {
     },
     generatePage () {
       this.$refs.simulator.style.backgroundColor = this.page_specs.deskcolor
-      this.svg.rect(this.page_specs.width, this.page_specs.height)
+      let page = this.svg.rect(this.page_specs.width, this.page_specs.height)
       .move(-this.stitchPlan.bounding_box[0],-this.stitchPlan.bounding_box[1])
       .fill(this.page_specs.pagecolor)
       .stroke({width: 1, color: 'black'})
@@ -520,6 +520,18 @@ export default {
         add.blend(add.$source, blur)
       })
       .back()
+      this.page_specs["bbox"] = page.bbox()
+    },
+    zoomSelection () {
+      let [minx, miny, maxx, maxy] = this.stitchPlan.bounding_box
+      let selectionWidth = maxx - minx
+      let selectionHeight = maxy - miny
+      this.svg.viewbox(0, 0, selectionWidth, selectionHeight);
+      this.resizeCursor()
+    },
+    zoomPage () {
+      this.svg.viewbox(this.page_specs.bbox.x, this.page_specs.bbox.y - 50, this.page_specs.bbox.width + 100, this.page_specs.bbox.height + 100)
+      this.resizeCursor()
     }
   },
   created: function () {
@@ -607,6 +619,8 @@ export default {
       Mousetrap.bind("space", this.toggleAnimation)
       Mousetrap.bind("+", this.animationForwardOneStitch)
       Mousetrap.bind("-", this.animationBackwardOneStitch)
+      Mousetrap.bind("]", this.zoomSelection)
+      Mousetrap.bind("[", this.zoomPage)
 
       this.svg.on('zoom', this.resizeCursor)
       this.resizeCursor()

electron/src/renderer/components/Simulator.vue

@@ -140,6 +140,28 @@
                   </p>
                 </div>
               </div>
+              <div>
+                  <p>
+                    <font-awesome-icon icon="search-minus" class="fa-button"/>
+                  </p>
+                  <p>
+                    <translate>Zoom page</translate>
+                  </p>
+                  <p>
+                    <translate>[ Left square bracket</translate>
+                  </p>
+                </div>
+                <div>
+                  <p>
+                    <font-awesome-icon icon="search-plus" class="fa-button"/>
+                  </p>
+                  <p>
+                    <translate>Zoom selection</translate>
+                  </p>
+                  <p>
+                    <translate>] Right square bracket</translate>
+                  </p>
+                </div>
             </div>
           </collapse-transition>
         </div>

electron/src/renderer/main.js

@@ -37,7 +37,9 @@ import {
   faSpinner,
   faStepBackward,
   faStepForward,
-  faStop
+  faStop,
+  faSearchPlus,
+  faSearchMinus
 } from '@fortawesome/free-solid-svg-icons'
 import {FontAwesomeIcon, FontAwesomeLayers} from '@fortawesome/vue-fontawesome'
 import Transitions from 'vue2-transitions'
@@ -74,7 +76,9 @@ library.add(
   faSpinner,
   faStepBackward,
   faStepForward,
-  faStop
+  faStop,
+  faSearchPlus,
+  faSearchMinus
 )
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)