CanvasState implementation

ui/src/components/door_map/RectangleCanvas.vue

@@ -13,11 +13,7 @@
       :key="`rect-${index}`"
       :rectangle="rect"
     />
-    <SVGRect
-      v-if="preview_visible"
-      :focused="true"
-      :rectangle="preview_rectangle"
-    />
+    <SVGRect v-if="preview_visible" :focused="true" :rectangle="preview_rect" />
   </ThouCanvas>
 </template>
 
@@ -27,6 +23,12 @@ import { Vector2D, Rectangle } from "../rects/rectangles";
 import ThouCanvas from "../rects/ThouCanvas.vue";
 import SVGRect from "../rects/SVGRect.vue";
 
+enum CanvasState {
+  Idle,
+  Drawing,
+  Dragging,
+}
+
 @Options({
   components: {
     ThouCanvas,
@@ -35,20 +37,14 @@ import SVGRect from "../rects/SVGRect.vue";
 })
 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 state = CanvasState.Idle;
+  private preview_rect = new Rectangle();
   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);
+    return this.state !== CanvasState.Idle;
   }
 
   private pop_rectangle(point: Vector2D): Rectangle | undefined {
@@ -66,23 +62,22 @@ export default class extends Vue {
       return;
     }
 
-    this.drawing = true;
-    this.preview_corner1 = point;
-    this.preview_corner2 = point;
+    this.state = CanvasState.Drawing;
+    this.preview_rect = new Rectangle(point, point);
   }
 
   private draw_finish() {
-    if (!this.drawing) {
+    if (this.state !== CanvasState.Drawing || this.preview_rect === undefined) {
       return;
     }
 
-    this.drawing = false;
+    this.state = CanvasState.Idle;
 
-    if (this.preview_rectangle.area < this.min_rect_area) {
+    if (this.preview_rect.area < this.min_rect_area) {
       return;
     }
 
-    this.rectangles.push(this.preview_rectangle);
+    this.rectangles.push(this.preview_rect);
   }
 
   private drag_start(event: MouseEvent, point: Vector2D) {
@@ -96,30 +91,34 @@ export default class extends Vue {
       return;
     }
 
-    this.dragging = true;
+    this.state = CanvasState.Dragging;
     this.drag_origin = point;
 
-    this.preview_corner1 = this.drag_rect.origin;
-    this.preview_corner2 = this.drag_rect.corner;
+    this.preview_rect = this.drag_rect;
   }
 
   private drag_finish() {
-    if (!this.dragging) {
+    if (
+      this.state !== CanvasState.Dragging ||
+      this.preview_rect === undefined
+    ) {
       return;
     }
 
-    this.dragging = false;
-    this.rectangles.push(this.preview_rectangle);
+    this.state = CanvasState.Idle;
+    this.rectangles.push(this.preview_rect);
   }
 
   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);
+    if (this.preview_rect === undefined) {
+      return;
+    }
 
-      this.preview_corner1 = this.drag_rect.origin.plus(movement);
-      this.preview_corner2 = this.drag_rect.corner.plus(movement);
+    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);
     }
   }
 

ui/src/components/rects/rectangles.ts

@@ -24,9 +24,9 @@ export class Rectangle {
   private readonly corner_1: Vector2D;
   private readonly corner_2: Vector2D;
 
-  constructor(corner_1: Vector2D, corner_2: Vector2D) {
-    this.corner_1 = corner_1;
-    this.corner_2 = corner_2;
+  constructor(corner_1?: Vector2D, corner_2?: Vector2D) {
+    this.corner_1 = corner_1 || new Vector2D();
+    this.corner_2 = corner_2 || new Vector2D();
   }
 
   public get origin(): Vector2D {
@@ -71,6 +71,20 @@ export class Rectangle {
     return point.x >= this.origin.x &&
       point.y >= this.origin.y &&
       point.x <= this.corner.x &&
-      point.y <= this.corner.y
+      point.y <= this.corner.y;
+  }
+
+  public update(corner_1?: Vector2D, corner_2?: Vector2D): Rectangle {
+    return new Rectangle(
+      corner_1 || this.corner_1,
+      corner_2 || this.corner_2,
+    );
+  }
+
+  public move(vector: Vector2D): Rectangle {
+    return new Rectangle(
+      this.corner_1.plus(vector),
+      this.corner_2.plus(vector),
+    );
   }
 }