DoorPlacer with "Door" logic

ui/src/components/DoorMapEditor.vue

@@ -4,8 +4,8 @@
 
     <BulmaBreadcrumbs :steps="steps" v-model="current_step" />
 
-    <DoorPlacer v-if="current_step === 0" v-model:rectangles="rectangles" />
-    <DoorChooser v-if="current_step === 1" v-model:rectangles="rectangles" />
+    <DoorPlacer v-if="current_step === 0" v-model:doors="doors" />
+    <!-- <DoorChooser v-if="current_step === 1" v-model:rectangles="rectangles" /> -->
     <p v-if="current_step === 2">Bar</p>
   </div>
 </template>

ui/src/components/door_map/DoorPlacer.vue

@@ -9,13 +9,19 @@
     </div>
     <figure class="image">
       <img src="@/assets/adventskalender.jpg" />
-      <RectangleCanvas v-model="rectangles" />
+      <RectangleCanvas
+        :rectangles="rectangles"
+        @draw="on_draw"
+        @drag="on_drag"
+        @remove="on_remove"
+      />
     </figure>
   </section>
 </template>
 
 <script lang="ts">
 import { Vue, Options } from "vue-class-component";
+import { Rectangle } from "../rects/rectangles";
 import { Door } from "./calendar";
 import RectangleCanvas from "./RectangleCanvas.vue";
 
@@ -35,6 +41,34 @@ export default class extends Vue {
     return this.doors.filter((door) => door.position);
   }
 
+  private on_draw(position: Rectangle) {
+    this.doors.push(new Door(position));
+  }
+
+  private find_door_index(position: Rectangle): number {
+    return this.doors.findIndex((door) => door.position.equals(position));
+  }
+
+  private on_drag(old_pos: Rectangle, new_pos: Rectangle) {
+    const idx = this.find_door_index(old_pos);
+
+    if (idx === -1) {
+      return;
+    }
+
+    this.doors[idx].position = new_pos;
+  }
+
+  private on_remove(position: Rectangle) {
+    const idx = this.find_door_index(position);
+
+    if (idx === -1) {
+      return;
+    }
+
+    this.doors.splice(idx, 1);
+  }
+
   public beforeUnmount() {
     this.$emit("update:doors", this.doors);
   }

ui/src/components/door_map/RectangleCanvas.vue

@@ -37,7 +37,7 @@ enum CanvasState {
   props: {
     rectangles: Array,
   },
-  emits: ["add_rect", "edit_rect", "remove_rect"],
+  emits: ["draw", "drag", "remove"],
 })
 export default class extends Vue {
   private readonly min_rect_area = 300;
@@ -82,7 +82,7 @@ export default class extends Vue {
     }
 
     this.rectangles.push(this.preview_rect);
-    this.$emit("add_rect", this.preview_rect);
+    this.$emit("draw", this.preview_rect);
   }
 
   private drag_start(event: MouseEvent, point: Vector2D) {
@@ -112,7 +112,7 @@ export default class extends Vue {
 
     this.state = CanvasState.Idle;
     this.rectangles.push(this.preview_rect);
-    this.$emit("edit_rect", this.drag_rect, this.preview_rect);
+    this.$emit("drag", this.drag_rect, this.preview_rect);
   }
 
   private on_mousemove(event: MouseEvent, point: Vector2D) {
@@ -133,7 +133,13 @@ export default class extends Vue {
       return;
     }
 
-    this.pop_rectangle(point);
+    const rect = this.pop_rectangle(point);
+
+    if (rect === undefined) {
+      return;
+    }
+
+    this.$emit("remove", rect);
   }
 }
 </script>

ui/src/components/door_map/calendar.ts

@@ -1,11 +1,11 @@
 import { Rectangle } from "../rects/rectangles";
 
 export class Door {
-  public day: number;
-  public readonly position: Rectangle;
+  public day?: number;
+  public position: Rectangle;
 
-  constructor(day: number, position: Rectangle) {
-    this.day = day;
+  constructor(position: Rectangle, day?: number) {
     this.position = position;
+    this.day = day;
   }
 }