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

This commit is contained in:
Stefan Dej 2022-05-15 22:36:00 +02:00 committed by GitHub
parent 97912022c2
commit 8b4465300d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 158 additions and 129 deletions

22
package-lock.json generated
View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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> <template>
<panel <panel
:icon="mdiPrinter3d" :icon="mdiPrinter3d"
@ -145,6 +115,7 @@
</div> </div>
</template> </template>
</v-hover> </v-hover>
<resize-observer @notify="handleResize" />
</panel> </panel>
</template> </template>
@ -157,6 +128,7 @@ import MjpegstreamerAdaptive from '@/components/webcams/MjpegstreamerAdaptive.vu
import MainsailLogo from '@/components/ui/MainsailLogo.vue' import MainsailLogo from '@/components/ui/MainsailLogo.vue'
import Panel from '@/components/ui/Panel.vue' import Panel from '@/components/ui/Panel.vue'
import { mdiPrinter3d, mdiWebcam, mdiMenuDown, mdiWebcamOff, mdiFileOutline } from '@mdi/js' import { mdiPrinter3d, mdiWebcam, mdiMenuDown, mdiWebcamOff, mdiFileOutline } from '@mdi/js'
import { Debounce } from 'vue-debounce-decorator'
@Component({ @Component({
components: { components: {
@ -255,18 +227,59 @@ export default class FarmPrinterPanel extends Mixins(BaseMixin) {
} }
mounted() { mounted() {
window.addEventListener('resize', this.resize) this.calcImageHeight()
this.resize()
} }
beforeDestroy() { calcImageHeight() {
window.removeEventListener('resize', this.resize)
}
resize() {
if (this.imageDiv?.$el?.clientWidth) { if (this.imageDiv?.$el?.clientWidth) {
this.imageHeight = Math.round((this.imageDiv.$el.clientWidth / 3) * 2) 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> </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>

View File

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

View File

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

View File

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

View File

@ -1,11 +1,5 @@
<style lang="scss" scoped>
.statusPanel-big-thumbnail {
transition: height 0.25s ease-out;
}
</style>
<template> <template>
<div v-if="current_filename"> <div v-if="current_filename" class="statusPanel-printstatus-thumbnail">
<v-img <v-img
v-if="boolBigThumbnail" v-if="boolBigThumbnail"
ref="bigThumbnail" ref="bigThumbnail"
@ -75,6 +69,7 @@
</v-row> </v-row>
</v-container> </v-container>
</template> </template>
<resize-observer @notify="handleResize" />
</div> </div>
</template> </template>
@ -84,6 +79,7 @@ import { Mixins } from 'vue-property-decorator'
import BaseMixin from '@/components/mixins/base' import BaseMixin from '@/components/mixins/base'
import { thumbnailBigMin, thumbnailSmallMax, thumbnailSmallMin } from '@/store/variables' import { thumbnailBigMin, thumbnailSmallMax, thumbnailSmallMin } from '@/store/variables'
import { mdiFileOutline, mdiFile } from '@mdi/js' import { mdiFileOutline, mdiFile } from '@mdi/js'
import { Debounce } from 'vue-debounce-decorator'
@Component({ @Component({
components: {}, 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> </script>
<style lang="scss" scoped>
.statusPanel-big-thumbnail {
transition: height 0.25s ease-out;
}
.statusPanel-printstatus-thumbnail {
position: relative;
}
</style>

View File

@ -67,6 +67,12 @@ import { GridComponent, LegendComponent, TooltipComponent, DatasetComponent } fr
use([SVGRenderer, LineChart, BarChart, LegendComponent, PieChart, DatasetComponent, GridComponent, TooltipComponent]) use([SVGRenderer, LineChart, BarChart, LegendComponent, PieChart, DatasetComponent, GridComponent, TooltipComponent])
Vue.component('EChart', ECharts) 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 //load config.json and init vue
fetch('/config.json') fetch('/config.json')
.then((res) => res.json()) .then((res) => res.json())