lyb-pixi-js 1.12.31 → 1.12.33

package/Components/Custom/LibPixiLabelValue.js

@@ -1,26 +0,0 @@
-import { Container } from "pixi.js";
-import { libPixiScaleContainer } from "../../Utils/LibPixiScaleContainer";
-/** @description 自适应宽度的标签和值组件
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiLabelValue-标签值
- */
-export class LibPixiLabelValue extends Container {
-    constructor(params) {
-        super();
-        const { label, value, maxWidth, gap = 0 } = params;
-        this._label = label;
-        this._value = value;
-        this._maxWidth = maxWidth;
-        this._gap = gap;
-        this.addChild(this._label);
-        this._label.anchor.set(1, 0.5);
-        this.addChild(this._value);
-        this._value.anchor.set(0.5);
-        this.updatePosition();
-    }
-    /** @description 更新坐标 */
-    updatePosition() {
-        this._label.x = this._label.width * 0.5 - this._value.width * 0.5;
-        this._value.x = this._label.width * 0.5 + this._gap;
-        this._maxWidth && libPixiScaleContainer(this, this._maxWidth);
-    }
-}

package/Components/Custom/LibPixiPerforMon.d.ts

@@ -1,47 +0,0 @@
-import { type Application, Container } from "pixi.js";
-/** @description 监视帧率、Draw Call、Max Draw Call
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPerforMon-性能监视器
- */
-export declare class LibPixiPerforMon extends Container {
-    /** 当前适配模式 */
-    static ADAPT_MODE: "h" | "v" | "hv";
-    /** 数据收集时间间隔 (5秒) */
-    private readonly COLLECT_TIME;
-    /** 当前时间 */
-    private _nowTime;
-    /** 上次更新的时间 */
-    private _lastTime;
-    /** 当前绘制调用次数 */
-    private _drawCount;
-    /** 最大绘制调用次数 */
-    private _maxDrawCount;
-    /** 临时最大绘制调用次数 */
-    private _tempMaxDrawCount;
-    /** 上次收集数据的时间 */
-    private _lastCollectTime;
-    /** 整体宽度 */
-    private _containerWidth;
-    /** 整体高度 */
-    private _containerHeight;
-    /** 渲染器 */
-    private _renderer;
-    /** 原始的 drawElements 方法 */
-    private _drawElements;
-    /** 背景 */
-    private _bg;
-    /** FPS文本 */
-    private _fpsText;
-    /** Draw Call文本 */
-    private _drawCallText;
-    /** Max Draw Call文本 */
-    private _maxDrawCallText;
-    constructor(app: Application);
-    /** @description 初始化显示性能数据 */
-    init(): void;
-    /** @description 更新文本信息 */
-    private _setTextInfo;
-    /** @description 获取FPS颜色 */
-    getFpsColor(v: number): string;
-    /** @description 获取Draw Call颜色 */
-    getDrawCallColor(v: number): string;
-}

package/Components/Custom/LibPixiPerforMon.js

@@ -1,166 +0,0 @@
-import { LibJsResizeWatcher } from "lyb-js/Base/LibJsResizeWatcher.js";
-import { Container, Ticker, UPDATE_PRIORITY, } from "pixi.js";
-import { LibPixiRectangle } from "../Base/LibPixiRectangle";
-import { LibPixiText } from "../Base/LibPixiText";
-/** @description 监视帧率、Draw Call、Max Draw Call
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPerforMon-性能监视器
- */
-export class LibPixiPerforMon extends Container {
-    constructor(app) {
-        super();
-        /** 数据收集时间间隔 (5秒) */
-        this.COLLECT_TIME = 5 * 1000;
-        /** 当前时间 */
-        this._nowTime = 0;
-        /** 上次更新的时间 */
-        this._lastTime = 0;
-        /** 当前绘制调用次数 */
-        this._drawCount = 0;
-        /** 最大绘制调用次数 */
-        this._maxDrawCount = 0;
-        /** 临时最大绘制调用次数 */
-        this._tempMaxDrawCount = 0;
-        /** 上次收集数据的时间 */
-        this._lastCollectTime = 0;
-        /** 整体宽度 */
-        this._containerWidth = 590;
-        /** 整体高度 */
-        this._containerHeight = 50;
-        this.pivot.x = this._containerWidth / 2;
-        //创建背景
-        this._bg = new LibPixiRectangle(this._containerWidth, this._containerHeight, "#0000007e");
-        this.addChild(this._bg);
-        //创建内容容器
-        const content = new Container();
-        this.addChild(content);
-        content.x = 25;
-        content.y = this._containerHeight / 2;
-        //创建FPS文本
-        this._fpsText = new TextBox("FPS");
-        content.addChild(this._fpsText);
-        //创建Draw Call文本
-        this._drawCallText = new TextBox("Draw Call");
-        content.addChild(this._drawCallText);
-        this._drawCallText.x = 125;
-        //创建Max Draw Call文本
-        this._maxDrawCallText = new TextBox("Max Draw Call");
-        content.addChild(this._maxDrawCallText);
-        this._maxDrawCallText.x = 320;
-        this._renderer = app.renderer;
-        this._drawElements = this._renderer["gl"].drawElements;
-        this.init();
-        if (LibPixiPerforMon.ADAPT_MODE === "h") {
-            this.x = 1920 / 2;
-        }
-        else if (LibPixiPerforMon.ADAPT_MODE === "v") {
-            this.x = 1080 / 2;
-        }
-        else {
-            const resize = new LibJsResizeWatcher();
-            resize.on((w, h) => {
-                if (w > h) {
-                    this.x = 1920 / 2;
-                }
-                else {
-                    this.x = 1080 / 2;
-                }
-            });
-        }
-    }
-    /** @description 初始化显示性能数据 */
-    init() {
-        this._renderer["gl"].drawElements = (...args) => {
-            this._drawElements.call(this._renderer["gl"], ...args);
-            this._drawCount++;
-        };
-        Ticker.shared.add(() => {
-            const fps = Ticker.system.FPS;
-            this._nowTime = performance.now();
-            if (this._nowTime - this._lastTime >= 100.0) {
-                this._setTextInfo("fps", Number(Math.floor(fps).toFixed(0)));
-                this._lastTime = this._nowTime;
-            }
-            if (this._nowTime - this._lastCollectTime < this.COLLECT_TIME) {
-                if (this._tempMaxDrawCount < this._drawCount) {
-                    this._tempMaxDrawCount = this._drawCount;
-                }
-            }
-            else {
-                this._maxDrawCount = this._tempMaxDrawCount;
-                this._tempMaxDrawCount = 0;
-                this._lastCollectTime = this._nowTime;
-            }
-            this._setTextInfo("drawCall", this._drawCount);
-            this._setTextInfo("maxDrawCall", this._maxDrawCount);
-            this._drawCount = 0;
-        }, UPDATE_PRIORITY.UTILITY);
-    }
-    /** @description 更新文本信息 */
-    _setTextInfo(p, v) {
-        const textObj = {
-            fps: this._fpsText,
-            drawCall: this._drawCallText,
-            maxDrawCall: this._maxDrawCallText,
-        };
-        const textBox = textObj[p];
-        textBox.updateValue(v);
-        if (p === "fps") {
-            textBox.updateColor(this.getFpsColor(v));
-        }
-        else {
-            textBox.updateColor(this.getDrawCallColor(v));
-        }
-    }
-    /** @description 获取FPS颜色 */
-    getFpsColor(v) {
-        let color = "#00ff04";
-        if (v < 30) {
-            color = "#ffd20a";
-        }
-        if (v < 20) {
-            color = "#ff000d";
-        }
-        return color;
-    }
-    /** @description 获取Draw Call颜色 */
-    getDrawCallColor(v) {
-        let color = "#00ff04";
-        if (v >= 75) {
-            color = "#ffd20a";
-        }
-        if (v >= 100) {
-            color = "#ff000d";
-        }
-        return color;
-    }
-}
-/** 当前适配模式 */
-LibPixiPerforMon.ADAPT_MODE = "hv";
-class TextBox extends Container {
-    constructor(text, fontSize = 26) {
-        super();
-        const label = new LibPixiText({
-            text,
-            fontSize,
-            fontWeight: "bold",
-        });
-        this.addChild(label);
-        label.anchor.y = 0.5;
-        this._valueText = new LibPixiText({
-            text: "0",
-            fontSize,
-            fontWeight: "bold",
-        });
-        this.addChild(this._valueText);
-        this._valueText.anchor.y = 0.5;
-        this._valueText.x = label.width + 10;
-    }
-    /** @description 更改颜色 */
-    updateColor(color) {
-        this._valueText.style.fill = color;
-    }
-    /** @description 设置数值 */
-    updateValue(value) {
-        this._valueText.text = value;
-    }
-}

package/Components/Custom/LibPixiProgress.d.ts

@@ -1,33 +0,0 @@
-import { Container, type Texture } from "pixi.js";
-export interface LibPixiProgressParams {
-    /** 背景宽度 */
-    bgWidth: number;
-    /** 背景高度 */
-    bgHeight: number;
-    /** 进度条宽度 */
-    barWidth: number;
-    /** 进度条高度 */
-    barHeight: number;
-    /** 背景纹理 */
-    bgTexture: Texture;
-    /** 进度条纹理 */
-    barTexture: Texture;
-    /** 方向 */
-    direction?: "h" | "v";
-}
-/** @description 通过裁剪的方式显示进度条
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiProgress-进度条
- */
-export declare class LibPixiProgress extends Container {
-    /** 光条图 */
-    private _progressBar;
-    /** 蒙版 */
-    private _maskGraphics;
-    /** 方向 */
-    private _direction;
-    constructor(params: LibPixiProgressParams);
-    /** @description 更新进度
-     * @param progress 进度值，范围从0到1
-     */
-    setProgress(progress: number): void;
-}

package/Components/Custom/LibPixiProgress.js

@@ -1,47 +0,0 @@
-import { Container, Graphics, Sprite } from "pixi.js";
-/** @description 通过裁剪的方式显示进度条
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiProgress-进度条
- */
-export class LibPixiProgress extends Container {
-    constructor(params) {
-        super();
-        const { bgWidth, bgHeight, barWidth, barHeight, bgTexture, barTexture, direction } = params;
-        this._direction = direction || "h";
-        // 背景图
-        const background = new Sprite(bgTexture);
-        this.addChild(background);
-        // 光条图
-        this._progressBar = new Sprite(barTexture);
-        this.addChild(this._progressBar);
-        this._progressBar.x = (bgWidth - barWidth) / 2;
-        this._progressBar.y = (bgHeight - barHeight) / 2;
-        // 创建蒙版
-        const mask = new Graphics();
-        mask.beginFill(0xffffff);
-        if (direction === "h") {
-            mask.drawRect(0, 0, 0, this._progressBar.height);
-        }
-        else {
-            mask.drawRect(0, 0, this._progressBar.width, 0);
-        }
-        mask.endFill();
-        this._progressBar.addChild(mask);
-        this._progressBar.mask = mask;
-        this._maskGraphics = mask;
-    }
-    /** @description 更新进度
-     * @param progress 进度值，范围从0到1
-     */
-    setProgress(progress) {
-        const clampedProgress = Math.max(0, Math.min(1, progress));
-        this._maskGraphics.clear();
-        this._maskGraphics.beginFill(0xffffff);
-        if (this._direction === "h") {
-            this._maskGraphics.drawRect(0, 0, this._progressBar.width * clampedProgress, this._progressBar.height);
-        }
-        else {
-            this._maskGraphics.drawRect(0, this._progressBar.height * (1 - clampedProgress), this._progressBar.width, this._progressBar.height * clampedProgress);
-        }
-        this._maskGraphics.endFill();
-    }
-}

package/Components/Custom/LibPixiPuzzleBg.d.ts

@@ -1,7 +0,0 @@
-import { Container, Texture } from "pixi.js";
-/** @description 设计图背景拼接
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPuzzleBg-设计图背景拼接
- */
-export declare class LibPixiPuzzleBg extends Container {
-    constructor(texture: Texture);
-}

package/Components/Custom/LibPixiPuzzleBg.js

@@ -1,46 +0,0 @@
-import { libJsDecimal } from "lyb-js/Math/LibJsDecimal.js";
-import { Container, Sprite } from "pixi.js";
-/** @description 设计图背景拼接
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPuzzleBg-设计图背景拼接
- */
-export class LibPixiPuzzleBg extends Container {
-    constructor(texture) {
-        super();
-        this.eventMode = "none";
-        // 背景
-        const bg = new Sprite(texture);
-        this.addChild(bg);
-        bg.visible = false;
-        //读取配置
-        const config = JSON.parse(localStorage.getItem("puzzle_bg_config") || "{}");
-        const { alpha, x, y } = config;
-        bg.alpha = alpha || 0.25;
-        bg.position.set(x || 0, y || 0);
-        //监听鼠标空格事件
-        document.addEventListener("keydown", (e) => {
-            if (e.ctrlKey && e.key.toLowerCase() === "q" && !e.shiftKey) {
-                e.preventDefault();
-                bg.visible = !bg.visible;
-            }
-            else if (e.code === "ArrowUp") {
-                bg.y -= 2;
-            }
-            else if (e.code === "ArrowDown") {
-                bg.y += 2;
-            }
-            else if (e.code === "ArrowLeft") {
-                bg.x -= 2;
-            }
-            else if (e.code === "ArrowRight") {
-                bg.x += 2;
-            }
-            if (e.code === "NumpadAdd" && bg.alpha < 1) {
-                bg.alpha = libJsDecimal(bg.alpha, 0.1, "+");
-            }
-            else if (e.code === "NumpadSubtract" && bg.alpha > 0) {
-                bg.alpha = libJsDecimal(bg.alpha, 0.1, "-");
-            }
-            localStorage.setItem("puzzle_bg_config", JSON.stringify({ alpha: bg.alpha, x: bg.x, y: bg.y }));
-        });
-    }
-}

package/Components/Custom/LibPixiScrollContainerX.d.ts

@@ -1,71 +0,0 @@
-import { Container, Texture } from "pixi.js";
-import { LibPixiContainer } from "../Base/LibPixiContainer";
-export interface LibPixiScrollContainerXParams {
-    /** 宽度 */
-    width: number;
-    /** 高度 */
-    height: number;
-    /** 滚动内容 */
-    scrollContent: Container;
-    /** 背景色，用于定位 */
-    bgColor?: string;
-    /** 自定义遮罩贴图 */
-    maskTexture?: Texture;
-    /** 遮罩X坐标 */
-    maskX?: number;
-    /** 遮罩Y坐标 */
-    maskY?: number;
-}
-/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹 */
-export declare class LibPixiScrollContainerX extends LibPixiContainer {
-    /** 舞台 */
-    static stage: Container;
-    /** 开始位置 */
-    private _startX;
-    /** 惯性速度 */
-    private _velocity;
-    /** 上一次滚动时间 */
-    private _startTime;
-    /** 开始位置 */
-    private _startPosition;
-    /** 滚动速度 */
-    private _scrollSpeed;
-    /** 是否处于拖动状态 */
-    private _isDragging;
-    /** 左边距 */
-    private _leftMargin;
-    /** 右边距元素 */
-    private _rightMarginBox;
-    /** 滚动容器 */
-    _scrollContent: Container;
-    /** 遮罩 */
-    private _maskGraphics;
-    /** 滚动的内容 */
-    private _content;
-    constructor(params: LibPixiScrollContainerXParams);
-    /** @description 添加边距 */
-    addMargin(leftMargin: number, rightMargin?: number): void;
-    /** @description 设置滚动容器可视区宽高
-     * @param width 宽度
-     * @param height 高度
-     */
-    setDimensions(width: number, height: number): void;
-    /** @description 返回顶部 */
-    scrollToTop(): void;
-    /** @description 往滚动内容添加元素 */
-    addContent(container: Container): void;
-    /** @description 更新右边距坐标 */
-    private _updateRightMargin;
-    /** @description 按下 */
-    private _onDragStart;
-    /** @description 拖动 */
-    private _onDragMove;
-    /** @description 拖动结束 */
-    private _onDragEnd;
-    /** @description 滚轮滚动 */
-    private _onWheelScroll;
-    /** @description 惯性动画 */
-    private _applyInertia;
-    /** @description 限制滚动范围 */
-    private _limitScrollRange;
-}

package/Components/Custom/LibPixiScrollContainerX.js

@@ -1,189 +0,0 @@
-import { Container, Sprite, } from "pixi.js";
-import { gsap } from "gsap";
-import { libPixiEvent } from "../../Utils/LibPixiEvent";
-import { LibPixiContainer } from "../Base/LibPixiContainer";
-import { LibPixiRectangle } from "../Base/LibPixiRectangle";
-/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹 */
-export class LibPixiScrollContainerX extends LibPixiContainer {
-    constructor(params) {
-        const { width, height, scrollContent, bgColor, maskTexture, maskX = 0, maskY = 0, } = params;
-        super(width, height, bgColor);
-        /** 开始位置 */
-        this._startX = 0;
-        /** 惯性速度 */
-        this._velocity = 0;
-        /** 上一次滚动时间 */
-        this._startTime = 0;
-        /** 开始位置 */
-        this._startPosition = 0;
-        /** 滚动速度 */
-        this._scrollSpeed = 200;
-        /** 是否处于拖动状态 */
-        this._isDragging = false;
-        /** 左边距 */
-        this._leftMargin = 0;
-        this._scrollContent = scrollContent;
-        // 创建内容容器
-        this._content = new Container();
-        this.addChild(this._content);
-        this._content.addChild(this._scrollContent);
-        //自定义遮罩
-        if (maskTexture) {
-            this._maskGraphics = new Sprite(maskTexture);
-            this.addChild(this._maskGraphics);
-            this._maskGraphics.width = width;
-            this._maskGraphics.height = height;
-            this._maskGraphics.position.set(maskX, maskY);
-            this.mask = this._maskGraphics;
-        }
-        else {
-            this._maskGraphics = new LibPixiRectangle(width, height, "#000");
-            this.addChild(this._maskGraphics);
-            this.mask = this._maskGraphics;
-        }
-        // 添加事件监听
-        libPixiEvent(this, "pointerdown", (event) => {
-            this._onDragStart(event);
-        });
-        libPixiEvent(LibPixiScrollContainerX.stage, "pointermove", (event) => {
-            this._onDragMove(event);
-        });
-        libPixiEvent(this, "pointerup", () => {
-            this._onDragEnd();
-        });
-        libPixiEvent(this, "wheel", (event) => {
-            this._onWheelScroll(event);
-        });
-        libPixiEvent(this, "pointerupoutside", () => {
-            this._onDragEnd();
-        });
-    }
-    /** @description 添加边距 */
-    addMargin(leftMargin, rightMargin = leftMargin) {
-        this._leftMargin = leftMargin;
-        if (leftMargin) {
-            const leftMarginBox = new Sprite();
-            this._content.addChild(leftMarginBox);
-            leftMarginBox.width = leftMargin;
-            this._scrollContent.x += leftMargin;
-        }
-        if (rightMargin) {
-            this._rightMarginBox = new Sprite();
-            this._content.addChild(this._rightMarginBox);
-            this._rightMarginBox.height = rightMargin;
-            this._rightMarginBox.x = leftMargin + this._scrollContent.width;
-        }
-    }
-    /** @description 设置滚动容器可视区宽高
-     * @param width 宽度
-     * @param height 高度
-     */
-    setDimensions(width, height) {
-        this._maskGraphics.width = width;
-        this._maskGraphics.height = height;
-        this.setSize(width, height);
-        this._updateRightMargin();
-    }
-    /** @description 返回顶部 */
-    scrollToTop() {
-        gsap.killTweensOf(this._content);
-        this._content.x = 0;
-    }
-    /** @description 往滚动内容添加元素 */
-    addContent(container) {
-        this._scrollContent.addChild(container);
-    }
-    /** @description 更新右边距坐标 */
-    _updateRightMargin() {
-        this._rightMarginBox.x = this._leftMargin + this._scrollContent.width;
-    }
-    /** @description 按下 */
-    _onDragStart(event) {
-        if (this._content.width <= this._maskGraphics.width)
-            return;
-        const { x } = event.getLocalPosition(this);
-        this._startX = x - this._content.x;
-        this._isDragging = true;
-        this._velocity = 0;
-        this._startTime = Date.now();
-        this._startPosition = this._content.x;
-        gsap.killTweensOf(this._content);
-    }
-    /** @description 拖动 */
-    _onDragMove(event) {
-        if (this._isDragging) {
-            const { x } = event.getLocalPosition(this);
-            const newPosition = x - this._startX;
-            this._content.x = newPosition;
-        }
-    }
-    /** @description 拖动结束 */
-    _onDragEnd() {
-        this._isDragging = false;
-        const currentTime = Date.now();
-        const deltaTime = currentTime - this._startTime; // 计算停留时间
-        if (deltaTime < 250) {
-            // 如果停留时间在阈值内，计算惯性速度
-            this._velocity = (this._content.x - this._startPosition) / deltaTime;
-            this._applyInertia();
-        }
-        else {
-            // 停留时间超出阈值，取消惯性
-            this._velocity = 0;
-        }
-        this._limitScrollRange();
-    }
-    /** @description 滚轮滚动 */
-    _onWheelScroll(event) {
-        // 如果内容高度小于遮罩高度，则不滚动
-        if (this._content.width <= this._maskGraphics.width)
-            return;
-        let x = this._content.x - event.deltaY * (this._scrollSpeed / 100);
-        if (x > 0) {
-            x = 0;
-        }
-        else if (Math.abs(x) >= this._content.width - this._maskGraphics.width) {
-            x = -(this._content.width - this._maskGraphics.width);
-        }
-        gsap.to(this._content, {
-            duration: 0.25,
-            ease: "power1.out",
-            x,
-        });
-    }
-    /** @description 惯性动画 */
-    _applyInertia() {
-        gsap.to(this._content, {
-            x: this._content.x + this._velocity * 250,
-            duration: 0.5,
-            ease: "power1.out",
-            onUpdate: this._limitScrollRange.bind(this),
-        });
-    }
-    /** @description 限制滚动范围 */
-    _limitScrollRange() {
-        //如果内容顶部离开了滚动容器顶部，则归位
-        if (this._content.x > 0) {
-            //回弹
-            gsap.to(this._content, {
-                duration: 0.2,
-                ease: "power1.out",
-                x: 0,
-            });
-        }
-        // 如果滚动距离大于内容高度减去遮罩高度
-        else if (Math.abs(this._content.x) >=
-            this._content.width - this._maskGraphics.width) {
-            // 如果内容高度大于遮罩高度，则滚动到底部
-            if (this._content.width > this._maskGraphics.width) {
-                //回弹
-                const x = -(this._content.width - this._maskGraphics.width);
-                gsap.to(this._content, {
-                    duration: 0.2,
-                    ease: "power1.out",
-                    x,
-                });
-            }
-        }
-    }
-}