78 lines
No EOL
1.7 KiB
Vue
78 lines
No EOL
1.7 KiB
Vue
<template>
|
|
<section>
|
|
<div class="content">
|
|
<p class="title is-5">Steuerung</p>
|
|
<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="$advent22.api_url('general/background')" />
|
|
<RectangleCanvas :rectangles="rectangles" @draw="on_draw" @drag="on_drag" @remove="on_remove" />
|
|
</figure>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Options, Vue } from "vue-class-component";
|
|
import { Rectangle } from "../rects/rectangles";
|
|
import RectangleCanvas from "./RectangleCanvas.vue";
|
|
import { Door } from "./calendar";
|
|
|
|
@Options({
|
|
components: {
|
|
RectangleCanvas,
|
|
},
|
|
props: {
|
|
doors: Array,
|
|
},
|
|
emits: ["update:doors"],
|
|
})
|
|
export default class extends Vue {
|
|
private doors!: Door[];
|
|
|
|
public get rectangles() {
|
|
return this.doors.map((door) => door.position);
|
|
}
|
|
|
|
public on_draw(position: Rectangle) {
|
|
this.doors.push(new Door(position));
|
|
}
|
|
|
|
public find_door_index(position: Rectangle): number {
|
|
return this.doors.findIndex((door) => door.position.equals(position));
|
|
}
|
|
|
|
public on_drag(old_pos: Rectangle, new_pos: Rectangle) {
|
|
const idx = this.find_door_index(old_pos);
|
|
|
|
if (idx === -1) {
|
|
return;
|
|
}
|
|
|
|
this.doors[idx].position = new_pos;
|
|
}
|
|
|
|
public on_remove(position: Rectangle) {
|
|
const idx = this.find_door_index(position);
|
|
|
|
if (idx === -1) {
|
|
return;
|
|
}
|
|
|
|
this.doors.splice(idx, 1);
|
|
}
|
|
|
|
public beforeUnmount() {
|
|
this.$emit("update:doors", this.doors);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
section>figure {
|
|
user-select: none;
|
|
}
|
|
</style> |