wip - predefined color palettes

Graphics Generator v2/src/components/inputs/ImageInput.vue

@@ -77,6 +77,7 @@ export default {
             :important="this.important"
             icon="file-picture"
         ></InputHeading>
+
         <hr class="hr--unstyled border-t-gray-300">
 
         <div class="flex justify-between gap-2">

Graphics Generator v2/src/components/inputs/colors/ColorPicker.vue

@@ -14,7 +14,6 @@ export default {
 
         for (let [identifier, color] of Object.entries(COLORS)) {
             colorOptions.push({
-                identifier: identifier,
                 name: color.name,
                 value: color.value
             })

Graphics Generator v2/src/components/inputs/colors/MultipleColorPicker.vue

 <script setup>
-import InputHeading from "../InputHeading.vue"
-import ColorPicker from "./ColorPicker.vue"
+import InputHeading from '../InputHeading.vue'
+import ColorPicker from './ColorPicker.vue'
+
+import VueSelect from 'vue-select'
 </script>
 
 <script>
 export default {
     components: { InputHeading, ColorPicker },
-    props: ['name', 'important', 'modelValue'],
+    props: [
+        'name',
+        'important',
+        'colorLabels',
+        'predefinedColors',
+        'defaultPredefinedColors',
+        'modelValue'
+    ],
     emits: ['update:modelValue'],
     data () {
+        let predefinedColorOptions = []
+
         return {
-            colors: this.modelValue
+            currentColors: this.modelValue,
+            currentPredefinedColors: this.defaultPredefinedColors,
+            predefinedColorOptions: Object.values(this.predefinedColors)
         }
     },
     watch: {
-        colors (value) {
+        currentColors (value) {
             this.$emit('update:modelValue', value);
         }
+    },
+    methods: {
+        setPredefinedColors (value) {
+            this.currentPredefinedColors = value
+
+            for (const [colorKey, colorValue] of Object.entries(value.colors)) {
+                console.log(colorKey, colorValue)
+                this.currentColors[colorKey] = colorValue
+            }
+        }
     }
 }
 </script>
@@ -24,17 +47,26 @@ export default {
 <template>
     <section class="flex flex-col gap-2 bg-gray-100 p-4 drop-shadow-md">
         <InputHeading
-            :name="this.name"
-            :important="this.important"
+            :name="name"
+            :important="important"
             icon="equalizer"
         ></InputHeading>
+
+        <VueSelect
+            :options="predefinedColorOptions"
+            :clearable="false"
+            :modelValue="currentPredefinedColors"
+            @update:modelValue="setPredefinedColors"
+            label="name"
+        ></VueSelect>
+
         <ul
             class="flex flex-col gap-2"
-            v-for="templateColorIdentifier in Object.keys(colors)"
+            v-for="templateColorIdentifier in Object.keys(this.currentColors)"
         >
             <ColorPicker
-                :label="this.colors[templateColorIdentifier].label"
-                v-model="this.colors[templateColorIdentifier].color"
+                :label="colorLabels[templateColorIdentifier]"
+                v-model="currentColors[templateColorIdentifier]"
             ></ColorPicker>
         </ul>
     </section>

Graphics Generator v2/src/views/basic_photo_banner/BasicPhotoBanner.vue

@@ -21,34 +21,44 @@ import defaultLogoDark from '../../assets/logos/default-dark.png'
 <script>
 export default {
     data () {
+        const predefinedColors = {
+            base: {
+                name: 'Základní barvy',
+                colors: {
+                    background: COLORS.black,
+                    highlight: COLORS.yellow1,
+                    arrow: COLORS.yellow1,
+                    baseTextColor: COLORS.white,
+                    highlightedTextColor: COLORS.black
+                }
+            },
+            black_on_yellow: {
+                name: 'Černá na žluté',
+                colors: {
+                    background: COLORS.yellow1,
+                    highlight: COLORS.black,
+                    arrow: COLORS.black,
+                    baseTextColor: COLORS.black,
+                    highlightedTextColor: COLORS.white
+                }
+            }
+        }
+
         return {
             mainImage: null,
             mainText: null,
             personName: null,
             personPosition: null,
             logoImage: null,
-            colors: {
-                background: {
-                    label: 'Barva pozadí',
-                    color: COLORS.black,
-                },
-                highlight: {
-                    label: 'Barva zvýraznění',
-                    color: COLORS.yellow1
-                },
-                arrow: {
-                    label: 'Barva šipky',
-                    color: COLORS.yellow1
-                },
-                baseTextColor: {
-                    label: 'Barva textu',
-                    color: COLORS.white
-                },
-                highlightedTextColor: {
-                    label: 'Barva zvýrazněného textu',
-                    color: COLORS.black
-                }
+            colorLabels: {
+                background: 'Barva pozadí',
+                highlight: 'Barva zvýraznění',
+                arrow: 'Barva šipky',
+                baseTextColor: 'Barva textu',
+                highlightedTextColor: 'Barva zvýrazněného textu'
             },
+            predefinedColors: predefinedColors,
+            colors: predefinedColors.base.colors,
             predefinedImages: [
                 {
                     name: 'Základní - světlé',
@@ -144,6 +154,9 @@ export default {
                     name="Barvy"
                     v-bind:important="false"
                     v-model="colors"
+                    :colorLabels="colorLabels"
+                    :predefinedColors="predefinedColors"
+                    :defaultPredefinedColors="predefinedColors.base"
                 ></MultipleColorPicker>
             </template>
         </MainContainer>

Graphics Generator v2/src/views/basic_photo_banner/canvas.js

@@ -30,7 +30,7 @@ const redraw = async (canvas, options) => {
     const textMarginRight = Math.ceil(canvas.width * 0.075)
 
     let mainTextMarginBottom = Math.ceil(canvas.height * 0.06)
-    const mainTextBackgroundMarginTop = Math.ceil(canvas.height * 0.06)
+    const mainTextBackgroundMarginTop = Math.ceil(canvas.height * 0.14)
     const mainTextSize = Math.ceil(canvas.height * 0.0725)
     const mainTextHeightLimit = Math.ceil(mainTextSize * 3.3)
     const mainTextLineHeight = 0.98  // Hacky fix for highlight seam
@@ -89,7 +89,7 @@ const redraw = async (canvas, options) => {
                     fontFamily: 'Roboto Condensed',
                     fontSize: nameTextSize,
                     styles: styles,
-                    fill: options.colors.baseTextColor.color.value,
+                    fill: options.colors.baseTextColor.value,
                     selectable: false,
                     zIndex: 10
                 }
@@ -105,8 +105,8 @@ const redraw = async (canvas, options) => {
 
         const highlightedData = transformHighlightedText(
             options.mainText,
-            options.colors.highlight.color.value,
-            options.colors.highlightedTextColor.color.value
+            options.colors.highlight.value,
+            options.colors.highlightedTextColor.value
         )
 
         mainTextBox = new fabric.Textbox(
@@ -118,7 +118,7 @@ const redraw = async (canvas, options) => {
                 fontFamily: 'Bebas Neue',
                 fontSize: mainTextSize,
                 lineHeight: mainTextLineHeight,
-                fill: options.colors.baseTextColor.color.value,
+                fill: options.colors.baseTextColor.value,
                 styles: highlightedData.styles,
                 selectable: false,
                 zIndex: 10
@@ -168,7 +168,7 @@ const redraw = async (canvas, options) => {
                     + arrowMarginTop
                 ),
                 left: arrowMarginLeft,
-                fill: options.colors.arrow.color.value,
+                fill: options.colors.arrow.value,
                 selectable: false,
                 zIndex: 10
             }
@@ -181,17 +181,40 @@ const redraw = async (canvas, options) => {
 
         /* BEGIN Main text background render */
 
-        mainTextBoxBackground = new fabric.Rect(
-            {
-                width: canvas.width,
-                height: (
+        const backgroundHeight = (
             canvas.height
             - mainTextBox.top
             + mainTextBackgroundMarginTop
-                ),
+        )
+
+        mainTextBoxBackground = new fabric.Rect(
+            {
+                width: canvas.width,
+                height: backgroundHeight,
                 left: 0,
                 top: mainTextBox.top - mainTextBackgroundMarginTop,
-                fill: options.colors.background.color.value,
+                fill: new fabric.Gradient({
+                    type: 'linear',
+                    gradientUnits: 'pixels',
+                    coords: {
+                        x1: 0, y1: 0,
+                        x2: 0, y2: backgroundHeight
+                    },
+                    colorStops: [
+                        {
+                            offset: 1,
+                            color: options.colors.background.value
+                        },
+                        {
+                            offset: 0.45,
+                            color: options.colors.background.value
+                        },
+                        {
+                            offset: 0,
+                            color: `${options.colors.background.value}00`
+                        }
+                    ]
+                }),
                 selectable: false,
                 zIndex: 9
             }