center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge pull request #178 from dataease/pr@dev@panel

Browse Source 
fix:矩形组件和文本组件在非自适应画布区域的模式下对应悬浮组件定位问题
This commit is contained in:
王嘉豪 2021-07-07 19:10:30 +08:00 committed by GitHub
commit 66760cdf9a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 52 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/canvas/components/RectangleAttr.vue
View File

@ -58,6 +58,16 @@
<script>
import { mapState } from 'vuex'
export default {
props: {
scrollLeft: {
type: Number,
default: 0
},
scrollTop: {
type: Number,
default: 0
}
},
data() {
return {
lineStyle: [{
@ -113,8 +123,8 @@ export default {
mainStyle() {
const style = {
left: this.getPositionX(this.curComponent.style.left) + 'px',
top: (this.getPositionY(this.curComponent.style.top) - 3) + 'px'
left: this.getPositionX(this.curComponent.style.left - this.scrollLeft) + 'px',
top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop - 3) + 'px'
}
return style
},
@ -139,7 +149,7 @@ export default {
if (this.canvasStyleData.selfAdaption) {
return (x * this.curCanvasScale.scaleWidth / 100) + 60
} else {
return x + 190
return x + 60
}
},
getPositionY(y) {

16
frontend/src/views/Tinymce/RectangleAttr.vue
View File

@ -58,6 +58,16 @@
<script>
import { mapState } from 'vuex'
export default {
props: {
scrollLeft: {
type: Number,
default: 0
},
scrollTop: {
type: Number,
default: 0
}
},
data() {
return {
lineStyle: [{
@ -113,8 +123,8 @@ export default {
mainStyle() {
const style = {
left: this.getPositionX(this.curComponent.style.left) + 'px',
top: (this.getPositionY(this.curComponent.style.top) - 3) + 'px'
left: this.getPositionX(this.curComponent.style.left - this.scrollLeft) + 'px',
top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop - 3) + 'px'
}
return style
},
@ -139,7 +149,7 @@ export default {
if (this.canvasStyleData.selfAdaption) {
return (x * this.curCanvasScale.scaleWidth / 100) + 60
} else {
return x + 190
return x + 60
}
},
getPositionY(y) {

16
frontend/src/views/Tinymce/TextAttr.vue
View File

@ -67,6 +67,16 @@
<script>
import { mapState } from 'vuex'
export default {
props: {
scrollLeft: {
type: Number,
default: 0
},
scrollTop: {
type: Number,
default: 0
}
},
data() {
return {
textAlignOptions: [
@ -106,8 +116,8 @@ export default {
mainStyle() {
const style = {
left: this.getPositionX(this.curComponent.style.left) + 'px',
top: (this.getPositionY(this.curComponent.style.top) - 3) + 'px'
left: (this.getPositionX(this.curComponent.style.left) - this.scrollLeft) + 'px',
top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop - 3) + 'px'
}
return style
},
@ -132,7 +142,7 @@ export default {
if (this.canvasStyleData.selfAdaption) {
return (x * this.curCanvasScale.scaleWidth / 100) + 60
} else {
return x + 190
return x + 60
}
},
getPositionY(y) {

16
frontend/src/views/panel/edit/index.vue
View File

@ -101,6 +101,7 @@
@dragover="handleDragOver"
@mousedown="handleMouseDown"
@mouseup="deselectCurComponent"
@scroll="canvasScroll"
>
<Editor v-if="!previewVisible" :out-style="outStyle" />
</div>
@ -158,8 +159,8 @@
<input id="input" ref="files" type="file" accept="image/*" hidden @change="handleFileChange">
<!--矩形样式组件-->
<RectangleAttr v-if="curComponent&&curComponent.type==='rect-shape'" />
<TextAttr v-if="curComponent&&curComponent.type==='v-text'" />
<RectangleAttr v-if="curComponent&&curComponent.type==='rect-shape'" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
<TextAttr v-if="curComponent&&curComponent.type==='v-text'" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
<!--复用ChartGroup组件 不做显示-->
<ChartGroup
@ -269,7 +270,9 @@ export default {
beforeDialogValue: [],
styleDialogVisible: false,
currentDropElement: null,
adviceGroupId: null
adviceGroupId: null,
scrollLeft: 0,
scrollTop: 0
}
},
@ -307,6 +310,8 @@ export default {
// this.restore()
// 全局监听按键事件
listenGlobalKeyDown()
this.$store.commit('setCurComponent', { component: null, index: null })
},
mounted() {
// this.insertToBody()
@ -662,6 +667,11 @@ export default {
this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' }})
}
},
canvasScroll(event) {
debugger
this.scrollLeft = event.target.scrollLeft
this.scrollTop = event.target.scrollTop
}
}
}