From 676c8f7fe0d681f9399874c2ae499ab2d0b23ac3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Thu, 31 Oct 2019 15:51:31 +0100
Subject: [PATCH] autoformat && eslint change

---
 .babelrc                   |  22 ++-
 .eslintrc.js               |  54 +++---
 .postcssrc.js              |   6 +-
 config/dev.env.js          |  10 +-
 config/index.js            |  30 ++--
 config/prod.env.js         |   6 +-
 package-lock.json          |  88 +++++++++
 package.json               |   1 +
 src/App.vue                |  78 ++++----
 src/components/Canvas.vue  | 160 ++++++++---------
 src/components/Player.vue  | 354 ++++++++++++++++++-------------------
 src/components/Sidebar.vue | 233 ++++++++++++------------
 src/helpers/image.js       |  12 +-
 src/main.js                |  16 +-
 14 files changed, 591 insertions(+), 479 deletions(-)

diff --git a/.babelrc b/.babelrc
index 3a280ba..2310f6d 100644
--- a/.babelrc
+++ b/.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"
+  ]
 }
diff --git a/.eslintrc.js b/.eslintrc.js
index 2e2e211..2b8ea73 100644
--- a/.eslintrc.js
+++ b/.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",
+    ],
+  },
+};
diff --git a/.postcssrc.js b/.postcssrc.js
index eee3e92..2862e3d 100644
--- a/.postcssrc.js
+++ b/.postcssrc.js
@@ -5,6 +5,6 @@ module.exports = {
     "postcss-import": {},
     "postcss-url": {},
     // to edit target browsers: use "browserslist" field in package.json
-    "autoprefixer": {}
-  }
-}
+    "autoprefixer": {},
+  },
+};
diff --git a/config/dev.env.js b/config/dev.env.js
index 1e22973..f0b75db 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -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\"",
+});
diff --git a/config/index.js b/config/index.js
index 2ab4bc1..0649eac 100644
--- a/config/index.js
+++ b/config/index.js
@@ -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,
+  },
+};
diff --git a/config/prod.env.js b/config/prod.env.js
index a6f9976..2cda586 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,4 +1,4 @@
-'use strict'
+"use strict";
 module.exports = {
-  NODE_ENV: '"production"'
-}
+  NODE_ENV: "\"production\"",
+};
diff --git a/package-lock.json b/package-lock.json
index f0c71b9..6afb3ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index 28bd0ab..3ad6af5 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/App.vue b/src/App.vue
index 7bc3241..f0b9de6 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/Canvas.vue b/src/components/Canvas.vue
index b545f34..f73a09a 100644
--- a/src/components/Canvas.vue
+++ b/src/components/Canvas.vue
@@ -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>
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 4a8c009..f36c516 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -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>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 72ca4b4..ca5839e 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -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>
diff --git a/src/helpers/image.js b/src/helpers/image.js
index 8718f1f..144f863 100644
--- a/src/helpers/image.js
+++ b/src/helpers/image.js
@@ -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,
+    };
   }
 }
diff --git a/src/main.js b/src/main.js
index f00ab8a..959709c 100644
--- a/src/main.js
+++ b/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},
+});