feat: 编辑仪表盘同时支持自适应画布区域和实际画布大小两种编辑模式
This commit is contained in:
wangjiahao
parent
4ae8488274
commit
5ef299dfcf
@ -1,25 +1,28 @@
|
||||
<template>
|
||||
<div :style="{
|
||||
left: start.x + 'px',
|
||||
top: start.y + 'px',
|
||||
width: width + 'px',
|
||||
height: height + 'px',
|
||||
}" class="area"></div>
|
||||
<div
|
||||
:style="{
|
||||
left: start.x + 'px',
|
||||
top: start.y + 'px',
|
||||
width: width + 'px',
|
||||
height: height + 'px',
|
||||
}"
|
||||
class="area"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
start: {
|
||||
type: Object,
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
},
|
||||
props: {
|
||||
start: {
|
||||
type: Object
|
||||
},
|
||||
width: {
|
||||
type: Number
|
||||
},
|
||||
height: {
|
||||
type: Number
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -28,4 +31,4 @@ export default {
|
||||
border: 1px solid #70c0ff;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -14,13 +14,15 @@
|
||||
<Shape
|
||||
v-for="(item, index) in componentData"
|
||||
:key="item.id"
|
||||
:default-style="item.style"
|
||||
:default-style="getShapeStyleInt(item.style)"
|
||||
:style="getShapeStyle(item.style)"
|
||||
:active="item === curComponent"
|
||||
:element="item"
|
||||
:index="index"
|
||||
:class="{ lock: item.isLock }"
|
||||
>
|
||||
<!-- item.style---{{ item.style }}-->
|
||||
<!-- item.style---{{ getShapeStyleInt(item.style) }}-->
|
||||
|
||||
<component
|
||||
:is="item.component"
|
||||
@ -76,6 +78,7 @@ import Grid from './Grid'
|
||||
import { changeStyleWithScale } from '@/components/canvas/utils/translate'
|
||||
import { Condition } from '@/components/widget/bean/Condition'
|
||||
import bus from '@/utils/bus'
|
||||
|
||||
export default {
|
||||
components: { Shape, ContextMenu, MarkLine, Area, Grid },
|
||||
props: {
|
||||
@ -86,6 +89,10 @@ export default {
|
||||
filter: {
|
||||
type: Object,
|
||||
require: false
|
||||
},
|
||||
outStyle: {
|
||||
type: Object,
|
||||
require: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -99,31 +106,58 @@ export default {
|
||||
width: 0,
|
||||
height: 0,
|
||||
isShowArea: false,
|
||||
conditions: []
|
||||
conditions: [],
|
||||
scaleWidth: 100,
|
||||
scaleHeight: 100,
|
||||
timer: null,
|
||||
needToChangeHeight: [
|
||||
'top',
|
||||
'height',
|
||||
'fontSize',
|
||||
'borderWidth'
|
||||
],
|
||||
needToChangeWidth: [
|
||||
'left',
|
||||
'width'
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
outStyle: {
|
||||
handler(newVal, oldVla) {
|
||||
this.changeScale()
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
canvasStyleData: {
|
||||
handler(newVal, oldVla) {
|
||||
this.changeScale()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
customStyle() {
|
||||
let style = {
|
||||
width: this.changeStyleWithScale(this.canvasStyleData.width) + 'px',
|
||||
height: this.changeStyleWithScale(this.canvasStyleData.height) + 'px'
|
||||
width: this.format(this.canvasStyleData.width, this.scaleWidth) + 'px',
|
||||
height: this.format(this.canvasStyleData.height, this.scaleHeight) + 'px'
|
||||
}
|
||||
console.log('customStyle=>' + JSON.stringify(style))
|
||||
|
||||
if (this.canvasStyleData.openCommonStyle) {
|
||||
if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
|
||||
style = {
|
||||
width: this.changeStyleWithScale(this.canvasStyleData.width) + 'px',
|
||||
height: this.changeStyleWithScale(this.canvasStyleData.height) + 'px',
|
||||
background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`
|
||||
background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`,
|
||||
...style
|
||||
}
|
||||
} else {
|
||||
style = {
|
||||
width: this.changeStyleWithScale(this.canvasStyleData.width) + 'px',
|
||||
height: this.changeStyleWithScale(this.canvasStyleData.height) + 'px',
|
||||
background: this.canvasStyleData.panel.color
|
||||
background: this.canvasStyleData.panel.color,
|
||||
...style
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return style
|
||||
},
|
||||
panelInfo() {
|
||||
@ -153,7 +187,6 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
changeStyleWithScale,
|
||||
|
||||
handleMouseDown(e) {
|
||||
// 如果没有选中组件 在画布上点击时需要调用 e.preventDefault() 防止触发 drop 事件
|
||||
if (!this.curComponent || (this.curComponent.component !== 'v-text' && this.curComponent.component !== 'rect-shape')) {
|
||||
@ -218,8 +251,10 @@ export default {
|
||||
|
||||
// 根据选中区域和区域中每个组件的位移信息来创建 Group 组件
|
||||
// 要遍历选择区域的每个组件，获取它们的 left top right bottom 信息来进行比较
|
||||
let top = Infinity; let left = Infinity
|
||||
let right = -Infinity; let bottom = -Infinity
|
||||
let top = Infinity
|
||||
let left = Infinity
|
||||
let right = -Infinity
|
||||
let bottom = -Infinity
|
||||
areaData.forEach(component => {
|
||||
let style = {}
|
||||
if (component.component === 'Group') {
|
||||
@ -303,19 +338,34 @@ export default {
|
||||
|
||||
getShapeStyle(style) {
|
||||
const result = {};
|
||||
['width', 'height', 'top', 'left', 'rotate'].forEach(attr => {
|
||||
if (attr !== 'rotate') {
|
||||
result[attr] = style[attr] + 'px'
|
||||
} else {
|
||||
result.transform = 'rotate(' + style[attr] + 'deg)'
|
||||
}
|
||||
['width', 'left'].forEach(attr => {
|
||||
result[attr] = this.format(style[attr], this.scaleWidth) + 'px'
|
||||
});
|
||||
['height', 'top'].forEach(attr => {
|
||||
result[attr] = this.format(style[attr], this.scaleHeight) + 'px'
|
||||
})
|
||||
result.transform = 'rotate(' + style['rotate'] + 'deg)'
|
||||
|
||||
return result
|
||||
},
|
||||
|
||||
getShapeStyleInt(style) {
|
||||
const result = {};
|
||||
['width', 'left'].forEach(attr => {
|
||||
result[attr] = this.format(style[attr], this.scaleWidth)
|
||||
});
|
||||
['height', 'top'].forEach(attr => {
|
||||
result[attr] = this.format(style[attr], this.scaleHeight)
|
||||
})
|
||||
result['rotate'] = style['rotate']
|
||||
result['borderWidth'] = style['borderWidth']
|
||||
result['opacity'] = style['opacity']
|
||||
|
||||
return result
|
||||
},
|
||||
|
||||
getComponentStyle(style) {
|
||||
// return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
|
||||
// return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
|
||||
return style
|
||||
},
|
||||
|
||||
@ -368,6 +418,21 @@ export default {
|
||||
},
|
||||
executeSearch() {
|
||||
console.log('当前查询条件是: ' + JSON.stringify(this.conditions))
|
||||
},
|
||||
format(value, scale) {
|
||||
// 自适应画布区域 返回原值
|
||||
if (this.canvasStyleData.selfAdaption) {
|
||||
return parseInt(value * parseInt(scale) / 100)
|
||||
} else {
|
||||
return parseInt(value)
|
||||
}
|
||||
},
|
||||
changeScale() {
|
||||
if (this.outStyle.width && this.outStyle.height) {
|
||||
this.scaleWidth = parseInt(this.outStyle.width * 100 / this.canvasStyleData.width)
|
||||
this.scaleHeight = parseInt(this.outStyle.height * 100 / this.canvasStyleData.height)
|
||||
this.$store.commit('setCurCanvasScale', { scaleWidth: this.scaleWidth, scaleHeight: this.scaleHeight })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="toolbar">
|
||||
|
||||
<div class="canvas-config" style="margin-right: 10px">
|
||||
<el-switch v-model="canvasStyleData.selfAdaption" :width="35" label="自适应画布区域" name="selfAdaption" />
|
||||
<span>自适应画布区域 </span>
|
||||
</div>
|
||||
|
||||
<div class="canvas-config" style="margin-right: 10px">
|
||||
<span> {{ $t('panel.canvas_size') }} </span>
|
||||
<input v-model="canvasStyleData.width">
|
||||
<input v-model="canvasStyleData.width" :disabled="canvasStyleData.selfAdaption">
|
||||
<span>*</span>
|
||||
<input v-model="canvasStyleData.height">
|
||||
<input v-model="canvasStyleData.height" :disabled="canvasStyleData.selfAdaption">
|
||||
</div>
|
||||
<!-- <div class="canvas-config" style="margin-right: 10px">-->
|
||||
<!-- <span> {{ $t('panel.canvas_scale') }} </span>-->
|
||||
@ -140,7 +146,6 @@ export default {
|
||||
...this.canvasStyleData,
|
||||
scale: this.scale
|
||||
})
|
||||
this.$nextTick(() => (eventBus.$emit('resizing', '')))
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
@ -320,4 +325,17 @@ export default {
|
||||
background-color: #ffffff!important;
|
||||
}
|
||||
|
||||
>>>.el-switch__core{
|
||||
width:30px!important;
|
||||
height:15px;
|
||||
/*color:#409EFF;*/
|
||||
}
|
||||
/*设置圆*/
|
||||
>>>.el-switch__core::after{
|
||||
width:14px;
|
||||
height:14px;
|
||||
margin-top:-1px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -2,272 +2,272 @@
|
||||
import { calculateRotatedPointCoordinate, getCenterPoint } from './translate'
|
||||
|
||||
const funcs = {
|
||||
lt: calculateLeftTop,
|
||||
t: calculateTop,
|
||||
rt: calculateRightTop,
|
||||
r: calculateRight,
|
||||
rb: calculateRightBottom,
|
||||
b: calculateBottom,
|
||||
lb: calculateLeftBottom,
|
||||
l: calculateLeft,
|
||||
lt: calculateLeftTop,
|
||||
t: calculateTop,
|
||||
rt: calculateRightTop,
|
||||
r: calculateRight,
|
||||
rb: calculateRightBottom,
|
||||
b: calculateBottom,
|
||||
lb: calculateLeftBottom,
|
||||
l: calculateLeft
|
||||
}
|
||||
|
||||
function calculateLeftTop(style, curPositon, proportion, needLockProportion, pointInfo) {
|
||||
const { symmetricPoint } = pointInfo
|
||||
let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
|
||||
let newTopLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
|
||||
let newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
|
||||
|
||||
let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
|
||||
let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
|
||||
const { symmetricPoint } = pointInfo
|
||||
let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
|
||||
let newTopLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
|
||||
let newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
|
||||
|
||||
if (needLockProportion) {
|
||||
if (newWidth / newHeight > proportion) {
|
||||
newTopLeftPoint.x += Math.abs(newWidth - newHeight * proportion)
|
||||
newWidth = newHeight * proportion
|
||||
} else {
|
||||
newTopLeftPoint.y += Math.abs(newHeight - newWidth / proportion)
|
||||
newHeight = newWidth / proportion
|
||||
}
|
||||
let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
|
||||
let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
|
||||
|
||||
// 由于现在求的未旋转前的坐标是以没按比例缩减宽高前的坐标来计算的
|
||||
// 所以缩减宽高后，需要按照原来的中心点旋转回去，获得缩减宽高并旋转后对应的坐标
|
||||
// 然后以这个坐标和对称点获得新的中心点，并重新计算未旋转前的坐标
|
||||
const rotatedTopLeftPoint = calculateRotatedPointCoordinate(newTopLeftPoint, newCenterPoint, style.rotate)
|
||||
newCenterPoint = getCenterPoint(rotatedTopLeftPoint, symmetricPoint)
|
||||
newTopLeftPoint = calculateRotatedPointCoordinate(rotatedTopLeftPoint, newCenterPoint, -style.rotate)
|
||||
newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
|
||||
|
||||
newWidth = newBottomRightPoint.x - newTopLeftPoint.x
|
||||
newHeight = newBottomRightPoint.y - newTopLeftPoint.y
|
||||
if (needLockProportion) {
|
||||
if (newWidth / newHeight > proportion) {
|
||||
newTopLeftPoint.x += Math.abs(newWidth - newHeight * proportion)
|
||||
newWidth = newHeight * proportion
|
||||
} else {
|
||||
newTopLeftPoint.y += Math.abs(newHeight - newWidth / proportion)
|
||||
newHeight = newWidth / proportion
|
||||
}
|
||||
|
||||
if (newWidth > 0 && newHeight > 0) {
|
||||
style.width = Math.round(newWidth)
|
||||
style.height = Math.round(newHeight)
|
||||
style.left = Math.round(newTopLeftPoint.x)
|
||||
style.top = Math.round(newTopLeftPoint.y)
|
||||
}
|
||||
// 由于现在求的未旋转前的坐标是以没按比例缩减宽高前的坐标来计算的
|
||||
// 所以缩减宽高后，需要按照原来的中心点旋转回去，获得缩减宽高并旋转后对应的坐标
|
||||
// 然后以这个坐标和对称点获得新的中心点，并重新计算未旋转前的坐标
|
||||
const rotatedTopLeftPoint = calculateRotatedPointCoordinate(newTopLeftPoint, newCenterPoint, style.rotate)
|
||||
newCenterPoint = getCenterPoint(rotatedTopLeftPoint, symmetricPoint)
|
||||
newTopLeftPoint = calculateRotatedPointCoordinate(rotatedTopLeftPoint, newCenterPoint, -style.rotate)
|
||||
newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
|
||||
|
||||
newWidth = newBottomRightPoint.x - newTopLeftPoint.x
|
||||
newHeight = newBottomRightPoint.y - newTopLeftPoint.y
|
||||
}
|
||||
|
||||
if (newWidth > 0 && newHeight > 0) {
|
||||
style.width = Math.round(newWidth)
|
||||
style.height = Math.round(newHeight)
|
||||
style.left = Math.round(newTopLeftPoint.x)
|
||||
style.top = Math.round(newTopLeftPoint.y)
|
||||
}
|
||||
}
|
||||
|
||||
function calculateRightTop(style, curPositon, proportion, needLockProportion, pointInfo) {
|
||||
const { symmetricPoint } = pointInfo
|
||||
let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
|
||||
let newTopRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
|
||||
let newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
|
||||
|
||||
let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
|
||||
let newHeight = newBottomLeftPoint.y - newTopRightPoint.y
|
||||
const { symmetricPoint } = pointInfo
|
||||
let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
|
||||
let newTopRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
|
||||
let newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
|
||||
|
||||
if (needLockProportion) {
|
||||
if (newWidth / newHeight > proportion) {
|
||||
newTopRightPoint.x -= Math.abs(newWidth - newHeight * proportion)
|
||||
newWidth = newHeight * proportion
|
||||
} else {
|
||||
newTopRightPoint.y += Math.abs(newHeight - newWidth / proportion)
|
||||
newHeight = newWidth / proportion
|
||||
}
|
||||
let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
|
||||
let newHeight = newBottomLeftPoint.y - newTopRightPoint.y
|
||||
|
||||
const rotatedTopRightPoint = calculateRotatedPointCoordinate(newTopRightPoint, newCenterPoint, style.rotate)
|
||||
newCenterPoint = getCenterPoint(rotatedTopRightPoint, symmetricPoint)
|
||||
newTopRightPoint = calculateRotatedPointCoordinate(rotatedTopRightPoint, newCenterPoint, -style.rotate)
|
||||
newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
|
||||
|
||||
newWidth = newTopRightPoint.x - newBottomLeftPoint.x
|
||||
newHeight = newBottomLeftPoint.y - newTopRightPoint.y
|
||||
}
|
||||
|
||||
if (newWidth > 0 && newHeight > 0) {
|
||||
style.width = Math.round(newWidth)
|
||||
style.height = Math.round(newHeight)
|
||||
style.left = Math.round(newBottomLeftPoint.x)
|
||||
style.top = Math.round(newTopRightPoint.y)
|
||||
if (needLockProportion) {
|
||||
if (newWidth / newHeight > proportion) {
|
||||
newTopRightPoint.x -= Math.abs(newWidth - newHeight * proportion)
|
||||
newWidth = newHeight * proportion
|
||||
} else {
|
||||
newTopRightPoint.y += Math.abs(newHeight - newWidth / proportion)
|
||||
newHeight = newWidth / proportion
|
||||
}
|
||||
|
||||
const rotatedTopRightPoint = calculateRotatedPointCoordinate(newTopRightPoint, newCenterPoint, style.rotate)
|
||||
newCenterPoint = getCenterPoint(rotatedTopRightPoint, symmetricPoint)
|
||||
newTopRightPoint = calculateRotatedPointCoordinate(rotatedTopRightPoint, newCenterPoint, -style.rotate)
|
||||
newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
|
||||
|
||||
newWidth = newTopRightPoint.x - newBottomLeftPoint.x
|
||||
newHeight = newBottomLeftPoint.y - newTopRightPoint.y
|
||||
}
|
||||
|
||||
if (newWidth > 0 && newHeight > 0) {
|
||||
style.width = Math.round(newWidth)
|
||||
style.height = Math.round(newHeight)
|
||||
style.left = Math.round(newBottomLeftPoint.x)
|
||||
style.top = Math.round(newTopRightPoint.y)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function calculateRightBottom(style, curPositon, proportion, needLockProportion, pointInfo) {
|
||||
const { symmetricPoint } = pointInfo
|
||||
let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
|
||||
let newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
|
||||
let newBottomRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
|
||||
|
||||
let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
|
||||
let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
|
||||
const { symmetricPoint } = pointInfo
|
||||
let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
|
||||
let newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
|
||||
let newBottomRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
|
||||
|
||||
if (needLockProportion) {
|
||||
if (newWidth / newHeight > proportion) {
|
||||
newBottomRightPoint.x -= Math.abs(newWidth - newHeight * proportion)
|
||||
newWidth = newHeight * proportion
|
||||
} else {
|
||||
newBottomRightPoint.y -= Math.abs(newHeight - newWidth / proportion)
|
||||
newHeight = newWidth / proportion
|
||||
}
|
||||
let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
|
||||
let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
|
||||
|
||||
const rotatedBottomRightPoint = calculateRotatedPointCoordinate(newBottomRightPoint, newCenterPoint, style.rotate)
|
||||
newCenterPoint = getCenterPoint(rotatedBottomRightPoint, symmetricPoint)
|
||||
newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
|
||||
newBottomRightPoint = calculateRotatedPointCoordinate(rotatedBottomRightPoint, newCenterPoint, -style.rotate)
|
||||
|
||||
newWidth = newBottomRightPoint.x - newTopLeftPoint.x
|
||||
newHeight = newBottomRightPoint.y - newTopLeftPoint.y
|
||||
if (needLockProportion) {
|
||||
if (newWidth / newHeight > proportion) {
|
||||
newBottomRightPoint.x -= Math.abs(newWidth - newHeight * proportion)
|
||||
newWidth = newHeight * proportion
|
||||
} else {
|
||||
newBottomRightPoint.y -= Math.abs(newHeight - newWidth / proportion)
|
||||
newHeight = newWidth / proportion
|
||||
}
|
||||
|
||||
if (newWidth > 0 && newHeight > 0) {
|
||||
style.width = Math.round(newWidth)
|
||||
style.height = Math.round(newHeight)
|
||||
style.left = Math.round(newTopLeftPoint.x)
|
||||
style.top = Math.round(newTopLeftPoint.y)
|
||||
}
|
||||
const rotatedBottomRightPoint = calculateRotatedPointCoordinate(newBottomRightPoint, newCenterPoint, style.rotate)
|
||||
newCenterPoint = getCenterPoint(rotatedBottomRightPoint, symmetricPoint)
|
||||
newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
|
||||
newBottomRightPoint = calculateRotatedPointCoordinate(rotatedBottomRightPoint, newCenterPoint, -style.rotate)
|
||||
|
||||
newWidth = newBottomRightPoint.x - newTopLeftPoint.x
|
||||
newHeight = newBottomRightPoint.y - newTopLeftPoint.y
|
||||
}
|
||||
|
||||
if (newWidth > 0 && newHeight > 0) {
|
||||
style.width = Math.round(newWidth)
|
||||
style.height = Math.round(newHeight)
|
||||
style.left = Math.round(newTopLeftPoint.x)
|
||||
style.top = Math.round(newTopLeftPoint.y)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function calculateLeftBottom(style, curPositon, proportion, needLockProportion, pointInfo) {
|
||||
const { symmetricPoint } = pointInfo
|
||||
let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
|
||||
let newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
|
||||
let newBottomLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
|
||||
const { symmetricPoint } = pointInfo
|
||||
let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
|
||||
let newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
|
||||
let newBottomLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
|
||||
|
||||
let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
|
||||
let newHeight = newBottomLeftPoint.y - newTopRightPoint.y
|
||||
let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
|
||||
let newHeight = newBottomLeftPoint.y - newTopRightPoint.y
|
||||
|
||||
if (needLockProportion) {
|
||||
if (newWidth / newHeight > proportion) {
|
||||
newBottomLeftPoint.x += Math.abs(newWidth - newHeight * proportion)
|
||||
newWidth = newHeight * proportion
|
||||
} else {
|
||||
newBottomLeftPoint.y -= Math.abs(newHeight - newWidth / proportion)
|
||||
newHeight = newWidth / proportion
|
||||
}
|
||||
|
||||
const rotatedBottomLeftPoint = calculateRotatedPointCoordinate(newBottomLeftPoint, newCenterPoint, style.rotate)
|
||||
newCenterPoint = getCenterPoint(rotatedBottomLeftPoint, symmetricPoint)
|
||||
newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
|
||||
newBottomLeftPoint = calculateRotatedPointCoordinate(rotatedBottomLeftPoint, newCenterPoint, -style.rotate)
|
||||
|
||||
newWidth = newTopRightPoint.x - newBottomLeftPoint.x
|
||||
newHeight = newBottomLeftPoint.y - newTopRightPoint.y
|
||||
if (needLockProportion) {
|
||||
if (newWidth / newHeight > proportion) {
|
||||
newBottomLeftPoint.x += Math.abs(newWidth - newHeight * proportion)
|
||||
newWidth = newHeight * proportion
|
||||
} else {
|
||||
newBottomLeftPoint.y -= Math.abs(newHeight - newWidth / proportion)
|
||||
newHeight = newWidth / proportion
|
||||
}
|
||||
|
||||
if (newWidth > 0 && newHeight > 0) {
|
||||
style.width = Math.round(newWidth)
|
||||
style.height = Math.round(newHeight)
|
||||
style.left = Math.round(newBottomLeftPoint.x)
|
||||
style.top = Math.round(newTopRightPoint.y)
|
||||
}
|
||||
const rotatedBottomLeftPoint = calculateRotatedPointCoordinate(newBottomLeftPoint, newCenterPoint, style.rotate)
|
||||
newCenterPoint = getCenterPoint(rotatedBottomLeftPoint, symmetricPoint)
|
||||
newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
|
||||
newBottomLeftPoint = calculateRotatedPointCoordinate(rotatedBottomLeftPoint, newCenterPoint, -style.rotate)
|
||||
|
||||
newWidth = newTopRightPoint.x - newBottomLeftPoint.x
|
||||
newHeight = newBottomLeftPoint.y - newTopRightPoint.y
|
||||
}
|
||||
|
||||
if (newWidth > 0 && newHeight > 0) {
|
||||
style.width = Math.round(newWidth)
|
||||
style.height = Math.round(newHeight)
|
||||
style.left = Math.round(newBottomLeftPoint.x)
|
||||
style.top = Math.round(newTopRightPoint.y)
|
||||
}
|
||||
}
|
||||
|
||||
function calculateTop(style, curPositon, proportion, needLockProportion, pointInfo) {
|
||||
const { symmetricPoint, curPoint } = pointInfo
|
||||
let rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
|
||||
let rotatedTopMiddlePoint = calculateRotatedPointCoordinate({
|
||||
x: curPoint.x,
|
||||
y: rotatedcurPositon.y,
|
||||
}, curPoint, style.rotate)
|
||||
|
||||
// 勾股定理
|
||||
let newHeight = Math.sqrt((rotatedTopMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedTopMiddlePoint.y - symmetricPoint.y) ** 2)
|
||||
|
||||
if (newHeight > 0) {
|
||||
const newCenter = {
|
||||
x: rotatedTopMiddlePoint.x - (rotatedTopMiddlePoint.x - symmetricPoint.x) / 2,
|
||||
y: rotatedTopMiddlePoint.y + (symmetricPoint.y - rotatedTopMiddlePoint.y) / 2,
|
||||
}
|
||||
const { symmetricPoint, curPoint } = pointInfo
|
||||
const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
|
||||
const rotatedTopMiddlePoint = calculateRotatedPointCoordinate({
|
||||
x: curPoint.x,
|
||||
y: rotatedcurPositon.y
|
||||
}, curPoint, style.rotate)
|
||||
|
||||
let width = style.width
|
||||
// 因为调整的是高度 所以只需根据锁定的比例调整宽度即可
|
||||
if (needLockProportion) {
|
||||
width = newHeight * proportion
|
||||
}
|
||||
|
||||
style.width = width
|
||||
style.height = Math.round(newHeight)
|
||||
style.top = Math.round(newCenter.y - (newHeight / 2))
|
||||
style.left = Math.round(newCenter.x - (style.width / 2))
|
||||
// 勾股定理
|
||||
const newHeight = Math.sqrt((rotatedTopMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedTopMiddlePoint.y - symmetricPoint.y) ** 2)
|
||||
|
||||
if (newHeight > 0) {
|
||||
const newCenter = {
|
||||
x: rotatedTopMiddlePoint.x - (rotatedTopMiddlePoint.x - symmetricPoint.x) / 2,
|
||||
y: rotatedTopMiddlePoint.y + (symmetricPoint.y - rotatedTopMiddlePoint.y) / 2
|
||||
}
|
||||
|
||||
let width = style.width
|
||||
// 因为调整的是高度 所以只需根据锁定的比例调整宽度即可
|
||||
if (needLockProportion) {
|
||||
width = newHeight * proportion
|
||||
}
|
||||
|
||||
style.width = width
|
||||
style.height = Math.round(newHeight)
|
||||
style.top = Math.round(newCenter.y - (newHeight / 2))
|
||||
style.left = Math.round(newCenter.x - (style.width / 2))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function calculateRight(style, curPositon, proportion, needLockProportion, pointInfo) {
|
||||
const { symmetricPoint, curPoint } = pointInfo
|
||||
const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
|
||||
const rotatedRightMiddlePoint = calculateRotatedPointCoordinate({
|
||||
x: rotatedcurPositon.x,
|
||||
y: curPoint.y,
|
||||
}, curPoint, style.rotate)
|
||||
|
||||
let newWidth = Math.sqrt((rotatedRightMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedRightMiddlePoint.y - symmetricPoint.y) ** 2)
|
||||
if (newWidth > 0) {
|
||||
const newCenter = {
|
||||
x: rotatedRightMiddlePoint.x - (rotatedRightMiddlePoint.x - symmetricPoint.x) / 2,
|
||||
y: rotatedRightMiddlePoint.y + (symmetricPoint.y - rotatedRightMiddlePoint.y) / 2,
|
||||
}
|
||||
const { symmetricPoint, curPoint } = pointInfo
|
||||
const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
|
||||
const rotatedRightMiddlePoint = calculateRotatedPointCoordinate({
|
||||
x: rotatedcurPositon.x,
|
||||
y: curPoint.y
|
||||
}, curPoint, style.rotate)
|
||||
|
||||
let height = style.height
|
||||
// 因为调整的是宽度 所以只需根据锁定的比例调整高度即可
|
||||
if (needLockProportion) {
|
||||
height = newWidth / proportion
|
||||
}
|
||||
|
||||
style.height = height
|
||||
style.width = Math.round(newWidth)
|
||||
style.top = Math.round(newCenter.y - (style.height / 2))
|
||||
style.left = Math.round(newCenter.x - (newWidth / 2))
|
||||
const newWidth = Math.sqrt((rotatedRightMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedRightMiddlePoint.y - symmetricPoint.y) ** 2)
|
||||
if (newWidth > 0) {
|
||||
const newCenter = {
|
||||
x: rotatedRightMiddlePoint.x - (rotatedRightMiddlePoint.x - symmetricPoint.x) / 2,
|
||||
y: rotatedRightMiddlePoint.y + (symmetricPoint.y - rotatedRightMiddlePoint.y) / 2
|
||||
}
|
||||
|
||||
let height = style.height
|
||||
// 因为调整的是宽度 所以只需根据锁定的比例调整高度即可
|
||||
if (needLockProportion) {
|
||||
height = newWidth / proportion
|
||||
}
|
||||
|
||||
style.height = height
|
||||
style.width = Math.round(newWidth)
|
||||
style.top = Math.round(newCenter.y - (style.height / 2))
|
||||
style.left = Math.round(newCenter.x - (newWidth / 2))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function calculateBottom(style, curPositon, proportion, needLockProportion, pointInfo) {
|
||||
const { symmetricPoint, curPoint } = pointInfo
|
||||
const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
|
||||
const rotatedBottomMiddlePoint = calculateRotatedPointCoordinate({
|
||||
x: curPoint.x,
|
||||
y: rotatedcurPositon.y,
|
||||
}, curPoint, style.rotate)
|
||||
|
||||
const newHeight = Math.sqrt((rotatedBottomMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedBottomMiddlePoint.y - symmetricPoint.y) ** 2)
|
||||
if (newHeight > 0) {
|
||||
const newCenter = {
|
||||
x: rotatedBottomMiddlePoint.x - (rotatedBottomMiddlePoint.x - symmetricPoint.x) / 2,
|
||||
y: rotatedBottomMiddlePoint.y + (symmetricPoint.y - rotatedBottomMiddlePoint.y) / 2,
|
||||
}
|
||||
const { symmetricPoint, curPoint } = pointInfo
|
||||
const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
|
||||
const rotatedBottomMiddlePoint = calculateRotatedPointCoordinate({
|
||||
x: curPoint.x,
|
||||
y: rotatedcurPositon.y
|
||||
}, curPoint, style.rotate)
|
||||
|
||||
let width = style.width
|
||||
// 因为调整的是高度 所以只需根据锁定的比例调整宽度即可
|
||||
if (needLockProportion) {
|
||||
width = newHeight * proportion
|
||||
}
|
||||
|
||||
style.width = width
|
||||
style.height = Math.round(newHeight)
|
||||
style.top = Math.round(newCenter.y - (newHeight / 2))
|
||||
style.left = Math.round(newCenter.x - (style.width / 2))
|
||||
const newHeight = Math.sqrt((rotatedBottomMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedBottomMiddlePoint.y - symmetricPoint.y) ** 2)
|
||||
if (newHeight > 0) {
|
||||
const newCenter = {
|
||||
x: rotatedBottomMiddlePoint.x - (rotatedBottomMiddlePoint.x - symmetricPoint.x) / 2,
|
||||
y: rotatedBottomMiddlePoint.y + (symmetricPoint.y - rotatedBottomMiddlePoint.y) / 2
|
||||
}
|
||||
|
||||
let width = style.width
|
||||
// 因为调整的是高度 所以只需根据锁定的比例调整宽度即可
|
||||
if (needLockProportion) {
|
||||
width = newHeight * proportion
|
||||
}
|
||||
|
||||
style.width = width
|
||||
style.height = Math.round(newHeight)
|
||||
style.top = Math.round(newCenter.y - (newHeight / 2))
|
||||
style.left = Math.round(newCenter.x - (style.width / 2))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function calculateLeft(style, curPositon, proportion, needLockProportion, pointInfo) {
|
||||
const { symmetricPoint, curPoint } = pointInfo
|
||||
const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
|
||||
const rotatedLeftMiddlePoint = calculateRotatedPointCoordinate({
|
||||
x: rotatedcurPositon.x,
|
||||
y: curPoint.y,
|
||||
}, curPoint, style.rotate)
|
||||
|
||||
const newWidth = Math.sqrt((rotatedLeftMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedLeftMiddlePoint.y - symmetricPoint.y) ** 2)
|
||||
if (newWidth > 0) {
|
||||
const newCenter = {
|
||||
x: rotatedLeftMiddlePoint.x - (rotatedLeftMiddlePoint.x - symmetricPoint.x) / 2,
|
||||
y: rotatedLeftMiddlePoint.y + (symmetricPoint.y - rotatedLeftMiddlePoint.y) / 2,
|
||||
}
|
||||
|
||||
let height = style.height
|
||||
if (needLockProportion) {
|
||||
height = newWidth / proportion
|
||||
}
|
||||
|
||||
style.height = height
|
||||
style.width = Math.round(newWidth)
|
||||
style.top = Math.round(newCenter.y - (style.height / 2))
|
||||
style.left = Math.round(newCenter.x - (newWidth / 2))
|
||||
const { symmetricPoint, curPoint } = pointInfo
|
||||
const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
|
||||
const rotatedLeftMiddlePoint = calculateRotatedPointCoordinate({
|
||||
x: rotatedcurPositon.x,
|
||||
y: curPoint.y
|
||||
}, curPoint, style.rotate)
|
||||
|
||||
const newWidth = Math.sqrt((rotatedLeftMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedLeftMiddlePoint.y - symmetricPoint.y) ** 2)
|
||||
if (newWidth > 0) {
|
||||
const newCenter = {
|
||||
x: rotatedLeftMiddlePoint.x - (rotatedLeftMiddlePoint.x - symmetricPoint.x) / 2,
|
||||
y: rotatedLeftMiddlePoint.y + (symmetricPoint.y - rotatedLeftMiddlePoint.y) / 2
|
||||
}
|
||||
|
||||
let height = style.height
|
||||
if (needLockProportion) {
|
||||
height = newWidth / proportion
|
||||
}
|
||||
|
||||
style.height = height
|
||||
style.width = Math.round(newWidth)
|
||||
style.top = Math.round(newCenter.y - (style.height / 2))
|
||||
style.left = Math.round(newCenter.x - (newWidth / 2))
|
||||
}
|
||||
}
|
||||
|
||||
export default function calculateComponentPositonAndSize(name, style, curPositon, proportion, needLockProportion, pointInfo) {
|
||||
funcs[name](style, curPositon, proportion, needLockProportion, pointInfo)
|
||||
}
|
||||
funcs[name](style, curPositon, proportion, needLockProportion, pointInfo)
|
||||
}
|
||||
|
||||
@ -126,6 +126,30 @@ export function changeStyleWithScale(value) {
|
||||
return value * parseInt(store.state.canvasStyleData.scale) / 100
|
||||
}
|
||||
|
||||
export function changeStyleWithScaleIn(value, scale) {
|
||||
return value * parseInt(scale) / 100
|
||||
// 自适应宽高
|
||||
export function changeStyleWithScaleHeightInAuto(value) {
|
||||
const scale = store.state.canvasStyleData.scaleHeight ? store.state.canvasStyleData.scaleHeight : 100
|
||||
const result = value * scale / 100
|
||||
console.log('heightInAuto=>' + scale + ';' + result)
|
||||
return result
|
||||
}
|
||||
|
||||
// 自适应宽高
|
||||
export function changeStyleWithScaleWidthInAuto(value) {
|
||||
const scale = store.state.canvasStyleData.scaleWidth ? store.state.canvasStyleData.scaleWidth : 100
|
||||
const result = value * scale / 100
|
||||
console.log('widthInAuto=>' + scale + ';' + result)
|
||||
return result
|
||||
}
|
||||
|
||||
export function getOriginStyleHeight(value) {
|
||||
const scale = store.state.canvasStyleData.scaleHeight ? store.state.canvasStyleData.scaleHeight : 100
|
||||
const result = value / (scale / 100)
|
||||
return result
|
||||
}
|
||||
|
||||
export function getOriginStyleWidth(value) {
|
||||
const scale = store.state.canvasStyleData.scaleWidth ? store.state.canvasStyleData.scaleWidth : 100
|
||||
const result = value / (scale / 100)
|
||||
return result
|
||||
}
|
||||
|
||||
@ -42,6 +42,7 @@ const data = {
|
||||
canvasStyleData: DEFAULT_COMMON_CANVAS_STYLE, // 页面全局数据 //扩展公共样式 公共的仪表板样式，用来实时响应样式的变化
|
||||
componentData: [], // 画布组件数据
|
||||
curComponent: null,
|
||||
curCanvasScale: null,
|
||||
curComponentIndex: null,
|
||||
// 点击画布时是否点中组件，主要用于取消选中组件用。
|
||||
// 如果没点中组件，并且在画布空白处弹起鼠标，则取消当前组件的选中状态
|
||||
@ -75,11 +76,16 @@ const data = {
|
||||
state.curComponentIndex = index
|
||||
},
|
||||
|
||||
setShapeStyle({ curComponent }, { top, left, width, height, rotate }) {
|
||||
if (top) curComponent.style.top = top
|
||||
if (left) curComponent.style.left = left
|
||||
if (width) curComponent.style.width = width
|
||||
if (height) curComponent.style.height = height
|
||||
setCurCanvasScale(state, curCanvasScale) {
|
||||
debugger
|
||||
state.curCanvasScale = curCanvasScale
|
||||
},
|
||||
|
||||
setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
|
||||
if (top) curComponent.style.top = parseInt(canvasStyleData.selfAdaption ? (top * 100 / curCanvasScale.scaleHeight) : top)
|
||||
if (left) curComponent.style.left = parseInt(canvasStyleData.selfAdaption ? (left * 100 / curCanvasScale.scaleWidth) : left)
|
||||
if (width) curComponent.style.width = parseInt(canvasStyleData.selfAdaption ? (width * 100 / curCanvasScale.scaleWidth) : width)
|
||||
if (height) curComponent.style.height = parseInt(canvasStyleData.selfAdaption ? (height * 100 / curCanvasScale.scaleHeight) : height)
|
||||
if (rotate) curComponent.style.rotate = rotate
|
||||
},
|
||||
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
</de-aside-container>
|
||||
|
||||
<!--画布区域-->
|
||||
<de-main-container style="margin-left: 5px;margin-right: 5px">
|
||||
<de-main-container id="canvasInfo-main" style="margin-left: 5px;margin-right: 5px">
|
||||
<!--左侧抽屉-->
|
||||
<el-drawer
|
||||
:visible.sync="show"
|
||||
@ -76,13 +76,14 @@
|
||||
</el-drawer>
|
||||
|
||||
<div
|
||||
id="canvasInfo"
|
||||
class="content this_canvas"
|
||||
@drop="handleDrop"
|
||||
@dragover="handleDragOver"
|
||||
@mousedown="handleMouseDown"
|
||||
@mouseup="deselectCurComponent"
|
||||
>
|
||||
<Editor style="margin: 15px;" />
|
||||
<Editor :out-style="outStyle" />
|
||||
</div>
|
||||
</de-main-container>
|
||||
<de-aside-container v-if="aidedButtonActive" :class="aidedButtonActive ? 'show' : 'hidden'" class="style-aside">
|
||||
@ -147,6 +148,7 @@ import { findOne } from '@/api/panel/panel'
|
||||
import PreviewFullScreen from '@/components/canvas/components/Editor/PreviewFullScreen'
|
||||
import Preview from '@/components/canvas/components/Editor/Preview'
|
||||
import AttrList from '@/components/canvas/components/AttrList.vue'
|
||||
import elementResizeDetectorMaker from 'element-resize-detector'
|
||||
|
||||
// 引入样式
|
||||
import '@/components/canvas/assets/iconfont/iconfont.css'
|
||||
@ -187,7 +189,21 @@ export default {
|
||||
subjectVisible: false,
|
||||
previewVisible: false,
|
||||
componentStyleShow: true,
|
||||
aidedButtonActive: false
|
||||
aidedButtonActive: false,
|
||||
timer: null,
|
||||
needToChange: [
|
||||
'top',
|
||||
'left',
|
||||
'width',
|
||||
'height',
|
||||
'fontSize',
|
||||
'borderWidth'
|
||||
],
|
||||
scale: '100',
|
||||
outStyle: {
|
||||
width: null,
|
||||
height: null
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -238,6 +254,15 @@ export default {
|
||||
bus.$on('previewFullScreenClose', () => {
|
||||
this.previewVisible = false
|
||||
})
|
||||
const _this = this
|
||||
const erd = elementResizeDetectorMaker()
|
||||
// 监听div变动事件
|
||||
erd.listenTo(document.getElementById('canvasInfo-main'), element => {
|
||||
_this.$nextTick(() => {
|
||||
debugger
|
||||
_this.restore()
|
||||
})
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
const elx = this.$refs.rightPanel
|
||||
@ -410,8 +435,24 @@ export default {
|
||||
},
|
||||
changeAidedDesign() {
|
||||
this.aidedButtonActive = !this.aidedButtonActive
|
||||
},
|
||||
getOriginStyle(value) {
|
||||
const scale = this.canvasStyleData.scale
|
||||
const result = value / (parseInt(scale) / 100)
|
||||
return result
|
||||
},
|
||||
restore() {
|
||||
debugger
|
||||
if (document.getElementById('canvasInfo')) {
|
||||
this.$nextTick(() => {
|
||||
const canvasHeight = document.getElementById('canvasInfo').offsetHeight
|
||||
const canvasWidth = document.getElementById('canvasInfo').offsetWidth
|
||||
this.outStyle.height = canvasHeight
|
||||
this.outStyle.width = canvasWidth
|
||||
console.log(canvasHeight + '--' + canvasWidth)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -419,9 +460,9 @@ export default {
|
||||
<style scoped>
|
||||
.ms-aside-container {
|
||||
height: calc(100vh - 91px);
|
||||
min-width: 40px;
|
||||
max-width: 60px;
|
||||
border: none;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.ms-main-container {
|
||||
|
||||
@ -217,9 +217,12 @@ export default {
|
||||
nodeType: null,
|
||||
panelType: null,
|
||||
panelStyle: JSON.stringify({
|
||||
width: 1280,
|
||||
height: 720,
|
||||
width: 1600,
|
||||
height: 900,
|
||||
scale: 100,
|
||||
scaleWidth: 100,
|
||||
scaleHeight: 100,
|
||||
selfAdaption: true,
|
||||
openCommonStyle: true,
|
||||
panel: DEFAULT_PANEL_STYLE,
|
||||
chart: {
|
||||
@ -258,9 +261,12 @@ export default {
|
||||
nodeType: null,
|
||||
panelType: null,
|
||||
panelStyle: JSON.stringify({
|
||||
width: 1280,
|
||||
height: 720,
|
||||
width: 1600,
|
||||
height: 900,
|
||||
scale: 100,
|
||||
scaleWidth: 100,
|
||||
scaleHeight: 100,
|
||||
selfAdaption: true,
|
||||
openCommonStyle: true,
|
||||
panel: DEFAULT_PANEL_STYLE,
|
||||
chart: {
|
||||
|
||||
@ -19,9 +19,12 @@ export const DEFAULT_PANEL_STYLE = {
|
||||
}
|
||||
|
||||
export const DEFAULT_COMMON_CANVAS_STYLE = {
|
||||
width: 1280,
|
||||
height: 720,
|
||||
width: 1600,
|
||||
height: 900,
|
||||
scale: 100,
|
||||
scaleWidth: 100,
|
||||
scaleHeight: 100,
|
||||
selfAdaption: true,
|
||||
openCommonStyle: true,
|
||||
panel: DEFAULT_PANEL_STYLE,
|
||||
chart: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user