52 lines
No EOL
1.1 KiB
Vue
52 lines
No EOL
1.1 KiB
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> |