chore(editor): update gcodeviewer

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

package-lock.json

@@ -16,7 +16,7 @@
         "@codemirror/state": "^0.19.1",
         "@codemirror/stream-parser": "^0.19.1",
         "@codemirror/view": "^0.19.1",
-        "@sindarius/gcodeviewer": "^2.1.0",
+        "@sindarius/gcodeviewer": "^2.1.8",
         "axios": "^0.21.1",
         "core-js": "^3.16.0",
         "echarts": "^5.1.2",
@@ -1980,10 +1980,9 @@
       "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
     },
     "node_modules/@sindarius/gcodeviewer": {
-      "version": "2.1.0",
+      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/@sindarius/gcodeviewer/-/gcodeviewer-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@sindarius/gcodeviewer/-/gcodeviewer-2.1.8.tgz",
-      "integrity": "sha512-nDNljDT+L5E8tCN02+a6kQhW8xiTc/ZN7iNkoGIU1N7S1kvU/ett4447FR4k9iImyb4rdTMbyAxuKD0b7Q5SiA==",
+      "integrity": "sha512-VtDbO5MLp7Mk3sX3E1JYWXfWiIIsMBXTx69EHyxTkDQarSf7l9aQNLAmT+3EghMiFvUMQwPxj/VrRbusKi4F0Q==",
-      "license": "LGPL-3.0-or-later",
       "dependencies": {
         "@babylonjs/core": "^4.2.0",
         "@babylonjs/inspector": "^4.2.0",
@@ -21798,9 +21797,9 @@
       "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
     },
     "@sindarius/gcodeviewer": {
-      "version": "2.1.0",
+      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/@sindarius/gcodeviewer/-/gcodeviewer-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@sindarius/gcodeviewer/-/gcodeviewer-2.1.8.tgz",
-      "integrity": "sha512-nDNljDT+L5E8tCN02+a6kQhW8xiTc/ZN7iNkoGIU1N7S1kvU/ett4447FR4k9iImyb4rdTMbyAxuKD0b7Q5SiA==",
+      "integrity": "sha512-VtDbO5MLp7Mk3sX3E1JYWXfWiIIsMBXTx69EHyxTkDQarSf7l9aQNLAmT+3EghMiFvUMQwPxj/VrRbusKi4F0Q==",
       "requires": {
         "@babylonjs/core": "^4.2.0",
         "@babylonjs/inspector": "^4.2.0",

package.json

@@ -22,7 +22,7 @@
     "@codemirror/state": "^0.19.1",
     "@codemirror/stream-parser": "^0.19.1",
     "@codemirror/view": "^0.19.1",
-    "@sindarius/gcodeviewer": "^2.1.0",
+    "@sindarius/gcodeviewer": "^2.1.8",
     "axios": "^0.21.1",
     "core-js": "^3.16.0",
     "echarts": "^5.1.2",

src/components/gcodeviewer/Viewer.vue

@@ -6,7 +6,8 @@
             </v-toolbar-title>
             <v-spacer></v-spacer>
             <v-btn @click="tracking=true" v-show="showTrackingButton">{{ $t("GCodeViewer.TrackPrint")}}</v-btn>
-            <v-btn @click="reloadViewer()" color="info" v-show="reloadRequired">{{$t("GCodeViewer.ReloadRequired")}}</v-btn>
+            <v-btn @click="reloadViewer" color="info" v-show="reloadRequired">{{$t("GCodeViewer.ReloadRequired")}}</v-btn>
+            <v-btn @click="resetCamera" class="px-2 minwidth-0" color="grey darken-3" small dense><v-icon small>mdi-camera-retake</v-icon></v-btn>
         </v-toolbar>
         <v-card-text>
             <v-row v-if="loading">
@@ -25,9 +26,8 @@
                         vertical
                         :disabled="tracking"
                         :max="maxZSlider"
-                        min="-1"
+                        :min="0"
                         :value="zSlider"
-                        :height="zSlicerHeight"
                         class="slider-autoheight"
                         @input="updateZSlider"
                     ></v-slider>
@@ -37,9 +37,6 @@
                 <v-col>
                     <v-btn @click="chooseFile">{{ $t("GCodeViewer.LoadLocal") }}</v-btn>
                 </v-col>
-                <v-col>
-                    <v-btn @click="resetCamera">{{ $t("GCodeViewer.ResetCamera")}}</v-btn>
-                </v-col>
                 <v-col>
                     <v-switch :label="$t('GCodeViewer.ForceLineRendering')" class="mt-0" v-model="forceLineRendering" hide-details dense></v-switch>
                 </v-col>
@@ -56,11 +53,21 @@
 <style>
 .viewer {
 	width: 100%;
-	height: 100%;
+	height: calc(100vh - 260px);
 	border: 1px solid #3f3f3f;
 }
 
+.slider-autoheight,
 .slider-autoheight .v-slider {
+    height: calc(100vh - 260px);
+}
+
+.slider-autoheight .v-slider {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.slider-autoheight .v-input__slot {
     height: 100%;
 }
 </style>
@@ -111,7 +118,11 @@ export default class Viewer extends Mixins(BaseMixin) {
 
     @Prop({type: String, default: '', required: false}) filename!: string
     @Ref('fileInput') fileInput!: HTMLInputElement
-    @Ref('viewerCanvasContainer') viewerCanvasContainer!: HTMLElement
+    //@Ref('viewerCanvasContainer') viewerCanvasContainer!: HTMLElement
+
+    $refs!: {
+        viewerCanvasContainer: HTMLElement
+    }
 
     get renderQualities() {
         return [
@@ -125,7 +136,6 @@ export default class Viewer extends Mixins(BaseMixin) {
 
     async mounted() {
         await this.init()
-        this.resize()
     }
 
     get filePosition() {
@@ -148,7 +158,7 @@ export default class Viewer extends Mixins(BaseMixin) {
         if (this.canvasBackup === null) {
             let canvasElement = document.createElement('canvas')
             canvasElement.className = 'viewer'
-            this.viewerCanvasContainer.appendChild(canvasElement)
+            this.$refs.viewerCanvasContainer.appendChild(canvasElement)
             this.canvasBackup = canvasElement
             this.viewerInit(canvasElement)
             if (this.$route.query.filename) {
@@ -161,7 +171,7 @@ export default class Viewer extends Mixins(BaseMixin) {
                 await this.loadFile(this.apiUrl + '/server/files/' + encodeURI(this.$route.query.filename.toString()))
             }
 
-            this.viewerCanvasContainer.appendChild(this.canvasBackup)
+            this.$refs.viewerCanvasContainer.appendChild(this.canvasBackup)
         }
         this.registerProgressCallback()
     }
@@ -189,7 +199,6 @@ export default class Viewer extends Mixins(BaseMixin) {
 
         viewer.gcodeProcessor.updateForceWireMode(this.forceLineRendering)
         viewer.gcodeProcessor.setLiveTracking(false)
-        window.addEventListener('resize', this.resize)
 
         this.loadToolColors(this.extruderColors)
 
@@ -211,7 +220,6 @@ export default class Viewer extends Mixins(BaseMixin) {
         if (viewer) {
             viewer.gcodeProcessor.loadingProgressCallback = null
         }
-        window.removeEventListener('resize', this.resize)
     }
 
     chooseFile() {
@@ -277,14 +285,6 @@ export default class Viewer extends Mixins(BaseMixin) {
         this.finishLoad()
     }
 
-    resize() {
-        this.$nextTick(() => {
-            if (this.viewerCanvasContainer) {
-                this.zSlicerHeight = this.viewerCanvasContainer.clientHeight - 5
-            }
-        })
-    }
-
     resetCamera() {
         viewer.resetCamera()
     }