Basic DoorChooser

ui/src/components/DoorMapEditor.vue

@@ -21,16 +21,18 @@
     </nav>
 
     <DoorPlacer v-if="current_step === 0" v-model:rectangles="rectangles" />
-    <p v-if="current_step === 1">Foo</p>
+    <DoorChooser v-if="current_step === 1" v-model:rectangles="rectangles" />
     <p v-if="current_step === 2">Bar</p>
   </div>
 </template>
 
 <script lang="ts">
 import { Vue, Options } from "vue-class-component";
-import DoorPlacer from "./door_map/DoorPlacer.vue";
 import { Rectangle } from "./rects/rectangles";
 
+import DoorPlacer from "./door_map/DoorPlacer.vue";
+import DoorChooser from "./door_map/DoorChooser.vue";
+
 type Step = {
   label: string;
   icon: string;
@@ -39,6 +41,7 @@ type Step = {
 @Options({
   components: {
     DoorPlacer,
+    DoorChooser,
   },
 })
 export default class DoorMapEditor extends Vue {

ui/src/components/door_map/DoorChooser.vue

@@ -0,0 +1,66 @@
+<template>
+  <section>
+    <div class="content">
+      <ul>
+        <li>Linksklick: Türchen auswählen</li>
+      </ul>
+    </div>
+    <figure class="image">
+      <img src="@/assets/adventskalender.jpg" />
+      <ThouCanvas>
+        <Rect
+          v-for="(rect, index) in rectangles"
+          :key="'rect' + index"
+          :rectangle="rect"
+          @click.left="choose_rect(index)"
+        />
+        <Rect
+          v-for="(rect, index) in rectangles_chosen"
+          :key="'rect_chosen' + index"
+          :rectangle="rect"
+          :focused="true"
+        />
+      </ThouCanvas>
+    </figure>
+  </section>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+import { Rectangle } from "../rects/rectangles";
+
+import ThouCanvas from "../rects/ThouCanvas.vue";
+import Rect from "../rects/Rect.vue";
+
+@Options({
+  components: {
+    ThouCanvas,
+    Rect,
+  },
+  props: {
+    rectangles: Array,
+  },
+  emits: ["update:rectangles"],
+})
+export default class DoorChooser extends Vue {
+  private rectangles!: Rectangle[];
+  private rectangles_chosen: Rectangle[] = [];
+
+  public choose_rect(index: number) {
+    this.rectangles_chosen.push(this.rectangles.splice(index, 1)[0]);
+  }
+
+  public beforeUnmount() {
+    this.$emit(
+      "update:rectangles",
+      this.rectangles.concat(this.rectangles_chosen)
+    );
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+section > figure {
+  user-select: none;
+}
+</style>