fix(Tools): use gcode commands instead of config gcode macros

src/components/mixins/control.ts

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
-import { PrinterStateMacro, PrinterStateToolchangeMacro } from '@/store/printer/types'
 
 @Component
 export default class ControlMixin extends Vue {
@@ -101,12 +100,12 @@ export default class ControlMixin extends Vue {
         return this.$store.getters['printer/getMacros']
     }
 
-    get toolchangeMacros(): PrinterStateToolchangeMacro[] {
-        return this.macros
-            .filter((macro: PrinterStateMacro) => macro.name.toUpperCase().match(/^T\d+/))
-            .sort((a: PrinterStateMacro, b: PrinterStateMacro) => {
-                const numberA = parseInt(a.name.slice(1))
-                const numberB = parseInt(b.name.slice(1))
+    get toolchangeMacros(): string[] {
+        return Object.keys(this.$store.state.printer.gcode?.commands ?? {})
+            .filter((gcode) => gcode.match(/^T\d+/))
+            .sort((a: string, b: string) => {
+                const numberA = parseInt(a.slice(1))
+                const numberB = parseInt(b.slice(1))
 
                 return numberA - numberB
             })

src/components/panels/Extruder/ExtruderControlPanelTools.vue

@@ -3,7 +3,7 @@
         <v-row v-for="(row, index) in rows" :key="'row_' + index" class="mt-0">
             <v-col>
                 <v-item-group class="_btn-group py-0 px-3">
-                    <extruder-control-panel-tools-item v-for="macro in row" :key="macro.name" :macro="macro" />
+                    <extruder-control-panel-tools-item v-for="macro in row" :key="macro" :name="macro" />
                 </v-item-group>
             </v-col>
         </v-row>

src/components/panels/Extruder/ExtruderControlPanelToolsItem.vue

@@ -1,18 +1,12 @@
 <template>
-    <v-btn
-        :disabled="printerIsPrintingOnly"
-        dense
-        class="flex-grow-1 px-0"
-        :style="buttonStyle"
-        @click="doSend(macro.name)">
+    <v-btn :disabled="printerIsPrintingOnly" dense class="flex-grow-1 px-0" :style="buttonStyle" @click="changeTool">
         <span v-if="color != null" class="_extruderColorState mr-1" :style="dotStyle" />
-        {{ macro.name }}
+        {{ name.toUpperCase() }}
     </v-btn>
 </template>
 
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
-import { PrinterStateMacro } from '@/store/printer/types'
 import BaseMixin from '@/components/mixins/base'
 import ControlMixin from '@/components/mixins/control'
 import { ServerSpoolmanStateSpool } from '@/store/server/spoolman/types'
@@ -21,25 +15,34 @@ import { ServerSpoolmanStateSpool } from '@/store/server/spoolman/types'
     components: {},
 })
 export default class ExtruderControlPanel extends Mixins(BaseMixin, ControlMixin) {
-    @Prop({ type: Object }) macro!: PrinterStateMacro
+    @Prop({ type: String }) name!: string
+
+    get macro() {
+        const objectName = Object.keys(this.$store.state.printer).find(
+            (key) => key.toLowerCase() === `gcode_macro ${this.name?.toLowerCase()}`
+        )
+        if (!objectName) return undefined
+
+        return this.$store.state.printer[objectName] ?? {}
+    }
 
     get active() {
-        return this.macro.variables.active ?? false
+        return this.macro?.active ?? false
     }
 
     get color() {
         if (this.spool) {
             return this.spool.filament?.color_hex ?? '000000'
         }
 
-        const color = this.macro.variables.color ?? this.macro.variables.colour ?? null
+        const color = this.macro?.color ?? this.macro?.colour ?? null
         if (color === '' || color === 'undefined') return null
 
         return color
     }
 
     get spoolId() {
-        return this.macro.variables.spool_id ?? null
+        return this.macro?.spool_id ?? null
     }
 
     get spool() {
@@ -90,6 +93,10 @@ export default class ExtruderControlPanel extends Mixins(BaseMixin, ControlMixin
             'background-color': '#' + this.color,
         }
     }
+
+    changeTool() {
+        this.doSend(this.name.toUpperCase())
+    }
 }
 </script>
 

src/store/printer/types.ts

@@ -241,12 +241,6 @@ export interface PrinterStateExtruderStepper {
     extruder: number
 }
 
-export interface PrinterStateToolchangeMacro {
-    name: string
-    active: boolean
-    color: string
-}
-
 export interface PrinterGetterObject {
     name: string
     type: string