forked from github/dataease
refactor: 视图默认样式优先级设置为'视图',画布优化等
This commit is contained in:
parent
264637566e
commit
dadb1f4f4d
@ -47,13 +47,6 @@ export default {
|
||||
height = this.curComponent.style.height * this.curCanvasScale.scalePointHeight
|
||||
// console.log('curComponent left:' + left + 'top:' + top + 'width:' + width + 'height:' + height)
|
||||
}
|
||||
// 当前默认为自适应
|
||||
// if (this.canvasStyleData.auxiliaryMatrix) {
|
||||
// left = Math.round(left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
|
||||
// width = Math.round(width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
|
||||
// top = Math.round(top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
|
||||
// height = Math.round(height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
|
||||
// }
|
||||
|
||||
// 防止阴影区超出边界
|
||||
const xGap = left + width - this.canvasWidth
|
||||
@ -107,7 +100,6 @@ export default {
|
||||
</script>
|
||||
<style scoped>
|
||||
.main-shadow{
|
||||
transition: 0.2s;
|
||||
opacity: 0.4;
|
||||
background: #409eff;
|
||||
position: absolute;
|
||||
|
@ -189,7 +189,7 @@ export default {
|
||||
this.scaleWidth = canvasWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比
|
||||
this.scaleHeight = canvasHeight * 100 / parseInt(this.canvasStyleData.height)// 获取高度比
|
||||
|
||||
console.log('scaleHeight:' + this.scaleHeight + ';ch:' + this.canvasStyleData.height)
|
||||
// console.log('scaleHeight:' + this.scaleHeight + ';ch:' + this.canvasStyleData.height)
|
||||
|
||||
// this.scaleHeight = this.scaleWidth
|
||||
// this.mainHeight = this.canvasStyleData.height * this.scaleHeight / 100 + 'px'
|
||||
|
@ -8,7 +8,6 @@
|
||||
['parent_transform']:!chartDetailsVisible
|
||||
}
|
||||
]"
|
||||
@dragover="handleDragOver"
|
||||
@mousedown="handleMouseDown"
|
||||
@scroll="canvasScroll"
|
||||
>
|
||||
@ -1348,22 +1347,11 @@ export default {
|
||||
}
|
||||
},
|
||||
handleDragOver(e) {
|
||||
// console.log('handleDragOver-Editor')
|
||||
this.dragComponentInfo.shadowStyle.x = e.pageX - 220
|
||||
this.dragComponentInfo.shadowStyle.y = e.pageY - 90
|
||||
this.dragComponentInfo.style.left = this.dragComponentInfo.shadowStyle.x / this.scalePointWidth
|
||||
this.dragComponentInfo.style.top = this.dragComponentInfo.shadowStyle.y / this.scalePointHeight
|
||||
|
||||
// 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.x = this.dragComponentInfo.shadowStyle.x
|
||||
// this.dragComponentInfo.y = this.dragComponentInfo.shadowStyle.y
|
||||
// this.dragComponentInfo.x = Math.round(this.dragComponentInfo.shadowStyle.x / this.matrixStyle.width)
|
||||
// this.dragComponentInfo.y = Math.round(this.dragComponentInfo.shadowStyle.y / this.matrixStyle.height)
|
||||
// console.log('dragComponentInfo=>' + JSON.stringify(this.dragComponentInfo))
|
||||
e.preventDefault()
|
||||
e.dataTransfer.dropEffect = 'copy'
|
||||
|
||||
if (this.canvasStyleData.auxiliaryMatrix) {
|
||||
this.onDragging(e, this.dragComponentInfo)
|
||||
}
|
||||
@ -1679,14 +1667,14 @@ export default {
|
||||
})
|
||||
},
|
||||
removeLastItem() {
|
||||
console.log('rlI:' + JSON.stringify(this.yourList))
|
||||
// console.log('rlI:' + JSON.stringify(this.yourList))
|
||||
this.removeItem(this.yourList.length - 1)
|
||||
},
|
||||
startMoveIn() {
|
||||
if (this.canvasStyleData.auxiliaryMatrix) {
|
||||
const moveInItemInfo = this.$store.state.dragComponentInfo
|
||||
this.addItemBox(moveInItemInfo)
|
||||
console.log('startMoveIn:')
|
||||
// console.log('startMoveIn:')
|
||||
const vm = this
|
||||
// e.preventDefault();
|
||||
if (!this.infoBox) {
|
||||
|
@ -606,7 +606,7 @@ export const BASE_GAUGE = {
|
||||
}
|
||||
|
||||
export const BASE_CHART_STRING = {
|
||||
stylePriority: 'panel',
|
||||
stylePriority: 'view',
|
||||
xaxis: '[]',
|
||||
yaxis: '[]',
|
||||
show: true,
|
||||
|
@ -745,6 +745,7 @@ export default {
|
||||
background: DEFAULT_BACKGROUND_COLOR,
|
||||
split: DEFAULT_SPLIT
|
||||
})
|
||||
view.stylePriority = 'view' // 默认样式优先级视图
|
||||
view.xaxis = JSON.stringify([])
|
||||
view.yaxis = JSON.stringify([])
|
||||
view.yaxisExt = JSON.stringify([])
|
||||
|
@ -141,7 +141,7 @@ export default {
|
||||
eventBus.$emit('startMoveIn')
|
||||
},
|
||||
dragEnd() {
|
||||
console.log('dragEnd')
|
||||
// console.log('dragEnd')
|
||||
this.$store.commit('clearDragComponentInfo')
|
||||
},
|
||||
// 判断节点能否被拖拽
|
||||
|
@ -96,13 +96,14 @@
|
||||
|
||||
<div
|
||||
id="canvasInfo"
|
||||
class="this_canvas"
|
||||
:style="customCanvasStyle"
|
||||
:class="{'style-hidden':canvasStyleData.selfAdaption}"
|
||||
class="content this_canvas"
|
||||
@drop="handleDrop"
|
||||
@dragover="handleDragOver"
|
||||
@mousedown="handleMouseDown"
|
||||
@mouseup="deselectCurComponent"
|
||||
>
|
||||
<Editor v-if="!previewVisible" :out-style="outStyle" @canvasScroll="canvasScroll" />
|
||||
<Editor ref="canvasEditor" v-if="!previewVisible" :out-style="outStyle" @canvasScroll="canvasScroll" />
|
||||
</div>
|
||||
</de-main-container>
|
||||
<!-- <de-aside-container v-if="aidedButtonActive" :class="aidedButtonActive ? 'show' : 'hidden'" class="style-aside">-->
|
||||
@ -790,6 +791,11 @@ export default {
|
||||
}
|
||||
this.destroyTimeMachine()
|
||||
}, 1000)
|
||||
},
|
||||
handleDragOver(e) {
|
||||
e.preventDefault()
|
||||
e.dataTransfer.dropEffect = 'copy'
|
||||
this.$refs.canvasEditor.handleDragOver(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user