WIP - poster template

frontend/src/components/canvas/Canvas.vue

@@ -77,6 +77,7 @@ export default {
         </div>
         <div class="object-contain h-[115vw] md:h-[unset]">
             <canvas
+                id="canvas"
                 ref="canvas"
                 class="w-full border border-gray-300 drop-shadow-md duration-150"
                 :class="{'blur': redrawing}"

frontend/src/views/poster/Poster.vue

@@ -48,11 +48,8 @@ export default {
             base: {
                 name: 'Základní barvy',
                 colors: {
-                    background: COLORS.black,
-                    highlight: COLORS.yellow1,
-                    arrow: COLORS.yellow1,
-                    baseText: COLORS.white,
-                    highlightedText: COLORS.black,
+                    background: COLORS.white,
+                    baseText: COLORS.black,
                     contractedByText: COLORS.gray1
                 }
             }
@@ -76,8 +73,6 @@ export default {
 
             colorLabels: {
                 background: 'Pozadí',
-                highlight: 'Zvýraznění',
-                arrow: 'Šipka',
                 baseText: 'Text',
                 highlightedText: 'Zvýrazněný text'
             },
@@ -108,7 +103,7 @@ export default {
 
             await this.$refs.canvas.redraw(canvasProperties)
 
-            delete canvasProperties.colors
+            // delete canvasProperties.colors
             setCanvasStorage(canvasProperties)
         }
     },

frontend/src/views/poster/canvas.js

@@ -6,15 +6,66 @@ import overlayURL from '../../assets/template/poster/overlay.png'
 let mainImage = null
 let mainImageSource = null
 let overlayImage = null
+let pointerDownEventAssigned = false
+let socialMediaTextObject = null
+let backgroundRect = null
+let bottomBackgroundRect = null
+let personNameText = null
+
+let contractedByTextbox = null
+
+const removeDownEventListener = () => {
+    document.getElementsByClassName("upper-canvas")[0].removeEventListener("pointerdown", canvasPointerDownEvent)
+}
+
+let upEventFunction = null
+let canvasPointerDownEvent = null
 
 const redraw = async (canvas, options) => {
     clearObjects(
-        [],
+        [
+            socialMediaTextObject,
+            personNameText,
+            contractedByTextbox,
+        ],
         canvas
     )
 
+    const leftMarginText = 300
+    const bottomMarginText = 225
+    const bottomFontSize = 100
+
+    const nameTextSize = 100
+
+    const contractedByTextSize = Math.ceil(canvas.height * 0.01)
+    const contractedByTextMaxWidth = Math.ceil(canvas.width * 0.9)
+    const contractedByTextSidesMargin = Math.ceil(canvas.width * 0.03)
+
+    document.getElementsByClassName("upper-canvas")[0].removeEventListener("pointerup", upEventFunction)
+    document.getElementsByClassName("upper-canvas")[0].removeEventListener("pointerout", upEventFunction)
+    document.getElementsByClassName("upper-canvas")[0].removeEventListener("pointercancel", upEventFunction
+    )
+
     canvas.preserveObjectStacking = true
 
+    /* BEGIN Background render */
+
+    if (backgroundRect === null) {
+        backgroundRect = new fabric.Rect({
+            width: canvas.width * 1.1,
+            height: canvas.height * 1.1,
+            top: -20,  // FIXME: Why???? Fabric.js, what are you trying to tell me?!
+            left: -20,
+            fill: options.colors.background.value,
+            selectable: false,
+            zIndex: 0
+        })
+
+        canvas.add(backgroundRect)
+    }
+
+    /* END Background render */
+
     /* BEGIN Main image render */
 
     if (
@@ -54,11 +105,17 @@ const redraw = async (canvas, options) => {
         canvas.add(mainImage)
         mainImageSource = options.mainImage.src
         // canvas.centerObject(mainImage)
+
+        removeDownEventListener()
+        pointerDownEventAssigned = false
     } else if (
         mainImage !== null
         && options.mainImage === null
     ) {
         canvas.remove(mainImage)
+
+        removeDownEventListener()
+        pointerDownEventAssigned = false
     }
 
     /* END Main image render */
@@ -92,7 +149,190 @@ const redraw = async (canvas, options) => {
 
     /* END Overlay render */
 
+    /* BEGIN Bottom background render */
+
+    if (bottomBackgroundRect === null) {
+        bottomBackgroundRect = new fabric.Rect({
+            width: canvas.width * 1.1,
+            height: 1458,
+            top: 3620,  // FIXME: Why???? Fabric.js, what are you trying to tell me?!
+            left: -20,
+            fill: options.colors.background.value,
+            zIndex: 30,
+            selectable: false,
+        })
+
+        canvas.add(bottomBackgroundRect)
+    }
+
+    /* END Bottom background render */
+
+    /* BEGIN Name / position text render */
+
+    if (options.personName !== null) {
+        let styles = {
+            0: {}
+        }
+
+        for (let position = 0; position < options.personName.length; position++) {
+            styles[0][position] = {
+                fontWeight: 'bold'
+            }
+        }
+
+        let nameText = options.personName
+
+        if (options.personPosition !== null) {
+            nameText += ` | ${options.personPosition}`
+        }
+
+        personNameText = new fabric.Text(
+            nameText,
+            {
+                left: leftMarginText,
+                top: (
+                    canvas.height
+                    - bottomBackgroundRect.height
+                    + bottomMarginText
+                ),
+                fontFamily: 'Roboto Condensed',
+                fontSize: nameTextSize,
+                styles: styles,
+                fill: "#000",
+                selectable: false,
+                zIndex: 40
+            }
+        )
+
+        canvas.add(personNameText)
+    }
+
+    /* END Name / position text render */
+
+    /* BEGIN Column text render */
+
+    if (options.firstColumn !== null) {
+
+    }
+
+    /* END Column text render */
+
+    /* BEGIN Bottom text render */
+
+    if (
+        options.socialMedia1
+        || options.socialMedia2
+        || options.socialMedia3
+    ) {
+        let socialMediaText = `${
+            (options.socialMedia1 !== null) ?
+            options.socialMedia1 + "         " :
+            ""
+        }${
+            (options.socialMedia2 !== null) ?
+            options.socialMedia2 + "         " :
+            ""
+        }${
+            (options.socialMedia3 !== null) ?
+            options.socialMedia3 :
+            ""
+        }`
+
+        socialMediaTextObject = new fabric.Text(
+            socialMediaText,
+            {
+                left: leftMarginText,
+                top: (
+                    canvas.height
+                    - bottomMarginText
+                    - bottomFontSize
+                ),
+                fontFamily: 'Roboto Condensed',
+                fontSize: bottomFontSize,
+                fill: "#000",
+                selectable: false,
+                zIndex: 40
+            }
+        )
+
+        canvas.add(socialMediaTextObject)
+    }
+
+    /* END Bottom text render */
+
+    /* BEGIN Contracted by render */
+
+    if (options.contractedBy !== null) {
+        contractedByTextbox = new fabric.Textbox(
+            options.contractedBy,
+            {
+                left: canvas.width - contractedByTextMaxWidth - contractedByTextSidesMargin,
+                top: (
+                    canvas.height
+                    - contractedByTextSidesMargin
+                    - contractedByTextSize
+                ),
+                width: contractedByTextMaxWidth,
+                fontFamily: 'Roboto Condensed',
+                fontSize: contractedByTextSize,
+                textAlign: 'right',
+                fill: "#505050",
+                selectable: false,
+                zIndex: 40
+            }
+        )
+
+        checkTextBoxHeight(contractedByTextbox, 1)
+
+        canvas.add(contractedByTextbox)
+    }
+
+    /* END Contracted by render */
+
     sortObjects(canvas)
+
+    canvasPointerDownEvent = (event) => {
+        let activeObject = canvas.getActiveObject()
+
+        if (activeObject === null) {
+            return
+        }
+
+        // if (activeObject._element.src == mainImage._element.src) {
+        // return
+        // }
+
+        canvas.remove(overlayImage)
+        overlayImage = null
+    }
+
+    if (!pointerDownEventAssigned) {
+        document.getElementsByClassName("upper-canvas")[0].addEventListener(
+            "pointerdown",
+            canvasPointerDownEvent
+        )
+
+        pointerDownEventAssigned = true
+    }
+
+    upEventFunction = (event) => {
+        redraw(canvas, options)
+    }
+
+    document.getElementsByClassName("upper-canvas")[0].addEventListener(
+        "pointerup",
+        upEventFunction
+    )
+
+    document.getElementsByClassName("upper-canvas")[0].addEventListener(
+        "pointerout",
+        upEventFunction
+    )
+
+    document.getElementsByClassName("upper-canvas")[0].addEventListener(
+        "pointercancel",
+        upEventFunction
+    )
 }
 
 export default redraw