Add another banner

frontend/src/templates.js

@@ -76,6 +76,15 @@ const TEMPLATES = {
       title: "A2 - Máte přání tour banner na soc. sítě",
     },
   },
+  make_a_wish_tour_social_wide: {
+    name: "Široký banner - Máte přání tour banner na soc. sítě",
+    image: makeawishTourSocialImage,
+    path: "/make-a-wish-tour-social-wide",
+    component: () => import("./views/make_a_wish_tour_social_wide/MakeAWishTourSocialWide.vue"),
+    meta: {
+      title: "Široký banner - Máte přání tour banner na soc. sítě",
+    },
+  },
   back_in_full_force_banner: {
     name: "Zpátky v plné síle banner",
     image: backInFullForcePhotoBannerImage,
@@ -103,6 +112,15 @@ const TEMPLATES = {
       title: "A2 - Zpátky v plné síle tour banner na soc. sítě",
     },
   },
+  back_in_full_force_tour_social_wide: {
+    name: "Široký banner - Zpátky v plné síle tour na soc. sítě",
+    image: backInFullForceTourSocialImage,
+    path: "/back-in-full-force-tour-social-wide",
+    component: () => import("./views/back_in_full_force_tour_social_wide/BackInFullForceTourSocialWide.vue"),
+    meta: {
+      title: "Široký banner - Zpátky v plné síle tour na soc. sítě",
+    },
+  },
   urgent_text_banner: {
     name: "Urgentní banner pouze s textem",
     image: urgentTextBannerImage,

frontend/src/views/back_in_full_force_tour_social_wide/BackInFullForceTourSocialWide.vue

+<script setup>
+import { watch, ref } from "vue";
+
+import COLORS from "../../colors";
+import PEOPLE from "../../people";
+import TEMPLATES from "../../templates";
+import DEFAULT_CONTRACTOR from "../../contractors";
+import {
+  loadFonts,
+  loadCanvasStorage,
+  setCanvasStorage,
+  updateAutoRedrawStorage,
+} 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 RangeInput from "../../components/inputs/RangeInput.vue";
+import InputSeparator from "../../components/inputs/InputSeparator.vue";
+import SelectInput from "../../components/inputs/SelectInput.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",
+  "bold 12px Roboto Condensed",
+]);
+
+export default {
+  components: {
+    Canvas,
+    Navbar,
+    MainContainer,
+    ImageInput,
+    LongTextInput,
+    ShortTextInput,
+    RangeInput,
+    SelectInput,
+    InputSeparator,
+    MultipleColorPicker,
+  },
+  data() {
+    const predefinedColors = {
+      base: {
+        name: "Černé pozadí",
+        colors: {
+          background: COLORS.black,
+          highlight: COLORS.yellow1,
+          baseText: COLORS.white,
+          nameText: COLORS.yellow1,
+          highlightedText: COLORS.black,
+          contractedByText: COLORS.gray1,
+        },
+      },
+      white: {
+        name: "Bílé pozadí",
+        colors: {
+          background: COLORS.white,
+          highlight: COLORS.yellow1,
+          baseText: COLORS.black,
+          nameText: COLORS.black,
+          highlightedText: COLORS.black,
+          contractedByText: COLORS.gray1,
+        },
+      },
+    };
+
+    return {
+      mainImage: null,
+      mainText: null,
+
+      dateText: null,
+      timeText: null,
+      locationText: null,
+      attendeesText: null,
+
+      personName: null,
+      personPosition: null,
+      contractedBy: DEFAULT_CONTRACTOR,
+      colorLabels: {
+        background: "Pozadí",
+        highlight: "Zvýraznění",
+        baseText: "Město",
+        highlightedText: "Zvýrazněný text",
+      },
+      predefinedColors: predefinedColors,
+      colors: predefinedColors.base.colors,
+      autoRedraw: false,
+    };
+  },
+  async created() {
+    await loadCanvasStorage(this);
+  },
+  methods: {
+    async reloadCanvasProperties() {
+      const canvasProperties = {
+        mainImage: this.mainImage,
+        mainText: this.mainText,
+
+        dateText: this.dateText,
+        timeText: this.timeText,
+        locationText: this.locationText,
+        attendeesText: this.attendeesText,
+
+        personName: this.personName,
+        personPosition: this.personPosition,
+        contractedBy: this.contractedBy,
+        colors: this.colors,
+      };
+
+      if (canvasProperties.mainText) {
+        window.fileName = canvasProperties.mainText;
+      }
+
+      await this.$refs.canvas.redraw(canvasProperties);
+
+      delete canvasProperties.colors;
+      setCanvasStorage(canvasProperties);
+    },
+  },
+  mounted() {
+    this.$watch(
+      (vm) => [
+        vm.mainImage,
+        vm.mainText,
+        vm.dateText,
+        vm.timeText,
+        vm.locationText,
+        vm.attendeesText,
+        vm.personName,
+        vm.personPosition,
+        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.basic_photo_banner"></Navbar>
+  </header>
+  <main>
+    <MainContainer>
+      <template v-slot:left>
+        <Canvas
+          ref="canvas"
+          :redrawFunction="redraw"
+          width="1920"
+          height="1080"
+        />
+      </template>
+
+      <template v-slot:right>
+        <ReloadButton :parentRefs="$refs" @click="reloadCanvasProperties" />
+        <AutoReloadCheckbox v-model="autoRedraw" />
+        <ImageInput
+          name="Obrázek"
+          v-model="mainImage"
+          :important="true"
+          zIndex="10"
+        />
+        <LongTextInput
+          name="Město konání akce"
+          v-model="mainText"
+          :important="true"
+          :highlightable="true"
+          zIndex="9"
+        />
+
+        <ShortTextInput
+          name="Datum akce"
+          v-model="dateText"
+          :important="true"
+          zIndex="8"
+        />
+
+        <ShortTextInput
+          name="Čas akce"
+          v-model="timeText"
+          :important="true"
+          zIndex="7"
+        />
+
+        <LongTextInput
+          name="Účastníci akce"
+          v-model="attendeesText"
+          :important="true"
+          zIndex="6"
+        />
+
+        <LongTextInput
+          name="Přesné místo konání akce"
+          v-model="locationText"
+          :important="true"
+          zIndex="6"
+        />
+
+        <InputSeparator />
+
+        <MultipleColorPicker
+          name="Barvy"
+          v-model="colors"
+          :important="false"
+          :colorLabels="colorLabels"
+          :predefinedColors="predefinedColors"
+          :defaultPredefinedColors="predefinedColors.base"
+          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/back_in_full_force_tour_social_wide/canvas.js

+import { fabric } from "fabric";
+import {
+  clearObjects,
+  sortObjects,
+  transformHighlightedText,
+  checkTextBoxHeight,
+} from "../../components/canvas/utils";
+import { PaddedHighlightingTextbox } from "../../components/canvas/textbox";
+import backgroundURL from "../../assets/template/back_in_full_force_tour_social_wide/background.png";
+import backgroundURLInverted from "../../assets/template/make_a_wish_banner/background_inverted.png";
+import COLORS from "../../colors";
+
+let mainTextBox = null;
+
+let attendeesTextBox = null;
+let dateTextBox = null;
+let timeTextBox = null;
+let locationTextBox = null;
+
+let mainImage = null;
+let backgroundImage = null;
+let previousBackgroundImageColor = null;
+
+let contractedByTextbox = null;
+
+let mainImageSource = 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(
+    [
+      mainTextBox,
+      contractedByTextbox,
+      attendeesTextBox,
+      dateTextBox,
+      timeTextBox,
+      locationTextBox
+    ],
+    canvas,
+  );
+
+  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;
+
+  const textMarginLeft = Math.ceil(canvas.width * 0.1);
+  const textMarginRight = Math.ceil(canvas.width * 0.078);
+
+  let mainTextMarginBottom = Math.ceil(canvas.height * 0.3) + Math.ceil(canvas.height * 0.13);
+  const dateTextMarginBottom = Math.ceil(canvas.height * 0.605) + Math.ceil(canvas.height * 0.305);
+  const timeTextBoxMarginBottom = Math.ceil(canvas.height * 0.535) + Math.ceil(canvas.height * 0.312);
+  const locationTextBoxMarginBottom = Math.ceil(canvas.height * 0.27) + Math.ceil(canvas.height * 0.12);
+  const attendeesTextBoxMarginBottom = Math.ceil(canvas.height * 0.09) + Math.ceil(canvas.height * 0.065);
+
+  const mainTextSize = Math.ceil(canvas.height * 0.175);
+  const mainTextLineHeight = 1;
+
+  const dateTextSize = Math.ceil(canvas.height * 0.046);
+  const timeTextSize = Math.ceil(canvas.height * 0.04);
+  const attendeesTextSize = Math.ceil(canvas.height * 0.027);
+  const attendeesTextLineHeight = 1;
+
+  const locationTextSize = Math.ceil(canvas.height * 0.044);
+  const locationTextLineHeight = 1;
+
+  const contractedByTextSize = Math.ceil(canvas.height * 0.015);
+  const contractedByTextMaxWidth = Math.ceil(canvas.width * 0.9);
+  const contractedByTextSidesMargin = Math.ceil(canvas.width * 0.03);
+
+  if (options.dateText !== null) {
+    /* BEGIN Date text render */
+
+    const dateTextWidth = canvas.width * 5; // IDFK
+
+    console.log(options);
+
+    const highlightedData = transformHighlightedText(
+      options.dateText,
+      mainTextSize,
+      dateTextWidth,
+      "Bebas Neue",
+      options.colors.highlightedText.value,
+      options.colors.highlight.value,
+      { padWhenDiacritics: false, invertHighlight: true },
+    );
+
+    dateTextBox = new PaddedHighlightingTextbox(highlightedData.text, {
+      width: canvas.width,
+      left: 0,
+      textAlign: "right",
+      fontFamily: "Bebas Neue",
+      fontSize: dateTextSize,
+      fill: options.colors.baseText.value,
+      styles: highlightedData.styles,
+      selectable: false,
+      highlightPadding: canvas.height * 0.003,
+      zIndex: 20,
+    });
+
+    checkTextBoxHeight(dateTextBox, 1);
+
+    canvas.add(dateTextBox);
+
+    const dateTextBoxTop =
+      canvas.height - dateTextBox.height - dateTextMarginBottom;
+
+      dateTextBox.top = dateTextBoxTop - highlightedData.paddingBottom;
+
+    const dateTextBoxLeft =
+      canvas.width - dateTextBox.width - textMarginRight;
+
+      dateTextBox.left = dateTextBoxLeft;
+
+    canvas.renderAll();
+
+    /* END Date text render */
+  }
+
+  if (options.timeText !== null) {
+    /* BEGIN Time text render */
+
+    const timeTextWidth = canvas.width * 5; // IDFK
+
+    const highlightedData = transformHighlightedText(
+      options.timeText,
+      timeTextSize,
+      timeTextWidth,
+      "Bebas Neue",
+      options.colors.highlightedText.value,
+      options.colors.highlight.value,
+      { padWhenDiacritics: false, invertHighlight: true },
+    );
+
+    timeTextBox = new PaddedHighlightingTextbox(highlightedData.text, {
+      width: canvas.width,
+      left: 0,
+      textAlign: "right",
+      fontFamily: "Bebas Neue",
+      fontSize: timeTextSize,
+      fill: options.colors.baseText.value,
+      styles: highlightedData.styles,
+      selectable: false,
+      highlightPadding: canvas.height * 0.003,
+      zIndex: 20,
+    });
+
+    checkTextBoxHeight(timeTextBox, 1);
+
+    canvas.add(timeTextBox);
+
+    const timeTextBoxTop =
+      canvas.height - timeTextBox.height - timeTextBoxMarginBottom;
+
+    timeTextBox.top = timeTextBoxTop - highlightedData.paddingBottom;
+
+    const timeTextBoxLeft =
+      canvas.width - timeTextBox.width - textMarginRight;
+
+    timeTextBox.left = timeTextBoxLeft;
+
+    canvas.renderAll();
+
+    /* END Time text render */
+  }
+
+  if (options.locationText !== null) {
+    /* BEGIN Location text render */
+
+    const locationTextWidth = canvas.width - textMarginLeft - textMarginRight;
+
+    const highlightedData = transformHighlightedText(
+      options.locationText,
+      locationTextSize,
+      locationTextWidth,
+      "Bebas Neue",
+      options.colors.highlightedText.value,
+      options.colors.highlight.value,
+      { padWhenDiacritics: false, invertHighlight: true },
+    );
+
+    locationTextBox = new PaddedHighlightingTextbox(highlightedData.text, {
+      width: canvas.width,
+      left: 0,
+      textAlign: "right",
+      fontFamily: "Bebas Neue",
+      fontSize: locationTextSize,
+      fill: options.colors.baseText.value,
+      styles: highlightedData.styles,
+      lineHeight: locationTextLineHeight,
+      selectable: false,
+      highlightPadding: canvas.height * 0.003,
+      zIndex: 20,
+    });
+
+    checkTextBoxHeight(locationTextBox, 2);
+
+    canvas.add(locationTextBox);
+
+    canvas.renderAll();
+
+    const locationTextBoxTop =
+      canvas.height - locationTextBox.height - locationTextBoxMarginBottom + (locationTextSize * locationTextLineHeight * (locationTextBox.textLines.length - 1));
+
+    locationTextBox.top = locationTextBoxTop - highlightedData.paddingBottom;
+
+    const locationTextBoxLeft =
+      canvas.width - locationTextBox.width - textMarginRight;
+
+    locationTextBox.left = locationTextBoxLeft;
+
+    canvas.renderAll();
+
+    /* END Location text render */
+  }
+
+  if (options.attendeesText !== null) {
+    /* BEGIN Attendees text render */
+
+    const attendeesTextWidth = canvas.width - textMarginLeft - textMarginRight;
+
+    const highlightedData = transformHighlightedText(
+      options.attendeesText,
+      attendeesTextSize,
+      attendeesTextWidth,
+      "Roboto Condensed",
+      options.colors.highlightedText.value,
+      options.colors.highlight.value,
+      { padWhenDiacritics: false, invertHighlight: true },
+    );
+
+    attendeesTextBox = new PaddedHighlightingTextbox(highlightedData.text, {
+      width: canvas.width,
+      left: 0,
+      textAlign: "right",
+      fontFamily: "Roboto Condensed",
+      fontSize: attendeesTextSize,
+      fill: options.colors.baseText.value,
+      styles: highlightedData.styles,
+      selectable: false,
+      highlightPadding: canvas.height * 0.003,
+      zIndex: 20,
+    });
+
+    checkTextBoxHeight(attendeesTextBox, 3);
+
+    canvas.add(attendeesTextBox);
+
+    const attendeesTextBoxTop =
+      canvas.height - attendeesTextBox.height - attendeesTextBoxMarginBottom + (attendeesTextSize * attendeesTextLineHeight * (attendeesTextBox.textLines.length - 1)) + ((3 - attendeesTextBox.textLines.length - 1) * attendeesTextSize * attendeesTextLineHeight);
+
+    attendeesTextBox.top = attendeesTextBoxTop - highlightedData.paddingBottom;
+
+    const attendeesTextBoxLeft =
+      canvas.width - attendeesTextBox.width - textMarginRight;
+
+      attendeesTextBox.left = attendeesTextBoxLeft;
+
+    canvas.renderAll();
+
+    /* END Attendees text render */
+  }
+
+  if (options.mainText !== null) {
+    /* BEGIN Background render */
+
+    if (backgroundImage === null || options.colors.background.value != previousBackgroundImageColor.value || !canvas.getObjects().includes(backgroundImage)) {
+      backgroundImage = new Image();
+
+      await new Promise((resolve) => {
+        backgroundImage.onload = () => {
+          resolve();
+        };
+
+        if (options.colors.background.value == COLORS.black.value) {
+          backgroundImage.src = backgroundURL;
+        } else {
+          backgroundImage.src = backgroundURLInverted;
+        }
+      });
+
+      backgroundImage = new fabric.Image(backgroundImage, {
+        top: 0,
+        left: 0,
+        zIndex: 10,
+        selectable: false,
+      });
+      backgroundImage.scaleToHeight(canvas.height);
+
+      previousBackgroundImageColor = options.colors.background;
+
+      canvas.add(backgroundImage);
+    }
+
+    /* END Background render */
+
+
+    /* BEGIN Main text render */
+
+    const mainTextWidth = canvas.width - textMarginLeft - textMarginRight;
+
+    const highlightedData = transformHighlightedText(
+      options.mainText,
+      mainTextSize,
+      mainTextWidth,
+      "Bebas Neue",
+      options.colors.highlightedText.value,
+      options.colors.highlight.value,
+      { padWhenDiacritics: false, invertHighlight: true },
+    );
+
+    mainTextBox = new PaddedHighlightingTextbox(highlightedData.text, {
+      width: canvas.width,
+      left: 0,
+      textAlign: "right",
+      fontFamily: "Bebas Neue",
+      fontSize: mainTextSize,
+      lineHeight: mainTextLineHeight,
+      fill: options.colors.highlight.value,
+      styles: highlightedData.styles,
+      selectable: false,
+      highlightPadding: canvas.height * 0.003,
+      zIndex: 20,
+    });
+
+    checkTextBoxHeight(mainTextBox, 1);
+
+    canvas.add(mainTextBox);
+
+    const mainTextBoxTop =
+      canvas.height - mainTextBox.height - mainTextMarginBottom;
+
+    mainTextBox.top = mainTextBoxTop - highlightedData.paddingBottom;
+
+    const mainTextBoxLeft =
+      canvas.width - mainTextBox.width - textMarginRight;
+
+    mainTextBox.left = mainTextBoxLeft;
+
+    canvas.renderAll();
+
+    /* END Main text render */
+  }
+
+  /* BEGIN Contracted by render */
+
+  if (options.contractedBy !== null) {
+    contractedByTextbox = new fabric.Textbox(options.contractedBy, {
+      left: contractedByTextSidesMargin,
+      top: contractedByTextSidesMargin,
+      width: contractedByTextMaxWidth,
+      fontFamily: "Roboto Condensed",
+      fontSize: contractedByTextSize,
+      textAlign: "left",
+      fill: options.colors.contractedByText.value,
+      selectable: false,
+      zIndex: 20,
+    });
+
+    checkTextBoxHeight(contractedByTextbox, 1);
+
+    canvas.add(contractedByTextbox);
+  }
+
+  /* END Contracted by render */
+
+  /* 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;
+    // canvas.centerObject(mainImage)
+  } else if (mainImage !== null && options.mainImage === null) {
+    canvas.remove(mainImage);
+  }
+
+  /* END Main image render */
+
+  sortObjects(canvas);
+
+  canvasPointerDownEvent = (event) => {
+    let activeObject = canvas.getActiveObject();
+
+    if (activeObject === null) {
+      return;
+    }
+
+    // if (activeObject._element.src == mainImage._element.src) {
+    // return
+    // }
+
+    canvas.remove(backgroundImage);
+    backgroundImage = null;
+  };
+
+  if (!pointerDownEventAssigned) {
+    document
+      .getElementsByClassName("upper-canvas")[0]
+      .addEventListener("pointerdown", canvasPointerDownEvent);
+
+    pointerDownEventAssigned = true;
+  }
+
+  const colors = {...options.colors};
+
+  upEventFunction = (event) => {
+    redraw(canvas, {...options, colors: colors});
+  };
+
+  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/make_a_wish_tour_social_wide/MakeAWishTourSocialWide.vue

+<script setup>
+import { watch, ref } from "vue";
+
+import COLORS from "../../colors";
+import PEOPLE from "../../people";
+import TEMPLATES from "../../templates";
+import DEFAULT_CONTRACTOR from "../../contractors";
+import {
+  loadFonts,
+  loadCanvasStorage,
+  setCanvasStorage,
+  updateAutoRedrawStorage,
+} 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 RangeInput from "../../components/inputs/RangeInput.vue";
+import InputSeparator from "../../components/inputs/InputSeparator.vue";
+import SelectInput from "../../components/inputs/SelectInput.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",
+  "bold 12px Roboto Condensed",
+]);
+
+export default {
+  components: {
+    Canvas,
+    Navbar,
+    MainContainer,
+    ImageInput,
+    LongTextInput,
+    ShortTextInput,
+    RangeInput,
+    SelectInput,
+    InputSeparator,
+    MultipleColorPicker,
+  },
+  data() {
+    const predefinedColors = {
+      base: {
+        name: "Černé pozadí",
+        colors: {
+          background: COLORS.black,
+          highlight: COLORS.yellow1,
+          baseText: COLORS.white,
+          nameText: COLORS.yellow1,
+          highlightedText: COLORS.black,
+          contractedByText: COLORS.gray1,
+        },
+      },
+      white: {
+        name: "Bílé pozadí",
+        colors: {
+          background: COLORS.white,
+          highlight: COLORS.yellow1,
+          baseText: COLORS.black,
+          nameText: COLORS.black,
+          highlightedText: COLORS.black,
+          contractedByText: COLORS.gray1,
+        },
+      },
+    };
+
+    return {
+      mainImage: null,
+      mainText: null,
+
+      dateText: null,
+      timeText: null,
+      locationText: null,
+      attendeesText: null,
+
+      personName: null,
+      personPosition: null,
+      contractedBy: DEFAULT_CONTRACTOR,
+      colorLabels: {
+        background: "Pozadí",
+        highlight: "Zvýraznění",
+        baseText: "Město",
+        highlightedText: "Zvýrazněný text",
+      },
+      predefinedColors: predefinedColors,
+      colors: predefinedColors.base.colors,
+      autoRedraw: false,
+    };
+  },
+  async created() {
+    await loadCanvasStorage(this);
+  },
+  methods: {
+    async reloadCanvasProperties() {
+      const canvasProperties = {
+        mainImage: this.mainImage,
+        mainText: this.mainText,
+
+        dateText: this.dateText,
+        timeText: this.timeText,
+        locationText: this.locationText,
+        attendeesText: this.attendeesText,
+
+        personName: this.personName,
+        personPosition: this.personPosition,
+        contractedBy: this.contractedBy,
+        colors: this.colors,
+      };
+
+      if (canvasProperties.mainText) {
+        window.fileName = canvasProperties.mainText;
+      }
+
+      await this.$refs.canvas.redraw(canvasProperties);
+
+      delete canvasProperties.colors;
+      setCanvasStorage(canvasProperties);
+    },
+  },
+  mounted() {
+    this.$watch(
+      (vm) => [
+        vm.mainImage,
+        vm.mainText,
+        vm.dateText,
+        vm.timeText,
+        vm.locationText,
+        vm.attendeesText,
+        vm.personName,
+        vm.personPosition,
+        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.basic_photo_banner"></Navbar>
+  </header>
+  <main>
+    <MainContainer>
+      <template v-slot:left>
+        <Canvas
+          ref="canvas"
+          :redrawFunction="redraw"
+          width="1920"
+          height="1080"
+        />
+      </template>
+
+      <template v-slot:right>
+        <ReloadButton :parentRefs="$refs" @click="reloadCanvasProperties" />
+        <AutoReloadCheckbox v-model="autoRedraw" />
+        <ImageInput
+          name="Obrázek"
+          v-model="mainImage"
+          :important="true"
+          zIndex="10"
+        />
+        <LongTextInput
+          name="Město konání akce"
+          v-model="mainText"
+          :important="true"
+          :highlightable="true"
+          zIndex="9"
+        />
+
+        <ShortTextInput
+          name="Datum akce"
+          v-model="dateText"
+          :important="true"
+          zIndex="8"
+        />
+
+        <ShortTextInput
+          name="Čas akce"
+          v-model="timeText"
+          :important="true"
+          zIndex="7"
+        />
+
+        <LongTextInput
+          name="Účastníci akce"
+          v-model="attendeesText"
+          :important="true"
+          zIndex="6"
+        />
+
+        <LongTextInput
+          name="Přesné místo konání akce"
+          v-model="locationText"
+          :important="true"
+          zIndex="6"
+        />
+
+        <InputSeparator />
+
+        <MultipleColorPicker
+          name="Barvy"
+          v-model="colors"
+          :important="false"
+          :colorLabels="colorLabels"
+          :predefinedColors="predefinedColors"
+          :defaultPredefinedColors="predefinedColors.base"
+          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/make_a_wish_tour_social_wide/canvas.js

+import { fabric } from "fabric";
+import {
+  clearObjects,
+  sortObjects,
+  transformHighlightedText,
+  checkTextBoxHeight,
+} from "../../components/canvas/utils";
+import { PaddedHighlightingTextbox } from "../../components/canvas/textbox";
+import backgroundURL from "../../assets/template/make_a_wish_tour_social_wide/background.png";
+import backgroundURLInverted from "../../assets/template/make_a_wish_banner/background_inverted.png";
+import COLORS from "../../colors";
+
+let mainTextBox = null;
+
+let attendeesTextBox = null;
+let dateTextBox = null;
+let timeTextBox = null;
+let locationTextBox = null;
+
+let mainImage = null;
+let backgroundImage = null;
+let previousBackgroundImageColor = null;
+
+let contractedByTextbox = null;
+
+let mainImageSource = 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(
+    [
+      mainTextBox,
+      contractedByTextbox,
+      attendeesTextBox,
+      dateTextBox,
+      timeTextBox,
+      locationTextBox
+    ],
+    canvas,
+  );
+
+  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;
+
+  const textMarginLeft = Math.ceil(canvas.width * 0.1);
+  const textMarginRight = Math.ceil(canvas.width * 0.065);
+
+  const topTextMarginRight = Math.ceil(canvas.width * 0.215);
+
+  let mainTextMarginBottom = Math.ceil(canvas.height * 0.47);
+  const dateTextMarginBottom = Math.ceil(canvas.height * 0.8);
+  const timeTextBoxMarginBottom = Math.ceil(canvas.height * 0.715);
+  const locationTextBoxMarginBottom = Math.ceil(canvas.height * 0.43);
+  const attendeesTextBoxMarginBottom = Math.ceil(canvas.height * 0.11);
+
+  const mainTextSize = Math.ceil(canvas.height * 0.210);
+  const mainTextLineHeight = 1;
+
+  const dateTextSize = Math.ceil(canvas.height * 0.062);
+  const timeTextSize = Math.ceil(canvas.height * 0.062);
+  const attendeesTextSize = Math.ceil(canvas.height * 0.035);
+  const attendeesTextLineHeight = 1;
+
+  const locationTextSize = Math.ceil(canvas.height * 0.055);
+  const locationTextLineHeight = 1;
+
+  const contractedByTextSize = Math.ceil(canvas.height * 0.02);
+  const contractedByTextMaxWidth = Math.ceil(canvas.width * 0.9);
+  const contractedByTextSidesMargin = Math.ceil(canvas.width * 0.03);
+
+  if (options.dateText !== null) {
+    /* BEGIN Date text render */
+
+    const dateTextWidth = canvas.width * 5;  // IDFK
+
+    console.log(options);
+
+    const highlightedData = transformHighlightedText(
+      options.dateText,
+      mainTextSize,
+      dateTextWidth,
+      "Bebas Neue",
+      options.colors.highlightedText.value,
+      options.colors.highlight.value,
+      { padWhenDiacritics: false, invertHighlight: true },
+    );
+
+    dateTextBox = new PaddedHighlightingTextbox(highlightedData.text, {
+      width: dateTextWidth,
+      left: 0,
+      textAlign: "right",
+      fontFamily: "Bebas Neue",
+      fontSize: dateTextSize,
+      fill: options.colors.highlight.value,
+      styles: highlightedData.styles,
+      selectable: false,
+      highlightPadding: canvas.height * 0.003,
+      zIndex: 20,
+    });
+
+    checkTextBoxHeight(dateTextBox, 1);
+
+    canvas.add(dateTextBox);
+
+    const dateTextBoxTop =
+      canvas.height - dateTextBox.height - dateTextMarginBottom;
+
+      dateTextBox.top = dateTextBoxTop - highlightedData.paddingBottom;
+
+    const dateTextBoxLeft =
+      canvas.width - dateTextBox.width - topTextMarginRight;
+
+      dateTextBox.left = dateTextBoxLeft;
+
+    canvas.renderAll();
+
+    /* END Date text render */
+  }
+
+  if (options.timeText !== null) {
+    /* BEGIN Time text render */
+
+    const timeTextWidth = canvas.width;
+
+    const highlightedData = transformHighlightedText(
+      options.timeText,
+      timeTextSize,
+      timeTextWidth,
+      "Bebas Neue",
+      options.colors.highlightedText.value,
+      options.colors.highlight.value,
+      { padWhenDiacritics: false, invertHighlight: true },
+    );
+
+    timeTextBox = new PaddedHighlightingTextbox(highlightedData.text, {
+      width: canvas.width,
+      left: 0,
+      textAlign: "right",
+      fontFamily: "Bebas Neue",
+      fontSize: timeTextSize,
+      fill: options.colors.baseText.value,
+      styles: highlightedData.styles,
+      selectable: false,
+      highlightPadding: canvas.height * 0.003,
+      zIndex: 20,
+    });
+
+    checkTextBoxHeight(timeTextBox, 1);
+
+    canvas.add(timeTextBox);
+
+    const timeTextBoxTop =
+      canvas.height - timeTextBox.height - timeTextBoxMarginBottom;
+
+    timeTextBox.top = timeTextBoxTop - highlightedData.paddingBottom;
+
+    const timeTextBoxLeft =
+      canvas.width - timeTextBox.width - topTextMarginRight;
+
+    timeTextBox.left = timeTextBoxLeft;
+
+    canvas.renderAll();
+
+    /* END Time text render */
+  }
+
+  if (options.locationText !== null) {
+    /* BEGIN Location text render */
+
+    const locationTextWidth = canvas.width - textMarginLeft - textMarginRight;
+
+    const highlightedData = transformHighlightedText(
+      options.locationText,
+      locationTextSize,
+      locationTextWidth,
+      "Bebas Neue",
+      options.colors.highlightedText.value,
+      options.colors.highlight.value,
+      { padWhenDiacritics: false, invertHighlight: true },
+    );
+
+    locationTextBox = new PaddedHighlightingTextbox(highlightedData.text, {
+      width: canvas.width,
+      left: 0,
+      textAlign: "right",
+      fontFamily: "Bebas Neue",
+      fontSize: locationTextSize,
+      fill: options.colors.baseText.value,
+      styles: highlightedData.styles,
+      lineHeight: locationTextLineHeight,
+      selectable: false,
+      highlightPadding: canvas.height * 0.003,
+      zIndex: 20,
+    });
+
+    checkTextBoxHeight(locationTextBox, 2);
+
+    canvas.add(locationTextBox);
+
+    canvas.renderAll();
+
+    const locationTextBoxTop =
+      canvas.height - locationTextBox.height - locationTextBoxMarginBottom + (locationTextSize * locationTextLineHeight * (locationTextBox.textLines.length - 1));
+
+    locationTextBox.top = locationTextBoxTop - highlightedData.paddingBottom;
+
+    const locationTextBoxLeft =
+      canvas.width - locationTextBox.width - textMarginRight;
+
+    locationTextBox.left = locationTextBoxLeft;
+
+    canvas.renderAll();
+
+    /* END Location text render */
+  }
+
+  if (options.attendeesText !== null) {
+    /* BEGIN Attendees text render */
+
+    const attendeesTextWidth = canvas.width - textMarginLeft - textMarginRight;
+
+    const highlightedData = transformHighlightedText(
+      options.attendeesText,
+      attendeesTextSize,
+      attendeesTextWidth,
+      "Roboto Condensed",
+      options.colors.highlightedText.value,
+      options.colors.highlight.value,
+      { padWhenDiacritics: false, invertHighlight: true },
+    );
+
+    attendeesTextBox = new PaddedHighlightingTextbox(highlightedData.text, {
+      width: canvas.width,
+      left: 0,
+      textAlign: "right",
+      fontFamily: "Roboto Condensed",
+      fontSize: attendeesTextSize,
+      fill: options.colors.baseText.value,
+      styles: highlightedData.styles,
+      selectable: false,
+      highlightPadding: canvas.height * 0.003,
+      zIndex: 20,
+    });
+
+    checkTextBoxHeight(attendeesTextBox, 3);
+
+    canvas.add(attendeesTextBox);
+
+    const attendeesTextBoxTop =
+      canvas.height - attendeesTextBox.height - attendeesTextBoxMarginBottom + (attendeesTextSize * attendeesTextLineHeight * (attendeesTextBox.textLines.length - 1));
+
+    attendeesTextBox.top = attendeesTextBoxTop - highlightedData.paddingBottom;
+
+    const attendeesTextBoxLeft =
+      canvas.width - attendeesTextBox.width - textMarginRight;
+
+      attendeesTextBox.left = attendeesTextBoxLeft;
+
+    canvas.renderAll();
+
+    /* END Attendees text render */
+  }
+
+  if (options.mainText !== null) {
+    /* BEGIN Background render */
+
+    if (backgroundImage === null || options.colors.background.value != previousBackgroundImageColor.value || !canvas.getObjects().includes(backgroundImage)) {
+      backgroundImage = new Image();
+
+      await new Promise((resolve) => {
+        backgroundImage.onload = () => {
+          resolve();
+        };
+
+        if (options.colors.background.value == COLORS.black.value) {
+          backgroundImage.src = backgroundURL;
+        } else {
+          backgroundImage.src = backgroundURLInverted;
+        }
+      });
+
+      backgroundImage = new fabric.Image(backgroundImage, {
+        top: 0,
+        left: 0,
+        zIndex: 10,
+        selectable: false,
+      });
+      backgroundImage.scaleToHeight(canvas.height);
+
+      previousBackgroundImageColor = options.colors.background;
+
+      canvas.add(backgroundImage);
+    }
+
+    /* END Background render */
+
+
+    /* BEGIN Main text render */
+
+    const mainTextWidth = canvas.width - textMarginLeft - textMarginRight;
+
+    const highlightedData = transformHighlightedText(
+      options.mainText,
+      mainTextSize,
+      mainTextWidth,
+      "Bebas Neue",
+      options.colors.highlightedText.value,
+      options.colors.highlight.value,
+      { padWhenDiacritics: false, invertHighlight: true },
+    );
+
+    mainTextBox = new PaddedHighlightingTextbox(highlightedData.text, {
+      width: canvas.width,
+      left: 0,
+      textAlign: "right",
+      fontFamily: "Bebas Neue",
+      fontSize: mainTextSize,
+      lineHeight: mainTextLineHeight,
+      fill: options.colors.highlight.value,
+      styles: highlightedData.styles,
+      selectable: false,
+      highlightPadding: canvas.height * 0.003,
+      zIndex: 20,
+    });
+
+    checkTextBoxHeight(mainTextBox, 1);
+
+    canvas.add(mainTextBox);
+
+    const mainTextBoxTop =
+      canvas.height - mainTextBox.height - mainTextMarginBottom;
+
+    mainTextBox.top = mainTextBoxTop - highlightedData.paddingBottom;
+
+    const mainTextBoxLeft =
+      canvas.width - mainTextBox.width - textMarginRight;
+
+    mainTextBox.left = mainTextBoxLeft;
+
+    canvas.renderAll();
+
+    /* END Main text render */
+  }
+
+  /* BEGIN Contracted by render */
+
+  if (options.contractedBy !== null) {
+    contractedByTextbox = new fabric.Textbox(options.contractedBy, {
+      left: contractedByTextSidesMargin,
+      top: canvas.height - contractedByTextSidesMargin - contractedByTextSize,
+      width: contractedByTextMaxWidth,
+      fontFamily: "Roboto Condensed",
+      fontSize: contractedByTextSize,
+      textAlign: "left",
+      fill: options.colors.contractedByText.value,
+      selectable: false,
+      zIndex: 20,
+    });
+
+    checkTextBoxHeight(contractedByTextbox, 1);
+
+    canvas.add(contractedByTextbox);
+  }
+
+  /* END Contracted by render */
+
+  /* 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;
+    // canvas.centerObject(mainImage)
+  } else if (mainImage !== null && options.mainImage === null) {
+    canvas.remove(mainImage);
+  }
+
+  /* END Main image render */
+
+  sortObjects(canvas);
+
+  canvasPointerDownEvent = (event) => {
+    let activeObject = canvas.getActiveObject();
+
+    if (activeObject === null) {
+      return;
+    }
+
+    // if (activeObject._element.src == mainImage._element.src) {
+    // return
+    // }
+
+    canvas.remove(backgroundImage);
+    backgroundImage = null;
+  };
+
+  if (!pointerDownEventAssigned) {
+    document
+      .getElementsByClassName("upper-canvas")[0]
+      .addEventListener("pointerdown", canvasPointerDownEvent);
+
+    pointerDownEventAssigned = true;
+  }
+
+  const colors = {...options.colors};
+
+  upEventFunction = (event) => {
+    redraw(canvas, {...options, colors: colors});
+  };
+
+  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;