advent22/ui/src/components/rects/RectPad.vue

<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 1000 1000"
    preserveAspectRatio="none"
    @mousedown.left="draw_start"
    @mouseup.left="draw_finish"
    @contextmenu.prevent
    @mousedown.right="drag_start"
    @mouseup.right="drag_finish"
    @mousemove="on_mousemove"
    @dblclick.left="remove_rect"
  >
    <Rect
      v-for="(rect, index) in rectangles"
      :key="'rect' + index"
      :rectangle="rect"
    />
    <Rect
      v-if="preview_visible"
      :highlighted="true"
      :rectangle="preview_rectangle"
    />
  </svg>
</template>

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

function get_event_thous(event: MouseEvent): Vector2D {
  if (event.currentTarget === null) {
    return new Vector2D();
  }

  let target = event.currentTarget as Element;

  return new Vector2D(
    Math.round((event.offsetX / target.clientWidth) * 1000),
    Math.round((event.offsetY / target.clientHeight) * 1000)
  );
}

@Options({
  components: {
    Rect,
  },
})
export default class RectPad extends Vue {
  private readonly min_rect_area = 4;
  private drawing = false;
  private preview_corner1 = new Vector2D();
  private preview_corner2 = new Vector2D();
  private dragging = false;
  private drag_index = -1;
  private drag_origin = new Vector2D();
  private 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
    ).normalize();
  }

  private find_rectangle(point: Vector2D) {
    return this.rectangles.findIndex(
      (rect) =>
        point.x >= rect.left &&
        point.y >= rect.top &&
        point.x <= rect.left + rect.width &&
        point.y <= rect.top + rect.height
    );
  }

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

    this.drawing = true;
    this.preview_corner1 = get_event_thous(event);
    this.preview_corner2 = get_event_thous(event);
  }

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

    this.drawing = false;

    if (this.preview_rectangle.area >= this.min_rect_area) {
      this.rectangles.push(this.preview_rectangle);
    }
  }

  private drag_start(event: MouseEvent) {
    if (this.preview_visible) {
      return;
    }

    let point = get_event_thous(event);
    this.drag_index = this.find_rectangle(point);

    if (this.drag_index === -1) {
      return;
    }

    this.dragging = true;
    this.drag_origin = point;

    this.preview_corner1 = this.rectangles[this.drag_index].origin;
    this.preview_corner2 = this.rectangles[this.drag_index].corner;

    console.log("drag_start", point);
  }

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

    this.dragging = false;
    this.rectangles[this.drag_index] = this.preview_rectangle;

    console.log("drag_finish", get_event_thous(event));
  }

  private on_mousemove(event: MouseEvent) {
    let point = get_event_thous(event);

    if (this.drawing) {
      this.preview_corner2 = point;
    } else if (this.dragging) {
      let movement = point.minus(this.drag_origin);

      this.preview_corner1 =
        this.rectangles[this.drag_index].origin.plus(movement);
      this.preview_corner2 =
        this.rectangles[this.drag_index].corner.plus(movement);
    }
  }

  private remove_rect(event: MouseEvent) {
    let point = get_event_thous(event);
    let rect_index = this.find_rectangle(point);

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

    this.rectangles.splice(rect_index, 1);

    console.log("remove_rect", get_event_thous(event));
  }
}
</script>

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