59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import { PickCreateComponentType } from '@/packages/index.d'
|
|
import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
|
|
|
|
type AttrType = PickCreateComponentType<'attr'>
|
|
type StylesType = PickCreateComponentType<'styles'>
|
|
|
|
// 设置位置
|
|
export const getComponentAttrStyle = (attr: AttrType, index: number) => {
|
|
const componentStyle = {
|
|
zIndex: index + 1,
|
|
left: `${attr.x}px`,
|
|
top: `${attr.y}px`
|
|
}
|
|
return componentStyle
|
|
}
|
|
|
|
// 设置大小
|
|
export const getSizeStyle = (attr: AttrType, scale?: number) => {
|
|
const sizeStyle = {
|
|
width: `${scale ? scale * attr.w : attr.w}px`,
|
|
height: `${scale ? scale * attr.h : attr.h}px`
|
|
}
|
|
return sizeStyle
|
|
}
|
|
|
|
// 全局样式
|
|
export const getEditCanvasConfigStyle = (canvas: EditCanvasConfigType) => {
|
|
// 背景
|
|
const computedBackground = canvas.selectColor
|
|
? { background: canvas.background }
|
|
: {
|
|
background: `url(${canvas.backgroundImage}) no-repeat center/100% !important`
|
|
}
|
|
return {
|
|
position: 'relative' as const,
|
|
width: canvas.width ? `${canvas.width || 100}px` : '100%',
|
|
height: canvas.height ? `${canvas.height}px` : '100%',
|
|
...computedBackground
|
|
}
|
|
}
|
|
|
|
// 动画
|
|
export const animationsClass = (animations: string[]) => {
|
|
if (animations.length) {
|
|
return `animate__animated animate__${animations[0]}`
|
|
}
|
|
return ''
|
|
}
|
|
|
|
// 滤镜
|
|
export const getStyle = (styles: StylesType | EditCanvasConfigType) => {
|
|
const { opacity, saturate, contrast, hueRotate, brightness } = styles
|
|
return {
|
|
// 透明度
|
|
opacity: opacity,
|
|
filter: `saturate(${saturate}) contrast(${contrast}) hue-rotate(${hueRotate}deg) brightness(${brightness})`
|
|
}
|
|
}
|