Skip to content
Snippets Groups Projects
Commit a74ffffb authored by Alexa Valentová's avatar Alexa Valentová
Browse files

fix fabric ver

parent 79b99f03
No related branches found
No related tags found
No related merge requests found
Pipeline #21275 passed
2.22.0 2.22.1
...@@ -100,6 +100,8 @@ const getSingleLineTextBoxWidth = (text, fontSize, fontFamily) => { ...@@ -100,6 +100,8 @@ const getSingleLineTextBoxWidth = (text, fontSize, fontFamily) => {
} }
} }
console.log(currentWidth);
return currentWidth; return currentWidth;
}; };
...@@ -240,7 +242,6 @@ const transformHighlightedText = ( ...@@ -240,7 +242,6 @@ const transformHighlightedText = (
let positionWithinString = 0; let positionWithinString = 0;
const textContainsDiacritics = /[áčďéěíňóřšťúůýžÁČĎÉĚÍŇÓŘŠŤÚÝŽ]+/.test(text); const textContainsDiacritics = /[áčďéěíňóřšťúůýžÁČĎÉĚÍŇÓŘŠŤÚÝŽ]+/.test(text);
const textContainsHighlight = /\*/.test(text); const textContainsHighlight = /\*/.test(text);
let positionWithinLine = 0; let positionWithinLine = 0;
...@@ -252,12 +253,33 @@ const transformHighlightedText = ( ...@@ -252,12 +253,33 @@ const transformHighlightedText = (
}; };
let prependWithSpace = false; let prependWithSpace = false;
let rects = [];
let line = "";
let highlightedText = "";
let resetHLTnextRound = false;
for (const character of text) { for (const character of text) {
const characterIsStar = character === "*"; const characterIsStar = character === "*";
if (characterIsStar) { if (characterIsStar) {
highlightIsActive = !highlightIsActive; highlightIsActive = !highlightIsActive;
if (resetHLTnextRound) {
highlightedText = "";
resetHLTnextRound = false;
}
if (highlightIsActive) {
highlightedText += (
!options.invertHighlight
? " " : ""
);
line += (
!options.invertHighlight
? " " : ""
);
}
text = setCharAt( text = setCharAt(
text, text,
positionWithinString, positionWithinString,
...@@ -268,6 +290,14 @@ const transformHighlightedText = ( ...@@ -268,6 +290,14 @@ const transformHighlightedText = (
" " " "
: "", : "",
); );
} else if (highlightIsActive) {
highlightedText += character;
if (character == "\n") {
line = "";
} else {
line += character;
}
} }
let style = {}; let style = {};
...@@ -299,12 +329,6 @@ const transformHighlightedText = ( ...@@ -299,12 +329,6 @@ const transformHighlightedText = (
positionWithinLine++; positionWithinLine++;
positionWithinString++; positionWithinString++;
// TODO
//
// if (positionWithinLine === 1 && character === "*") {
// prependWithSpace = true;
// }
if (character === "\n") { if (character === "\n") {
styles[linePosition + 1] = {}; styles[linePosition + 1] = {};
linePosition++; linePosition++;
...@@ -344,9 +368,11 @@ const transformHighlightedText = ( ...@@ -344,9 +368,11 @@ const transformHighlightedText = (
: 0.1), : 0.1),
) )
: 0, : 0,
rects: rects
}; };
}; };
const checkTextBoxHeight = (textBox, maxLines) => { const checkTextBoxHeight = (textBox, maxLines) => {
if (textBox.textLines.length > maxLines) { if (textBox.textLines.length > maxLines) {
if (!window.showingMaxLinesWarning) { if (!window.showingMaxLinesWarning) {
......
...@@ -85,15 +85,15 @@ const TEMPLATES = { ...@@ -85,15 +85,15 @@ const TEMPLATES = {
}, },
}, },
nakopneme_basic_photo_banner_fzbar: { nakopneme_basic_photo_banner_fzbar: {
name: "Nakopneme to! - Základní banner s fotkou (F/Ž bar nahoře)", name: "Nakopneme to! - Základní banner s fotkou (F/Ž zvýraznění)",
image: nakopnemeBasicPhotoBannerImageFZBar, image: nakopnemeBasicPhotoBannerImageFZBar,
path: "/nakopneme-basic-photo-banner-fz-bar", path: "/nakopneme-basic-photo-banner-fz-bar",
component: () => component: () =>
import( import(
"./views/nakopneme_basic_photo_banner/NakopnemeBasicPhotoBanner.vue" "./views/nakopneme_basic_photo_banner_fzbar/NakopnemeBasicPhotoBannerFZBar.vue"
), ),
meta: { meta: {
title: "Nakopneme to! Základní banner s fotkou (F/Ž bar nahoře)", title: "Nakopneme to! Základní banner s fotkou (F/Ž zvýraznění)",
}, },
}, },
make_a_wish_banner: { make_a_wish_banner: {
......
import { sortObjects } from "../../components/canvas/utils"; import { sortObjects } from "../../components/canvas/utils";
import * as fabric from "fabric";
let mainImage = null; let mainImage = null;
let overlayImage = null; let overlayImage = null;
......
...@@ -20,6 +20,8 @@ let personPositionText = null; ...@@ -20,6 +20,8 @@ let personPositionText = null;
let mainImage = null; let mainImage = null;
let logoImage = null; let logoImage = null;
let highlightedData = null;
let contractedByTextbox = null; let contractedByTextbox = null;
let mainImageSource = null; let mainImageSource = null;
...@@ -45,6 +47,10 @@ const redraw = async (canvas, options) => { ...@@ -45,6 +47,10 @@ const redraw = async (canvas, options) => {
canvas, canvas,
); );
if (highlightedData) {
clearObjects(highlightedData.rects, canvas);
}
canvas.preserveObjectStacking = true; canvas.preserveObjectStacking = true;
const textMarginLeft = Math.ceil(canvas.width * 0.14); const textMarginLeft = Math.ceil(canvas.width * 0.14);
...@@ -73,18 +79,33 @@ const redraw = async (canvas, options) => { ...@@ -73,18 +79,33 @@ const redraw = async (canvas, options) => {
/* BEGIN Main text render */ /* BEGIN Main text render */
const mainText = options.mainText; const mainText = options.mainText;
const mainTextWidth = canvas.width - textMarginLeft - textMarginRight; const mainTextWidth = canvas.width - (textMarginRight * 2);
// Estimate where the Textbox will sit
const estimatedLines = Math.ceil(mainText.length / (mainTextWidth / mainTextSize));
const estimatedTextBoxHeight = estimatedLines * mainTextSize * mainTextLineHeight;
const highlightedData = transformHighlightedText( const mainTextBoxTopEstimate =
canvas.height - estimatedTextBoxHeight - mainTextMarginBottom;
highlightedData = transformHighlightedText(
mainText, mainText,
mainTextSize, mainTextSize,
mainTextWidth, mainTextWidth,
"Bebas Neue", "Bebas Neue",
options.colors.highlight.value, options.colors.highlight.value,
options.colors.highlightedText.value, options.colors.highlightedText.value,
{ padWhenDiacritics: true }, {
padWhenDiacritics: true,
// useGradientBackground: true,
canvas: canvas,
// centerGradientBackground: true,
x: textMarginLeft,
y: mainTextBoxTopEstimate,
}
); );
// Create and measure your Fabric textbox
mainTextBox = new PaddedHighlightingTextbox(highlightedData.text, { mainTextBox = new PaddedHighlightingTextbox(highlightedData.text, {
width: canvas.width, width: canvas.width,
left: 0, left: 0,
...@@ -92,21 +113,56 @@ const redraw = async (canvas, options) => { ...@@ -92,21 +113,56 @@ const redraw = async (canvas, options) => {
fontFamily: "Bebas Neue", fontFamily: "Bebas Neue",
fontSize: mainTextSize, fontSize: mainTextSize,
lineHeight: mainTextLineHeight, lineHeight: mainTextLineHeight,
fill: "#000", fill: "#fff",
styles: highlightedData.styles, styles: highlightedData.styles,
selectable: false, selectable: false,
highlightPadding: canvas.height * 0.003, highlightPadding: canvas.height * 0.003,
zIndex: 10, zIndex: 10,
}); });
checkTextBoxHeight(mainTextBox, 4); checkTextBoxHeight(mainTextBox, 4);
canvas.add(mainTextBox); canvas.add(mainTextBox);
const mainTextBoxTop = // Now position it using the real paddingBottom
canvas.height - mainTextBox.height - mainTextMarginBottom; mainTextBox.top = canvas.height - mainTextBox.height - highlightedData.paddingBottom - mainTextMarginBottom;
const mainTextBoxTop = mainTextBox.top;
canvas.renderAll();
const defaultGradient = new fabric.Gradient({
type: 'linear',
gradientUnits: 'pixels',
coords: { x1: 0, y1: 0, x2: mainTextSize, 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);
mainTextBox.top = mainTextBoxTop - highlightedData.paddingBottom; const rect = new fabric.Rect({
left: mainTextBox.left - left,
top: mainTextBox.right - top,
height: mainTextSize * 2,
width: 50,
fill: defaultGradient,
zIndex: 9 // Right under text zIndex
});
canvas.add(rect);
}
// render the text line
this._renderChars(method, ctx, line, left, top, lineIndex);
};
mainTextBox._renderTextLine = renderTextLine;
canvas.renderAll(); canvas.renderAll();
...@@ -137,25 +193,17 @@ const redraw = async (canvas, options) => { ...@@ -137,25 +193,17 @@ const redraw = async (canvas, options) => {
}, },
colorStops: [ colorStops: [
{ {
offset: 0, offset: 1,
color: "#ffffff00", color: options.colors.background.value,
},
{
offset: 0.5,
color: "#fdc800",
},
{
offset: 0.6,
color: "#fdc800",
}, },
{ {
offset: 1, offset: 0.2,
color: "#bd7eb4", color: `${options.colors.background.value}00`,
}, },
], ],
}), }),
selectable: false, selectable: false,
zIndex: 9, zIndex: 8,
}); });
canvas.add(mainTextBoxBackground); canvas.add(mainTextBoxBackground);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment