feat: display gcodeviewer always and store klipper settings in moonraker DB as a fallback (#725)

* refactor: save necessary klipper settings in database

Signed-off-by: Stefan Dej <meteyou@gmail.com>

* refactor: use klipper cache data as fallback for the gcode viewer

Signed-off-by: Stefan Dej <meteyou@gmail.com>

* fix: update gcodeviewer klipper cache action

Signed-off-by: Stefan Dej <meteyou@gmail.com>

* feat: display gcodeviewer always in the navi

Signed-off-by: Stefan Dej <meteyou@gmail.com>

* fix: typo in klipper cache fallback in gcodeviewer

Signed-off-by: Stefan Dej <meteyou@gmail.com>

* refactor: remove debug output

Co-authored-by: pataar <pietering1@gmail.com>

* style: fix code format

Signed-off-by: Stefan Dej <meteyou@gmail.com>

Co-authored-by: pataar <pietering1@gmail.com>

src/components/gcodeviewer/Viewer.vue

@@ -936,7 +936,27 @@ export default class Viewer extends Mixins(BaseMixin) {
     }
 
     get kinematics() {
-        return this.$store.state.printer.configfile?.settings?.printer?.kinematics ?? ''
+        return (
+            this.$store.state.printer.configfile?.settings?.printer?.kinematics ??
+            this.$store.state.gui?.gcodeViewer?.klipperCache?.kinematics ??
+            ''
+        )
+    }
+
+    get bedMaxSize() {
+        return (
+            this.$store.state.printer.toolhead?.axis_maximum ??
+            this.$store.state.gui?.gcodeViewer?.klipperCache?.axis_maximum ??
+            null
+        )
+    }
+
+    get bedMinSize() {
+        return (
+            this.$store.state.printer.toolhead?.axis_minimum ??
+            this.$store.state.gui?.gcodeViewer?.klipperCache?.axis_minimum ??
+            null
+        )
     }
 
     @Watch('kinematics')
@@ -946,10 +966,6 @@ export default class Viewer extends Mixins(BaseMixin) {
         }
     }
 
-    get bedMinSize() {
-        return this.$store.state.printer.toolhead?.axis_minimum ?? null
-    }
-
     @Watch('bedMinSize', { deep: true })
     bedMinSizeChanged(newVal: number[] | null) {
         if (viewer && newVal) {
@@ -959,10 +975,6 @@ export default class Viewer extends Mixins(BaseMixin) {
         }
     }
 
-    get bedMaxSize() {
-        return this.$store.state.printer.toolhead?.axis_maximum ?? null
-    }
-
     @Watch('bedMaxSize', { deep: true })
     bedMaxSizeChanged(newVal: number[] | null) {
         if (newVal && viewer) {

src/routes/index.ts

@@ -76,7 +76,7 @@ const routes: AppRoute[] = [
         path: '/viewer',
         icon: mdiVideo3d,
         component: () => import('../pages/Viewer.vue'),
-        alwaysShow: false,
+        alwaysShow: true,
         showInNavi: true,
     },
     {

src/store/gui/actions.ts

@@ -399,4 +399,16 @@ export const actions: ActionTree<GuiState, RootState> = {
             value: newVal,
         })
     },
+
+    updateGcodeviewerCache({ dispatch, state }, payload) {
+        const klipperCache = (state.gcodeViewer.klipperCache as { [key: string]: any }) ?? {}
+
+        Object.keys(payload).forEach((key) => {
+            const value = payload[key]
+            const oldValue = key in klipperCache ? klipperCache[key] : null
+
+            if (JSON.stringify(value) !== JSON.stringify(oldValue))
+                dispatch('saveSetting', { name: `gcodeViewer.klipperCache.${key}`, value })
+        })
+    },
 }

src/store/gui/index.ts

@@ -128,6 +128,11 @@ export const getDefaultState = (): GuiState => {
             voxelWidth: 1,
             voxelHeight: 1,
             specularLighting: false,
+            klipperCache: {
+                kinematics: null,
+                axis_minimum: null,
+                axis_maximum: null,
+            },
         },
         uiSettings: {
             logo: defaultLogoColor,

src/store/gui/types.ts

@@ -72,6 +72,11 @@ export interface GuiState {
         voxelWidth: number
         voxelHeight: number
         specularLighting: boolean
+        klipperCache: {
+            kinematics: string | null
+            axis_minimum: number[] | null
+            axis_maximum: number[] | null
+        }
     }
     macros?: GuiMacrosState
     presets?: GuiPresetsState

src/store/printer/actions.ts

@@ -57,7 +57,7 @@ export const actions: ActionTree<PrinterState, RootState> = {
         Vue.$socket.emit('server.temperature_store', {}, { action: 'printer/tempHistory/init' })
     },
 
-    getData({ commit, state }, payload) {
+    getData({ commit, dispatch, state }, payload) {
         if ('status' in payload) payload = payload.status
         if ('requestParams' in payload) delete payload.requestParams
 
@@ -73,7 +73,37 @@ export const actions: ActionTree<PrinterState, RootState> = {
         if ('bed_mesh' in state && 'bed_mesh' in payload && 'profiles' in payload.bed_mesh) {
             commit('setBedMeshProfiles', payload.bed_mesh.profiles)
 
-            delete payload.bed_mesh.profiles
+            delete payload.bed_mesh['profiles']
+        }
+
+        if (payload.configfile?.settings?.printer?.kinematics) {
+            dispatch(
+                'gui/updateGcodeviewerCache',
+                {
+                    kinematics: payload.configfile?.settings?.printer?.kinematics,
+                },
+                { root: true }
+            )
+        }
+
+        if (payload.toolhead?.axis_maximum) {
+            dispatch(
+                'gui/updateGcodeviewerCache',
+                {
+                    axis_maximum: payload.toolhead?.axis_maximum,
+                },
+                { root: true }
+            )
+        }
+
+        if (payload.toolhead?.axis_minimum) {
+            dispatch(
+                'gui/updateGcodeviewerCache',
+                {
+                    axis_minimum: payload.toolhead?.axis_minimum,
+                },
+                { root: true }
+            )
         }
 
         commit('setData', payload)