From 01cab0770fa0fd5cb58044a5ae004265a01633cd Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Wed, 25 Aug 2021 17:11:52 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=E4=BB=AA=E8=A1=A8=E6=9D=BF=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E6=97=B6=EF=BC=8C=E6=96=87=E5=AD=97=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E3=80=81=E7=9F=A9=E5=BD=A2=E7=BB=84=E4=BB=B6=E3=80=81=E8=BF=87?= =?UTF-8?q?=E6=BB=A4=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E5=BC=BA=E5=88=B6=E5=9C=A8=E7=94=BB=E5=B8=83?= =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E5=86=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../canvas/components}/FilterTextAttr.vue | 20 +++++++++++++++++-- .../canvas/components/RectangleAttr.vue | 20 +++++++++++++++++-- .../canvas/components}/TextAttr.vue | 20 +++++++++++++++++-- frontend/src/views/panel/edit/index.vue | 4 ++-- 4 files changed, 56 insertions(+), 8 deletions(-) rename frontend/src/{views/Tinymce => components/canvas/components}/FilterTextAttr.vue (89%) rename frontend/src/{views/Tinymce => components/canvas/components}/TextAttr.vue (90%) diff --git a/frontend/src/views/Tinymce/FilterTextAttr.vue b/frontend/src/components/canvas/components/FilterTextAttr.vue similarity index 89% rename from frontend/src/views/Tinymce/FilterTextAttr.vue rename to frontend/src/components/canvas/components/FilterTextAttr.vue index 2b007edd48..83874a5062 100644 --- a/frontend/src/views/Tinymce/FilterTextAttr.vue +++ b/frontend/src/components/canvas/components/FilterTextAttr.vue @@ -109,6 +109,13 @@ export default { styleInfo() { return this.$store.state.curComponent.style }, + canvasWidth() { + let scaleWidth = 1 + if (this.canvasStyleData.selfAdaption) { + scaleWidth = this.curCanvasScale.scaleWidth / 100 + } + return this.canvasStyleData.width * scaleWidth + }, ...mapState([ 'curComponent', 'curCanvasScale', @@ -124,10 +131,19 @@ export default { this.$refs.backgroundColorPicker.handleTrigger() }, getPositionX(x) { + let ps = 0 if (this.canvasStyleData.selfAdaption) { - return (x * this.curCanvasScale.scaleWidth / 100) + 60 + ps = (x * this.curCanvasScale.scaleWidth / 100) + 60 } else { - return x + 60 + ps = x + 60 + } + // 防止toolbar超出边界 + const xGap = ps + 295 - this.canvasWidth + // console.log('canvasWidth:' + this.canvasWidth + ';xGap:' + xGap) + if (xGap > 0) { + return ps - xGap + } else { + return ps } }, getPositionY(y) { diff --git a/frontend/src/components/canvas/components/RectangleAttr.vue b/frontend/src/components/canvas/components/RectangleAttr.vue index da5f9b12ee..f109a05f1f 100644 --- a/frontend/src/components/canvas/components/RectangleAttr.vue +++ b/frontend/src/components/canvas/components/RectangleAttr.vue @@ -161,6 +161,13 @@ export default { styleInfo() { return this.$store.state.curComponent.style }, + canvasWidth() { + let scaleWidth = 1 + if (this.canvasStyleData.selfAdaption) { + scaleWidth = this.curCanvasScale.scaleWidth / 100 + } + return this.canvasStyleData.width * scaleWidth + }, ...mapState([ 'curComponent', 'curCanvasScale', @@ -176,10 +183,19 @@ export default { this.$refs.backgroundColorPicker.handleTrigger() }, getPositionX(x) { + let ps = 0 if (this.canvasStyleData.selfAdaption) { - return (x * this.curCanvasScale.scaleWidth / 100) + 60 + ps = (x * this.curCanvasScale.scaleWidth / 100) + 60 } else { - return x + 60 + ps = x + 60 + } + // 防止toolbar超出边界 + const xGap = ps + 345 - this.canvasWidth + // console.log('canvasWidth:' + this.canvasWidth + ';xGap:' + xGap) + if (xGap > 0) { + return ps - xGap + } else { + return ps } }, getPositionY(y) { diff --git a/frontend/src/views/Tinymce/TextAttr.vue b/frontend/src/components/canvas/components/TextAttr.vue similarity index 90% rename from frontend/src/views/Tinymce/TextAttr.vue rename to frontend/src/components/canvas/components/TextAttr.vue index 1630a4989e..97ac4b741d 100644 --- a/frontend/src/views/Tinymce/TextAttr.vue +++ b/frontend/src/components/canvas/components/TextAttr.vue @@ -124,6 +124,13 @@ export default { styleInfo() { return this.$store.state.curComponent.style }, + canvasWidth() { + let scaleWidth = 1 + if (this.canvasStyleData.selfAdaption) { + scaleWidth = this.curCanvasScale.scaleWidth / 100 + } + return this.canvasStyleData.width * scaleWidth + }, ...mapState([ 'curComponent', 'curCanvasScale', @@ -139,10 +146,19 @@ export default { this.$refs.backgroundColorPicker.handleTrigger() }, getPositionX(x) { + let ps = 0 if (this.canvasStyleData.selfAdaption) { - return (x * this.curCanvasScale.scaleWidth / 100) + 60 + ps = (x * this.curCanvasScale.scaleWidth / 100) + 60 } else { - return x + 60 + ps = x + 60 + } + // 防止toolbar超出边界 + const xGap = ps + 395 - this.canvasWidth + // console.log('canvasWidth:' + this.canvasWidth + ';xGap:' + xGap) + if (xGap > 0) { + return ps - xGap + } else { + return ps } }, getPositionY(y) { diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue index 729d4f6f62..5d621c2e0b 100644 --- a/frontend/src/views/panel/edit/index.vue +++ b/frontend/src/views/panel/edit/index.vue @@ -214,8 +214,8 @@ import toast from '@/components/canvas/utils/toast' import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list' import generateID from '@/components/canvas/utils/generateID' import RectangleAttr from '@/components/canvas/components/RectangleAttr' -import TextAttr from '@/views/Tinymce/TextAttr' -import FilterTextAttr from '@/views/Tinymce/FilterTextAttr' +import TextAttr from '@/components/canvas/components/TextAttr' +import FilterTextAttr from '@/components/canvas/components/FilterTextAttr' export default { name: 'PanelEdit',