diff --git a/frontend/src/assets/previews/nakopneme_basic_photo_banner_fz.png b/frontend/src/assets/previews/nakopneme_basic_photo_banner_fz.png
new file mode 100644
index 0000000000000000000000000000000000000000..ba426f0da892e548ce3ab643af2363616f9cf6cd
Binary files /dev/null and b/frontend/src/assets/previews/nakopneme_basic_photo_banner_fz.png differ
diff --git a/frontend/src/templates.js b/frontend/src/templates.js
index 019b318f7ec9874b80b7b0a0bddec0afeb48afca..2a90c7163ed1068b377771efb3b883d13fd4f9c9 100644
--- a/frontend/src/templates.js
+++ b/frontend/src/templates.js
@@ -1,5 +1,6 @@
import basicPhotoBannerImage from "./assets/previews/basic_photo_banner.png";
import nakopnemeBasicPhotoBannerImage from "./assets/previews/nakopneme_basic_photo_banner.png";
+import nakopnemeBasicPhotoBannerImageFZ from "./assets/previews/nakopneme_basic_photo_banner_fz.png";
import urgentBasicPhotoBannerImage from "./assets/previews/urgent_basic_photo_banner.png";
import makeawishPhotoBannerImage from "./assets/previews/make_a_wish_photo_banner.png";
import makeawishTourSocialImage from "./assets/previews/make_a_wish_tour_social.png";
@@ -70,6 +71,18 @@ const TEMPLATES = {
title: "Nakopneme to! Základní banner s fotkou",
},
},
+ nakopneme_basic_photo_banner: {
+ name: "Nakopneme to! - Základní banner s fotkou F/Z pozadi",
+ image: nakopnemeBasicPhotoBannerImageFZ,
+ path: "/nakopneme-basic-photo-banner-fz",
+ component: () =>
+ import(
+ "./views/nakopneme_basic_photo_banner_fz/NakopnemeBasicPhotoBannerFZ.vue"
+ ),
+ meta: {
+ title: "Nakopneme to! Základní banner s fotkou - F/Z pozadi",
+ },
+ },
make_a_wish_banner: {
name: "Máte přání banner",
image: makeawishPhotoBannerImage,
diff --git a/frontend/src/views/angle_person_event_left/canvas.js b/frontend/src/views/angle_person_event_left/canvas.js
index c11b991e11882a3aa959b039e5aa794379f1111e..a9d9e9df6142678af2d19bb3dda1e9d32c362c1b 100644
--- a/frontend/src/views/angle_person_event_left/canvas.js
+++ b/frontend/src/views/angle_person_event_left/canvas.js
@@ -76,10 +76,14 @@ const redraw = async (canvas, options) => {
zIndex: 0,
});
- personImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ personImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
if (personImage.width >= personImage.height) {
personImage.scaleToHeight(canvas.height);
diff --git a/frontend/src/views/angle_person_event_right/canvas.js b/frontend/src/views/angle_person_event_right/canvas.js
index e932835662faeb3c3fcb235159f803d25cc4e50a..25af41b25499ca11b8d8f96b1f4a85451f8642d9 100644
--- a/frontend/src/views/angle_person_event_right/canvas.js
+++ b/frontend/src/views/angle_person_event_right/canvas.js
@@ -76,10 +76,14 @@ const redraw = async (canvas, options) => {
zIndex: 0,
});
- personImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ personImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
if (personImage.width >= personImage.height) {
personImage.scaleToHeight(canvas.height);
diff --git a/frontend/src/views/avatar/canvas.js b/frontend/src/views/avatar/canvas.js
index b9e5a14ac32c528da5607eef3fe083ed562cef2f..bdd45b6e699f5075bb98897785af1fbb5aa10aac 100644
--- a/frontend/src/views/avatar/canvas.js
+++ b/frontend/src/views/avatar/canvas.js
@@ -45,10 +45,14 @@ const redraw = async (canvas, options) => {
zIndex: 0,
});
- mainImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ mainImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
if (mainImage.width >= mainImage.height) {
mainImage.scaleToHeight(canvas.height);
diff --git a/frontend/src/views/back_in_full_force_banner/canvas.js b/frontend/src/views/back_in_full_force_banner/canvas.js
index 25c7bff398a62ebcbcb87fd7d32e29b41a8319d7..abdce937e09d2df916d9f4d41fb236f40e1cc193 100644
--- a/frontend/src/views/back_in_full_force_banner/canvas.js
+++ b/frontend/src/views/back_in_full_force_banner/canvas.js
@@ -236,10 +236,14 @@ const redraw = async (canvas, options) => {
zIndex: 0,
});
- mainImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ mainImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
if (mainImage.width >= mainImage.height) {
mainImage.scaleToHeight(canvas.height);
diff --git a/frontend/src/views/back_in_full_force_tour_social/canvas.js b/frontend/src/views/back_in_full_force_tour_social/canvas.js
index 1389ea9b8c93c6960b0a9f9308b9b9bb02023330..e1f89de7b682c2797e4bbea52453defd2bcd2946 100644
--- a/frontend/src/views/back_in_full_force_tour_social/canvas.js
+++ b/frontend/src/views/back_in_full_force_tour_social/canvas.js
@@ -426,10 +426,14 @@ const redraw = async (canvas, options) => {
zIndex: 0,
});
- mainImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ mainImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
if (mainImage.width >= mainImage.height) {
mainImage.scaleToHeight(canvas.height);
diff --git a/frontend/src/views/back_in_full_force_tour_social_A2/canvas.js b/frontend/src/views/back_in_full_force_tour_social_A2/canvas.js
index be375fc7a726ee4a53842cb59aaf0ca08d63e2d1..93cb61bf411d7d5f1b651aaa1eb610737bc6aa90 100644
--- a/frontend/src/views/back_in_full_force_tour_social_A2/canvas.js
+++ b/frontend/src/views/back_in_full_force_tour_social_A2/canvas.js
@@ -426,10 +426,14 @@ const redraw = async (canvas, options) => {
zIndex: 0,
});
- mainImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ mainImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
if (mainImage.width >= mainImage.height) {
mainImage.scaleToHeight(canvas.height);
diff --git a/frontend/src/views/back_in_full_force_tour_social_wide/canvas.js b/frontend/src/views/back_in_full_force_tour_social_wide/canvas.js
index f28b57c1be0ed9f916f472b0727e3bf2aec7a964..bec432da2dcafa0311470faace6cc49e3fbd3814 100644
--- a/frontend/src/views/back_in_full_force_tour_social_wide/canvas.js
+++ b/frontend/src/views/back_in_full_force_tour_social_wide/canvas.js
@@ -416,10 +416,14 @@ const redraw = async (canvas, options) => {
zIndex: 0,
});
- mainImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ mainImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
if (mainImage.width >= mainImage.height) {
mainImage.scaleToHeight(canvas.height);
diff --git a/frontend/src/views/base_person_event/canvas.js b/frontend/src/views/base_person_event/canvas.js
index 679f5fb28ce1a76789e79d54286103dcc9c98837..2c6ebebc0ae4c99d0da27c6500ef7b2116a2752e 100644
--- a/frontend/src/views/base_person_event/canvas.js
+++ b/frontend/src/views/base_person_event/canvas.js
@@ -76,10 +76,14 @@ const redraw = async (canvas, options) => {
zIndex: 0,
});
- personImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ personImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
if (personImage.width >= personImage.height) {
personImage.scaleToHeight(canvas.height);
diff --git a/frontend/src/views/basic_photo_banner/canvas.js b/frontend/src/views/basic_photo_banner/canvas.js
index 80788a896dafd06eea6b820c3bde159fc7d19d97..9e6738cb852714806b91c94010b668ebef75f0ca 100644
--- a/frontend/src/views/basic_photo_banner/canvas.js
+++ b/frontend/src/views/basic_photo_banner/canvas.js
@@ -348,10 +348,14 @@ const redraw = async (canvas, options) => {
zIndex: 0,
});
- mainImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ mainImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
if (mainImage.width >= mainImage.height) {
mainImage.scaleToHeight(canvas.height);
diff --git a/frontend/src/views/event_poster/canvas.js b/frontend/src/views/event_poster/canvas.js
index e3113dc983979a1f4bd420f0fb5e65472adcf052..834da794bace347f035fa8098801c269f02d9629 100644
--- a/frontend/src/views/event_poster/canvas.js
+++ b/frontend/src/views/event_poster/canvas.js
@@ -94,10 +94,14 @@ const redraw = async (canvas, options) => {
zIndex: 10,
});
- mainImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ mainImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
if (mainImage.width >= mainImage.height) {
mainImage.scaleToHeight(canvas.height);
diff --git a/frontend/src/views/facebook_survey/canvas.js b/frontend/src/views/facebook_survey/canvas.js
index 12dbb51f7ca5f054752086d7d3520b8753922a1a..5fcb3a3d9515d4f26f33c131199cd317ad9326a3 100644
--- a/frontend/src/views/facebook_survey/canvas.js
+++ b/frontend/src/views/facebook_survey/canvas.js
@@ -363,10 +363,14 @@ const redraw = async (canvas, options) => {
zIndex: 0,
});
- mainImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ mainImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
if (mainImage.width >= mainImage.height) {
mainImage.scaleToHeight(canvas.height);
diff --git a/frontend/src/views/make_a_wish_banner/canvas.js b/frontend/src/views/make_a_wish_banner/canvas.js
index 39230366ba10a824c002c14b7cfbc0fb843f2416..6cfe2a3580c9b256e33147ee76697b729bb4923e 100644
--- a/frontend/src/views/make_a_wish_banner/canvas.js
+++ b/frontend/src/views/make_a_wish_banner/canvas.js
@@ -304,10 +304,14 @@ const redraw = async (canvas, options) => {
zIndex: 0,
});
- mainImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ mainImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
if (mainImage.width >= mainImage.height) {
mainImage.scaleToHeight(canvas.height);
diff --git a/frontend/src/views/make_a_wish_tour_social/canvas.js b/frontend/src/views/make_a_wish_tour_social/canvas.js
index 9299de08e30b9e4ddb8db66ddd7ae98bc5f0485c..eea94bab27f2e73f6cc50038d6ecbc4e3f659cbd 100644
--- a/frontend/src/views/make_a_wish_tour_social/canvas.js
+++ b/frontend/src/views/make_a_wish_tour_social/canvas.js
@@ -418,10 +418,14 @@ const redraw = async (canvas, options) => {
zIndex: 0,
});
- mainImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ mainImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
if (mainImage.width >= mainImage.height) {
mainImage.scaleToHeight(canvas.height);
diff --git a/frontend/src/views/make_a_wish_tour_social_A2/canvas.js b/frontend/src/views/make_a_wish_tour_social_A2/canvas.js
index 41983aca11434f319394e72735a8e851a3ac6613..06affff7233f05172977bc4e558069c9765c9eae 100644
--- a/frontend/src/views/make_a_wish_tour_social_A2/canvas.js
+++ b/frontend/src/views/make_a_wish_tour_social_A2/canvas.js
@@ -442,10 +442,14 @@ const redraw = async (canvas, options) => {
zIndex: 0,
});
- mainImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ mainImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
if (mainImage.width >= mainImage.height) {
mainImage.scaleToHeight(canvas.height);
diff --git a/frontend/src/views/make_a_wish_tour_social_wide/canvas.js b/frontend/src/views/make_a_wish_tour_social_wide/canvas.js
index 2548ba9d327d6c5a79c34fa593da0ea5112c5a4a..348f78d92a5e8776048d97ab0929ff71a424679e 100644
--- a/frontend/src/views/make_a_wish_tour_social_wide/canvas.js
+++ b/frontend/src/views/make_a_wish_tour_social_wide/canvas.js
@@ -412,10 +412,14 @@ const redraw = async (canvas, options) => {
zIndex: 0,
});
- mainImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ mainImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
if (mainImage.width >= mainImage.height) {
mainImage.scaleToHeight(canvas.height);
diff --git a/frontend/src/views/nakopneme_basic_photo_banner_fz/NakopnemeBasicPhotoBannerFZ.vue b/frontend/src/views/nakopneme_basic_photo_banner_fz/NakopnemeBasicPhotoBannerFZ.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c6a9a68491434251f90a7ca3c2c0cc91a6f2651b
--- /dev/null
+++ b/frontend/src/views/nakopneme_basic_photo_banner_fz/NakopnemeBasicPhotoBannerFZ.vue
@@ -0,0 +1,254 @@
+<script setup>
+import { watch, ref } from "vue";
+
+import COLORS from "../../colors";
+import PEOPLE from "../../people";
+import TEMPLATES from "../../templates";
+import DEFAULT_CONTRACTOR from "../../contractors";
+import {
+ generateDefaultBadges,
+ LOGO_POSITIONS,
+ generateLogoPositions,
+} from "../../logos";
+import {
+ loadFonts,
+ loadCanvasStorage,
+ setCanvasStorage,
+ updateAutoRedrawStorage,
+} 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 RangeInput from "../../components/inputs/RangeInput.vue";
+import InputSeparator from "../../components/inputs/InputSeparator.vue";
+import SelectInput from "../../components/inputs/SelectInput.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",
+ "bold 12px Roboto Condensed",
+]);
+
+export default {
+ components: {
+ Canvas,
+ Navbar,
+ MainContainer,
+ ImageInput,
+ LongTextInput,
+ ShortTextInput,
+ RangeInput,
+ SelectInput,
+ InputSeparator,
+ MultipleColorPicker,
+ },
+ data() {
+ const predefinedColors = {
+ base: {
+ name: "Základní barvy",
+ colors: {
+ background: COLORS.black,
+ highlight: COLORS.yellow1,
+ baseText: COLORS.white,
+ highlightedText: COLORS.black,
+ contractedByText: COLORS.gray1,
+ },
+ },
+ };
+
+ return {
+ mainImage: null,
+ mainText: null,
+ personName: null,
+ personPosition: null,
+ contractedBy: DEFAULT_CONTRACTOR,
+ logoImage: null,
+ logoPosition: LOGO_POSITIONS.top_right,
+ logoOptions: generateLogoPositions(["top_right", "top_left"]),
+ gradientHeightMultiplier: 1,
+ colorLabels: {
+ background: "Pozadí",
+ highlight: "Zvýraznění",
+ baseText: "Text",
+ highlightedText: "Zvýrazněný text",
+ },
+ predefinedColors: predefinedColors,
+ colors: predefinedColors.base.colors,
+ predefinedBadgeImages: generateDefaultBadges("defaultDark"),
+ autoRedraw: false,
+ };
+ },
+ async created() {
+ await loadCanvasStorage(this);
+ },
+ methods: {
+ async reloadCanvasProperties() {
+ const canvasProperties = {
+ mainImage: this.mainImage,
+ mainText: this.mainText,
+ logoPosition: this.logoPosition,
+ personName: this.personName,
+ personPosition: this.personPosition,
+ contractedBy: this.contractedBy,
+ logoImage: this.logoImage,
+ gradientHeightMultiplier: this.gradientHeightMultiplier,
+ colors: this.colors,
+ };
+
+ if (canvasProperties.mainText) {
+ window.fileName = canvasProperties.mainText;
+ }
+
+ await this.$refs.canvas.redraw(canvasProperties);
+
+ delete canvasProperties.colors;
+ setCanvasStorage(canvasProperties);
+ },
+ },
+ mounted() {
+ this.$watch(
+ (vm) => [
+ vm.mainImage,
+ vm.mainText,
+ vm.logoPosition,
+ vm.personName,
+ vm.personPosition,
+ vm.contractedBy,
+ vm.logoImage,
+ vm.gradientHeightMultiplier,
+ 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.basic_photo_banner"></Navbar>
+ </header>
+ <main>
+ <MainContainer>
+ <template v-slot:left>
+ <Canvas
+ ref="canvas"
+ :redrawFunction="redraw"
+ width="1080"
+ height="1350"
+ />
+ </template>
+
+ <template v-slot:right>
+ <ReloadButton :parentRefs="$refs" @click="reloadCanvasProperties" />
+ <AutoReloadCheckbox v-model="autoRedraw" />
+ <ImageInput
+ name="Obrázek"
+ v-model="mainImage"
+ :important="true"
+ zIndex="10"
+ />
+ <LongTextInput
+ name="Hlavní text"
+ v-model="mainText"
+ :important="true"
+ :highlightable="true"
+ zIndex="9"
+ />
+ <ShortTextInput
+ name="Jméno osoby"
+ v-model="personName"
+ v-model:relatedModel="personPosition"
+ :predefinedValues="PEOPLE"
+ :important="true"
+ zIndex="8"
+ />
+ <LongTextInput
+ ref="refPersonPosition"
+ name="Pozice osoby"
+ v-model="personPosition"
+ :important="false"
+ zIndex="7"
+ />
+
+ <InputSeparator />
+
+ <ImageInput
+ name="Obrázek loga"
+ v-model="logoImage"
+ :important="false"
+ :predefinedImages="predefinedBadgeImages"
+ :mustSelectPredefinedImage="true"
+ :disableImageInput="true"
+ zIndex="7"
+ />
+
+ <SelectInput
+ name="Pozice loga"
+ :options="logoOptions"
+ v-model="logoPosition"
+ zIndex="6"
+ />
+
+ <RangeInput
+ name="Výška gradientu"
+ v-model="gradientHeightMultiplier"
+ min="0"
+ max="3"
+ />
+
+ <MultipleColorPicker
+ name="Barvy"
+ v-model="colors"
+ :important="false"
+ :colorLabels="colorLabels"
+ :predefinedColors="predefinedColors"
+ :defaultPredefinedColors="predefinedColors.base"
+ zIndex="5"
+ ></MultipleColorPicker>
+
+ <ShortTextInput
+ name="Zadavatel a zpracovatel"
+ v-model="contractedBy"
+ :defaultValue="DEFAULT_CONTRACTOR"
+ :important="false"
+ zIndex="4"
+ />
+ </template>
+ </MainContainer>
+ </main>
+</template>
+
+<style>
+@import "vue-select/dist/vue-select.css";
+</style>
diff --git a/frontend/src/views/nakopneme_basic_photo_banner_fz/canvas.js b/frontend/src/views/nakopneme_basic_photo_banner_fz/canvas.js
new file mode 100644
index 0000000000000000000000000000000000000000..0bf1bf4bbe7dd542cddfe427c039f5d68a525a2d
--- /dev/null
+++ b/frontend/src/views/nakopneme_basic_photo_banner_fz/canvas.js
@@ -0,0 +1,272 @@
+import * as fabric from "fabric";
+import {
+ clearObjects,
+ sortObjects,
+ transformHighlightedText,
+ checkTextBoxHeight,
+ getSingleLineTextBoxWidth,
+} from "../../components/canvas/utils";
+import { PaddedHighlightingTextbox } from "../../components/canvas/textbox";
+import leftQuoteImage from '../../assets/template/nakopneme_basic_photo_banner/nakopneme_quote_left.png';
+import rightQuoteImage from '../../assets/template/nakopneme_basic_photo_banner/nakopneme_quote_right.png';
+
+let mainTextBox = null;
+let mainTextBoxBackground = null;
+
+let personNameText = null;
+let personInfoSeparator = null;
+let personPositionText = null;
+
+let mainImage = null;
+let logoImage = null;
+
+let contractedByTextbox = null;
+
+let mainImageSource = null;
+let previousLogoPosition = null;
+
+let leftQuote = null;
+let rightQuote = null;
+
+const redraw = async (canvas, options) => {
+ canvas.controlsAboveOverlay = true;
+
+ clearObjects(
+ [
+ mainTextBox,
+ mainTextBoxBackground,
+ personNameText,
+ personInfoSeparator,
+ personPositionText,
+ contractedByTextbox,
+ leftQuote,
+ rightQuote,
+ ],
+ canvas,
+ );
+
+ canvas.preserveObjectStacking = true;
+
+ const textMarginLeft = Math.ceil(canvas.width * 0.14);
+ const textMarginRight = Math.ceil(canvas.width * 0.075);
+
+ let mainTextMarginBottom = Math.ceil(canvas.height * 0.06);
+ const mainTextBackgroundMarginTop = Math.ceil(canvas.height * 0.1);
+ const mainTextSize = Math.ceil(canvas.height * 0.075);
+ const mainTextHeightLimit = Math.ceil(mainTextSize * 3.3);
+ const mainTextLineHeight = 0.9;
+
+ const bottomTextSize = Math.ceil(canvas.height * 0.055);
+ const nameTextMarginBottom = Math.ceil(canvas.height * 0.065);
+ const positionTextSideGap = Math.ceil(canvas.width * 0.01);
+ const positionTextSeparatorWidth = Math.ceil(canvas.width * 0.0035);
+ const positionTextMaxWidth = Math.ceil(canvas.width * 0.4);
+
+ const contractedByTextSize = Math.ceil(canvas.height * 0.02);
+ const contractedByTextMaxWidth = Math.ceil(canvas.width * 0.9);
+ const contractedByTextSidesMargin = Math.ceil(canvas.width * 0.03);
+
+ const logoWidth = Math.ceil(canvas.width * 0.13);
+ const logoSideMargin = Math.ceil(canvas.width * 0.07);
+
+ if (options.mainText !== null) {
+ /* BEGIN Main text render */
+
+ const mainText = options.mainText;
+ const mainTextWidth = canvas.width - textMarginLeft - textMarginRight;
+
+ const highlightedData = transformHighlightedText(
+ mainText,
+ mainTextSize,
+ mainTextWidth,
+ "Bebas Neue",
+ options.colors.highlight.value,
+ options.colors.highlightedText.value,
+ { padWhenDiacritics: true },
+ );
+
+ mainTextBox = new PaddedHighlightingTextbox(highlightedData.text, {
+ width: canvas.width,
+ left: 0,
+ textAlign: "center",
+ fontFamily: "Bebas Neue",
+ fontSize: mainTextSize,
+ lineHeight: mainTextLineHeight,
+ fill: "#000",
+ styles: highlightedData.styles,
+ selectable: false,
+ highlightPadding: canvas.height * 0.003,
+ zIndex: 10,
+ });
+
+ checkTextBoxHeight(mainTextBox, 4);
+
+ canvas.add(mainTextBox);
+
+ const mainTextBoxTop =
+ canvas.height - mainTextBox.height - mainTextMarginBottom;
+
+ mainTextBox.top = mainTextBoxTop - highlightedData.paddingBottom;
+
+ canvas.renderAll();
+
+ /* END Main text render */
+
+ /* BEGIN Main text background render */
+
+ const backgroundHeight =
+ canvas.height - mainTextBoxTop + mainTextBackgroundMarginTop;
+
+ mainTextBoxBackground = new fabric.Rect({
+ width: canvas.width + 30, // FIXME: Whhhhyyyyyy????
+ height: backgroundHeight + 150 * options.gradientHeightMultiplier,
+ left: -20,
+ top:
+ mainTextBoxTop -
+ mainTextBackgroundMarginTop -
+ backgroundHeight * (options.gradientHeightMultiplier - 1) -
+ 150,
+ fill: new fabric.Gradient({
+ type: "linear",
+ gradientUnits: "pixels",
+ coords: {
+ x1: 0,
+ y1: 0,
+ x2: 0,
+ y2: backgroundHeight * options.gradientHeightMultiplier,
+ },
+ colorStops: [
+ {
+ offset: 0,
+ color: "#ffffff00"
+ },
+ {
+ offset: 0.5,
+ color: "#fdc800",
+ },
+ {
+ offset: 0.6,
+ color: "#fdc800",
+ },
+ {
+ offset: 1,
+ color: "#bd7eb4",
+ },
+ ],
+ }),
+ selectable: false,
+ zIndex: 9,
+ });
+
+ canvas.add(mainTextBoxBackground);
+
+ /* END Main text background render */
+ }
+
+ /* BEGIN Logo render */
+
+ // A logo is provided, and it either hasn't been rendered yet or is a new one.
+ const createNewLogo =
+ (options.logoImage !== null &&
+ (logoImage === null ||
+ (options.logoImage !== null &&
+ options.logoImage !== logoImage._element))) ||
+ previousLogoPosition != options.logoPosition.id;
+
+ previousLogoPosition = options.logoPosition.id;
+
+ if (createNewLogo) {
+ canvas.remove(logoImage);
+
+ logoImage = new fabric.Image(options.logoImage, { selectable: false });
+ logoImage.scaleToWidth(logoWidth);
+
+ if (options.logoPosition.id == "top-right") {
+ logoImage.set({
+ left: canvas.width - logoWidth - logoSideMargin,
+ top: logoSideMargin,
+ zIndex: 11,
+ });
+ } else {
+ logoImage.set({
+ left: logoSideMargin,
+ top: logoSideMargin,
+ zIndex: 11,
+ });
+ }
+
+ canvas.add(logoImage);
+ }
+
+ /* END Logo 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: "#000",
+ selectable: false,
+ zIndex: 10,
+ });
+
+ checkTextBoxHeight(contractedByTextbox, 1);
+
+ canvas.add(contractedByTextbox);
+ }
+
+ /* END Contracted by render */
+
+ /* BEGIN Main image render */
+
+ if (
+ options.mainImage !== null &&
+ (!canvas.contains(mainImage) ||
+ mainImage === null ||
+ options.mainImage.src !== mainImageSource)
+ ) {
+ if (mainImage !== null) {
+ canvas.remove(mainImage);
+ }
+
+ mainImage = new fabric.Image(options.mainImage, {
+ left: 0,
+ top: 0,
+ zIndex: 0,
+ });
+
+ mainImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
+
+
+ if (mainImage.width >= mainImage.height) {
+ mainImage.scaleToHeight(canvas.height);
+ } else {
+ mainImage.scaleToWidth(canvas.width);
+ }
+
+ canvas.add(mainImage);
+ mainImageSource = options.mainImage.src;
+ // canvas.centerObject(mainImage)
+ } else if (mainImage !== null && options.mainImage === null) {
+ canvas.remove(mainImage);
+ }
+
+ /* END Main image render */
+
+ sortObjects(canvas);
+};
+
+export default redraw;
diff --git a/frontend/src/views/newspaper_quote_bottom/canvas.js b/frontend/src/views/newspaper_quote_bottom/canvas.js
index b4e55d260386092c1bbe574f87bfe3e880257e32..524cfd6be4ed2294a531fb0430fbcb889496ef48 100644
--- a/frontend/src/views/newspaper_quote_bottom/canvas.js
+++ b/frontend/src/views/newspaper_quote_bottom/canvas.js
@@ -404,10 +404,14 @@ const redraw = async (canvas, options) => {
zIndex: 0,
});
- mainImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ mainImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
if (mainImage.width >= mainImage.height) {
mainImage.scaleToHeight(canvas.height);
diff --git a/frontend/src/views/people_banner_with_custom_text/canvas.js b/frontend/src/views/people_banner_with_custom_text/canvas.js
index f9b3946ea4e2e998c324195eeb3eaa316961e3ef..ecc1ccd3838e0be1e03742e7dce94fb71b0b0370 100644
--- a/frontend/src/views/people_banner_with_custom_text/canvas.js
+++ b/frontend/src/views/people_banner_with_custom_text/canvas.js
@@ -75,10 +75,14 @@ const redraw = async (canvas, options) => {
zIndex: 0,
});
- personImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ personImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
if (personImage.width >= personImage.height) {
personImage.scaleToHeight(canvas.height);
diff --git a/frontend/src/views/people_banner_with_predefined_text/canvas.js b/frontend/src/views/people_banner_with_predefined_text/canvas.js
index dda2677d4d6e44be8b8d359c43b8414b84652da6..25f960bb950cc394f313fcb045553fe16be0a372 100644
--- a/frontend/src/views/people_banner_with_predefined_text/canvas.js
+++ b/frontend/src/views/people_banner_with_predefined_text/canvas.js
@@ -75,10 +75,14 @@ const redraw = async (canvas, options) => {
zIndex: 0,
});
- personImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ personImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
if (personImage.width >= personImage.height) {
personImage.scaleToHeight(canvas.height);
diff --git a/frontend/src/views/poster/canvas.js b/frontend/src/views/poster/canvas.js
index 3de73499b8a5d32abe173491f846ab54a6fde7a4..66f85d3004697de88b49ba33e58c123513481840 100644
--- a/frontend/src/views/poster/canvas.js
+++ b/frontend/src/views/poster/canvas.js
@@ -123,10 +123,14 @@ const redraw = async (canvas, options) => {
zIndex: 10,
});
- mainImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ mainImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
if (mainImage.width >= mainImage.height) {
mainImage.scaleToHeight(canvas.height);
diff --git a/frontend/src/views/reel/canvas.js b/frontend/src/views/reel/canvas.js
index 9b5941eb5304fa442d11aa369bd5e0764140391a..0f202fa7aa0fe2a9ecbd26b4d03796668fc3a291 100644
--- a/frontend/src/views/reel/canvas.js
+++ b/frontend/src/views/reel/canvas.js
@@ -60,10 +60,14 @@ const redraw = async (canvas, options) => {
zIndex: 0,
});
- mainImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ mainImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
if (mainImage.width >= mainImage.height) {
mainImage.scaleToHeight(canvas.height);
diff --git a/frontend/src/views/regional_success/canvas.js b/frontend/src/views/regional_success/canvas.js
index 2c8a61657453bac76eacc802662aaa7d49d8652c..c2eeaece9e187cde937be32c7bc6f57aa81730fb 100644
--- a/frontend/src/views/regional_success/canvas.js
+++ b/frontend/src/views/regional_success/canvas.js
@@ -227,10 +227,14 @@ const redraw = async (canvas, options) => {
zIndex: 3,
});
- mainImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ mainImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
canvas.add(mainImage);
mainImageSource = options.mainImage.src;
diff --git a/frontend/src/views/right_person_event/canvas.js b/frontend/src/views/right_person_event/canvas.js
index 6b3dcdda2275363bc4e37d5225c55ca4c4db3feb..f13d4ddaa946633463ab3c853e4dd05738e64890 100644
--- a/frontend/src/views/right_person_event/canvas.js
+++ b/frontend/src/views/right_person_event/canvas.js
@@ -76,10 +76,14 @@ const redraw = async (canvas, options) => {
zIndex: 0,
});
- personImage.controls = {
- ...fabric.Image.prototype.controls,
- mtr: new fabric.Control({ visible: false }),
- };
+ personImage.setControlsVisibility({
+ // corners (uniform scale)
+ tl: true, tr: true, bl: true, br: true,
+ // mids (scale X/Y independently)
+ ml: true, mr: true, mt: true, mb: true,
+ // rotation
+ mtr: false,
+ });
if (personImage.width >= personImage.height) {
personImage.scaleToHeight(canvas.height);