sorting by size

src/components/Player.vue

@@ -13,8 +13,21 @@
       <div>
         <input type="range" min="0" :max="frames - 1" value="0" class="slider" v-model.number="position">
       </div>
+      <div>
         <button @click="playPause">{{buttonLabel}}</button>
       </div>
+      <div>
+        <label for="sort">Sort by size</label>
+        <input type="checkbox" v-model="sortBySize" id="sort">
+      </div>
+      <div>
+        <label for="sortDirection">
+          <span v-if="sortDirection">Ascending</span>
+          <span v-else>Descending</span>
+        </label>
+        <input type="checkbox" v-model="sortDirection" id="sortDirection">
+      </div>
+    </div>
   </div>
 </template>
 
@@ -22,8 +35,8 @@
   export default {
     name: 'player',
     props: {
-      width: String,
-      height: String
+      width: Number,
+      height: Number
     },
     data: function () {
       return {
@@ -32,6 +45,8 @@
         playing: false,
         zoom: 1,
         fullscreen: false,
+        sortBySize: false,
+        sortDirection: false,
         position: 0,
         tmp_ctx: null,
         animation_id: null
@@ -48,6 +63,47 @@
       },
       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
+        }
       }
     },
     mounted: function () {
@@ -94,11 +150,12 @@
         ctx.fillRect(0, 0, parseInt(this.canvas_width), parseInt(this.canvas_height))
       },
       $render: function () {
-        let wb = Math.ceil(this.image.width / this.width)
-        let x = (this.position % wb) * this.width
-        let w = x + this.width < this.image.width ? this.width : this.image.width - x
-        let y = Math.floor(this.position / wb) * this.height
-        let h = y + this.height < this.image.height ? this.height : this.image.height - y
+        let frame = this.frame_sequence[this.position]
+        if (frame === undefined) return
+        let x = frame[0]
+        let y = frame[1]
+        let w = frame[2]
+        let h = frame[3]
         if (w !== this.width || h !== this.height) this.clear('black')
         this.tmp_ctx.drawImage(this.image,
           x, y, w, h,

src/components/Sidebar.vue

@@ -9,14 +9,16 @@
     <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">
+      <input class="spinBox" id="slice_x" v-model.number="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">
+      <input class="spinBox" id="slice_y" v-model.number="guideSizeY" type="number" min="2" max="1024" step="1"
+             value="64">
     </div>
     <div>
       <label for="slice_x">No Y remainder: {{noYremainder}}</label>
@@ -57,8 +59,8 @@
     data: function () {
       return {
         imageSize: [-1, -1],
-        guideSizeX: '64',
-        guideSizeY: '64',
+        guideSizeX: 64,
+        guideSizeY: 64,
         lastGuideSizeX: 64,
         lastGuideSizeY: 64,
         lockSize: true,