From 0d4fff10ecb8c765a48457ad19bf0942b2bde3f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Valenta?= <git@imaniti.org>
Date: Wed, 11 Oct 2023 20:57:03 +0200
Subject: [PATCH] finish image sharing between templates
---
.../src/components/reload/AutoReloadCheckbox.vue | 1 +
frontend/src/utils.js | 13 +++++++++++--
.../views/basic_photo_banner/BasicPhotoBanner.vue | 13 ++++++++-----
frontend/src/views/basic_photo_banner/canvas.js | 12 ++++++++----
.../src/views/facebook_survey/FacebookSurvey.vue | 13 ++++++++-----
frontend/src/views/facebook_survey/canvas.js | 10 ++++++++--
.../newspaper_quote_bottom/NewspaperQuoteBottom.vue | 13 ++++++++-----
frontend/src/views/newspaper_quote_bottom/canvas.js | 10 ++++++++--
.../newspaper_quote_middle/NewspaperQuoteMiddle.vue | 13 ++++++++-----
frontend/src/views/text_banner/TextBanner.vue | 13 ++++++++-----
frontend/src/views/twitter_banner/TwitterBanner.vue | 13 ++++++++-----
.../UrgentBasicPhotoBanner.vue | 13 ++++++++-----
.../views/urgent_text_banner/UrgentTextBanner.vue | 13 ++++++++-----
13 files changed, 100 insertions(+), 50 deletions(-)
diff --git a/frontend/src/components/reload/AutoReloadCheckbox.vue b/frontend/src/components/reload/AutoReloadCheckbox.vue
index ca04a46e..464433eb 100644
--- a/frontend/src/components/reload/AutoReloadCheckbox.vue
+++ b/frontend/src/components/reload/AutoReloadCheckbox.vue
@@ -12,6 +12,7 @@
name="auto-reload-checkbox"
type="checkbox"
:checked="modelValue"
+ autocomplete="off"
@input="$emit('update:modelValue', $event.target.checked)"
>
<label
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index 5c0f2ecb..fe59f7fb 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -30,7 +30,7 @@ const updateAutoRedrawStorage = (autoRedraw) => {
}
-const loadCanvasStorage = (data) => {
+const loadCanvasStorage = async (data) => {
const canvasProperties = JSON.parse(window.sessionStorage.getItem("canvas_properties"))
const autoRedraw = JSON.parse(window.sessionStorage.getItem("auto_redraw"))
@@ -42,7 +42,16 @@ const loadCanvasStorage = (data) => {
if (key.toLowerCase().endsWith("image") && value) {
const image = new Image()
- image.src = value
+
+ await new Promise(
+ resolve => {
+ image.onload = () => {
+ resolve()
+ }
+
+ image.src = value
+ }
+ )
data[key] = image
diff --git a/frontend/src/views/basic_photo_banner/BasicPhotoBanner.vue b/frontend/src/views/basic_photo_banner/BasicPhotoBanner.vue
index af93b6d3..6ea36cdc 100644
--- a/frontend/src/views/basic_photo_banner/BasicPhotoBanner.vue
+++ b/frontend/src/views/basic_photo_banner/BasicPhotoBanner.vue
@@ -55,7 +55,7 @@ export default {
}
}
- let data = {
+ return {
mainImage: null,
mainText: null,
personName: null,
@@ -74,10 +74,9 @@ export default {
predefinedLogoImages: generateDefaultLogos('defaultLight'),
autoRedraw: false
}
-
- loadCanvasStorage(data)
-
- return data
+ },
+ async created () {
+ await loadCanvasStorage(this)
},
methods: {
async reloadCanvasProperties () {
@@ -123,6 +122,10 @@ export default {
vm => [vm.autoRedraw],
async (value) => {
updateAutoRedrawStorage(this.autoRedraw)
+
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties()
+ }
}
)
},
diff --git a/frontend/src/views/basic_photo_banner/canvas.js b/frontend/src/views/basic_photo_banner/canvas.js
index 4b698169..28499e81 100644
--- a/frontend/src/views/basic_photo_banner/canvas.js
+++ b/frontend/src/views/basic_photo_banner/canvas.js
@@ -14,6 +14,8 @@ let logoImage = null
let arrow = null
+let mainImageSource = null
+
const redraw = async (canvas, options) => {
clearObjects(
[
@@ -319,13 +321,14 @@ const redraw = async (canvas, options) => {
/* BEGIN Main image render */
- console.log(options.mainImage, mainImage, options.mainImage.src)
-
if (
options.mainImage !== null
&& (
- mainImage === null
- || options.mainImage.src !== mainImage._element.src
+ !canvas.contains(mainImage)
+ || (
+ mainImage === null
+ || options.mainImage.src !== mainImageSource
+ )
)
) {
if (mainImage !== null) {
@@ -353,6 +356,7 @@ const redraw = async (canvas, options) => {
}
canvas.add(mainImage)
+ mainImageSource = options.mainImage.src
// canvas.centerObject(mainImage)
} else if (
mainImage !== null
diff --git a/frontend/src/views/facebook_survey/FacebookSurvey.vue b/frontend/src/views/facebook_survey/FacebookSurvey.vue
index c8164f15..309530cd 100644
--- a/frontend/src/views/facebook_survey/FacebookSurvey.vue
+++ b/frontend/src/views/facebook_survey/FacebookSurvey.vue
@@ -53,7 +53,7 @@ export default {
}
}
- let data = {
+ return {
mainImage: null,
mainText: null,
logoImage: null,
@@ -74,10 +74,9 @@ export default {
predefinedLogoImages: generateDefaultLogos('defaultDark'),
autoRedraw: false
}
-
- loadCanvasStorage(data)
-
- return data
+ },
+ async created () {
+ await loadCanvasStorage(this)
},
methods: {
async reloadCanvasProperties () {
@@ -127,6 +126,10 @@ export default {
vm => [vm.autoRedraw],
async (value) => {
updateAutoRedrawStorage(this.autoRedraw)
+
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties()
+ }
}
)
}
diff --git a/frontend/src/views/facebook_survey/canvas.js b/frontend/src/views/facebook_survey/canvas.js
index 73f7d136..90f05ad7 100644
--- a/frontend/src/views/facebook_survey/canvas.js
+++ b/frontend/src/views/facebook_survey/canvas.js
@@ -17,6 +17,8 @@ let secondEmojiImage = null
let firstEmojiText = null
let secondEmojiText = null
+let mainImageSource = null
+
const redraw = async (canvas, options) => {
clearObjects(
[
@@ -339,8 +341,11 @@ const redraw = async (canvas, options) => {
if (
options.mainImage !== null
&& (
- mainImage === null
- || options.mainImage.src !== mainImage._element.src
+ !canvas.contains(mainImage)
+ || (
+ mainImage === null
+ || options.mainImage.src !== mainImageSource
+ )
)
) {
if (mainImage !== null) {
@@ -368,6 +373,7 @@ const redraw = async (canvas, options) => {
}
canvas.add(mainImage)
+ mainImageSource = options.mainImage.src
// canvas.centerObject(mainImage)
} else if (
mainImage !== null
diff --git a/frontend/src/views/newspaper_quote_bottom/NewspaperQuoteBottom.vue b/frontend/src/views/newspaper_quote_bottom/NewspaperQuoteBottom.vue
index e622aae3..b8177e04 100644
--- a/frontend/src/views/newspaper_quote_bottom/NewspaperQuoteBottom.vue
+++ b/frontend/src/views/newspaper_quote_bottom/NewspaperQuoteBottom.vue
@@ -64,7 +64,7 @@ export default {
}
}
- let data = {
+ return {
mainImage: null,
sourceImage: null,
mainText: null,
@@ -84,10 +84,9 @@ export default {
predefinedSourceImages: SOURCE_IMAGES,
autoRedraw: false
}
-
- loadCanvasStorage(data)
-
- return data
+ },
+ async created () {
+ await loadCanvasStorage(this)
},
methods: {
async reloadCanvasProperties () {
@@ -133,6 +132,10 @@ export default {
vm => [vm.autoRedraw],
async (value) => {
updateAutoRedrawStorage(this.autoRedraw)
+
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties()
+ }
}
)
}
diff --git a/frontend/src/views/newspaper_quote_bottom/canvas.js b/frontend/src/views/newspaper_quote_bottom/canvas.js
index 66cda5c5..c7ac5b19 100644
--- a/frontend/src/views/newspaper_quote_bottom/canvas.js
+++ b/frontend/src/views/newspaper_quote_bottom/canvas.js
@@ -25,6 +25,8 @@ let rightQuote = null
let tear = null
let tearFill = null
+let mainImageSource = null
+
const redraw = async (canvas, options) => {
clearObjects(
[
@@ -429,8 +431,11 @@ const redraw = async (canvas, options) => {
if (
options.mainImage !== null
&& (
- mainImage === null
- || options.mainImage.src !== mainImage._element.src
+ !canvas.contains(mainImage)
+ || (
+ mainImage === null
+ || options.mainImage.src !== mainImageSource
+ )
)
) {
if (mainImage !== null) {
@@ -458,6 +463,7 @@ const redraw = async (canvas, options) => {
}
canvas.add(mainImage)
+ mainImageSource = options.mainImage.src
// canvas.centerObject(mainImage)
} else if (
mainImage !== null
diff --git a/frontend/src/views/newspaper_quote_middle/NewspaperQuoteMiddle.vue b/frontend/src/views/newspaper_quote_middle/NewspaperQuoteMiddle.vue
index bc36a096..e3e222be 100644
--- a/frontend/src/views/newspaper_quote_middle/NewspaperQuoteMiddle.vue
+++ b/frontend/src/views/newspaper_quote_middle/NewspaperQuoteMiddle.vue
@@ -68,7 +68,7 @@ export default {
}
}
- let data = {
+ return {
sourceImage: null,
mainText: null,
personName: null,
@@ -89,10 +89,9 @@ export default {
predefinedSourceImages: SOURCE_IMAGES,
autoRedraw: false
}
-
- loadCanvasStorage(data)
-
- return data
+ },
+ async created () {
+ await loadCanvasStorage(this)
},
methods: {
async reloadCanvasProperties () {
@@ -136,6 +135,10 @@ export default {
vm => [vm.autoRedraw],
async (value) => {
updateAutoRedrawStorage(this.autoRedraw)
+
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties()
+ }
}
)
}
diff --git a/frontend/src/views/text_banner/TextBanner.vue b/frontend/src/views/text_banner/TextBanner.vue
index 012f3e84..76284490 100644
--- a/frontend/src/views/text_banner/TextBanner.vue
+++ b/frontend/src/views/text_banner/TextBanner.vue
@@ -44,7 +44,7 @@ export default {
}
}
- let data = {
+ return {
mainText: null,
logoImage: null,
colorLabels: {
@@ -59,10 +59,9 @@ export default {
predefinedLogoImages: generateDefaultLogos('defaultLight'),
autoRedraw: false
}
-
- loadCanvasStorage(data)
-
- return data
+ },
+ async created () {
+ await loadCanvasStorage(this)
},
methods: {
async reloadCanvasProperties () {
@@ -100,6 +99,10 @@ export default {
vm => [vm.autoRedraw],
async (value) => {
updateAutoRedrawStorage(this.autoRedraw)
+
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties()
+ }
}
)
}
diff --git a/frontend/src/views/twitter_banner/TwitterBanner.vue b/frontend/src/views/twitter_banner/TwitterBanner.vue
index 9ae28dce..2ea9f412 100644
--- a/frontend/src/views/twitter_banner/TwitterBanner.vue
+++ b/frontend/src/views/twitter_banner/TwitterBanner.vue
@@ -71,7 +71,7 @@ export default {
}
}
- let data = {
+ return {
defaultSelection: personOptions.klara,
personOptions: personOptions,
mainImage: null,
@@ -88,10 +88,9 @@ export default {
},
autoRedraw: false
}
-
- loadCanvasStorage(data)
-
- return data
+ },
+ async created () {
+ await loadCanvasStorage(this)
},
methods: {
async reloadCanvasProperties () {
@@ -137,6 +136,10 @@ export default {
vm => [vm.autoRedraw],
async (value) => {
updateAutoRedrawStorage(this.autoRedraw)
+
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties()
+ }
}
)
}
diff --git a/frontend/src/views/urgent_basic_photo_banner/UrgentBasicPhotoBanner.vue b/frontend/src/views/urgent_basic_photo_banner/UrgentBasicPhotoBanner.vue
index c9ee6447..2f512e8c 100644
--- a/frontend/src/views/urgent_basic_photo_banner/UrgentBasicPhotoBanner.vue
+++ b/frontend/src/views/urgent_basic_photo_banner/UrgentBasicPhotoBanner.vue
@@ -55,7 +55,7 @@ export default {
}
}
- let data = {
+ return {
mainImage: null,
mainText: null,
personName: null,
@@ -74,10 +74,9 @@ export default {
predefinedLogoImages: generateDefaultLogos('defaultLight'),
autoRedraw: false
}
-
- loadCanvasStorage(data)
-
- return data
+ },
+ async created () {
+ await loadCanvasStorage(this)
},
methods: {
async reloadCanvasProperties () {
@@ -123,6 +122,10 @@ export default {
vm => [vm.autoRedraw],
async (value) => {
updateAutoRedrawStorage(this.autoRedraw)
+
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties()
+ }
}
)
}
diff --git a/frontend/src/views/urgent_text_banner/UrgentTextBanner.vue b/frontend/src/views/urgent_text_banner/UrgentTextBanner.vue
index 8b63b48d..6c02fe09 100644
--- a/frontend/src/views/urgent_text_banner/UrgentTextBanner.vue
+++ b/frontend/src/views/urgent_text_banner/UrgentTextBanner.vue
@@ -46,7 +46,7 @@ export default {
}
}
- let data = {
+ return {
mainText: null,
logoImage: null,
colorLabels: {
@@ -65,10 +65,9 @@ export default {
],
autoRedraw: false
}
-
- loadCanvasStorage(data)
-
- return data
+ },
+ async created () {
+ await loadCanvasStorage(this)
},
methods: {
async reloadCanvasProperties () {
@@ -106,6 +105,10 @@ export default {
vm => [vm.autoRedraw],
async (value) => {
updateAutoRedrawStorage(this.autoRedraw)
+
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties()
+ }
}
)
}
--
GitLab