From 394fb46b3cd6c82fa2f46b542d6f208d3d9d2c3b Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Mon, 21 Jun 2021 18:43:41 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=8B=96=E6=8B=BD?= =?UTF-8?q?=E6=95=88=E6=9E=9C=20=E9=98=B2=E6=AD=A2=E5=A4=9A=E6=AC=A1?= =?UTF-8?q?=E8=AF=B7=E6=B1=82=E5=90=8E=E5=8F=B0=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/DeDrag/index.vue | 130 ++++++++++-------- .../canvas/components/Editor/index.vue | 23 ++-- 2 files changed, 85 insertions(+), 68 deletions(-) diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue index ddde75c207..04a3529e00 100644 --- a/frontend/src/components/DeDrag/index.vue +++ b/frontend/src/components/DeDrag/index.vue @@ -298,6 +298,10 @@ export default { horizontal: { type: Boolean, default: true + }, + changeStyle: { + require: true, + type: Object } }, data: function() { @@ -542,69 +546,21 @@ export default { this.bounds = this.calcResizeLimits() } this.changeHeight(val) + }, + changeStyle(val) { + this.beforeDestroyFunction() + this.createdFunction() + this.mountedFunction() } }, created: function() { - // eslint-disable-next-line 无效的prop：minWidth不能大于maxWidth - if (this.maxWidth && this.minWidth > this.maxWidth) console.warn('[Vdr warn]: Invalid prop: minWidth cannot be greater than maxWidth') - // eslint-disable-next-line 无效prop：minHeight不能大于maxHeight' - if (this.maxWidth && this.minHeight > this.maxHeight) console.warn('[Vdr warn]: Invalid prop: minHeight cannot be greater than maxHeight') - this.elmX = 0 - this.elmY = 0 - this.elmW = 0 - this.elmH = 0 - this.lastCenterX = 0 - this.lastCenterY = 0 - this.fixedXName = '' - this.fixedYName = '' - this.fixedX = 0 - this.fixedY = 0 - this.TL = {} - this.TR = {} - this.BL = {} - this.BR = {} - this.resetBoundsAndMouseState() + this.createdFunction() }, mounted: function() { - // private 冲突检测 和水平设计值保持一致 - // this.isConflictCheck = this.horizontal - // this.snap = this.horizontal - // this.snapTolerance = 5 - // this.grid = [10, 10] - - if (!this.enableNativeDrag) { - this.$el.ondragstart = () => false - } - const [parentWidth, parentHeight] = this.getParentSize() - this.parentWidth = parentWidth - this.parentHeight = parentHeight - const [width, height] = getComputedSize(this.$el) - this.aspectFactor = (this.w !== 'auto' ? this.w : width) / (this.h !== 'auto' ? this.h : height) - if (this.outsideAspectRatio) { - this.aspectFactor = this.outsideAspectRatio - } - this.width = this.w !== 'auto' ? this.w : width - // console.log('width1:' + this.width) - this.height = this.h !== 'auto' ? this.h : height - this.right = this.parentWidth - this.width - this.left - this.bottom = this.parentHeight - this.height - this.top - - // 绑定data-*属性 - this.settingAttribute() - // 监听取消操作 - addEvent(document.documentElement, 'mousedown', this.deselect) - addEvent(document.documentElement, 'touchend touchcancel', this.deselect) - // 窗口变化时，检查容器大小 - addEvent(window, 'resize', this.checkParentSize) + this.mountedFunction() }, beforeDestroy: function() { - removeEvent(document.documentElement, 'mousedown', this.deselect) - removeEvent(document.documentElement, 'touchstart', this.handleUp) - removeEvent(document.documentElement, 'mousemove', this.move) - removeEvent(document.documentElement, 'touchmove', this.move) - removeEvent(document.documentElement, 'mouseup', this.handleUp) - removeEvent(document.documentElement, 'touchend touchcancel', this.deselect) - removeEvent(window, 'resize', this.checkParentSize) + this.beforeDestroyFunction() }, methods: { // 重置边界和鼠标状态 @@ -1506,6 +1462,68 @@ export default { style.rotate = this.rotate this.hasMove = true this.$store.commit('setShapeStyle', style) + }, + mountedFunction() { + // private 冲突检测 和水平设计值保持一致 + // this.isConflictCheck = this.horizontal + // this.snap = this.horizontal + // this.snapTolerance = 5 + // this.grid = [10, 10] + + if (!this.enableNativeDrag) { + this.$el.ondragstart = () => false + } + const [parentWidth, parentHeight] = this.getParentSize() + this.parentWidth = parentWidth + this.parentHeight = parentHeight + const [width, height] = getComputedSize(this.$el) + this.aspectFactor = (this.w !== 'auto' ? this.w : width) / (this.h !== 'auto' ? this.h : height) + if (this.outsideAspectRatio) { + this.aspectFactor = this.outsideAspectRatio + } + this.width = this.w !== 'auto' ? this.w : width + // console.log('width1:' + this.width) + this.height = this.h !== 'auto' ? this.h : height + this.right = this.parentWidth - this.width - this.left + this.bottom = this.parentHeight - this.height - this.top + + // 绑定data-*属性 + this.settingAttribute() + // 监听取消操作 + addEvent(document.documentElement, 'mousedown', this.deselect) + addEvent(document.documentElement, 'touchend touchcancel', this.deselect) + // 窗口变化时，检查容器大小 + addEvent(window, 'resize', this.checkParentSize) + }, + createdFunction() { + // eslint-disable-next-line 无效的prop：minWidth不能大于maxWidth + if (this.maxWidth && this.minWidth > this.maxWidth) console.warn('[Vdr warn]: Invalid prop: minWidth cannot be greater than maxWidth') + // eslint-disable-next-line 无效prop：minHeight不能大于maxHeight' + if (this.maxWidth && this.minHeight > this.maxHeight) console.warn('[Vdr warn]: Invalid prop: minHeight cannot be greater than maxHeight') + this.elmX = 0 + this.elmY = 0 + this.elmW = 0 + this.elmH = 0 + this.lastCenterX = 0 + this.lastCenterY = 0 + this.fixedXName = '' + this.fixedYName = '' + this.fixedX = 0 + this.fixedY = 0 + this.TL = {} + this.TR = {} + this.BL = {} + this.BR = {} + this.resetBoundsAndMouseState() + }, + beforeDestroyFunction() { + removeEvent(document.documentElement, 'mousedown', this.deselect) + removeEvent(document.documentElement, 'touchstart', this.handleUp) + removeEvent(document.documentElement, 'mousemove', this.move) + removeEvent(document.documentElement, 'touchmove', this.move) + removeEvent(document.documentElement, 'mouseup', this.handleUp) + removeEvent(document.documentElement, 'touchend touchcancel', this.deselect) + removeEvent(window, 'resize', this.checkParentSize) } } diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue index dea2f577a7..5b029ea5ef 100644 --- a/frontend/src/components/canvas/components/Editor/index.vue +++ b/frontend/src/components/canvas/components/Editor/index.vue @@ -29,7 +29,7 @@ :class="{'gap_class':canvasStyleData.panel.gap==='yes'}" :snap="true" :snap-tolerance="1" - :change-style="customStyleHistory" + :change-style="customStyle" @refLineParams="getRefLineParams" > (this.showDrag = true)) + // } + }, + deep: true + }, outStyle: { handler(newVal, oldVla) { this.changeScale() @@ -454,17 +464,6 @@ export default { } }, changeScale() { - // 获取当前宽高（宽高改变后重新渲染画布） - const style = { - width: this.format(this.canvasStyleData.width, this.scaleWidth) + 'px', - height: this.format(this.canvasStyleData.height, this.scaleHeight) + 'px' - } - if (this.customStyleHistory && this.customStyleHistory !== style) { - this.showDrag = false - this.$nextTick(() => (this.showDrag = true)) - } - this.customStyleHistory = style - if (this.canvasStyleData.matrixCount) { this.matrixCount = this.canvasStyleData.matrixCount }