Avatar.vue

<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>