refactor: refactor heightmap page

src/components/dialogs/HeightmapCalibrateMeshDialog.vue

@@ -0,0 +1,88 @@
+<template>
+    <v-dialog :value="show" persistent :max-width="400" @keydown.esc="closeDialog">
+        <panel
+            :title="$t('Heightmap.BedMeshCalibrate')"
+            :icon="mdiGrid"
+            card-class="heightmap-calibrate-dialog"
+            :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="closeDialog">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text>
+                <v-text-field
+                    ref="input"
+                    v-model="name"
+                    :label="$t('Heightmap.Name')"
+                    required
+                    :rules="rules"
+                    @update:error="
+                        (newVal) => {
+                            isInvalidName = newVal
+                        }
+                    "
+                    @keyup.enter="calibrateMesh" />
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn text @click="closeDialog">{{ $t('Heightmap.Abort') }}</v-btn>
+                <v-btn :disabled="isInvalidName" color="primary" text @click="calibrateMesh">
+                    {{ $t('Heightmap.Calibrate') }}
+                </v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiCloseThick, mdiGrid } from '@mdi/js'
+
+@Component
+export default class HeightmapRenameProfileDialog extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiGrid = mdiGrid
+
+    @Prop({ type: Boolean, required: true }) show!: boolean
+
+    $refs!: {
+        input: HTMLInputElement
+    }
+
+    isInvalidName = false
+    name = ''
+
+    rules = [
+        (value: string) => !!value || this.$t('Heightmap.InvalidNameEmpty'),
+        // eslint-disable-next-line no-control-regex
+        (value: string) => value === value.replace(/[^\x00-\x7F]/g, '') || this.$t('Heightmap.InvalidNameAscii'),
+    ]
+
+    calibrateMesh(): void {
+        const gcode = `BED_MESH_CALIBRATE PROFILE="${this.name}"`
+
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode }, { loading: 'bedMeshCalibrate' })
+
+        this.closeDialog()
+    }
+
+    closeDialog() {
+        this.$emit('close')
+    }
+
+    @Watch('show')
+    showChanged() {
+        if (this.show) {
+            this.name = 'default'
+
+            this.$nextTick(() => {
+                setTimeout(() => {
+                    this.$refs.input?.focus()
+                }, 100)
+            })
+        }
+    }
+}
+</script>

src/components/dialogs/HeightmapRemoveProfileDialog.vue

@@ -0,0 +1,50 @@
+<template>
+    <v-dialog :value="show" persistent :max-width="400" @keydown.esc="closeDialog">
+        <panel
+            :title="$t('Heightmap.BedMeshRemove')"
+            :icon="mdiGrid"
+            card-class="heightmap-remove-dialog"
+            :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="closeDialog">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text>
+                <p class="mb-0">{{ $t('Heightmap.DoYouReallyWantToDelete', { name }) }}</p>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn text @click="closeDialog">{{ $t('Heightmap.Abort') }}</v-btn>
+                <v-btn color="error" text @click="removeProfile">{{ $t('Heightmap.Remove') }}</v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiCloseThick, mdiGrid } from '@mdi/js'
+
+@Component
+export default class HeightmapRemoveProfileDialog extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiGrid = mdiGrid
+
+    @Prop({ type: Boolean, required: true }) show!: boolean
+    @Prop({ type: String, required: true }) name!: string
+
+    removeProfile() {
+        const gcode = `BED_MESH_PROFILE REMOVE="${this.name}"`
+
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode }, { loading: 'bedMeshRemove' })
+
+        this.closeDialog()
+    }
+
+    closeDialog() {
+        this.$emit('close')
+    }
+}
+</script>

src/components/dialogs/HeightmapRenameProfileDialog.vue

@@ -0,0 +1,95 @@
+<template>
+    <v-dialog :value="show" persistent :max-width="400" @keydown.esc="closeDialog">
+        <panel
+            :title="$t('Heightmap.RenameBedMeshProfile')"
+            :icon="mdiGrid"
+            card-class="heightmap-rename-dialog"
+            :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="closeDialog">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text>
+                <v-text-field
+                    ref="input"
+                    v-model="newName"
+                    :label="$t('Heightmap.Name')"
+                    required
+                    :rules="rules"
+                    @update:error="
+                        (newVal) => {
+                            isInvalidName = newVal
+                        }
+                    "
+                    @keyup.enter="renameProfile" />
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn text @click="closeDialog">{{ $t('Heightmap.Abort') }}</v-btn>
+                <v-btn :disabled="isInvalidName" color="primary" text @click="renameProfile">
+                    {{ $t('Heightmap.Rename') }}
+                </v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiCloseThick, mdiGrid } from '@mdi/js'
+
+@Component
+export default class HeightmapRenameProfileDialog extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiGrid = mdiGrid
+
+    @Prop({ type: Boolean, required: true }) show!: boolean
+    @Prop({ type: String, required: true }) name!: string
+
+    $refs!: {
+        input: HTMLInputElement
+    }
+
+    isInvalidName = false
+    newName = ''
+
+    rules = [
+        (value: string) => !!value || this.$t('Heightmap.InvalidNameEmpty'),
+        (value: string) => value !== 'default' || this.$t('Heightmap.InvalidNameReserved'),
+        (value: string) => !this.profileNames.includes(value) || this.$t('Heightmap.InvalidNameAlreadyExists'),
+        // eslint-disable-next-line no-control-regex
+        (value: string) => value === value.replace(/[^\x00-\x7F]/g, '') || this.$t('Heightmap.InvalidNameAscii'),
+    ]
+
+    get profileNames() {
+        return Object.keys(this.$store.state.printer.bed_mesh?.profiles ?? {})
+    }
+
+    renameProfile() {
+        const gcode = `BED_MESH_PROFILE SAVE="${this.newName}"\nBED_MESH_PROFILE REMOVE="${this.name}"`
+
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode }, { loading: 'bedMeshRename' })
+
+        this.closeDialog()
+    }
+
+    closeDialog() {
+        this.$emit('close')
+    }
+
+    @Watch('show')
+    showChanged() {
+        if (this.show) {
+            this.newName = this.name
+
+            this.$nextTick(() => {
+                setTimeout(() => {
+                    this.$refs.input?.focus()
+                }, 100)
+            })
+        }
+    }
+}
+</script>

src/components/mixins/bedmesh.ts

@@ -0,0 +1,62 @@
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+@Component
+export default class BedmeshMixin extends Vue {
+    get bed_mesh() {
+        return this.$store.state.printer.bed_mesh ?? {}
+    }
+
+    get profiles() {
+        return this.bed_mesh.profiles ?? {}
+    }
+
+    get mesh_min() {
+        return this.bed_mesh.mesh_min ?? [0, 0]
+    }
+
+    get mesh_max() {
+        return this.bed_mesh.mesh_max ?? [0, 0]
+    }
+
+    get min() {
+        return Math.min(...this.points)
+    }
+
+    get max() {
+        return Math.max(...this.points)
+    }
+
+    get variance() {
+        return Math.abs(this.min - this.max).toFixed(3)
+    }
+
+    get is_active() {
+        // if the current profile_mane is not empty, return true
+        if (this.bed_mesh.profile_name !== '') return true
+
+        return this.mesh_min[0] !== 0 || this.mesh_min[1] !== 0 || this.mesh_max[0] !== 0 || this.mesh_max[1] !== 0
+    }
+
+    get name() {
+        if (this.bed_mesh.profile_name !== '') return this.bed_mesh.profile_name
+
+        return 'Unknown'
+    }
+
+    get probed_matrix() {
+        return this.bed_mesh.probed_matrix ?? []
+    }
+
+    get points() {
+        const points: number[] = []
+
+        for (let i = 0; i < this.probed_matrix.length; i++) {
+            for (let j = 0; j < this.probed_matrix[i].length; j++) {
+                points.push(this.probed_matrix[i][j])
+            }
+        }
+
+        return points
+    }
+}