add new templates

VERSION

-2.5.0
+2.6.0

frontend/src/templates.js

@@ -9,6 +9,9 @@ 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";
 
 const TEMPLATES = {
   basic_photo_banner: {
@@ -105,12 +108,39 @@ const TEMPLATES = {
     },
   },
   base_event: {
-    name: "Událost - pouze text",
+    name: "Událost - pouze text, vprostřed",
     image: baseEventImage,
     path: "/base-event",
     component: () => import("./views/base_event/BaseEvent.vue"),
     meta: {
-      title: "Událost - pouze text",
+      title: "Událost - pouze text, vprostřed",
+    },
+  },
+  right_event: {
+    name: "Událost - pouze text, vpravo",
+    image: rightEventImage,
+    path: "/right-event",
+    component: () => import("./views/right_event/RightEvent.vue"),
+    meta: {
+      title: "Událost - pouze text, vpravo",
+    },
+  },
+  angle_event_right: {
+    name: "Událost - pruh pod úhlem, vpravo",
+    image: angleEventRightImage,
+    path: "/angle-event-right",
+    component: () => import("./views/angle_event_right/AngleEventRight.vue"),
+    meta: {
+      title: "Událost - pruh pod úhlem, vpravo",
+    },
+  },
+  angle_event_left: {
+    name: "Událost - pruh pod úhlem, vlevo",
+    image: angleEventLeftImage,
+    path: "/angle-event-left",
+    component: () => import("./views/angle_event_left/AngleEventLeft.vue"),
+    meta: {
+      title: "Událost - pruh pod úhlem, vlevo",
     },
   },
 };

frontend/src/views/angle_event_left/AngleEventLeft.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,
+} 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 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,
+    LongTextInput,
+    ShortTextInput,
+    MultipleColorPicker,
+    AutoReloadCheckbox,
+    ReloadButton,
+  },
+  data() {
+    const predefinedColors = {
+      blackBackground: {
+        name: "Černé pozadí, bílý text",
+        colors: {
+          background: COLORS.black,
+          mainText: COLORS.white,
+          highlightedText: COLORS.black,
+          highlight: COLORS.yellow1,
+          contractedByText: COLORS.gray1,
+        },
+      },
+      whiteBackground: {
+        name: "Bílé pozadí, černý text",
+        colors: {
+          background: COLORS.white,
+          mainText: COLORS.black,
+          highlightedText: COLORS.black,
+          highlight: COLORS.yellow1,
+          contractedByText: COLORS.gray1,
+        },
+      },
+    };
+
+    return {
+      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 = {
+        mainText: this.mainText,
+        contractedBy: this.contractedBy,
+        colors: this.colors,
+      };
+
+      await this.$refs.canvas.redraw(canvasProperties);
+
+      delete canvasProperties.colors;
+      setCanvasStorage(canvasProperties);
+    },
+  },
+  mounted() {
+    this.$watch(
+      (vm) => [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_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" />
+        <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_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_event_left/bg_black.png";
+import bgImageSourceWhite from "../../assets/template/angle_event_left/bg_white.png";
+
+let mainImage = null;
+let contractedByTextbox = null;
+let previousColor = null;
+let mainTextBox = null;
+
+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;
+
+  canvas.preserveObjectStacking = true;
+
+  /* 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: 0,
+      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: contractedByTextSideMargin,
+      top: canvas.height - contractedByTextBottomMargin - contractedByTextSize,
+      width: contractedByTextMaxWidth,
+      fontFamily: "Roboto Condensed",
+      fontSize: contractedByTextSize,
+      textAlign: "left",
+      fill: options.colors.contractedByText.value,
+      selectable: false,
+      zIndex: 10,
+    });
+
+    checkTextBoxHeight(contractedByTextbox, 1);
+
+    canvas.add(contractedByTextbox);
+  }
+
+  /* END Contracted by render */
+
+  sortObjects(canvas);
+};
+
+export default redraw;

frontend/src/views/angle_event_right/AngleEventRight.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,
+} 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 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,
+    LongTextInput,
+    ShortTextInput,
+    MultipleColorPicker,
+    AutoReloadCheckbox,
+    ReloadButton,
+  },
+  data() {
+    const predefinedColors = {
+      blackBackground: {
+        name: "Černé pozadí, bílý text",
+        colors: {
+          background: COLORS.black,
+          mainText: COLORS.white,
+          highlightedText: COLORS.black,
+          highlight: COLORS.yellow1,
+          contractedByText: COLORS.gray1,
+        },
+      },
+      whiteBackground: {
+        name: "Bílé pozadí, černý text",
+        colors: {
+          background: COLORS.white,
+          mainText: COLORS.black,
+          highlightedText: COLORS.black,
+          highlight: COLORS.yellow1,
+          contractedByText: COLORS.gray1,
+        },
+      },
+    };
+
+    return {
+      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 = {
+        mainText: this.mainText,
+        contractedBy: this.contractedBy,
+        colors: this.colors,
+      };
+
+      await this.$refs.canvas.redraw(canvasProperties);
+
+      delete canvasProperties.colors;
+      setCanvasStorage(canvasProperties);
+    },
+  },
+  mounted() {
+    this.$watch(
+      (vm) => [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_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" />
+        <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_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_event_right/bg_black.png";
+import bgImageSourceWhite from "../../assets/template/angle_event_right/bg_white.png";
+
+let mainImage = null;
+let contractedByTextbox = null;
+let previousColor = null;
+let mainTextBox = null;
+
+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;
+
+  canvas.preserveObjectStacking = true;
+
+  /* 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: 0,
+      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: contractedByTextSideMargin,
+      top: canvas.height - contractedByTextBottomMargin - contractedByTextSize,
+      width: contractedByTextMaxWidth,
+      fontFamily: "Roboto Condensed",
+      fontSize: contractedByTextSize,
+      textAlign: "left",
+      fill: options.colors.contractedByText.value,
+      selectable: false,
+      zIndex: 10,
+    });
+
+    checkTextBoxHeight(contractedByTextbox, 1);
+
+    canvas.add(contractedByTextbox);
+  }
+
+  /* END Contracted by render */
+
+  sortObjects(canvas);
+};
+
+export default redraw;

frontend/src/views/base_event/BaseEvent.vue

@@ -150,7 +150,7 @@ export default {
           :important="false"
           :colorLabels="colorLabels"
           :predefinedColors="predefinedColors"
-          :defaultPredefinedColors="predefinedColors.base"
+          :defaultPredefinedColors="predefinedColors.blackBackground"
           zIndex="5"
         ></MultipleColorPicker>
 

frontend/src/views/base_event/canvas.js

@@ -37,7 +37,7 @@ const redraw = async (canvas, options) => {
 
   /* BEGIN Main image render */
 
-  if (previousColor !== options.colors.background) {
+  if (previousColor !== options.colors.background || mainImage === null) {
     if (mainImage !== null) {
       canvas.remove(mainImage);
     }

frontend/src/views/right_event/RightEvent.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,
+} 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 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,
+    LongTextInput,
+    ShortTextInput,
+    MultipleColorPicker,
+    AutoReloadCheckbox,
+    ReloadButton,
+  },
+  data() {
+    const predefinedColors = {
+      blackBackground: {
+        name: "Černé pozadí, bílý text",
+        colors: {
+          background: COLORS.black,
+          mainText: COLORS.white,
+          highlightedText: COLORS.black,
+          highlight: COLORS.yellow1,
+          contractedByText: COLORS.gray1,
+        },
+      },
+      whiteBackground: {
+        name: "Bílé pozadí, černý text",
+        colors: {
+          background: COLORS.white,
+          mainText: COLORS.black,
+          highlightedText: COLORS.black,
+          highlight: COLORS.yellow1,
+          contractedByText: COLORS.gray1,
+        },
+      },
+    };
+
+    return {
+      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 = {
+        mainText: this.mainText,
+        contractedBy: this.contractedBy,
+        colors: this.colors,
+      };
+
+      await this.$refs.canvas.redraw(canvasProperties);
+
+      delete canvasProperties.colors;
+      setCanvasStorage(canvasProperties);
+    },
+  },
+  mounted() {
+    this.$watch(
+      (vm) => [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.right_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" />
+        <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/right_event/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/right_event/bg_black.png";
+import bgImageSourceWhite from "../../assets/template/right_event/bg_white.png";
+
+let mainImage = null;
+let contractedByTextbox = null;
+let previousColor = null;
+let mainTextBox = null;
+
+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.53);
+  const textMarginRight = Math.ceil(canvas.width * 0.1);
+
+  let mainTextMarginBottom = Math.ceil(canvas.height * 0.36);
+  const mainTextBackgroundMarginTop = Math.ceil(canvas.height * 0.14);
+  const mainTextSize = Math.ceil(canvas.height * 0.13);
+  const mainTextHeightLimit = Math.ceil(mainTextSize * 2.2);
+  const mainTextLineHeight = 0.85;
+
+  canvas.preserveObjectStacking = true;
+
+  /* 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: 0,
+      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, 2);
+
+    canvas.add(mainTextBox);
+
+    let mainTextBoxTop =
+      canvas.height - mainTextBox.height - mainTextMarginBottom;
+
+    if (mainTextBox.textLines.length === 1) {
+      mainTextBoxTop -= mainTextSize / 2;
+    }
+
+    mainTextBox.top = mainTextBoxTop - highlightedData.paddingBottom;
+
+    canvas.renderAll();
+
+    /* END Main text render */
+  }
+
+  /* BEGIN Contracted by render */
+
+  if (options.contractedBy !== null) {
+    contractedByTextbox = new fabric.Textbox(options.contractedBy, {
+      left: contractedByTextSideMargin,
+      top: canvas.height - contractedByTextBottomMargin - contractedByTextSize,
+      width: contractedByTextMaxWidth,
+      fontFamily: "Roboto Condensed",
+      fontSize: contractedByTextSize,
+      textAlign: "left",
+      fill: options.colors.contractedByText.value,
+      selectable: false,
+      zIndex: 10,
+    });
+
+    checkTextBoxHeight(contractedByTextbox, 1);
+
+    canvas.add(contractedByTextbox);
+  }
+
+  /* END Contracted by render */
+
+  sortObjects(canvas);
+};
+
+export default redraw;