center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat(数据大屏): 数据大屏支持不同伸缩方式设置

Browse Source
This commit is contained in:
wangjiahao 2024-08-08 19:05:02 +08:00
parent 5275947fe9
commit 684c61536f
1 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
core/core-frontend/src/utils/changeComponentsSizeWithScale.ts
View File

@ -8,16 +8,24 @@ const dvMainStore = dvMainStoreWithOut()
const { componentData, curComponentIndex, canvasStyleData } = storeToRefs(dvMainStore)
const needToChangeAttrs = ['top', 'left', 'width', 'height', 'fontSize', 'letterSpacing']
const needToChangeDirectionAttrs = {
width: ['left', 'width', 'fontSize', 'letterSpacing'],
height: ['top', 'height']
}
export function changeSizeWithScale(scale) {
return changeComponentsSizeWithScale(scale)
}
export function changeComponentsSizeWithScale(scale) {
export function changeSizeWithDirectionScale(scale, direction) {
return changeComponentsSizeWithScale(scale, needToChangeDirectionAttrs[direction])
}
export function changeComponentsSizeWithScale(scale, changeAttrs = needToChangeAttrs) {
const componentDataCopy = deepCopy(componentData.value)
componentDataCopy.forEach(component => {
Object.keys(component.style).forEach(key => {
if (needToChangeAttrs.includes(key)) {
if (changeAttrs.includes(key)) {
if (key === 'fontSize' && component.style[key] === '') return
// 根据原来的比例获取样式原来的尺寸
// 再用原来的尺寸 * 现在的比例得出新的尺寸
@ -52,21 +60,35 @@ export function changeComponentsSizeWithScale(scale) {
})
}
export function changeRefComponentsSizeWithScale(componentDataRef, canvasStyleDataRef, scale) {
export function changeRefComponentsSizeWithScale(
componentDataRef,
canvasStyleDataRef,
scaleWidth,
scaleHeight
) {
componentDataRef.forEach(component => {
Object.keys(component.style).forEach(key => {
if (needToChangeAttrs.includes(key)) {
if (key === 'fontSize' && component.style[key] === '') return
if (key === 'fontSize' && component.style[key] === '') return
if (needToChangeDirectionAttrs.width.includes(key)) {
// 根据原来的比例获取样式原来的尺寸
// 再用原来的尺寸 * 现在的比例得出新的尺寸
component.style[key] = format(
getOriginStyle(component.style[key], canvasStyleDataRef.scale),
scale
scaleWidth
)
} else if (needToChangeDirectionAttrs.height.includes(key)) {
// 根据原来的比例获取样式原来的尺寸
// 再用原来的尺寸 * 现在的比例得出新的尺寸
component.style[key] = format(
getOriginStyle(component.style[key], canvasStyleDataRef.scale),
scaleHeight
)
}
})
})
canvasStyleDataRef.scale = scale
canvasStyleDataRef.scale = scaleWidth
canvasStyleDataRef.scaleWidth = scaleWidth
canvasStyleDataRef.scaleHeight = scaleHeight
}
const needToChangeAttrs2 = ['width', 'height', 'fontSize']