add avatars

frontend/src/components/Navbar.vue

@@ -9,10 +9,11 @@ import { RouterLink } from "vue-router";
 <script>
 export default {
   components: { VueSelect },
-  props: ["defaultTemplate"],
+  props: ["defaultTemplate", "sideText"],
   data() {
     return {
       currentTemplate: this.defaultTemplate,
+      sideText: this.sideText,
     };
   },
   watch: {
@@ -43,6 +44,13 @@ export default {
           Generátor grafiky
           <img :src="v2Image" class="h-5" alt="Verze 2.0" />
         </RouterLink>
+
+        <div
+          v-if="sideText"
+          class="pl-8 text-white"
+        >
+          {{ sideText }}
+        </div>
       </div>
       <div>
         <div class="w-72" v-if="currentTemplate">

frontend/src/components/canvas/Canvas.vue

@@ -41,7 +41,12 @@ export default {
 
       let link = document.createElement("a");
 
-      link.download = "Vyhrajem.png";
+      if (window.fileName !== undefined) {
+        link.download = window.fileName;
+      } else {
+        link.download = `Generator-${new Date().toLocaleString()}.png`;
+      }
+
       link.href = this.$refs.canvas.toDataURL();
 
       link.click();

frontend/src/views/angle_event_left/AngleEventLeft.vue

@@ -84,6 +84,10 @@ export default {
         colors: this.colors,
       };
 
+      if (canvasProperties.mainText) {
+        window.fileName = canvasProperties.mainText;
+      }
+
       await this.$refs.canvas.redraw(canvasProperties);
 
       delete canvasProperties.colors;

frontend/src/views/angle_event_right/AngleEventRight.vue

@@ -84,6 +84,10 @@ export default {
         colors: this.colors,
       };
 
+      if (canvasProperties.mainText) {
+        window.fileName = canvasProperties.mainText;
+      }
+
       await this.$refs.canvas.redraw(canvasProperties);
 
       delete canvasProperties.colors;

frontend/src/views/angle_person_event_left/AnglePersonEventLeft.vue

@@ -89,6 +89,10 @@ export default {
         colors: this.colors,
       };
 
+      if (canvasProperties.mainText) {
+        window.fileName = canvasProperties.mainText;
+      }
+
       await this.$refs.canvas.redraw(canvasProperties);
 
       let canvasPropertiesToSave = structuredClone(toRawDeep(canvasProperties));

frontend/src/views/angle_person_event_right/AnglePersonEventRight.vue

@@ -89,6 +89,10 @@ export default {
         colors: this.colors,
       };
 
+      if (canvasProperties.mainText) {
+        window.fileName = canvasProperties.mainText;
+      }
+
       await this.$refs.canvas.redraw(canvasProperties);
 
       let canvasPropertiesToSave = structuredClone(toRawDeep(canvasProperties));

frontend/src/views/avatar/Avatar.vue

@@ -7,6 +7,8 @@ import redraw from "./canvas";
 import Navbar from "../../components/Navbar.vue";
 import MainContainer from "../../components/MainContainer.vue";
 import ImageInput from "../../components/inputs/ImageInput.vue";
+import ReloadButton from "../../components/reload/ReloadButton.vue";
+import AutoReloadCheckbox from "../../components/reload/AutoReloadCheckbox.vue";
 
 import { toRawDeep } from "../../utils";
 </script>
@@ -22,7 +24,7 @@ export default {
   data() {
     return {
       mainImage: null,
-      autoRedraw: false,
+      autoRedraw: true,
     };
   },
   methods: {
@@ -31,15 +33,12 @@ export default {
         mainImage: this.mainImage,
       };
 
-      let canvasPropertiesToSave = structuredClone(toRawDeep(canvasProperties));
-      delete canvasPropertiesToSave.colors;
-
-      setCanvasStorage(canvasPropertiesToSave);
-
       await this.$refs.canvas.redraw(canvasProperties);
     },
   },
   mounted() {
+    window.fileName = "Profilovy obrazek.png";
+
     this.$watch(
       (vm) => [vm.mainImage],
       async (value) => {
@@ -58,7 +57,7 @@ export default {
 
 <template>
   <header>
-    <Navbar></Navbar>
+    <Navbar sideText="Profilové obrázky"></Navbar>
   </header>
   <main>
     <MainContainer>
@@ -88,14 +87,15 @@ export default {
           </p>
         </div>
 
-        <ReloadButton :parentRefs="$refs" @click="reloadCanvasProperties" />
-        <AutoReloadCheckbox v-model="autoRedraw" />
         <ImageInput
           name="Obrázek"
           v-model="mainImage"
           :important="true"
           zIndex="10"
         />
+
+        <ReloadButton :parentRefs="$refs" @click="reloadCanvasProperties" />
+        <AutoReloadCheckbox v-model="autoRedraw" />
       </template>
     </MainContainer>
   </main>

frontend/src/views/avatar/canvas.js

-const redraw = async (canvas, options) => {};
+import { sortObjects } from "../../components/canvas/utils";
+
+import overlayURL from "../../assets/template/avatar/overlay.png";
+
+let mainImage = null;
+let overlayImage = null;
+let mainImageSource = null;
+let pointerDownEventAssigned = false;
+
+const removeDownEventListener = () => {
+  document
+    .getElementsByClassName("upper-canvas")[0]
+    .removeEventListener("pointerdown", canvasPointerDownEvent);
+};
+
+let upEventFunction = null;
+let canvasPointerDownEvent = null;
+
+const redraw = async (canvas, options) => {
+  document
+    .getElementsByClassName("upper-canvas")[0]
+    .removeEventListener("pointerup", upEventFunction);
+  document
+    .getElementsByClassName("upper-canvas")[0]
+    .removeEventListener("pointerout", upEventFunction);
+  document
+    .getElementsByClassName("upper-canvas")[0]
+    .removeEventListener("pointercancel", upEventFunction);
+
+  canvas.preserveObjectStacking = true;
+
+  /* BEGIN Main image render */
+
+  if (
+    options.mainImage !== null &&
+    (!canvas.contains(mainImage) ||
+      mainImage === null ||
+      options.mainImage.src !== mainImageSource)
+  ) {
+    if (mainImage !== null) {
+      canvas.remove(mainImage);
+    }
+
+    mainImage = new fabric.Image(options.mainImage, {
+      left: 0,
+      top: 0,
+      zIndex: 0,
+    });
+
+    mainImage.controls = {
+      ...fabric.Image.prototype.controls,
+      mtr: new fabric.Control({ visible: false }),
+    };
+
+    if (mainImage.width >= mainImage.height) {
+      mainImage.scaleToHeight(canvas.height);
+    } else {
+      mainImage.scaleToWidth(canvas.width);
+    }
+
+    canvas.add(mainImage);
+    mainImageSource = options.mainImage.src;
+
+    removeDownEventListener();
+    pointerDownEventAssigned = false;
+  } else if (mainImage !== null && options.mainImage === null) {
+    canvas.remove(mainImage);
+
+    removeDownEventListener();
+    pointerDownEventAssigned = false;
+  }
+
+  /* END Main image render */
+
+  /* BEGIN Overlay render */
+
+  if (overlayImage === null) {
+    overlayImage = new Image();
+
+    await new Promise((resolve) => {
+      overlayImage.onload = () => {
+        resolve();
+      };
+
+      overlayImage.src = overlayURL;
+    });
+
+    overlayImage = new fabric.Image(overlayImage, {
+      selectable: false,
+      zIndex: 5,
+    });
+    overlayImage.scaleToWidth(canvas.width);
+
+    canvas.add(overlayImage);
+  }
+
+  /* END Overlay render */
+
+  sortObjects(canvas);
+
+  canvasPointerDownEvent = (event) => {
+    let activeObject = canvas.getActiveObject();
+
+    if (activeObject === null) {
+      return;
+    }
+
+    // if (activeObject._element.src == mainImage._element.src) {
+    // return
+    // }
+
+    canvas.remove(overlayImage);
+    overlayImage = null;
+  };
+
+  if (!pointerDownEventAssigned) {
+    document
+      .getElementsByClassName("upper-canvas")[0]
+      .addEventListener("pointerdown", canvasPointerDownEvent);
+
+    pointerDownEventAssigned = true;
+  }
+
+  upEventFunction = (event) => {
+    redraw(canvas, options);
+  };
+
+  document
+    .getElementsByClassName("upper-canvas")[0]
+    .addEventListener("pointerup", upEventFunction);
+
+  document
+    .getElementsByClassName("upper-canvas")[0]
+    .addEventListener("pointerout", upEventFunction);
+
+  document
+    .getElementsByClassName("upper-canvas")[0]
+    .addEventListener("pointercancel", upEventFunction);
+};
 
 export default redraw;

frontend/src/views/base_event/BaseEvent.vue

@@ -84,6 +84,10 @@ export default {
         colors: this.colors,
       };
 
+      if (canvasProperties.mainText) {
+        window.fileName = canvasProperties.mainText;
+      }
+
       await this.$refs.canvas.redraw(canvasProperties);
 
       delete canvasProperties.colors;

frontend/src/views/base_person_event/BasePersonEvent.vue

@@ -89,6 +89,10 @@ export default {
         colors: this.colors,
       };
 
+      if (canvasProperties.mainText) {
+        window.fileName = canvasProperties.mainText;
+      }
+
       await this.$refs.canvas.redraw(canvasProperties);
 
       let canvasPropertiesToSave = structuredClone(toRawDeep(canvasProperties));

frontend/src/views/basic_photo_banner/BasicPhotoBanner.vue

@@ -108,6 +108,10 @@ export default {
         colors: this.colors,
       };
 
+      if (canvasProperties.mainText) {
+        window.fileName = canvasProperties.mainText;
+      }
+
       await this.$refs.canvas.redraw(canvasProperties);
 
       delete canvasProperties.colors;

frontend/src/views/facebook_survey/FacebookSurvey.vue

@@ -107,6 +107,10 @@ export default {
         gradientHeightMultiplier: this.gradientHeightMultiplier,
       };
 
+      if (canvasProperties.mainText) {
+        window.fileName = canvasProperties.mainText;
+      }
+
       await this.$refs.canvas.redraw(canvasProperties);
 
       delete canvasProperties.colors;

frontend/src/views/newspaper_quote_bottom/NewspaperQuoteBottom.vue

@@ -117,6 +117,10 @@ export default {
         colors: this.colors,
       };
 
+      if (canvasProperties.mainText) {
+        window.fileName = canvasProperties.mainText;
+      }
+
       await this.$refs.canvas.redraw(canvasProperties);
 
       delete canvasProperties.colors;

frontend/src/views/newspaper_quote_middle/NewspaperQuoteMiddle.vue

@@ -126,6 +126,10 @@ export default {
         colors: this.colors,
       };
 
+      if (canvasProperties.mainText) {
+        window.fileName = canvasProperties.mainText;
+      }
+
       await this.$refs.canvas.redraw(canvasProperties);
 
       delete canvasProperties.colors;

frontend/src/views/people_banner_with_custom_text/PeopleBannerWithCustomText.vue

@@ -76,6 +76,10 @@ export default {
         colors: this.colors,
       };
 
+      if (canvasProperties.mainText) {
+        window.fileName = canvasProperties.mainText;
+      }
+
       await this.$refs.canvas.redraw(canvasProperties);
 
       let canvasPropertiesToSave = structuredClone(toRawDeep(canvasProperties));

frontend/src/views/people_banner_with_predefined_text/PeopleBannerWithPredefinedText.vue

@@ -73,6 +73,10 @@ export default {
         colors: this.colors,
       };
 
+      if (canvasProperties.mainText) {
+        window.fileName = canvasProperties.mainText;
+      }
+
       await this.$refs.canvas.redraw(canvasProperties);
 
       let canvasPropertiesToSave = structuredClone(toRawDeep(canvasProperties));

frontend/src/views/poster/Poster.vue

@@ -109,6 +109,10 @@ export default {
         colors: this.colors,
       };
 
+      if (canvasProperties.mainText) {
+        window.fileName = canvasProperties.mainText;
+      }
+
       await this.$refs.canvas.redraw(canvasProperties);
 
       let canvasPropertiesToSave = structuredClone(toRawDeep(canvasProperties));

frontend/src/views/regional_success/RegionalSuccess.vue

@@ -129,6 +129,10 @@ export default {
         colors: this.colors,
       };
 
+      if (canvasProperties.mainText) {
+        window.fileName = canvasProperties.mainText;
+      }
+
       await this.$refs.canvas.redraw(canvasProperties);
 
       let canvasPropertiesToSave = structuredClone(toRawDeep(canvasProperties));