永远庭

class ScrollWindow extends CustomWindow {

_scrollMin = 0; //最小滚动值，注意往上滚动是负数值，这个最小滚动值就是网上滚动的最大距离，相应的 Bitmap 高度就是窗口高度-最小滚动值；比如窗口高300，最小滚动值-200，那么就是可以最多向上滚动200距离，而整个 Bitmap的高度为500.
_scrollMax = 0; //一般默认为0，不能从初始位置向上滚动
_scroll = 0; //当前的滚动值
_scrolling = 0; //临时滚动值，即按下鼠标后移动的距离，松开鼠标后清零并归入 _scroll 中

get scroll() {return this._scroll + this._scrolling;} //实时总滚动值
}

//在update函数中加入该函数，记录当前鼠标于按下时位置的 y 轴差值作为临时滚动值。
// Clickable._pressPoint 的定义如果忘记请参照之前内容
UpdateScroll() {
    if (this.IsPressed()) {
        const y = TouchInput.y;
        this._scrolling = y - this._pressPoint.y;
    }
}

//释放鼠标时，将临时滚动值并入，同时清空临时滚动值
OnRelease() {
    super.OnRelease();
    this._scroll += this._scrolling;
    this._scrolling = 0;
}

UpdateContentScroll() {
    this._contentSprite.setFrame(0, -this.scroll, this.width, this.contentHeight);
}

/**
     * 改变滚动极限值会改变Bitmap尺寸，因此需要重新绘制 content
     * @param {number} l
     */
    SetContentLength(l) {
        if ( l > this.contentHeight) {
            this._scrollMin = this.contentHeight - l; //这里以内容总高度l作为参数，则 _scrollMin 就是(窗口高度 - l)
            this.RefreshContent();
        } else {
            this.content.clear();
        }
    }
    
    RefreshContent() {
        this._contentSprite.bitmap = new Bitmap(this.contentWidth, this.contentHeight - this._scrollMin);
        this._contentSprite.move(this.paddings.left, this._titleHeight + this.paddings.top);
        this.UpdateContentScroll();
    }

UpdateBorderBouncing() {
    if (this._scroll > this._scrollMax) {
        this._scroll -= (this._scroll - this._scrollMax) / 3;
        if (this._scroll - this._scrollMax < 1) this._scroll = this._scrollMax;
    }

    if (this._scroll < this._scrollMin) {
        this._scroll -= (this._scroll - this._scrollMin) / 3;
        if (this._scrollMin - this._scroll < 1) this._scroll = this._scrollMin;
    }
}

_inertia = 0; //记录当前的惯性滑动速度
_lastY = 0; //记录上一帧的滚动 y 值，以便和当前帧比较，得出该帧 y 的改变量，也就是滚动速度
//改造 UpdateScroll 函数如下：
    UpdateScroll() {
        if (this.IsPressed()) {
            const y = TouchInput.y;
            this._scrolling = y - this._pressPoint.y;
            this._inertia = y - this._lastY;
            this._lastY = y;
        }
    }

//惯性速度衰减率，我计划所有窗口都是一样的，所以作为静态属性，如果希望各个不同可以改为成员属性
static get inertiaAttenuation() { return 0.94; } 
   UpdateInertia() {
       if (!this.IsPressed() && (this._inertia > 1 || this._inertia < -1)) { //只有在鼠标松开时惯性生效
           this._scroll += this._inertia;
           this._inertia = this._inertia * ScrollWindow.inertiaAttenuation;
       }
   }

update() {
    super.update();
    this.UpdateInertia();
    this.UpdateScroll();
    this.UpdateBorderBouncing();
    this.UpdateContentScroll();
    this.UpdateScrollBar();
}

class Clickable extends PIXI.Container {
    constructor(x = 0, y = 0, w = 0, h = 0) {
        super();
        this.x = x;
        this.y = y;

        //宽和高必不可少
        this._width = w;
        this._height = h;

        //是否处于激活（可交互）状态
        this._active = true;
    }

    get width() {return this._width;}
    get w() {return this._width;} //宽的简称，为了以后可以偷懒
    get height() {return this._height;}
    get h() {return this._height;}

    get active() { return this._active;}
    Activate() { this._active = true;}
    Deactivate() { this._active = false;}
}

/**  @returns {boolean} */
    IsMouseOver() {
        //通过PIXI的原生函数 DisplayObject.worldTransform.applyInverse(p: Point) 可以方便地把全局坐标变成本地坐标
        const pos = this.worldTransform.applyInverse(new Point(TouchInput.x, TouchInput.y));
        return pos.x >= 0 && pos.x <= this.w && pos.y >= 0 && pos.y <= this.h;
    }

_pressed = false; //记录“鼠标在区域内按下”
_longPressed = false; //记录“鼠标在区域内长按”
_pressPoint = new Point(0, 0); //记录鼠标按下的点坐标
_releasePoint = new Point(0, 0); //记录鼠标释放的点坐标

IsEnabled() {
    return this.visible && this._active;
}

update() {
    if (!this.IsEnabled()) return;

    for (const child of this.children.reverse.clone()) {
        if (child.update) {
            child.update();
        }
    }

    if (this._pressed) { //已经处于按下状态
        if (this.IsMouseOver()) { 
            if (!this._longPressed && TouchInput.isLongPressed()) { 
                this._longPressed = true;
                this.OnLongPress();
            }
            if(TouchInput.isReleased()) { 
                if(this._longPressed) {
                    this.OnLongPressRelease(true);
                } else if(TouchInput.isClicked()){
                    this.OnClick();
                }
                this._pressed = false;
                this._longPressed = false;
                this.OnRelease();
            }
        } else { //鼠标在按下状态离开区域的情况
            if(this._longPressed) {
                this.OnLongPressRelease(false);
            }
            this._pressed = false;
            this._longPressed = false;
            this.OnRelease();
        }
    } else if (TouchInput.isTriggered()&&this.IsMouseOver()) { //开始按下
        this._pressed = true;
        this.OnPress();
    }
}

_handlers = {};

/**
 * @param {Function} func
 * @param {Function} handle_func
 * @param args
 */
SetHandler(func, handle_func, ...args) {
    if(!this[func.name]) {
        throw new Error(`No method named ${func.name} found!`);
    } else {
        this._handlers[func.name] = handle_func.bind(this, ...args);
    }
}

CallHandler(name) {
    if(this._handlers[name]) {
        this._handlers[name]();
    }
}
s
OnPress() {
    this._pressPoint.set(TouchInput.x, TouchInput.y);
    console.log('press');
    this.CallHandler(this.OnPress.name);
}

OnRelease() {
    this._releasePoint.set(TouchInput.x, TouchInput.y);
    console.log('release');
    this.CallHandler(this.OnRelease.name);
}

OnClick() {
    console.log('click');
    this.CallHandler(this.OnClick.name);
}

OnLongPress() {
    console.log('long press start');
    this.CallHandler(this.OnLongPress.name);
}

/**
 * @param {boolean} isClick
 */
OnLongPressRelease(isClick) {
    console.log(`long press release, this is${isClick?'':' not'} a click`);
    this.CallHandler(this.OnLongPressRelease.name);
}

/**
 * @param {Bitmap} bitmap 
 * @param {number} dx
 * @param {number} dy 
 * @param {number} dw  
 * @param {number} dh 
 * @param {number} lx - 左边缘宽度
 * @param {number} rx - 右边缘宽度
 * @param {number} uy - 上边缘宽度
 * @param {number} by - 下边缘宽度
 */
Bitmap.prototype.DrawTexture = function(bitmap, dx, dy, dw, dh, lx, rx = lx, uy, by = uy) {
    let w = bitmap.width - lx - rx;
    let h = bitmap.height - uy - by;

    //left top
    this.blt(bitmap, 0, 0, lx, uy, dx, dy, lx, uy);
    //top
    this.blt(bitmap, lx, 0, w, uy, dx + lx, dy, dw - lx - rx, uy);
    //right top
    this.blt(bitmap, lx + w, 0, rx, uy, dx + dw - rx, dy, rx, uy);
    //left bottom
    this.blt(bitmap, 0, uy + h, lx, by, dx, dy + dh - by, lx, by);
    //bottom
    this.blt(bitmap, lx, uy + h, w, by, dx + lx, dy + dh - by, dw - lx -rx, by);
    //right bottom
    this.blt(bitmap, lx + w, uy + h, rx, by, dx + dw - rx, dy + dh - by, rx, by);
    //left
    this.blt(bitmap, 0, uy, lx, h, dx, dy + uy, lx, dh - uy - by);
    //right
    this.blt(bitmap, lx + w, uy, rx, h, dx + dw - rx, dy + uy, rx, dh - uy - by);
    //center
    this.blt(bitmap, lx, uy, w, h, dx + lx, dy + uy, dw - lx - rx, dh - uy - by);
};

class Paddings {
    /**
     * @param {number} left
     * @param {number} top
     * @param {number} right
     * @param {number} bottom
     */
    constructor(left = 0, top = left, right = left, bottom = top) {
        this._left = left;
        this._top = top;
        this._right = right;
        this._bottom = bottom;
    }
    _left = 0;
    _top = 0;
    _right = 0;
    _bottom = 0;
    /** @returns number */
    get left() { return this._left; }
    /** @returns number */
    get top() { return this._top; }
    /** @returns number */
    get right() { return this._top; }
    /** @returns number */
    get bottom() { return this._bottom; }
}

class CustomWindow extends Clickable { //继承Clickable
    _title = '';
    _titleHeight = 0;
    /** @type Bitmap */
    _titleTexture;
    /** @type Bitmap */
    _backTexture;
    _active = false;
    /**
     * @param {number} x
     * @param {number} y
     * @param {number} w
     * @param {number} h
     * @param {string} title - 标题：废弃了
     * @param {string} titlebg - 标题皮肤（背景）：废弃了
     * @param {number} th - 标题高度：废弃了
     * @param {string} bg - 皮肤（背景）
     */
    constructor(x, y, w, h, title, th, titlebg = 'wd_title_cmn', bg = 'wd_back_cmn') { //以默认背景图片作为默认参数
        super(x, y, w, h);
        this._title = title;
        this._titleHeight = th;
        this._contentPaddings = new Paddings(12, 12, 12, 12); //内容paddings，即内容与内容 sprite 的边距
        this.Create();
        this.titleTexture = ImageManager.ImageManager.loadBitmap('img/ui', titlebg);
        this.backTexture = ImageManager.loadBitmap('img/ui', bg);
        this.Move(x, y, w, h);
    }

    get backTexture() { return this._backTexture;}
    set backTexture(val) {
        if (this._backTexture !== val) {
            this._backTexture = val;
            this._backTexture.addLoadListener(this.OnBackTextureLoaded.bind(this)); //因为读取图片需要时间，使用回调函数
        }
    }

    get titleTexture() { return this._titleTexture;}
    set titleTexture(val) {
        if (this._titleTexture !== val) {
            this._titleTexture = val;
            this._titleTexture.addLoadListener(this.OnTitleTextureLoaded.bind(this));
        }
    }

    /** @returns {Bitmap} */
    get content() { return this._contentSprite.bitmap; }

    /**
     * content paddings
     * @returns {Paddings}
     */
    get paddings() { return this._contentPaddings; }

    /** @returns number */
    get contentAreaHeight() {return this.height - this._titleHeight;}
    /** @returns number */
    get contentHeight() { return this.contentAreaHeight - this.paddings.top - this.paddings.bottom; }
    /** @returns number */
    get contentWidth() { return this.width - this.paddings.left - this.paddings.right; }


    /**
     * 移动窗口，如果宽高发生变化则需要重新绘制
     * @param {number} x - x coordinate
     * @param {number} y - y coordinate
     * @param {number} width
     * @param {number} height
     */
    Move(x = 0, y = 0, width = 0, height = 0) {
        this.x = x;
        this.y = y;
        if (this._width !== width || this._height !== height) {
            this._width = width;
            this._height = height;
            this.RefreshAllParts();
        }
    }

    Close() {
        this.Deactivate();
        this.visible = false;
    }

    Open() {
        this.visible = true;
    }

    // 创建Sprite
    Create() {
        this.CreateBackSprite();
        this.CreateContentSprite();
        this.CreateTitleSprite();
    }

    /** @type Sprite */
    _titleSprite;
    /** @type Sprite */
    _backSprite;
    /** @type Sprite */
    _contentSprite;
    CreateTitleSprite() {
        this._titleSprite = new Sprite();
        this.addChild(this._titleSprite);
    }

    CreateBackSprite() {
        this._backSprite = new Sprite();
        this.addChild(this._backSprite);
        this._backSprite.move(0, this._titleHeight);
    }

    CreateContentSprite() {
        this._contentSprite = new Sprite(new Bitmap(this.contentWidth, this.contentHeight));
        this.addChild(this._contentSprite);
        this._contentSprite.move(this.paddings.left, this._titleHeight + this.paddings.top);
    }

    //刷新窗口内容
    OnTitleTextureLoaded() {
        if (this._titleHeight > 0) {
            let b = new Bitmap(this.width, this._titleHeight + 12);
            b.DrawTexture(this.titleTexture, 0, 0, this.width, this._titleHeight + 4, this.TitleBorders.left, this.TitleBorders.right, this.TitleBorders.top, this.TitleBorders.bottom);
            b.drawText(this._title, 0, 0, this.width, this._titleHeight + 4, 'center');
            this._titleSprite.bitmap = b;
        }
    }

    OnBackTextureLoaded() {
        let b = new Bitmap(this.width, this.height - this._titleHeight);
        b.DrawTexture(this.backTexture, 0, 0, this.width, this.height - this._titleHeight, this.BackBorders.left, this.BackBorders.right, this.BackBorders.top, this.BackBorders.bottom);
        this._backSprite.bitmap = b;
    }

    RefreshAllParts() {
        this.RefreshTexturePosition();
        this.RefreshContent();
    }

    RefreshTexturePosition() {
        this.OnTitleTextureLoaded();
        this.OnBackTextureLoaded();
    }

    RefreshContent() {
        this._contentSprite.bitmap = new Bitmap(this.contentWidth, this.contentHeight);
        this._contentSprite.move(this.paddings.left, this._titleHeight + this.paddings.top);
    }
}