advent22/ui/src/components/door_map/DoorPlacer.vue

<template>
  <section>
    <div class="content">
      <ul>
        <li>Linksklick + Ziehen: Neues Türchen erstellen</li>
        <li>Rechtsklick + Ziehen: Türchen verschieben</li>
        <li>Doppel- oder Mittelklick: Türchen löschen</li>
      </ul>
    </div>
    <figure class="image">
      <img src="@/assets/adventskalender.jpg" />
      <RectangleCanvas ref="rect_pad" />
    </figure>
  </section>
</template>

<script lang="ts">
import { Vue, Options } from "vue-class-component";
import { Rectangle } from "../rects/rectangles";
import RectangleCanvas from "./RectangleCanvas.vue";

@Options({
  components: {
    RectangleCanvas,
  },
  props: {
    rectangles: Array,
  },
  emits: ["update:rectangles"],
})
export default class extends Vue {
  private rectangles!: Rectangle[];

  declare $refs: {
    rect_pad: RectangleCanvas;
  };

  public mounted() {
    this.$refs.rect_pad.rectangles = this.rectangles;
  }

  public beforeUnmount() {
    this.$emit("update:rectangles", this.rectangles);
  }
}
</script>

<style lang="scss" scoped>
section > figure {
  user-select: none;
}
</style>