93 lines
1.6 KiB
Vue
93 lines
1.6 KiB
Vue
<template>
|
|
<div id="app">
|
|
<div id="menu-wrap">
|
|
<Sidebar ref="sidebar" @params="setParams" :slice="slice" :offset="offset" @loadImage="loadImage"/>
|
|
</div>
|
|
<div id="canvas-wrap">
|
|
<Canvas ref="canvas" @params="setParams" :slice="slice" :offset="offset"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Canvas from "./components/Canvas";
|
|
import Sidebar from "./components/Sidebar";
|
|
|
|
export default {
|
|
name: "app",
|
|
components: {
|
|
Canvas, Sidebar,
|
|
},
|
|
data () {
|
|
return {
|
|
slice: [64, 64],
|
|
offset: [0, 0],
|
|
};
|
|
},
|
|
methods: {
|
|
loadImage: function (url) {
|
|
this.$refs.canvas.imageUrl = url;
|
|
},
|
|
setParams: function (coords) {
|
|
switch (coords.type) {
|
|
case "slice":
|
|
this.slice = [Math.max(2, coords.x), Math.max(2, coords.y)];
|
|
break;
|
|
case "offset":
|
|
this.offset = [coords.x, coords.y];
|
|
break;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
html, body, #app {
|
|
height: 100%;
|
|
width: 100%;
|
|
border: 0;
|
|
margin: 0;
|
|
|
|
font-family: Consolas, Inconsolata, monospace, serif;
|
|
line-height: .97em;
|
|
font-size: .95em;
|
|
}
|
|
|
|
input, button {
|
|
font-family: Consolas, Inconsolata, monospace, serif;
|
|
}
|
|
|
|
input {
|
|
font-size: .95em;
|
|
padding: 4px 0;
|
|
background: white;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
input[type="file"] {
|
|
border: none;
|
|
}
|
|
|
|
button {
|
|
background: white;
|
|
border: 1px solid black;
|
|
box-shadow: 2px 2px #272727;
|
|
}
|
|
|
|
#menu-wrap, #canvas-wrap {
|
|
display: inline-block;
|
|
}
|
|
|
|
#menu-wrap {
|
|
width: 20%;
|
|
height: 100%;
|
|
float: left;
|
|
}
|
|
|
|
#canvas-wrap {
|
|
width: 80%;
|
|
height: 100%;
|
|
}
|
|
</style>
|