advent22/ui/src/components/door_map/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_rectangle"
    />
  </ThouCanvas>
</template>

<script lang="ts">
import { Vue, Options } from "vue-class-component";
import { Vector2D, Rectangle } from "../rects/rectangles";
import ThouCanvas from "../rects/ThouCanvas.vue";
import SVGRect from "../rects/SVGRect.vue";

@Options({
  components: {
    ThouCanvas,
    SVGRect,
  },
})
export default class extends Vue {
  private readonly min_rect_area = 300;
  private drawing = false;
  private preview_corner1 = new Vector2D();
  private preview_corner2 = new Vector2D();
  private dragging = false;
  private drag_rect?: Rectangle;
  private drag_origin = new Vector2D();
  public rectangles: Rectangle[] = [];

  private get preview_visible(): boolean {
    return this.drawing || this.dragging;
  }

  private get preview_rectangle(): Rectangle {
    return new Rectangle(this.preview_corner1, this.preview_corner2);
  }

  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];
  }

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

    this.drawing = true;
    this.preview_corner1 = point;
    this.preview_corner2 = point;
  }

  private draw_finish() {
    if (!this.drawing) {
      return;
    }

    this.drawing = false;

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

    this.rectangles.push(this.preview_rectangle);
  }

  private 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.dragging = true;
    this.drag_origin = point;

    this.preview_corner1 = this.drag_rect.origin;
    this.preview_corner2 = this.drag_rect.corner;
  }

  private drag_finish() {
    if (!this.dragging) {
      return;
    }

    this.dragging = false;
    this.rectangles.push(this.preview_rectangle);
  }

  private on_mousemove(event: MouseEvent, point: Vector2D) {
    if (this.drawing) {
      this.preview_corner2 = point;
    } else if (this.dragging && this.drag_rect) {
      const movement = point.minus(this.drag_origin);

      this.preview_corner1 = this.drag_rect.origin.plus(movement);
      this.preview_corner2 = this.drag_rect.corner.plus(movement);
    }
  }

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

    this.pop_rectangle(point);
  }
}
</script>

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