diff --git a/frontend/src/assets/template/poster/overlay.png b/frontend/src/assets/template/poster/overlay.png new file mode 100644 index 0000000000000000000000000000000000000000..72aefb6c47dd5a9e4e3d5e0c7272df0d417340c6 Binary files /dev/null and b/frontend/src/assets/template/poster/overlay.png differ diff --git a/frontend/src/views/poster/Poster.vue b/frontend/src/views/poster/Poster.vue index 935283ee0dfd9bae799526c32099d8331f26aa52..f4b0bd3117f84cca7d3a637e83b789adc2d1f4f1 100644 --- a/frontend/src/views/poster/Poster.vue +++ b/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" /> diff --git a/frontend/src/views/poster/canvas.js b/frontend/src/views/poster/canvas.js index 09aba1394f9fd6a26cc4e3ac6791279a3f5a24bc..3e3e76c6ee089f4697a857ddcbb8e5c27946e780 100644 --- a/frontend/src/views/poster/canvas.js +++ b/frontend/src/views/poster/canvas.js @@ -1,16 +1,97 @@ 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) }