advent22/ui/src/components/editor/RectangleCanvas.vue

<template>
  <ThouCanvas
    @mousedown.left="draw_start"
    @mouseup.left="draw_finish"
    @mousedown.right="drag_start"
    @mouseup.right="drag_finish"
    @mousemove="on_mousemove"
    @click.middle="remove_rect"
    @dblclick.left="remove_rect"
  >
    <SVGRect
      v-for="(rect, index) in rectangles"
      :key="`rect-${index}`"
      :rectangle="rect"
    />
    <SVGRect v-if="preview_visible" :focused="true" :rectangle="preview_rect" />
  </ThouCanvas>
</template>

<script lang="ts">
import { Rectangle } from "@/lib/rectangle";
import { Vector2D } from "@/lib/vector2d";
import { Options, Vue } from "vue-class-component";

import SVGRect from "../calendar/SVGRect.vue";
import ThouCanvas from "../calendar/ThouCanvas.vue";

enum CanvasState {
  Idle,
  Drawing,
  Dragging,
}

@Options({
  components: {
    ThouCanvas,
    SVGRect,
  },
  props: {
    rectangles: Array,
  },
  emits: ["draw", "drag", "remove"],
})
export default class extends Vue {
  private readonly min_rect_area = 300;
  private state = CanvasState.Idle;
  public preview_rect = new Rectangle();
  private drag_rect?: Rectangle;
  private drag_origin = new Vector2D();
  public rectangles!: Rectangle[];

  public get preview_visible(): boolean {
    return this.state !== CanvasState.Idle;
  }

  private pop_rectangle(point: Vector2D): Rectangle | undefined {
    const idx = this.rectangles.findIndex((rect) => rect.contains(point));

    if (idx === -1) {
      return;
    }

    return this.rectangles.splice(idx, 1)[0];
  }

  public draw_start(event: MouseEvent, point: Vector2D) {
    if (this.preview_visible) {
      return;
    }

    this.state = CanvasState.Drawing;
    this.preview_rect = new Rectangle(point, point);
  }

  public draw_finish() {
    if (this.state !== CanvasState.Drawing || this.preview_rect === undefined) {
      return;
    }

    this.state = CanvasState.Idle;

    if (this.preview_rect.area < this.min_rect_area) {
      return;
    }

    this.rectangles.push(this.preview_rect);
    this.$emit("draw", this.preview_rect);
  }

  public drag_start(event: MouseEvent, point: Vector2D) {
    if (this.preview_visible) {
      return;
    }

    this.drag_rect = this.pop_rectangle(point);

    if (this.drag_rect === undefined) {
      return;
    }

    this.state = CanvasState.Dragging;
    this.drag_origin = point;

    this.preview_rect = this.drag_rect;
  }

  public drag_finish() {
    if (
      this.state !== CanvasState.Dragging ||
      this.preview_rect === undefined
    ) {
      return;
    }

    this.state = CanvasState.Idle;
    this.rectangles.push(this.preview_rect);
    this.$emit("drag", this.drag_rect, this.preview_rect);
  }

  public on_mousemove(event: MouseEvent, point: Vector2D) {
    if (this.preview_rect === undefined) {
      return;
    }

    if (this.state === CanvasState.Drawing) {
      this.preview_rect = this.preview_rect.update(undefined, point);
    } else if (this.state === CanvasState.Dragging && this.drag_rect) {
      const movement = point.minus(this.drag_origin);
      this.preview_rect = this.drag_rect.move(movement);
    }
  }

  public remove_rect(event: MouseEvent, point: Vector2D) {
    if (this.preview_visible) {
      return;
    }

    const rect = this.pop_rectangle(point);

    if (rect === undefined) {
      return;
    }

    this.$emit("remove", rect);
  }
}
</script>

<style scoped>
* {
  cursor: crosshair;
}
</style>