CreatBot/CreatBotMainsail
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

11
src/components/charts/HistoryAllPrintStatus.vue
View File

@ -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>

11
src/components/charts/HistoryFilamentUsage.vue
View File

@ -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>

10
src/components/charts/HistoryPrinttimeAvg.vue
View File

@ -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>

9
src/components/charts/TempChart.vue
View File

@ -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() {

17
src/components/gcodeviewer/Viewer.vue
View File

@ -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() {
viewer?.resize()
@Debounce(200)
handleResize() {
this.$nextTick(() => {
viewer?.resize()
})
}
get filePosition() {

89
src/components/panels/FarmPrinterPanel.vue
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>
<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.resize()
this.calcImageHeight()
}
beforeDestroy() {
window.removeEventListener('resize', this.resize)
}
resize() {
calcImageHeight() {
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>

22
src/components/panels/JobqueuePanel.vue
View File

@ -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.eventListenerResize()
this.calcContentTdWidth()
}
destroyed() {
window.removeEventListener('resize', this.eventListenerResize)
}
eventListenerResize() {
calcContentTdWidth() {
this.contentTdWidth = this.$refs.jobqueuePanel?.$el?.clientWidth - 48 - 32
}
handleResize() {
this.$nextTick(() => {
this.calcContentTdWidth()
})
}
}
</script>
<style>
.jobqueue-panel {
position: relative;
}
</style>

26
src/components/panels/Status/Gcodefiles.vue
View File

@ -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.eventListenerResize()
this.calcContentTdWidth()
}
destroyed() {
window.removeEventListener('resize', this.eventListenerResize)
}
eventListenerResize() {
calcContentTdWidth() {
this.contentTdWidth = this.$refs.filesGcodeCard?.$el?.clientWidth - 48 - 48 - 32
}
handleResize() {
this.$nextTick(() => {
this.calcContentTdWidth()
})
}
}
</script>
<style lang="scss" scoped>
.filesGcodeCard {
position: relative;
}
</style>

26
src/components/panels/Status/Jobqueue.vue
View File

@ -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.eventListenerResize()
this.calcContentTdWidth()
}
destroyed() {
window.removeEventListener('resize', this.eventListenerResize)
}
eventListenerResize() {
calcContentTdWidth() {
this.contentTdWidth = this.$refs.filesJobqueue?.$el?.clientWidth - 48 - 48 - 32
}
handleResize() {
this.$nextTick(() => {
this.calcContentTdWidth()
})
}
}
</script>
<style lang="scss" scoped>
.filesJobqueue {
position: relative;
}
</style>

37
src/components/panels/Status/PrintstatusThumbnail.vue
View File

@ -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() {
window.addEventListener('resize', this.onResize)
}
destroyed() {
window.removeEventListener('resize', this.onResize)
}
onResize() {
const isFocused = document.activeElement === this.$refs.bigThumbnail?.$el
if (isFocused) this.focusBigThumbnail()
@Debounce(200)
handleResize() {
this.$nextTick(() => {
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>

6
src/main.ts
View File

@ -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())