diff options
| author | Joshua Sheridan <josh@joshuasheridan.com> | 2023-03-31 22:33:04 -0400 |
|---|---|---|
| committer | Joshua Sheridan <josh@joshuasheridan.com> | 2023-03-31 22:33:04 -0400 |
| commit | 120457c798f3af3e2d020b715955fc04f8143e01 (patch) | |
| tree | f4e148fff01efa789b510673ef71d040bf8b13e7 | |
| parent | 06b6f976a9975c9860fcc0a29e6e9c3ea174ba9d (diff) | |
Add feature - zoom in and out
| -rw-r--r-- | electron/src/renderer/assets/js/simulator.js | 16 | ||||
| -rw-r--r-- | electron/src/renderer/components/Simulator.vue | 22 | ||||
| -rw-r--r-- | electron/src/renderer/main.js | 8 |
3 files changed, 43 insertions, 3 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() diff --git a/electron/src/renderer/components/Simulator.vue b/electron/src/renderer/components/Simulator.vue index 22b25446..55cea963 100644 --- a/electron/src/renderer/components/Simulator.vue +++ b/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> diff --git a/electron/src/renderer/main.js b/electron/src/renderer/main.js index 1afbca3a..ea422538 100644 --- a/electron/src/renderer/main.js +++ b/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) |