Project 'tomas.hozman/graphics-generator' was moved to 'to-generator/graphics-generator'. Please update any links and bookmarks that may still have the old path.
Select Git revision

Alexa Valentová authored
Avatar.vue 2.26 KiB
<script setup>
import { watch, ref } from "vue";
import Canvas from "../../components/canvas/Canvas.vue";
import redraw from "./canvas";
import Navbar from "../../components/Navbar.vue";
import MainContainer from "../../components/MainContainer.vue";
import ImageInput from "../../components/inputs/ImageInput.vue";
</script>
<script>
export default {
components: {
Canvas,
Navbar,
MainContainer,
ImageInput,
},
data() {
return {
mainImage: null,
autoRedraw: false,
};
},
methods: {
async reloadCanvasProperties() {
const canvasProperties = {
mainImage: this.mainImage,
};
await this.$refs.canvas.redraw(canvasProperties);
},
},
mounted() {
this.$watch(
(vm) => [vm.mainImage],
async (value) => {
if (this.autoRedraw) {
await this.reloadCanvasProperties();
}
},
{
immediate: true,
deep: true,
},
);
},
};
</script>
<template>
<header>
<Navbar></Navbar>
</header>
<main>
<MainContainer>
<template v-slot:left>
<Canvas
ref="canvas"
:redrawFunction="redraw"
width="2000"
height="2000"
/>
</template>
<template v-slot:right>
<div class="prose max-w-none">
<p>
Amet illo et atque et voluptates esse ad magni. Dolor omnis non ad.
Qui est aut aperiam rerum atque mollitia ut. Ea aliquam nihil earum
vel. Dicta odit quod aliquam molestiae porro ex error. Aut soluta et
voluptatibus vel.
</p>
<p>
Quo quos est eaque ipsa esse. Laboriosam laborum est facilis.
Corporis excepturi consequuntur quo dolorem omnis accusantium
expedita voluptates. Ut omnis et asperiores consequatur quia
voluptatum repudiandae.
</p>
</div>
<ReloadButton :parentRefs="$refs" @click="reloadCanvasProperties" />
<AutoReloadCheckbox v-model="autoRedraw" />
<ImageInput
name="Obrázek"
v-model="mainImage"
:important="true"
zIndex="10"
/>
</template>
</MainContainer>
</main>
</template>
<style>
@import "vue-select/dist/vue-select.css";
</style>