<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 { 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: "Černé pozadí", colors: { background: COLORS.black, highlight: COLORS.yellow1, baseText: COLORS.white, nameText: COLORS.yellow1, highlightedText: COLORS.black, contractedByText: COLORS.gray1, }, }, white: { name: "Bílé pozadí", colors: { background: COLORS.white, highlight: COLORS.yellow1, baseText: COLORS.black, nameText: COLORS.black, highlightedText: COLORS.black, contractedByText: COLORS.gray1, }, }, }; return { mainImage: null, mainText: null, personName: null, personPosition: null, contractedBy: DEFAULT_CONTRACTOR, colorLabels: { background: "Pozadí", highlight: "Zvýraznění", baseText: "Text", highlightedText: "Zvýrazněný text", }, predefinedColors: predefinedColors, colors: predefinedColors.base.colors, autoRedraw: false, }; }, async created() { await loadCanvasStorage(this); }, methods: { async reloadCanvasProperties() { const canvasProperties = { mainImage: this.mainImage, mainText: this.mainText, personName: this.personName, personPosition: this.personPosition, contractedBy: this.contractedBy, 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.personName, vm.personPosition, vm.contractedBy, 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="2000" height="2000" /> </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 /> <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>