提交 dadb1f4f authored 作者: wangjiahao's avatar wangjiahao

refactor: 视图默认样式优先级设置为'视图',画布优化等

上级 26463756
...@@ -47,13 +47,6 @@ export default { ...@@ -47,13 +47,6 @@ export default {
height = this.curComponent.style.height * this.curCanvasScale.scalePointHeight height = this.curComponent.style.height * this.curCanvasScale.scalePointHeight
// console.log('curComponent left:' + left + 'top:' + top + 'width:' + width + 'height:' + height) // 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 const xGap = left + width - this.canvasWidth
...@@ -107,7 +100,6 @@ export default { ...@@ -107,7 +100,6 @@ export default {
</script> </script>
<style scoped> <style scoped>
.main-shadow{ .main-shadow{
transition: 0.2s;
opacity: 0.4; opacity: 0.4;
background: #409eff; background: #409eff;
position: absolute; position: absolute;
......
...@@ -189,7 +189,7 @@ export default { ...@@ -189,7 +189,7 @@ export default {
this.scaleWidth = canvasWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比 this.scaleWidth = canvasWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比
this.scaleHeight = canvasHeight * 100 / parseInt(this.canvasStyleData.height)// 获取高度比 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.scaleHeight = this.scaleWidth
// this.mainHeight = this.canvasStyleData.height * this.scaleHeight / 100 + 'px' // this.mainHeight = this.canvasStyleData.height * this.scaleHeight / 100 + 'px'
......
...@@ -8,7 +8,6 @@ ...@@ -8,7 +8,6 @@
['parent_transform']:!chartDetailsVisible ['parent_transform']:!chartDetailsVisible
} }
]" ]"
@dragover="handleDragOver"
@mousedown="handleMouseDown" @mousedown="handleMouseDown"
@scroll="canvasScroll" @scroll="canvasScroll"
> >
...@@ -1348,22 +1347,11 @@ export default { ...@@ -1348,22 +1347,11 @@ export default {
} }
}, },
handleDragOver(e) { handleDragOver(e) {
// console.log('handleDragOver-Editor')
this.dragComponentInfo.shadowStyle.x = e.pageX - 220 this.dragComponentInfo.shadowStyle.x = e.pageX - 220
this.dragComponentInfo.shadowStyle.y = e.pageY - 90 this.dragComponentInfo.shadowStyle.y = e.pageY - 90
this.dragComponentInfo.style.left = this.dragComponentInfo.shadowStyle.x / this.scalePointWidth this.dragComponentInfo.style.left = this.dragComponentInfo.shadowStyle.x / this.scalePointWidth
this.dragComponentInfo.style.top = this.dragComponentInfo.shadowStyle.y / this.scalePointHeight 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) { if (this.canvasStyleData.auxiliaryMatrix) {
this.onDragging(e, this.dragComponentInfo) this.onDragging(e, this.dragComponentInfo)
} }
...@@ -1679,14 +1667,14 @@ export default { ...@@ -1679,14 +1667,14 @@ export default {
}) })
}, },
removeLastItem() { removeLastItem() {
console.log('rlI:' + JSON.stringify(this.yourList)) // console.log('rlI:' + JSON.stringify(this.yourList))
this.removeItem(this.yourList.length - 1) this.removeItem(this.yourList.length - 1)
}, },
startMoveIn() { startMoveIn() {
if (this.canvasStyleData.auxiliaryMatrix) { if (this.canvasStyleData.auxiliaryMatrix) {
const moveInItemInfo = this.$store.state.dragComponentInfo const moveInItemInfo = this.$store.state.dragComponentInfo
this.addItemBox(moveInItemInfo) this.addItemBox(moveInItemInfo)
console.log('startMoveIn:') // console.log('startMoveIn:')
const vm = this const vm = this
// e.preventDefault(); // e.preventDefault();
if (!this.infoBox) { if (!this.infoBox) {
......
...@@ -606,7 +606,7 @@ export const BASE_GAUGE = { ...@@ -606,7 +606,7 @@ export const BASE_GAUGE = {
} }
export const BASE_CHART_STRING = { export const BASE_CHART_STRING = {
stylePriority: 'panel', stylePriority: 'view',
xaxis: '[]', xaxis: '[]',
yaxis: '[]', yaxis: '[]',
show: true, show: true,
......
...@@ -745,6 +745,7 @@ export default { ...@@ -745,6 +745,7 @@ export default {
background: DEFAULT_BACKGROUND_COLOR, background: DEFAULT_BACKGROUND_COLOR,
split: DEFAULT_SPLIT split: DEFAULT_SPLIT
}) })
view.stylePriority = 'view' // 默认样式优先级视图
view.xaxis = JSON.stringify([]) view.xaxis = JSON.stringify([])
view.yaxis = JSON.stringify([]) view.yaxis = JSON.stringify([])
view.yaxisExt = JSON.stringify([]) view.yaxisExt = JSON.stringify([])
......
...@@ -141,7 +141,7 @@ export default { ...@@ -141,7 +141,7 @@ export default {
eventBus.$emit('startMoveIn') eventBus.$emit('startMoveIn')
}, },
dragEnd() { dragEnd() {
console.log('dragEnd') // console.log('dragEnd')
this.$store.commit('clearDragComponentInfo') this.$store.commit('clearDragComponentInfo')
}, },
// 判断节点能否被拖拽 // 判断节点能否被拖拽
......
...@@ -96,13 +96,14 @@ ...@@ -96,13 +96,14 @@
<div <div
id="canvasInfo" id="canvasInfo"
class="this_canvas" :class="{'style-hidden':canvasStyleData.selfAdaption}"
:style="customCanvasStyle" class="content this_canvas"
@drop="handleDrop" @drop="handleDrop"
@dragover="handleDragOver"
@mousedown="handleMouseDown" @mousedown="handleMouseDown"
@mouseup="deselectCurComponent" @mouseup="deselectCurComponent"
> >
<Editor v-if="!previewVisible" :out-style="outStyle" @canvasScroll="canvasScroll" /> <Editor ref="canvasEditor" v-if="!previewVisible" :out-style="outStyle" @canvasScroll="canvasScroll" />
</div> </div>
</de-main-container> </de-main-container>
<!-- <de-aside-container v-if="aidedButtonActive" :class="aidedButtonActive ? 'show' : 'hidden'" class="style-aside">--> <!-- <de-aside-container v-if="aidedButtonActive" :class="aidedButtonActive ? 'show' : 'hidden'" class="style-aside">-->
...@@ -790,6 +791,11 @@ export default { ...@@ -790,6 +791,11 @@ export default {
} }
this.destroyTimeMachine() this.destroyTimeMachine()
}, 1000) }, 1000)
},
handleDragOver(e) {
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
this.$refs.canvasEditor.handleDragOver(e)
} }
} }
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论