189 lines
4.9 KiB
Vue
189 lines
4.9 KiB
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.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.number="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" disabled>
|
|
</div>
|
|
<div>
|
|
<label>Est. length: {{length}}</label>
|
|
</div>
|
|
<hr>
|
|
<player :width="guideSizeX" :height="guideSizeY"/>
|
|
</div>
|
|
</template>
|
|
|
|
<!--suppress JSSuspiciousNameCombination -->
|
|
<script>
|
|
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;
|
|
}
|
|
}
|
|
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.$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%;
|
|
|
|
border-right: 1px solid black;
|
|
}
|
|
|
|
.spinBox {
|
|
height: 1em;
|
|
}
|
|
|
|
.green {
|
|
background-color: green;
|
|
}
|
|
</style>
|