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

refactor:优化组件间隙和仪表板画布间隙

上级 5746be12
...@@ -444,7 +444,7 @@ export default { ...@@ -444,7 +444,7 @@ export default {
style() { style() {
// console.log('style-top:' + this.y + '--' + this.top) // console.log('style-top:' + this.y + '--' + this.top)
return { return {
padding: (this.canvasStyleData.panel.gap === 'yes' ? this.componentGap : 0) + 'px', padding: this.curGap + 'px',
transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`, transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
width: this.computedWidth, width: this.computedWidth,
height: this.computedHeight, height: this.computedHeight,
...@@ -487,7 +487,6 @@ export default { ...@@ -487,7 +487,6 @@ export default {
// 根据left right 算出元素的宽度 // 根据left right 算出元素的宽度
computedMainSlotWidth() { computedMainSlotWidth() {
const gap = (this.canvasStyleData.panel.gap === 'yes' ? this.componentGap : 0) * 2
if (this.w === 'auto') { if (this.w === 'auto') {
if (!this.widthTouched) { if (!this.widthTouched) {
return 'auto' return 'auto'
...@@ -495,14 +494,13 @@ export default { ...@@ -495,14 +494,13 @@ export default {
} }
if (this.element.auxiliaryMatrix) { if (this.element.auxiliaryMatrix) {
const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
return (width - gap) + 'px' return (width - this.curGap * 2) + 'px'
} else { } else {
return (this.width - gap) + 'px' return (this.width - this.curGap * 2) + 'px'
} }
}, },
// 根据top bottom 算出元素的宽度 // 根据top bottom 算出元素的宽度
computedMainSlotHeight() { computedMainSlotHeight() {
const gap = (this.canvasStyleData.panel.gap === 'yes' ? this.componentGap : 0) * 2
if (this.h === 'auto') { if (this.h === 'auto') {
if (!this.heightTouched) { if (!this.heightTouched) {
return 'auto' return 'auto'
...@@ -510,9 +508,9 @@ export default { ...@@ -510,9 +508,9 @@ export default {
} }
if (this.element.auxiliaryMatrix) { if (this.element.auxiliaryMatrix) {
const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
return (height - gap) + 'px' return (height - this.curGap * 2) + 'px'
} else { } else {
return (this.height - gap) + 'px' return (this.height - this.curGap * 2) + 'px'
} }
}, },
...@@ -528,6 +526,9 @@ export default { ...@@ -528,6 +526,9 @@ export default {
curComponent() { curComponent() {
return this.$store.state.curComponent return this.$store.state.curComponent
}, },
curGap() {
return this.canvasStyleData.panel.gap === 'yes' && this.element.auxiliaryMatrix ? this.componentGap : 0
},
...mapState([ ...mapState([
'editor', 'editor',
'curCanvasScale', 'curCanvasScale',
......
<template> <template>
<div <div
:style="getOutStyleDefault(config.style)" :style="getOutStyleDefault(config.style)"
:class="{'gap_class':canvasStyleData.panel.gap==='yes'}"
class="component" class="component"
@click="handleClick" @click="handleClick"
@mousedown="elementMouseDown" @mousedown="elementMouseDown"
...@@ -66,9 +65,13 @@ export default { ...@@ -66,9 +65,13 @@ export default {
} }
}, },
computed: { computed: {
curGap() {
return this.canvasStyleData.panel.gap === 'yes' && this.config.auxiliaryMatrix ? this.componentGap : 0
},
...mapState([ ...mapState([
'canvasStyleData', 'canvasStyleData',
'curComponent' 'curComponent',
'componentGap'
]) ])
}, },
mounted() { mounted() {
...@@ -101,7 +104,9 @@ export default { ...@@ -101,7 +104,9 @@ export default {
return value * scale / 100 return value * scale / 100
}, },
getOutStyleDefault(style) { getOutStyleDefault(style) {
const result = {}; const result = {
padding: this.curGap + 'px'
};
['width', 'left'].forEach(attr => { ['width', 'left'].forEach(attr => {
result[attr] = style[attr] + 'px' result[attr] = style[attr] + 'px'
}); });
......
<template> <template>
<div id="canvasInfoMain" ref="canvasInfoMain" class="main-class"> <div id="canvasInfoMain" ref="canvasInfoMain" :style="customStyle" class="bg">
<div id="canvasInfoTemp" ref="canvasInfoTemp" :style="customStyle" class="bg" @mouseup="deselectCurComponent" @mousedown="handleMouseDown"> <div id="canvasInfoTemp" ref="canvasInfoTemp" class="main-class" @mouseup="deselectCurComponent" @mousedown="handleMouseDown">
<el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position"> <el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
{{ $t('panel.panelNull') }} {{ $t('panel.panelNull') }}
</el-row> </el-row>
...@@ -95,9 +95,7 @@ export default { ...@@ -95,9 +95,7 @@ export default {
computed: { computed: {
customStyle() { customStyle() {
let style = { let style = {
margin: 'auto', padding: this.componentGap + 'px'
width: this.mainWidth,
height: this.mainHeight
} }
if (this.canvasStyleData.openCommonStyle) { if (this.canvasStyleData.openCommonStyle) {
if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) { if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
...@@ -132,7 +130,8 @@ export default { ...@@ -132,7 +130,8 @@ export default {
'isClickComponent', 'isClickComponent',
'curComponent', 'curComponent',
'componentData', 'componentData',
'canvasStyleData' 'canvasStyleData',
'componentGap'
]) ])
}, },
watch: { watch: {
...@@ -192,15 +191,6 @@ export default { ...@@ -192,15 +191,6 @@ export default {
const canvasWidth = document.getElementById('canvasInfoMain').offsetWidth const canvasWidth = document.getElementById('canvasInfoMain').offsetWidth
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)
// this.scaleHeight = this.scaleWidth
// this.mainHeight = this.canvasStyleData.height * this.scaleHeight / 100 + 'px'
// if (this.showType === 'width') {
// this.scaleHeight = this.scaleWidth
// this.mainHeight = this.canvasStyleData.height * this.scaleHeight / 100 + 'px'
// }
this.handleScaleChange() this.handleScaleChange()
}, },
resetID(data) { resetID(data) {
......
...@@ -982,7 +982,8 @@ export default { ...@@ -982,7 +982,8 @@ export default {
'editor', 'editor',
'linkageSettingStatus', 'linkageSettingStatus',
'curLinkageView', 'curLinkageView',
'doSnapshotIndex' 'doSnapshotIndex',
'componentGap'
]) ])
}, },
watch: { watch: {
......
...@@ -310,7 +310,9 @@ export default { ...@@ -310,7 +310,9 @@ export default {
} }
}, },
customCanvasStyle() { customCanvasStyle() {
let style = {} let style = {
padding: this.componentGap + 'px'
}
if (this.canvasStyleData.openCommonStyle) { if (this.canvasStyleData.openCommonStyle) {
if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) { if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
...@@ -340,7 +342,8 @@ export default { ...@@ -340,7 +342,8 @@ export default {
'curComponentIndex', 'curComponentIndex',
'componentData', 'componentData',
'linkageSettingStatus', 'linkageSettingStatus',
'dragComponentInfo' 'dragComponentInfo',
'componentGap'
]) ])
}, },
...@@ -680,9 +683,9 @@ export default { ...@@ -680,9 +683,9 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
const canvasHeight = document.getElementById('canvasInfo').offsetHeight const canvasHeight = document.getElementById('canvasInfo').offsetHeight
const canvasWidth = document.getElementById('canvasInfo').offsetWidth const canvasWidth = document.getElementById('canvasInfo').offsetWidth
this.outStyle.height = canvasHeight this.outStyle.height = canvasHeight - (this.componentGap * 2)
// 临时处理 确保每次restore 有会更新 // 临时处理 确保每次restore 有会更新
this.outStyle.width = canvasWidth + (Math.random() * 0.000001) this.outStyle.width = canvasWidth - (this.componentGap * 2) + (Math.random() * 0.000001)
// console.log(canvasHeight + '--' + canvasWidth) // console.log(canvasHeight + '--' + canvasWidth)
}) })
} }
...@@ -919,7 +922,6 @@ export default { ...@@ -919,7 +922,6 @@ export default {
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
background-size:100% 100% !important; background-size:100% 100% !important;
} }
.el-main{ .el-main{
height: calc(100vh - 91px); height: calc(100vh - 91px);
......
...@@ -342,7 +342,7 @@ export default { ...@@ -342,7 +342,7 @@ export default {
min-height: 400px; min-height: 400px;
height: 100%; height: 100%;
min-width: 500px; min-width: 500px;
overflow-y: auto; overflow-y: hidden;
border-top: 1px solid #E6E6E6; border-top: 1px solid #E6E6E6;
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论