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

<template>
  <div class="card-content">
    <div class="content is-small">
      <h3>Steuerung</h3>
      <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 is-unselectable">
      <img :src="$advent22.api_url('user/background_image')" />
      <DoorCanvas :doors="doors" />
    </figure>
  </div>
</template>

<script lang="ts">
import { Door } from "@/lib/door";
import { Options, Vue } from "vue-class-component";

import DoorCanvas from "./DoorCanvas.vue";

@Options({
  components: {
    DoorCanvas,
  },
  props: {
    doors: Array,
  },
})
export default class extends Vue {
  public doors!: Door[];
}
</script>