异形屏适配组件

cocos creator 提供了safeArea 组件来适配刘海屏的情况，但是该组件只能在根节点生效，并且全屏适配，并不是很友好。我们仿造他实现一个轻量的子节点左右适配。实现如下：

const { ccclass, property, menu, executeInEditMode, requireComponent, executionOrder } = cc._decorator;
@ccclass
@executeInEditMode
@requireComponent(cc.Widget)
@executionOrder(1000)
@menu("tools/SafeArea")
export default class SafeArea extends cc.Component {
    @property({
        tooltip: "异形屏适配",
        displayName: "适配左边",
    })
    left: boolean = true;

    @property({
        tooltip: "异形屏适配",
        displayName: "适配右边",
    })
    right: boolean = false;

    onLoad() {
        let widget = this.node.getComponent(cc.Widget);
        if (!widget) {
            return;
        }
        widget.updateAlignment();

        let safeArea = cc.sys.getSafeAreaRect();
        let viewsize = cc.winSize;
        let widthOffset = viewsize.width - safeArea.width;

        if (this.left && widget.isAlignLeft) {
            widget.left += safeArea.x;
        }

        if (this.right && widget.isAlignRight) {
            widget.right += widthOffset - safeArea.x;
        }

        widget.updateAlignment();
    }

    protected onEnable(): void {}
}