<template>
  <div id="canvas-container">
    <canvas ref="canvas" id="canvas" @mousedown="onMouse" @mousemove="onMouse" oncontextmenu="return false;"></canvas>
  </div>
</template>

<script>
import {getDimsFit} from "../helpers/image.js";

export default {
  name: "Canvas",
  data: function () {
    return {
      imageUrl: "",
      image: null,
      imageLoaded: false,
      ratio: 1,
    };
  },
  props: ["slice", "offset"],
  computed: {},
  watch: {
    imageUrl: function (url) {
      this.loadImage(url);
    },
    slice: function () {
      this.refresh();
    },
    offset: function () {
      this.refresh();
    },
  },
  mounted: function () {
    window.addEventListener("resize", this.handleResize);
    this.handleResize();
  },
  methods: {
    loadImage: function (imageUrl) {
      this.image = new Image();
      this.image.onload = () => {
        this.imageLoaded = true;
        this.$bus.$emit("imageLoaded", this.image);
        this.refresh();
      };
      this.image.src = imageUrl;
    },
    refresh: function () {
      if (!this.imageLoaded) return;
      let image = this.image;
      let canvas = this.$refs.canvas;
      let ctx = canvas.getContext("2d");

      ctx.clearRect(0, 0, canvas.width, canvas.height);

      let dims = getDimsFit(image.width, image.height, canvas.width, canvas.height);
      ctx.drawImage(image,
        0, 0, image.width, image.height,
        0, 0, dims.width, dims.height);

      this.ratio = dims.width / image.width;

      let sliceX = parseInt(this.slice[0]) * this.ratio;
      let sliceY = parseInt(this.slice[1]) * this.ratio;

      if (sliceX > 0 && sliceY > 0) {
        for (let x = this.offset[0] * this.ratio; x < dims.width; x += sliceX) {
          ctx.beginPath();
          ctx.moveTo(x, this.offset[1] * this.ratio);
          ctx.lineTo(x, dims.height);
          ctx.strokeStyle = "red";
          ctx.stroke();
        }
        for (let y = this.offset[1] * this.ratio; y < dims.height; y += sliceY) {
          ctx.beginPath();
          ctx.moveTo(this.offset[0] * this.ratio, y);
          ctx.lineTo(dims.width, y);
          ctx.strokeStyle = "red";
          ctx.stroke();
        }
      }
    },
    handleResize: function () {
      let canvasContainer = document.getElementById("canvas-container");
      let canvas = document.getElementById("canvas");

      canvas.width = canvasContainer.offsetWidth - 10;
      canvas.height = canvasContainer.offsetHeight - 10;
      this.refresh();
    },
    onMouse: function (ev) {
      if (ev.buttons === 0) {
        return;
      }
      ev.preventDefault();

      const type = {
        1: "slice",
        2: "offset",
      }[ev.buttons];

      if (type !== undefined) {
        let x, y;
        switch (type) {
          case "slice":
            x = Math.round((ev.x - ev.target.offsetLeft) / this.ratio - this.offset[0]);
            y = Math.round((ev.y - ev.target.offsetTop) / this.ratio - this.offset[1]);
            break;
          case "offset":
            x = Math.round((ev.x - ev.target.offsetLeft) / this.ratio);
            y = Math.round((ev.y - ev.target.offsetTop) / this.ratio);
            break;
        }
        this.$emit("params", {type, x, y});
      }
      return false;
    },
  },
};
</script>

<style scoped>
#canvas-container {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  padding: 0;
}
</style>
