summaryrefslogtreecommitdiff
path: root/electron/src/renderer/assets
diff options
context:
space:
mode:
Diffstat (limited to 'electron/src/renderer/assets')
-rw-r--r--electron/src/renderer/assets/js/simulator.js64
-rw-r--r--electron/src/renderer/assets/style/simulator.css41
2 files changed, 58 insertions, 47 deletions
diff --git a/electron/src/renderer/assets/js/simulator.js b/electron/src/renderer/assets/js/simulator.js
index 186e3e30..8a0423f3 100644
--- a/electron/src/renderer/assets/js/simulator.js
+++ b/electron/src/renderer/assets/js/simulator.js
@@ -5,19 +5,18 @@
* Licensed under the GNU GPL version 3.0 or later. See the file LICENSE for details.
*
*/
+import { inkStitch } from '../../../lib/api.js'
-const inkStitch = require("../../../lib/api")
-const Mousetrap = require("mousetrap")
import { SVG } from '@svgdotjs/svg.js'
-require('@svgdotjs/svg.panzoom.js/src/svg.panzoom.js')
-require('@svgdotjs/svg.filter.js')
-const svgpath = require('svgpath')
+import '@svgdotjs/svg.panzoom.js'
+import '@svgdotjs/svg.filter.js'
+import svgpath from 'svgpath'
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';
+import { reactive, toRefs } from 'vue'
import VueSlider from 'vue-slider-component'
-import 'vue-slider-component/theme/default.css'
-
-const throttle = require('lodash.throttle')
+import 'vue-slider-component/theme/antd.css'
+import throttle from 'lodash/throttle'
function SliderMark(command, icon) {
this.label = ""
@@ -31,6 +30,10 @@ export default {
Loading,
VueSlider
},
+ setup() {
+ const data = reactive({ value: 0 })
+ return toRefs(data)
+ },
data: function () {
return {
loading: false,
@@ -511,15 +514,23 @@ export default {
},
generatePage () {
this.$refs.simulator.style.backgroundColor = this.page_specs.deskcolor
+
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'})
- .filterWith(add => {
- let blur = add.offset(2,2).in(add.$sourceAlpha).gaussianBlur(2)
- add.blend(add.$source, blur)
- })
+ .stroke({width: 0.1, color: this.page_specs.bordercolor})
.back()
+
+ if (this.page_specs.showpageshadow === "true") {
+ let shadow = 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.bordercolor)
+ .filterWith(add => {
+ let blur = add.offset(.5,.5).in(add.$source).gaussianBlur(.5)
+ })
+ .back()
+ }
+
this.page_specs["bbox"] = page.bbox()
},
zoomDesign () {
@@ -606,29 +617,30 @@ export default {
this.generateColorSections()
this.generateScale()
this.generateCursor()
-
+ this.resizeCursor()
+
this.loading = false
// v-on:keydown doesn't seem to work, maybe an Electron issue?
- Mousetrap.bind("up", this.animationSpeedUp)
- Mousetrap.bind("down", this.animationSlowDown)
- Mousetrap.bind("left", this.animationReverse)
- Mousetrap.bind("right", this.animationForward)
- Mousetrap.bind("pagedown", this.animationPreviousCommand)
- Mousetrap.bind("pageup", this.animationNextCommand)
- Mousetrap.bind("space", this.toggleAnimation)
- Mousetrap.bind("+", this.animationForwardOneStitch)
- Mousetrap.bind("-", this.animationBackwardOneStitch)
- Mousetrap.bind("]", this.zoomDesign)
- Mousetrap.bind("[", this.zoomPage)
+ this.$mousetrap.bind("up", this.animationSpeedUp)
+ this.$mousetrap.bind("down", this.animationSlowDown)
+ this.$mousetrap.bind("left", this.animationReverse)
+ this.$mousetrap.bind("right", this.animationForward)
+ this.$mousetrap.bind("pagedown", this.animationPreviousCommand)
+ this.$mousetrap.bind("pageup", this.animationNextCommand)
+ this.$mousetrap.bind("space", this.toggleAnimation)
+ this.$mousetrap.bind("+", this.animationForwardOneStitch)
+ this.$mousetrap.bind("-", this.animationBackwardOneStitch)
+ this.$mousetrap.bind("]", this.zoomDesign)
+ this.$mousetrap.bind("[", this.zoomPage)
this.svg.on('zoom', this.resizeCursor)
- this.resizeCursor()
inkStitch.get('page_specs').then(response => {
this.page_specs = response.data
this.generatePage()
})
+
this.start()
})
}
diff --git a/electron/src/renderer/assets/style/simulator.css b/electron/src/renderer/assets/style/simulator.css
index 64047a7e..e938cbe3 100644
--- a/electron/src/renderer/assets/style/simulator.css
+++ b/electron/src/renderer/assets/style/simulator.css
@@ -5,11 +5,10 @@
* Licensed under the GNU GPL version 3.0 or later. See the file LICENSE for details.
*
*/
-
-* {
- box-sizing: border-box;
+ * {
+ padding: 1px;
+ margin: 1px;
}
-
.loading-icon {
text-align: center;
margin-bottom: 1rem;
@@ -32,7 +31,7 @@ button {
align-items: flex-start;
text-align: center;
cursor: default;
- background-color: buttonface;
+ background: linear-gradient(0deg, rgba(169,169,169,1) 0%, rgba(255,255,255,1) 68%, rgba(227,227,227,1) 100%);
box-sizing: border-box;
padding: 2px 6px 3px;
border-width: 2px;
@@ -183,7 +182,7 @@ button.pressed {
}
.vue-slider {
- height: 25px !important;
+ height: 10px !important;
margin-bottom: 14px;
}
@@ -203,7 +202,7 @@ button.pressed {
margin-right: 10px;
}
-.slider-container::v-deep .vue-slider-mark-step {
+.slider-container :deep(.vue-slider-mark-step) {
width: 2px;
height: 20px;
border-radius: 2px;
@@ -212,26 +211,26 @@ button.pressed {
box-shadow: inset 1px 0 1px #ffffffbd, inset -1px 0 1px black;
}
-.slider-container::v-deep .vue-slider-mark:first-child .vue-slider-mark-step,
-.slider-container::v-deep .vue-slider-mark:last-child .vue-slider-mark-step {
+.slider-container :deep(.vue-slider-mark:first-child .vue-slider-mark-step),
+.slider-container :deep(.vue-slider-mark:last-child .vue-slider-mark-step) {
display: block;
}
-.slider-container::v-deep .vue-slider-rail {
+.slider-container :deep(.vue-slider-rail) {
border: 1px solid #dedede;
}
-.slider-container::v-deep .vue-slider-process {
+.slider-container :deep(.vue-slider-process) {
border-radius: 0;
box-shadow: inset 0px 2px 2px #ffffff80, inset 0px -2px 2px #0000002e;
}
-.slider-container::v-deep .vue-slider-process:first-child {
+.slider-container :deep(.vue-slider-process:first-child) {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
-.slider-container::v-deep .vue-slider-process:nth-last-child(3) {
+.slider-container :deep(.vue-slider-process:nth-last-child(3)) {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
@@ -247,20 +246,20 @@ button.pressed {
}
.slider-label-trim {
- transform: scale(1, 0.75) translate(-50%, -9px);
+ transform: scale(1, 0.75) translate(-50%, -9px) !important;;
}
.slider-label-stop {
font-size: 1.2rem;
- transform: translate(-50%, 12px);
+ transform: translate(-50%, 12px) !important;;
}
.slider-label-jump {
- transform: translate(-50%, -50px);
+ transform: translate(-50%, -50px) !important;;
}
.slider-label-color-change {
- transform: translate(-50%, 10px);
+ transform: translate(-50%, 10px) !important;;
}
.current-stitch-input {
@@ -286,23 +285,23 @@ button.pressed {
/* we need ::v-deep here because the svg tag is added by svg.js and so Vue
can't add the data-v-* attribute
*/
-div.simulator::v-deep svg.simulation {
+div.simulator :deep(svg.simulation) {
flex-grow: 1;
flex-shrink: 1;
order: -2;
margin-bottom: -48px;
}
-div.simulator::v-deep svg.simulation-scale {
+div.simulator :deep(svg.simulation-scale) {
height: 50px;
order: -1;
margin-left: 5px;
}
-div.simulator::v-deep .simulation-scale-label {
+div.simulator :deep(.simulation-scale-label) {
font-size: 14px;
}
-div.simulator::v-deep .cursor {
+div.simulator :deep(.cursor) {
/* not sure what to add here to make it more visible */
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-11-18 23:47:06 +0000