fix avatar dl, new template

VERSION

-2.22.1
+2.23.0
\ No newline at end of file

frontend/src/components/canvas/Canvas.vue

@@ -37,7 +37,8 @@ export default {
       this.redrawing = false;
     },
     downloadImage() {
-      this.canvas.discardActiveObject().renderAll();
+      this.canvas.discardActiveObject()
+      this.canvas.renderAll();
 
       let link = document.createElement("a");
 

frontend/src/components/canvas/utils.js

@@ -246,17 +246,16 @@ const transformHighlightedText = (
 
   let positionWithinLine = 0;
   let linePosition = 0;
+  let previousLinePosition = 0;
   let highlightIsActive = false;
 
   let styles = {
     0: {},
   };
 
-  let prependWithSpace = false;
   let rects = [];
   let line = "";
   let highlightedText = "";
-  let resetHLTnextRound = false;
 
   for (const character of text) {
     const characterIsStar = character === "*";
@@ -264,31 +263,15 @@ const transformHighlightedText = (
     if (characterIsStar) {
       highlightIsActive = !highlightIsActive;
 
-      if (resetHLTnextRound) {
-        highlightedText = "";
-        resetHLTnextRound = false;
-      }
-
       if (highlightIsActive) {
-        highlightedText += (
-          !options.invertHighlight
-          ? " " : "‎"
-        );
-        line += (
-          !options.invertHighlight
-          ? " " : "‎"
-        );
+        highlightedText += "‎";
+        line += "‎";
       }
 
       text = setCharAt(
         text,
         positionWithinString,
-        !options.invertHighlight
-          ? // For now, just put an empty Unicode character that still registers
-            // as one. To do this properly, we would have to adjust the code so that
-            // it goes back one character. But I don't feel like doing that.
-            " "
-          : "‎",
+        "‎",
       );
     } else if (highlightIsActive) {
       highlightedText += character;
@@ -304,7 +287,10 @@ const transformHighlightedText = (
 
     if (highlightIsActive || characterIsStar) {
       if (!options.invertHighlight) {
+        if (!options.skipAddingBg) {
           style.textBackgroundColor = highlightColor;
+        }
+
         style.fill = highlightedTextColor;
       } else {
         style.fill = highlightColor;
@@ -328,6 +314,7 @@ const transformHighlightedText = (
 
     positionWithinLine++;
     positionWithinString++;
+    previousLinePosition = linePosition;
 
     if (character === "\n") {
       styles[linePosition + 1] = {};

frontend/src/components/inputs/text/LongTextInput.vue

@@ -6,7 +6,7 @@ import { sanitizeValue } from "./utils";
 <script>
 export default {
   components: { InputHeading },
-  props: ["name", "important", "highlightable", "zIndex", "modelValue"],
+  props: ["name", "important", "highlightable", "zIndex", "customHighlightText", "modelValue"],
   emits: ["update:modelValue"],
 };
 </script>
@@ -27,8 +27,11 @@ export default {
       @input="$emit('update:modelValue', sanitizeValue($event.target.value))"
     ></textarea>
     <small v-if="highlightable">
+      <span v-if="!customHighlightText">
         Pro zvýraznění části textu ho <em>*obal do hvězdiček.*</em><br />
         Nezapomeň na druhou hvězdičku.
+      </span>
+      <span v-else v-text="customHighlightText" />
     </small>
   </section>
 </template>

frontend/src/views/nakopneme_basic_photo_banner_fzbar/NakopnemeBasicPhotoBannerFZBar.vue

@@ -183,6 +183,7 @@ export default {
           v-model="mainText"
           :important="true"
           :highlightable="true"
+          customHighlightText="V této šabloně lze zvýrazňovat pouze celé řádky, pro správnou funkci zvýrazněte pouze celé řádky."
           zIndex="9"
         />
         <ShortTextInput

frontend/src/views/nakopneme_basic_photo_banner_fzbar/canvas.js

@@ -29,6 +29,7 @@ let previousLogoPosition = null;
 
 let leftQuote = null;
 let rightQuote = null;
+let rects = [];
 
 const redraw = async (canvas, options) => {
   canvas.controlsAboveOverlay = true;
@@ -47,8 +48,9 @@ const redraw = async (canvas, options) => {
     canvas,
   );
 
-  if (highlightedData) {
-    clearObjects(highlightedData.rects, canvas);
+  if (rects) {
+    clearObjects(rects, canvas);
+    rects = [];
   }
 
   canvas.preserveObjectStacking = true;
@@ -102,6 +104,8 @@ const redraw = async (canvas, options) => {
         // centerGradientBackground: true,
         x: textMarginLeft,
         y: mainTextBoxTopEstimate,
+        skipAddingBg: true,
+        highlightContainedToLine: true,
       }
     );
 
@@ -126,42 +130,66 @@ const redraw = async (canvas, options) => {
     mainTextBox.top = canvas.height - mainTextBox.height - highlightedData.paddingBottom - mainTextMarginBottom;
     const mainTextBoxTop = mainTextBox.top;
 
-    canvas.renderAll();
+    // grab the original so we can still draw the text
+    const _origRenderTextLine = fabric.Textbox.prototype._renderTextLine;
+
+    function renderTextLine(method, ctx, line, left, top, lineIndex) {
+      if (line.includes("‎")) {
+        let actualLineText = "";
+
+        for (let char of line) {
+          if (char == "‎") {
+            continue;
+          }
+
+          actualLineText += char;
+        }
+
+        console.log(ctx);
+
+        // measure the line width in the current context
+        const metrics   = ctx.measureText(actualLineText);
+        const lineWidth = metrics.width * 1.05;
+        const height    = this.fontSize * 1.05;    // adjust vertical padding if you like
 
         const defaultGradient = new fabric.Gradient({
           type: 'linear',
           gradientUnits: 'pixels',
-      coords: { x1: 0, y1: 0, x2: mainTextSize, y2: 0 },
+          coords: { x1: 0, y1: 0, x2: lineWidth + 20, y2: 0 },
           colorStops: [
             { offset: 0, color: '#CF7BCC' },
             { offset: 1, color: '#FDC801' },
           ],
         });
 
-    console.log("is doing a ting");
-
-    function renderTextLine (method, ctx, line, left, top, lineIndex) {
-      console.log("meowfdksfosdkfo");
-
-      // if (line.length) {
-      if (true) {
-        console.log(mainTextBox.left - left, mainTextBox.top - top);
-
+        // build the rect
         const rect = new fabric.Rect({
-          left: mainTextBox.left - left,
-          top: mainTextBox.right - top,
-          height: mainTextSize * 2,
-          width: 50,
+          left:       canvas.width / 2 + left - 20,
+          top:        canvas.height - mainTextMarginBottom - highlightedData.paddingBottom * 0.5 - 20 - (
+                        (mainTextBox._textLines.length - lineIndex)
+                        * mainTextSize
+                        // * mainTextLineHeight
+                      ),
+          width:      lineWidth,  // Add padding to left side, line breaks do right
+          height:     height,
           fill:       defaultGradient,
-          zIndex: 9  // Right under text zIndex
+          originX:    'left',
+          originY:    'top',
+          evented:    false,
+          selectable: false,
+          zIndex:     9,
         });
+
+        rects.push(rect);
+
         canvas.add(rect);
       }
 
-      // render the text line
-      this._renderChars(method, ctx, line, left, top, lineIndex);
-    };
+      // finally draw the text chars
+      _origRenderTextLine.call(this, method, ctx, line, left, top, lineIndex);
+    }
 
+    // hook it up to your textbox
     mainTextBox._renderTextLine = renderTextLine;
 
     canvas.renderAll();