fix(HappyHare): Retains the correct font size for filament status messages (#1788)

Signed-off-by: Paul Morgan <moggieuk@hotmail.com>
Co-authored-by: Pedro Lamas <pedrolamas@gmail.com>

Author: moggieuk

src/components/widgets/mmu/MmuCard.vue

@@ -172,9 +172,6 @@
             <div class="text--disabled smaller-font">
               {{ toolchangeText }}
             </div>
-            <div class="min-height-text">
-              {{ statusText }}
-            </div>
             <mmu-filament-status />
             <template v-if="showClogDetection">
               <div class="text-center">
@@ -318,31 +315,6 @@ export default class MmuCard extends Mixins(StateMixin, MmuMixin) {
     return this.$typedState.config.uiSettings.mmu.showDetails
   }
 
-  get statusText (): string {
-    let posStr: string = ''
-    if (['complete', 'error', 'cancelled', 'started'].includes(this.printState)) {
-      posStr = this.capitalize(this.printState)
-    } else if (this.action === 'Idle') {
-      if (this.printState === 'printing') {
-        posStr = `Printing (${this.numToolchanges}`
-        if (this.slicerToolMap?.total_toolchanges) posStr += `/${this.slicerToolMap.total_toolchanges}`
-        posStr += ' swaps)'
-      } else {
-        posStr = this.filament !== 'Unloaded' ? `Filament: ${this.filamentPosition}mm` : 'Filament: Unloaded'
-      }
-    } else if (this.action === 'Loading' || this.action === 'Unloading') {
-      posStr = `${this.action}: ${this.filamentPosition}mm`
-    } else {
-      posStr = this.action ?? ''
-    }
-    return posStr
-  }
-
-  private capitalize (str: string): string {
-    if (!str) return str
-    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
-  }
-
   handleSyncSpoolman () {
     this.sendGcode('MMU_SPOOLMAN REFRESH=1 QUIET=1', this.$waits.onMmuSpoolman)
   }
@@ -390,9 +362,4 @@ export default class MmuCard extends Mixins(StateMixin, MmuMixin) {
     min-height: 1.0em;
     line-height: 1.0em;
 }
-
-.min-height-text {
-    min-height: 1.1em;
-    line-height: 1.1em;
-}
 </style>

src/components/widgets/mmu/MmuFilamentStatus.vue

@@ -1,7 +1,7 @@
 <template>
   <svg
     ref="filStatusSvg"
-    viewBox="140 20 285 421"
+    viewBox="140 0 285 441"
     preserveAspectRatio="xMidYMid meet"
     class="svg-colors"
   >
@@ -38,12 +38,12 @@
           stroke-width="1.5"
         />
         <path
-          d="M-15 -4 L-6 0 L-15 4 Z"
+          d="m-15-4 9 4-9 4Z"
           stroke-width="1"
           fill-opacity="0.6"
         />
         <path
-          d="M8 40 L 28 40"
+          d="M8 40h20"
           stroke-width="4"
         />
         <text
@@ -75,12 +75,12 @@
           fill-opacity="0.6"
         />
         <path
-          d="M-3 10 0 10 M-3 22 0.5 22 M-3 34.5 0 34.5"
+          d="M-3 10h3m-3 12H.5M-3 34.5h3"
           stroke-width="2"
           stroke-opacity="0.6"
         />
         <path
-          d="M8 0 L 28 0"
+          d="M8 0h20"
           stroke-width="4"
         />
       </g>
@@ -211,6 +211,14 @@
       </g>
     </defs>
 
+    <text
+      x="282"
+      y="18"
+      font-size="16px"
+      text-anchor="middle"
+    >
+      {{ statusText }}
+    </text>
     <rect
       x="150"
       y="30"
@@ -644,6 +652,31 @@ export default class MmuFilamentStatus extends Mixins(StateMixin, MmuMixin) {
     return POSITIONS.END_BOWDEN
   }
 
+  get statusText (): string {
+    let posStr: string = ''
+    if (['complete', 'error', 'cancelled', 'started'].includes(this.printState)) {
+      posStr = this.capitalize(this.printState)
+    } else if (this.action === this.ACTION_IDLE) {
+      if (this.printState === 'printing') {
+        posStr = `Printing (${this.numToolchanges}`
+        if (this.slicerToolMap?.total_toolchanges) posStr += `/${this.slicerToolMap?.total_toolchanges}`
+        posStr += ' swaps)'
+      } else {
+        posStr = this.filament !== 'Unloaded' ? `Filament: ${this.filamentPosition} mm` : 'Filament: Unloaded'
+      }
+    } else if (this.action === this.ACTION_LOADING || this.action === this.ACTION_UNLOADING) {
+      posStr = `${this.action}: ${this.filamentPosition} mm`
+    } else {
+      posStr = this.action ?? ''
+    }
+    return posStr
+  }
+
+  private capitalize (str: string): string {
+    if (!str) return str
+    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
+  }
+
   get toolheadSensor () {
     return this.sensors['toolhead']
   }

src/mixins/mmu.ts

@@ -348,19 +348,19 @@ export default class MmuMixin extends Vue {
     return this.mmuState?.action
   }
 
-  readonly ACTION_IDLE: string = 'Idle'
-  readonly ACTION_LOADING: string = 'Loading'
-  readonly ACTION_LOADING_EXTRUDER: string = 'Loading Ext'
-  readonly ACTION_UNLOADING: string = 'Unloading'
-  readonly ACTION_UNLOADING_EXTRUDER: string = 'Unloading Ext'
-  readonly ACTION_FORMING_TIP: string = 'Forming Tip'
-  readonly ACTION_CUTTING_TIP: string = 'Cutting Tip'
-  readonly ACTION_HEATING: string = 'Heating'
-  readonly ACTION_CHECKING: string = 'Checking'
-  readonly ACTION_HOMING: string = 'Homing'
-  readonly ACTION_SELECTING: string = 'Selecting'
-  readonly ACTION_CUTTING_FILAMENT: string = 'Cutting Filament'
-  readonly ACTION_PURGING: string = 'Purging'
+  readonly ACTION_IDLE = 'Idle'
+  readonly ACTION_LOADING = 'Loading'
+  readonly ACTION_LOADING_EXTRUDER = 'Loading Ext'
+  readonly ACTION_UNLOADING = 'Unloading'
+  readonly ACTION_UNLOADING_EXTRUDER = 'Unloading Ext'
+  readonly ACTION_FORMING_TIP = 'Forming Tip'
+  readonly ACTION_CUTTING_TIP = 'Cutting Tip'
+  readonly ACTION_HEATING = 'Heating'
+  readonly ACTION_CHECKING = 'Checking'
+  readonly ACTION_HOMING = 'Homing'
+  readonly ACTION_SELECTING = 'Selecting'
+  readonly ACTION_CUTTING_FILAMENT = 'Cutting Filament'
+  readonly ACTION_PURGING = 'Purging'
 
   get hasBypass (): boolean {
     return this.mmuState?.has_bypass ?? false
@@ -407,10 +407,10 @@ export default class MmuMixin extends Vue {
     return this.mmuState?.spoolman_support ?? 'off'
   }
 
-  readonly SPOOLMAN_OFF: string = 'off' // Spoolman disabled
-  readonly SPOOLMAN_READONLY: string = 'readonly' // Get filament attributes only
-  readonly SPOOLMAN_PUSH: string = 'push' // Local gatemap is the source or truth
-  readonly SPOOLMAN_PULL: string = 'pull' // Spoolman db is the source of truth
+  readonly SPOOLMAN_OFF = 'off' // Spoolman disabled
+  readonly SPOOLMAN_READONLY = 'readonly' // Get filament attributes only
+  readonly SPOOLMAN_PUSH = 'push' // Local gatemap is the source of truth
+  readonly SPOOLMAN_PULL = 'pull' // Spoolman db is the source of truth
 
   get sensors (): Record<string, boolean | null> {
     return this.mmuState?.sensors ?? {}
@@ -420,8 +420,8 @@ export default class MmuMixin extends Vue {
     return this.mmuState?.espooler_active ?? ''
   }
 
-  readonly ESPOOLER_REWIND: string = 'rewind'
-  readonly ESPOOLER_ASSIST: string = 'assist'
+  readonly ESPOOLER_REWIND = 'rewind'
+  readonly ESPOOLER_ASSIST = 'assist'
 
   /*
      * Optional printer variables based on selector type
@@ -494,14 +494,14 @@ export default class MmuMixin extends Vue {
     return this.$typedState.printer.printer['gcode_macro _MMU_LED_VARS']?.default_status_effect ?? 'off'
   }
 
-  readonly LED_OPTIONS: string[] = ['off', 'gate_status', 'filament_color', 'slicer_color']
-  readonly LED_STATUS_OPTIONS: string[] = [...this.LED_OPTIONS, 'on']
+  readonly LED_OPTIONS = ['off', 'gate_status', 'filament_color', 'slicer_color'] as const
+  readonly LED_STATUS_OPTIONS = [...this.LED_OPTIONS, 'on'] as const
 
   get macroVarsAutomapStrategy (): string {
     return this.$typedState.printer.printer['gcode_macro _MMU_SOFTWARE_VARS']?.automap_strategy ?? 'none'
   }
 
-  readonly AUTOMAP_OPTIONS: string[] = ['none', 'filament_name', 'material', 'color', 'closest_color', 'spool_id']
+  readonly AUTOMAP_OPTIONS = ['none', 'filament_name', 'material', 'color', 'closest_color', 'spool_id'] as const
 
   /*
      * Miscellaneous