feat(Heightmap): add option to set the default orientation (#2006)

Co-authored-by: rackrick <45207681+rackrick@users.noreply.github.com>

src/components/charts/HeightmapChart.vue

@@ -6,7 +6,7 @@
         style="height: 600px; width: 100%; overflow: hidden" />
 </template>
 <script lang="ts">
-import { Component, Mixins, Prop } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import BedmeshMixin from '@/components/mixins/bedmesh'
 
@@ -42,11 +42,6 @@ interface HeightmapSerie {
 
 @Component
 export default class HeightmapChart extends Mixins(BaseMixin, BedmeshMixin, ThemeMixin) {
-    declare $refs: {
-        // eslint-disable-next-line
-        heightmap: any
-    }
-
     @Prop({ type: Boolean, default: false }) showProbed!: boolean
     @Prop({ type: Boolean, default: false }) showMesh!: boolean
     @Prop({ type: Boolean, default: false }) showFlat!: boolean
@@ -54,8 +49,10 @@ export default class HeightmapChart extends Mixins(BaseMixin, BedmeshMixin, Them
     @Prop({ type: Boolean, default: false }) scaleGradient!: boolean
     @Prop({ type: Number, default: 1 }) scaleZMax!: number
 
+    @Ref('heightmap') heightmap!: any
+
     get chart(): ECharts | null {
-        return this.$refs.heightmap?.chart ?? null
+        return this.heightmap?.chart ?? null
     }
 
     get chartOptions() {
@@ -151,7 +148,10 @@ export default class HeightmapChart extends Mixins(BaseMixin, BedmeshMixin, Them
                 },
                 boxWidth: 100 * this.scaleX,
                 boxDepth: 100 * this.scaleY,
-                viewControl: { distance: 150 },
+                viewControl: {
+                    distance: 200,
+                    ...this.defaultOrientation,
+                },
             },
             series: this.series,
         }
@@ -388,6 +388,22 @@ export default class HeightmapChart extends Mixins(BaseMixin, BedmeshMixin, Them
         return this.absRangeY / this.minRangeXY
     }
 
+    get defaultOrientation() {
+        const orientation = this.$store.state.gui.heightmap.defaultOrientation ?? 'rightFront'
+
+        switch (orientation) {
+            case 'leftFront':
+                return { alpha: 25, beta: -40 }
+            case 'front':
+                return { alpha: 25, beta: 0 }
+            case 'top':
+                return { alpha: 90, beta: 0 }
+
+            default:
+                return { alpha: 25, beta: 40 }
+        }
+    }
+
     tooltipFormatter(data: any): string {
         const outputArray: string[] = []
         outputArray.push(`<b>${data.seriesName}</b>`)

src/components/settings/SettingsHeightmapTab.vue

@@ -7,16 +7,16 @@
                     <v-card-title class="mx-n2">
                         {{ $t('Settings.HeightmapTab.Heightmap') }}
                     </v-card-title>
-                    <v-divider class="ml-3"></v-divider>
+                    <v-divider class="ml-3" />
                 </div>
+                <settings-row
+                    :title="$t('Settings.HeightmapTab.DefaultOrientation')"
+                    :sub-title="$t('Settings.HeightmapTab.DefaultOrientationDescription')">
+                    <v-select v-model="defaultOrientation" :items="availableOrientations" hide-details outlined dense />
+                </settings-row>
+                <v-divider class="my-2" />
                 <settings-row :title="$t('Settings.HeightmapTab.ColorSchemes')">
-                    <v-select
-                        v-model="colorScheme"
-                        :items="availableColorSchemes"
-                        hide-details
-                        outlined
-                        dense
-                        attach></v-select>
+                    <v-select v-model="colorScheme" :items="availableColorSchemes" hide-details outlined dense />
                 </settings-row>
             </v-card-text>
         </v-card>
@@ -39,6 +39,36 @@ import { mdiGrid } from '@mdi/js'
 })
 export default class SettingsHeightmapTab extends Mixins(BaseMixin) {
     mdiGrid = mdiGrid
+
+    get availableOrientations() {
+        return [
+            {
+                text: this.$t('Settings.HeightmapTab.Orientations.RightFront'),
+                value: 'rightFront',
+            },
+            {
+                text: this.$t('Settings.HeightmapTab.Orientations.LeftFront'),
+                value: 'leftFront',
+            },
+            {
+                text: this.$t('Settings.HeightmapTab.Orientations.Front'),
+                value: 'front',
+            },
+            {
+                text: this.$t('Settings.HeightmapTab.Orientations.Top'),
+                value: 'top',
+            },
+        ]
+    }
+
+    get defaultOrientation() {
+        return this.$store.state.gui.heightmap.defaultOrientation
+    }
+
+    set defaultOrientation(newVal) {
+        this.$store.dispatch('gui/heightmap/saveSetting', { name: 'defaultOrientation', value: newVal })
+    }
+
     get availableColorSchemes() {
         return [
             {

src/locales/en.json

@@ -1021,8 +1021,16 @@
         },
         "HeightmapTab": {
             "ColorSchemes": "Color Schemes",
+            "DefaultOrientation": "Default Orientation",
+            "DefaultOrientationDescription": "Select the default orientation for the bed mesh visualization.",
             "Heightmap": "Heightmap",
             "IsDefault": "(Default)",
+            "Orientations": {
+                "Front": "Front",
+                "LeftFront": "Left Front",
+                "RightFront": "Right Front",
+                "Top": "Top"
+            },
             "Schemes": {
                 "GrayScale": "Grayscale",
                 "Hot": "Hot",

src/store/gui/heightmap/index.ts

@@ -6,6 +6,7 @@ import { actions } from './actions'
 export const getDefaultState = (): HeightmapState => {
     return {
         activecolorscheme: 'portland',
+        defaultOrientation: 'rightFront',
     }
 }
 

src/store/gui/heightmap/types.ts

@@ -1,3 +1,4 @@
 export interface HeightmapState {
     activecolorscheme: string
+    defaultOrientation: 'rightFront' | 'leftFront' | 'front' | 'top'
 }