Feature - Page Preview for Simulator (#2174)

Authored-by: jooshkins

2 files changed, 20 insertions, 1 deletions

diff --git a/electron/src/renderer/assets/js/simulator.js b/electron/src/renderer/assets/js/simulator.js
index fa963bbe..0e60e1c2 100644
--- a/electron/src/renderer/assets/js/simulator.js
+++ b/electron/src/renderer/assets/js/simulator.js
@@ -508,6 +508,18 @@ export default {
           prevStitch = stitch
         })
       })
+    },
+    generatePage () {
+      this.$refs.simulator.style.backgroundColor = this.page_specs.deskcolor
+      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'})
+      .filterWith(add => {
+        let blur = add.offset(2,2).in(add.$sourceAlpha).gaussianBlur(2)
+        add.blend(add.$source, blur)
+      })
+      .back()
     }
   },
   created: function () {
@@ -530,6 +542,7 @@ export default {
     this.jumpMarks = {}
     this.needlePenetrationPoints = []
     this.cursor = null
+    this.page_specs = {}
   },
   mounted: function () {
     this.svg = SVG().addTo(this.$refs.simulator).size('100%', '100%').panZoom({zoomMin: 0.1})
@@ -581,7 +594,7 @@ export default {
       this.generateColorSections()
       this.generateScale()
       this.generateCursor()
-
+      
       this.loading = false
 
       // v-on:keydown doesn't seem to work, maybe an Electron issue?
@@ -600,5 +613,9 @@ export default {
 
       this.start()
     })
+    inkStitch.get('page_specs').then(response => {
+      this.page_specs = response.data
+      this.generatePage()
+    })
   }
 }
diff --git a/electron/src/renderer/assets/style/simulator.css b/electron/src/renderer/assets/style/simulator.css
index 6358bc4d..64047a7e 100644
--- a/electron/src/renderer/assets/style/simulator.css
+++ b/electron/src/renderer/assets/style/simulator.css
@@ -86,6 +86,7 @@ fieldset {
   position: relative;
   padding: 0 5px;
   font-size: 90%;
+  background-color: white;
 }
 
 .window-controls {
@@ -289,6 +290,7 @@ div.simulator::v-deep svg.simulation {
   flex-grow: 1;
   flex-shrink: 1;
   order: -2;
+  margin-bottom: -48px;
 }
 
 div.simulator::v-deep svg.simulation-scale {