fix: resize issues with tempchart and other components (#808)
This commit is contained in:
parent
97912022c2
commit
8b4465300d
22
package-lock.json
generated
22
package-lock.json
generated
@ -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",
|
||||||
|
@ -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",
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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() {
|
||||||
|
@ -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() {
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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())
|
||||||
|
Loading…
x
Reference in New Issue
Block a user