From 5a9be050c12152931b951c86c2d5f922448232f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= Date: Thu, 25 Jan 2018 15:17:37 +0100 Subject: [PATCH] sorting by size --- src/components/Player.vue | 73 +++++++++++++++++++++++++++++++++----- src/components/Sidebar.vue | 10 +++--- 2 files changed, 71 insertions(+), 12 deletions(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index 63aef16..cfb2c7d 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -13,7 +13,20 @@
- +
+ +
+
+ + +
+
+ + +
@@ -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, diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index 3807306..72ca4b4 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -9,14 +9,16 @@
- +
- +
@@ -57,8 +59,8 @@ data: function () { return { imageSize: [-1, -1], - guideSizeX: '64', - guideSizeY: '64', + guideSizeX: 64, + guideSizeY: 64, lastGuideSizeX: 64, lastGuideSizeY: 64, lockSize: true,