add poster template

frontend/src/views/poster/Poster.vue

@@ -50,7 +50,8 @@ export default {
                 colors: {
                     background: COLORS.white,
                     baseText: COLORS.black,
-                    contractedByText: COLORS.gray1
+                    contractedByText: COLORS.gray1,
+                    arrow: COLORS.yellow1
                 }
             }
         }
@@ -74,7 +75,8 @@ export default {
             colorLabels: {
                 background: 'Pozadí',
                 baseText: 'Text',
-                highlightedText: 'Zvýrazněný text'
+                highlightedText: 'Zvýrazněný text',
+                arrow: 'Šipka'
             },
 
             predefinedColors: predefinedColors,

frontend/src/views/poster/canvas.js

@@ -11,6 +11,11 @@ let socialMediaTextObject = null
 let backgroundRect = null
 let bottomBackgroundRect = null
 let personNameText = null
+let mainText = null
+let firstColumn = null
+let secondColumn = null
+
+let arrow = null
 
 let contractedByTextbox = null
 
@@ -27,16 +32,38 @@ const redraw = async (canvas, options) => {
             socialMediaTextObject,
             personNameText,
             contractedByTextbox,
+            arrow,
+            mainText,
+            firstColumn,
+            secondColumn
         ],
         canvas
     )
 
     const leftMarginText = 300
-    const bottomMarginText = 225
-    const bottomFontSize = 100
+    const leftMarginPersonText = 410
+    const bottomMarginText = 200
+    const bottomFontSize = 90
+
+    const topMarginText = 150
+
+    const mainTextMarginBottom = 1180
+    const mainTextSize = 300
 
     const nameTextSize = 100
 
+    const arrowWidth = Math.ceil(canvas.width * 0.0235)
+    const arrowHeight = Math.ceil(canvas.width * 0.0275)
+    const arrowThickness = Math.ceil(canvas.width * 0.01)
+    const arrowMarginLeft = 300
+    const arrowMarginBottom = Math.ceil(canvas.height * 0.257)
+
+    const columnsMarginTop = 600
+    const columnsMarginBetween = 100
+    const columnsMaxWidth = 1500
+    const columnTextSize = 75
+    const columnLineHeight = 1
+
     const contractedByTextSize = Math.ceil(canvas.height * 0.01)
     const contractedByTextMaxWidth = Math.ceil(canvas.width * 0.9)
     const contractedByTextSidesMargin = Math.ceil(canvas.width * 0.03)
@@ -167,6 +194,43 @@ const redraw = async (canvas, options) => {
 
     /* END Bottom background render */
 
+    /* BEGIN Arrow render */
+
+    arrow = new fabric.Polygon(
+        [
+            {x: 0, y: 0},
+            {x: arrowThickness, y: 0},
+            {
+                x: arrowWidth,
+                y: Math.ceil(arrowHeight) / 2
+            },
+            {
+                x: arrowThickness,
+                y: arrowHeight
+            },
+            {x: 0, y: arrowHeight},
+            {
+                x: arrowWidth - arrowThickness,
+                y: Math.ceil(arrowHeight) / 2
+            },
+            {x: 0, y: 0}
+        ],
+        {
+            top: (
+                canvas.height
+                - arrowMarginBottom
+            ),
+            left: arrowMarginLeft,
+            fill: "#fec900",
+            selectable: false,
+            zIndex: 40
+        }
+    )
+
+    canvas.add(arrow)
+
+    /* END Arrow render */
+
     /* BEGIN Name / position text render */
 
     if (options.personName !== null) {
@@ -189,11 +253,11 @@ const redraw = async (canvas, options) => {
         personNameText = new fabric.Text(
             nameText,
             {
-                left: leftMarginText,
+                left: leftMarginPersonText,
                 top: (
                     canvas.height
                     - bottomBackgroundRect.height
-                    + bottomMarginText
+                    + topMarginText
                 ),
                 fontFamily: 'Roboto Condensed',
                 fontSize: nameTextSize,
@@ -209,10 +273,76 @@ const redraw = async (canvas, options) => {
 
     /* END Name / position text render */
 
+    /* BEGIN Main text render */
+
+    if (options.mainText !== null) {
+        mainText = new fabric.Text(
+            options.mainText,
+            {
+                left: leftMarginText,
+                top: (
+                    canvas.height
+                    - mainTextMarginBottom
+                ),
+                fontFamily: 'Bebas Neue',
+                fontSize: mainTextSize,
+                fill: "#000",
+                selectable: false,
+                zIndex: 40
+            }
+        )
+
+        canvas.add(mainText)
+    }
+
+    /* END Main text render */
+
     /* BEGIN Column text render */
 
     if (options.firstColumn !== null) {
+        firstColumn = new fabric.Textbox(
+            options.firstColumn,
+            {
+                left: leftMarginText,
+                top: (
+                    canvas.height
+                    - bottomBackgroundRect.height
+                    + columnsMarginTop
+                ),
+                width: columnsMaxWidth,
+                fontFamily: 'Roboto Condensed',
+                fontSize: columnTextSize,
+                lineHeight: columnLineHeight,
+                fill: "#000",
+                selectable: false,
+                zIndex: 40
+            }
+        )
+
+        canvas.add(firstColumn)
+    }
+
+    if (options.secondColumn !== null) {
+        secondColumn = new fabric.Textbox(
+            options.secondColumn,
+            {
+                left: leftMarginText + columnsMarginBetween + columnsMaxWidth,
+                top: (
+                    canvas.height
+                    - bottomBackgroundRect.height
+                    + columnsMarginTop
+                ),
+                width: columnsMaxWidth,
+                fontFamily: 'Roboto Condensed',
+                fontSize: columnTextSize,
+                lineHeight: columnLineHeight,
+                fill: "#000",
+                selectable: false,
+                zIndex: 40
+            }
+        )
 
+        canvas.add(secondColumn)
     }
 
     /* END Column text render */