diff --git a/frontend/src/assets/previews/people_banner_with_predefined_text.png b/frontend/src/assets/previews/people_banner_with_predefined_text.png
new file mode 100644
index 0000000000000000000000000000000000000000..0079fdfde7b963b7242a01246a9990778e10980c
Binary files /dev/null and b/frontend/src/assets/previews/people_banner_with_predefined_text.png differ
diff --git a/frontend/src/assets/template/people_banner_with_custom_text/bg.png b/frontend/src/assets/template/people_banner_with_custom_text/bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..94e9df88dfad6ad3e6aeaf42bb5be945415e73a5
Binary files /dev/null and b/frontend/src/assets/template/people_banner_with_custom_text/bg.png differ
diff --git a/frontend/src/assets/template/people_banner_with_predefined_text/bg.png b/frontend/src/assets/template/people_banner_with_predefined_text/bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..6a2d35b3d1767efd08e605ab42b17f73fc42e632
Binary files /dev/null and b/frontend/src/assets/template/people_banner_with_predefined_text/bg.png differ
diff --git a/frontend/src/templates.js b/frontend/src/templates.js
index 94cb7b5453893bc8b47f65b1c5c5fa59e42a98e4..bd4d17c37c25009c806add7d09f34b97a91c96f7 100644
--- a/frontend/src/templates.js
+++ b/frontend/src/templates.js
@@ -14,10 +14,13 @@ import rightEventImage from "./assets/previews/right_event.png";
import angleEventRightImage from "./assets/previews/angle_event_right.png";
import angleEventLeftImage from "./assets/previews/angle_event_left.png";
-import basePersonEventImage from "./assets/previews/base_person_event.png";
-import rightPersonEventImage from "./assets/previews/right_person_event.png";
-import anglePersonEventRightImage from "./assets/previews/angle_person_event_right.png";
-import anglePersonEventLeftImage from "./assets/previews/angle_person_event_left.png";
+// import basePersonEventImage from "./assets/previews/base_person_event.png";
+// import rightPersonEventImage from "./assets/previews/right_person_event.png";
+// import anglePersonEventRightImage from "./assets/previews/angle_person_event_right.png";
+// import anglePersonEventLeftImage from "./assets/previews/angle_person_event_left.png";
+
+import peopleBannerWithPredefinedTextImage from "./assets/previews/people_banner_with_predefined_text.png";
+import peopleBannerWithCustomTextImage from "./assets/previews/people_banner_with_predefined_text.png";
const TEMPLATES = {
basic_photo_banner: {
@@ -149,44 +152,68 @@ const TEMPLATES = {
title: "Událost - pruh pod úhlem, vlevo",
},
},
- base_person_event: {
- name: "Událost - text a obrázek na pozadí, vprostřed",
- image: basePersonEventImage,
- path: "/base-person-event",
- component: () => import("./views/base_person_event/BasePersonEvent.vue"),
- meta: {
- title: "Událost - text a obrázek na pozadí, vprostřed",
- },
- },
- right_person_event: {
- name: "Událost - text a obrázek na pozadí, vpravo",
- image: rightPersonEventImage,
- path: "/right-person-event",
- component: () => import("./views/right_person_event/RightPersonEvent.vue"),
- meta: {
- title: "Událost - text a obrázek na pozadí, vpravo",
- },
- },
- angle_person_event_right: {
- name: "Událost - pruh pod úhlem s obrázkem na pozadí, vpravo",
- image: anglePersonEventRightImage,
- path: "/angle-person-event-right",
+ people_banner_with_predefined_text: {
+ name: 'Osoba v šipce s textem "Odvaha pro Evropu"',
+ image: peopleBannerWithPredefinedTextImage,
+ path: "/people-banner-with-predefined-text",
component: () =>
- import("./views/angle_person_event_right/AnglePersonEventRight.vue"),
+ import(
+ "./views/people_banner_with_predefined_text/PeopleBannerWithPredefinedText.vue"
+ ),
meta: {
- title: "Událost - pruh pod úhlem s obrázkem na pozadí, vpravo",
+ title: 'Osoba v šipce s textem "Odvaha pro Evropu"',
},
},
- angle_person_event_left: {
- name: "Událost - pruh pod úhlem s obrázkem na pozadí, vlevo",
- image: anglePersonEventLeftImage,
- path: "/angle-person-event-left",
+ people_banner_with_custom_text: {
+ name: "Osoba v šipce s vlastním textem",
+ image: peopleBannerWithCustomTextImage,
+ path: "/people-banner-with-custom-text",
component: () =>
- import("./views/angle_person_event_left/AnglePersonEventLeft.vue"),
- meta: {
- title: "Událost - pruh pod úhlem s obrázkem na pozadí, vlevo",
- },
- },
+ import(
+ "./views/people_banner_with_custom_text/PeopleBannerWithCustomText.vue"
+ ),
+ meta: {
+ title: "Osoba v šipce s vlastním textem",
+ },
+ },
+ // base_person_event: {
+ // name: "Událost - text a obrázek na pozadí, vprostřed",
+ // image: basePersonEventImage,
+ // path: "/base-person-event",
+ // component: () => import("./views/base_person_event/BasePersonEvent.vue"),
+ // meta: {
+ // title: "Událost - text a obrázek na pozadí, vprostřed",
+ // },
+ // },
+ // right_person_event: {
+ // name: "Událost - text a obrázek na pozadí, vpravo",
+ // image: rightPersonEventImage,
+ // path: "/right-person-event",
+ // component: () => import("./views/right_person_event/RightPersonEvent.vue"),
+ // meta: {
+ // title: "Událost - text a obrázek na pozadí, vpravo",
+ // },
+ // },
+ // angle_person_event_right: {
+ // name: "Událost - pruh pod úhlem s obrázkem na pozadí, vpravo",
+ // image: anglePersonEventRightImage,
+ // path: "/angle-person-event-right",
+ // component: () =>
+ // import("./views/angle_person_event_right/AnglePersonEventRight.vue"),
+ // meta: {
+ // title: "Událost - pruh pod úhlem s obrázkem na pozadí, vpravo",
+ // },
+ // },
+ // angle_person_event_left: {
+ // name: "Událost - pruh pod úhlem s obrázkem na pozadí, vlevo",
+ // image: anglePersonEventLeftImage,
+ // path: "/angle-person-event-left",
+ // component: () =>
+ // import("./views/angle_person_event_left/AnglePersonEventLeft.vue"),
+ // meta: {
+ // title: "Událost - pruh pod úhlem s obrázkem na pozadí, vlevo",
+ // },
+ // },
};
export default TEMPLATES;
diff --git a/frontend/src/views/people_banner_with_custom_text/PeopleBannerWithCustomText.vue b/frontend/src/views/people_banner_with_custom_text/PeopleBannerWithCustomText.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0379ae5a109d7efe46a987a843f96ea7e2606483
--- /dev/null
+++ b/frontend/src/views/people_banner_with_custom_text/PeopleBannerWithCustomText.vue
@@ -0,0 +1,167 @@
+<script setup>
+import { watch, ref } from "vue";
+
+import COLORS from "../../colors";
+import TEMPLATES from "../../templates";
+import DEFAULT_CONTRACTOR from "../../contractors";
+import {
+ loadFonts,
+ loadCanvasStorage,
+ setCanvasStorage,
+ updateAutoRedrawStorage,
+ toRawDeep,
+} from "../../utils";
+
+import Canvas from "../../components/canvas/Canvas.vue";
+import redraw from "./canvas";
+
+import Navbar from "../../components/Navbar.vue";
+import MainContainer from "../../components/MainContainer.vue";
+import ImageInput from "../../components/inputs/ImageInput.vue";
+import LongTextInput from "../../components/inputs/text/LongTextInput.vue";
+import ShortTextInput from "../../components/inputs/text/ShortTextInput.vue";
+import MultipleColorPicker from "../../components/inputs/colors/MultipleColorPicker.vue";
+import ReloadButton from "../../components/reload/ReloadButton.vue";
+import AutoReloadCheckbox from "../../components/reload/AutoReloadCheckbox.vue";
+</script>
+
+<script>
+await loadFonts(["12px Bebas Neue", "12px Roboto Condensed"]);
+
+export default {
+ components: {
+ Canvas,
+ Navbar,
+ MainContainer,
+ ImageInput,
+ LongTextInput,
+ ShortTextInput,
+ MultipleColorPicker,
+ AutoReloadCheckbox,
+ ReloadButton,
+ },
+ data() {
+ const predefinedColors = {
+ whiteBackground: {
+ name: "Bílé pozadí, černý text",
+ colors: {
+ background: COLORS.white,
+ mainText: COLORS.black,
+ highlightedText: COLORS.black,
+ highlight: COLORS.yellow1,
+ },
+ },
+ };
+
+ return {
+ mainText: null,
+ personImage: null,
+ gradientHeightMultiplier: 1,
+ colorLabels: {
+ background: "Pozadí",
+ },
+ predefinedColors: predefinedColors,
+ colors: predefinedColors.whiteBackground.colors,
+ autoRedraw: false,
+ };
+ },
+ async created() {
+ await loadCanvasStorage(this);
+ },
+ methods: {
+ async reloadCanvasProperties() {
+ const canvasProperties = {
+ mainText: this.mainText,
+ personImage: this.personImage,
+ colors: this.colors,
+ };
+
+ await this.$refs.canvas.redraw(canvasProperties);
+
+ let canvasPropertiesToSave = structuredClone(toRawDeep(canvasProperties));
+ delete canvasPropertiesToSave.colors;
+
+ setCanvasStorage(canvasPropertiesToSave);
+ },
+ },
+ mounted() {
+ this.$watch(
+ (vm) => [vm.mainText, vm.personImage, vm.colors],
+ async (value) => {
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties();
+ }
+ },
+ {
+ immediate: true,
+ deep: true,
+ },
+ );
+
+ this.$watch(
+ (vm) => [vm.autoRedraw],
+ async (value) => {
+ updateAutoRedrawStorage(this.autoRedraw);
+
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties();
+ }
+ },
+ );
+ },
+};
+</script>
+
+<template>
+ <header>
+ <Navbar
+ :defaultTemplate="TEMPLATES.people_banner_with_predefined_text"
+ ></Navbar>
+ </header>
+ <main>
+ <MainContainer>
+ <template v-slot:left>
+ <Canvas
+ ref="canvas"
+ :redrawFunction="redraw"
+ width="1640"
+ height="624"
+ />
+ </template>
+
+ <template v-slot:right>
+ <ReloadButton :parentRefs="$refs" @click="reloadCanvasProperties" />
+ <AutoReloadCheckbox v-model="autoRedraw" />
+
+ <LongTextInput
+ name="Text"
+ v-model="mainText"
+ :important="true"
+ :highlightable="true"
+ zIndex="9"
+ />
+
+ <ImageInput
+ name="Obrázek"
+ v-model="personImage"
+ :important="true"
+ zIndex="10"
+ />
+
+ <MultipleColorPicker
+ name="Barvy"
+ v-model="colors"
+ :important="false"
+ :colorLabels="colorLabels"
+ :predefinedColors="predefinedColors"
+ :defaultPredefinedColors="predefinedColors.whiteBackground"
+ zIndex="5"
+ ></MultipleColorPicker>
+ </template>
+ </MainContainer>
+ </main>
+</template>
+
+<style>
+@import "vue-select/dist/vue-select.css";
+</style>
diff --git a/frontend/src/views/people_banner_with_custom_text/canvas.js b/frontend/src/views/people_banner_with_custom_text/canvas.js
new file mode 100644
index 0000000000000000000000000000000000000000..1b84b7dcd078fa29f84d73646297aea5c7bfdf56
--- /dev/null
+++ b/frontend/src/views/people_banner_with_custom_text/canvas.js
@@ -0,0 +1,222 @@
+import { fabric } from "fabric";
+import {
+ clearObjects,
+ sortObjects,
+ transformHighlightedText,
+ checkTextBoxHeight,
+} from "../../components/canvas/utils";
+import COLORS from "../../colors";
+import { PaddedHighlightingTextbox } from "../../components/canvas/textbox";
+
+import bgImage from "../../assets/template/people_banner_with_custom_text/bg.png";
+
+let mainImage = null;
+let personImage = null;
+let contractedByTextbox = null;
+let previousColor = null;
+let mainTextBox = null;
+
+let personImageSource = null;
+
+const removeDownEventListener = () => {
+ document
+ .getElementsByClassName("upper-canvas")[0]
+ .removeEventListener("pointerdown", canvasPointerDownEvent);
+};
+
+let upEventFunction = null;
+let canvasPointerDownEvent = null;
+let pointerDownEventAssigned = false;
+
+const redraw = async (canvas, options) => {
+ clearObjects([contractedByTextbox, mainTextBox], canvas);
+
+ const contractedByTextSize = Math.ceil(canvas.height * 0.035);
+ const contractedByTextMaxWidth = Math.ceil(canvas.width * 0.9);
+ const contractedByTextBottomMargin = Math.ceil(canvas.width * 0.02);
+ const contractedByTextSideMargin = Math.ceil(canvas.width * 0.03);
+
+ const textMarginLeft = Math.ceil(canvas.width * 0.18);
+ const textMarginRight = Math.ceil(canvas.width * 0.7);
+
+ let mainTextMarginTop = Math.ceil(canvas.height * 0.112);
+ const mainTextBackgroundMarginTop = Math.ceil(canvas.height * 0.14);
+ const mainTextSize = Math.ceil(canvas.height * 0.085);
+ const mainTextHeightLimit = Math.ceil(mainTextSize * 2.2);
+ const mainTextLineHeight = 0.85;
+
+ 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 Person image render */
+
+ if (
+ options.personImage !== null &&
+ (!canvas.contains(personImage) ||
+ personImage === null ||
+ options.personImage.src !== personImageSource)
+ ) {
+ if (personImage !== null) {
+ canvas.remove(personImage);
+ }
+
+ personImage = new fabric.Image(options.personImage, {
+ left: 0,
+ top: 0,
+ zIndex: 0,
+ });
+
+ personImage.controls = {
+ ...fabric.Image.prototype.controls,
+ mtr: new fabric.Control({ visible: false }),
+ };
+
+ if (personImage.width >= personImage.height) {
+ personImage.scaleToHeight(canvas.height);
+ } else {
+ personImage.scaleToWidth(canvas.width);
+ }
+
+ canvas.add(personImage);
+ personImageSource = options.personImage.src;
+ // canvas.centerObject(personImage)
+
+ removeDownEventListener();
+ pointerDownEventAssigned = false;
+ } else if (personImage !== null && options.personImage === null) {
+ canvas.remove(personImage);
+
+ removeDownEventListener();
+ pointerDownEventAssigned = false;
+ }
+
+ /* END Person image render */
+
+ /* BEGIN Main image render */
+
+ if (previousColor !== options.colors.background || mainImage === null) {
+ if (mainImage !== null) {
+ canvas.remove(mainImage);
+ }
+
+ const image = new Image();
+
+ const imageLoadPromise = new Promise((resolve) => {
+ image.onload = () => {
+ resolve();
+ };
+
+ image.src = bgImage;
+ });
+ await imageLoadPromise;
+
+ mainImage = new fabric.Image(image, {
+ left: 0,
+ top: 0,
+ zIndex: 5,
+ selectable: false,
+ });
+
+ mainImage.scaleToWidth(canvas.width);
+
+ canvas.add(mainImage);
+
+ previousColor = options.colors.background;
+ }
+
+ /* END Main image render */
+
+ if (options.mainText !== null) {
+ /* BEGIN Name text render */
+
+ const mainTextWidth = canvas.width - textMarginLeft - textMarginRight;
+
+ const highlightedData = transformHighlightedText(
+ options.mainText,
+ mainTextSize,
+ mainTextWidth,
+ "Bebas Neue",
+ options.colors.highlight.value,
+ options.colors.highlightedText.value,
+ { padWhenDiacritics: true },
+ );
+
+ mainTextBox = new PaddedHighlightingTextbox(highlightedData.text, {
+ width: canvas.width,
+ left: textMarginLeft,
+ textAlign: "left",
+ fontFamily: "Bebas Neue",
+ fontSize: mainTextSize,
+ lineHeight: mainTextLineHeight,
+ fill: options.colors.mainText.value,
+ styles: highlightedData.styles,
+ selectable: false,
+ highlightPadding: canvas.height * 0.003,
+ zIndex: 10,
+ });
+
+ checkTextBoxHeight(mainTextBox, 5);
+
+ canvas.add(mainTextBox);
+
+ mainTextBox.top = mainTextMarginTop - highlightedData.paddingBottom;
+
+ canvas.renderAll();
+
+ /* END Main text render */
+ }
+
+ sortObjects(canvas);
+
+ canvasPointerDownEvent = (event) => {
+ let activeObject = canvas.getActiveObject();
+
+ if (activeObject === null) {
+ return;
+ }
+
+ // if (activeObject._element.src == mainImage._element.src) {
+ // return
+ // }
+
+ canvas.remove(mainImage);
+ canvas.remove(mainTextBox);
+ mainImage = null;
+ mainTextBox = 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;
diff --git a/frontend/src/views/people_banner_with_predefined_text/PeopleBannerWithPredefinedText.vue b/frontend/src/views/people_banner_with_predefined_text/PeopleBannerWithPredefinedText.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4eea66903d5a74033d6370809c902fcd9bc81ac5
--- /dev/null
+++ b/frontend/src/views/people_banner_with_predefined_text/PeopleBannerWithPredefinedText.vue
@@ -0,0 +1,156 @@
+<script setup>
+import { watch, ref } from "vue";
+
+import COLORS from "../../colors";
+import TEMPLATES from "../../templates";
+import DEFAULT_CONTRACTOR from "../../contractors";
+import {
+ loadFonts,
+ loadCanvasStorage,
+ setCanvasStorage,
+ updateAutoRedrawStorage,
+ toRawDeep,
+} from "../../utils";
+
+import Canvas from "../../components/canvas/Canvas.vue";
+import redraw from "./canvas";
+
+import Navbar from "../../components/Navbar.vue";
+import MainContainer from "../../components/MainContainer.vue";
+import ImageInput from "../../components/inputs/ImageInput.vue";
+import LongTextInput from "../../components/inputs/text/LongTextInput.vue";
+import ShortTextInput from "../../components/inputs/text/ShortTextInput.vue";
+import MultipleColorPicker from "../../components/inputs/colors/MultipleColorPicker.vue";
+import ReloadButton from "../../components/reload/ReloadButton.vue";
+import AutoReloadCheckbox from "../../components/reload/AutoReloadCheckbox.vue";
+</script>
+
+<script>
+await loadFonts(["12px Bebas Neue", "12px Roboto Condensed"]);
+
+export default {
+ components: {
+ Canvas,
+ Navbar,
+ MainContainer,
+ ImageInput,
+ LongTextInput,
+ ShortTextInput,
+ MultipleColorPicker,
+ AutoReloadCheckbox,
+ ReloadButton,
+ },
+ data() {
+ const predefinedColors = {
+ whiteBackground: {
+ name: "Bílé pozadí, černý text",
+ colors: {
+ background: COLORS.white,
+ highlightedText: COLORS.black,
+ highlight: COLORS.yellow1,
+ },
+ },
+ };
+
+ return {
+ personImage: null,
+ gradientHeightMultiplier: 1,
+ colorLabels: {
+ background: "Pozadí",
+ },
+ predefinedColors: predefinedColors,
+ colors: predefinedColors.whiteBackground.colors,
+ autoRedraw: false,
+ };
+ },
+ async created() {
+ await loadCanvasStorage(this);
+ },
+ methods: {
+ async reloadCanvasProperties() {
+ const canvasProperties = {
+ personImage: this.personImage,
+ colors: this.colors,
+ };
+
+ await this.$refs.canvas.redraw(canvasProperties);
+
+ let canvasPropertiesToSave = structuredClone(toRawDeep(canvasProperties));
+ delete canvasPropertiesToSave.colors;
+
+ setCanvasStorage(canvasPropertiesToSave);
+ },
+ },
+ mounted() {
+ this.$watch(
+ (vm) => [vm.personImage, vm.colors],
+ async (value) => {
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties();
+ }
+ },
+ {
+ immediate: true,
+ deep: true,
+ },
+ );
+
+ this.$watch(
+ (vm) => [vm.autoRedraw],
+ async (value) => {
+ updateAutoRedrawStorage(this.autoRedraw);
+
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties();
+ }
+ },
+ );
+ },
+};
+</script>
+
+<template>
+ <header>
+ <Navbar
+ :defaultTemplate="TEMPLATES.people_banner_with_predefined_text"
+ ></Navbar>
+ </header>
+ <main>
+ <MainContainer>
+ <template v-slot:left>
+ <Canvas
+ ref="canvas"
+ :redrawFunction="redraw"
+ width="1640"
+ height="624"
+ />
+ </template>
+
+ <template v-slot:right>
+ <ReloadButton :parentRefs="$refs" @click="reloadCanvasProperties" />
+ <AutoReloadCheckbox v-model="autoRedraw" />
+
+ <ImageInput
+ name="Obrázek"
+ v-model="personImage"
+ :important="true"
+ zIndex="10"
+ />
+
+ <MultipleColorPicker
+ name="Barvy"
+ v-model="colors"
+ :important="false"
+ :colorLabels="colorLabels"
+ :predefinedColors="predefinedColors"
+ :defaultPredefinedColors="predefinedColors.whiteBackground"
+ zIndex="5"
+ ></MultipleColorPicker>
+ </template>
+ </MainContainer>
+ </main>
+</template>
+
+<style>
+@import "vue-select/dist/vue-select.css";
+</style>
diff --git a/frontend/src/views/people_banner_with_predefined_text/canvas.js b/frontend/src/views/people_banner_with_predefined_text/canvas.js
new file mode 100644
index 0000000000000000000000000000000000000000..076178e66962a1eedccaff7829be0babffe7d464
--- /dev/null
+++ b/frontend/src/views/people_banner_with_predefined_text/canvas.js
@@ -0,0 +1,182 @@
+import { fabric } from "fabric";
+import {
+ clearObjects,
+ sortObjects,
+ transformHighlightedText,
+ checkTextBoxHeight,
+} from "../../components/canvas/utils";
+import COLORS from "../../colors";
+import { PaddedHighlightingTextbox } from "../../components/canvas/textbox";
+
+import bgImage from "../../assets/template/people_banner_with_predefined_text/bg.png";
+
+let mainImage = null;
+let personImage = null;
+let contractedByTextbox = null;
+let previousColor = null;
+let mainTextBox = null;
+
+let personImageSource = null;
+
+const removeDownEventListener = () => {
+ document
+ .getElementsByClassName("upper-canvas")[0]
+ .removeEventListener("pointerdown", canvasPointerDownEvent);
+};
+
+let upEventFunction = null;
+let canvasPointerDownEvent = null;
+let pointerDownEventAssigned = false;
+
+const redraw = async (canvas, options) => {
+ clearObjects([contractedByTextbox, mainTextBox], canvas);
+
+ const contractedByTextSize = Math.ceil(canvas.height * 0.035);
+ const contractedByTextMaxWidth = Math.ceil(canvas.width * 0.9);
+ const contractedByTextBottomMargin = Math.ceil(canvas.width * 0.02);
+ const contractedByTextSideMargin = Math.ceil(canvas.width * 0.03);
+
+ const textMarginLeft = Math.ceil(canvas.width * 0.53);
+ const textMarginRight = Math.ceil(canvas.width * 0.1);
+
+ let mainTextMarginBottom = Math.ceil(canvas.height * 0.36);
+ const mainTextBackgroundMarginTop = Math.ceil(canvas.height * 0.14);
+ const mainTextSize = Math.ceil(canvas.height * 0.13);
+ const mainTextHeightLimit = Math.ceil(mainTextSize * 2.2);
+ const mainTextLineHeight = 0.85;
+
+ 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 Person image render */
+
+ if (
+ options.personImage !== null &&
+ (!canvas.contains(personImage) ||
+ personImage === null ||
+ options.personImage.src !== personImageSource)
+ ) {
+ if (personImage !== null) {
+ canvas.remove(personImage);
+ }
+
+ personImage = new fabric.Image(options.personImage, {
+ left: 0,
+ top: 0,
+ zIndex: 0,
+ });
+
+ personImage.controls = {
+ ...fabric.Image.prototype.controls,
+ mtr: new fabric.Control({ visible: false }),
+ };
+
+ if (personImage.width >= personImage.height) {
+ personImage.scaleToHeight(canvas.height);
+ } else {
+ personImage.scaleToWidth(canvas.width);
+ }
+
+ canvas.add(personImage);
+ personImageSource = options.personImage.src;
+ // canvas.centerObject(personImage)
+
+ removeDownEventListener();
+ pointerDownEventAssigned = false;
+ } else if (personImage !== null && options.personImage === null) {
+ canvas.remove(personImage);
+
+ removeDownEventListener();
+ pointerDownEventAssigned = false;
+ }
+
+ /* END Person image render */
+
+ /* BEGIN Main image render */
+
+ if (previousColor !== options.colors.background || mainImage === null) {
+ if (mainImage !== null) {
+ canvas.remove(mainImage);
+ }
+
+ const image = new Image();
+
+ const imageLoadPromise = new Promise((resolve) => {
+ image.onload = () => {
+ resolve();
+ };
+
+ image.src = bgImage;
+ });
+ await imageLoadPromise;
+
+ mainImage = new fabric.Image(image, {
+ left: 0,
+ top: 0,
+ zIndex: 5,
+ selectable: false,
+ });
+
+ mainImage.scaleToWidth(canvas.width);
+
+ canvas.add(mainImage);
+
+ previousColor = options.colors.background;
+ }
+
+ /* END Main image render */
+
+ sortObjects(canvas);
+
+ canvasPointerDownEvent = (event) => {
+ let activeObject = canvas.getActiveObject();
+
+ if (activeObject === null) {
+ return;
+ }
+
+ // if (activeObject._element.src == mainImage._element.src) {
+ // return
+ // }
+
+ canvas.remove(mainImage);
+ canvas.remove(mainTextBox);
+ mainImage = null;
+ mainTextBox = 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;