<template>
  <div id="app">
    <div id="menu-wrap">
      <Sidebar ref="sidebar" @loadImage="loadImage" @guideSize="guideSize"/>
    </div>
    <div id="canvas-wrap">
      <Canvas ref="canvas"/>
    </div>
  </div>
</template>

<script>
  import Canvas from './components/Canvas'
  import Sidebar from './components/Sidebar'

  export default {
    name: 'app',
    components: {
      Canvas, Sidebar
    },
    methods: {
      loadImage: function (url) {
        this.$refs.canvas.imageUrl = url
      },
      guideSize: function (size) {
        this.$refs.canvas.slice = size
      }
    }
  }
</script>

<style>
  html, body, #app {
    height: 100%;
    width: 100%;
    border: 0;
    margin: 0;
  }

  #menu-wrap, #canvas-wrap {
    display: inline-block;
  }

  #menu-wrap {
    width: 20%;
    height: 100%;
    float: left;
  }

  #canvas-wrap {
    width: 80%;
    height: 100%;
  }
</style>
