From eaf256eed6b1e6154e602cb54306faa161994741 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Sun, 10 Oct 2021 14:20:51 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BF=AE=E5=A4=8D=E7=94=BB?= =?UTF-8?q?=E6=9D=BF=E9=83=A8=E5=88=86=E6=8B=96=E6=8B=BD=E9=97=AE=E9=A2=98?= =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E4=BD=8D=E7=BD=AE=E4=BA=A4=E6=8D=A2?= =?UTF-8?q?=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C=E7=AD=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/DeDrag/index.vue | 18 +++++++++++++++--- .../canvas/components/Editor/EditBar.vue | 7 +++++-- .../canvas/components/Editor/PGrid.vue | 1 + .../canvas/components/Editor/index.vue | 4 ++-- frontend/src/components/canvas/store/copy.js | 6 ++++-- frontend/src/store/index.js | 14 ++++++++------ frontend/src/views/panel/edit/index.vue | 8 ++++++++ frontend/src/views/panel/list/PanelList.vue | 4 ++++ 8 files changed, 47 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue index b3d676c66c..6a5d81bd09 100644 --- a/frontend/src/components/DeDrag/index.vue +++ b/frontend/src/components/DeDrag/index.vue @@ -11,7 +11,8 @@ [classNameRotating]: rotating, [classNameRotatable]: rotatable, [classNameMouseOn]: mouseOn || active, - ['linkageSetting']:linkageActive + ['linkageSetting']:linkageActive, + ['positionChange']:!(dragging || resizing||rotating) }, className ]" @@ -595,7 +596,7 @@ export default { this.maxH = val }, w(val) { - // console.log('changeWidthCK：' + this.resizing) + console.log('changeWidthCK：' + this.resizing) if (this.resizing || this.dragging) { return @@ -1576,12 +1577,17 @@ export default { }, // 记录当前样式 跟随阴影位置 矩阵处理 recordMatrixCurShadowStyle() { - // console.log('recordMatrixCurShadowStyle') // debugger const left = (this.element.x - 1) * this.curCanvasScale.matrixStyleWidth const top = (this.element.y - 1) * this.curCanvasScale.matrixStyleHeight const width = this.element.sizex * this.curCanvasScale.matrixStyleWidth const height = this.element.sizey * this.curCanvasScale.matrixStyleHeight + // const t1 = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) + // const left = Math.round(this.left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth + // const top = Math.round(this.top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight + // const width = t1 * this.curCanvasScale.matrixStyleWidth + // const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight + const style = { ...this.defaultStyle } @@ -1591,6 +1597,8 @@ export default { style.height = height style.rotate = this.rotate // this.hasMove = true + // console.log('recordMatrixCurShadowStyle:t1:' + t1 + ';mw:' + this.curCanvasScale.matrixStyleWidth + ';width:' + width) + this.$store.commit('setShapeStyle', style) // resize @@ -1757,6 +1765,10 @@ export default { opacity: 0.5; } +.positionChange{ + transition: 0.2s +} + .gap_class{ padding:5px; } diff --git a/frontend/src/components/canvas/components/Editor/EditBar.vue b/frontend/src/components/canvas/components/Editor/EditBar.vue index e1de137fc3..1e4f878832 100644 --- a/frontend/src/components/canvas/components/Editor/EditBar.vue +++ b/frontend/src/components/canvas/components/Editor/EditBar.vue @@ -26,6 +26,9 @@ + + + @@ -69,7 +72,7 @@ export default { } }, mounted() { - this.createTimer() + // this.createTimer() }, computed: { existLinkage() { @@ -102,7 +105,7 @@ export default { ]) }, beforeDestroy() { - this.destroyTimer() + // this.destroyTimer() }, methods: { createTimer() { diff --git a/frontend/src/components/canvas/components/Editor/PGrid.vue b/frontend/src/components/canvas/components/Editor/PGrid.vue index ac819304d7..817532c229 100644 --- a/frontend/src/components/canvas/components/Editor/PGrid.vue +++ b/frontend/src/components/canvas/components/Editor/PGrid.vue @@ -4,6 +4,7 @@
+ {{ xItem.el?1:0 }}
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue index 5de1d5aa34..48612c0856 100644 --- a/frontend/src/components/canvas/components/Editor/index.vue +++ b/frontend/src/components/canvas/components/Editor/index.vue @@ -13,9 +13,9 @@ @scroll="canvasScroll" > - + - + diff --git a/frontend/src/components/canvas/store/copy.js b/frontend/src/components/canvas/store/copy.js index e7daeb98cd..c79d7a9b5b 100644 --- a/frontend/src/components/canvas/store/copy.js +++ b/frontend/src/components/canvas/store/copy.js @@ -27,8 +27,10 @@ export default { } const data = state.copyData.data - data.style.top += 20 - data.style.left += 20 + if (!state.curComponent.auxiliaryMatrix) { + data.style.top += 20 + data.style.left += 20 + } // if (isMouse) { // data.style.top = state.menuTop diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js index 529eef7d55..fa6f88a070 100644 --- a/frontend/src/store/index.js +++ b/frontend/src/store/index.js @@ -98,7 +98,7 @@ const data = { state.styleChangeTimes = 0 state.curComponent = component state.curComponentIndex = index - console.log('setCurComponent:' + JSON.stringify(component)) + // console.log('setCurComponent:' + JSON.stringify(component)) }, setCurCanvasScale(state, curCanvasScale) { @@ -115,13 +115,15 @@ const data = { // }, setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) { - // console.log('setShapeStyle:width=' + width + ';height=' + height) - if (top || top === 0) curComponent.style.top = top / curCanvasScale.scalePointHeight - if (left || left === 0) curComponent.style.left = left / curCanvasScale.scalePointWidth - if (width || width === 0) curComponent.style.width = width / curCanvasScale.scalePointWidth - if (height || height === 0) curComponent.style.height = height / curCanvasScale.scalePointHeight + console.log('cw:' + curComponent.style.width + ';w:' + width + ';sp:' + curCanvasScale.scalePointWidth) + const ow = curComponent.style.width + if (top || top === 0) curComponent.style.top = (top / curCanvasScale.scalePointHeight) + 0.0000001 + if (left || left === 0) curComponent.style.left = (left / curCanvasScale.scalePointWidth) + 0.0000001 + if (width || width === 0) curComponent.style.width = (width / curCanvasScale.scalePointWidth + 0.0000001) + if (height || height === 0) curComponent.style.height = (height / curCanvasScale.scalePointHeight) + 0.0000001 if (rotate || rotate === 0) curComponent.style.rotate = rotate // console.log('setShapeStyle:curComponent' + 'top:' + top + ';left:' + left + '====' + JSON.stringify(curComponent)) + console.log('setShapeStyle:curComponent' + 'w:' + curComponent.style.width + ';ow:' + ow) }, setShapeSingleStyle({ curComponent }, { key, value }) { diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue index 77fb1906c8..9e1c8f16a9 100644 --- a/frontend/src/views/panel/edit/index.vue +++ b/frontend/src/views/panel/edit/index.vue @@ -387,6 +387,10 @@ export default { item.filters = (item.filters || []) item.linkageFilters = (item.linkageFilters || []) item.auxiliaryMatrix = (item.auxiliaryMatrix || false) + item.x = (item.x || 1) + item.y = (item.y || 1) + item.sizex = (item.sizex || 5) + item.sizey = (item.sizey || 5) }) this.$store.commit('setComponentData', this.resetID(componentDatas)) // this.$store.commit('setComponentData', this.resetID(JSON.parse(componentDataTemp))) @@ -401,6 +405,10 @@ export default { item.filters = (item.filters || []) item.linkageFilters = (item.linkageFilters || []) item.auxiliaryMatrix = (item.auxiliaryMatrix || false) + item.x = (item.x || 1) + item.y = (item.y || 1) + item.sizex = (item.sizex || 5) + item.sizey = (item.sizey || 5) }) this.$store.commit('setComponentData', this.resetID(componentDatas)) // this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData))) diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue index 5890863fb6..f249e23823 100644 --- a/frontend/src/views/panel/list/PanelList.vue +++ b/frontend/src/views/panel/list/PanelList.vue @@ -622,6 +622,10 @@ export default { item.filters = (item.filters || []) item.linkageFilters = (item.linkageFilters || []) item.auxiliaryMatrix = (item.auxiliaryMatrix || false) + item.x = (item.x || 1) + item.y = (item.y || 1) + item.sizex = (item.sizex || 5) + item.sizey = (item.sizey || 5) }) this.$store.commit('setComponentData', this.resetID(componentDatas)) // this.$store.commit('setComponentData', sourceInfo.type === 'custom' ? sourceInfo : this.resetID(sourceInfo))