Merge branch 'develop' into feat/multi-tool-spoolman

.docker/nginx.conf

@@ -1,11 +1,12 @@
 server {
   listen 80;
-
+  listen [::]:80;
+
   location / {
     root /usr/share/nginx/html;
     index index.html index.htm;
     try_files $uri $uri/ /index.html =404;
   }
 
   include /etc/nginx/extra-conf.d/*.conf;
-}
+}

package.json

@@ -96,7 +96,7 @@
         "start-server-and-test": "^2.0.5",
         "typescript": "^4.5.5",
         "unplugin-vue-components": "^0.22.12",
-        "vite": "^4.5.3",
+        "vite": "^4.5.5",
         "vite-plugin-checker": "^0.6.0",
         "vite-plugin-package-version": "^1.0.2",
         "vite-plugin-pwa": "^0.16.4",

src/components/TheConnectingDialog.vue

@@ -18,6 +18,10 @@
                     <v-divider class="mt-4 mb-5" />
                 </template>
                 <div class="text-center mt-3">
+                    <v-btn v-if="helpButtonUrl" class="text--disabled mr-3" :href="helpButtonUrl" target="_blank">
+                        <v-icon left>{{ mdiHelp }}</v-icon>
+                        {{ $t('ConnectionDialog.Help') }}
+                    </v-btn>
                     <v-btn class="primary--text" @click="reconnect">{{ $t('ConnectionDialog.TryAgain') }}</v-btn>
                 </div>
             </v-card-text>
@@ -35,7 +39,7 @@ import BaseMixin from '@/components/mixins/base'
 
 import ThemeMixin from '@/components/mixins/theme'
 import ConnectionStatus from '@/components/ui/ConnectionStatus.vue'
-import { mdiConnection } from '@mdi/js'
+import { mdiConnection, mdiHelp } from '@mdi/js'
 
 @Component({
     components: {
@@ -44,6 +48,7 @@ import { mdiConnection } from '@mdi/js'
 })
 export default class TheConnectingDialog extends Mixins(BaseMixin, ThemeMixin) {
     mdiConnection = mdiConnection
+    mdiHelp = mdiHelp
 
     counter = 0
 
@@ -89,6 +94,12 @@ export default class TheConnectingDialog extends Mixins(BaseMixin, ThemeMixin) {
         return this.$store.state.socket.connectionFailedMessage ?? null
     }
 
+    get helpButtonUrl() {
+        if (!this.$store.state.socket.connectionFailedMessage) return null
+
+        return `https://docs.mainsail.xyz/faq/mainsail_errors/connection-${this.connectionFailedMessage?.toLowerCase()}`
+    }
+
     reconnect() {
         this.counter++
         this.$store.dispatch('socket/setData', { connectingFailed: false })

src/components/TheEditor.vue

@@ -60,21 +60,23 @@
                         :name="filename"
                         :file-extension="fileExtension"
                         class="codemirror"
+                        :class="{ withSidebar: fileStructureSidebar }"
                         @lineChange="lineChanges" />
                     <div v-if="fileStructureSidebar" class="d-none d-md-flex structure-sidebar">
                         <v-treeview
                             activatable
                             dense
                             :active="structureActive"
                             :open="structureOpen"
-                            item-key="line"
+                            :item-key="treeviewItemKeyProp"
                             :items="configFileStructure"
                             class="w-100"
                             @update:active="activeChanges">
                             <template #label="{ item }">
                                 <div
                                     class="cursor-pointer _structure-sidebar-item"
-                                    :class="item.type == 'item' ? 'ͼp' : 'ͼt'">
+                                    :class="item.type == 'item' ? 'ͼp' : 'ͼt'"
+                                    @click="activeChangesItemClick">
                                     {{ item.name }}
                                 </div>
                             </template>
@@ -188,8 +190,10 @@ export default class TheEditor extends Mixins(BaseMixin) {
     dialogConfirmChange = false
     dialogDevices = false
     fileStructureSidebar = true
+    treeviewItemKeyProp = 'line' as const
     structureActive: number[] = []
     structureOpen: number[] = []
+    structureActiveChangedBySidebar: boolean = false
 
     formatFilesize = formatFilesize
 
@@ -281,10 +285,14 @@ export default class TheEditor extends Mixins(BaseMixin) {
         return this.$store.state.server.system_info?.available_services ?? []
     }
 
-    get restartServiceName() {
+    get restartAllowedOrPossible() {
         if (!this.isWriteable) return null
         if (['printing', 'paused'].includes(this.printer_state)) return null
 
+        return true
+    }
+
+    get restartServiceName() {
         // check for generic services <service>.conf (like moonraker.conf, crowsnest.conf, sonar.conf)
         if (this.availableServices.includes(this.filenameWithoutExtension) && this.fileExtension === 'conf')
             return this.filenameWithoutExtension
@@ -305,6 +313,8 @@ export default class TheEditor extends Mixins(BaseMixin) {
     }
 
     get restartServiceNameExists() {
+        if (!this.restartAllowedOrPossible) return false
+
         // hide the button, if there is no service found
         if (this.restartServiceName === null) return false
 
@@ -424,8 +434,23 @@ export default class TheEditor extends Mixins(BaseMixin) {
         this.fileStructureSidebar = !this.fileStructureSidebar
     }
 
-    activeChanges(key: any) {
-        this.editor?.gotoLine(key)
+    // Relies on event bubbling to flip the flag before treeview active change is handled
+    activeChangesItemClick() {
+        this.structureActiveChangedBySidebar = true
+    }
+
+    activeChanges(activeItems: Array<ConfigFileSection[typeof this.treeviewItemKeyProp]>) {
+        if (!this.structureActiveChangedBySidebar) {
+            return
+        }
+
+        this.structureActiveChangedBySidebar = false
+
+        if (!activeItems.length) {
+            return
+        }
+
+        this.editor?.gotoLine(activeItems[0])
     }
 
     lineChanges(line: number) {
@@ -506,10 +531,14 @@ export default class TheEditor extends Mixins(BaseMixin) {
 }
 
 @media screen and (min-width: 960px) {
-    .codemirror {
+    .codemirror:not(.withSidebar) {
+        width: 100%;
+    }
+    .codemirror.withSidebar {
         width: calc(100% - 300px);
     }
 }
+
 .structure-sidebar {
     width: 300px;
     overflow-y: auto;

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,20 +42,17 @@ 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
     @Prop({ type: Boolean, default: false }) wireframe!: boolean
     @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>`)