Skip to content
Snippets Groups Projects
Select Git revision
  • d67dd610735420c9f92fc0708aa4698c86ab4242
  • master default protected
  • v2 protected
  • v2-test protected
  • piratiuk
  • regionalSuccess
  • v1
7 results

Avatar.vue

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