通过继承的方式使用around属性相关疑惑

[johnnhan]

• 通过 boundsType 设置默认值的方式设置 around 属性为 center，不起作用
• 通过实例传参的方式设置 around 属性为 center，表现正常
• 两种方式一起使用，不起作用

import { registerUI, dataProcessor, Rect, RectData, boundsType } from '@leafer-ui/core' // 引入跨平台核心包
import { IRectInputData, IRectData, IDirection } from '@leafer-ui/interface'

// 定义数据
export interface ICustomRectInputData extends IRectInputData {}
export interface ICustomRectData extends IRectData {}
export class CustomRectData extends RectData implements ICustomRectData {}

// 定义类

@registerUI()
class CustomRect extends Rect {
    public get __tag() { return 'CustomRect' }

    @dataProcessor(CustomRectData)
    declare public __: ICustomRectData

    @boundsType('center')
    declare public around: IDirection;

    constructor(data: ICustomRectInputData) {
        super(data)
        // ...
    }
}


// 使用自定义元素
import { Leafer } from 'leafer-ui'

const leafer = new Leafer({ view: window })
const customRect = new CustomRect({
    x: 100,
    y: 100,
    width: 100,
    height: 100,
    fill: 'red',
    // around: 'center',
})

leafer.add(customRect)

[leaferjs]

可以看一下源码的定义：

https://github.com/leaferjs/leafer-ui/blob/main/packages/display/src/UI.ts

@autoLayoutType() declare public around?: IAlign | IUnitPointData

[johnnhan]

感谢

[johnnhan]

换成 autoLayoutType 装饰器后好像还是不行，没实现 around: center 的效果

import { registerUI, dataProcessor, Rect, RectData, autoLayoutType } from '@leafer-ui/core' // 引入跨平台核心包
import { IRectInputData, IRectData, IDirection } from '@leafer-ui/interface'

// 定义数据
export interface ICustomRectInputData extends IRectInputData {}
export interface ICustomRectData extends IRectData {}
export class CustomRectData extends RectData implements ICustomRectData {}

// 定义类

@registerUI()
class CustomRect extends Rect {
    public get __tag() { return 'CustomRect' }

    @dataProcessor(CustomRectData)
    declare public __: ICustomRectData

    @autoLayoutType('center')
    declare public around: IDirection;

    constructor(data: ICustomRectInputData) {
        super(data)
        // ...
    }
}


// 使用自定义元素
import { Leafer } from 'leafer-ui'

const leafer = new Leafer({ view: window })
const customRect = new CustomRect({
    x: 100,
    y: 100,
    width: 100,
    height: 100,
    fill: 'red',
})

leafer.add(customRect)

[leaferjs]

constructor(data: ICustomRectInputData) {
    super(data)
    this.__hasAutoLayout = true
    // ...
}

[leaferjs]

我后面优化一下，暂时先加一下上面的代码可以解决