advent22/ui/src/components/DoorMapEditor.vue

<template>
  <div class="box">
    <p class="title is-4">Türchen bearbeiten</p>

    <div class="tabs is-centered">
      <ul>
        <li
          v-for="(step, index) in steps"
          :key="'step-' + index"
          :class="current_step === index ? 'is-active' : ''"
          @click="current_step = index"
        >
          <a>{{ step }}</a>
        </li>
      </ul>
    </div>

    <section v-if="current_step === 0">
      <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" />
        <RectPad />
      </figure>
    </section>
  </div>
</template>

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

@Options({
  components: {
    RectPad,
  },
})
export default class CalendarImage extends Vue {
  private readonly steps: string[] = ["Platzieren", "Ordnen", "Überprüfen"];
  private current_step = 0;
}
</script>

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

  img + * {
    position: absolute;
    left: 0;
    top: 0;
    z-index: auto;
  }
}
</style>