lyb-pixi-js 1.12.33 → 1.12.34

package/Components/Custom/LibPixiDragLocate.js

@@ -0,0 +1,230 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,59 @@
+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/LibPixiGridLayoutV2.d.ts

@@ -0,0 +1,27 @@
+export interface GridLayoutParams {
+    /** 列数 */
+    colNum?: number;
+    /** 列间隔 */
+    colGap?: number;
+    /** 行间隔 */
+    rowGap?: number;
+    /** 元素列表 */
+    elementList?: any[];
+}
+import { Container } from "pixi.js";
+/** @description 网格布局 */
+export declare class LibPixiGridLayoutV2<T extends Container> extends Container {
+    /** 参数 */
+    private _params;
+    /** 元素列表 */
+    private _elementList;
+    constructor(params?: GridLayoutParams);
+    /** @description 追加元素 */
+    push(element: T): void;
+    /** @description 布局 */
+    layout(): void;
+    /** @description 获取列表元素 */
+    getList(): T[];
+    /** @description 销毁列表元素 */
+    destroyList(): void;
+}

package/Components/Custom/LibPixiGridLayoutV2.js

@@ -0,0 +1,37 @@
+import { Container } from "pixi.js";
+/** @description 网格布局 */
+export class LibPixiGridLayoutV2 extends Container {
+    constructor(params) {
+        super();
+        /** 元素列表 */
+        this._elementList = [];
+        this._params = params || {};
+        this._elementList = this._params.elementList || [];
+    }
+    /** @description 追加元素 */
+    push(element) {
+        this.addChild(element);
+        this._elementList.push(element);
+    }
+    /** @description 布局 */
+    layout() {
+        const { colNum = this._elementList.length, colGap = 325, rowGap = 75, } = this._params;
+        this._elementList.forEach((item, index) => {
+            const col = index % colNum;
+            const row = Math.floor(index / colNum);
+            item.x = col * colGap;
+            item.y = row * rowGap;
+        });
+    }
+    /** @description 获取列表元素 */
+    getList() {
+        return this._elementList;
+    }
+    /** @description 销毁列表元素 */
+    destroyList() {
+        this._elementList.forEach((item) => {
+            item.destroy();
+        });
+        this._elementList = [];
+    }
+}

package/Components/Custom/LibPixiInput.d.ts

@@ -0,0 +1,77 @@
+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;
+    /** @description 设置输入框类型 */
+    toggleType(type: "text" | "password"): void;
+}
+export {};

package/Components/Custom/LibPixiInput.js

@@ -0,0 +1,198 @@
+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 (["text", "password"].includes(type))
+                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, type = "text" } = this._params;
+        const value = v;
+        this._value = value;
+        if (type === "password") {
+            this._readonlyInput.text =
+                (onFormatValue === null || onFormatValue === void 0 ? void 0 : onFormatValue(value)) || "●".repeat(value.length);
+        }
+        else {
+            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-weight: ${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)`;
+        }
+    }
+    /** @description 设置输入框类型 */
+    toggleType(type) {
+        this._input.type = type;
+        this._params.type = type;
+        this.setValue(this._value);
+    }
+}

package/Components/Custom/LibPixiLabelValue.d.ts

@@ -0,0 +1,30 @@
+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 {};