Fix missing bar when switching back to green layout, refactor

Author: Michael-Schaer

resources/js/components/molecules/MBarBlock.vue

@@ -50,7 +50,8 @@
         BarTypes,
         BackgroundTypes,
         ColorSchemes,
-        StyleSetTypes
+        StyleSetTypes,
+        Alignments
     } from "../../service/canvas/Constants";
     import ABar from "../atoms/ABar";
 
@@ -234,13 +235,47 @@
                         this.$store.commit('canvas/removeBar', {index: 1})
                     }
                 }
+            },
+
+            maybeAddHeadline() {
+                // Green and young layouts need at least 2 headline bars
+                if ((this.styleSet !== StyleSetTypes.green2025 &&
+                     this.styleSet !== StyleSetTypes.green2025Centered) &&
+                     this.bars.filter(bar => bar.type === BarTypes.headline).length === 1) {
+
+                    const secondHeadline = {
+                        type: BarTypes.headline,
+                        schema: BarSchemes.magenta,
+                        text: 'Headline',
+                        canvas: null,
+                        padding: 0,
+                    };
+
+                    this.$store.dispatch(
+                        'canvas/addBar',
+                        {index: 1, bar: secondHeadline}
+                    );
+                }
             }
         },
 
         watch: {
             styleSet() {
                 this.maybeRemoveSubline();
                 this.maybeRemoveHeadline();
+                this.maybeAddHeadline();
+
+                // Handle alignment based on style set
+                const currentAlignment = this.$store.getters['canvas/getAlignment'];
+
+                if ((this.styleSet === StyleSetTypes.green || this.styleSet === StyleSetTypes.green2025) &&
+                    currentAlignment !== Alignments.left) {
+                    this.$store.dispatch('canvas/setAlignment', Alignments.left);
+                } else if (this.styleSet === StyleSetTypes.greenCentered ||
+                          this.styleSet === StyleSetTypes.green2025Centered ||
+                          this.styleSet === StyleSetTypes.young) {
+                    this.$store.dispatch('canvas/setAlignment', Alignments.center);
+                }
 
                 this.$nextTick(() => {
                     this.updateBarSchemas();

resources/js/components/organisms/OImagery.vue

@@ -72,7 +72,7 @@
 </template>
 
 <script>
-import {BackgroundTypes, HugeImageSurfaceLimit, StyleSetTypes, Alignments} from "../../service/canvas/Constants";
+import {BackgroundTypes, HugeImageSurfaceLimit, StyleSetTypes} from "../../service/canvas/Constants";
 import MBarBlock from "../molecules/MBarBlock";
 import MBackgroundBlock from "../molecules/MBackgroundBlock";
 import MBorderBlock from "../molecules/MBorderBlock";
@@ -122,7 +122,6 @@ let requestedAnimationFrame;
                 context: null,
                 backgroundTypes: BackgroundTypes,
                 styleSetTypes: StyleSetTypes,
-                alignments: Alignments,
 
                 viewHeight: document.documentElement.clientHeight,
                 viewWidth: document.documentElement.clientWidth,
@@ -539,18 +538,6 @@ 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) {