finished templates, added preview pictures, version bump

VERSION

-2.26.4
+2.27.0

frontend/src/templates.js

@@ -19,6 +19,8 @@ import regionalSuccessImage from "./assets/previews/regional_success.png";
 import socialCoverLargeTextImage from "./assets/previews/social_cover_large_text.png";
 import reelImage from "./assets/previews/reel.png";
 import nakopneme_facebook_no_photo from "./assets/previews/nakopneme_facebook_no_photo.png"
+import nakopneme_facebook_photo_one from "./assets/previews/nakopneme_facebook_photo_one.png"
+import nakopneme_facebook_photo_two from "./assets/previews/nakopneme_facebook_photo_two.png"
 
 import baseEventImage from "./assets/previews/base_event.png";
 import rightEventImage from "./assets/previews/right_event.png";
@@ -138,24 +140,22 @@ const TEMPLATES = {
 
   nakopneme_facebook_photo_one: {
     name: "Nakopneme to - FB Událost obrázek 1",
-    image: basicPhotoBannerImage,
+    image: nakopneme_facebook_photo_one,
     path: "/nakopneme-facebook-photo-one",
     component: () => import("./views/nakopneme_facebook_photo_one/NakopnemeFacebookPhotoOne.vue"),
     meta: {
       title: "Nakopneme to - FB Událost obrázek 1",
     },
   },
-/*
   nakopneme_facebook_photo_two: {
     name: "Nakopneme to - FB Událost obrázek 2",
-    image: basicPhotoBannerImage,
+    image: nakopneme_facebook_photo_two,
     path: "/nakopneme-facebook-photo-two",
     component: () => import("./views/nakopneme_facebook_photo_two/NakopnemeFacebookPhotoTwo.vue"),
     meta: {
       title: "Nakopneme to - FB Událost obrázek 2",
     },
   },
-*/
   make_a_wish_banner: {
     name: "Máte přání banner",
     image: makeawishPhotoBannerImage,

frontend/src/views/nakopneme_facebook_photo_one/canvas.js

@@ -10,9 +10,7 @@ import { PaddedHighlightingTextbox } from "../../components/canvas/textbox";
 
 let mainImage = null;
 let mainTextBox = null;
-let exclTextBox = null;
 let background = null;
-let mask = null;
 
 let locationTextBox = null;
 let timeTextBox = null;
@@ -51,17 +49,15 @@ const redraw = async (canvas, options) => {
   const textMarginLeft = Math.ceil(canvas.width * 0.14);
   const textMarginRight = Math.ceil(canvas.width * 0.075);
 
-  let mainTextMarginBottom = Math.ceil(canvas.height * 0.63);
-  //const mainTextBackgroundMarginTop = Math.ceil(canvas.height * 0.1);
-  const mainTextSize = Math.ceil(canvas.height * 0.15);
-  //const mainTextHeightLimit = Math.ceil(mainTextSize * 3.3);
+  let mainTextMarginBottom = Math.ceil(canvas.height * 0.36);
+  const mainTextSize = Math.ceil(canvas.height * 0.13);
   const mainTextLineHeight = 0.9;
 
-  let locationTextMarginBottom = Math.ceil(canvas.height * 0.45);
+  let locationTextMarginBottom = Math.ceil(canvas.height * 0.22);
   const locationTextSize = Math.ceil(canvas.height * 0.07);
   const locationTextLineHeight = 0.9;
 
-  let timeTextMarginBottom = Math.ceil(canvas.height * 0.45);
+  let timeTextMarginBottom = Math.ceil(canvas.height * 0.22);
   const timeTextSize = Math.ceil(canvas.height * 0.07);
   const timeTextLineHeight = 0.9;
 
@@ -69,8 +65,8 @@ const redraw = async (canvas, options) => {
   const contractedByTextMaxWidth = Math.ceil(canvas.width * 0.9);
   const contractedByTextSidesMargin = Math.ceil(canvas.width * 0.03);
 
-  const logoWidth = Math.ceil(canvas.width * 0.2);
-  const logoSideMargin = Math.ceil(canvas.width * 0.11);
+  const logoWidth = Math.ceil(canvas.width * 0.17);
+  const logoSideMargin = Math.ceil(canvas.width * 0.04);
 
   document
     .getElementsByClassName("upper-canvas")[0]
@@ -115,7 +111,12 @@ const redraw = async (canvas, options) => {
     })
   })
 
-  var clipPath = new fabric.Rect({width: 600, height: 200})
+  var clipPath = new fabric.Rect({
+    left: -(canvas.width/2) - 1 + (canvas.width - 528)/2,
+    top: -(canvas.height/2) - 1 + (canvas.height - 238)/2 - 50,
+    width: 528, 
+    height: 238,
+    });
   clipPath.inverted = true
   background.clipPath = clipPath;
 
@@ -128,7 +129,7 @@ const redraw = async (canvas, options) => {
 
     mainTextBox = new PaddedHighlightingTextbox(options.mainText, {
       width: canvas.width,
-      left: 0,
+      left: -10,
       textAlign: "center",
       fontStyle: "italic",
       fontFamily: "Bebas Neue",
@@ -159,7 +160,7 @@ const redraw = async (canvas, options) => {
 
       locationTextBox = new PaddedHighlightingTextbox(options.locationText, {
         width: canvas.width,
-        left: 315,
+        left: (canvas.width - 528)/2 + 10,
         textAlign: "left",
         fontStyle: "normal",
         fontFamily: "Bebas Neue",
@@ -190,7 +191,7 @@ const redraw = async (canvas, options) => {
 
       timeTextBox = new PaddedHighlightingTextbox(options.timeText, {
         width: canvas.width,
-        left: -315,
+        left: -(canvas.width - 528)/2 - 10,
         textAlign: "right",
         fontStyle: "normal",
         fontFamily: "Bebas Neue",
@@ -310,7 +311,6 @@ const redraw = async (canvas, options) => {
 
     canvas.add(mainImage);
     mainImageSource = options.mainImage.src;
-    // canvas.centerObject(mainImage)
   } else if (mainImage !== null && options.mainImage === null) {
     canvas.remove(mainImage);
   }
@@ -326,12 +326,16 @@ const redraw = async (canvas, options) => {
       return;
     }
 
-    // if (activeObject._element.src == mainImage._element.src) {
-    // return
-    // }
-
     canvas.remove(background);
     background = null;
+    canvas.remove(logoImage);
+    logoImage = null;
+    canvas.remove(mainTextBox);
+    mainTextBox = null;
+    canvas.remove(locationTextBox);
+    locationTextBox = null;
+    canvas.remove(timeTextBox);
+    timeTextBox = null;
   };
 
   if (!pointerDownEventAssigned) {

frontend/src/views/nakopneme_facebook_photo_two/NakopnemeFacebookPhotoTwo.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 {
+  generateDefaultLogos,
+  LOGO_POSITIONS,
+  generateLogoPositions,
+} from "../../logos";
+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 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,
+    LongTextInput,
+    ShortTextInput,
+    RangeInput,
+    SelectInput,
+    InputSeparator,
+    ImageInput,
+    MultipleColorPicker,
+  },
+  data() {
+    const predefinedColors = {
+      base: {
+        name: "Základní barvy",
+        colors: {
+          background: COLORS.black,
+          highlight: COLORS.yellow1,
+          baseText: COLORS.black,
+          highlightedText: COLORS.black,
+          contractedByText: COLORS.gray1,
+        },
+      },
+    };
+
+    return {
+      mainImage: null,
+      mainText: null,
+      locationText: null,
+      timeText: null,
+      contractedBy: DEFAULT_CONTRACTOR,
+      logoImage: null,
+      logoPosition: LOGO_POSITIONS.top_right,
+      logoOptions: generateLogoPositions(["top_right", "top_left"]),
+      colorLabels: {
+        background: "Pozadí",
+        highlight: "Zvýraznění",
+        baseText: "Text",
+        highlightedText: "Zvýrazněný text",
+      },
+      predefinedColors: predefinedColors,
+      colors: predefinedColors.base.colors,
+      predefinedBadgeImages: generateDefaultLogos("defaultDark"),
+      autoRedraw: false,
+    };
+  },
+  async created() {
+    await loadCanvasStorage(this);
+  },
+  methods: {
+    async reloadCanvasProperties() {
+      const canvasProperties = {
+        mainImage: this.mainImage,
+        mainText: this.mainText,
+        locationText: this.locationText,
+        timeText: this.timeText,
+        logoPosition: this.logoPosition,
+        contractedBy: this.contractedBy,
+        logoImage: this.logoImage,
+        colors: this.colors,
+      };
+
+      if (canvasProperties.mainText) {
+        window.fileName = canvasProperties.mainText;
+      }
+
+      await this.$refs.canvas.redraw(canvasProperties);
+
+      let canvasPropertiesToSave = structuredClone(toRawDeep(canvasProperties));
+      delete canvasPropertiesToSave.colors;
+
+      setCanvasStorage(canvasPropertiesToSave);
+    },
+  },
+  mounted() {
+    this.$watch(
+      (vm) => [
+        vm.mainImage,
+        vm.mainText,
+        vm.locationText,
+        vm.timeText,
+        vm.logoPosition,
+        vm.contractedBy,
+        vm.logoImage,
+        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.nakopneme_facebook_photo_two"></Navbar>
+  </header>
+  <main>
+    <MainContainer>
+      <template v-slot:left>
+        <Canvas
+          ref="canvas"
+          :redrawFunction="redraw"
+          width="1200"
+          height="628"
+        />
+      </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="Hlavní text"
+          v-model="mainText"
+          :important="true"
+          :highlightable="false"
+          zIndex="9"
+        />
+        <LongTextInput
+          name="Lokace text"
+          v-model="locationText"
+          :important="true"
+          :highlightable="false"
+          zIndex="9"
+        />
+        <LongTextInput
+          name="Datum text"
+          v-model="timeText"
+          :important="true"
+          :highlightable="false"
+          zIndex="9"
+        />
+
+        <InputSeparator />
+
+        <ImageInput
+          name="Obrázek loga"
+          v-model="logoImage"
+          :important="false"
+          :predefinedImages="predefinedBadgeImages"
+          :mustSelectPredefinedImage="true"
+          :disableImageInput="true"
+          zIndex="7"
+        />
+
+        <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/nakopneme_facebook_photo_two/canvas.js

+import * as fabric from "fabric";
+import {
+  clearObjects,
+  sortObjects,
+  transformHighlightedText,
+  checkTextBoxHeight,
+} from "../../components/canvas/utils";
+import { PaddedHighlightingTextbox } from "../../components/canvas/textbox";
+
+
+let mainImage = null;
+let mainTextBox = null;
+let background = null;
+
+let locationTextBox = null;
+let timeTextBox = null;
+
+let logoImage = null;
+
+let contractedByTextbox = null;
+
+let mainImageSource = null;
+let previousLogoPosition = 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) => {
+  canvas.controlsAboveOverlay = true;
+
+  clearObjects(
+    [
+      mainTextBox,
+      locationTextBox,
+      timeTextBox,
+      contractedByTextbox,
+      background,
+    ],
+    canvas,
+  );
+
+  const textMarginLeft = Math.ceil(canvas.width * 0.14);
+  const textMarginRight = Math.ceil(canvas.width * 0.075);
+
+  let mainTextMarginBottom = Math.ceil(canvas.height * 0.40);
+  const mainTextSize = Math.ceil(canvas.height * 0.10);
+  const mainTextLineHeight = 0.9;
+
+  let locationTextMarginBottom = Math.ceil(canvas.height * 0.19);
+  const locationTextSize = Math.ceil(canvas.height * 0.06);
+  const locationTextLineHeight = 0.9;
+
+  let timeTextMarginBottom = Math.ceil(canvas.height * 0.19);
+  const timeTextSize = Math.ceil(canvas.height * 0.06);
+  const timeTextLineHeight = 0.9;
+
+  const contractedByTextSize = Math.ceil(canvas.height * 0.04);
+  const contractedByTextMaxWidth = Math.ceil(canvas.width * 0.9);
+  const contractedByTextSidesMargin = Math.ceil(canvas.width * 0.03);
+
+  const logoWidth = Math.ceil(canvas.width * 0.17);
+  const logoSideMargin = Math.ceil(canvas.width * 0.035);
+
+  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;
+
+  background = new fabric.Rect({
+    width: canvas.width,
+    height: canvas.height,
+    selectable: false,
+    zIndex: 9,
+    fill: new fabric.Gradient({
+      type: "linear",
+      gradientUnits: "pixels",
+      coords: {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: canvas.height
+      },
+      colorStops: [
+        {
+          offset: 0,
+          color: "#FDC801",
+        },
+        {
+          offset: 0.5,
+          color: "#FDC801",
+        },
+        {
+          offset: 1,
+          color: "#CF7BCC",
+        },
+      ],
+    })
+  })
+
+  var clipPath = new fabric.Rect({
+    left: -(canvas.width/2) - 1 + (canvas.width - 528)/2,
+    top: -(canvas.height/2) - 1 + (canvas.height - 238)/2 - 75,
+    width: 528, 
+    height: 238,
+    });
+  clipPath.inverted = true
+  background.clipPath = clipPath;
+
+  canvas.add(background)
+
+  if (options.mainText !== null) {
+    /* BEGIN Main text render */
+
+    const mainTextWidth = canvas.width - textMarginLeft - textMarginRight;
+
+    mainTextBox = new PaddedHighlightingTextbox(options.mainText, {
+      width: canvas.width,
+      left: -10,
+      textAlign: "center",
+      fontStyle: "italic",
+      fontFamily: "Bebas Neue",
+      fontSize: mainTextSize,
+      lineHeight: mainTextLineHeight,
+      fill: options.colors.baseText.value,
+      selectable: false,
+      highlightPadding: canvas.height * 0.003,
+      zIndex: 10,
+    });
+
+    checkTextBoxHeight(mainTextBox, 4);
+
+    canvas.add(mainTextBox);
+
+    const mainTextBoxTop =
+      canvas.height - mainTextMarginBottom;
+
+    mainTextBox.top = mainTextBoxTop;
+
+    canvas.renderAll();
+
+    /* END Main text render */
+
+    /* BEGIN Location text render */
+    if (options.locationText !== null) {
+      const locationTextWidth = canvas.width - textMarginLeft - textMarginRight;
+
+      locationTextBox = new PaddedHighlightingTextbox(options.locationText, {
+        width: canvas.width,
+        left: (canvas.width - 528)/2 + 10,
+        textAlign: "left",
+        fontStyle: "normal",
+        fontFamily: "Bebas Neue",
+        fontSize: locationTextSize,
+        lineHeight: locationTextLineHeight,
+        fill: options.colors.baseText.value,
+        selectable: false,
+        highlightPadding: canvas.height * 0.003,
+        zIndex: 10,
+      });
+
+      checkTextBoxHeight(locationTextBox, 4);
+
+      canvas.add(locationTextBox);
+
+      const locationTextBoxTop =
+        canvas.height - locationTextMarginBottom;
+
+      locationTextBox.top = locationTextBoxTop;
+
+      canvas.renderAll();
+    }
+    /* END Location text render */
+
+    /* BEGIN Time text render */
+    if (options.timeText !== null) {
+      const timeTextWidth = canvas.width - textMarginLeft - textMarginRight;
+
+      timeTextBox = new PaddedHighlightingTextbox(options.timeText, {
+        width: canvas.width,
+        left: -(canvas.width - 528)/2 - 10,
+        textAlign: "right",
+        fontStyle: "normal",
+        fontFamily: "Bebas Neue",
+        fontSize: timeTextSize,
+        lineHeight: timeTextLineHeight,
+        fill: options.colors.baseText.value,
+        selectable: false,
+        highlightPadding: canvas.height * 0.003,
+        zIndex: 10,
+      });
+
+      checkTextBoxHeight(timeTextBox, 4);
+
+      canvas.add(timeTextBox);
+
+      const timeTextBoxTop =
+        canvas.height - timeTextMarginBottom;
+
+      timeTextBox.top = timeTextBoxTop;
+
+      canvas.renderAll();
+    }
+    /* END Time text render */
+  }
+
+  /* BEGIN Logo render */
+
+  // A logo is provided, and it either hasn't been rendered yet or is a new one.
+  const createNewLogo =
+    (options.logoImage !== null &&
+      (logoImage === null ||
+        (options.logoImage !== null &&
+          options.logoImage !== logoImage._element))) ||
+    previousLogoPosition != options.logoPosition.id;
+
+  previousLogoPosition = options.logoPosition.id;
+
+  if (createNewLogo) {
+    canvas.remove(logoImage);
+
+    logoImage = new fabric.Image(options.logoImage, { selectable: false });
+    logoImage.scaleToWidth(logoWidth);
+
+    logoImage.set({
+      left: (canvas.width - logoWidth) / 2,
+      top: logoSideMargin,
+      zIndex: 11,
+    });
+
+    canvas.add(logoImage);
+  }
+
+  /* END Logo render */
+
+  /* BEGIN Contracted by render */
+
+  if (options.contractedBy !== null) {
+    contractedByTextbox = new fabric.Textbox(options.contractedBy, {
+      left:
+        canvas.width - contractedByTextMaxWidth - contractedByTextSidesMargin,
+      top: canvas.height - contractedByTextSidesMargin - contractedByTextSize + 20,
+      width: contractedByTextMaxWidth,
+      fontFamily: "Roboto Condensed",
+      fontSize: contractedByTextSize,
+      fontWeight: 'normal',
+      textAlign: "right",
+      fill: "#000",
+      selectable: false,
+      zIndex: 10,
+    });
+
+    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.setControlsVisibility({
+      // corners (uniform scale)
+      tl: true,
+      tr: true,
+      bl: true,
+      br: true,
+      // mids (scale X/Y independently)
+      ml: true,
+      mr: true,
+      mt: true,
+      mb: true,
+      // rotation
+      mtr: false,
+    });
+
+    if (mainImage.width >= mainImage.height) {
+      mainImage.scaleToHeight(canvas.height);
+    } else {
+      mainImage.scaleToWidth(canvas.width);
+    }
+
+    canvas.add(mainImage);
+    mainImageSource = options.mainImage.src;
+  } 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;
+    }
+
+    canvas.remove(background);
+    background = null;
+    canvas.remove(logoImage);
+    logoImage = null;
+    canvas.remove(mainTextBox);
+    mainTextBox = null;
+    canvas.remove(locationTextBox);
+    locationTextBox = null;
+    canvas.remove(timeTextBox);
+    timeTextBox = 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;