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);