lyb-pixi-js 1.12.39 → 1.12.40

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/LibPixiGridLayoutV2.d.ts

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

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

@@ -1,18 +0,0 @@
-import { Container, type ITextStyle } from "pixi.js";
-interface Params {
-    /** 文本列表 */
-    textList: {
-        type: "h" | "p";
-        text: string;
-        style?: Partial<ITextStyle>;
-    }[];
-    /** 内容宽度 */
-    width: number;
-    /** 默认样式 */
-    defaultStyle?: Partial<ITextStyle>;
-}
-/** @description 标题内容纵向排列 */
-export declare class LibPixiHeadingParagraphLayout extends Container {
-    constructor(params: Params);
-}
-export {};

package/Components/Custom/LibPixiHeadingParagraphLayout.js

@@ -1,27 +0,0 @@
-import { Container, Text } from "pixi.js";
-/** @description 标题内容纵向排列 */
-export class LibPixiHeadingParagraphLayout extends Container {
-    constructor(params) {
-        super();
-        const { textList, width, defaultStyle = {} } = params;
-        const textItemList = [];
-        let lastText;
-        textList.forEach((item, index) => {
-            const text = new Text(item.text, Object.assign(Object.assign({ wordWrap: true, wordWrapWidth: width }, defaultStyle), item.style));
-            this.addChild(text);
-            textItemList.push(text);
-            if (item.type === "h") {
-                text.anchor.x = 0.5;
-                text.x = width / 2;
-                text.style.align = "center";
-            }
-            if (lastText) {
-                text.y = lastText.y + lastText.height + Number(defaultStyle.fontSize) / 2;
-            }
-            if (item.type === "h" && index !== 0) {
-                text.y += Number(defaultStyle.fontSize);
-            }
-            lastText = text;
-        });
-    }
-}

package/Components/Custom/LibPixiInput.d.ts

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