feat: add support for cnc mode in g-code viewer (#1239)

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

package-lock.json

@@ -18,7 +18,7 @@
                 "@codemirror/view": "^6.0.3",
                 "@jaames/iro": "^5.5.2",
                 "@lezer/highlight": "^1.0.0",
-                "@sindarius/gcodeviewer": "^3.1.14",
+                "@sindarius/gcodeviewer": "^3.2.0",
                 "@types/node": "^18.0.0",
                 "@types/overlayscrollbars": "^1.12.1",
                 "axios": "^0.27.0",
@@ -2757,9 +2757,9 @@
             "dev": true
         },
         "node_modules/@sindarius/gcodeviewer": {
-            "version": "3.1.14",
+            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/@sindarius/gcodeviewer/-/gcodeviewer-3.1.14.tgz",
+            "resolved": "https://registry.npmjs.org/@sindarius/gcodeviewer/-/gcodeviewer-3.2.0.tgz",
-            "integrity": "sha512-+kmw2ougPYJzfU4lKvjSNZLsyDbhTKgeOA2KYAHgNnD0BUiSGCmveVLdcs8bSusmnrv8J+M+90eco0LSUuywiw==",
+            "integrity": "sha512-w2MZlqw/BbPZB/ndEq8lZeaqovfujCTVwdKR5AKaMggIGdQQnkE7qZ8uxrZZVxWzoLIUv9h+cbyXiOgDFyiekw==",
             "dependencies": {
                 "@babylonjs/core": "^5.34.0",
                 "@babylonjs/inspector": "^5.34.0",
@@ -12056,9 +12056,9 @@
             "dev": true
         },
         "@sindarius/gcodeviewer": {
-            "version": "3.1.14",
+            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/@sindarius/gcodeviewer/-/gcodeviewer-3.1.14.tgz",
+            "resolved": "https://registry.npmjs.org/@sindarius/gcodeviewer/-/gcodeviewer-3.2.0.tgz",
-            "integrity": "sha512-+kmw2ougPYJzfU4lKvjSNZLsyDbhTKgeOA2KYAHgNnD0BUiSGCmveVLdcs8bSusmnrv8J+M+90eco0LSUuywiw==",
+            "integrity": "sha512-w2MZlqw/BbPZB/ndEq8lZeaqovfujCTVwdKR5AKaMggIGdQQnkE7qZ8uxrZZVxWzoLIUv9h+cbyXiOgDFyiekw==",
             "requires": {
                 "@babylonjs/core": "^5.34.0",
                 "@babylonjs/inspector": "^5.34.0",

package.json

@@ -33,7 +33,7 @@
         "@codemirror/view": "^6.0.3",
         "@jaames/iro": "^5.5.2",
         "@lezer/highlight": "^1.0.0",
-        "@sindarius/gcodeviewer": "^3.1.14",
+        "@sindarius/gcodeviewer": "^3.2.0",
         "@types/node": "^18.0.0",
         "@types/overlayscrollbars": "^1.12.1",
         "axios": "^0.27.0",

src/components/gcodeviewer/Viewer.vue

@@ -186,6 +186,13 @@
                                                 hide-details
                                                 :label="$t('GCodeViewer.SpecularLighting')"></v-checkbox>
                                         </v-list-item>
+                                        <v-list-item class="minHeight36">
+                                            <v-checkbox
+                                                v-model="cncMode"
+                                                class="mt-0"
+                                                hide-details
+                                                :label="$t('GCodeViewer.CNCMode')"></v-checkbox>
+                                        </v-list-item>
                                     </v-list>
                                 </v-menu>
                             </v-col>
@@ -508,13 +515,14 @@ export default class Viewer extends Mixins(BaseMixin) {
         }
 
         viewer.gcodeProcessor.useHighQualityExtrusion(this.hdRendering)
-        viewer.gcodeProcessor.updateForceWireMode(this.forceLineRendering)
+        viewer.gcodeProcessor.updateForceWireMode(this.forceLineRendering || this.cncMode)
         viewer.gcodeProcessor.setAlpha(this.transparency)
         viewer.gcodeProcessor.setVoxelMode(this.voxelMode)
         viewer.gcodeProcessor.voxelWidth = this.voxelWidth
         viewer.gcodeProcessor.voxelHeight = this.voxelHeight
         viewer.gcodeProcessor.useSpecularColor(this.specularLighting)
         viewer.gcodeProcessor.setLiveTracking(false)
+        viewer.gcodeProcessor.g1AsExtrusion = this.cncMode
         viewer.buildObjects.objectCallback = this.objectCallback
 
         this.loadToolColors(this.extruderColors)
@@ -824,7 +832,7 @@ export default class Viewer extends Mixins(BaseMixin) {
     @Watch('forceLineRendering')
     async forceLineRenderingChanged(newVal: boolean) {
         if (viewer) {
-            viewer.gcodeProcessor.updateForceWireMode(newVal)
+            viewer.gcodeProcessor.updateForceWireMode(newVal || this.cncMode)
             await this.reloadViewer()
         }
     }
@@ -895,6 +903,17 @@ export default class Viewer extends Mixins(BaseMixin) {
         }
     }
 
+    get cncMode() {
+        return this.$store.state.gui.gcodeViewer.cncMode
+    }
+
+    set cncMode(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'gcodeViewer.cncMode', value: newVal })
+        viewer.gcodeProcessor.g1AsExtrusion = newVal
+        viewer.gcodeProcessor.updateForceWireMode(true)
+        this.reloadViewer()
+    }
+
     get extruderColors() {
         return this.$store.state.gui.gcodeViewer?.extruderColors ?? false
     }

src/locales/en.json

@@ -254,7 +254,8 @@
         "Transparency": "Transparency",
         "Ultra": "Ultra",
         "VoxelMode": "Voxel Mode (ASMBL)",
-        "ShowGCode": "Show G-Code"
+        "ShowGCode": "Show G-Code",
+        "CNCMode": "CNC Mode"
     },
     "Heightmap": {
         "Abort": "abort",

src/store/gui/index.ts

@@ -139,6 +139,7 @@ export const getDefaultState = (): GuiState => {
                 axis_maximum: null,
             },
             showGCodePanel: false,
+            cncMode: false,
         },
         uiSettings: {
             logo: defaultLogoColor,

src/store/gui/types.ts

@@ -87,6 +87,7 @@ export interface GuiState {
             axis_maximum: number[] | null
         }
         showGCodePanel: boolean
+        cncMode: boolean
     }
     macros?: GuiMacrosState
     notifications?: GuiNotificationState