diff --git a/frontend/src/components/reload/AutoReloadCheckbox.vue b/frontend/src/components/reload/AutoReloadCheckbox.vue
index ca04a46ed67435777a58906eabfd5d81709f94a8..464433eb09748bcc9ed9791a49c6d68ec0c8c890 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 5c0f2ecbe89968d44edd87967ebbbc12c76d2ef6..fe59f7fbb2e03de52e469fb83c86cf7c77ebd05e 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 af93b6d3b09fef9edc0a7ad407d9a5829159e2b8..6ea36cdc7f67edc6e5e50b8d725288f20ec87334 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 4b6981695d78cb3dd5e8a662713f828ca46dd642..28499e81016bd04b94bb1d8d1ab0bc15e45d0244 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 c8164f15ca83ce98bf4c88c81ba4e737a73ca839..309530cd7185018f610785c9c5241b0eb57993c9 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 73f7d136610c4f7569c53ac6069fec6f8a06bfc1..90f05ad7c7b73e27cdce0c13943741dcf936f2ff 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 e622aae39379671ce5ea7403a3f1d15ac97dd581..b8177e04b02c7a3120ddd70954fe255cc6224f67 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 66cda5c510cd9e796b6ffb8b6982f4a1a7ea0713..c7ac5b193f52ba38455b29da2d08709ef6d0e1ca 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 bc36a096d52719d410f4a511be8613cd164d8907..e3e222bebbc751dc0b3eb6fef810b6b274cec2bc 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 012f3e843076ceacb64100a3d98c1a11d656be41..7628449072c7c1cc57f42411740e629504f04b7a 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 9ae28dce1c86ea4cd2f2326a9273b6f24a90ec07..2ea9f412eab2b32b87e2d189cf69f68f5520d7c6 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 c9ee6447a64158254cef94f48a19b325a07b2444..2f512e8ca424ee12f734617d7b3879fe9c4bf524 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 8b63b48dfcdc1652bcb0d6376988fd62f73e287d..6c02fe09af7e6d8ece47848d48ca071597f50193 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()
+ }
}
)
}