"rectangles" library

ui/src/components/CalendarImage.vue

@@ -13,10 +13,10 @@
       <rect
         v-if="preview_state.visible"
         id="preview"
-        :x="preview_rectangle.origin.x"
+        :x="preview_rectangle.left"
-        :y="preview_rectangle.origin.y"
+        :y="preview_rectangle.top"
-        :width="preview_rectangle.size.x"
+        :width="preview_rectangle.width"
-        :height="preview_rectangle.size.y"
+        :height="preview_rectangle.height"
       />
     </svg>
   </div>
@@ -24,65 +24,7 @@
 
 <script lang="ts">
 import { Vue } from "vue-class-component";
-
+import { Vector2D, Rectangle } from "./rectangles";
-class Vector2D {
-  public x: number;
-  public y: number;
-
-  constructor(x = 0, y = 0) {
-    this.x = x;
-    this.y = y;
-  }
-
-  public copy(): Vector2D {
-    return new Vector2D(this.x, this.y);
-  }
-
-  public minus(other: Vector2D): Vector2D {
-    return new Vector2D(this.x - other.x, this.y - other.y);
-  }
-}
-
-class Rectangle {
-  private origin: Vector2D;
-  private size: Vector2D;
-
-  constructor(corner1: Vector2D, corner2: Vector2D) {
-    this.origin = corner1.copy();
-    this.size = corner2.minus(corner1);
-  }
-
-  public normalize() {
-    if (this.size.x < 0) {
-      this.size.x *= -1;
-      this.origin.x -= this.size.x;
-    }
-
-    if (this.size.y < 0) {
-      this.size.y *= -1;
-      this.origin.y -= this.size.y;
-    }
-  }
-}
-
-class PreviewState {
-  public visible = false;
-  private down_location = new Vector2D();
-  private move_location = new Vector2D();
-
-  public mouse_down(location: Vector2D) {
-    this.down_location = location;
-    this.move_location = location;
-  }
-
-  public mouse_move(location: Vector2D) {
-    this.move_location = location;
-  }
-
-  public get_rect(): Rectangle {
-    return new Rectangle(this.down_location, this.move_location);
-  }
-}
 
 function get_event_thous(event: MouseEvent): Vector2D {
   if (event.currentTarget === null) {
@@ -100,15 +42,20 @@ function get_event_thous(event: MouseEvent): Vector2D {
 export default class CalendarImage extends Vue {
   // "preview" rectangle on click-drag
 
-  private preview_state = new PreviewState();
+  private preview_state = {
+    visible: false,
+    corner1: new Vector2D(),
+    corner2: new Vector2D(),
+  };
 
   private on_mousedown(event: MouseEvent) {
     this.preview_state.visible = true;
-    this.preview_state.mouse_down(get_event_thous(event));
+    this.preview_state.corner1 = get_event_thous(event);
+    this.preview_state.corner2 = get_event_thous(event);
   }
 
   private on_mousemove(event: MouseEvent) {
-    this.preview_state.mouse_move(get_event_thous(event));
+    this.preview_state.corner2 = get_event_thous(event);
   }
 
   private on_mouseup() {
@@ -116,10 +63,10 @@ export default class CalendarImage extends Vue {
   }
 
   private get preview_rectangle(): Rectangle {
-    let rect = this.preview_state.get_rect();
+    return new Rectangle(
-    rect.normalize();
+      this.preview_state.corner1,
-
+      this.preview_state.corner2
-    return rect;
+    ).normalize();
   }
 
   // Hook "resize" events

ui/src/components/rectangles.ts

@@ -0,0 +1,80 @@
+export class Vector2D {
+  private _x: number;
+  private _y: number;
+
+  constructor(x = 0, y = 0) {
+    this._x = x;
+    this._y = y;
+  }
+
+  public get x(): number {
+    return this._x;
+  }
+
+  public get y(): number {
+    return this._y;
+  }
+
+  public plus(other: Vector2D): Vector2D {
+    return new Vector2D(this._x + other._x, this._y + other._y);
+  }
+  public minus(other: Vector2D): Vector2D {
+    return new Vector2D(this._x - other._x, this._y - other._y);
+  }
+}
+
+export class Rectangle {
+  private _corner_1: Vector2D;
+  private _corner_2: Vector2D;
+
+  constructor(corner_1: Vector2D, corner_2: Vector2D) {
+    this._corner_1 = corner_1;
+    this._corner_2 = corner_2;
+  }
+
+  public get origin(): Vector2D {
+    return this._corner_1;
+  }
+
+  public get left(): number {
+    return this.origin.x;
+  }
+
+  public get top(): number {
+    return this.origin.y;
+  }
+
+  public get size(): Vector2D {
+    return this._corner_2.minus(this._corner_1);
+  }
+
+  public get width(): number {
+    return this.size.x;
+  }
+
+  public get height(): number {
+    return this.size.y;
+  }
+
+  public normalize(): Rectangle {
+    let left = this.left;
+    let top = this.top;
+    let width = this.width;
+    let height = this.height;
+
+    if (width < 0) {
+      width *= -1;
+      left -= width;
+    }
+
+    if (height < 0) {
+      height *= -1;
+      top -= height;
+    }
+
+    const corner_tl = new Vector2D(left, top);
+    const size = new Vector2D(width, height);
+
+    return new Rectangle(corner_tl, corner_tl.plus(size));
+  }
+}