diff --git a/VERSION b/VERSION index 46b81d815a23b1a6b60bc9160f21295a5f9e4e75..d8b698973a4918eb7d323228992b517d7c249f4a 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -2.11.0 +2.12.0 diff --git a/frontend/src/views/reel/Reel.vue b/frontend/src/views/reel/Reel.vue index e63f419900488a4581f72470d5141b499461f95a..ac466d59c9fbf7e6462f4d1a16af52c22ef167ab 100644 --- a/frontend/src/views/reel/Reel.vue +++ b/frontend/src/views/reel/Reel.vue @@ -44,13 +44,14 @@ export default { background: COLORS.black, mainText: COLORS.white, highlightedText: COLORS.yellow1, - contractedByText: COLORS.black + contractedByText: COLORS.white }, }, }; return { mainText: null, + nameText: null, mainImage: null, contractedBy: DEFAULT_CONTRACTOR, gradientHeightMultiplier: 1, @@ -70,6 +71,7 @@ export default { const canvasProperties = { mainImage: this.mainImage, mainText: this.mainText, + nameText: this.nameText, contractedBy: this.contractedBy, colors: this.colors, }; @@ -86,7 +88,7 @@ export default { }, mounted() { this.$watch( - (vm) => [vm.mainText, vm.contractedBy, vm.colors], + (vm) => [vm.mainText, vm.nameText, vm.contractedBy, vm.colors], async (value) => { if (this.autoRedraw) { await this.reloadCanvasProperties(); @@ -138,12 +140,19 @@ export default { zIndex="10" /> + <ShortTextInput + name="Jméno" + v-model="nameText" + :important="false" + zIndex="9" + /> + <LongTextInput name="Text" v-model="mainText" :important="true" :highlightable="true" - zIndex="9" + zIndex="8" /> <ShortTextInput diff --git a/frontend/src/views/reel/canvas.js b/frontend/src/views/reel/canvas.js index 33dfd31bebffe6572ec981ae87a1914fd9ae17d2..153c8de6d2f482067225d1e64f1cef88a6fa6cd0 100644 --- a/frontend/src/views/reel/canvas.js +++ b/frontend/src/views/reel/canvas.js @@ -8,20 +8,21 @@ import { import COLORS from "../../colors"; import { PaddedHighlightingTextbox } from "../../components/canvas/textbox"; -import bgImageSource from "../../assets/template/social_cover_large_text/background.png"; +import logoImageSource from "../../assets/logos/default-light.png"; let mainImage = null; +let logoImage = null; let mainImageSource = null; let contractedByTextbox = null; let mainTextBox = null; +let nameText = null; const redraw = async (canvas, options) => { - clearObjects([contractedByTextbox, mainTextBox], canvas); + clearObjects([contractedByTextbox, mainTextBox, nameText], canvas); - const contractedByTextSize = Math.ceil(canvas.height * 0.01); - const contractedByTextMaxWidth = Math.ceil(canvas.width * 0.9); - const contractedByTextBottomMargin = Math.ceil(canvas.width * 0.02); - const contractedByTextSideMargin = Math.ceil(canvas.width * 0.03); + const contractedByTextSize = Math.ceil(canvas.height * 0.013); + const contractedByTextBottomMargin = Math.ceil(canvas.width * 0.04); + const contractedByTextSideMargin = Math.ceil(canvas.width * 0.05); const mainTextMarginTop = Math.ceil(canvas.height * 0.15); const mainTextMarginLeft = Math.ceil(canvas.width * 0.05); @@ -30,6 +31,13 @@ const redraw = async (canvas, options) => { const mainTextMaxLines = 7; const mainTextLineHeight = 0.85; + const nameTextMarginLeft = Math.ceil(canvas.width * 0.05); + const nameTextMarginTop = Math.ceil(canvas.height * 0.1); + const nameTextSize = Math.ceil(canvas.height * 0.05); + + const logoWidth = Math.ceil(canvas.width * 0.3); + const logoSideMargin = Math.ceil(canvas.width * 0.04); + canvas.preserveObjectStacking = true; /* BEGIN Main image render */ @@ -70,6 +78,22 @@ const redraw = async (canvas, options) => { /* END Main image render */ + /* BEGIN Name text render */ + + if (options.nameText !== null) { + nameText = new fabric.Text(`${options.nameText}:`, { + left: nameTextMarginLeft, + top: nameTextMarginTop, + fontFamily: "Bebas Neue", + fontSize: nameTextSize, + fill: "#fff", + selectable: false, + zIndex: 40, + }); + + canvas.add(nameText); + } + /* BEGIN Main text render */ if (options.mainText !== null) { @@ -105,6 +129,37 @@ const redraw = async (canvas, options) => { /* END Main text render */ + /* BEGIN Logo render */ + + if (logoImage === null) { + if (logoImage !== null) { + canvas.remove(logoImage); + } + + const logoImageElement = new Image(); + + await new Promise((resolve) => { + logoImageElement.onload = () => { + resolve(); + }; + + logoImageElement.src = logoImageSource; + }); + + logoImage = new fabric.Image(logoImageElement, { selectable: false }); + logoImage.scaleToWidth(logoWidth); + + logoImage.set({ + left: logoSideMargin, + top: canvas.height - logoSideMargin - logoImage.getScaledHeight(), + zIndex: 11, + }); + + canvas.add(logoImage); + } + + /* END Logo render */ + /* BEGIN Contracted by render */ if (options.contractedBy !== null) {