<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>
