box-client/assets/script/core/view/JMAlertFrame.js

/**
 * 弹框边框
 * 主要目的：方便统一边距
 */
cc.Class({
    extends: cc.Component,

    editor: {
        executeInEditMode: true,
        menu: '嘉米公用/JMAlertFrame'
    },

    properties: {
        target: {
            type: cc.Node,
            get () {
                return this._target;
            },
            set (value) {
                this._clearTarget ();
                this._target = value;
                this._initTarget ();
            },
            tooltip: '弹框内容'
        },
        _target: cc.Node,

        top: {
            get () {
                return this._top;
            },
            set (value) {
                this._top = value;
                if (CC_EDITOR) {
                    this._debouncedUpdate();
                }
            },
            tooltip: '顶部边距'
        },
        _top: 0,

        bottom: {
            get () {
                return this._bottom;
            },
            set (value) {
                this._bottom = value;
                if (CC_EDITOR) {
                    this._debouncedUpdate();
                }
            },
            tooltip: '底部边距'
        },
        _bottom: 0,

        left: {
            get () {
                return this._left;
            },
            set (value) {
                this._left = value;
                if (CC_EDITOR) {
                    this._debouncedUpdate();
                }
            },
            tooltip: '左边距'
        },
        _left: 0,

        right: {
            get () {
                return this._right;
            },
            set (value) {
                this._right = value;
                if (CC_EDITOR) {
                    this._debouncedUpdate();
                }
            },
            tooltip: '右边距'
        },
        _right: 0
    },

    onLoad () {
        if (CC_EDITOR) {
            this._debouncedUpdate = G.ViewUtils.debounce(this.updateFrame, 200);
        }
    },

    onEnable () {
        this._initTarget ();
    },

    onDisable () {
        this._clearTarget ();
    },

    /**
     * 刷新
     *
     * @author Pyden
     * @date 2019-03-21
     */
    updateFrame () {
        if (CC_EDITOR) {
            this.delayUpdateFrame();
            return;
        }

        // 因为逻辑层和UI层分离，改变UI属性需要下一帧才改变
        // 导致死循环，需要新增延迟下一帧刷新
        if (this.updateFrameMark) {
            return;
        }
        // 延迟刷新标记
        this.updateFrameMark = true;
        this.scheduleOnce(() => {
            this.delayUpdateFrame();

            // 还原标记
            this.updateFrameMark = false;
        });
    },

    /**
     * 延后刷新
     *
     * @author Pyden
     * @date 2020-05-19
     */
    delayUpdateFrame () {
        if (this.target) {
            let scaleX = this.target.scaleX;
            let scaleY = this.target.scaleY;
            let anchorX = this.target.anchorX;
            let anchorY = this.target.anchorY;

            let width = this.target.width * scaleX + this.left + this.right;
            let height = this.target.height * scaleY + this.top + this.bottom;
            this.node.width = width;
            this.node.height = height;

            let leftX = -width / 2 + this.left;
            let bottomY = -height / 2 + this.bottom;
            let x = leftX + this.target.width * scaleX * anchorX;
            let y = bottomY + this.target.height * scaleY * anchorY;
            this.target.x = x;
            this.target.y = y;
        }
    },

    // ---------------- 私有方法分割线 ----------------

    /**
     * 初始化弹框内容（增加监听、立即调整）
     *
     * @author Pyden
     * @date 2019-03-27
     */
    _initTarget () {
        if (this.target) {
            this.target.on(cc.Node.EventType.SIZE_CHANGED, this.updateFrame, this);
            this.target.on(cc.Node.EventType.SCALE_CHANGED, this.updateFrame, this);
            this.target.on(cc.Node.EventType.ANCHOR_CHANGED, this.updateFrame, this);
            this.target.on(cc.Node.EventType.POSITION_CHANGED, this.updateFrame, this);

            this.updateFrame();
        }
    },

    /**
     * 清理弹框内容（删除监听）
     *
     * @author Pyden
     * @date 2019-03-27
     */
    _clearTarget () {
        if (this.target) {
            this.target.targetOff(this);
        }
    }
});