drag rectangles

ui/src/components/rects/RectPad.vue

@@ -4,20 +4,23 @@
     viewBox="0 0 1000 1000"
     preserveAspectRatio="none"
     @mousedown.left="draw_start"
-    @mousemove="on_mousemove"
     @mouseup.left="draw_finish"
-    @contextmenu.prevent=""
+    @contextmenu.prevent
+    @mousedown.right="drag_start"
+    @mouseup.right="drag_finish"
+    @mousemove="on_mousemove"
+    @dblclick.left="remove_rect"
   >
-    <Rect
-      v-if="preview_state.visible"
-      :highlighted="true"
-      :rectangle="preview_rectangle"
-    />
     <Rect
       v-for="(rect, index) in rectangles"
       :key="'rect' + index"
       :rectangle="rect"
     />
+    <Rect
+      v-if="preview_visible"
+      :highlighted="true"
+      :rectangle="preview_rectangle"
+    />
   </svg>
 </template>
 
@@ -45,44 +48,116 @@ function get_event_thous(event: MouseEvent): Vector2D {
   },
 })
 export default class RectPad extends Vue {
-  private preview_state = {
-    visible: false,
-    corner1: new Vector2D(),
-    corner2: new Vector2D(),
-  };
   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 draw_start(event: MouseEvent) {
+  private get preview_visible(): boolean {
-    if (this.preview_state.visible) {
+    return this.drawing || this.dragging;
-      return;
-    }
-
-    this.preview_state.visible = true;
-    this.preview_state.corner1 = get_event_thous(event);
-    this.preview_state.corner2 = get_event_thous(event);
   }
 
-  private on_mousemove(event: MouseEvent) {
+  private get preview_rectangle(): Rectangle {
-    if (!this.preview_state.visible) {
+    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.preview_state.corner2 = get_event_thous(event);
+    this.drawing = true;
+    this.preview_corner1 = get_event_thous(event);
+    this.preview_corner2 = get_event_thous(event);
   }
 
   private draw_finish() {
-    this.preview_state.visible = false;
+    if (!this.drawing) {
+      return;
+    }
+
+    this.drawing = false;
+
     if (this.preview_rectangle.area >= this.min_rect_area) {
       this.rectangles.push(this.preview_rectangle);
     }
   }
 
-  private get preview_rectangle(): Rectangle {
+  private drag_start(event: MouseEvent) {
-    return new Rectangle(
+    if (this.preview_visible) {
-      this.preview_state.corner1,
+      return;
-      this.preview_state.corner2
+    }
-    ).normalize();
+
+    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>

ui/src/components/rects/rectangles.ts

@@ -44,6 +44,10 @@ export class Rectangle {
     return this.origin.y;
   }
 
+  public get corner(): Vector2D {
+    return this._corner_2;
+  }
+
   public get size(): Vector2D {
     return this._corner_2.minus(this._corner_1);
   }