autoformat && eslint change
parent
4c3b984b21
commit
676c8f7fe0
22
.babelrc
22
.babelrc
|
|
@ -1,12 +1,22 @@
|
|||
{
|
||||
"presets": [
|
||||
["env", {
|
||||
"modules": false,
|
||||
"targets": {
|
||||
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
|
||||
[
|
||||
"env",
|
||||
{
|
||||
"modules": false,
|
||||
"targets": {
|
||||
"browsers": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
}
|
||||
}
|
||||
}],
|
||||
],
|
||||
"stage-2"
|
||||
],
|
||||
"plugins": ["transform-vue-jsx", "transform-runtime"]
|
||||
"plugins": [
|
||||
"transform-vue-jsx",
|
||||
"transform-runtime"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
54
.eslintrc.js
54
.eslintrc.js
|
|
@ -1,25 +1,35 @@
|
|||
// https://eslint.org/docs/user-guide/configuring
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
parser: 'babel-eslint',
|
||||
parserOptions: {
|
||||
sourceType: 'module'
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es6": true,
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
},
|
||||
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
|
||||
extends: 'standard',
|
||||
// required to lint *.vue files
|
||||
plugins: [
|
||||
'html'
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:vue/essential",
|
||||
],
|
||||
// add your custom rules here
|
||||
rules: {
|
||||
// allow async-await
|
||||
'generator-star-spacing': 'off',
|
||||
// allow debugger during development
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
|
||||
}
|
||||
}
|
||||
"globals": {
|
||||
"Atomics": "readonly",
|
||||
"SharedArrayBuffer": "readonly",
|
||||
},
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2018,
|
||||
"sourceType": "module",
|
||||
},
|
||||
"plugins": [
|
||||
"vue",
|
||||
],
|
||||
"rules": {
|
||||
"linebreak-style": [
|
||||
"error",
|
||||
"unix",
|
||||
],
|
||||
"quotes": [
|
||||
"error",
|
||||
"double",
|
||||
],
|
||||
"semi": [
|
||||
"error",
|
||||
"always",
|
||||
],
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,6 +5,6 @@ module.exports = {
|
|||
"postcss-import": {},
|
||||
"postcss-url": {},
|
||||
// to edit target browsers: use "browserslist" field in package.json
|
||||
"autoprefixer": {}
|
||||
}
|
||||
}
|
||||
"autoprefixer": {},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
'use strict'
|
||||
const merge = require('webpack-merge')
|
||||
const prodEnv = require('./prod.env')
|
||||
"use strict";
|
||||
const merge = require("webpack-merge");
|
||||
const prodEnv = require("./prod.env");
|
||||
|
||||
module.exports = merge(prodEnv, {
|
||||
NODE_ENV: '"development"'
|
||||
})
|
||||
NODE_ENV: "\"development\"",
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
'use strict'
|
||||
"use strict";
|
||||
// Template version: 1.2.8
|
||||
// see http://vuejs-templates.github.io/webpack for documentation.
|
||||
|
||||
const path = require('path')
|
||||
const path = require("path");
|
||||
|
||||
module.exports = {
|
||||
dev: {
|
||||
|
||||
// Paths
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '/',
|
||||
assetsSubDirectory: "static",
|
||||
assetsPublicPath: "/",
|
||||
proxyTable: {},
|
||||
|
||||
// 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
|
||||
autoOpenBrowser: false,
|
||||
errorOverlay: true,
|
||||
|
|
@ -33,7 +33,7 @@ module.exports = {
|
|||
*/
|
||||
|
||||
// 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,
|
||||
// set this to false - it *may* help
|
||||
|
|
@ -45,12 +45,12 @@ module.exports = {
|
|||
|
||||
build: {
|
||||
// Template for index.html
|
||||
index: path.resolve(__dirname, '../dist/index.html'),
|
||||
index: path.resolve(__dirname, "../dist/index.html"),
|
||||
|
||||
// Paths
|
||||
assetsRoot: path.resolve(__dirname, '../dist'),
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '/tools/slitscan',
|
||||
assetsRoot: path.resolve(__dirname, "../dist"),
|
||||
assetsSubDirectory: "static",
|
||||
assetsPublicPath: "/tools/slitscan",
|
||||
|
||||
/**
|
||||
* Source Maps
|
||||
|
|
@ -58,19 +58,19 @@ module.exports = {
|
|||
|
||||
productionSourceMap: true,
|
||||
// https://webpack.js.org/configuration/devtool/#production
|
||||
devtool: '#source-map',
|
||||
devtool: "#source-map",
|
||||
|
||||
// Gzip off by default as many popular static hosts such as
|
||||
// Surge or Netlify already gzip all static assets for you.
|
||||
// Before setting to `true`, make sure to:
|
||||
// npm install --save-dev compression-webpack-plugin
|
||||
productionGzip: false,
|
||||
productionGzipExtensions: ['js', 'css'],
|
||||
productionGzipExtensions: ["js", "css"],
|
||||
|
||||
// Run the build command with an extra argument to
|
||||
// View the bundle analyzer report after build finishes:
|
||||
// `npm run build --report`
|
||||
// Set to `true` or `false` to always turn it on or off
|
||||
bundleAnalyzerReport: process.env.npm_config_report
|
||||
}
|
||||
}
|
||||
bundleAnalyzerReport: process.env.npm_config_report,
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
'use strict'
|
||||
"use strict";
|
||||
module.exports = {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
NODE_ENV: "\"production\"",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3612,6 +3612,31 @@
|
|||
"integrity": "sha1-NNDJFbRe3G8BA5PH7vOCOwhWXPI=",
|
||||
"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": {
|
||||
"version": "3.5.2",
|
||||
"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",
|
||||
"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": {
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.2.4.tgz",
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
"eslint-plugin-node": "^5.2.0",
|
||||
"eslint-plugin-promise": "^3.4.0",
|
||||
"eslint-plugin-standard": "^3.0.1",
|
||||
"eslint-plugin-vue": "^5.2.3",
|
||||
"extract-text-webpack-plugin": "^3.0.0",
|
||||
"file-loader": "^1.1.4",
|
||||
"friendly-errors-webpack-plugin": "^1.6.1",
|
||||
|
|
|
|||
78
src/App.vue
78
src/App.vue
|
|
@ -10,53 +10,53 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Canvas from './components/Canvas'
|
||||
import Sidebar from './components/Sidebar'
|
||||
import Canvas from "./components/Canvas";
|
||||
import Sidebar from "./components/Sidebar";
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
Canvas, Sidebar
|
||||
export default {
|
||||
name: "app",
|
||||
components: {
|
||||
Canvas, Sidebar,
|
||||
},
|
||||
methods: {
|
||||
loadImage: function (url) {
|
||||
this.$refs.canvas.imageUrl = url;
|
||||
},
|
||||
methods: {
|
||||
loadImage: function (url) {
|
||||
this.$refs.canvas.imageUrl = url
|
||||
},
|
||||
guideSize: function (size) {
|
||||
this.$refs.canvas.slice = size
|
||||
}
|
||||
}
|
||||
}
|
||||
guideSize: function (size) {
|
||||
this.$refs.canvas.slice = size;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html, body, #app {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
html, body, #app {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
|
||||
font-family: Consolas, Inconsolata, monospace, serif;
|
||||
line-height: .97em;
|
||||
font-size: .95em;
|
||||
}
|
||||
font-family: Consolas, Inconsolata, monospace, serif;
|
||||
line-height: .97em;
|
||||
font-size: .95em;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: .95em;
|
||||
}
|
||||
input {
|
||||
font-size: .95em;
|
||||
}
|
||||
|
||||
#menu-wrap, #canvas-wrap {
|
||||
display: inline-block;
|
||||
}
|
||||
#menu-wrap, #canvas-wrap {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#menu-wrap {
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
#menu-wrap {
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#canvas-wrap {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
}
|
||||
#canvas-wrap {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,94 +5,94 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {getDimsFit} from '../helpers/image.js'
|
||||
import {getDimsFit} from "../helpers/image.js";
|
||||
|
||||
export default {
|
||||
name: 'Canvas',
|
||||
data: function () {
|
||||
return {
|
||||
imageUrl: '',
|
||||
image: null,
|
||||
imageLoaded: false,
|
||||
slice: [0, 0]
|
||||
}
|
||||
export default {
|
||||
name: "Canvas",
|
||||
data: function () {
|
||||
return {
|
||||
imageUrl: "",
|
||||
image: null,
|
||||
imageLoaded: false,
|
||||
slice: [0, 0],
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
imageUrl: function (url) {
|
||||
this.loadImage(url);
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
imageUrl: function (url) {
|
||||
this.loadImage(url)
|
||||
},
|
||||
slice: function () {
|
||||
this.refresh()
|
||||
}
|
||||
slice: function () {
|
||||
this.refresh();
|
||||
},
|
||||
mounted: function () {
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
this.handleResize()
|
||||
},
|
||||
mounted: function () {
|
||||
window.addEventListener("resize", this.handleResize);
|
||||
this.handleResize();
|
||||
},
|
||||
methods: {
|
||||
loadImage: function (imageUrl) {
|
||||
this.image = new Image();
|
||||
this.image.onload = () => {
|
||||
this.imageLoaded = true;
|
||||
this.$bus.$emit("imageLoaded", this.image);
|
||||
this.refresh();
|
||||
};
|
||||
this.image.src = imageUrl;
|
||||
},
|
||||
methods: {
|
||||
loadImage: function (imageUrl) {
|
||||
this.image = new Image()
|
||||
this.image.onload = () => {
|
||||
this.imageLoaded = true
|
||||
this.$bus.$emit('imageLoaded', this.image)
|
||||
this.refresh()
|
||||
refresh: function () {
|
||||
if (!this.imageLoaded) return;
|
||||
let image = this.image;
|
||||
let canvas = this.$refs.canvas;
|
||||
let ctx = canvas.getContext("2d");
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
let dims = getDimsFit(image.width, image.height, canvas.width, canvas.height);
|
||||
ctx.drawImage(image,
|
||||
0, 0, image.width, image.height,
|
||||
0, 0, dims.width, dims.height);
|
||||
|
||||
let ratio = dims.width / image.width;
|
||||
|
||||
let sliceX = parseInt(this.slice[0]) * ratio;
|
||||
let sliceY = parseInt(this.slice[1]) * ratio;
|
||||
|
||||
if (sliceX > 0 && sliceY > 0) {
|
||||
for (let x = 0; x < dims.width; x += sliceX) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, 0);
|
||||
ctx.lineTo(x, dims.height);
|
||||
ctx.strokeStyle = "red";
|
||||
ctx.stroke();
|
||||
}
|
||||
this.image.src = imageUrl
|
||||
},
|
||||
refresh: function () {
|
||||
if (!this.imageLoaded) return
|
||||
let image = this.image
|
||||
let canvas = this.$refs.canvas
|
||||
let ctx = canvas.getContext('2d')
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
|
||||
let dims = getDimsFit(image.width, image.height, canvas.width, canvas.height)
|
||||
ctx.drawImage(image,
|
||||
0, 0, image.width, image.height,
|
||||
0, 0, dims.width, dims.height)
|
||||
|
||||
let ratio = dims.width / image.width
|
||||
|
||||
let sliceX = parseInt(this.slice[0]) * ratio
|
||||
let sliceY = parseInt(this.slice[1]) * ratio
|
||||
|
||||
if (sliceX > 0 && sliceY > 0) {
|
||||
for (let x = 0; x < dims.width; x += sliceX) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x, 0)
|
||||
ctx.lineTo(x, dims.height)
|
||||
ctx.strokeStyle = 'red'
|
||||
ctx.stroke()
|
||||
}
|
||||
for (let y = 0; y < dims.height; y += sliceY) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(0, y)
|
||||
ctx.lineTo(dims.width, y)
|
||||
ctx.strokeStyle = 'red'
|
||||
ctx.stroke()
|
||||
}
|
||||
for (let y = 0; y < dims.height; y += sliceY) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, y);
|
||||
ctx.lineTo(dims.width, y);
|
||||
ctx.strokeStyle = "red";
|
||||
ctx.stroke();
|
||||
}
|
||||
},
|
||||
handleResize: function () {
|
||||
let canvasContainer = document.getElementById('canvas-container')
|
||||
let canvas = document.getElementById('canvas')
|
||||
|
||||
canvas.width = canvasContainer.offsetWidth - 10
|
||||
canvas.height = canvasContainer.offsetHeight - 10
|
||||
this.refresh()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
handleResize: function () {
|
||||
let canvasContainer = document.getElementById("canvas-container");
|
||||
let canvas = document.getElementById("canvas");
|
||||
|
||||
canvas.width = canvasContainer.offsetWidth - 10;
|
||||
canvas.height = canvasContainer.offsetHeight - 10;
|
||||
this.refresh();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#canvas-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#canvas-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -37,197 +37,197 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import CCapture from 'ccapture.js'
|
||||
import bowser from 'bowser'
|
||||
import CCapture from "ccapture.js";
|
||||
import bowser from "bowser";
|
||||
|
||||
export default {
|
||||
name: 'player',
|
||||
props: {
|
||||
width: Number,
|
||||
height: Number
|
||||
export default {
|
||||
name: "player",
|
||||
props: {
|
||||
width: Number,
|
||||
height: Number,
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
image: null,
|
||||
playing: false,
|
||||
zoom: 1,
|
||||
fullscreen: false,
|
||||
sortBySize: false,
|
||||
sortDirection: false,
|
||||
position: 0,
|
||||
tmp_ctx: null,
|
||||
animation_id: null,
|
||||
record: false,
|
||||
capturer: new CCapture({
|
||||
format: "webm",
|
||||
verbose: true,
|
||||
}),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
frames: function () {
|
||||
if (this.image === null) return 0;
|
||||
return Math.ceil(this.image.width / this.width) *
|
||||
Math.ceil(this.image.height / this.height);
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
image: null,
|
||||
playing: false,
|
||||
zoom: 1,
|
||||
fullscreen: false,
|
||||
sortBySize: false,
|
||||
sortDirection: false,
|
||||
position: 0,
|
||||
tmp_ctx: null,
|
||||
animation_id: null,
|
||||
record: false,
|
||||
capturer: new CCapture({
|
||||
format: 'webm',
|
||||
verbose: true
|
||||
})
|
||||
canvas_height: function () {
|
||||
return this.height * this.zoom;
|
||||
},
|
||||
canvas_width: function () {
|
||||
return this.width * this.zoom;
|
||||
},
|
||||
frame_sequence: function () {
|
||||
if (this.image === null) return [];
|
||||
|
||||
let sequence = [];
|
||||
for (let pos = 0; pos < this.frames; pos++) {
|
||||
let wb = Math.ceil(this.image.width / this.width); // width_blocks
|
||||
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 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
|
||||
sequence.push([x, y, w, h]);
|
||||
}
|
||||
if (this.sortBySize) {
|
||||
let tmpCanvas = document.createElement("canvas");
|
||||
let ctx = tmpCanvas.getContext("2d");
|
||||
let sizes = sequence.map((el, i) => {
|
||||
if (tmpCanvas.width !== el[2] ||
|
||||
tmpCanvas.height !== el[3]) {
|
||||
tmpCanvas.width = el[2];
|
||||
tmpCanvas.height = el[3];
|
||||
}
|
||||
ctx.drawImage(this.image, el[0], el[1], el[2], el[3],
|
||||
0, 0, el[2], el[3]);
|
||||
return {index: i, length: tmpCanvas.toDataURL("image/png").length};
|
||||
});
|
||||
|
||||
sizes.sort(function (a, b) {
|
||||
return a.length - b.length;
|
||||
});
|
||||
|
||||
if (!this.sortDirection) {
|
||||
sizes.reverse();
|
||||
}
|
||||
|
||||
return sizes.map(function (el) {
|
||||
return sequence[el.index];
|
||||
});
|
||||
} else {
|
||||
return sequence;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
frames: function () {
|
||||
if (this.image === null) return 0
|
||||
return Math.ceil(this.image.width / this.width) *
|
||||
Math.ceil(this.image.height / this.height)
|
||||
},
|
||||
canvas_height: function () {
|
||||
return this.height * this.zoom
|
||||
},
|
||||
canvas_width: function () {
|
||||
return this.width * this.zoom
|
||||
},
|
||||
frame_sequence: function () {
|
||||
if (this.image === null) return []
|
||||
|
||||
let sequence = []
|
||||
for (let pos = 0; pos < this.frames; pos++) {
|
||||
let wb = Math.ceil(this.image.width / this.width) // width_blocks
|
||||
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 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
|
||||
sequence.push([x, y, w, h])
|
||||
}
|
||||
if (this.sortBySize) {
|
||||
let tmpCanvas = document.createElement('canvas')
|
||||
let ctx = tmpCanvas.getContext('2d')
|
||||
let sizes = sequence.map((el, i) => {
|
||||
if (tmpCanvas.width !== el[2] ||
|
||||
tmpCanvas.height !== el[3]) {
|
||||
tmpCanvas.width = el[2]
|
||||
tmpCanvas.height = el[3]
|
||||
}
|
||||
ctx.drawImage(this.image, el[0], el[1], el[2], el[3],
|
||||
0, 0, el[2], el[3])
|
||||
return {index: i, length: tmpCanvas.toDataURL('image/png').length}
|
||||
})
|
||||
|
||||
sizes.sort(function (a, b) {
|
||||
return a.length - b.length
|
||||
})
|
||||
|
||||
if (!this.sortDirection) {
|
||||
sizes.reverse()
|
||||
}
|
||||
|
||||
return sizes.map(function (el) {
|
||||
return sequence[el.index]
|
||||
})
|
||||
} else {
|
||||
return sequence
|
||||
}
|
||||
},
|
||||
buttonLabel: function () {
|
||||
if (!this.playing) {
|
||||
if (this.record) {
|
||||
return 'RECORD'
|
||||
} else {
|
||||
return 'PLAY'
|
||||
}
|
||||
} else {
|
||||
return 'STOP'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.$bus.$on('imageLoaded', (image) => {
|
||||
this.image = image
|
||||
})
|
||||
this.clear('red')
|
||||
},
|
||||
watch: {
|
||||
canvas_width: function () {
|
||||
setTimeout(() => {
|
||||
this.clear('red')
|
||||
}, 0)
|
||||
},
|
||||
canvas_height: function () {
|
||||
setTimeout(() => {
|
||||
this.clear('red')
|
||||
}, 0)
|
||||
},
|
||||
position: function () {
|
||||
if (this.playing || this.image === null) return
|
||||
this.tmp_ctx = this.$refs.canvas.getContext('2d')
|
||||
this.$render()
|
||||
},
|
||||
record: function () {
|
||||
buttonLabel: function () {
|
||||
if (!this.playing) {
|
||||
if (this.record) {
|
||||
this.position = 0
|
||||
if (!bowser.chrome) {
|
||||
alert('Recording only supported in Chrome :( \n' +
|
||||
'https://github.com/spite/ccapture.js/#limitations')
|
||||
}
|
||||
return "RECORD";
|
||||
} else {
|
||||
return "PLAY";
|
||||
}
|
||||
} else {
|
||||
return "STOP";
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
this.$bus.$on("imageLoaded", (image) => {
|
||||
this.image = image;
|
||||
});
|
||||
this.clear("red");
|
||||
},
|
||||
watch: {
|
||||
canvas_width: function () {
|
||||
setTimeout(() => {
|
||||
this.clear("red");
|
||||
}, 0);
|
||||
},
|
||||
canvas_height: function () {
|
||||
setTimeout(() => {
|
||||
this.clear("red");
|
||||
}, 0);
|
||||
},
|
||||
position: function () {
|
||||
if (this.playing || this.image === null) return;
|
||||
this.tmp_ctx = this.$refs.canvas.getContext("2d");
|
||||
this.$render();
|
||||
},
|
||||
record: function () {
|
||||
if (this.record) {
|
||||
this.position = 0;
|
||||
if (!bowser.chrome) {
|
||||
alert("Recording only supported in Chrome :( \n" +
|
||||
"https://github.com/spite/ccapture.js/#limitations");
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
playPause: function () {
|
||||
if (this.frames === 0) {
|
||||
return
|
||||
}
|
||||
this.playing = !this.playing
|
||||
if (this.playing) {
|
||||
this.tmp_ctx = this.$refs.canvas.getContext('2d')
|
||||
if (this.record) this.capturer.start()
|
||||
this.$render_advance()
|
||||
} else {
|
||||
cancelAnimationFrame(this.animation_id)
|
||||
}
|
||||
},
|
||||
clear: function (style) {
|
||||
let ctx = this.$refs.canvas.getContext('2d')
|
||||
ctx.fillStyle = style
|
||||
ctx.fillRect(0, 0, parseInt(this.canvas_width), parseInt(this.canvas_height))
|
||||
},
|
||||
$render: function () {
|
||||
let frame = this.frame_sequence[this.position]
|
||||
if (frame === undefined) return
|
||||
let [x, y, w, h] = frame
|
||||
if (w !== this.width || h !== this.height) this.clear('black')
|
||||
this.tmp_ctx.drawImage(this.image,
|
||||
x, y, w, h,
|
||||
0, 0, w * this.zoom, h * this.zoom)
|
||||
},
|
||||
$render_advance: function () {
|
||||
this.$render()
|
||||
if (this.position < this.frames) {
|
||||
this.position += 1
|
||||
this.animation_id = requestAnimationFrame(this.$render_advance)
|
||||
if (this.record) this.capturer.capture(this.$refs.canvas)
|
||||
} else {
|
||||
this.playPause()
|
||||
this.position = 0
|
||||
if (this.record) {
|
||||
this.capturer.stop()
|
||||
this.capturer.save()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
playPause: function () {
|
||||
if (this.frames === 0) {
|
||||
return;
|
||||
}
|
||||
this.playing = !this.playing;
|
||||
if (this.playing) {
|
||||
this.tmp_ctx = this.$refs.canvas.getContext("2d");
|
||||
if (this.record) this.capturer.start();
|
||||
this.$render_advance();
|
||||
} else {
|
||||
cancelAnimationFrame(this.animation_id);
|
||||
}
|
||||
},
|
||||
clear: function (style) {
|
||||
let ctx = this.$refs.canvas.getContext("2d");
|
||||
ctx.fillStyle = style;
|
||||
ctx.fillRect(0, 0, parseInt(this.canvas_width), parseInt(this.canvas_height));
|
||||
},
|
||||
$render: function () {
|
||||
let frame = this.frame_sequence[this.position];
|
||||
if (frame === undefined) return;
|
||||
let [x, y, w, h] = frame;
|
||||
if (w !== this.width || h !== this.height) this.clear("black");
|
||||
this.tmp_ctx.drawImage(this.image,
|
||||
x, y, w, h,
|
||||
0, 0, w * this.zoom, h * this.zoom);
|
||||
},
|
||||
$render_advance: function () {
|
||||
this.$render();
|
||||
if (this.position < this.frames) {
|
||||
this.position += 1;
|
||||
this.animation_id = requestAnimationFrame(this.$render_advance);
|
||||
if (this.record) this.capturer.capture(this.$refs.canvas);
|
||||
} else {
|
||||
this.playPause();
|
||||
this.position = 0;
|
||||
if (this.record) {
|
||||
this.capturer.stop();
|
||||
this.capturer.save();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#player {
|
||||
text-align: center;
|
||||
}
|
||||
#player {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(1, 1, 1, .9);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.fullscreen {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(1, 1, 1, .9);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fullscreen-controls {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.fullscreen-controls {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#zoom {
|
||||
width: 3em;
|
||||
}
|
||||
#zoom {
|
||||
width: 3em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -49,137 +49,140 @@
|
|||
|
||||
<!--suppress JSSuspiciousNameCombination -->
|
||||
<script>
|
||||
import Player from '@/components/Player'
|
||||
import Player from "@/components/Player";
|
||||
|
||||
export default {
|
||||
name: 'Sidebar',
|
||||
components: {
|
||||
player: Player
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
imageSize: [-1, -1],
|
||||
guideSizeX: 64,
|
||||
guideSizeY: 64,
|
||||
lastGuideSizeX: 64,
|
||||
lastGuideSizeY: 64,
|
||||
lockSize: true,
|
||||
cleanSize: false,
|
||||
fps: 60
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
guideSizeX (size) {
|
||||
if (this.lockSize) this.guideSizeY = size
|
||||
if (this.cleanSize) {
|
||||
let tmpSize = parseInt(size)
|
||||
while (this.imageSize[0] % tmpSize !== 0 &&
|
||||
tmpSize < this.imageSize[0] &&
|
||||
tmpSize > 2) {
|
||||
if (this.lastGuideSizeX < size) {
|
||||
tmpSize += 1
|
||||
} else {
|
||||
tmpSize -= 1
|
||||
}
|
||||
}
|
||||
if (tmpSize !== 2 && tmpSize !== this.imageSize[0]) {
|
||||
this.guideSizeX = tmpSize
|
||||
export default {
|
||||
name: "Sidebar",
|
||||
components: {
|
||||
player: Player,
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
imageSize: [-1, -1],
|
||||
guideSizeX: 64,
|
||||
guideSizeY: 64,
|
||||
lastGuideSizeX: 64,
|
||||
lastGuideSizeY: 64,
|
||||
lockSize: true,
|
||||
cleanSize: false,
|
||||
fps: 60,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
guideSizeX (size) {
|
||||
if (this.lockSize) this.guideSizeY = size;
|
||||
if (this.cleanSize) {
|
||||
let tmpSize = parseInt(size);
|
||||
while (this.imageSize[0] % tmpSize !== 0 &&
|
||||
tmpSize < this.imageSize[0] &&
|
||||
tmpSize > 2) {
|
||||
if (this.lastGuideSizeX < size) {
|
||||
tmpSize += 1;
|
||||
} else {
|
||||
tmpSize -= 1;
|
||||
}
|
||||
}
|
||||
this.$emit('guideSize', [this.guideSizeX, this.guideSizeY])
|
||||
this.lastGuideSizeX = this.guideSizeX
|
||||
this.lastGuideSizeY = this.guideSizeY
|
||||
},
|
||||
guideSizeY (size) {
|
||||
if (this.lockSize) this.guideSizeX = size
|
||||
if (this.cleanSize) {
|
||||
let tmpSize = parseInt(size)
|
||||
while (this.imageSize[1] % tmpSize !== 0 &&
|
||||
tmpSize < this.imageSize[1] &&
|
||||
tmpSize > 2) {
|
||||
if (this.lastGuideSizeY < size) {
|
||||
tmpSize += 1
|
||||
} else {
|
||||
tmpSize -= 1
|
||||
}
|
||||
}
|
||||
if (tmpSize !== 2 && tmpSize !== this.imageSize[1]) {
|
||||
this.guideSizeY = tmpSize
|
||||
}
|
||||
}
|
||||
this.$emit('guideSize', [this.guideSizeX, this.guideSizeY])
|
||||
this.lastGuideSizeX = this.guideSizeX
|
||||
this.lastGuideSizeY = this.guideSizeY
|
||||
},
|
||||
lockSize: function (locked) {
|
||||
if (locked) {
|
||||
if (this.guideSizeX < this.guideSizeY) this.guideSizeY = this.guideSizeX
|
||||
else this.guideSizeX = this.guideSizeY
|
||||
this.cleanSize = false
|
||||
}
|
||||
},
|
||||
cleanSize: function (clean) {
|
||||
if (clean) {
|
||||
this.lockSize = false
|
||||
if (tmpSize !== 2 && tmpSize !== this.imageSize[0]) {
|
||||
this.guideSizeX = tmpSize;
|
||||
}
|
||||
}
|
||||
this.$emit("guideSize", [this.guideSizeX, this.guideSizeY]);
|
||||
this.lastGuideSizeX = this.guideSizeX;
|
||||
this.lastGuideSizeY = this.guideSizeY;
|
||||
},
|
||||
computed: {
|
||||
slices: function () {
|
||||
if (this.imageSize[0] === -1 || this.imageSize[1] === -1) {
|
||||
return '-'
|
||||
guideSizeY (size) {
|
||||
if (this.lockSize) this.guideSizeX = size;
|
||||
if (this.cleanSize) {
|
||||
let tmpSize = parseInt(size);
|
||||
while (this.imageSize[1] % tmpSize !== 0 &&
|
||||
tmpSize < this.imageSize[1] &&
|
||||
tmpSize > 2) {
|
||||
if (this.lastGuideSizeY < size) {
|
||||
tmpSize += 1;
|
||||
} else {
|
||||
tmpSize -= 1;
|
||||
}
|
||||
}
|
||||
if (tmpSize !== 2 && tmpSize !== this.imageSize[1]) {
|
||||
this.guideSizeY = tmpSize;
|
||||
}
|
||||
}
|
||||
this.$emit("guideSize", [this.guideSizeX, this.guideSizeY]);
|
||||
this.lastGuideSizeX = this.guideSizeX;
|
||||
this.lastGuideSizeY = this.guideSizeY;
|
||||
},
|
||||
lockSize: function (locked) {
|
||||
if (locked) {
|
||||
if (this.guideSizeX < this.guideSizeY) {
|
||||
this.guideSizeY = this.guideSizeX;
|
||||
} else {
|
||||
return Math.ceil(this.imageSize[0] / this.guideSizeX) *
|
||||
Math.ceil(this.imageSize[1] / this.guideSizeY)
|
||||
this.guideSizeX = this.guideSizeY;
|
||||
}
|
||||
},
|
||||
length: function () {
|
||||
if (this.imageSize[0] === -1 || this.imageSize[1] === -1) {
|
||||
return '-'
|
||||
} else {
|
||||
let seconds = Math.round(this.slices / this.fps * 100) / 100
|
||||
|
||||
let mins = Math.floor(seconds / 60)
|
||||
let secs = Math.round(seconds % 60)
|
||||
|
||||
return '~' + seconds + ' seconds' + (mins > 0 ? (' (' + mins + 'm ' + secs + 's)') : '')
|
||||
}
|
||||
},
|
||||
noXremainder: function () {
|
||||
return this.imageSize[0] % this.guideSizeX === 0
|
||||
},
|
||||
noYremainder: function () {
|
||||
return this.imageSize[1] % this.guideSizeY === 0
|
||||
this.cleanSize = false;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadImage (e) {
|
||||
let url = URL.createObjectURL(e.target.files[0])
|
||||
this.$emit('loadImage', url)
|
||||
cleanSize: function (clean) {
|
||||
if (clean) {
|
||||
this.lockSize = false;
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.$bus.$on('imageLoaded', (image) => {
|
||||
this.imageSize = [image.width, image.height]
|
||||
})
|
||||
this.$emit('guideSize', [this.guideSizeX, this.guideSizeY])
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
slices: function () {
|
||||
if (this.imageSize[0] === -1 || this.imageSize[1] === -1) {
|
||||
return "-";
|
||||
} else {
|
||||
return Math.ceil(this.imageSize[0] / this.guideSizeX) *
|
||||
Math.ceil(this.imageSize[1] / this.guideSizeY);
|
||||
}
|
||||
},
|
||||
length: function () {
|
||||
if (this.imageSize[0] === -1 || this.imageSize[1] === -1) {
|
||||
return "-";
|
||||
} else {
|
||||
let seconds = Math.round(this.slices / this.fps * 100) / 100;
|
||||
|
||||
let mins = Math.floor(seconds / 60);
|
||||
let secs = Math.round(seconds % 60);
|
||||
|
||||
return "~" + seconds + " seconds" + (mins > 0 ? (" (" + mins + "m " + secs + "s)") : "");
|
||||
}
|
||||
},
|
||||
noXremainder: function () {
|
||||
return this.imageSize[0] % this.guideSizeX === 0;
|
||||
},
|
||||
noYremainder: function () {
|
||||
return this.imageSize[1] % this.guideSizeY === 0;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
loadImage (e) {
|
||||
let url = URL.createObjectURL(e.target.files[0]);
|
||||
this.$emit("loadImage", url);
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
this.$bus.$on("imageLoaded", (image) => {
|
||||
this.imageSize = [image.width, image.height];
|
||||
});
|
||||
this.$emit("guideSize", [this.guideSizeX, this.guideSizeY]);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#sidebar-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
#sidebar-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border-right: 1px solid black;
|
||||
}
|
||||
border-right: 1px solid black;
|
||||
}
|
||||
|
||||
.spinBox {
|
||||
height: 1em;
|
||||
}
|
||||
.spinBox {
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
export function getDimsFit (wOriginal, hOriginal, wContain, hContain) {
|
||||
let origRatio = wOriginal / hOriginal
|
||||
let containRatio = wContain / hContain
|
||||
let origRatio = wOriginal / hOriginal;
|
||||
let containRatio = wContain / hContain;
|
||||
|
||||
if (origRatio > containRatio) {
|
||||
return {
|
||||
width: wContain,
|
||||
height: wContain / origRatio
|
||||
}
|
||||
height: wContain / origRatio,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
width: origRatio * hContain,
|
||||
height: hContain
|
||||
}
|
||||
height: hContain,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
16
src/main.js
16
src/main.js
|
|
@ -1,15 +1,15 @@
|
|||
// The Vue build version to load with the `import` command
|
||||
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
|
||||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
import Vue from "vue";
|
||||
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 */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
template: '<App/>',
|
||||
components: { App }
|
||||
})
|
||||
el: "#app",
|
||||
template: "<App/>",
|
||||
components: {App},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue