- use `ImageData` and `Loading` types for image transfer - consolidate library directory - remove `advent22` plugin in favor of static `API` class
42 lines
1 KiB
Vue
42 lines
1 KiB
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="_ensure_loaded(store.background_image).data_url" />
|
|
<DoorCanvas :doors="doors" />
|
|
</figure>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { ensure_loaded, Loading } from "@/lib/helpers";
|
|
import { Door } from "@/lib/rects/door";
|
|
import { advent22Store } from "@/lib/store";
|
|
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[];
|
|
public readonly store = advent22Store();
|
|
|
|
public _ensure_loaded<T>(o: Loading<T>): T {
|
|
return ensure_loaded(o);
|
|
}
|
|
}
|
|
</script>
|