semi-finish makeawish template

VERSION

-2.14.1
+2.15.0

frontend/src/views/make_a_wish_banner/MakeAWishBanner.vue

@@ -51,11 +51,23 @@ export default {
   data() {
     const predefinedColors = {
       base: {
-        name: "Základní barvy",
+        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,
         },

frontend/src/views/make_a_wish_banner/canvas.js

@@ -7,6 +7,8 @@ import {
 } from "../../components/canvas/utils";
 import { PaddedHighlightingTextbox } from "../../components/canvas/textbox";
 import backgroundURL from "../../assets/template/make_a_wish_banner/background.png";
+import backgroundURLInverted from "../../assets/template/make_a_wish_banner/background_inverted.png";
+import COLORS from "../../colors";
 
 let mainTextBox = null;
 
@@ -15,6 +17,7 @@ let personPositionText = null;
 
 let mainImage = null;
 let backgroundImage = null;
+let previousBackgroundImageColor = null;
 
 let contractedByTextbox = null;
 
@@ -47,10 +50,11 @@ const redraw = async (canvas, options) => {
   const nameTextMarginBottom = Math.ceil(canvas.height * 0.1);
   const nameTextMarginLeft = Math.ceil(canvas.width * 0.05);
   const nameTextExtraBottomMargin = Math.ceil(canvas.height * 0.05);
+  const nameTextMaxWidth = Math.ceil(canvas.width * 0.15);
   const positionTextSideGap = nameTextMarginLeft;
   const positionTextMarginBottom = Math.ceil(canvas.height * 0.06);
   const positionTextSeparatorWidth = Math.ceil(canvas.width * 0.0035);
-  const positionTextMaxWidth = Math.ceil(canvas.width * 0.4);
+  const positionTextMaxWidth = Math.ceil(canvas.width * 0.15);
 
   const contractedByTextSize = Math.ceil(canvas.height * 0.02);
   const contractedByTextMaxWidth = Math.ceil(canvas.width * 0.9);
@@ -59,7 +63,7 @@ const redraw = async (canvas, options) => {
   if (options.mainText !== null) {
     /* BEGIN Background render */
 
-    if (backgroundImage === null) {
+    if (backgroundImage === null || options.colors.background.value != previousBackgroundImageColor.value) {
       backgroundImage = new Image();
 
       await new Promise((resolve) => {
@@ -67,17 +71,23 @@ const redraw = async (canvas, options) => {
           resolve();
         };
 
+        if (options.colors.background.value == COLORS.black.value) {
           backgroundImage.src = backgroundURL;
+        } else {
+          backgroundImage.src = backgroundURLInverted;
+        }
       });
 
       backgroundImage = new fabric.Image(backgroundImage, {
         top: canvas.height - backgroundImage.height, // FIXME: Why???? Fabric.js, what are you trying to tell me?!
         left: -20,
-        zIndex: 0,
+        zIndex: 10,
         selectable: false,
       });
       backgroundImage.scaleToWidth(canvas.width + 22);
 
+      previousBackgroundImageColor = options.colors.background;
+
       canvas.add(backgroundImage);
     }
 
@@ -99,17 +109,20 @@ const redraw = async (canvas, options) => {
       }
       */
 
-      personNameText = new fabric.Text(options.personName, {
+      personNameText = new fabric.Textbox(options.personName, {
         left: nameTextMarginLeft,
         top: canvas.height - bottomTextSize - nameTextMarginBottom,
+        width: nameTextMaxWidth,
         fontFamily: "Bebas Neue",
         fontSize: bottomTextSize,
         styles: styles,
-        fill: options.colors.highlight.value,
+        fill: options.colors.nameText.value,
         selectable: false,
-        zIndex: 10,
+        zIndex: 20,
       });
 
+      checkTextBoxHeight(personNameText, 1);
+
       if (options.personPosition !== null) {
         personPositionText = new fabric.Textbox(options.personPosition, {
           left: positionTextSideGap,
@@ -119,10 +132,10 @@ const redraw = async (canvas, options) => {
           fontSize: positionTextSize,
           fill: options.colors.baseText.value,
           selectable: false,
-          zIndex: 10,
+          zIndex: 20,
         });
 
-        checkTextBoxHeight(personPositionText, 2);
+        checkTextBoxHeight(personPositionText, 1);
 
         if (personPositionText._textLines.length === 2) {
           mainTextMarginBottom += nameTextExtraBottomMargin;
@@ -169,10 +182,10 @@ const redraw = async (canvas, options) => {
       styles: highlightedData.styles,
       selectable: false,
       highlightPadding: canvas.height * 0.003,
-      zIndex: 10,
+      zIndex: 20,
     });
 
-    checkTextBoxHeight(mainTextBox, 3);
+    checkTextBoxHeight(mainTextBox, 1);
 
     canvas.add(mainTextBox);
 
@@ -198,7 +211,7 @@ const redraw = async (canvas, options) => {
       textAlign: "left",
       fill: options.colors.contractedByText.value,
       selectable: false,
-      zIndex: 10,
+      zIndex: 20,
     });
 
     checkTextBoxHeight(contractedByTextbox, 1);