finish first template MO requirements

frontend/src/components/canvas/utils.js

@@ -21,7 +21,11 @@ const sortObjects = (canvas) => {
     canvas.renderAll()
 }
 
-const transformHighlightedText = (text, highlightColor, highlightedTextColor) => {
+const transformHighlightedText = (text, size, highlightColor, highlightedTextColor) => {
+    const textContainsDiacritics = (
+        /[áčďéěíňóřšťúůýžÁČĎÉĚÍŇÓŘŠŤÚÝŽ]+/.test(text)
+    )
+
     let positionWithinLine = 0
     let positionWithinString = 0
     let linePosition = 0
@@ -31,6 +35,8 @@ const transformHighlightedText = (text, highlightColor, highlightedTextColor) =>
         0: {}
     }
 
+    let prependWithSpace = false;
+
     for (const character of text) {
         const characterIsStar = (character === "*")
 
@@ -39,16 +45,26 @@ const transformHighlightedText = (text, highlightColor, highlightedTextColor) =>
             text = setCharAt(text, positionWithinString, " ")
         }
 
+        let style = {}
+
         if (highlightIsActive || characterIsStar) {
-            styles[linePosition][positionWithinLine] = {
-                textBackgroundColor: highlightColor,
-                fill: highlightedTextColor
+            style.textBackgroundColor = highlightColor
+            style.fill = highlightedTextColor
         }
+
+        if (textContainsDiacritics) {
+            style.deltaY = Math.ceil(size * 0.1)
         }
 
+        styles[linePosition][positionWithinLine] = style
+
         positionWithinLine++
         positionWithinString++
 
+        if (linePosition === 1 && positionWithinLine === 1 && character === "*") {
+            prependWithSpace = true;
+        }
+
         if (character === "\n") {
             linePosition++
             positionWithinLine = 0
@@ -57,9 +73,17 @@ const transformHighlightedText = (text, highlightColor, highlightedTextColor) =>
         }
     }
 
+    if (prependWithSpace) {
+        text = " " + text
+    }
+
     return {
         text: text,
-        styles: styles
+        styles: styles,
+        paddingBottom: (
+            (textContainsDiacritics) ?
+            Math.ceil(size * 0.1) : 0
+        )
     }
 }
 

frontend/src/views/basic_photo_banner/canvas.js

@@ -40,7 +40,8 @@ const redraw = async (canvas, options) => {
     const arrowWidth = Math.ceil(canvas.width * 0.047)
     const arrowHeight = Math.ceil(canvas.width * 0.055)
     const arrowThickness = Math.ceil(canvas.width * 0.019)
-    const arrowMarginLeft = Math.ceil(canvas.width * 0.065)
+    const arrowMarginLeft = Math.ceil(canvas.width * 0.08)
+    const arrowMarginLeftExtra = Math.ceil(canvas.width * -0.01)
     const arrowMarginTop = Math.ceil(canvas.height * 0.011)
 
     const logoWidth = Math.ceil(canvas.width * 0.2)
@@ -101,6 +102,7 @@ const redraw = async (canvas, options) => {
 
         const highlightedData = transformHighlightedText(
             options.mainText,
+            mainTextSize,
             options.colors.highlight.value,
             options.colors.highlightedText.value
         )
@@ -125,12 +127,16 @@ const redraw = async (canvas, options) => {
 
         canvas.add(mainTextBox)
 
-        mainTextBox.top = (
+        const textBoxTop = (
             canvas.height
             - mainTextBox.height
             - mainTextMarginBottom
         )
 
+        mainTextBox.top = (
+            textBoxTop
+            - highlightedData.paddingBottom
+        )
         canvas.renderAll()
 
         /* END Main text render */
@@ -159,10 +165,16 @@ const redraw = async (canvas, options) => {
             ],
             {
                 top: (
-                    mainTextBox.top
+                    textBoxTop
                     + arrowMarginTop
                 ),
-                left: arrowMarginLeft,
+                left: (
+                    arrowMarginLeft
+                    + (
+                        (!["", null].includes(options.mainText) && options.mainText[0] === "*") ?
+                        arrowMarginLeftExtra : 0
+                    )
+                ),
                 fill: options.colors.arrow.value,
                 selectable: false,
                 zIndex: 10
@@ -178,7 +190,7 @@ const redraw = async (canvas, options) => {
 
         const backgroundHeight = (
             canvas.height
-            - mainTextBox.top
+            - textBoxTop
             + mainTextBackgroundMarginTop
         )
 
@@ -188,7 +200,7 @@ const redraw = async (canvas, options) => {
                 height: backgroundHeight * options.gradientHeightMultiplier,
                 left: 0,
                 top: (
-                    mainTextBox.top
+                    textBoxTop
                     - mainTextBackgroundMarginTop
                     - backgroundHeight * (options.gradientHeightMultiplier - 1)
                 ),

frontend/src/views/facebook_survey/canvas.js

@@ -51,6 +51,7 @@ const redraw = async (canvas, options) => {
 
         const highlightedData = transformHighlightedText(
             options.mainText,
+            mainTextSize,
             options.colors.highlight.value,
             options.colors.highlightedText.value
         )

frontend/src/views/newspaper_quote_bottom/canvas.js

@@ -184,6 +184,7 @@ const redraw = async (canvas, options) => {
 
         const highlightedData = transformHighlightedText(
             options.mainText,
+            mainTextSize,
             options.colors.highlight.value,
             options.colors.highlightedText.value
         )

frontend/src/views/newspaper_quote_middle/canvas.js

@@ -151,6 +151,7 @@ const redraw = async (canvas, options) => {
 
         const highlightedData = transformHighlightedText(
             options.mainText,
+            mainTextSize,
             options.colors.highlight.value,
             options.colors.highlightedText.value
         )

frontend/src/views/text_banner/canvas.js

@@ -94,6 +94,7 @@ const redraw = async (canvas, options) => {
 
         const highlightedData = transformHighlightedText(
             options.text,
+            textSize,
             options.colors.highlight.value,
             options.colors.highlightedText.value
         )

frontend/src/views/twitter_banner/canvas.js

@@ -191,7 +191,7 @@ const redraw = async (canvas, options) => {
                     }
                 )
 
-                checkTextBoxHeight(mainTextBox, 3)
+                checkTextBoxHeight(mainTextBox, 7)
 
                 canvas.add(mainTextBox)
             }