提交 aa8317b1 authored 作者: wangjiahao's avatar wangjiahao

feat: 仪表板窗口变化 重置边界

上级 aa38a4be
...@@ -101,6 +101,7 @@ import Area from './Area' ...@@ -101,6 +101,7 @@ import Area from './Area'
import eventBus from '@/components/canvas/utils/eventBus' import eventBus from '@/components/canvas/utils/eventBus'
import Grid from './Grid' import Grid from './Grid'
import { changeStyleWithScale } from '@/components/canvas/utils/translate' import { changeStyleWithScale } from '@/components/canvas/utils/translate'
import { deepCopy } from '@/components/canvas/utils/utils'
export default { export default {
components: { Shape, ContextMenu, MarkLine, Area, Grid, DeDrag }, components: { Shape, ContextMenu, MarkLine, Area, Grid, DeDrag },
...@@ -128,8 +129,10 @@ export default { ...@@ -128,8 +129,10 @@ export default {
height: 0, height: 0,
isShowArea: false, isShowArea: false,
conditions: [], conditions: [],
scaleWidth: 100,
scaleHeight: 100, // 初始化 设置放大比例为3倍 防止在边框限制时 出现较小的父级支持造成组件位移
scaleWidth: 300,
scaleHeight: 300,
timer: null, timer: null,
needToChangeHeight: [ needToChangeHeight: [
'top', 'top',
...@@ -156,7 +159,10 @@ export default { ...@@ -156,7 +159,10 @@ export default {
customStyleHistory: null, customStyleHistory: null,
showDrag: true, showDrag: true,
vLine: [], vLine: [],
hLine: [] hLine: [],
changeIndex: 0,
timeMachine: null,
outStyleOld: null
} }
}, },
computed: { computed: {
...@@ -165,7 +171,6 @@ export default { ...@@ -165,7 +171,6 @@ export default {
width: this.format(this.canvasStyleData.width, this.scaleWidth) + 'px', width: this.format(this.canvasStyleData.width, this.scaleWidth) + 'px',
height: this.format(this.canvasStyleData.height, this.scaleHeight) + 'px' height: this.format(this.canvasStyleData.height, this.scaleHeight) + 'px'
} }
// console.log('customStyle=>' + JSON.stringify(style))
if (this.canvasStyleData.openCommonStyle) { if (this.canvasStyleData.openCommonStyle) {
if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) { if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
...@@ -180,6 +185,8 @@ export default { ...@@ -180,6 +185,8 @@ export default {
} }
} }
} }
// console.log('customStyle=>' + JSON.stringify(style) + JSON.stringify(this.canvasStyleData))
return style return style
}, },
panelInfo() { panelInfo() {
...@@ -194,7 +201,7 @@ export default { ...@@ -194,7 +201,7 @@ export default {
}, },
watch: { watch: {
customStyle: { customStyle: {
handler(newVal, oldVla) { handler(newVal) {
// 获取当前宽高(宽高改变后重新渲染画布) // 获取当前宽高(宽高改变后重新渲染画布)
// if (oldVla && newVal !== oldVla) { // if (oldVla && newVal !== oldVla) {
// this.showDrag = false // this.showDrag = false
...@@ -206,12 +213,21 @@ export default { ...@@ -206,12 +213,21 @@ export default {
outStyle: { outStyle: {
handler(newVal, oldVla) { handler(newVal, oldVla) {
this.changeScale() this.changeScale()
console.log('newVal:' + JSON.stringify(newVal) + 'oldVla:' + JSON.stringify(this.outStyleOld))
if (this.outStyleOld && (newVal.width > this.outStyleOld.width || newVal.height > this.outStyleOld.height)) {
this.resizeParentBounds()
}
this.outStyleOld = deepCopy(newVal)
}, },
deep: true deep: true
}, },
canvasStyleData: { canvasStyleData: {
handler(newVal, oldVla) { handler(newVal, oldVla) {
this.changeScale() // 第一次变化 不需要 重置边界 待改进
if (this.changeIndex++ > 0) {
this.resizeParentBounds()
}
// this.changeScale()
}, },
deep: true deep: true
}, },
...@@ -509,6 +525,24 @@ export default { ...@@ -509,6 +525,24 @@ export default {
const { vLine, hLine } = params const { vLine, hLine } = params
this.vLine = vLine this.vLine = vLine
this.hLine = hLine this.hLine = hLine
},
resizeParentBounds() {
this.destroyTimeMachine()
this.changeIndex++
this.parentBoundsChange(this.changeIndex)
},
parentBoundsChange(index) {
this.timeMachine = setTimeout(() => {
if (index === this.changeIndex) {
this.showDrag = false
this.$nextTick(() => (this.showDrag = true))
}
this.destroyTimeMachine()
}, 500)
},
destroyTimeMachine() {
this.timeMachine && clearTimeout(this.timeMachine)
this.timeMachine = null
} }
} }
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论