Fix BarBackgrounds when switching from one layout to the other

Author: Michael-Schaer

resources/js/components/molecules/MAlignment.vue

@@ -57,12 +57,6 @@
         watch: {
             alignment(newVal, oldVal) {
                 this.applyCorrectStyleSet(newVal);
-            },
-
-            getStyleSet(newVal, oldVal) {
-                if((newVal === 'green' || newVal === 'greenCentered') && this.alignment === Alignments.center) {
-                    this.$store.commit('canvas/setAlignment', Alignments.left);
-                }
             }
         },
         methods: {

resources/js/components/molecules/MBarBlock.vue

@@ -48,6 +48,7 @@
     import {
         BarSchemes,
         BarTypes,
+        BackgroundTypes,
         ColorSchemes,
         StyleSetTypes
     } from "../../service/canvas/Constants";
@@ -70,6 +71,7 @@
                 colorSchema: 'canvas/getColorSchema',
                 bars: 'canvas/getBars',
                 textFitsImage: 'canvas/getTextFitsImage',
+                backgroundType: 'canvas/getBackgroundType',
             }),
 
             fontSizePercent: {
@@ -131,6 +133,72 @@
                 )
             },
 
+            updateBarSchemas() {
+                // Handle bars based on layout and color scheme
+                if (this.bars.length > 0 && this.bars[0].type === BarTypes.headline) {
+                    const schema = this.getSchemaForBar(0);
+                    this.$store.dispatch('canvas/setBar', {
+                        index: 0,
+                        bar: { ...this.bars[0], schema }
+                    });
+                }
+
+                // Force the second headline to use the scheme for current layout
+                if (this.bars.length > 1 && this.bars[1].type === BarTypes.headline) {
+                    const schema = this.getSchemaForBar(1);
+                    this.$store.dispatch('canvas/setBar', {
+                        index: 1,
+                        bar: { ...this.bars[1], schema }
+                    });
+                }
+
+                // Handle third headline bar if present (for green layout with 3 headline bars)
+                if (this.bars.length > 2 && this.bars[2].type === BarTypes.headline && 
+                    !(this.styleSet === StyleSetTypes.green2025 || this.styleSet === StyleSetTypes.green2025Centered)) {
+                    this.$store.dispatch('canvas/setBar', {
+                        index: 2,
+                        bar: { ...this.bars[2], schema: BarSchemes.magenta }
+                    });
+                }
+
+                // For subline, use the computed sublineSchema which is based on current style set
+                if (this.bars.length > 2 && this.bars[2].type === BarTypes.subline) {
+                    this.$store.dispatch('canvas/setBar', {
+                        index: 2,
+                        bar: { ...this.bars[2], schema: this.sublineSchema }
+                    });
+                }
+            },
+
+            getSchemaForBar(index) {
+                // Green2025 layout
+                if (this.styleSet === StyleSetTypes.green2025 || this.styleSet === StyleSetTypes.green2025Centered) {
+                    return BarSchemes.green2025;
+                }
+
+                // Young layout
+                if (this.styleSet === StyleSetTypes.young) {
+                    if(index === 0) {
+                    return (this.colorSchema === ColorSchemes.white)
+                        ? BarSchemes.white
+                        : BarSchemes.green;
+                    } else {
+                        return BarSchemes.magenta;
+                    }
+                }
+
+                // Green layout
+                const backgroundRequiresGreen =
+                    this.backgroundType === BackgroundTypes.transparent ||
+                    this.backgroundType === BackgroundTypes.image;
+
+                if (index === 0 || (index === 1 && this.bars.length >2 && this.bars[2].type === BarTypes.headline)) {
+                    return backgroundRequiresGreen ? BarSchemes.green : BarSchemes.white;
+                }
+
+                return BarSchemes.magenta;
+            },
+
             maybeRemoveSubline() {
                 // remove sublines for style set young
                 if (this.styleSet === StyleSetTypes.young) {
@@ -148,7 +216,9 @@
                     // remove first primary headline if there are two
                     const primaryHeadlines = this.bars.filter(
                         bar => bar.type === BarTypes.headline
-                            && (bar.schema === BarSchemes.white || bar.schema === BarSchemes.green)
+                            && (bar.schema === BarSchemes.white ||
+                                bar.schema === BarSchemes.green ||
+                                bar.schema === BarSchemes.green2025)
                     );
                     if (primaryHeadlines.length > 1) {
                         this.$store.commit('canvas/removeBar', {index: 0})
@@ -157,7 +227,8 @@
                     // remove first secondary headline if there are two
                     const secondaryHeadlines = this.bars.filter(
                         bar => bar.type === BarTypes.headline
-                            && (bar.schema === BarSchemes.magenta)
+                            && (bar.schema === BarSchemes.magenta ||
+                                bar.schema === BarSchemes.transparent2025)
                     );
                     if (secondaryHeadlines.length > 1) {
                         this.$store.commit('canvas/removeBar', {index: 1})
@@ -168,8 +239,17 @@
 
         watch: {
             styleSet() {
-                this.maybeRemoveSubline()
-                this.maybeRemoveHeadline()
+                this.maybeRemoveSubline();
+                this.maybeRemoveHeadline();
+
+                this.$nextTick(() => {
+                    this.updateBarSchemas();
+                });
+            },
+            colorSchema() {
+                this.$nextTick(() => {
+                    this.updateBarSchemas();
+                });
             },
             textFitsImage(val) {
                 if (!val) {

resources/js/components/organisms/OImagery.vue

@@ -72,7 +72,7 @@
 </template>
 
 <script>
-import {BackgroundTypes, HugeImageSurfaceLimit, StyleSetTypes} from "../../service/canvas/Constants";
+import {BackgroundTypes, HugeImageSurfaceLimit, StyleSetTypes, Alignments} from "../../service/canvas/Constants";
 import MBarBlock from "../molecules/MBarBlock";
 import MBackgroundBlock from "../molecules/MBackgroundBlock";
 import MBorderBlock from "../molecules/MBorderBlock";
@@ -122,6 +122,7 @@ let requestedAnimationFrame;
                 context: null,
                 backgroundTypes: BackgroundTypes,
                 styleSetTypes: StyleSetTypes,
+                alignments: Alignments,
 
                 viewHeight: document.documentElement.clientHeight,
                 viewWidth: document.documentElement.clientWidth,
@@ -538,6 +539,18 @@ let requestedAnimationFrame;
             },
             styleSet(value) {
                 this.engine.styleSet = value;
+
+                const currentAlignment = this.$store.getters['canvas/getAlignment'];
+
+                if ((value === StyleSetTypes.green || value === StyleSetTypes.green2025) &&
+                    currentAlignment !== Alignments.right) {
+                    this.$store.dispatch('canvas/setAlignment', Alignments.left);
+                } else if (value === StyleSetTypes.greenCentered ||
+                          value === StyleSetTypes.green2025Centered ||
+                          value === StyleSetTypes.young) {
+                    this.$store.dispatch('canvas/setAlignment', Alignments.center);
+                }
+
                 this.draw().catch(console.debug);
             },
             format(value) {