WIP: Door class (breaking)

ui/src/components/DoorMapEditor.vue

@@ -12,6 +12,7 @@
 
 <script lang="ts">
 import { Vue, Options } from "vue-class-component";
+import { Door } from "./door_map/calendar";
 import { Rectangle } from "./rects/rectangles";
 
 import BulmaBreadcrumb, { Step } from "./BulmaBreadcrumb.vue";
@@ -32,6 +33,7 @@ export default class extends Vue {
     { label: "Überprüfen", icon: "fa-solid fa-check" },
   ];
   private current_step = 0;
+  private doors: Door[] = [];
   private rectangles: Rectangle[] = [];
 }
 </script>

ui/src/components/door_map/DoorPlacer.vue

@@ -9,14 +9,14 @@
     </div>
     <figure class="image">
       <img src="@/assets/adventskalender.jpg" />
-      <RectangleCanvas ref="rect_pad" />
+      <RectangleCanvas v-model="rectangles" />
     </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";
 
 @Options({
@@ -24,23 +24,19 @@ import RectangleCanvas from "./RectangleCanvas.vue";
     RectangleCanvas,
   },
   props: {
-    rectangles: Array,
+    doors: Array,
   },
-  emits: ["update:rectangles"],
+  emits: ["update:doors"],
 })
 export default class extends Vue {
-  private rectangles!: Rectangle[];
+  private doors!: Door[];
 
-  declare $refs: {
-    rect_pad: RectangleCanvas;
-  };
-
-  public mounted() {
-    this.$refs.rect_pad.rectangles = this.rectangles;
+  private get rectangles() {
+    return this.doors.filter((door) => door.position);
   }
 
   public beforeUnmount() {
-    this.$emit("update:rectangles", this.rectangles);
+    this.$emit("update:doors", this.doors);
   }
 }
 </script>

ui/src/components/door_map/RectangleCanvas.vue

@@ -34,6 +34,10 @@ enum CanvasState {
     ThouCanvas,
     SVGRect,
   },
+  props: {
+    rectangles: Array,
+  },
+  emits: ["add_rect", "edit_rect", "remove_rect"],
 })
 export default class extends Vue {
   private readonly min_rect_area = 300;
@@ -41,7 +45,7 @@ export default class extends Vue {
   private preview_rect = new Rectangle();
   private drag_rect?: Rectangle;
   private drag_origin = new Vector2D();
-  public rectangles: Rectangle[] = [];
+  private rectangles: Rectangle[] = [];
 
   private get preview_visible(): boolean {
     return this.state !== CanvasState.Idle;
@@ -78,6 +82,7 @@ export default class extends Vue {
     }
 
     this.rectangles.push(this.preview_rect);
+    this.$emit("add_rect", this.preview_rect);
   }
 
   private drag_start(event: MouseEvent, point: Vector2D) {
@@ -107,6 +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);
   }
 
   private on_mousemove(event: MouseEvent, point: Vector2D) {

ui/src/components/door_map/calendar.ts

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