slitscan/src/components/Sidebar.vue

<template>
  <div id="sidebar-container">
    <div>
      <input type="file" id="file" @change="loadImage($event)">
    </div>
    <div>
      <label>Image size: {{imageSize[0]}} x {{imageSize[1]}}</label>
    </div>
    <hr>
    <div>
      <label for="slice_x">Slice X: </label>
      <input class="spinBox" id="slice_x" v-model="guideSizeX" type="number" min="2" max="1024" step="1" value="64">
    </div>
    <div>
      <label for="slice_x">No X remainder: {{noXremainder}}</label>
    </div>
    <div>
      <label for="slice_y">Slice Y: </label>
      <input class="spinBox" id="slice_y" v-model="guideSizeY" type="number" min="2" max="1024" step="1" value="64">
    </div>
    <div>
      <label for="slice_x">No Y remainder: {{noYremainder}}</label>
    </div>
    <div>
      <label for="lockSize">Maintain square ratio: </label>
      <input type="checkbox" id="lockSize" v-model="lockSize">
    </div>
    <div>
      <label for="cleanSize">Allow only clean sizes: </label>
      <input type="checkbox" id="cleanSize" v-model="cleanSize">
    </div>
    <hr>
    <div>
      <label>Total amount of slices: {{slices}}</label>
    </div>
    <div>
      <label for="fps">FPS: </label>
      <input class="spinBox" id="fps" v-model="fps" type="number" min="1" max="60" step="1" value="60">
    </div>
    <div>
      <label>Est. length: {{length}}</label>
    </div>
    <hr>
  </div>
</template>

<!--suppress JSSuspiciousNameCombination -->
<script>
  export default {
    name: 'Sidebar',
    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
          }
        }
        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
        }
      }
    },
    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.$emit('guideSize', [this.guideSizeX, this.guideSizeY])
    }
  }
</script>

<style scoped>
  #sidebar-container {
    width: 100%;
    height: 100%;

    border-right: 1px solid black;
  }

  .spinBox {
    height: 1em;
  }

  .green {
    background-color: green;
  }
</style>