base poster template

frontend/src/views/poster/Poster.vue

@@ -59,6 +59,8 @@ export default {
         }
 
         return {
+            mainText: null,
+
             mainImage: null,
             personName: null,
 
@@ -92,6 +94,7 @@ export default {
         async reloadCanvasProperties () {
             const canvasProperties = {
                 mainImage: this.mainImage,
+                mainText: this.mainText,
                 personName: this.personName,
                 personPosition: this.personPosition,
                 firstColumn: this.firstColumn,
@@ -112,6 +115,7 @@ export default {
     mounted () {
         this.$watch(
             vm => [
+                vm.mainText,
                 vm.mainImage,
                 vm.personName,
                 vm.personPosition,
@@ -160,8 +164,8 @@ export default {
                 <Canvas
                     ref="canvas"
                     :redrawFunction="redraw"
-                    width="2000"
-                    height="2000"
+                    width="3625"
+                    height="5078"
                 />
             </template>
 
@@ -173,10 +177,19 @@ export default {
                 <AutoReloadCheckbox
                     v-model="autoRedraw"
                 />
+
                 <ImageInput
                     name="Obrázek"
                     v-model="mainImage"
                     :important="true"
+                    zIndex="11"
+                />
+
+                <ShortTextInput
+                    name="Nadpis"
+                    v-model="mainText"
+                    v-model:relatedModel="mainText"
+                    :important="true"
                     zIndex="10"
                 />
 

frontend/src/views/poster/canvas.js

 import { fabric } from 'fabric'
 import { clearObjects, sortObjects, transformHighlightedText, checkTextBoxHeight } from '../../components/canvas/utils'
 import { PaddedHighlightingTextbox } from '../../components/canvas/textbox'
+import overlayURL from '../../assets/template/poster/overlay.png'
+
+let mainImage = null
+let mainImageSource = null
+let overlayImage = null
 
 const redraw = async (canvas, options) => {
     clearObjects(
-        [
-        ],
+        [],
         canvas
     )
 
     canvas.preserveObjectStacking = true
 
+    /* BEGIN Main image render */
+
+    if (
+        options.mainImage !== null
+        && (
+            !canvas.contains(mainImage)
+            || (
+                mainImage === null
+                || options.mainImage.src !== mainImageSource
+            )
+        )
+    ) {
+        if (mainImage !== null) {
+            canvas.remove(mainImage)
+        }
+
+        mainImage = new fabric.Image(
+            options.mainImage,
+            {
+                left: 0,
+                top: 0,
+                zIndex: 10
+            }
+        )
+
+        mainImage.controls = {
+            ...fabric.Image.prototype.controls,
+            mtr: new fabric.Control({ visible: false })
+        }
+
+        if (mainImage.width >= mainImage.height) {
+            mainImage.scaleToHeight(canvas.height)
+        } else {
+            mainImage.scaleToWidth(canvas.width)
+        }
+
+        canvas.add(mainImage)
+        mainImageSource = options.mainImage.src
+        // canvas.centerObject(mainImage)
+    } else if (
+        mainImage !== null
+        && options.mainImage === null
+    ) {
+        canvas.remove(mainImage)
+    }
+
+    /* END Main image render */
+
+    /* BEGIN Overlay render */
+
+    if (overlayImage === null) {
+        overlayImage = new Image()
+
+        await new Promise(resolve => {
+            overlayImage.onload = () => {
+                resolve()
+            }
+
+            overlayImage.src = overlayURL
+        })
+
+        overlayImage = new fabric.Image(
+            overlayImage,
+            {
+                top: -20,  // FIXME: Why???? Fabric.js, what are you trying to tell me?!
+                left: -20,
+                zIndex: 20,
+                selectable: false
+            }
+        )
+        overlayImage.scaleToWidth(canvas.width + 22)
+
+        canvas.add(overlayImage)
+    }
+
+    /* END Overlay render */
+
     sortObjects(canvas)
 }