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

Merge pull request #849 from dataease/pr@dev@refactor_panel-text

Browse Source 
feat:编辑仪表板时，外部组件拖拽进仪表板时可以通过附加拖拽阴影区进行预定位
This commit is contained in:
王嘉豪 2021-09-22 16:52:47 +08:00 committed by GitHub
commit 40e529af7a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 142 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/components/DeDrag/shadow.vue
View File

@ -1,5 +1,5 @@
<template>
<div style="z-index:1" :style="style" />
<div style="z-index:-1" :style="styleInfo" />
</template>
<script>
@ -8,12 +8,29 @@ export default {
replace: true,
name: 'Shadow',
computed: {
style() {
styleInfo() {
// console.log('styleInfo==>')
// debugger
// console.log('dragComponentInfo==>' + this.dragComponentInfo.shadowStyle.x)
let left = 0
let top = 0
let width = 0
let height = 0
if (this.dragComponentInfo) {
// 组件移入
left = this.dragComponentInfo.shadowStyle.x
top = this.dragComponentInfo.shadowStyle.y
width = this.dragComponentInfo.style.width
height = this.dragComponentInfo.style.height
// console.log('left:' + left + 'top:' + top + 'width:' + width + 'height:' + height)
} else {
left = this.curComponent.style.left * this.curCanvasScale.scaleWidth / 100
top = this.curComponent.style.top * this.curCanvasScale.scaleHeight / 100
width = this.curComponent.style.width * this.curCanvasScale.scaleWidth / 100
height = this.curComponent.style.height * this.curCanvasScale.scaleHeight / 100
// console.log('curComponent left:' + left + 'top:' + top + 'width:' + width + 'height:' + height)
}
// 当前默认为自适应
let left = this.curComponent.style.left * this.curCanvasScale.scaleWidth / 100
let top = this.curComponent.style.top * this.curCanvasScale.scaleHeight / 100
let width = this.curComponent.style.width * this.curCanvasScale.scaleWidth / 100
let height = this.curComponent.style.height * this.curCanvasScale.scaleHeight / 100
if (this.canvasStyleData.auxiliaryMatrix) {
left = Math.round(left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
width = Math.round(width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
@ -29,8 +46,15 @@ export default {
position: 'absolute'
}
// console.log('style=>' + JSON.stringify(style))
// 记录外部拖拽进入仪表板时阴影区域宽高
if (this.dragComponentInfo) {
this.recordShadowStyle(left, top, width, height)
}
return style
},
dragComponentInfo() {
return this.$store.state.dragComponentInfo
},
...mapState([
'curComponent',
'editor',
@ -38,6 +62,20 @@ export default {
'canvasStyleData',
'linkageSettingStatus'
])
},
methods: {
recordShadowStyle(x, y, width, height) {
this.dragComponentInfo.shadowStyle.width = this.scaleW(width)
this.dragComponentInfo.shadowStyle.x = this.scaleW(x)
this.dragComponentInfo.shadowStyle.height = this.scaleH(height)
this.dragComponentInfo.shadowStyle.y = this.scaleH(y)
},
scaleH(h) {
return h * 100 / this.curCanvasScale.scaleHeight
},
scaleW(w) {
return w * 100 / this.curCanvasScale.scaleWidth
}
}
}

32
frontend/src/components/canvas/components/Editor/index.vue
View File

@ -9,10 +9,11 @@
}
]"
:style="customStyle"
@dragover="handleDragOver"
@mousedown="handleMouseDown"
>
<!-- 网格线 -->
<!-- <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />-->
<!-- <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />-->
<!-- 仪表板联动清除按钮-->
<canvas-opt-bar />
@ -104,7 +105,7 @@
/>
</de-drag>
<!--拖拽阴影部分-->
<drag-shadow v-if="curComponent&&this.curComponent.optStatus.dragging" />
<drag-shadow v-if="(curComponent&&this.curComponent.optStatus.dragging)||dragComponentInfo" />
<!-- 右击菜单 -->
<ContextMenu />
<!-- 标线 (临时去掉标线 吸附等功能)-->
@ -262,6 +263,9 @@ export default {
panelInfo() {
return this.$store.state.panel.panelInfo
},
dragComponentInfo() {
return this.$store.state.dragComponentInfo
},
...mapState([
'componentData',
'curComponent',
@ -638,6 +642,30 @@ export default {
// console.log('view:resizeView')
this.$refs.wrapperChild[index].chartResize()
}
},
handleDragOver(e) {
// console.log('handleDragOver=>layer:' + e.layerX + ':' + e.layerY + ';offSet=>' + e.offsetX + ':' + e.offsetY + ';page=' + e.pageX + ':' + e.pageY)
// console.log('e=>x=>' + JSON.stringify(e))
// 使用e.pageX 避免抖动的情况
this.dragComponentInfo.shadowStyle.x = e.pageX - 220
this.dragComponentInfo.shadowStyle.y = e.pageY - 90
// console.log('handleDragOver=>x=>' + this.dragComponentInfo.shadowStyle.x)
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
},
getPositionX(x) {
if (this.canvasStyleData.selfAdaption) {
return x * 100 / this.curCanvasScale.scaleWidth
} else {
return x
}
},
getPositionY(y) {
if (this.canvasStyleData.selfAdaption) {
return y * 100 / this.curCanvasScale.scaleHeight
} else {
return y
}
}
}
}

9
frontend/src/components/canvas/custom-component/component-list.js
View File

@ -137,7 +137,7 @@ const list = [
icon: 'juxing',
type: 'view',
style: {
width: 200,
width: 400,
height: 300,
borderRadius: ''
}
@ -148,7 +148,12 @@ const list = [
type: 'picture-add',
label: '拖拽上传',
icon: 'iconfont icon-picture',
defaultClass: 'text-filter'
defaultClass: 'text-filter',
style: {
width: 400,
height: 200,
borderRadius: ''
}
}
]

6
frontend/src/store/index.js
View File

@ -258,6 +258,12 @@ const data = {
// state.styleChangeTimes++
},
setDragComponentInfo(state, dragComponentInfo) {
dragComponentInfo['shadowStyle'] = {
x: 0,
y: 0,
height: 0,
width: 0
}
state.dragComponentInfo = dragComponentInfo
},
clearDragComponentInfo(state) {

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

@ -55,10 +55,11 @@
</template>
<script>
import { assistList, pictureList } from '@/components/canvas/custom-component/component-list'
import componentList, { assistList, pictureList } from '@/components/canvas/custom-component/component-list'
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 { deepCopy } from '@/components/canvas/utils/utils'
export default {
name: 'FilterGroup',
@ -71,6 +72,7 @@ export default {
methods: {
handleDragStart(ev) {
this.$store.commit('setDragComponentInfo', this.componentInfo(ev.target.dataset.id))
ev.dataTransfer.effectAllowed = 'copy'
const dataTrans = {
type: 'assist',
@ -115,13 +117,23 @@ export default {
}
})
this.$store.commit('recordSnapshot','handleFileChange')
this.$store.commit('recordSnapshot', 'handleFileChange')
}
img.src = fileResult
}
reader.readAsDataURL(file)
},
componentInfo(id) {
// 辅助设计组件
let component
componentList.forEach(componentTemp => {
if (id === componentTemp.id) {
component = deepCopy(componentTemp)
}
})
return component
}
}
}

23
frontend/src/views/panel/ViewSelect/index.vue
View File

@ -31,6 +31,7 @@
:highlight-current="true"
@node-drag-start="handleDragStart"
@node-click="nodeClick"
@node-drag-end="dragEnd"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>
@ -62,6 +63,8 @@
<script>
import { tree, findOne } from '@/api/panel/view'
import componentList from '@/components/canvas/custom-component/component-list'
import { deepCopy } from '@/components/canvas/utils/utils'
export default {
name: 'ViewSelect',
data() {
@ -105,19 +108,21 @@ export default {
})
},
handleDragStart(node, ev) {
this.$store.commit('setDragComponentInfo', node)
this.$store.commit('setDragComponentInfo', this.viewComponentInfo())
ev.dataTransfer.effectAllowed = 'copy'
const dataTrans = {
type: 'view',
id: node.data.id
}
ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
},
dragEnd() {
console.log('dragEnd')
this.$store.commit('clearDragComponentInfo')
},
// 判断节点能否被拖拽
allowDrag(draggingNode) {
if (draggingNode.data.type === 'scene') {
if (draggingNode.data.type === 'scene' || draggingNode.data.type === 'group') {
return false
} else {
return true
@ -128,6 +133,16 @@ export default {
},
newChart() {
this.$emit('newChart')
},
viewComponentInfo() {
let component
// 用户视图设置 复制一个模板
componentList.forEach(componentTemp => {
if (componentTemp.type === 'view') {
component = deepCopy(componentTemp)
}
})
return component
}
}

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

@ -98,7 +98,6 @@
id="canvasInfo"
class="content this_canvas"
@drop="handleDrop"
@dragover="handleDragOver"
@mousedown="handleMouseDown"
@mouseup="deselectCurComponent"
@scroll="canvasScroll"
@ -291,7 +290,8 @@ export default {
'canvasStyleData',
'curComponentIndex',
'componentData',
'linkageSettingStatus'
'linkageSettingStatus',
'dragComponentInfo'
])
},
@ -440,7 +440,6 @@ export default {
return data
},
handleDrop(e) {
this.$store.commit('clearDragComponentInfo')
this.currentDropElement = e
e.preventDefault()
e.stopPropagation()
@ -490,12 +489,18 @@ export default {
}
// position = absolution 或导致有偏移 这里中和一下偏移量
component.style.top = this.getPositionY(e.layerY)
component.style.left = this.getPositionX(e.layerX)
// component.style.top = this.getPositionY(e.layerY)
// component.style.left = this.getPositionX(e.layerX)
component.style.top = this.dragComponentInfo.shadowStyle.y
component.style.left = this.dragComponentInfo.shadowStyle.x
component.style.width = this.dragComponentInfo.shadowStyle.width
component.style.height = this.dragComponentInfo.shadowStyle.height
component.id = newComponentId
this.$store.commit('addComponent', { component })
this.$store.commit('recordSnapshot', 'handleDrop')
this.clearCurrentInfo()
// this.$store.commit('clearDragComponentInfo')
// // 文字组件
// if (component.type === 'v-text') {
@ -509,12 +514,6 @@ export default {
this.currentFilterCom = null
},
handleDragOver(e) {
console.log('handleDragOver=>x:' + this.getPositionX(e.layerX) + ';y=' + this.getPositionY(e.layerY) + e.dataTransfer.getData('componentInfo'))
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
},
handleMouseDown() {
// console.log('handleMouseDown123')
@ -619,10 +618,10 @@ export default {
propValue: fileResult,
style: {
...commonStyle,
top: this.getPositionY(this.currentDropElement.layerY),
left: this.getPositionX(this.currentDropElement.layerX),
width: img.width / scale,
height: img.height / scale
top: this.dragComponentInfo.shadowStyle.y,
left: this.dragComponentInfo.shadowStyle.x,
width: this.dragComponentInfo.shadowStyle.width,
height: this.dragComponentInfo.shadowStyle.height
}
}
})

9
frontend/src/views/panel/filter/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="filter-container" @dragstart="handleDragStart">
<div class="filter-container" @dragstart="handleDragStart" @dragend="handleDragEnd()">
<div v-for="(item, key) in widgetSubjects" :key="key" class="widget-subject">
<div class="filter-header">
@ -30,6 +30,7 @@
<script>
import { ApplicationContext } from '@/utils/ApplicationContext'
import { deepCopy } from '@/components/canvas/utils/utils'
export default {
name: 'FilterGroup',
data() {
@ -80,12 +81,18 @@ export default {
methods: {
handleDragStart(ev) {
// 记录拖拽信息
this.$store.commit('setDragComponentInfo', deepCopy(ApplicationContext.getService(ev.target.dataset.id).getDrawPanel()))
ev.dataTransfer.effectAllowed = 'copy'
const dataTrans = {
type: 'other',
id: ev.target.dataset.id
}
ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
},
handleDragEnd(ev) {
console.log('handleDragEnd==>')
this.$store.commit('clearDragComponentInfo')
}
}
}