feat: extruder selection for each extruder stepper (#1034)

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>

src/components/widgets/toolhead/ExtruderStepperSync.vue

@@ -0,0 +1,42 @@
+<template>
+  <v-row>
+    <v-col
+      cols="12"
+      sm="6"
+    >
+      <app-select
+        :value="extruderStepper.motion_queue"
+        :label="$t('app.general.label.synced_extruder')"
+        :items="[
+          { name: $t('app.setting.label.none'), key: null },
+          ...availableExtruders
+        ]"
+        :disabled="!klippyReady || printerPrinting"
+        :loading="hasWait(`${$waits.onSyncExtruder}${extruderStepper.name}`)"
+        item-value="key"
+        item-text="name"
+        @change="sendSyncExtruderMotion"
+      />
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import { Extruder, ExtruderStepper } from '@/store/printer/types'
+
+@Component({})
+export default class ExtruderStepperSync extends Mixins(StateMixin) {
+  @Prop({ type: Object, required: true })
+  readonly extruderStepper!: ExtruderStepper
+
+  get availableExtruders () {
+    return this.$store.getters['printer/getExtruders'] as Extruder[]
+  }
+
+  sendSyncExtruderMotion (value: string | null) {
+    this.sendGcode(`SYNC_EXTRUDER_MOTION EXTRUDER=${this.extruderStepper.name} MOTION_QUEUE=${value ?? ''}`, `${this.$waits.onSyncExtruder}${this.extruderStepper.name}`)
+  }
+}
+</script>

src/components/widgets/toolhead/ExtruderSteppers.vue

@@ -18,10 +18,30 @@
             $expand
           </v-icon>
         </template>
-        {{ $filters.startCase(extruderStepper.name) }}
+        <template #default="{ open }">
+          <v-fade-transition leave-absolute>
+            <span
+              v-if="open"
+              key="0"
+            >
+              {{ extruderStepper.prettyName }}
+            </span>
+            <span
+              v-else
+              key="1"
+            >
+              {{ extruderStepper.prettyName }} <span class="secondary--text">[ {{ extruderStepper.motion_queue_pretty_name }} ]</span>
+            </span>
+          </v-fade-transition>
+        </template>
       </v-expansion-panel-header>
       <v-expansion-panel-content>
+        <extruder-stepper-sync
+          :extruder-stepper="extruderStepper"
+        />
+
         <pressure-advance-adjust
+          v-if="extruderStepper.pressure_advance !== undefined"
           :extruder-stepper="extruderStepper"
         />
       </v-expansion-panel-content>
@@ -30,21 +50,27 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
-import StateMixin from '@/mixins/state'
+import { Component, Vue } from 'vue-property-decorator'
+import ExtruderStepperSync from './ExtruderStepperSync.vue'
 import PressureAdvanceAdjust from './PressureAdvanceAdjust.vue'
-import { ExtruderStepper } from '@/store/printer/types'
+import { Extruder, ExtruderStepper } from '@/store/printer/types'
 
 @Component({
   components: {
+    ExtruderStepperSync,
     PressureAdvanceAdjust
   }
 })
-export default class ExtruderSteppers extends Mixins(StateMixin) {
+export default class ExtruderSteppers extends Vue {
   get extruderSteppers () {
+    const extruders = this.$store.getters['printer/getExtruders'] as Extruder[]
     const extruderSteppers = this.$store.getters['printer/getExtruderSteppers'] as ExtruderStepper[]
+
     return extruderSteppers
-      .filter(x => x.pressure_advance !== undefined)
+      .map(x => ({
+        ...x,
+        motion_queue_pretty_name: extruders.find(y => y.key === x.motion_queue)?.name ?? this.$t('app.setting.label.none')
+      }))
   }
 }
 </script>

src/globals.ts

@@ -404,7 +404,8 @@ export const Waits = Object.freeze({
   onManualProbe: 'onManualProbe',
   onQueryEndstops: 'onQueryEndstops',
   onQueryProbe: 'onQueryProbe',
-  onVersionRefresh: 'onVersionRefresh'
+  onVersionRefresh: 'onVersionRefresh',
+  onSyncExtruder: 'onSyncExtruder'
 })
 
 export const SupportedLocales = Object.freeze([

src/locales/en.yaml

@@ -282,6 +282,7 @@ app:
       smooth_time: Smooth Time
       speed: Speed
       sqv: Square Corner Velocity
+      synced_extruder: Synced Extruder
       thumbnail_size: Thumbnail Size
       total: Total
       total_filament: Total filament used

src/store/printer/getters.ts

@@ -248,19 +248,15 @@ export const getters: GetterTree<PrinterState, RootState> = {
  * Return known extruders, giving them a friendly name.
  */
   getExtruders: (state) => {
-    const extruders: Extruder[] = []
-    Object.keys(state.printer)
-      .filter(key => /^extruder\d{0,2}$/.test(key))
-      .sort()
-      .forEach(key => {
-        if (key === 'extruder') {
-          extruders.push({ name: 'Extruder 0', key })
-        } else {
-          const match = key.match(/\d+$/)
-          if (match) extruders.push({ name: 'Extruder ' + match[0], key })
-        }
-      })
-    return extruders
+    const extruderCount = Object.keys(state.printer)
+      .filter(key => /^extruder\d{0,2}$/.exec(key))
+      .length
+
+    return [...Array(extruderCount).keys()]
+      .map((index): Extruder => ({
+        key: `extruder${index === 0 ? '' : index}`,
+        name: extruderCount === 1 ? 'Extruder' : `Extruder ${index}`
+      }))
   },
 
   // Return the current extruder along with its configuration.
@@ -301,6 +297,7 @@ export const getters: GetterTree<PrinterState, RootState> = {
 
         extruderSteppers.push({
           name,
+          prettyName: Vue.$filters.startCase(name),
           ...e,
           config_pressure_advance: c.pressure_advance,
           config_smooth_time: c.pressure_advance_smooth_time

src/store/printer/types.ts

@@ -13,8 +13,10 @@ export interface Extruder {
 
 export interface ExtruderStepper {
   name: string;
+  prettyName: string;
   pressure_advance: number;
   smooth_time: number;
+  motion_queue?: string | null;
   config_pressure_advance: number;
   config_smooth_time: number;
 }