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

refactor: 画布优化

Browse Source
This commit is contained in:
wangjiahao 2021-10-10 17:04:23 +08:00
parent eaf256eed6
commit b7d5f0b86c
8 changed files with 49 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/DeDrag/drag.js
View File

@ -671,7 +671,7 @@ export default {
methods: {
removeItem: removeItem,
startResize(e, item, index) {
console.log('startResize:' + index)
// console.log('startResize:' + index)
if (!this.resizable) return
this.resizeStart.call(null, e, item, index)
@ -688,7 +688,7 @@ export default {
this.infoBox.resizeItemIndex = index
},
containerMouseDown(e) {
console.log('containerMouseDown:')
// console.log('containerMouseDown:')
// e.preventDefault();
if (!this.infoBox) {
@ -699,7 +699,7 @@ export default {
this.infoBox.startY = e.pageY
},
startMove(e, item, index) {
console.log('startMove:' + index)
// console.log('startMove:' + index)
const vm = this
// e.preventDefault();
@ -752,7 +752,7 @@ export default {
const resizeItem = _.get(infoBox, 'resizeItem')
if (resizeItem) { // 调整大小时
console.log('resizeItem')
// console.log('resizeItem')
vm.resizing.call(null, e, resizeItem, resizeItem._dragId)
vm.$set(resizeItem, 'isPlayer', true)
@ -793,7 +793,7 @@ export default {
height: nowHeight
})
} else if (moveItem) {
console.log('moveItem')
// console.log('moveItem')
scrollScreen(e)
if (!vm.draggable) return
@ -886,7 +886,7 @@ export default {
}
},
getList() {
console.log('getList:')
// console.log('getList:')
const returnList = _.sortBy(_.cloneDeep(this.yourList), 'y')
const finalList = []
@ -904,7 +904,7 @@ export default {
* @returns
*/
getMaxCell() {
console.log('getMaxCell:')
// console.log('getMaxCell:')
return this.maxCell
},
@ -914,7 +914,7 @@ export default {
* @returns
*/
getRenderState() {
console.log('getRenderState:')
// console.log('getRenderState:')
return this.moveAnimate
},

16
frontend/src/components/DeDrag/drag.vue
View File

@ -709,7 +709,7 @@ export default {
methods: {
removeItem: removeItem,
startResize(e, item, index) {
console.log('startResize:' + index)
// console.log('startResize:' + index)
if (!this.resizable) return
this.resizeStart.call(null, e, item, index)
@ -737,7 +737,7 @@ export default {
this.infoBox.startY = e.pageY
},
startMove(e, item, index) {
console.log('startMove:' + index)
// console.log('startMove:' + index)
const vm = this
// e.preventDefault();
@ -790,7 +790,7 @@ export default {
const resizeItem = _.get(infoBox, 'resizeItem')
if (resizeItem) { // 调整大小时
console.log('resizeItem')
// console.log('resizeItem')
vm.resizing.call(null, e, resizeItem, resizeItem._dragId)
vm.$set(resizeItem, 'isPlayer', true)
@ -831,7 +831,7 @@ export default {
height: nowHeight
})
} else if (moveItem) {
console.log('moveItem')
// console.log('moveItem')
scrollScreen(e)
if (!vm.draggable) return
@ -922,11 +922,11 @@ export default {
left: (this.cellWidth * (item.x - 1) + this.baseMarginLeft) + 'px',
top: (this.cellHeight * (item.y - 1) + this.baseMarginTop) + 'px'
}
console.log('nowItemStyle:' + JSON.stringify(style))
// console.log('nowItemStyle:' + JSON.stringify(style))
return style
},
getList() {
console.log('getList:')
// console.log('getList:')
const returnList = _.sortBy(_.cloneDeep(this.yourList), 'y')
const finalList = []
@ -944,7 +944,7 @@ export default {
* @returns
*/
getMaxCell() {
console.log('getMaxCell:')
// console.log('getMaxCell:')
return this.maxCell
},
@ -954,7 +954,7 @@ export default {
* @returns
*/
getRenderState() {
console.log('getRenderState:')
// console.log('getRenderState:')
return this.moveAnimate
},

12
frontend/src/components/DeDrag/index.vue
View File

@ -21,7 +21,7 @@
@mouseenter="enter"
@mouseleave="leave"
>
<edit-bar v-if="active||linkageSettingStatus" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" />
<edit-bar v-if="active||linkageSettingStatus" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" @amRemoveItem="amRemoveItem" @amAddItem="amAddItem"/>
<div v-if="resizing" style="transform: translateZ(11px);position: absolute; z-index: 3" :style="resizeShadowStyle" />
<div
v-for="(handlei, indexi) in actualHandles"
@ -596,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
@ -1229,7 +1229,7 @@ export default {
this.lastMouseY = mouseY
if (this.resizing) {
this.resizing = false
console.log('resizing2:' + this.resizing)
// console.log('resizing2:' + this.resizing)
this.conflictCheck()
this.$emit('refLineParams', refLine)
// this.$emit('resizestop', this.left, this.top, this.width, this.height)
@ -1672,6 +1672,12 @@ export default {
},
showViewDetails() {
this.$emit('showViewDetails')
},
amAddItem() {
this.$emit('amAddItem')
},
amRemoveItem() {
this.$emit('amRemoveItem')
}
}

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

@ -1,5 +1,5 @@
<template>
<div style="z-index:-1" :style="styleInfo">
<div class="main-shadow" style="z-index:-1" :style="styleInfo">
<!-- {{ curComponent }}-->
</div>
</template>
@ -20,7 +20,7 @@ export default {
let height = 0
// if (this.dragComponentInfo && !this.dragComponentInfo.auxiliaryMatrix) {
if (this.dragComponentInfo) {
console.log('shadowDrag=')
// console.log('shadowDrag=')
// 组件移入
if (this.dragComponentInfo.auxiliaryMatrix) {
left = (this.dragComponentInfo.x - 1) * this.curCanvasScale.matrixStyleWidth
@ -109,5 +109,8 @@ export default {
}
</script>
<style scoped>
.main-shadow{
/*transition: 0.2s;*/
}
</style>

13
frontend/src/components/canvas/components/Editor/EditBar.vue
View File

@ -6,7 +6,7 @@
<!-- <i v-if="linkageInfo.linkageActive" class="icon iconfont icon-edit" @click.stop="linkageEdit" />-->
</div>
<div v-else-if="!linkageSettingStatus">
<setting-menu v-if="activeModel==='edit'" style="float: right;height: 24px!important;">
<setting-menu v-if="activeModel==='edit'" style="float: right;height: 24px!important;" @amRemoveItem="amRemoveItem">
<span slot="icon" :title="$t('panel.setting')">
<i class="icon iconfont icon-shezhi" style="margin-top:2px" />
</span>
@ -26,9 +26,9 @@
<span :title="$t('panel.cancel_linkage')">
<i v-if="curComponent.type==='view'&&existLinkage" class="icon iconfont icon-quxiaoliandong" @click.stop="clearLinkage" />
</span>
<!-- <spa>-->
<!-- {{ curComponent.x }}-{{ curComponent.y }}&#45;&#45;{{ curComponent.sizex }}-{{ curComponent.sizey }}-->
<!-- </spa>-->
<!-- <spa>-->
<!-- {{ curComponent.x }}-{{ curComponent.y }}&#45;&#45;{{ curComponent.sizex }}-{{ curComponent.sizey }}-->
<!-- </spa>-->
</div>
</div>
@ -131,12 +131,14 @@ export default {
this.curComponent.style.width = this.curComponent.sizex * this.curCanvasScale.matrixStyleOriginWidth
this.curComponent.style.height = this.curComponent.sizey * this.curCanvasScale.matrixStyleOriginHeight
this.curComponent.auxiliaryMatrix = false
this.$emit('amRemoveItem')
} else {
this.curComponent.x = Math.round(this.curComponent.style.left / this.curCanvasScale.matrixStyleOriginWidth) + 1
this.curComponent.y = Math.round(this.curComponent.style.top / this.curCanvasScale.matrixStyleOriginHeight) + 1
this.curComponent.sizex = Math.round(this.curComponent.style.width / this.curCanvasScale.matrixStyleOriginWidth)
this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScale.matrixStyleOriginHeight)
this.curComponent.auxiliaryMatrix = true
this.$emit('amAddItem')
}
this.$store.state.styleChangeTimes++
bus.$emit('auxiliaryMatrixChange')
@ -162,6 +164,9 @@ export default {
},
linkageEdit() {
},
amRemoveItem() {
this.$emit('amRemoveItem')
},
// 清除相同sourceViewId 的 联动条件
clearLinkage() {

1
frontend/src/components/canvas/components/Editor/SettingMenu.vue
View File

@ -91,6 +91,7 @@ export default {
},
deleteComponent() {
this.$emit('amRemoveItem')
this.deleteCurCondition()
this.$store.commit('deleteComponent')
this.$store.commit('recordSnapshot', 'deleteComponent')

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

@ -51,6 +51,8 @@
@onDragging="onDragging"
@onResizing="onResizing"
@elementMouseDown="containerMouseDown"
@amRemoveItem="removeItem(item._dragId)"
@amAddItme="addItemBox(item)"
>
<!-- <span style="position:relative;left: 0px;top:0px">-->
<!-- item:x-{{ item.x }}y-{{ item.y }}top-{{ item.style.top }}-->
@ -221,11 +223,11 @@ function debounce(func, time) {
function scrollScreen(e) {
if (e.clientY + 50 >= window.innerHeight) {
console.log('scrollScreen+')
// console.log('scrollScreen+')
const body = $(document.body)
body.scrollTop(body.scrollTop() + 20)
} else if (e.clientY <= 150) {
console.log('scrollScreen-')
// console.log('scrollScreen-')
const body = $(document.body)
body.scrollTop(body.scrollTop() - 20)
}
@ -288,7 +290,7 @@ function fillPositionBox(maxY) {
}
itemMaxY = maxY
console.log('height:' + ((itemMaxY) * this.cellHeight) + 'px')
// console.log('height:' + ((itemMaxY) * this.cellHeight) + 'px')
// $(this.$el).css('height', ((itemMaxY) * this.cellHeight) + 'px')
}
@ -1005,7 +1007,7 @@ export default {
handler(newVal, oldVla) {
// console.log('newVal:' + JSON.stringify(newVal) + ';oldVla:' + JSON.stringify(oldVla))
// 初始化时componentData 加载可能出现慢的情况 此时重新初始化一下matrix
if (newVal.length !== this.lastComponentDataLength) {
if (this.lastComponentDataLength === 0 && newVal.length > 0) {
this.lastComponentDataLength = newVal.length
this.initMatrix()
}
@ -1656,6 +1658,7 @@ export default {
return this.moveAnimate
},
addItem: addItem,
removeItem: removeItem,
initMatrix: init,
afterInitOk(func) {
const timeid = setInterval(() => {

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

@ -115,7 +115,7 @@ const data = {
// },
setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
console.log('cw:' + curComponent.style.width + ';w:' + width + ';sp:' + curCanvasScale.scalePointWidth)
// 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
@ -123,7 +123,7 @@ const data = {
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)
// console.log('setShapeStyle:curComponent' + 'w:' + curComponent.style.width + ';ow:' + ow)
},
setShapeSingleStyle({ curComponent }, { key, value }) {