add event templates with image backgrounds

frontend/src/templates.js

@@ -8,11 +8,17 @@ import facebookSurveyImage from "./assets/previews/facebook_survey.png";
 import twitterBannerImage from "./assets/previews/twitter_banner.png";
 import posterImage from "./assets/previews/poster.png";
 import regionalSuccessImage from "./assets/previews/regional_success.png";
+
 import baseEventImage from "./assets/previews/base_event.png";
 import rightEventImage from "./assets/previews/right_event.png";
 import angleEventRightImage from "./assets/previews/angle_event_right.png";
 import angleEventLeftImage from "./assets/previews/angle_event_left.png";
 
+import basePersonEventImage from "./assets/previews/base_person_event.png";
+import rightPersonEventImage from "./assets/previews/right_person_event.png";
+import anglePersonEventRightImage from "./assets/previews/angle_person_event_right.png";
+import anglePersonEventLeftImage from "./assets/previews/angle_person_event_left.png";
+
 const TEMPLATES = {
   basic_photo_banner: {
     name: "Základní banner s fotkou",
@@ -143,6 +149,44 @@ const TEMPLATES = {
       title: "Událost - pruh pod úhlem, vlevo",
     },
   },
+  base_person_event: {
+    name: "Událost - text a obrázek na pozadí, vprostřed",
+    image: basePersonEventImage,
+    path: "/base-person-event",
+    component: () => import("./views/base_person_event/BasePersonEvent.vue"),
+    meta: {
+      title: "Událost - text a obrázek na pozadí, vprostřed",
+    },
+  },
+  right_person_event: {
+    name: "Událost - text a obrázek na pozadí, vpravo",
+    image: rightPersonEventImage,
+    path: "/right-person-event",
+    component: () => import("./views/right_person_event/RightPersonEvent.vue"),
+    meta: {
+      title: "Událost - text a obrázek na pozadí, vpravo",
+    },
+  },
+  angle_person_event_right: {
+    name: "Událost - pruh pod úhlem s obrázkem na pozadí, vpravo",
+    image: anglePersonEventRightImage,
+    path: "/angle-person-event-right",
+    component: () =>
+      import("./views/angle_person_event_right/AnglePersonEventRight.vue"),
+    meta: {
+      title: "Událost - pruh pod úhlem s obrázkem na pozadí, vpravo",
+    },
+  },
+  angle_person_event_left: {
+    name: "Událost - pruh pod úhlem s obrázkem na pozadí, vlevo",
+    image: anglePersonEventLeftImage,
+    path: "/angle-person-event-left",
+    component: () =>
+      import("./views/angle_person_event_left/AnglePersonEventLeft.vue"),
+    meta: {
+      title: "Událost - pruh pod úhlem s obrázkem na pozadí, vlevo",
+    },
+  },
 };
 
 export default TEMPLATES;

frontend/src/utils.js

+import { toRaw } from "vue";
+
 const loadFonts = async (fonts) => {
   for (const font of fonts) {
     await document.fonts.load(
@@ -81,7 +83,29 @@ const setCanvasStorage = (data) => {
   );
 };
 
+const toRawDeep = (observed) => {
+  const val = toRaw(observed);
+
+  if (Array.isArray(val)) {
+    return val.map(toRawDeep);
+  }
+
+  if (val === null) return null;
+
+  if (typeof val === "object") {
+    const entries = Object.entries(val).map(([key, val]) => [
+      key,
+      toRawDeep(val),
+    ]);
+
+    return Object.fromEntries(entries);
+  }
+
+  return val;
+};
+
 export {
+  toRawDeep,
   loadFonts,
   clearNullsFromArray,
   loadCanvasStorage,

frontend/src/views/angle_person_event_left/AnglePersonEventLeft.vue

+<script setup>
+import { watch, ref } from "vue";
+
+import COLORS from "../../colors";
+import TEMPLATES from "../../templates";
+import DEFAULT_CONTRACTOR from "../../contractors";
+import {
+  loadFonts,
+  loadCanvasStorage,
+  setCanvasStorage,
+  updateAutoRedrawStorage,
+  toRawDeep,
+} from "../../utils";
+
+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";
+import LongTextInput from "../../components/inputs/text/LongTextInput.vue";
+import ShortTextInput from "../../components/inputs/text/ShortTextInput.vue";
+import MultipleColorPicker from "../../components/inputs/colors/MultipleColorPicker.vue";
+import ReloadButton from "../../components/reload/ReloadButton.vue";
+import AutoReloadCheckbox from "../../components/reload/AutoReloadCheckbox.vue";
+</script>
+
+<script>
+await loadFonts(["12px Bebas Neue", "12px Roboto Condensed"]);
+
+export default {
+  components: {
+    Canvas,
+    Navbar,
+    MainContainer,
+    ImageInput,
+    LongTextInput,
+    ShortTextInput,
+    MultipleColorPicker,
+    AutoReloadCheckbox,
+    ReloadButton,
+  },
+  data() {
+    const predefinedColors = {
+      blackBackground: {
+        name: "Černé pozadí, černý text",
+        colors: {
+          background: COLORS.black,
+          mainText: COLORS.black,
+          highlightedText: COLORS.black,
+          highlight: COLORS.yellow1,
+          contractedByText: COLORS.gray1,
+        },
+      },
+      whiteBackground: {
+        name: "Bílé pozadí, bílý text",
+        colors: {
+          background: COLORS.white,
+          mainText: COLORS.white,
+          highlightedText: COLORS.black,
+          highlight: COLORS.yellow1,
+          contractedByText: COLORS.gray1,
+        },
+      },
+    };
+
+    return {
+      personImage: null,
+      mainText: null,
+      contractedBy: DEFAULT_CONTRACTOR,
+      gradientHeightMultiplier: 1,
+      colorLabels: {
+        background: "Pozadí",
+      },
+      predefinedColors: predefinedColors,
+      colors: predefinedColors.blackBackground.colors,
+      autoRedraw: false,
+    };
+  },
+  async created() {
+    await loadCanvasStorage(this);
+  },
+  methods: {
+    async reloadCanvasProperties() {
+      const canvasProperties = {
+        personImage: this.personImage,
+        mainText: this.mainText,
+        contractedBy: this.contractedBy,
+        colors: this.colors,
+      };
+
+      await this.$refs.canvas.redraw(canvasProperties);
+
+      let canvasPropertiesToSave = structuredClone(toRawDeep(canvasProperties));
+      delete canvasPropertiesToSave.colors;
+
+      setCanvasStorage(canvasPropertiesToSave);
+    },
+  },
+  mounted() {
+    this.$watch(
+      (vm) => [vm.personImage, vm.mainText, vm.contractedBy, vm.colors],
+      async (value) => {
+        if (this.autoRedraw) {
+          await this.reloadCanvasProperties();
+        }
+      },
+      {
+        immediate: true,
+        deep: true,
+      },
+    );
+
+    this.$watch(
+      (vm) => [vm.autoRedraw],
+      async (value) => {
+        updateAutoRedrawStorage(this.autoRedraw);
+
+        if (this.autoRedraw) {
+          await this.reloadCanvasProperties();
+        }
+      },
+    );
+  },
+};
+</script>
+
+<template>
+  <header>
+    <Navbar :defaultTemplate="TEMPLATES.angle_person_event_left"></Navbar>
+  </header>
+  <main>
+    <MainContainer>
+      <template v-slot:left>
+        <Canvas
+          ref="canvas"
+          :redrawFunction="redraw"
+          width="1702"
+          height="630"
+        />
+      </template>
+
+      <template v-slot:right>
+        <ReloadButton :parentRefs="$refs" @click="reloadCanvasProperties" />
+        <AutoReloadCheckbox v-model="autoRedraw" />
+
+        <ImageInput
+          name="Obrázek"
+          v-model="personImage"
+          :important="true"
+          zIndex="10"
+        />
+
+        <LongTextInput
+          name="Text"
+          v-model="mainText"
+          :important="true"
+          :highlightable="true"
+          zIndex="9"
+        />
+
+        <MultipleColorPicker
+          name="Barvy"
+          v-model="colors"
+          :important="false"
+          :colorLabels="colorLabels"
+          :predefinedColors="predefinedColors"
+          :defaultPredefinedColors="predefinedColors.blackBackground"
+          zIndex="5"
+        ></MultipleColorPicker>
+
+        <ShortTextInput
+          name="Zadavatel a zpracovatel"
+          v-model="contractedBy"
+          :defaultValue="DEFAULT_CONTRACTOR"
+          :important="false"
+          zIndex="4"
+        />
+      </template>
+    </MainContainer>
+  </main>
+</template>
+
+<style>
+@import "vue-select/dist/vue-select.css";
+</style>

frontend/src/views/angle_person_event_left/canvas.js

+import { fabric } from "fabric";
+import {
+  clearObjects,
+  sortObjects,
+  transformHighlightedText,
+  checkTextBoxHeight,
+} from "../../components/canvas/utils";
+import COLORS from "../../colors";
+import { PaddedHighlightingTextbox } from "../../components/canvas/textbox";
+
+import bgImageSourceBlack from "../../assets/template/angle_person_event_left/bg_black.png";
+import bgImageSourceWhite from "../../assets/template/angle_person_event_left/bg_white.png";
+
+let mainImage = null;
+let personImage = null;
+let contractedByTextbox = null;
+let previousColor = null;
+let mainTextBox = null;
+
+let personImageSource = null;
+
+const removeDownEventListener = () => {
+  document
+    .getElementsByClassName("upper-canvas")[0]
+    .removeEventListener("pointerdown", canvasPointerDownEvent);
+};
+
+let upEventFunction = null;
+let canvasPointerDownEvent = null;
+let pointerDownEventAssigned = false;
+
+const redraw = async (canvas, options) => {
+  clearObjects([contractedByTextbox, mainTextBox], canvas);
+
+  const contractedByTextSize = Math.ceil(canvas.height * 0.035);
+  const contractedByTextMaxWidth = Math.ceil(canvas.width * 0.9);
+  const contractedByTextBottomMargin = Math.ceil(canvas.width * 0.02);
+  const contractedByTextSideMargin = Math.ceil(canvas.width * 0.03);
+
+  const textMarginLeft = Math.ceil(canvas.width * 0.54);
+  const textMarginRight = Math.ceil(canvas.width * 0.15);
+
+  let mainTextMarginTop = Math.ceil(canvas.height * 0.185);
+  const mainTextBackgroundMarginTop = Math.ceil(canvas.height * 0.14);
+  const mainTextSize = Math.ceil(canvas.height * 0.22);
+  const mainTextHeightLimit = Math.ceil(mainTextSize * 2.2);
+  const mainTextLineHeight = 0.85;
+
+  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 Person image render */
+
+  if (
+    options.personImage !== null &&
+    (!canvas.contains(personImage) ||
+      personImage === null ||
+      options.personImage.src !== personImageSource)
+  ) {
+    if (personImage !== null) {
+      canvas.remove(personImage);
+    }
+
+    personImage = new fabric.Image(options.personImage, {
+      left: 0,
+      top: 0,
+      zIndex: 0,
+    });
+
+    personImage.controls = {
+      ...fabric.Image.prototype.controls,
+      mtr: new fabric.Control({ visible: false }),
+    };
+
+    if (personImage.width >= personImage.height) {
+      personImage.scaleToHeight(canvas.height);
+    } else {
+      personImage.scaleToWidth(canvas.width);
+    }
+
+    canvas.add(personImage);
+    personImageSource = options.personImage.src;
+    // canvas.centerObject(personImage)
+
+    removeDownEventListener();
+    pointerDownEventAssigned = false;
+  } else if (personImage !== null && options.personImage === null) {
+    canvas.remove(personImage);
+
+    removeDownEventListener();
+    pointerDownEventAssigned = false;
+  }
+
+  /* END Person image render */
+
+  /* BEGIN Main image render */
+
+  if (previousColor !== options.colors.background || mainImage === null) {
+    if (mainImage !== null) {
+      canvas.remove(mainImage);
+    }
+
+    const image = new Image();
+
+    const imageLoadPromise = new Promise((resolve) => {
+      image.onload = () => {
+        resolve();
+      };
+
+      if (options.colors.background.value === COLORS.black.value) {
+        image.src = bgImageSourceBlack;
+      } else {
+        image.src = bgImageSourceWhite;
+      }
+    });
+    await imageLoadPromise;
+
+    mainImage = new fabric.Image(image, {
+      left: 0,
+      top: 0,
+      zIndex: 5,
+      selectable: false,
+    });
+
+    mainImage.scaleToWidth(canvas.width);
+
+    canvas.add(mainImage);
+
+    previousColor = options.colors.background;
+  }
+
+  /* END Main image render */
+
+  if (options.mainText !== null) {
+    /* BEGIN Name text render */
+
+    const mainTextWidth = canvas.width - textMarginLeft - textMarginRight;
+
+    const highlightedData = transformHighlightedText(
+      options.mainText,
+      mainTextSize,
+      mainTextWidth,
+      "Bebas Neue",
+      options.colors.highlight.value,
+      options.colors.highlightedText.value,
+      { padWhenDiacritics: true },
+    );
+
+    mainTextBox = new PaddedHighlightingTextbox(highlightedData.text, {
+      width: canvas.width,
+      left: textMarginLeft,
+      textAlign: "left",
+      fontFamily: "Bebas Neue",
+      fontSize: mainTextSize,
+      lineHeight: mainTextLineHeight,
+      fill: options.colors.mainText.value,
+      styles: highlightedData.styles,
+      selectable: false,
+      highlightPadding: canvas.height * 0.003,
+      zIndex: 10,
+    });
+
+    checkTextBoxHeight(mainTextBox, 3);
+
+    canvas.add(mainTextBox);
+
+    mainTextBox.top = mainTextMarginTop - highlightedData.paddingBottom;
+
+    canvas.renderAll();
+
+    /* END Main text render */
+  }
+
+  /* BEGIN Contracted by render */
+
+  if (options.contractedBy !== null) {
+    contractedByTextbox = new fabric.Textbox(options.contractedBy, {
+      left:
+        canvas.width - contractedByTextMaxWidth - contractedByTextSideMargin,
+      top: canvas.height - contractedByTextBottomMargin - contractedByTextSize,
+      width: contractedByTextMaxWidth,
+      fontFamily: "Roboto Condensed",
+      fontSize: contractedByTextSize,
+      textAlign: "right",
+      fill: options.colors.contractedByText.value,
+      selectable: false,
+      zIndex: 10,
+    });
+
+    checkTextBoxHeight(contractedByTextbox, 1);
+
+    canvas.add(contractedByTextbox);
+  }
+
+  /* END Contracted by render */
+
+  sortObjects(canvas);
+
+  canvasPointerDownEvent = (event) => {
+    let activeObject = canvas.getActiveObject();
+
+    if (activeObject === null) {
+      return;
+    }
+
+    // if (activeObject._element.src == mainImage._element.src) {
+    // return
+    // }
+
+    canvas.remove(mainImage);
+    canvas.remove(mainTextBox);
+    mainImage = null;
+    mainTextBox = 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/angle_person_event_right/AnglePersonEventRight.vue

+<script setup>
+import { watch, ref } from "vue";
+
+import COLORS from "../../colors";
+import TEMPLATES from "../../templates";
+import DEFAULT_CONTRACTOR from "../../contractors";
+import {
+  loadFonts,
+  loadCanvasStorage,
+  setCanvasStorage,
+  updateAutoRedrawStorage,
+  toRawDeep,
+} from "../../utils";
+
+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";
+import LongTextInput from "../../components/inputs/text/LongTextInput.vue";
+import ShortTextInput from "../../components/inputs/text/ShortTextInput.vue";
+import MultipleColorPicker from "../../components/inputs/colors/MultipleColorPicker.vue";
+import ReloadButton from "../../components/reload/ReloadButton.vue";
+import AutoReloadCheckbox from "../../components/reload/AutoReloadCheckbox.vue";
+</script>
+
+<script>
+await loadFonts(["12px Bebas Neue", "12px Roboto Condensed"]);
+
+export default {
+  components: {
+    Canvas,
+    Navbar,
+    MainContainer,
+    ImageInput,
+    LongTextInput,
+    ShortTextInput,
+    MultipleColorPicker,
+    AutoReloadCheckbox,
+    ReloadButton,
+  },
+  data() {
+    const predefinedColors = {
+      blackBackground: {
+        name: "Černé pozadí, černý text",
+        colors: {
+          background: COLORS.black,
+          mainText: COLORS.black,
+          highlightedText: COLORS.black,
+          highlight: COLORS.yellow1,
+          contractedByText: COLORS.gray1,
+        },
+      },
+      whiteBackground: {
+        name: "Bílé pozadí, bílý text",
+        colors: {
+          background: COLORS.white,
+          mainText: COLORS.white,
+          highlightedText: COLORS.black,
+          highlight: COLORS.yellow1,
+          contractedByText: COLORS.gray1,
+        },
+      },
+    };
+
+    return {
+      personImage: null,
+      mainText: null,
+      contractedBy: DEFAULT_CONTRACTOR,
+      gradientHeightMultiplier: 1,
+      colorLabels: {
+        background: "Pozadí",
+      },
+      predefinedColors: predefinedColors,
+      colors: predefinedColors.blackBackground.colors,
+      autoRedraw: false,
+    };
+  },
+  async created() {
+    await loadCanvasStorage(this);
+  },
+  methods: {
+    async reloadCanvasProperties() {
+      const canvasProperties = {
+        personImage: this.personImage,
+        mainText: this.mainText,
+        contractedBy: this.contractedBy,
+        colors: this.colors,
+      };
+
+      await this.$refs.canvas.redraw(canvasProperties);
+
+      let canvasPropertiesToSave = structuredClone(toRawDeep(canvasProperties));
+      delete canvasPropertiesToSave.colors;
+
+      setCanvasStorage(canvasPropertiesToSave);
+    },
+  },
+  mounted() {
+    this.$watch(
+      (vm) => [vm.personImage, vm.mainText, vm.contractedBy, vm.colors],
+      async (value) => {
+        if (this.autoRedraw) {
+          await this.reloadCanvasProperties();
+        }
+      },
+      {
+        immediate: true,
+        deep: true,
+      },
+    );
+
+    this.$watch(
+      (vm) => [vm.autoRedraw],
+      async (value) => {
+        updateAutoRedrawStorage(this.autoRedraw);
+
+        if (this.autoRedraw) {
+          await this.reloadCanvasProperties();
+        }
+      },
+    );
+  },
+};
+</script>
+
+<template>
+  <header>
+    <Navbar :defaultTemplate="TEMPLATES.angle_person_event_right"></Navbar>
+  </header>
+  <main>
+    <MainContainer>
+      <template v-slot:left>
+        <Canvas
+          ref="canvas"
+          :redrawFunction="redraw"
+          width="1702"
+          height="630"
+        />
+      </template>
+
+      <template v-slot:right>
+        <ReloadButton :parentRefs="$refs" @click="reloadCanvasProperties" />
+        <AutoReloadCheckbox v-model="autoRedraw" />
+
+        <ImageInput
+          name="Obrázek"
+          v-model="personImage"
+          :important="true"
+          zIndex="10"
+        />
+
+        <LongTextInput
+          name="Text"
+          v-model="mainText"
+          :important="true"
+          :highlightable="true"
+          zIndex="9"
+        />
+
+        <MultipleColorPicker
+          name="Barvy"
+          v-model="colors"
+          :important="false"
+          :colorLabels="colorLabels"
+          :predefinedColors="predefinedColors"
+          :defaultPredefinedColors="predefinedColors.blackBackground"
+          zIndex="5"
+        ></MultipleColorPicker>
+
+        <ShortTextInput
+          name="Zadavatel a zpracovatel"
+          v-model="contractedBy"
+          :defaultValue="DEFAULT_CONTRACTOR"
+          :important="false"
+          zIndex="4"
+        />
+      </template>
+    </MainContainer>
+  </main>
+</template>
+
+<style>
+@import "vue-select/dist/vue-select.css";
+</style>

frontend/src/views/angle_person_event_right/canvas.js

+import { fabric } from "fabric";
+import {
+  clearObjects,
+  sortObjects,
+  transformHighlightedText,
+  checkTextBoxHeight,
+} from "../../components/canvas/utils";
+import COLORS from "../../colors";
+import { PaddedHighlightingTextbox } from "../../components/canvas/textbox";
+
+import bgImageSourceBlack from "../../assets/template/angle_person_event_right/bg_black.png";
+import bgImageSourceWhite from "../../assets/template/angle_person_event_right/bg_white.png";
+
+let mainImage = null;
+let personImage = null;
+let contractedByTextbox = null;
+let previousColor = null;
+let mainTextBox = null;
+
+let personImageSource = null;
+
+const removeDownEventListener = () => {
+  document
+    .getElementsByClassName("upper-canvas")[0]
+    .removeEventListener("pointerdown", canvasPointerDownEvent);
+};
+
+let upEventFunction = null;
+let canvasPointerDownEvent = null;
+let pointerDownEventAssigned = false;
+
+const redraw = async (canvas, options) => {
+  clearObjects([contractedByTextbox, mainTextBox], canvas);
+
+  const contractedByTextSize = Math.ceil(canvas.height * 0.035);
+  const contractedByTextMaxWidth = Math.ceil(canvas.width * 0.9);
+  const contractedByTextBottomMargin = Math.ceil(canvas.width * 0.02);
+  const contractedByTextSideMargin = Math.ceil(canvas.width * 0.03);
+
+  const textMarginLeft = Math.ceil(canvas.width * 0.52);
+  const textMarginRight = Math.ceil(canvas.width * 0.1);
+
+  let mainTextMarginTop = Math.ceil(canvas.height * 0.185);
+  const mainTextBackgroundMarginTop = Math.ceil(canvas.height * 0.14);
+  const mainTextSize = Math.ceil(canvas.height * 0.22);
+  const mainTextHeightLimit = Math.ceil(mainTextSize * 2.2);
+  const mainTextLineHeight = 0.85;
+
+  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 Person image render */
+
+  if (
+    options.personImage !== null &&
+    (!canvas.contains(personImage) ||
+      personImage === null ||
+      options.personImage.src !== personImageSource)
+  ) {
+    if (personImage !== null) {
+      canvas.remove(personImage);
+    }
+
+    personImage = new fabric.Image(options.personImage, {
+      left: 0,
+      top: 0,
+      zIndex: 0,
+    });
+
+    personImage.controls = {
+      ...fabric.Image.prototype.controls,
+      mtr: new fabric.Control({ visible: false }),
+    };
+
+    if (personImage.width >= personImage.height) {
+      personImage.scaleToHeight(canvas.height);
+    } else {
+      personImage.scaleToWidth(canvas.width);
+    }
+
+    canvas.add(personImage);
+    personImageSource = options.personImage.src;
+    // canvas.centerObject(personImage)
+
+    removeDownEventListener();
+    pointerDownEventAssigned = false;
+  } else if (personImage !== null && options.personImage === null) {
+    canvas.remove(personImage);
+
+    removeDownEventListener();
+    pointerDownEventAssigned = false;
+  }
+
+  /* END Person image render */
+
+  /* BEGIN Main image render */
+
+  if (previousColor !== options.colors.background || mainImage === null) {
+    if (mainImage !== null) {
+      canvas.remove(mainImage);
+    }
+
+    const image = new Image();
+
+    const imageLoadPromise = new Promise((resolve) => {
+      image.onload = () => {
+        resolve();
+      };
+
+      if (options.colors.background.value === COLORS.black.value) {
+        image.src = bgImageSourceBlack;
+      } else {
+        image.src = bgImageSourceWhite;
+      }
+    });
+    await imageLoadPromise;
+
+    mainImage = new fabric.Image(image, {
+      left: 0,
+      top: 0,
+      zIndex: 5,
+      selectable: false,
+    });
+
+    mainImage.scaleToWidth(canvas.width);
+
+    canvas.add(mainImage);
+
+    previousColor = options.colors.background;
+  }
+
+  /* END Main image render */
+
+  if (options.mainText !== null) {
+    /* BEGIN Name text render */
+
+    const mainTextWidth = canvas.width - textMarginLeft - textMarginRight;
+
+    const highlightedData = transformHighlightedText(
+      options.mainText,
+      mainTextSize,
+      mainTextWidth,
+      "Bebas Neue",
+      options.colors.highlight.value,
+      options.colors.highlightedText.value,
+      { padWhenDiacritics: true },
+    );
+
+    mainTextBox = new PaddedHighlightingTextbox(highlightedData.text, {
+      width: canvas.width,
+      left: textMarginLeft,
+      textAlign: "left",
+      fontFamily: "Bebas Neue",
+      fontSize: mainTextSize,
+      lineHeight: mainTextLineHeight,
+      fill: options.colors.mainText.value,
+      styles: highlightedData.styles,
+      selectable: false,
+      highlightPadding: canvas.height * 0.003,
+      zIndex: 10,
+    });
+
+    checkTextBoxHeight(mainTextBox, 3);
+
+    canvas.add(mainTextBox);
+
+    mainTextBox.top = mainTextMarginTop - highlightedData.paddingBottom;
+
+    canvas.renderAll();
+
+    /* END Main text render */
+  }
+
+  /* BEGIN Contracted by render */
+
+  if (options.contractedBy !== null) {
+    contractedByTextbox = new fabric.Textbox(options.contractedBy, {
+      left:
+        canvas.width - contractedByTextMaxWidth - contractedByTextSideMargin,
+      top: canvas.height - contractedByTextBottomMargin - contractedByTextSize,
+      width: contractedByTextMaxWidth,
+      fontFamily: "Roboto Condensed",
+      fontSize: contractedByTextSize,
+      textAlign: "right",
+      fill: options.colors.contractedByText.value,
+      selectable: false,
+      zIndex: 10,
+    });
+
+    checkTextBoxHeight(contractedByTextbox, 1);
+
+    canvas.add(contractedByTextbox);
+  }
+
+  /* END Contracted by render */
+
+  sortObjects(canvas);
+
+  canvasPointerDownEvent = (event) => {
+    let activeObject = canvas.getActiveObject();
+
+    if (activeObject === null) {
+      return;
+    }
+
+    // if (activeObject._element.src == mainImage._element.src) {
+    // return
+    // }
+
+    canvas.remove(mainImage);
+    canvas.remove(mainTextBox);
+    mainImage = null;
+    mainTextBox = 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/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 { toRawDeep } from "../../utils";
 </script>
 
 <script>
@@ -29,6 +31,11 @@ export default {
         mainImage: this.mainImage,
       };
 
+      let canvasPropertiesToSave = structuredClone(toRawDeep(canvasProperties));
+      delete canvasPropertiesToSave.colors;
+
+      setCanvasStorage(canvasPropertiesToSave);
+
       await this.$refs.canvas.redraw(canvasProperties);
     },
   },

frontend/src/views/base_person_event/BasePersonEvent.vue

+<script setup>
+import { watch, ref } from "vue";
+
+import COLORS from "../../colors";
+import TEMPLATES from "../../templates";
+import DEFAULT_CONTRACTOR from "../../contractors";
+import {
+  loadFonts,
+  loadCanvasStorage,
+  setCanvasStorage,
+  updateAutoRedrawStorage,
+  toRawDeep,
+} from "../../utils";
+
+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";
+import LongTextInput from "../../components/inputs/text/LongTextInput.vue";
+import ShortTextInput from "../../components/inputs/text/ShortTextInput.vue";
+import MultipleColorPicker from "../../components/inputs/colors/MultipleColorPicker.vue";
+import ReloadButton from "../../components/reload/ReloadButton.vue";
+import AutoReloadCheckbox from "../../components/reload/AutoReloadCheckbox.vue";
+</script>
+
+<script>
+await loadFonts(["12px Bebas Neue", "12px Roboto Condensed"]);
+
+export default {
+  components: {
+    Canvas,
+    Navbar,
+    MainContainer,
+    ImageInput,
+    LongTextInput,
+    ShortTextInput,
+    MultipleColorPicker,
+    AutoReloadCheckbox,
+    ReloadButton,
+  },
+  data() {
+    const predefinedColors = {
+      blackBackground: {
+        name: "Černé pozadí, černý text",
+        colors: {
+          background: COLORS.black,
+          mainText: COLORS.black,
+          highlightedText: COLORS.black,
+          highlight: COLORS.yellow1,
+          contractedByText: COLORS.gray1,
+        },
+      },
+      whiteBackground: {
+        name: "Bílé pozadí, bílý text",
+        colors: {
+          background: COLORS.white,
+          mainText: COLORS.white,
+          highlightedText: COLORS.black,
+          highlight: COLORS.yellow1,
+          contractedByText: COLORS.gray1,
+        },
+      },
+    };
+
+    return {
+      personImage: null,
+      mainText: null,
+      contractedBy: DEFAULT_CONTRACTOR,
+      gradientHeightMultiplier: 1,
+      colorLabels: {
+        background: "Pozadí",
+      },
+      predefinedColors: predefinedColors,
+      colors: predefinedColors.blackBackground.colors,
+      autoRedraw: false,
+    };
+  },
+  async created() {
+    await loadCanvasStorage(this);
+  },
+  methods: {
+    async reloadCanvasProperties() {
+      const canvasProperties = {
+        personImage: this.personImage,
+        mainText: this.mainText,
+        contractedBy: this.contractedBy,
+        colors: this.colors,
+      };
+
+      await this.$refs.canvas.redraw(canvasProperties);
+
+      let canvasPropertiesToSave = structuredClone(toRawDeep(canvasProperties));
+      delete canvasPropertiesToSave.colors;
+
+      setCanvasStorage(canvasPropertiesToSave);
+    },
+  },
+  mounted() {
+    this.$watch(
+      (vm) => [vm.personImage, vm.mainText, vm.contractedBy, vm.colors],
+      async (value) => {
+        if (this.autoRedraw) {
+          await this.reloadCanvasProperties();
+        }
+      },
+      {
+        immediate: true,
+        deep: true,
+      },
+    );
+
+    this.$watch(
+      (vm) => [vm.autoRedraw],
+      async (value) => {
+        updateAutoRedrawStorage(this.autoRedraw);
+
+        if (this.autoRedraw) {
+          await this.reloadCanvasProperties();
+        }
+      },
+    );
+  },
+};
+</script>
+
+<template>
+  <header>
+    <Navbar :defaultTemplate="TEMPLATES.base_person_event"></Navbar>
+  </header>
+  <main>
+    <MainContainer>
+      <template v-slot:left>
+        <Canvas
+          ref="canvas"
+          :redrawFunction="redraw"
+          width="1702"
+          height="630"
+        />
+      </template>
+
+      <template v-slot:right>
+        <ReloadButton :parentRefs="$refs" @click="reloadCanvasProperties" />
+        <AutoReloadCheckbox v-model="autoRedraw" />
+
+        <ImageInput
+          name="Obrázek"
+          v-model="personImage"
+          :important="true"
+          zIndex="10"
+        />
+
+        <LongTextInput
+          name="Text"
+          v-model="mainText"
+          :important="true"
+          :highlightable="true"
+          zIndex="9"
+        />
+
+        <MultipleColorPicker
+          name="Barvy"
+          v-model="colors"
+          :important="false"
+          :colorLabels="colorLabels"
+          :predefinedColors="predefinedColors"
+          :defaultPredefinedColors="predefinedColors.blackBackground"
+          zIndex="5"
+        ></MultipleColorPicker>
+
+        <ShortTextInput
+          name="Zadavatel a zpracovatel"
+          v-model="contractedBy"
+          :defaultValue="DEFAULT_CONTRACTOR"
+          :important="false"
+          zIndex="4"
+        />
+      </template>
+    </MainContainer>
+  </main>
+</template>
+
+<style>
+@import "vue-select/dist/vue-select.css";
+</style>