fix: resize issues with tempchart and other components (#808)

package-lock.json

@@ -42,6 +42,7 @@
                 "vue-meta": "^2.4.0",
                 "vue-observe-visibility": "^1.0.0",
                 "vue-property-decorator": "^9.1.2",
+                "vue-resize": "^1.0.1",
                 "vue-toast-notification": "^0.6.1",
                 "vuedraggable": "^2.24.3",
                 "vuetify": "^2.6.1",
@@ -1810,7 +1811,6 @@
             "version": "7.17.7",
             "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.7.tgz",
             "integrity": "sha512-L6rvG9GDxaLgFjg41K+5Yv9OMrU98sWe+Ykmc6FDJW/+vYZMhdOMKkISgzptMaERHvS2Y2lw9MDRm2gHhlQQoA==",
-            "dev": true,
             "dependencies": {
                 "regenerator-runtime": "^0.13.4"
             },
@@ -8974,6 +8974,17 @@
                 "vue-class-component": "*"
             }
         },
+        "node_modules/vue-resize": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
+            "integrity": "sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            },
+            "peerDependencies": {
+                "vue": "^2.6.0"
+            }
+        },
         "node_modules/vue-router": {
             "version": "3.5.3",
             "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
@@ -10636,7 +10647,6 @@
             "version": "7.17.7",
             "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.7.tgz",
             "integrity": "sha512-L6rvG9GDxaLgFjg41K+5Yv9OMrU98sWe+Ykmc6FDJW/+vYZMhdOMKkISgzptMaERHvS2Y2lw9MDRm2gHhlQQoA==",
-            "dev": true,
             "requires": {
                 "regenerator-runtime": "^0.13.4"
             }
@@ -15912,6 +15922,14 @@
             "integrity": "sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ==",
             "requires": {}
         },
+        "vue-resize": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
+            "integrity": "sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==",
+            "requires": {
+                "@babel/runtime": "^7.13.10"
+            }
+        },
         "vue-router": {
             "version": "3.5.3",
             "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",

package.json

@@ -56,6 +56,7 @@
         "vue-meta": "^2.4.0",
         "vue-observe-visibility": "^1.0.0",
         "vue-property-decorator": "^9.1.2",
+        "vue-resize": "^1.0.1",
         "vue-toast-notification": "^0.6.1",
         "vuedraggable": "^2.24.3",
         "vuetify": "^2.6.1",

src/components/charts/HistoryAllPrintStatus.vue

@@ -3,6 +3,7 @@
         ref="historyAllPrintStatus"
         v-observe-visibility="visibilityChanged"
         :option="chartOptions"
+        :autoresize="true"
         :init-options="{ renderer: 'svg' }"
         style="height: 250px; width: 100%"></e-chart>
 </template>
@@ -85,12 +86,6 @@ export default class HistoryAllPrintStatus extends Mixins(BaseMixin) {
     mounted() {
         this.chartOptions.series[0].data = this.printStatusArray
         this.chart?.setOption(this.chartOptions)
-
-        window.addEventListener('resize', this.eventListenerResize)
-    }
-
-    destroyed() {
-        window.removeEventListener('resize', this.eventListenerResize)
     }
 
     beforeDestroy() {
@@ -114,9 +109,5 @@ export default class HistoryAllPrintStatus extends Mixins(BaseMixin) {
     visibilityChanged(isVisible: boolean) {
         if (isVisible) this.chart?.resize()
     }
-
-    eventListenerResize() {
-        this.chart?.resize()
-    }
 }
 </script>

src/components/charts/HistoryFilamentUsage.vue

@@ -3,6 +3,7 @@
         ref="historyFilamentUsage"
         v-observe-visibility="visibilityChanged"
         :option="chartOptions"
+        :autoresize="true"
         :init-options="{ renderer: 'svg' }"
         style="height: 175px; width: 100%"></e-chart>
 </template>
@@ -115,12 +116,6 @@ export default class HistoryPrinttimeAvg extends Mixins(BaseMixin) {
     mounted() {
         this.chartOptions.series[0].data = this.filamentUsageArray
         this.chart?.setOption(this.chartOptions)
-
-        window.addEventListener('resize', this.eventListenerResize)
-    }
-
-    destroyed() {
-        window.removeEventListener('resize', this.eventListenerResize)
     }
 
     beforeDestroy() {
@@ -144,9 +139,5 @@ export default class HistoryPrinttimeAvg extends Mixins(BaseMixin) {
     visibilityChanged(isVisible: boolean) {
         if (isVisible) this.chart?.resize()
     }
-
-    eventListenerResize() {
-        this.chart?.resize()
-    }
 }
 </script>

src/components/charts/HistoryPrinttimeAvg.vue

@@ -101,12 +101,6 @@ export default class HistoryPrinttimeAvg extends Mixins(BaseMixin) {
     mounted() {
         this.chartOptions.series[0].data = this.printtimeAvgArray
         this.chart?.setOption(this.chartOptions)
-
-        window.addEventListener('resize', this.eventListenerResize)
-    }
-
-    destroyed() {
-        window.removeEventListener('resize', this.eventListenerResize)
     }
 
     beforeDestroy() {
@@ -130,9 +124,5 @@ export default class HistoryPrinttimeAvg extends Mixins(BaseMixin) {
     visibilityChanged(isVisible: boolean) {
         if (isVisible) this.chart?.resize()
     }
-
-    eventListenerResize() {
-        this.chart?.resize()
-    }
 }
 </script>

src/components/charts/TempChart.vue

@@ -4,6 +4,7 @@
         v-observe-visibility="visibilityChanged"
         :option="chartOptions"
         :init-options="{ renderer: 'svg' }"
+        :autoresize="true"
         style="height: 250px; width: 100%"></e-chart>
 </template>
 
@@ -228,19 +229,11 @@ export default class TempChart extends Mixins(BaseMixin) {
 
     mounted() {
         this.initChart()
-
-        window.addEventListener('resize', this.eventListenerResize)
     }
 
     beforeDestroy() {
         if (typeof window === 'undefined') return
         if (this.chart) this.chart.dispose()
-
-        window.removeEventListener('resize', this.eventListenerResize)
-    }
-
-    eventListenerResize() {
-        this.chart?.resize()
     }
 
     initChart() {

src/components/gcodeviewer/Viewer.vue

@@ -53,6 +53,10 @@
 .disable-transition {
     transition: none !important;
 }
+
+.gcode-viewer-panel {
+    position: relative;
+}
 </style>
 
 <template>
@@ -219,6 +223,7 @@
                     type="file"
                     @change="fileSelected" />
             </v-card-text>
+            <resize-observer @notify="handleResize" />
         </panel>
         <v-snackbar v-model="loading" :timeout="-1" :value="true" fixed right bottom dark>
             <div>
@@ -276,6 +281,7 @@ import {
     mdiToggleSwitchOffOutline,
     mdiVideo3d,
 } from '@mdi/js'
+import { Debounce } from 'vue-debounce-decorator'
 
 interface downloadSnackbar {
     status: boolean
@@ -358,8 +364,6 @@ export default class Viewer extends Mixins(BaseMixin) {
         viewer = this.$store.state.gcodeviewer?.viewerBackup ?? null
 
         await this.init()
-
-        window.addEventListener('resize', this.eventListenerResize)
     }
 
     beforeDestroy() {
@@ -368,12 +372,13 @@ export default class Viewer extends Mixins(BaseMixin) {
             this.$store.dispatch('gcodeviewer/setLoadedFileBackup', this.loadedFile)
             this.$store.dispatch('gcodeviewer/setViewerBackup', viewer)
         }
-
-        window.removeEventListener('resize', this.eventListenerResize)
     }
 
-    eventListenerResize() {
+    @Debounce(200)
-        viewer?.resize()
+    handleResize() {
+        this.$nextTick(() => {
+            viewer?.resize()
+        })
     }
 
     get filePosition() {

src/components/panels/FarmPrinterPanel.vue

@@ -1,33 +1,3 @@
-<style scoped>
-.v-card.disabledPrinter {
-    opacity: 0.6;
-    filter: grayscale(70%);
-}
-
-.webcamContainer,
-.webcamContainer .vue-load-image,
-.webcamContainer > div,
-.webcamContainer img {
-    position: absolute !important;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
-.webcamContainer img {
-    height: 100%;
-}
-
-.webcamContainer .webcamFpsOutput {
-    display: none;
-}
-
-.v-overlay {
-    top: 48px;
-}
-</style>
-
 <template>
     <panel
         :icon="mdiPrinter3d"
@@ -145,6 +115,7 @@
                 </div>
             </template>
         </v-hover>
+        <resize-observer @notify="handleResize" />
     </panel>
 </template>
 
@@ -157,6 +128,7 @@ import MjpegstreamerAdaptive from '@/components/webcams/MjpegstreamerAdaptive.vu
 import MainsailLogo from '@/components/ui/MainsailLogo.vue'
 import Panel from '@/components/ui/Panel.vue'
 import { mdiPrinter3d, mdiWebcam, mdiMenuDown, mdiWebcamOff, mdiFileOutline } from '@mdi/js'
+import { Debounce } from 'vue-debounce-decorator'
 
 @Component({
     components: {
@@ -255,18 +227,59 @@ export default class FarmPrinterPanel extends Mixins(BaseMixin) {
     }
 
     mounted() {
-        window.addEventListener('resize', this.resize)
+        this.calcImageHeight()
-        this.resize()
     }
 
-    beforeDestroy() {
+    calcImageHeight() {
-        window.removeEventListener('resize', this.resize)
-    }
-
-    resize() {
         if (this.imageDiv?.$el?.clientWidth) {
             this.imageHeight = Math.round((this.imageDiv.$el.clientWidth / 3) * 2)
-        } else this.imageHeight = 200
+            return
+        }
+
+        this.imageHeight = 200
+    }
+
+    @Debounce(200)
+    handleResize() {
+        this.$nextTick(() => {
+            this.calcImageHeight()
+        })
     }
 }
 </script>
+
+<style scoped>
+.v-card.disabledPrinter {
+    opacity: 0.6;
+    filter: grayscale(70%);
+}
+
+.webcamContainer,
+.webcamContainer .vue-load-image,
+.webcamContainer > div,
+.webcamContainer img {
+    position: absolute !important;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.webcamContainer img {
+    height: 100%;
+}
+
+.webcamContainer .webcamFpsOutput {
+    display: none;
+}
+
+.v-overlay {
+    top: 48px;
+}
+</style>
+
+<style>
+.farmprinter-panel {
+    position: relative;
+}
+</style>

src/components/panels/JobqueuePanel.vue

@@ -99,6 +99,7 @@
                     </tr>
                 </template>
             </v-data-table>
+            <resize-observer @notify="handleResize" />
         </panel>
         <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
             <v-list>
@@ -219,16 +220,23 @@ export default class JobqueuePanel extends Mixins(BaseMixin) {
     }
 
     mounted() {
-        window.addEventListener('resize', this.eventListenerResize)
+        this.calcContentTdWidth()
-        this.eventListenerResize()
     }
 
-    destroyed() {
+    calcContentTdWidth() {
-        window.removeEventListener('resize', this.eventListenerResize)
-    }
-
-    eventListenerResize() {
         this.contentTdWidth = this.$refs.jobqueuePanel?.$el?.clientWidth - 48 - 32
     }
+
+    handleResize() {
+        this.$nextTick(() => {
+            this.calcContentTdWidth()
+        })
+    }
 }
 </script>
+
+<style>
+.jobqueue-panel {
+    position: relative;
+}
+</style>

src/components/panels/Status/Gcodefiles.vue

@@ -1,7 +1,5 @@
-<style lang="scss" scoped></style>
-
 <template>
-    <v-card ref="filesGcodeCard" flat>
+    <v-card ref="filesGcodeCard" class="filesGcodeCard" flat>
         <v-data-table
             :items="gcodeFiles"
             hide-default-footer
@@ -77,6 +75,7 @@
                 </tr>
             </template>
         </v-data-table>
+        <resize-observer @notify="handleResize" />
         <start-print-dialog
             :bool="showDialogBool"
             :file="dialogFile"
@@ -458,16 +457,23 @@ export default class StatusPanelGcodefiles extends Mixins(BaseMixin) {
     }
 
     mounted() {
-        window.addEventListener('resize', this.eventListenerResize)
+        this.calcContentTdWidth()
-        this.eventListenerResize()
     }
 
-    destroyed() {
+    calcContentTdWidth() {
-        window.removeEventListener('resize', this.eventListenerResize)
-    }
-
-    eventListenerResize() {
         this.contentTdWidth = this.$refs.filesGcodeCard?.$el?.clientWidth - 48 - 48 - 32
     }
+
+    handleResize() {
+        this.$nextTick(() => {
+            this.calcContentTdWidth()
+        })
+    }
 }
 </script>
+
+<style lang="scss" scoped>
+.filesGcodeCard {
+    position: relative;
+}
+</style>

src/components/panels/Status/Jobqueue.vue

@@ -1,7 +1,5 @@
-<style lang="scss" scoped></style>
-
 <template>
-    <v-card ref="filesJobqueue" flat>
+    <v-card ref="filesJobqueue" class="filesJobqueue" flat>
         <v-data-table
             :items="jobsTable"
             hide-default-footer
@@ -86,6 +84,7 @@
                 </tr>
             </template>
         </v-data-table>
+        <resize-observer @notify="handleResize" />
         <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
             <v-list>
                 <v-list-item @click="removeFromJobqueue(contextMenu.item)">
@@ -255,16 +254,23 @@ export default class StatusPanelJobqueue extends Mixins(BaseMixin) {
     }
 
     mounted() {
-        window.addEventListener('resize', this.eventListenerResize)
+        this.calcContentTdWidth()
-        this.eventListenerResize()
     }
 
-    destroyed() {
+    calcContentTdWidth() {
-        window.removeEventListener('resize', this.eventListenerResize)
-    }
-
-    eventListenerResize() {
         this.contentTdWidth = this.$refs.filesJobqueue?.$el?.clientWidth - 48 - 48 - 32
     }
+
+    handleResize() {
+        this.$nextTick(() => {
+            this.calcContentTdWidth()
+        })
+    }
 }
 </script>
+
+<style lang="scss" scoped>
+.filesJobqueue {
+    position: relative;
+}
+</style>

src/components/panels/Status/PrintstatusThumbnail.vue

@@ -1,11 +1,5 @@
-<style lang="scss" scoped>
-.statusPanel-big-thumbnail {
-    transition: height 0.25s ease-out;
-}
-</style>
-
 <template>
-    <div v-if="current_filename">
+    <div v-if="current_filename" class="statusPanel-printstatus-thumbnail">
         <v-img
             v-if="boolBigThumbnail"
             ref="bigThumbnail"
@@ -75,6 +69,7 @@
                 </v-row>
             </v-container>
         </template>
+        <resize-observer @notify="handleResize" />
     </div>
 </template>
 
@@ -84,6 +79,7 @@ import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { thumbnailBigMin, thumbnailSmallMax, thumbnailSmallMin } from '@/store/variables'
 import { mdiFileOutline, mdiFile } from '@mdi/js'
+import { Debounce } from 'vue-debounce-decorator'
 
 @Component({
     components: {},
@@ -198,17 +194,22 @@ export default class StatusPanelPrintstatusThumbnail extends Mixins(BaseMixin) {
         }
     }
 
-    created() {
+    @Debounce(200)
-        window.addEventListener('resize', this.onResize)
+    handleResize() {
-    }
+        this.$nextTick(() => {
-
+            const isFocused = document.activeElement === this.$refs.bigThumbnail?.$el
-    destroyed() {
+            if (isFocused) this.focusBigThumbnail()
-        window.removeEventListener('resize', this.onResize)
+        })
-    }
-
-    onResize() {
-        const isFocused = document.activeElement === this.$refs.bigThumbnail?.$el
-        if (isFocused) this.focusBigThumbnail()
     }
 }
 </script>
+
+<style lang="scss" scoped>
+.statusPanel-big-thumbnail {
+    transition: height 0.25s ease-out;
+}
+
+.statusPanel-printstatus-thumbnail {
+    position: relative;
+}
+</style>

src/main.ts

@@ -67,6 +67,12 @@ import { GridComponent, LegendComponent, TooltipComponent, DatasetComponent } fr
 use([SVGRenderer, LineChart, BarChart, LegendComponent, PieChart, DatasetComponent, GridComponent, TooltipComponent])
 Vue.component('EChart', ECharts)
 
+// vue-resize
+import 'vue-resize/dist/vue-resize.css'
+// @ts-ignore
+import VueResize from 'vue-resize'
+Vue.use(VueResize)
+
 //load config.json and init vue
 fetch('/config.json')
     .then((res) => res.json())