Add feature - zoom in and out

1 files changed, 15 insertions, 1 deletions

diff --git a/electron/src/renderer/assets/js/simulator.js b/electron/src/renderer/assets/js/simulator.js
index 0e60e1c2..fffb77d6 100644
--- a/electron/src/renderer/assets/js/simulator.js
+++ b/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()