lyb-pixi-js 1.12.31 → 1.12.33

package/Components/Custom/LibPixiCloseBtn.js

@@ -1,36 +0,0 @@
-import gsap from "gsap";
-import { libPixiEvent } from "../../Utils/LibPixiEvent";
-import { LibPixiContainer } from "../Base/LibPixiContainer";
-/** @description 右上角关闭按钮，支持悬浮旋转动画
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiCloseBtn-关闭按钮
- */
-export class LibPixiCloseBtn extends LibPixiContainer {
-    constructor(params) {
-        const { sprite, onClick } = params;
-        super(sprite.width, sprite.height);
-        this.addChild(sprite);
-        sprite.anchor.set(0.5);
-        sprite.x = sprite.width / 2;
-        sprite.y = sprite.height / 2;
-        libPixiEvent(this, "pointerenter", () => {
-            gsap.to(sprite, {
-                duration: 0.25,
-                rotation: 180 * (Math.PI / 180),
-            });
-        });
-        const offLeave = libPixiEvent(this, "pointerleave", () => {
-            sprite.alpha = 1;
-            gsap.to(sprite, {
-                duration: 0.25,
-                rotation: 0,
-            });
-        });
-        libPixiEvent(this, "pointerdown", () => {
-            sprite.alpha = 0.5;
-        });
-        libPixiEvent(this, "pointertap", () => {
-            onClick();
-            offLeave();
-        });
-    }
-}

package/Components/Custom/LibPixiDragLocate.d.ts

@@ -1,36 +0,0 @@
-import { Container } from "pixi.js";
-/** @description 元素拖拽定位 */
-export declare class LibPixiDragLocate extends Container {
-    static stage: Container;
-    /** 输入框 */
-    private _inputEl;
-    /** 搜索结果 */
-    private _resultEl;
-    /** 状态栏元素 */
-    private _statusBarEl;
-    /** 坐标元素 */
-    private _positionEl;
-    /** 当前坐标值 */
-    private _positionValue;
-    /** 是否处于定位状态 */
-    private _isLocalte;
-    /** 是否显示输入框 */
-    private _showInput;
-    /** 是否允许移动 */
-    private _allowMove;
-    /** 按下坐标 */
-    private _downPos;
-    /** 当前处于移动的元素 */
-    private _currentMoveContainer?;
-    constructor();
-    /** @description 创建输入框 */
-    private _createInput;
-    /** @description 创建用于展示搜索结果的列表 */
-    private _createResultList;
-    /** @description 创建搜索结果元素 */
-    private _createResultEl;
-    /** @description 创建状态栏 */
-    private _createStatusBar;
-    /** @description 递归搜索 */
-    private _findByName;
-}

package/Components/Custom/LibPixiDragLocate.js

@@ -1,230 +0,0 @@
-import { Container, Ticker } from "pixi.js";
-import gsap from "gsap";
-import { libPixiFilter } from "../../Utils/LibPixiFilter";
-import { libJsCopy } from "lyb-js/Browser/LibJsCopy.js";
-/** @description 元素拖拽定位 */
-export class LibPixiDragLocate extends Container {
-    constructor() {
-        super();
-        /** 当前坐标值 */
-        this._positionValue = "";
-        /** 是否处于定位状态 */
-        this._isLocalte = false;
-        /** 是否显示输入框 */
-        this._showInput = false;
-        /** 是否允许移动 */
-        this._allowMove = false;
-        /** 按下坐标 */
-        this._downPos = { x: 0, y: 0 };
-        window.addEventListener("keydown", (e) => {
-            if (e.ctrlKey && e.key.toLowerCase() === "q" && e.shiftKey) {
-                e.preventDefault();
-                if (this._isLocalte)
-                    return;
-                this._showInput = !this._showInput;
-            }
-            if (e.key === "Escape") {
-                this._showInput = false;
-            }
-        });
-        this._createInput();
-        this._createResultList();
-        this._createStatusBar();
-        LibPixiDragLocate.stage.on("pointerdown", (event) => {
-            if (!this._currentMoveContainer)
-                return;
-            this._allowMove = true;
-            const { x, y } = LibPixiDragLocate.stage.toLocal(event.global);
-            this._downPos = { x, y };
-        });
-        LibPixiDragLocate.stage.on("pointermove", (event) => {
-            if (!this._allowMove || !this._currentMoveContainer)
-                return;
-            const { x, y } = LibPixiDragLocate.stage.toLocal(event.global);
-            const dx = x - this._downPos.x;
-            const dy = y - this._downPos.y;
-            this._currentMoveContainer.x += dx;
-            this._currentMoveContainer.y += dy;
-            this._downPos = { x, y };
-            const posX = Math.round(this._currentMoveContainer.x);
-            const posY = Math.round(this._currentMoveContainer.y);
-            this._positionEl.textContent = `X: ${posX}, Y: ${posY}`;
-            this._positionValue = `xxx.position.set(${posX}, ${posY})`;
-        });
-        LibPixiDragLocate.stage.on("pointerup", () => {
-            this._allowMove = false;
-        }, this);
-        Ticker.shared.add(() => {
-            if (this._showInput) {
-                if (this._isLocalte) {
-                    this._inputEl.style.display = "none";
-                    this._resultEl.style.display = "none";
-                    this._statusBarEl.style.display = "flex";
-                }
-                else {
-                    this._inputEl.style.display = "block";
-                    this._resultEl.style.display = "flex";
-                    this._statusBarEl.style.display = "none";
-                    this._inputEl.focus();
-                }
-            }
-            else {
-                this._inputEl.style.display = "none";
-                this._resultEl.style.display = "none";
-            }
-        });
-    }
-    /** @description 创建输入框 */
-    _createInput() {
-        this._inputEl = document.createElement("input");
-        this._inputEl.type = "text";
-        this._inputEl.style.cssText = `
-      background-color: rgba(0,0,0,0.75);
-      border: 2px solid rgba(255,255,255,0.5);
-      color: #fff;
-      display: none;
-      font-size: 25px;
-      height: 50px;
-      left: 50%;
-      outline: none;
-      position: fixed;
-      text-align: center;
-      top: 25%;
-      transform: translate(-50%, -50%);
-      width: 50vw;
-    `;
-        document.body.appendChild(this._inputEl);
-        this._inputEl.addEventListener("input", () => {
-            const results = this._findByName(LibPixiDragLocate.stage, this._inputEl.value);
-            //创建搜索结果列表
-            this._resultEl.innerHTML = "";
-            const renderNode = (item) => {
-                const resultEl = this._createResultEl(item.node.constructor.name, item.node.name, item.depth);
-                this._resultEl.appendChild(resultEl);
-                gsap.killTweensOf(item.node);
-                //悬浮结果列表元素闪烁
-                resultEl.addEventListener("mouseenter", () => {
-                    gsap.to(item.node, {
-                        alpha: 0,
-                        duration: 0.25,
-                        yoyo: true,
-                        ease: "none",
-                        repeat: -1,
-                    });
-                });
-                //离开结果后停止闪烁
-                resultEl.addEventListener("mouseleave", () => {
-                    gsap.killTweensOf(item.node);
-                    item.node.alpha = 1;
-                });
-                resultEl.addEventListener("click", () => {
-                    gsap.killTweensOf(item.node);
-                    this._currentMoveContainer = item.node;
-                    item.node.alpha = 1;
-                    item.node.filters = [libPixiFilter("desaturate", 0)];
-                    this._isLocalte = true;
-                });
-                item.children.forEach(renderNode);
-            };
-            results.forEach(renderNode);
-        });
-    }
-    /** @description 创建用于展示搜索结果的列表 */
-    _createResultList() {
-        this._resultEl = document.createElement("div");
-        this._resultEl.style.cssText = `
-      background-color: rgba(0,0,0,0.75);
-      border: 2px solid rgba(255,255,255,0.5);
-      left: 50%;
-      transform: translateX(-50%);
-      height: 300px;
-      overflow-y: auto;
-      position: fixed;
-      display: none;
-      gap: 10px;
-      flex-direction: column;
-      top: calc(25% + 50px);
-      width: 50vw;
-    `;
-        document.body.appendChild(this._resultEl);
-    }
-    /** @description 创建搜索结果元素 */
-    _createResultEl(className, tagName, depth) {
-        const resultItem = document.createElement("div");
-        resultItem.style.cssText = `
-      display: flex;
-      justify-content: space-between;
-      padding: 5px 10px;
-      align-items: center;
-      width: 100%;
-      font-size: 25px;
-      background-color: rgba(255,255,255,0.1);
-      color: #fff;
-      padding-left: ${depth * 20}px;
-    `;
-        const classNameEl = document.createElement("div");
-        classNameEl.textContent = className;
-        resultItem.appendChild(classNameEl);
-        const tagNameEl = document.createElement("div");
-        tagNameEl.textContent = tagName;
-        resultItem.appendChild(tagNameEl);
-        return resultItem;
-    }
-    /** @description 创建状态栏 */
-    _createStatusBar() {
-        this._statusBarEl = document.createElement("div");
-        this._statusBarEl.style.cssText = `
-      align-items: center;
-      background-color: rgba(0,0,0,0.75);
-      border: 2px solid rgba(0, 255, 13, 0.5);
-      color: #fff;
-      display: none;
-      font-size: 25px;
-      justify-content: center;
-      position: fixed;
-      top: 25%;
-      height: 50px;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 50vw;
-    `;
-        this._positionEl = document.createElement("div");
-        this._statusBarEl.appendChild(this._positionEl);
-        document.body.appendChild(this._statusBarEl);
-        this._statusBarEl.addEventListener("click", () => {
-            this._isLocalte = false;
-            libJsCopy(this._positionValue);
-            if (this._currentMoveContainer) {
-                this._currentMoveContainer.filters = [];
-                this._currentMoveContainer = undefined;
-            }
-        });
-    }
-    /** @description 递归搜索 */
-    _findByName(root, keyword) {
-        if (!keyword)
-            return [];
-        const match = (node) => {
-            var _a;
-            return ((_a = node.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(keyword.toLowerCase())) ||
-                node.constructor.name.toLowerCase().includes(keyword.toLowerCase());
-        };
-        const dfs = (node, depth) => {
-            const children = node.children
-                .filter((c) => c instanceof Container)
-                .flatMap((c) => dfs(c, depth + 1));
-            if (match(node) || children.length > 0) {
-                return [
-                    {
-                        node,
-                        depth,
-                        children,
-                        expanded: true,
-                    },
-                ];
-            }
-            return [];
-        };
-        return dfs(root, 0);
-    }
-}

package/Components/Custom/LibPixiDrawer.d.ts

@@ -1,16 +0,0 @@
-import { Container } from "pixi.js";
-/** @description 底部弹出抽屉
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiDrawer-抽屉
- */
-export declare class LibPixiDrawer extends Container {
-    /** 蒙版UI */
-    private _maskUI;
-    /** 抽屉容器 */
-    private _drawerContainer;
-    /**
-     * @param content 抽屉内容
-     */
-    constructor(content: Container);
-    /** @description 关闭 */
-    close(): Promise<void>;
-}

package/Components/Custom/LibPixiDrawer.js

@@ -1,59 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { Container } from "pixi.js";
-import gsap from "gsap";
-import { LibPixiRectBgColor } from '../Base/LibPixiRectBgColor';
-/** @description 底部弹出抽屉
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiDrawer-抽屉
- */
-export class LibPixiDrawer extends Container {
-    /**
-     * @param content 抽屉内容
-     */
-    constructor(content) {
-        super();
-        //蒙版
-        this._maskUI = new LibPixiRectBgColor({
-            bgColor: "#000",
-            width: 1080,
-            height: 1920,
-        });
-        this.addChild(this._maskUI);
-        this._maskUI.alpha = 0;
-        this._maskUI.eventMode = "static";
-        //弹窗内容容器
-        this._drawerContainer = content;
-        this.addChild(this._drawerContainer);
-        this._drawerContainer.y = this._maskUI.height;
-        gsap.to(this._maskUI, {
-            duration: 0.25,
-            alpha: 0.5,
-        });
-        gsap.to(this._drawerContainer, {
-            duration: 0.25,
-            ease: "power1.out",
-            y: this._maskUI.height - this._drawerContainer.height,
-        });
-    }
-    /** @description 关闭 */
-    close() {
-        return __awaiter(this, void 0, void 0, function* () {
-            gsap.to(this._drawerContainer, {
-                duration: 0.25,
-                y: this._maskUI.height,
-            });
-            yield gsap.to(this._maskUI, {
-                duration: 0.25,
-                delay: 0.125,
-                alpha: 0,
-            });
-        });
-    }
-}

package/Components/Custom/LibPixiInput.d.ts

@@ -1,75 +0,0 @@
-import { Container } from "pixi.js";
-import { LibPixiContainer } from "../Base/LibPixiContainer";
-interface Params {
-    /** 宽度 */
-    width: number;
-    /** 高度 */
-    height: number;
-    /** 字体与高度比 */
-    fontSizeRatio: number;
-    /** 使用字体 */
-    fontFamily?: string;
-    /** 是否加粗 */
-    bold?: boolean;
-    /** 是否需要placeholder */
-    placeholder?: string;
-    /** placeholder颜色 */
-    placeholderColor?: string;
-    /** 背景色，用于调试输入框的位置 */
-    bgColor?: string;
-    /** 输入类型 */
-    type?: "number" | "text" | "password";
-    /** 字体颜色 */
-    color?: string;
-    /** 初始值 */
-    value?: string;
-    /** 是否整数 */
-    integer?: boolean;
-    /** 是否允许输入负数 */
-    isNegative?: boolean;
-    /** 最小值 */
-    min?: number;
-    /** 最大值 */
-    max?: number;
-    /** 最大长度 */
-    maxLength?: number;
-    /** 对齐方式 */
-    align?: "left" | "center";
-    /** 输入回调 */
-    onInput?: (text: number | string) => void;
-    /** 失去焦点回调 */
-    onValue?: (text: number | string) => void;
-    /** 格式化显示值 */
-    onFormatValue?: (text: number | string) => string;
-}
-/** @description 动态缩放移动输入框 */
-export declare class LibPixiInput extends LibPixiContainer {
-    /** 舞台 */
-    static stage: Container;
-    /** 参数 */
-    private _params;
-    /** 只读输入框 */
-    private _readonlyInput;
-    /** placeholder */
-    private _placeholder;
-    /** 输入框dom */
-    private _input;
-    /** 当前输入的值 */
-    private _value;
-    constructor(params: Params);
-    /** @description 设置值 */
-    setValue(v: string): void;
-    /** @description 创建输入框 */
-    private _createInput;
-    /** @description 创建只读输入框 */
-    private _createReadOnlyInput;
-    /** @description 聚焦 */
-    private _focus;
-    /** @description 失焦 */
-    private _blur;
-    /** @description 失去焦点处理 */
-    private _onBlurHandler;
-    /** @description 实时更新输入框位置 */
-    private _updateInputPosition;
-}
-export {};

package/Components/Custom/LibPixiInput.js

@@ -1,186 +0,0 @@
-import { Ticker } from "pixi.js";
-import Decimal from "decimal.js";
-import { libPixiEvent } from "../../Utils/LibPixiEvent";
-import { libPixiScaleContainer } from "../../Utils/LibPixiScaleContainer";
-import { LibPixiContainer } from "../Base/LibPixiContainer";
-import { LibPixiText } from "../Base/LibPixiText";
-/** @description 动态缩放移动输入框 */
-export class LibPixiInput extends LibPixiContainer {
-    constructor(params) {
-        const { width, height, bgColor, value = "" } = params;
-        super(width, height, bgColor);
-        /** 当前输入的值 */
-        this._value = "";
-        /** @description 失去焦点处理 */
-        this._onBlurHandler = () => {
-            const { type = "text", integer = false, min = 1, max = Infinity, } = this._params;
-            let text = this._input.value.trim();
-            //如果类型为字符串，则不参与校验
-            if (type === "text")
-                return text;
-            //如果为空，则使用最小值
-            if (this._input.value === "")
-                text = min.toString();
-            //如果不能为负数，输入值小于最小值，则使用最小值
-            if (Number(text) < min)
-                text = min.toString();
-            //如果存在最大值，且输入值大于最大值，则使用最大值
-            if (max && Number(text) > max)
-                text = max.toString();
-            //如果要求整数，则取整
-            if (integer)
-                text = parseInt(text).toString();
-            //保留两位小数且不四舍五入
-            const value = new Decimal(Number(text));
-            text = value.toFixed(2, Decimal.ROUND_DOWN);
-            return text;
-        };
-        this.cursor = "text";
-        this._params = params;
-        this._value = value;
-        this._createInput();
-        this._createReadOnlyInput();
-        //聚焦
-        libPixiEvent(this, "pointertap", this._focus.bind(this));
-        const ticker = new Ticker();
-        ticker.add(() => {
-            if (this.destroyed) {
-                ticker.stop();
-                return;
-            }
-            this._updateInputPosition();
-        });
-        ticker.start();
-    }
-    /** @description 设置值 */
-    setValue(v) {
-        const { onFormatValue } = this._params;
-        const value = v;
-        this._value = value;
-        this._readonlyInput.text = (onFormatValue === null || onFormatValue === void 0 ? void 0 : onFormatValue(value)) || value;
-    }
-    /** @description 创建输入框 */
-    _createInput() {
-        const { color = "#fff", maxLength = 999999, align = "left", type = "text", onInput = () => { }, fontFamily = "", bold = false, } = this._params;
-        this._input = document.createElement("input");
-        this._input.type = type;
-        this._input.maxLength = maxLength;
-        this._input.style.cssText = `
-      position: absolute;
-      border: none;
-      outline: none;
-      display: none;
-      background-color: transparent;
-      color: ${color};
-      text-align: ${align};
-      font-family: ${fontFamily};
-      font-bold: ${bold ? "bold" : "normal"}
-      `;
-        document.querySelector("#game").appendChild(this._input);
-        this._input.addEventListener("input", function () {
-            if (this.value.length > maxLength && type === "number") {
-                this.value = this.value.slice(0, maxLength);
-            }
-            onInput(this.value.trim());
-        });
-        this._input.addEventListener("paste", function (e) {
-            var _a, _b;
-            const paste = (_b = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData("text")) !== null && _b !== void 0 ? _b : "";
-            if (paste.length > maxLength) {
-                e.preventDefault();
-                this.value = paste.slice(0, maxLength);
-            }
-        });
-        this._input.addEventListener("blur", this._blur.bind(this));
-    }
-    /** @description 创建只读输入框 */
-    _createReadOnlyInput() {
-        const { color = "#fff", value = "", width, height, fontSizeRatio = 0.5, align = "left", placeholder = "", placeholderColor, fontFamily = "", bold = false, } = this._params;
-        //创建描述
-        this._placeholder = new LibPixiText({
-            text: placeholder,
-            fontColor: placeholderColor,
-            fontSize: height * fontSizeRatio,
-            fontFamily,
-            fontWeight: bold ? "bold" : "normal",
-        });
-        this.addChild(this._placeholder);
-        this._placeholder.visible = !value;
-        this._placeholder.anchor.set(align === "left" ? 0 : 0.5, 0.5);
-        this._placeholder.position.set(align === "left" ? 0 : width / 2, height / 2);
-        //创建实际显示的文本
-        this._readonlyInput = new LibPixiText({
-            text: value,
-            fontColor: color,
-            fontSize: height * fontSizeRatio,
-            fontFamily,
-            fontWeight: bold ? "bold" : "normal",
-        });
-        this.addChild(this._readonlyInput);
-        this._readonlyInput.visible = !!value;
-        this._readonlyInput.anchor.set(align === "left" ? 0 : 0.5, 0.5);
-        this._readonlyInput.position.set(align === "left" ? 0 : width / 2, height / 2);
-    }
-    /** @description 聚焦 */
-    _focus() {
-        const { type } = this._params;
-        this._input.style.display = "block";
-        this._input.focus();
-        this._readonlyInput.visible = false;
-        this._placeholder.visible = false;
-        if (type === "number") {
-            this._input.value = this._value && Number(this._value).toString();
-        }
-        else {
-            this._input.value = this._value;
-        }
-    }
-    /** @description 失焦 */
-    _blur() {
-        const { onValue, width } = this._params;
-        const value = this._onBlurHandler();
-        this.setValue(value);
-        this._input.style.display = "none";
-        libPixiScaleContainer(this._readonlyInput, width);
-        if (this._params.type === "number") {
-            this._readonlyInput.visible = true;
-            onValue === null || onValue === void 0 ? void 0 : onValue(Number(value));
-        }
-        else {
-            onValue === null || onValue === void 0 ? void 0 : onValue(value);
-            //如果输入的值为空，并且启用了描述，并且没有默认值，则显示描述
-            if (value === "" && this._placeholder) {
-                this._placeholder.visible = true;
-            }
-            else {
-                this._readonlyInput.visible = true;
-            }
-        }
-    }
-    /** @description 实时更新输入框位置 */
-    _updateInputPosition() {
-        const { width, height, x, y } = this.getBounds();
-        const { fontSizeRatio = 0.5 } = this._params;
-        this._input.style.width = `${width}px`;
-        this._input.style.height = `${height}px`;
-        this._input.style.fontSize = `${height * fontSizeRatio}px`;
-        if (LibPixiInput.stage.rotation === 0) {
-            this._input.style.left = `${x}px`;
-            this._input.style.top = `${y}px`;
-            this._input.style.width = `${width}px`;
-            this._input.style.height = `${height}px`;
-            this._input.style.fontSize = `${height * fontSizeRatio}px`;
-            this._input.style.transform = `rotate(0deg)`;
-        }
-        else {
-            const centerX = x + width / 2;
-            const centerY = y + height / 2;
-            this._input.style.left = `${centerX - height / 2}px`;
-            this._input.style.top = `${centerY - width / 2}px`;
-            this._input.style.width = `${height}px`;
-            this._input.style.height = `${width}px`;
-            this._input.style.fontSize = `${width * fontSizeRatio}px`;
-            this._input.style.transform = `rotate(90deg)`;
-        }
-    }
-}

package/Components/Custom/LibPixiLabelValue.d.ts

@@ -1,30 +0,0 @@
-import { BitmapText, Container, Sprite } from "pixi.js";
-import { LibPixiText } from "../Base/LibPixiText";
-type T = Sprite | LibPixiText | BitmapText;
-interface LabelValueParams {
-    /** 描述 */
-    label: T;
-    /** 值 */
-    value: T;
-    /** 最大宽度 */
-    maxWidth?: number;
-    /** 间隔 */
-    gap?: number;
-}
-/** @description 自适应宽度的标签和值组件
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiLabelValue-标签值
- */
-export declare class LibPixiLabelValue extends Container {
-    /** 描述 */
-    private _label;
-    /** 值 */
-    private _value;
-    /** 间隔 */
-    private _gap;
-    /** 最大宽度 */
-    private _maxWidth?;
-    constructor(params: LabelValueParams);
-    /** @description 更新坐标 */
-    updatePosition(): void;
-}
-export {};