From c16226290604a9a9ebb39a11fb9d5be4e66546dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Valenta?= <tomas@imaniti.org>
Date: Wed, 24 Apr 2024 14:31:16 +0200
Subject: [PATCH] fix minor template issues
---
.pre-commit-config.yaml | 16 --
frontend/src/components/inputs/EmojiInput.vue | 5 +
frontend/src/views/regional_success/canvas.js | 262 +++++++++---------
3 files changed, 137 insertions(+), 146 deletions(-)
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index e21904f2..479c120f 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -13,19 +13,3 @@ repos:
args: [--fix=lf]
- id: detect-private-key
- id: check-merge-conflict
-
- - repo: https://github.com/asottile/seed-isort-config
- rev: v2.2.0
- hooks:
- - id: seed-isort-config
-
- - repo: https://github.com/timothycrosley/isort
- rev: 5.12.0
- hooks:
- - id: isort
-
- - repo: https://github.com/psf/black
- rev: 23.1.0
- hooks:
- - id: black
- args: ["-t", "py311"]
diff --git a/frontend/src/components/inputs/EmojiInput.vue b/frontend/src/components/inputs/EmojiInput.vue
index fd2205cc..998b8cfc 100644
--- a/frontend/src/components/inputs/EmojiInput.vue
+++ b/frontend/src/components/inputs/EmojiInput.vue
@@ -55,6 +55,11 @@ export default {
selectedEmoji (value) {
const image = new Image()
+ if (value === null || value === undefined) {
+ this.$emit('update:modelValue', null)
+ return
+ }
+
image.onload = () => {
this.$emit('update:modelValue', image)
}
diff --git a/frontend/src/views/regional_success/canvas.js b/frontend/src/views/regional_success/canvas.js
index 0ba1c278..ff9c5190 100644
--- a/frontend/src/views/regional_success/canvas.js
+++ b/frontend/src/views/regional_success/canvas.js
@@ -26,6 +26,7 @@ let fourthRow = null
let fourthEmoji = null
let nameText = null
let nameTextDesc = null
+let gradientRect = null
let previousLogoPosition = null
@@ -41,39 +42,40 @@ const redraw = async (canvas, options) => {
[
mainText,
firstRow,
- firstEmoji,
+ firstEmoji,
secondRow,
- secondEmoji,
- thirdRow,
- thirdEmoji,
- fourthRow,
- fourthEmoji,
- nameText,
- nameTextDesc
+ secondEmoji,
+ thirdRow,
+ thirdEmoji,
+ fourthRow,
+ fourthEmoji,
+ nameText,
+ nameTextDesc,
+ gradientRect
],
canvas
)
-
- const headerHeight = 391
+
+ const headerHeight = 391
const mainTextSize = 59
const logoWidth = Math.ceil(canvas.width * 0.2)
const logoSideMargin = Math.ceil(canvas.width * 0.04)
- const rowHeightBg = 187
- const rowBottomMargin = 10
- const rowHeight = rowHeightBg + rowBottomMargin
+ const rowHeightBg = 187
+ const rowBottomMargin = 10
+ const rowHeight = rowHeightBg + rowBottomMargin
const emojiHeight = 80
- const emojiLeftMargin = 490
- const emojiTopMargin = Math.ceil(headerHeight+((rowHeightBg-emojiHeight)/2))
+ const emojiLeftMargin = 490
+ const emojiTopMargin = Math.ceil(headerHeight+((rowHeightBg-emojiHeight)/2))
const rowsMaxWidth = 425
const rowsTextSize = 38
const rowsLineHeight = 0.9
- const rowsLeftMargin = 55
- const rowsFontFamily = 'Bebas Neue'
- const rowsTextColor = '#fff'
+ const rowsLeftMargin = 55
+ const rowsFontFamily = 'Bebas Neue'
+ const rowsTextColor = '#fff'
document.getElementsByClassName("upper-canvas")[0].removeEventListener("pointerup", upEventFunction)
document.getElementsByClassName("upper-canvas")[0].removeEventListener("pointerout", upEventFunction)
@@ -98,10 +100,10 @@ const redraw = async (canvas, options) => {
backgroundTopImage = new fabric.Image(
backgroundTopImage,
{
- top: 0,
+ top: 0,
left: 0,
selectable: false,
- zIndex: 5
+ zIndex: 5
}
)
backgroundTopImage.scaleToWidth(canvas.width)
@@ -123,9 +125,9 @@ const redraw = async (canvas, options) => {
backgroundBottomImage = new fabric.Image(
backgroundBottomImage,
{
- top: 1169,
+ top: 1169,
left: 0,
- zIndex: 10,
+ zIndex: 10,
selectable: false
}
)
@@ -186,24 +188,24 @@ const redraw = async (canvas, options) => {
/* BEGIN Main image render */
- var gradientRect = new fabric.Rect({
- left: 0,
- top: 385,
- width: 684,
- height: 780,
- zIndex: 5,
- fill: new fabric.Gradient({
- type: 'linear',
- coords: { x1: 0, y1: 0, x2: 684, y2: 0 },
- colorStops: [
- { offset: 0, color: 'rgba(255, 255, 255, 1)' },
- { offset: 1, color: 'rgba(255, 255, 255, 0)' }
- ]
- }),
-
- selectable: false
- });
- canvas.add(gradientRect);
+ gradientRect = new fabric.Rect({
+ left: 0,
+ top: 400,
+ width: 684,
+ height: 780,
+ zIndex: 5,
+ fill: new fabric.Gradient({
+ type: 'linear',
+ coords: { x1: 0, y1: 0, x2: 684, y2: 0 },
+ colorStops: [
+ { offset: 0, color: 'rgba(255, 255, 255, 1)' },
+ { offset: 1, color: 'rgba(255, 255, 255, 0)' }
+ ]
+ }),
+
+ selectable: false
+ });
+ canvas.add(gradientRect);
if (
options.mainImage !== null
@@ -223,9 +225,9 @@ const redraw = async (canvas, options) => {
options.mainImage,
{
top: 391,
- maxHeight: 782,
- right: 0,
- zIndex: 3
+ maxHeight: 782,
+ right: 0,
+ zIndex: 3
}
)
@@ -269,10 +271,10 @@ const redraw = async (canvas, options) => {
backgroundArrowsImage = new fabric.Image(
backgroundArrowsImage,
{
- top: 391,
+ top: 391,
left: 0,
selectable: false,
- zIndex: 6
+ zIndex: 6
}
)
@@ -285,25 +287,25 @@ const redraw = async (canvas, options) => {
if (options.mainText !== null) {
- const highlightedData = transformHighlightedText(
- options.mainText,
- mainTextSize,
- 'Bebas Neue',
- '#000',
- '#fec900',
- {padWhenDiacritics: true}
- )
+ const highlightedData = transformHighlightedText(
+ options.mainText,
+ mainTextSize,
+ 'Bebas Neue',
+ '#000',
+ '#fec900',
+ {padWhenDiacritics: true}
+ )
mainText = new PaddedHighlightingTextbox(
highlightedData.text,
{
width: canvas.width-(37*2),
left: 37,
- top: 155,
+ top: 155,
textAlign: 'left',
fontFamily: 'Bebas Neue',
fontSize: 80,
lineHeight: 1,
- zIndex: 10,
+ zIndex: 10,
fill: options.colors.baseText.value,
styles: highlightedData.styles,
selectable: false,
@@ -334,22 +336,22 @@ const redraw = async (canvas, options) => {
canvas.add(firstRow)
}
- if (options.firstEmoji !== null) {
- firstEmoji = new fabric.Image(
- options.firstEmoji,
- {
- selectable: false,
- zIndex: 40,
- }
- )
- firstEmoji.scaleToHeight(emojiHeight)
- firstEmoji.set({
- left: emojiLeftMargin,
- top: emojiTopMargin
- })
-
- canvas.add(firstEmoji)
- }
+ if (options.firstEmoji !== null) {
+ firstEmoji = new fabric.Image(
+ options.firstEmoji,
+ {
+ selectable: false,
+ zIndex: 40,
+ }
+ )
+ firstEmoji.scaleToHeight(emojiHeight)
+ firstEmoji.set({
+ left: emojiLeftMargin,
+ top: emojiTopMargin
+ })
+
+ canvas.add(firstEmoji)
+ }
if (options.secondRow !== null) {
secondRow = new fabric.Textbox(
@@ -369,22 +371,22 @@ const redraw = async (canvas, options) => {
canvas.add(secondRow)
}
- if (options.secondEmoji !== null) {
- secondEmoji = new fabric.Image(
- options.secondEmoji,
- {
- selectable: false,
- zIndex: 40,
- }
- )
- secondEmoji.scaleToHeight(emojiHeight)
- secondEmoji.set({
- left: emojiLeftMargin,
- top: emojiTopMargin + rowHeight
- })
-
- canvas.add(secondEmoji)
- }
+ if (options.secondEmoji !== null) {
+ secondEmoji = new fabric.Image(
+ options.secondEmoji,
+ {
+ selectable: false,
+ zIndex: 40,
+ }
+ )
+ secondEmoji.scaleToHeight(emojiHeight)
+ secondEmoji.set({
+ left: emojiLeftMargin,
+ top: emojiTopMargin + rowHeight
+ })
+
+ canvas.add(secondEmoji)
+ }
if (options.thirdRow !== null) {
thirdRow = new fabric.Textbox(
@@ -404,22 +406,22 @@ const redraw = async (canvas, options) => {
canvas.add(thirdRow)
}
- if (options.thirdEmoji !== null) {
- thirdEmoji = new fabric.Image(
- options.thirdEmoji,
- {
- selectable: false,
- zIndex: 40,
- }
- )
- thirdEmoji.scaleToHeight(emojiHeight)
- thirdEmoji.set({
- left: emojiLeftMargin,
- top: emojiTopMargin + (rowHeight*2)
- })
-
- canvas.add(thirdEmoji)
- }
+ if (options.thirdEmoji !== null) {
+ thirdEmoji = new fabric.Image(
+ options.thirdEmoji,
+ {
+ selectable: false,
+ zIndex: 40,
+ }
+ )
+ thirdEmoji.scaleToHeight(emojiHeight)
+ thirdEmoji.set({
+ left: emojiLeftMargin,
+ top: emojiTopMargin + (rowHeight*2)
+ })
+
+ canvas.add(thirdEmoji)
+ }
if (options.fourthRow !== null) {
fourthRow = new fabric.Textbox(
@@ -439,22 +441,22 @@ const redraw = async (canvas, options) => {
canvas.add(fourthRow)
}
- if (options.fourthEmoji !== null) {
- fourthEmoji = new fabric.Image(
- options.fourthEmoji,
- {
- selectable: false,
- zIndex: 40,
- }
- )
- fourthEmoji.scaleToHeight(emojiHeight)
- fourthEmoji.set({
- left: emojiLeftMargin,
- top: emojiTopMargin + (rowHeight*3)
- })
-
- canvas.add(fourthEmoji)
- }
+ if (options.fourthEmoji !== null) {
+ fourthEmoji = new fabric.Image(
+ options.fourthEmoji,
+ {
+ selectable: false,
+ zIndex: 40,
+ }
+ )
+ fourthEmoji.scaleToHeight(emojiHeight)
+ fourthEmoji.set({
+ left: emojiLeftMargin,
+ top: emojiTopMargin + (rowHeight*3)
+ })
+
+ canvas.add(fourthEmoji)
+ }
/* END Rows text render */
@@ -462,26 +464,26 @@ const redraw = async (canvas, options) => {
/* BEGIN Name text render */
if (options.nameText !== null) {
- const highlightedNameData = transformHighlightedText(
- options.nameText,
- mainTextSize,
- 'Bebas Neue',
- '#000',
- '#fec900',
- {padWhenDiacritics: true}
- )
+ const highlightedNameData = transformHighlightedText(
+ options.nameText,
+ mainTextSize,
+ 'Bebas Neue',
+ '#000',
+ '#fec900',
+ {padWhenDiacritics: true}
+ )
nameText = new PaddedHighlightingTextbox(
highlightedNameData.text,
{
width: canvas.width-(37*2),
right: 60,
- top: 1200,
+ top: 1200,
textAlign: 'right',
fontFamily: 'Bebas Neue',
fontSize: 50,
lineHeight: 1,
- zIndex: 12,
+ zIndex: 12,
fill: options.colors.baseText.value,
styles: highlightedNameData.styles,
selectable: false,
@@ -501,7 +503,7 @@ const redraw = async (canvas, options) => {
{
width: canvas.width-(37*2),
right: 60,
- top: 1265,
+ top: 1265,
textAlign: 'right',
fontFamily: 'Roboto Condensed',
fontSize: 20,
--
GitLab