Skip to content

D
dataease
提交 5ef299df authored 作者: wangjiahao's avatar wangjiahao
浏览文件
操作

feat: 编辑仪表盘同时支持自适应画布区域和实际画布大小两种编辑模式

上级 4ae84882
隐藏空白字符变更
内嵌 并排
正在显示 包含 456 行增加 和 292 行删除
frontend/src/components/canvas/components/Editor/Area.vue
浏览文件 @ 5ef299df
<template> <template>
<div :style="{ <div
left: start.x + 'px', :style="{
top: start.y + 'px', left: start.x + 'px',
width: width + 'px', top: start.y + 'px',
height: height + 'px', width: width + 'px',
}" class="area"></div> height: height + 'px',
}"
class="area"
/>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
start: { start: {
type: Object, type: Object
},
width: {
type: Number,
},
height: {
type: Number,
},
}, },
width: {
type: Number
},
height: {
type: Number
}
}
} }
</script> </script>
...@@ -28,4 +31,4 @@ export default { ...@@ -28,4 +31,4 @@ export default {
border: 1px solid #70c0ff; border: 1px solid #70c0ff;
position: absolute; position: absolute;
} }
</style> </style>
\ No newline at end of file
frontend/src/components/canvas/components/Editor/index.vue
浏览文件 @ 5ef299df
...@@ -14,13 +14,15 @@ ...@@ -14,13 +14,15 @@
<Shape <Shape
v-for="(item, index) in componentData" v-for="(item, index) in componentData"
:key="item.id" :key="item.id"
:default-style="item.style" :default-style="getShapeStyleInt(item.style)"
:style="getShapeStyle(item.style)" :style="getShapeStyle(item.style)"
:active="item === curComponent" :active="item === curComponent"
:element="item" :element="item"
:index="index" :index="index"
:class="{ lock: item.isLock }" :class="{ lock: item.isLock }"
> >
<!-- item.style-&#45;&#45;{{ item.style }}-->
<!-- item.style-&#45;&#45;{{ getShapeStyleInt(item.style) }}-->
<component <component
:is="item.component" :is="item.component"
...@@ -76,6 +78,7 @@ import Grid from './Grid' ...@@ -76,6 +78,7 @@ import Grid from './Grid'
import { changeStyleWithScale } from '@/components/canvas/utils/translate' import { changeStyleWithScale } from '@/components/canvas/utils/translate'
import { Condition } from '@/components/widget/bean/Condition' import { Condition } from '@/components/widget/bean/Condition'
import bus from '@/utils/bus' import bus from '@/utils/bus'
export default { export default {
components: { Shape, ContextMenu, MarkLine, Area, Grid }, components: { Shape, ContextMenu, MarkLine, Area, Grid },
props: { props: {
...@@ -86,6 +89,10 @@ export default { ...@@ -86,6 +89,10 @@ export default {
filter: { filter: {
type: Object, type: Object,
require: false require: false
},
outStyle: {
type: Object,
require: false
} }
}, },
data() { data() {
...@@ -99,31 +106,58 @@ export default { ...@@ -99,31 +106,58 @@ export default {
width: 0, width: 0,
height: 0, height: 0,
isShowArea: false, 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: { computed: {
customStyle() { customStyle() {
let style = { let style = {
width: this.changeStyleWithScale(this.canvasStyleData.width) + 'px', width: this.format(this.canvasStyleData.width, this.scaleWidth) + 'px',
height: this.changeStyleWithScale(this.canvasStyleData.height) + 'px' height: this.format(this.canvasStyleData.height, this.scaleHeight) + 'px'
} }
console.log('customStyle=>' + JSON.stringify(style))
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) {
style = { style = {
width: this.changeStyleWithScale(this.canvasStyleData.width) + 'px', background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`,
height: this.changeStyleWithScale(this.canvasStyleData.height) + 'px', ...style
background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`
} }
} else { } else {
style = { style = {
width: this.changeStyleWithScale(this.canvasStyleData.width) + 'px', background: this.canvasStyleData.panel.color,
height: this.changeStyleWithScale(this.canvasStyleData.height) + 'px', ...style
background: this.canvasStyleData.panel.color
} }
} }
} }
return style return style
}, },
panelInfo() { panelInfo() {
...@@ -153,7 +187,6 @@ export default { ...@@ -153,7 +187,6 @@ export default {
}, },
methods: { methods: {
changeStyleWithScale, changeStyleWithScale,
handleMouseDown(e) { handleMouseDown(e) {
// 如果没有选中组件 在画布上点击时需要调用 e.preventDefault() 防止触发 drop 事件 // 如果没有选中组件 在画布上点击时需要调用 e.preventDefault() 防止触发 drop 事件
if (!this.curComponent || (this.curComponent.component !== 'v-text' && this.curComponent.component !== 'rect-shape')) { if (!this.curComponent || (this.curComponent.component !== 'v-text' && this.curComponent.component !== 'rect-shape')) {
...@@ -218,8 +251,10 @@ export default { ...@@ -218,8 +251,10 @@ export default {
// 根据选中区域和区域中每个组件的位移信息来创建 Group 组件 // 根据选中区域和区域中每个组件的位移信息来创建 Group 组件
// 要遍历选择区域的每个组件，获取它们的 left top right bottom 信息来进行比较 // 要遍历选择区域的每个组件，获取它们的 left top right bottom 信息来进行比较
let top = Infinity; let left = Infinity let top = Infinity
let right = -Infinity; let bottom = -Infinity let left = Infinity
let right = -Infinity
let bottom = -Infinity
areaData.forEach(component => { areaData.forEach(component => {
let style = {} let style = {}
if (component.component === 'Group') { if (component.component === 'Group') {
...@@ -303,19 +338,34 @@ export default { ...@@ -303,19 +338,34 @@ export default {
getShapeStyle(style) { getShapeStyle(style) {
const result = {}; const result = {};
['width', 'height', 'top', 'left', 'rotate'].forEach(attr => { ['width', 'left'].forEach(attr => {
if (attr !== 'rotate') { result[attr] = this.format(style[attr], this.scaleWidth) + 'px'
result[attr] = style[attr] + 'px' });
} else { ['height', 'top'].forEach(attr => {
result.transform = 'rotate(' + style[attr] + 'deg)' 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 return result
}, },
getComponentStyle(style) { getComponentStyle(style) {
// return getStyle(style, ['top', 'left', 'width', 'height', 'rotate']) // return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
return style return style
}, },
...@@ -368,6 +418,21 @@ export default { ...@@ -368,6 +418,21 @@ export default {
}, },
executeSearch() { executeSearch() {
console.log('当前查询条件是: ' + JSON.stringify(this.conditions)) 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 })
}
} }
} }
} }
......
frontend/src/components/canvas/components/Toolbar.vue
浏览文件 @ 5ef299df
<template> <template>
<div> <div>
<div class="toolbar"> <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"> <div class="canvas-config" style="margin-right: 10px">
<span> {{ $t('panel.canvas_size') }} </span> <span> {{ $t('panel.canvas_size') }} </span>
<input v-model="canvasStyleData.width"> <input v-model="canvasStyleData.width" :disabled="canvasStyleData.selfAdaption">
<span>*</span> <span>*</span>
<input v-model="canvasStyleData.height"> <input v-model="canvasStyleData.height" :disabled="canvasStyleData.selfAdaption">
</div> </div>
<!-- <div class="canvas-config" style="margin-right: 10px">--> <!-- <div class="canvas-config" style="margin-right: 10px">-->
<!-- <span> {{ $t('panel.canvas_scale') }} </span>--> <!-- <span> {{ $t('panel.canvas_scale') }} </span>-->
...@@ -140,7 +146,6 @@ export default { ...@@ -140,7 +146,6 @@ export default {
...this.canvasStyleData, ...this.canvasStyleData,
scale: this.scale scale: this.scale
}) })
this.$nextTick(() => (eventBus.$emit('resizing', '')))
}, 1000) }, 1000)
}, },
...@@ -320,4 +325,17 @@ export default { ...@@ -320,4 +325,17 @@ export default {
background-color: #ffffff!important; 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> </style>
frontend/src/components/canvas/utils/calculateComponentPositonAndSize.js
浏览文件 @ 5ef299df
...@@ -2,272 +2,272 @@ ...@@ -2,272 +2,272 @@
import { calculateRotatedPointCoordinate, getCenterPoint } from './translate' import { calculateRotatedPointCoordinate, getCenterPoint } from './translate'
const funcs = { const funcs = {
lt: calculateLeftTop, lt: calculateLeftTop,
t: calculateTop, t: calculateTop,
rt: calculateRightTop, rt: calculateRightTop,
r: calculateRight, r: calculateRight,
rb: calculateRightBottom, rb: calculateRightBottom,
b: calculateBottom, b: calculateBottom,
lb: calculateLeftBottom, lb: calculateLeftBottom,
l: calculateLeft, l: calculateLeft
} }
function calculateLeftTop(style, curPositon, proportion, needLockProportion, pointInfo) { function calculateLeftTop(style, curPositon, proportion, needLockProportion, pointInfo) {
const { symmetricPoint } = pointInfo const { symmetricPoint } = pointInfo
let newCenterPoint = getCenterPoint(curPositon, symmetricPoint) let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
let newTopLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate) let newTopLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
let newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate) let newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
if (needLockProportion) { let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
if (newWidth / newHeight > proportion) { let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
newTopLeftPoint.x += Math.abs(newWidth - newHeight * proportion)
newWidth = newHeight * proportion
} else {
newTopLeftPoint.y += Math.abs(newHeight - newWidth / proportion)
newHeight = newWidth / proportion
}
// 由于现在求的未旋转前的坐标是以没按比例缩减宽高前的坐标来计算的
// 所以缩减宽高后，需要按照原来的中心点旋转回去，获得缩减宽高并旋转后对应的坐标
// 然后以这个坐标和对称点获得新的中心点，并重新计算未旋转前的坐标
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) { if (needLockProportion) {
style.width = Math.round(newWidth) if (newWidth / newHeight > proportion) {
style.height = Math.round(newHeight) newTopLeftPoint.x += Math.abs(newWidth - newHeight * proportion)
style.left = Math.round(newTopLeftPoint.x) newWidth = newHeight * proportion
style.top = Math.round(newTopLeftPoint.y) } else {
newTopLeftPoint.y += Math.abs(newHeight - newWidth / proportion)
newHeight = newWidth / proportion
} }
// 由于现在求的未旋转前的坐标是以没按比例缩减宽高前的坐标来计算的
// 所以缩减宽高后，需要按照原来的中心点旋转回去，获得缩减宽高并旋转后对应的坐标
// 然后以这个坐标和对称点获得新的中心点，并重新计算未旋转前的坐标
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) { function calculateRightTop(style, curPositon, proportion, needLockProportion, pointInfo) {
const { symmetricPoint } = pointInfo const { symmetricPoint } = pointInfo
let newCenterPoint = getCenterPoint(curPositon, symmetricPoint) let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
let newTopRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate) let newTopRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
let newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate) let newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
let newHeight = newBottomLeftPoint.y - newTopRightPoint.y
if (needLockProportion) { let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
if (newWidth / newHeight > proportion) { let newHeight = newBottomLeftPoint.y - newTopRightPoint.y
newTopRightPoint.x -= Math.abs(newWidth - newHeight * proportion)
newWidth = newHeight * proportion if (needLockProportion) {
} else { if (newWidth / newHeight > proportion) {
newTopRightPoint.y += Math.abs(newHeight - newWidth / proportion) newTopRightPoint.x -= Math.abs(newWidth - newHeight * proportion)
newHeight = newWidth / proportion newWidth = newHeight * proportion
} } else {
newTopRightPoint.y += Math.abs(newHeight - newWidth / proportion)
const rotatedTopRightPoint = calculateRotatedPointCoordinate(newTopRightPoint, newCenterPoint, style.rotate) newHeight = newWidth / proportion
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)
} }
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) { function calculateRightBottom(style, curPositon, proportion, needLockProportion, pointInfo) {
const { symmetricPoint } = pointInfo const { symmetricPoint } = pointInfo
let newCenterPoint = getCenterPoint(curPositon, symmetricPoint) let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
let newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate) let newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
let newBottomRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate) let newBottomRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
if (needLockProportion) { let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
if (newWidth / newHeight > proportion) { let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
newBottomRightPoint.x -= Math.abs(newWidth - newHeight * proportion)
newWidth = newHeight * proportion
} else {
newBottomRightPoint.y -= Math.abs(newHeight - newWidth / proportion)
newHeight = newWidth / proportion
}
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) { if (needLockProportion) {
style.width = Math.round(newWidth) if (newWidth / newHeight > proportion) {
style.height = Math.round(newHeight) newBottomRightPoint.x -= Math.abs(newWidth - newHeight * proportion)
style.left = Math.round(newTopLeftPoint.x) newWidth = newHeight * proportion
style.top = Math.round(newTopLeftPoint.y) } else {
newBottomRightPoint.y -= Math.abs(newHeight - newWidth / proportion)
newHeight = newWidth / proportion
} }
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) { function calculateLeftBottom(style, curPositon, proportion, needLockProportion, pointInfo) {
const { symmetricPoint } = pointInfo const { symmetricPoint } = pointInfo
let newCenterPoint = getCenterPoint(curPositon, symmetricPoint) let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
let newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate) let newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
let newBottomLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate) let newBottomLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
let newWidth = newTopRightPoint.x - newBottomLeftPoint.x let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
let newHeight = newBottomLeftPoint.y - newTopRightPoint.y let newHeight = newBottomLeftPoint.y - newTopRightPoint.y
if (needLockProportion) { if (needLockProportion) {
if (newWidth / newHeight > proportion) { if (newWidth / newHeight > proportion) {
newBottomLeftPoint.x += Math.abs(newWidth - newHeight * proportion) newBottomLeftPoint.x += Math.abs(newWidth - newHeight * proportion)
newWidth = newHeight * proportion newWidth = newHeight * proportion
} else { } else {
newBottomLeftPoint.y -= Math.abs(newHeight - newWidth / proportion) newBottomLeftPoint.y -= Math.abs(newHeight - newWidth / proportion)
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 (newWidth > 0 && newHeight > 0) { const rotatedBottomLeftPoint = calculateRotatedPointCoordinate(newBottomLeftPoint, newCenterPoint, style.rotate)
style.width = Math.round(newWidth) newCenterPoint = getCenterPoint(rotatedBottomLeftPoint, symmetricPoint)
style.height = Math.round(newHeight) newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
style.left = Math.round(newBottomLeftPoint.x) newBottomLeftPoint = calculateRotatedPointCoordinate(rotatedBottomLeftPoint, newCenterPoint, -style.rotate)
style.top = Math.round(newTopRightPoint.y)
} 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) { function calculateTop(style, curPositon, proportion, needLockProportion, pointInfo) {
const { symmetricPoint, curPoint } = pointInfo const { symmetricPoint, curPoint } = pointInfo
let rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate) const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
let rotatedTopMiddlePoint = calculateRotatedPointCoordinate({ const rotatedTopMiddlePoint = calculateRotatedPointCoordinate({
x: curPoint.x, x: curPoint.x,
y: rotatedcurPositon.y, y: rotatedcurPositon.y
}, curPoint, style.rotate) }, curPoint, style.rotate)
// 勾股定理 // 勾股定理
let newHeight = Math.sqrt((rotatedTopMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedTopMiddlePoint.y - symmetricPoint.y) ** 2) const newHeight = Math.sqrt((rotatedTopMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedTopMiddlePoint.y - symmetricPoint.y) ** 2)
if (newHeight > 0) { if (newHeight > 0) {
const newCenter = { const newCenter = {
x: rotatedTopMiddlePoint.x - (rotatedTopMiddlePoint.x - symmetricPoint.x) / 2, x: rotatedTopMiddlePoint.x - (rotatedTopMiddlePoint.x - symmetricPoint.x) / 2,
y: rotatedTopMiddlePoint.y + (symmetricPoint.y - rotatedTopMiddlePoint.y) / 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))
} }
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) { function calculateRight(style, curPositon, proportion, needLockProportion, pointInfo) {
const { symmetricPoint, curPoint } = pointInfo const { symmetricPoint, curPoint } = pointInfo
const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate) const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
const rotatedRightMiddlePoint = calculateRotatedPointCoordinate({ const rotatedRightMiddlePoint = calculateRotatedPointCoordinate({
x: rotatedcurPositon.x, x: rotatedcurPositon.x,
y: curPoint.y, y: curPoint.y
}, curPoint, style.rotate) }, curPoint, style.rotate)
let newWidth = Math.sqrt((rotatedRightMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedRightMiddlePoint.y - symmetricPoint.y) ** 2) const newWidth = Math.sqrt((rotatedRightMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedRightMiddlePoint.y - symmetricPoint.y) ** 2)
if (newWidth > 0) { if (newWidth > 0) {
const newCenter = { const newCenter = {
x: rotatedRightMiddlePoint.x - (rotatedRightMiddlePoint.x - symmetricPoint.x) / 2, x: rotatedRightMiddlePoint.x - (rotatedRightMiddlePoint.x - symmetricPoint.x) / 2,
y: rotatedRightMiddlePoint.y + (symmetricPoint.y - rotatedRightMiddlePoint.y) / 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))
} }
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) { function calculateBottom(style, curPositon, proportion, needLockProportion, pointInfo) {
const { symmetricPoint, curPoint } = pointInfo const { symmetricPoint, curPoint } = pointInfo
const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate) const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
const rotatedBottomMiddlePoint = calculateRotatedPointCoordinate({ const rotatedBottomMiddlePoint = calculateRotatedPointCoordinate({
x: curPoint.x, x: curPoint.x,
y: rotatedcurPositon.y, y: rotatedcurPositon.y
}, curPoint, style.rotate) }, curPoint, style.rotate)
const newHeight = Math.sqrt((rotatedBottomMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedBottomMiddlePoint.y - symmetricPoint.y) ** 2) const newHeight = Math.sqrt((rotatedBottomMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedBottomMiddlePoint.y - symmetricPoint.y) ** 2)
if (newHeight > 0) { if (newHeight > 0) {
const newCenter = { const newCenter = {
x: rotatedBottomMiddlePoint.x - (rotatedBottomMiddlePoint.x - symmetricPoint.x) / 2, x: rotatedBottomMiddlePoint.x - (rotatedBottomMiddlePoint.x - symmetricPoint.x) / 2,
y: rotatedBottomMiddlePoint.y + (symmetricPoint.y - rotatedBottomMiddlePoint.y) / 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))
} }
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) { function calculateLeft(style, curPositon, proportion, needLockProportion, pointInfo) {
const { symmetricPoint, curPoint } = pointInfo const { symmetricPoint, curPoint } = pointInfo
const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate) const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
const rotatedLeftMiddlePoint = calculateRotatedPointCoordinate({ const rotatedLeftMiddlePoint = calculateRotatedPointCoordinate({
x: rotatedcurPositon.x, x: rotatedcurPositon.x,
y: curPoint.y, y: curPoint.y
}, curPoint, style.rotate) }, curPoint, style.rotate)
const newWidth = Math.sqrt((rotatedLeftMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedLeftMiddlePoint.y - symmetricPoint.y) ** 2) const newWidth = Math.sqrt((rotatedLeftMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedLeftMiddlePoint.y - symmetricPoint.y) ** 2)
if (newWidth > 0) { if (newWidth > 0) {
const newCenter = { const newCenter = {
x: rotatedLeftMiddlePoint.x - (rotatedLeftMiddlePoint.x - symmetricPoint.x) / 2, x: rotatedLeftMiddlePoint.x - (rotatedLeftMiddlePoint.x - symmetricPoint.x) / 2,
y: rotatedLeftMiddlePoint.y + (symmetricPoint.y - rotatedLeftMiddlePoint.y) / 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))
} }
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) { export default function calculateComponentPositonAndSize(name, style, curPositon, proportion, needLockProportion, pointInfo) {
funcs[name](style, curPositon, proportion, needLockProportion, pointInfo) funcs[name](style, curPositon, proportion, needLockProportion, pointInfo)
} }
\ No newline at end of file
frontend/src/components/canvas/utils/translate.js
浏览文件 @ 5ef299df
...@@ -126,6 +126,30 @@ export function changeStyleWithScale(value) { ...@@ -126,6 +126,30 @@ export function changeStyleWithScale(value) {
return value * parseInt(store.state.canvasStyleData.scale) / 100 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
} }
frontend/src/store/index.js
浏览文件 @ 5ef299df
...@@ -42,6 +42,7 @@ const data = { ...@@ -42,6 +42,7 @@ const data = {
canvasStyleData: DEFAULT_COMMON_CANVAS_STYLE, // 页面全局数据 //扩展公共样式 公共的仪表板样式，用来实时响应样式的变化 canvasStyleData: DEFAULT_COMMON_CANVAS_STYLE, // 页面全局数据 //扩展公共样式 公共的仪表板样式，用来实时响应样式的变化
componentData: [], // 画布组件数据 componentData: [], // 画布组件数据
curComponent: null, curComponent: null,
curCanvasScale: null,
curComponentIndex: null, curComponentIndex: null,
// 点击画布时是否点中组件，主要用于取消选中组件用。 // 点击画布时是否点中组件，主要用于取消选中组件用。
// 如果没点中组件，并且在画布空白处弹起鼠标，则取消当前组件的选中状态 // 如果没点中组件，并且在画布空白处弹起鼠标，则取消当前组件的选中状态
...@@ -75,11 +76,16 @@ const data = { ...@@ -75,11 +76,16 @@ const data = {
state.curComponentIndex = index state.curComponentIndex = index
}, },
setShapeStyle({ curComponent }, { top, left, width, height, rotate }) { setCurCanvasScale(state, curCanvasScale) {
if (top) curComponent.style.top = top debugger
if (left) curComponent.style.left = left state.curCanvasScale = curCanvasScale
if (width) curComponent.style.width = width },
if (height) curComponent.style.height = height
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 if (rotate) curComponent.style.rotate = rotate
}, },
......
frontend/src/views/panel/edit/index.vue
浏览文件 @ 5ef299df
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
</de-aside-container> </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 <el-drawer
:visible.sync="show" :visible.sync="show"
...@@ -76,13 +76,14 @@ ...@@ -76,13 +76,14 @@
</el-drawer> </el-drawer>
<div <div
id="canvasInfo"
class="content this_canvas" class="content this_canvas"
@drop="handleDrop" @drop="handleDrop"
@dragover="handleDragOver" @dragover="handleDragOver"
@mousedown="handleMouseDown" @mousedown="handleMouseDown"
@mouseup="deselectCurComponent" @mouseup="deselectCurComponent"
> >
<Editor style="margin: 15px;" /> <Editor :out-style="outStyle" />
</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">
...@@ -147,6 +148,7 @@ import { findOne } from '@/api/panel/panel' ...@@ -147,6 +148,7 @@ import { findOne } from '@/api/panel/panel'
import PreviewFullScreen from '@/components/canvas/components/Editor/PreviewFullScreen' import PreviewFullScreen from '@/components/canvas/components/Editor/PreviewFullScreen'
import Preview from '@/components/canvas/components/Editor/Preview' import Preview from '@/components/canvas/components/Editor/Preview'
import AttrList from '@/components/canvas/components/AttrList.vue' import AttrList from '@/components/canvas/components/AttrList.vue'
import elementResizeDetectorMaker from 'element-resize-detector'
// 引入样式 // 引入样式
import '@/components/canvas/assets/iconfont/iconfont.css' import '@/components/canvas/assets/iconfont/iconfont.css'
...@@ -187,7 +189,21 @@ export default { ...@@ -187,7 +189,21 @@ export default {
subjectVisible: false, subjectVisible: false,
previewVisible: false, previewVisible: false,
componentStyleShow: true, 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 { ...@@ -238,6 +254,15 @@ export default {
bus.$on('previewFullScreenClose', () => { bus.$on('previewFullScreenClose', () => {
this.previewVisible = false this.previewVisible = false
}) })
const _this = this
const erd = elementResizeDetectorMaker()
// 监听div变动事件
erd.listenTo(document.getElementById('canvasInfo-main'), element => {
_this.$nextTick(() => {
debugger
_this.restore()
})
})
}, },
beforeDestroy() { beforeDestroy() {
const elx = this.$refs.rightPanel const elx = this.$refs.rightPanel
...@@ -410,8 +435,24 @@ export default { ...@@ -410,8 +435,24 @@ export default {
}, },
changeAidedDesign() { changeAidedDesign() {
this.aidedButtonActive = !this.aidedButtonActive 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> </script>
...@@ -419,9 +460,9 @@ export default { ...@@ -419,9 +460,9 @@ export default {
<style scoped> <style scoped>
.ms-aside-container { .ms-aside-container {
height: calc(100vh - 91px); height: calc(100vh - 91px);
min-width: 40px;
max-width: 60px; max-width: 60px;
border: none; border: none;
width: 60px;
} }
.ms-main-container { .ms-main-container {
......
frontend/src/views/panel/list/PanelList.vue
浏览文件 @ 5ef299df
...@@ -217,9 +217,12 @@ export default { ...@@ -217,9 +217,12 @@ export default {
nodeType: null, nodeType: null,
panelType: null, panelType: null,
panelStyle: JSON.stringify({ panelStyle: JSON.stringify({
width: 1280, width: 1600,
height: 720, height: 900,
scale: 100, scale: 100,
scaleWidth: 100,
scaleHeight: 100,
selfAdaption: true,
openCommonStyle: true, openCommonStyle: true,
panel: DEFAULT_PANEL_STYLE, panel: DEFAULT_PANEL_STYLE,
chart: { chart: {
...@@ -258,9 +261,12 @@ export default { ...@@ -258,9 +261,12 @@ export default {
nodeType: null, nodeType: null,
panelType: null, panelType: null,
panelStyle: JSON.stringify({ panelStyle: JSON.stringify({
width: 1280, width: 1600,
height: 720, height: 900,
scale: 100, scale: 100,
scaleWidth: 100,
scaleHeight: 100,
selfAdaption: true,
openCommonStyle: true, openCommonStyle: true,
panel: DEFAULT_PANEL_STYLE, panel: DEFAULT_PANEL_STYLE,
chart: { chart: {
......
frontend/src/views/panel/panel.js
浏览文件 @ 5ef299df
...@@ -19,9 +19,12 @@ export const DEFAULT_PANEL_STYLE = { ...@@ -19,9 +19,12 @@ export const DEFAULT_PANEL_STYLE = {
} }
export const DEFAULT_COMMON_CANVAS_STYLE = { export const DEFAULT_COMMON_CANVAS_STYLE = {
width: 1280, width: 1600,
height: 720, height: 900,
scale: 100, scale: 100,
scaleWidth: 100,
scaleHeight: 100,
selfAdaption: true,
openCommonStyle: true, openCommonStyle: true,
panel: DEFAULT_PANEL_STYLE, panel: DEFAULT_PANEL_STYLE,
chart: { chart: {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论