提交 26e21104 authored 作者: wangjiahao's avatar wangjiahao

refactor:仪表板矩形,文字组件,间隙等默认样

上级 24589b12
<template>
<div style="z-index:-1" :style="style" />
</template>
<script>
import { mapState } from 'vuex'
export default {
replace: true,
name: 'MoveInShadow',
props: {
w: {
type: Number,
required: true
},
h: {
type: Number,
required: true
},
x: {
type: Number,
required: true
},
y: {
type: Number,
required: true
},
z: {
type: Number,
required: true
}
},
computed: {
style() {
// 当前默认为自适应
let left = this.x
let top = this.y
let width = this.w
let height = this.h
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 style = {
transform: `translate(${left}px, ${top}px) rotate(0deg)`,
width: width + 'px',
height: height + 'px',
opacity: 0.4,
background: 'gray',
position: 'absolute'
}
// console.log('style=>' + JSON.stringify(style))
return style
},
...mapState([
'curComponent',
'editor',
'curCanvasScale',
'canvasStyleData',
'linkageSettingStatus'
])
}
}
</script>
<style scoped>
</style>
<template>
<div style="z-index:-1" :style="style" />
<div style="z-index:1" :style="style" />
</template>
<script>
......
......@@ -670,7 +670,7 @@ export default {
}
.gap_class{
padding:5px;
padding:3px;
}
// 拖拽组件样式
......
......@@ -58,7 +58,9 @@ const data = {
// 和当前组件联动的目标组件
targetLinkageInfo: [],
// 当前仪表板联动 下钻 上卷等信息
nowPanelTrackInfo: {}
nowPanelTrackInfo: {},
// 拖拽的组件信息
dragComponentInfo: null
},
mutations: {
...animation.mutations,
......@@ -254,6 +256,12 @@ const data = {
}
})
// state.styleChangeTimes++
},
setDragComponentInfo(state, dragComponentInfo) {
state.dragComponentInfo = dragComponentInfo
},
clearDragComponentInfo(state) {
state.dragComponentInfo = null
}
},
modules: {
......
......@@ -105,11 +105,13 @@ export default {
})
},
handleDragStart(node, ev) {
this.$store.commit('setDragComponentInfo', node)
ev.dataTransfer.effectAllowed = 'copy'
const dataTrans = {
type: 'view',
id: node.data.id
}
ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
},
......
......@@ -440,6 +440,7 @@ export default {
return data
},
handleDrop(e) {
this.$store.commit('clearDragComponentInfo')
this.currentDropElement = e
e.preventDefault()
e.stopPropagation()
......@@ -509,6 +510,7 @@ export default {
},
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'
},
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论