DoorPlacer v-model

ui/src/components/DoorMapEditor.vue

@@ -20,7 +20,7 @@
       </ul>
     </nav>
 
-    <DoorPlacer v-if="current_step === 0" />
+    <DoorPlacer v-if="current_step === 0" v-model:rectangles="rectangles" />
     <p v-if="current_step === 1">Foo</p>
     <p v-if="current_step === 2">Bar</p>
   </div>
@@ -29,6 +29,7 @@
 <script lang="ts">
 import { Vue, Options } from "vue-class-component";
 import DoorPlacer from "./door_map/DoorPlacer.vue";
+import { Rectangle } from "./rects/rectangles";
 
 type Step = {
   label: string;
@@ -47,6 +48,7 @@ export default class DoorMapEditor extends Vue {
     { label: "Überprüfen", icon: "fa-solid fa-check" },
   ];
   private current_step = 0;
+  private rectangles: Rectangle[] = [];
 
   private change_step(next_step: number) {
     this.current_step = next_step;

ui/src/components/door_map/DoorPlacer.vue

@@ -9,21 +9,40 @@
     </div>
     <figure class="image">
       <img src="@/assets/adventskalender.jpg" />
-      <RectPad />
+      <RectPad ref="rect_pad" />
     </figure>
   </section>
 </template>
 
 <script lang="ts">
 import { Vue, Options } from "vue-class-component";
+import { Rectangle } from "../rects/rectangles";
 import RectPad from "../rects/RectPad.vue";
 
 @Options({
   components: {
     RectPad,
   },
+  props: {
+    rectangles: Array,
+  },
+  emits: ["update:rectangles"],
 })
-export default class DoorPlacer extends Vue {}
+export default class DoorPlacer extends Vue {
+  private rectangles!: Rectangle[];
+
+  declare $refs: {
+    rect_pad: RectPad;
+  };
+
+  public mounted() {
+    this.$refs.rect_pad.rectangles = this.rectangles;
+  }
+
+  public beforeUnmount() {
+    this.$emit("update:rectangles", this.rectangles);
+  }
+}
 </script>
 
 <style lang="scss" scoped>