thm
/
slitscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

autoformat && eslint change

master
Tomáš Mládek 2019-10-31 15:51:31 +01:00
parent 4c3b984b21
commit 676c8f7fe0
14 changed files with 591 additions and 479 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
.babelrc
View File

@ -1,12 +1,22 @@
{ {
"presets": [ "presets": [
["env", { [
"env",
{
"modules": false, "modules": false,
"targets": { "targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"] "browsers": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
} }
}], }
],
"stage-2" "stage-2"
], ],
"plugins": ["transform-vue-jsx", "transform-runtime"] "plugins": [
"transform-vue-jsx",
"transform-runtime"
]
} }

54
.eslintrc.js
View File

@ -1,25 +1,35 @@
// https://eslint.org/docs/user-guide/configuring
module.exports = { module.exports = {
root: true, "env": {
parser: 'babel-eslint', "browser": true,
parserOptions: { "es6": true,
sourceType: 'module'
}, },
env: { "extends": [
browser: true, "eslint:recommended",
}, "plugin:vue/essential",
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
], ],
// add your custom rules here "globals": {
rules: { "Atomics": "readonly",
// allow async-await "SharedArrayBuffer": "readonly",
'generator-star-spacing': 'off', },
// allow debugger during development "parserOptions": {
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' "ecmaVersion": 2018,
} "sourceType": "module",
} },
"plugins": [
"vue",
],
"rules": {
"linebreak-style": [
"error",
"unix",
],
"quotes": [
"error",
"double",
],
"semi": [
"error",
"always",
],
},
};

6
.postcssrc.js
View File

@ -5,6 +5,6 @@ module.exports = {
"postcss-import": {}, "postcss-import": {},
"postcss-url": {}, "postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json // to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {} "autoprefixer": {},
} },
} };

10
config/dev.env.js
View File

@ -1,7 +1,7 @@
'use strict' "use strict";
const merge = require('webpack-merge') const merge = require("webpack-merge");
const prodEnv = require('./prod.env') const prodEnv = require("./prod.env");
module.exports = merge(prodEnv, { module.exports = merge(prodEnv, {
NODE_ENV: '"development"' NODE_ENV: "\"development\"",
}) });

30
config/index.js
View File

@ -1,19 +1,19 @@
'use strict' "use strict";
// Template version: 1.2.8 // Template version: 1.2.8
// see http://vuejs-templates.github.io/webpack for documentation. // see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path') const path = require("path");
module.exports = { module.exports = {
dev: { dev: {
// Paths // Paths
assetsSubDirectory: 'static', assetsSubDirectory: "static",
assetsPublicPath: '/', assetsPublicPath: "/",
proxyTable: {}, proxyTable: {},
// Various Dev Server settings // Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST host: "localhost", // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false, autoOpenBrowser: false,
errorOverlay: true, errorOverlay: true,
@ -33,7 +33,7 @@ module.exports = {
*/ */
// https://webpack.js.org/configuration/devtool/#development // https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map', devtool: "cheap-module-eval-source-map",
// If you have problems debugging vue-files in devtools, // If you have problems debugging vue-files in devtools,
// set this to false - it *may* help // set this to false - it *may* help
@ -45,12 +45,12 @@ module.exports = {
build: { build: {
// Template for index.html // Template for index.html
index: path.resolve(__dirname, '../dist/index.html'), index: path.resolve(__dirname, "../dist/index.html"),
// Paths // Paths
assetsRoot: path.resolve(__dirname, '../dist'), assetsRoot: path.resolve(__dirname, "../dist"),
assetsSubDirectory: 'static', assetsSubDirectory: "static",
assetsPublicPath: '/tools/slitscan', assetsPublicPath: "/tools/slitscan",
/** /**
* Source Maps * Source Maps
@ -58,19 +58,19 @@ module.exports = {
productionSourceMap: true, productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production // https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map', devtool: "#source-map",
// Gzip off by default as many popular static hosts such as // Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you. // Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to: // Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin // npm install --save-dev compression-webpack-plugin
productionGzip: false, productionGzip: false,
productionGzipExtensions: ['js', 'css'], productionGzipExtensions: ["js", "css"],
// Run the build command with an extra argument to // Run the build command with an extra argument to
// View the bundle analyzer report after build finishes: // View the bundle analyzer report after build finishes:
// `npm run build --report` // `npm run build --report`
// Set to `true` or `false` to always turn it on or off // Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report bundleAnalyzerReport: process.env.npm_config_report,
} },
} };

6
config/prod.env.js
View File

@ -1,4 +1,4 @@
'use strict' "use strict";
module.exports = { module.exports = {
NODE_ENV: '"production"' NODE_ENV: "\"production\"",
} };

88
package-lock.json generated
View File

@ -3612,6 +3612,31 @@
"integrity": "sha1-NNDJFbRe3G8BA5PH7vOCOwhWXPI=", "integrity": "sha1-NNDJFbRe3G8BA5PH7vOCOwhWXPI=",
"dev": true "dev": true
}, },
"eslint-plugin-vue": {
"version": "5.2.3",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-5.2.3.tgz",
"integrity": "sha512-mGwMqbbJf0+VvpGR5Lllq0PMxvTdrZ/ZPjmhkacrCHbubJeJOt+T6E3HUzAifa2Mxi7RSdJfC9HFpOeSYVMMIw==",
"dev": true,
"requires": {
"vue-eslint-parser": "^5.0.0"
}
},
"eslint-scope": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
"integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
"dev": true,
"requires": {
"esrecurse": "^4.1.0",
"estraverse": "^4.1.1"
}
},
"eslint-visitor-keys": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz",
"integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==",
"dev": true
},
"espree": { "espree": {
"version": "3.5.2", "version": "3.5.2",
"resolved": "https://registry.npmjs.org/espree/-/espree-3.5.2.tgz", "resolved": "https://registry.npmjs.org/espree/-/espree-3.5.2.tgz",
@ -11427,6 +11452,69 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.5.13.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.13.tgz",
"integrity": "sha512-3D+lY7HTkKbtswDM4BBHgqyq+qo8IAEE8lz8va1dz3LLmttjgo0FxairO4r1iN2OBqk8o1FyL4hvzzTFEdQSEw==" "integrity": "sha512-3D+lY7HTkKbtswDM4BBHgqyq+qo8IAEE8lz8va1dz3LLmttjgo0FxairO4r1iN2OBqk8o1FyL4hvzzTFEdQSEw=="
}, },
"vue-eslint-parser": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",
"integrity": "sha512-JlHVZwBBTNVvzmifwjpZYn0oPWH2SgWv5dojlZBsrhablDu95VFD+hriB1rQGwbD+bms6g+rAFhQHk6+NyiS6g==",
"dev": true,
"requires": {
"debug": "^4.1.0",
"eslint-scope": "^4.0.0",
"eslint-visitor-keys": "^1.0.0",
"espree": "^4.1.0",
"esquery": "^1.0.1",
"lodash": "^4.17.11"
},
"dependencies": {
"acorn": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.3.0.tgz",
"integrity": "sha512-/czfa8BwS88b9gWQVhc8eknunSA2DoJpJyTQkhheIf5E48u1N0R4q/YxxsAeqRrmK9TQ/uYfgLDfZo91UlANIA==",
"dev": true
},
"acorn-jsx": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.1.0.tgz",
"integrity": "sha512-tMUqwBWfLFbJbizRmEcWSLw6HnFzfdJs2sOJEOwwtVPMoH/0Ay+E703oZz78VSXZiiDcZrQ5XKjPIUQixhmgVw==",
"dev": true
},
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
"dev": true,
"requires": {
"ms": "^2.1.1"
}
},
"espree": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/espree/-/espree-4.1.0.tgz",
"integrity": "sha512-I5BycZW6FCVIub93TeVY1s7vjhP9CY6cXCznIRfiig7nRviKZYdRnj/sHEWC6A7WE9RDWOFq9+7OsWSYz8qv2w==",
"dev": true,
"requires": {
"acorn": "^6.0.2",
"acorn-jsx": "^5.0.0",
"eslint-visitor-keys": "^1.0.0"
}
},
"esquery": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/esquery/-/esquery-1.0.1.tgz",
"integrity": "sha512-SmiyZ5zIWH9VM+SRUReLS5Q8a7GxtRdxEBVZpm98rJM7Sb+A9DVCndXfkeFUd3byderg+EbDkfnevfCwynWaNA==",
"dev": true,
"requires": {
"estraverse": "^4.0.0"
}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"dev": true
}
}
},
"vue-hot-reload-api": { "vue-hot-reload-api": {
"version": "2.2.4", "version": "2.2.4",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.2.4.tgz", "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.2.4.tgz",

1
package.json
View File

@ -41,6 +41,7 @@
"eslint-plugin-node": "^5.2.0", "eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0", "eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1", "eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^5.2.3",
"extract-text-webpack-plugin": "^3.0.0", "extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4", "file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1", "friendly-errors-webpack-plugin": "^1.6.1",

18
src/App.vue
View File

@ -10,23 +10,23 @@
</template> </template>
<script> <script>
import Canvas from './components/Canvas' import Canvas from "./components/Canvas";
import Sidebar from './components/Sidebar' import Sidebar from "./components/Sidebar";
export default { export default {
name: 'app', name: "app",
components: { components: {
Canvas, Sidebar Canvas, Sidebar,
}, },
methods: { methods: {
loadImage: function (url) { loadImage: function (url) {
this.$refs.canvas.imageUrl = url this.$refs.canvas.imageUrl = url;
}, },
guideSize: function (size) { guideSize: function (size) {
this.$refs.canvas.slice = size this.$refs.canvas.slice = size;
} },
} },
} };
</script> </script>
<style> <style>

88
src/components/Canvas.vue
View File

@ -5,86 +5,86 @@
</template> </template>
<script> <script>
import {getDimsFit} from '../helpers/image.js' import {getDimsFit} from "../helpers/image.js";
export default { export default {
name: 'Canvas', name: "Canvas",
data: function () { data: function () {
return { return {
imageUrl: '', imageUrl: "",
image: null, image: null,
imageLoaded: false, imageLoaded: false,
slice: [0, 0] slice: [0, 0],
} };
}, },
computed: {}, computed: {},
watch: { watch: {
imageUrl: function (url) { imageUrl: function (url) {
this.loadImage(url) this.loadImage(url);
}, },
slice: function () { slice: function () {
this.refresh() this.refresh();
} },
}, },
mounted: function () { mounted: function () {
window.addEventListener('resize', this.handleResize) window.addEventListener("resize", this.handleResize);
this.handleResize() this.handleResize();
}, },
methods: { methods: {
loadImage: function (imageUrl) { loadImage: function (imageUrl) {
this.image = new Image() this.image = new Image();
this.image.onload = () => { this.image.onload = () => {
this.imageLoaded = true this.imageLoaded = true;
this.$bus.$emit('imageLoaded', this.image) this.$bus.$emit("imageLoaded", this.image);
this.refresh() this.refresh();
} };
this.image.src = imageUrl this.image.src = imageUrl;
}, },
refresh: function () { refresh: function () {
if (!this.imageLoaded) return if (!this.imageLoaded) return;
let image = this.image let image = this.image;
let canvas = this.$refs.canvas let canvas = this.$refs.canvas;
let ctx = canvas.getContext('2d') let ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.clearRect(0, 0, canvas.width, canvas.height);
let dims = getDimsFit(image.width, image.height, canvas.width, canvas.height) let dims = getDimsFit(image.width, image.height, canvas.width, canvas.height);
ctx.drawImage(image, ctx.drawImage(image,
0, 0, image.width, image.height, 0, 0, image.width, image.height,
0, 0, dims.width, dims.height) 0, 0, dims.width, dims.height);
let ratio = dims.width / image.width let ratio = dims.width / image.width;
let sliceX = parseInt(this.slice[0]) * ratio let sliceX = parseInt(this.slice[0]) * ratio;
let sliceY = parseInt(this.slice[1]) * ratio let sliceY = parseInt(this.slice[1]) * ratio;
if (sliceX > 0 && sliceY > 0) { if (sliceX > 0 && sliceY > 0) {
for (let x = 0; x < dims.width; x += sliceX) { for (let x = 0; x < dims.width; x += sliceX) {
ctx.beginPath() ctx.beginPath();
ctx.moveTo(x, 0) ctx.moveTo(x, 0);
ctx.lineTo(x, dims.height) ctx.lineTo(x, dims.height);
ctx.strokeStyle = 'red' ctx.strokeStyle = "red";
ctx.stroke() ctx.stroke();
} }
for (let y = 0; y < dims.height; y += sliceY) { for (let y = 0; y < dims.height; y += sliceY) {
ctx.beginPath() ctx.beginPath();
ctx.moveTo(0, y) ctx.moveTo(0, y);
ctx.lineTo(dims.width, y) ctx.lineTo(dims.width, y);
ctx.strokeStyle = 'red' ctx.strokeStyle = "red";
ctx.stroke() ctx.stroke();
} }
} }
}, },
handleResize: function () { handleResize: function () {
let canvasContainer = document.getElementById('canvas-container') let canvasContainer = document.getElementById("canvas-container");
let canvas = document.getElementById('canvas') let canvas = document.getElementById("canvas");
canvas.width = canvasContainer.offsetWidth - 10 canvas.width = canvasContainer.offsetWidth - 10;
canvas.height = canvasContainer.offsetHeight - 10 canvas.height = canvasContainer.offsetHeight - 10;
this.refresh() this.refresh();
} },
} },
} };
</script> </script>
<style scoped> <style scoped>

154
src/components/Player.vue
View File

@ -37,14 +37,14 @@
</template> </template>
<script> <script>
import CCapture from 'ccapture.js' import CCapture from "ccapture.js";
import bowser from 'bowser' import bowser from "bowser";
export default { export default {
name: 'player', name: "player",
props: { props: {
width: Number, width: Number,
height: Number height: Number,
}, },
data: function () { data: function () {
return { return {
@ -59,153 +59,153 @@
animation_id: null, animation_id: null,
record: false, record: false,
capturer: new CCapture({ capturer: new CCapture({
format: 'webm', format: "webm",
verbose: true verbose: true,
}) }),
} };
}, },
computed: { computed: {
frames: function () { frames: function () {
if (this.image === null) return 0 if (this.image === null) return 0;
return Math.ceil(this.image.width / this.width) * return Math.ceil(this.image.width / this.width) *
Math.ceil(this.image.height / this.height) Math.ceil(this.image.height / this.height);
}, },
canvas_height: function () { canvas_height: function () {
return this.height * this.zoom return this.height * this.zoom;
}, },
canvas_width: function () { canvas_width: function () {
return this.width * this.zoom return this.width * this.zoom;
}, },
frame_sequence: function () { frame_sequence: function () {
if (this.image === null) return [] if (this.image === null) return [];
let sequence = [] let sequence = [];
for (let pos = 0; pos < this.frames; pos++) { for (let pos = 0; pos < this.frames; pos++) {
let wb = Math.ceil(this.image.width / this.width) // width_blocks let wb = Math.ceil(this.image.width / this.width); // width_blocks
let x = (pos % wb) * this.width // x offset let x = (pos % wb) * this.width; // x offset
let w = x + this.width < this.image.width ? this.width : this.image.width - x // frame width let w = x + this.width < this.image.width ? this.width : this.image.width - x; // frame width
let y = Math.floor(pos / wb) * this.height // y offset let y = Math.floor(pos / wb) * this.height; // y offset
let h = y + this.height < this.image.height ? this.height : this.image.height - y // frame height let h = y + this.height < this.image.height ? this.height : this.image.height - y; // frame height
sequence.push([x, y, w, h]) sequence.push([x, y, w, h]);
} }
if (this.sortBySize) { if (this.sortBySize) {
let tmpCanvas = document.createElement('canvas') let tmpCanvas = document.createElement("canvas");
let ctx = tmpCanvas.getContext('2d') let ctx = tmpCanvas.getContext("2d");
let sizes = sequence.map((el, i) => { let sizes = sequence.map((el, i) => {
if (tmpCanvas.width !== el[2] || if (tmpCanvas.width !== el[2] ||
tmpCanvas.height !== el[3]) { tmpCanvas.height !== el[3]) {
tmpCanvas.width = el[2] tmpCanvas.width = el[2];
tmpCanvas.height = el[3] tmpCanvas.height = el[3];
} }
ctx.drawImage(this.image, el[0], el[1], el[2], el[3], ctx.drawImage(this.image, el[0], el[1], el[2], el[3],
0, 0, el[2], el[3]) 0, 0, el[2], el[3]);
return {index: i, length: tmpCanvas.toDataURL('image/png').length} return {index: i, length: tmpCanvas.toDataURL("image/png").length};
}) });
sizes.sort(function (a, b) { sizes.sort(function (a, b) {
return a.length - b.length return a.length - b.length;
}) });
if (!this.sortDirection) { if (!this.sortDirection) {
sizes.reverse() sizes.reverse();
} }
return sizes.map(function (el) { return sizes.map(function (el) {
return sequence[el.index] return sequence[el.index];
}) });
} else { } else {
return sequence return sequence;
} }
}, },
buttonLabel: function () { buttonLabel: function () {
if (!this.playing) { if (!this.playing) {
if (this.record) { if (this.record) {
return 'RECORD' return "RECORD";
} else { } else {
return 'PLAY' return "PLAY";
} }
} else { } else {
return 'STOP' return "STOP";
}
} }
}, },
},
mounted: function () { mounted: function () {
this.$bus.$on('imageLoaded', (image) => { this.$bus.$on("imageLoaded", (image) => {
this.image = image this.image = image;
}) });
this.clear('red') this.clear("red");
}, },
watch: { watch: {
canvas_width: function () { canvas_width: function () {
setTimeout(() => { setTimeout(() => {
this.clear('red') this.clear("red");
}, 0) }, 0);
}, },
canvas_height: function () { canvas_height: function () {
setTimeout(() => { setTimeout(() => {
this.clear('red') this.clear("red");
}, 0) }, 0);
}, },
position: function () { position: function () {
if (this.playing || this.image === null) return if (this.playing || this.image === null) return;
this.tmp_ctx = this.$refs.canvas.getContext('2d') this.tmp_ctx = this.$refs.canvas.getContext("2d");
this.$render() this.$render();
}, },
record: function () { record: function () {
if (this.record) { if (this.record) {
this.position = 0 this.position = 0;
if (!bowser.chrome) { if (!bowser.chrome) {
alert('Recording only supported in Chrome :( \n' + alert("Recording only supported in Chrome :( \n" +
'https://github.com/spite/ccapture.js/#limitations') "https://github.com/spite/ccapture.js/#limitations");
}
} }
} }
}, },
},
methods: { methods: {
playPause: function () { playPause: function () {
if (this.frames === 0) { if (this.frames === 0) {
return return;
} }
this.playing = !this.playing this.playing = !this.playing;
if (this.playing) { if (this.playing) {
this.tmp_ctx = this.$refs.canvas.getContext('2d') this.tmp_ctx = this.$refs.canvas.getContext("2d");
if (this.record) this.capturer.start() if (this.record) this.capturer.start();
this.$render_advance() this.$render_advance();
} else { } else {
cancelAnimationFrame(this.animation_id) cancelAnimationFrame(this.animation_id);
} }
}, },
clear: function (style) { clear: function (style) {
let ctx = this.$refs.canvas.getContext('2d') let ctx = this.$refs.canvas.getContext("2d");
ctx.fillStyle = style ctx.fillStyle = style;
ctx.fillRect(0, 0, parseInt(this.canvas_width), parseInt(this.canvas_height)) ctx.fillRect(0, 0, parseInt(this.canvas_width), parseInt(this.canvas_height));
}, },
$render: function () { $render: function () {
let frame = this.frame_sequence[this.position] let frame = this.frame_sequence[this.position];
if (frame === undefined) return if (frame === undefined) return;
let [x, y, w, h] = frame let [x, y, w, h] = frame;
if (w !== this.width || h !== this.height) this.clear('black') if (w !== this.width || h !== this.height) this.clear("black");
this.tmp_ctx.drawImage(this.image, this.tmp_ctx.drawImage(this.image,
x, y, w, h, x, y, w, h,
0, 0, w * this.zoom, h * this.zoom) 0, 0, w * this.zoom, h * this.zoom);
}, },
$render_advance: function () { $render_advance: function () {
this.$render() this.$render();
if (this.position < this.frames) { if (this.position < this.frames) {
this.position += 1 this.position += 1;
this.animation_id = requestAnimationFrame(this.$render_advance) this.animation_id = requestAnimationFrame(this.$render_advance);
if (this.record) this.capturer.capture(this.$refs.canvas) if (this.record) this.capturer.capture(this.$refs.canvas);
} else { } else {
this.playPause() this.playPause();
this.position = 0 this.position = 0;
if (this.record) { if (this.record) {
this.capturer.stop() this.capturer.stop();
this.capturer.save() this.capturer.save();
}
}
}
} }
} }
},
},
};
</script> </script>
<style scoped> <style scoped>

93
src/components/Sidebar.vue
View File

@ -49,12 +49,12 @@
<!--suppress JSSuspiciousNameCombination --> <!--suppress JSSuspiciousNameCombination -->
<script> <script>
import Player from '@/components/Player' import Player from "@/components/Player";
export default { export default {
name: 'Sidebar', name: "Sidebar",
components: { components: {
player: Player player: Player,
}, },
data: function () { data: function () {
return { return {
@ -65,106 +65,109 @@
lastGuideSizeY: 64, lastGuideSizeY: 64,
lockSize: true, lockSize: true,
cleanSize: false, cleanSize: false,
fps: 60 fps: 60,
} };
}, },
watch: { watch: {
guideSizeX (size) { guideSizeX (size) {
if (this.lockSize) this.guideSizeY = size if (this.lockSize) this.guideSizeY = size;
if (this.cleanSize) { if (this.cleanSize) {
let tmpSize = parseInt(size) let tmpSize = parseInt(size);
while (this.imageSize[0] % tmpSize !== 0 && while (this.imageSize[0] % tmpSize !== 0 &&
tmpSize < this.imageSize[0] && tmpSize < this.imageSize[0] &&
tmpSize > 2) { tmpSize > 2) {
if (this.lastGuideSizeX < size) { if (this.lastGuideSizeX < size) {
tmpSize += 1 tmpSize += 1;
} else { } else {
tmpSize -= 1 tmpSize -= 1;
} }
} }
if (tmpSize !== 2 && tmpSize !== this.imageSize[0]) { if (tmpSize !== 2 && tmpSize !== this.imageSize[0]) {
this.guideSizeX = tmpSize this.guideSizeX = tmpSize;
} }
} }
this.$emit('guideSize', [this.guideSizeX, this.guideSizeY]) this.$emit("guideSize", [this.guideSizeX, this.guideSizeY]);
this.lastGuideSizeX = this.guideSizeX this.lastGuideSizeX = this.guideSizeX;
this.lastGuideSizeY = this.guideSizeY this.lastGuideSizeY = this.guideSizeY;
}, },
guideSizeY (size) { guideSizeY (size) {
if (this.lockSize) this.guideSizeX = size if (this.lockSize) this.guideSizeX = size;
if (this.cleanSize) { if (this.cleanSize) {
let tmpSize = parseInt(size) let tmpSize = parseInt(size);
while (this.imageSize[1] % tmpSize !== 0 && while (this.imageSize[1] % tmpSize !== 0 &&
tmpSize < this.imageSize[1] && tmpSize < this.imageSize[1] &&
tmpSize > 2) { tmpSize > 2) {
if (this.lastGuideSizeY < size) { if (this.lastGuideSizeY < size) {
tmpSize += 1 tmpSize += 1;
} else { } else {
tmpSize -= 1 tmpSize -= 1;
} }
} }
if (tmpSize !== 2 && tmpSize !== this.imageSize[1]) { if (tmpSize !== 2 && tmpSize !== this.imageSize[1]) {
this.guideSizeY = tmpSize this.guideSizeY = tmpSize;
} }
} }
this.$emit('guideSize', [this.guideSizeX, this.guideSizeY]) this.$emit("guideSize", [this.guideSizeX, this.guideSizeY]);
this.lastGuideSizeX = this.guideSizeX this.lastGuideSizeX = this.guideSizeX;
this.lastGuideSizeY = this.guideSizeY this.lastGuideSizeY = this.guideSizeY;
}, },
lockSize: function (locked) { lockSize: function (locked) {
if (locked) { if (locked) {
if (this.guideSizeX < this.guideSizeY) this.guideSizeY = this.guideSizeX if (this.guideSizeX < this.guideSizeY) {
else this.guideSizeX = this.guideSizeY this.guideSizeY = this.guideSizeX;
this.cleanSize = false } else {
this.guideSizeX = this.guideSizeY;
}
this.cleanSize = false;
} }
}, },
cleanSize: function (clean) { cleanSize: function (clean) {
if (clean) { if (clean) {
this.lockSize = false this.lockSize = false;
}
} }
}, },
},
computed: { computed: {
slices: function () { slices: function () {
if (this.imageSize[0] === -1 || this.imageSize[1] === -1) { if (this.imageSize[0] === -1 || this.imageSize[1] === -1) {
return '-' return "-";
} else { } else {
return Math.ceil(this.imageSize[0] / this.guideSizeX) * return Math.ceil(this.imageSize[0] / this.guideSizeX) *
Math.ceil(this.imageSize[1] / this.guideSizeY) Math.ceil(this.imageSize[1] / this.guideSizeY);
} }
}, },
length: function () { length: function () {
if (this.imageSize[0] === -1 || this.imageSize[1] === -1) { if (this.imageSize[0] === -1 || this.imageSize[1] === -1) {
return '-' return "-";
} else { } else {
let seconds = Math.round(this.slices / this.fps * 100) / 100 let seconds = Math.round(this.slices / this.fps * 100) / 100;
let mins = Math.floor(seconds / 60) let mins = Math.floor(seconds / 60);
let secs = Math.round(seconds % 60) let secs = Math.round(seconds % 60);
return '~' + seconds + ' seconds' + (mins > 0 ? (' (' + mins + 'm ' + secs + 's)') : '') return "~" + seconds + " seconds" + (mins > 0 ? (" (" + mins + "m " + secs + "s)") : "");
} }
}, },
noXremainder: function () { noXremainder: function () {
return this.imageSize[0] % this.guideSizeX === 0 return this.imageSize[0] % this.guideSizeX === 0;
}, },
noYremainder: function () { noYremainder: function () {
return this.imageSize[1] % this.guideSizeY === 0 return this.imageSize[1] % this.guideSizeY === 0;
} },
}, },
methods: { methods: {
loadImage (e) { loadImage (e) {
let url = URL.createObjectURL(e.target.files[0]) let url = URL.createObjectURL(e.target.files[0]);
this.$emit('loadImage', url) this.$emit("loadImage", url);
} },
}, },
mounted: function () { mounted: function () {
this.$bus.$on('imageLoaded', (image) => { this.$bus.$on("imageLoaded", (image) => {
this.imageSize = [image.width, image.height] this.imageSize = [image.width, image.height];
}) });
this.$emit('guideSize', [this.guideSizeX, this.guideSizeY]) this.$emit("guideSize", [this.guideSizeX, this.guideSizeY]);
} },
} };
</script> </script>
<style scoped> <style scoped>

12
src/helpers/image.js
View File

@ -1,16 +1,16 @@
export function getDimsFit (wOriginal, hOriginal, wContain, hContain) { export function getDimsFit (wOriginal, hOriginal, wContain, hContain) {
let origRatio = wOriginal / hOriginal let origRatio = wOriginal / hOriginal;
let containRatio = wContain / hContain let containRatio = wContain / hContain;
if (origRatio > containRatio) { if (origRatio > containRatio) {
return { return {
width: wContain, width: wContain,
height: wContain / origRatio height: wContain / origRatio,
} };
} else { } else {
return { return {
width: origRatio * hContain, width: origRatio * hContain,
height: hContain height: hContain,
} };
} }
} }

16
src/main.js
View File

@ -1,15 +1,15 @@
// The Vue build version to load with the `import` command // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' import Vue from "vue";
import App from './App' import App from "./App";
Vue.config.productionTip = false Vue.config.productionTip = false;
Vue.prototype.$bus = new Vue({}) Vue.prototype.$bus = new Vue({});
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
el: '#app', el: "#app",
template: '<App/>', template: "<App/>",
components: { App } components: {App},
}) });