Show door days in DoorPlacer

RectangleCanvas -> DoorCanvas

ui/src/components/editor/DoorCanvas.vue

@@ -8,11 +8,12 @@
     @click.middle="remove_rect"
     @dblclick.left="remove_rect"
   >
-    <SVGRect
+    <CalendarDoor
-      v-for="(rect, index) in rectangles"
+      v-for="(door, index) in doors"
-      variant="primary"
+      :key="`door-${index}`"
-      :key="`rect-${index}`"
+      :door="door"
-      :rectangle="rect"
+      style="cursor: inherit"
+      visible
     />
     <SVGRect
       v-if="preview_visible"
@@ -23,10 +24,12 @@
 </template>
 
 <script lang="ts">
+import { Door } from "@/lib/door";
 import { Rectangle } from "@/lib/rectangle";
 import { Vector2D } from "@/lib/vector2d";
 import { Options, Vue } from "vue-class-component";
 
+import CalendarDoor from "../calendar/CalendarDoor.vue";
 import SVGRect from "../calendar/SVGRect.vue";
 import ThouCanvas from "../calendar/ThouCanvas.vue";
 
@@ -38,34 +41,34 @@ enum CanvasState {
 
 @Options({
   components: {
-    ThouCanvas,
+    CalendarDoor,
     SVGRect,
+    ThouCanvas,
   },
   props: {
-    rectangles: Array,
+    doors: Array,
   },
-  emits: ["draw", "drag", "remove"],
 })
 export default class extends Vue {
   private readonly min_rect_area = 300;
   private state = CanvasState.Idle;
   public preview_rect = new Rectangle();
-  private drag_rect?: Rectangle;
+  private drag_door?: Door;
   private drag_origin = new Vector2D();
-  public rectangles!: Rectangle[];
+  public doors!: Door[];
 
   public get preview_visible(): boolean {
     return this.state !== CanvasState.Idle;
   }
 
-  private pop_rectangle(point: Vector2D): Rectangle | undefined {
+  private pop_door(point: Vector2D): Door | undefined {
-    const idx = this.rectangles.findIndex((rect) => rect.contains(point));
+    const idx = this.doors.findIndex((rect) => rect.position.contains(point));
 
     if (idx === -1) {
       return;
     }
 
-    return this.rectangles.splice(idx, 1)[0];
+    return this.doors.splice(idx, 1)[0];
   }
 
   public draw_start(event: MouseEvent, point: Vector2D) {
@@ -88,8 +91,7 @@ export default class extends Vue {
       return;
     }
 
-    this.rectangles.push(this.preview_rect);
+    this.doors.push(new Door(this.preview_rect));
-    this.$emit("draw", this.preview_rect);
   }
 
   public drag_start(event: MouseEvent, point: Vector2D) {
@@ -97,16 +99,16 @@ export default class extends Vue {
       return;
     }
 
-    this.drag_rect = this.pop_rectangle(point);
+    this.drag_door = this.pop_door(point);
 
-    if (this.drag_rect === undefined) {
+    if (this.drag_door === undefined) {
       return;
     }
 
     this.state = CanvasState.Dragging;
     this.drag_origin = point;
 
-    this.preview_rect = this.drag_rect;
+    this.preview_rect = this.drag_door.position;
   }
 
   public drag_finish() {
@@ -118,8 +120,7 @@ export default class extends Vue {
     }
 
     this.state = CanvasState.Idle;
-    this.rectangles.push(this.preview_rect);
+    this.doors.push(new Door(this.preview_rect, this.drag_door!.day));
-    this.$emit("drag", this.drag_rect, this.preview_rect);
   }
 
   public on_mousemove(event: MouseEvent, point: Vector2D) {
@@ -129,9 +130,9 @@ export default class extends Vue {
 
     if (this.state === CanvasState.Drawing) {
       this.preview_rect = this.preview_rect.update(undefined, point);
-    } else if (this.state === CanvasState.Dragging && this.drag_rect) {
+    } else if (this.state === CanvasState.Dragging && this.drag_door) {
       const movement = point.minus(this.drag_origin);
-      this.preview_rect = this.drag_rect.move(movement);
+      this.preview_rect = this.drag_door.position.move(movement);
     }
   }
 
@@ -140,13 +141,7 @@ export default class extends Vue {
       return;
     }
 
-    const rect = this.pop_rectangle(point);
+    this.pop_door(point);
-
-    if (rect === undefined) {
-      return;
-    }
-
-    this.$emit("remove", rect);
   }
 }
 </script>

ui/src/components/editor/DoorPlacer.vue

@@ -10,64 +10,26 @@
     </div>
     <figure class="image is-unselectable">
       <img :src="$advent22.api_url('user/background_image')" />
-      <RectangleCanvas
+      <DoorCanvas :doors="doors" />
-        :rectangles="rectangles"
-        @draw="on_draw"
-        @drag="on_drag"
-        @remove="on_remove"
-      />
     </figure>
   </div>
 </template>
 
 <script lang="ts">
 import { Door } from "@/lib/door";
-import { Rectangle } from "@/lib/rectangle";
 import { Options, Vue } from "vue-class-component";
 
-import RectangleCanvas from "./RectangleCanvas.vue";
+import DoorCanvas from "./DoorCanvas.vue";
 
 @Options({
   components: {
-    RectangleCanvas,
+    DoorCanvas,
   },
   props: {
     doors: Array,
   },
 })
 export default class extends Vue {
-  private doors!: Door[];
+  public doors!: Door[];
-
-  public get rectangles() {
-    return this.doors.map((door) => door.position);
-  }
-
-  public on_draw(position: Rectangle) {
-    this.doors.push(new Door(position));
-  }
-
-  public find_door_index(position: Rectangle): number {
-    return this.doors.findIndex((door) => door.position.equals(position));
-  }
-
-  public 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;
-  }
-
-  public on_remove(position: Rectangle) {
-    const idx = this.find_door_index(position);
-
-    if (idx === -1) {
-      return;
-    }
-
-    this.doors.splice(idx, 1);
-  }
 }
 </script>