From 52174f84ce26ebc743e1646b57ab633631707fc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Valenta?= <tomas@imaniti.org>
Date: Thu, 4 Apr 2024 15:12:47 +0200
Subject: [PATCH] WIP - poster template
---
frontend/src/components/canvas/Canvas.vue | 1 +
frontend/src/views/poster/Poster.vue | 11 +-
frontend/src/views/poster/canvas.js | 242 +++++++++++++++++++++-
3 files changed, 245 insertions(+), 9 deletions(-)
diff --git a/frontend/src/components/canvas/Canvas.vue b/frontend/src/components/canvas/Canvas.vue
index 591b3203..64caaf5c 100644
--- a/frontend/src/components/canvas/Canvas.vue
+++ b/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}"
diff --git a/frontend/src/views/poster/Poster.vue b/frontend/src/views/poster/Poster.vue
index f4b0bd31..6311f7d2 100644
--- a/frontend/src/views/poster/Poster.vue
+++ b/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)
}
},
diff --git a/frontend/src/views/poster/canvas.js b/frontend/src/views/poster/canvas.js
index 3e3e76c6..b7bef17c 100644
--- a/frontend/src/views/poster/canvas.js
+++ b/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
--
GitLab