lyb-pixi-js 1.8.6 → 1.8.8

package/Components/Custom/LibPixiScrollContainerY.js

@@ -8,7 +8,7 @@ import { gsap } from "gsap";
  */
 export class LibPixiScrollContainerY extends LibPixiContainer {
     constructor(params) {
-        const { width, height, scrollbar = false, scrollContent, scrollbarRgiht, scrollbarWidth = 10, scrollbarColor = "#F8A500", } = params;
+        const { width, height, scrollbar = false, scrollContent, scrollbarRgiht, scrollbarWidth = 10, scrollbarColor = "#ffffff", } = params;
         super(width, height);
         /** 开始位置 */
         this._startY = 0;

package/Utils/LibPixiDialogManager/index.d.ts

@@ -0,0 +1,28 @@
+import type { Container } from "pixi.js";
+import type { LibPixiBaseContainer } from "./ui/LibPixiBaseContainer";
+export { LibPixiBaseContainer } from "./ui/LibPixiBaseContainer";
+export { LibPixiDialog } from "./ui/LibPixiDialog";
+interface IViewCtor {
+    new (...args: any[]): LibPixiBaseContainer;
+}
+/** @description 基础容器管理器 */
+export declare class LibPixiBaseContainerManager {
+    /** 视图表 */
+    private views;
+    /** 上一次方向 */
+    private lastOrientation;
+    /** open时显示的元素的父容器 */
+    private _openContainer;
+    constructor(parent: Container);
+    /**
+     * 打开界面
+     * @param View 实例类型或构造方法
+     * @param args 实例参数
+     */
+    open<T extends IViewCtor>(View: T, id: string, ...args: ConstructorParameters<T>): InstanceType<T>;
+    /** @description 关闭页面，会调用页面的 onBeforeUnmount 事件，里面会做关闭动画，动画结束后会自动销毁
+     * @param id 页面名称
+     */
+    close(id: string): void;
+    private resize;
+}

package/Utils/LibPixiDialogManager/index.js

@@ -0,0 +1,62 @@
+export { LibPixiBaseContainer } from "./ui/LibPixiBaseContainer";
+export { LibPixiDialog } from "./ui/LibPixiDialog";
+/** @description 基础容器管理器 */
+export class LibPixiBaseContainerManager {
+    constructor(parent) {
+        /** 视图表 */
+        this.views = {};
+        /** 上一次方向 */
+        this.lastOrientation = "h";
+        this._openContainer = parent;
+        window.addEventListener("resize", () => {
+            var _a;
+            const w = window.innerWidth;
+            const h = window.innerHeight;
+            const orientation = w > h ? "h" : "v";
+            if (orientation !== this.lastOrientation) {
+                (_a = this.resize) === null || _a === void 0 ? void 0 : _a.call(this, window.innerWidth, window.innerHeight);
+                this.lastOrientation = orientation;
+            }
+        });
+    }
+    /**
+     * 打开界面
+     * @param View 实例类型或构造方法
+     * @param args 实例参数
+     */
+    open(View, id, ...args) {
+        var _a;
+        const view = new View(...args);
+        this._openContainer.addChild(view);
+        (_a = view.resize) === null || _a === void 0 ? void 0 : _a.call(view, window.innerWidth, window.innerHeight);
+        this.views[id] = view;
+        return view;
+    }
+    /** @description 关闭页面，会调用页面的 onBeforeUnmount 事件，里面会做关闭动画，动画结束后会自动销毁
+     * @param id 页面名称
+     */
+    close(id) {
+        const view = this.views[id];
+        if (view) {
+            if (view.beforeUnmount) {
+                view.beforeUnmount(() => {
+                    requestAnimationFrame(() => {
+                        view.destroy({ children: true });
+                    });
+                });
+            }
+            else {
+                requestAnimationFrame(() => {
+                    view.destroy({ children: true });
+                });
+            }
+            delete this.views[id];
+        }
+    }
+    resize(w, h) {
+        Object.values(this.views).forEach((view) => {
+            var _a;
+            (_a = view.resize) === null || _a === void 0 ? void 0 : _a.call(view, w, h);
+        });
+    }
+}

package/Utils/LibPixiDialogManager/ui/LibPixiBaseContainer.d.ts

@@ -0,0 +1,13 @@
+import { Container } from "pixi.js";
+/** @description 基础视图，所有弹窗或页面都基于此视图来管理视图生命周期 */
+export declare class LibPixiBaseContainer extends Container {
+    /** 调用 GameDialogManager.close 时调用 */
+    beforeUnmount?: (destroy: () => void) => void;
+    /** 窗口大小发生改变后调用 */
+    resize?: (w: number, h: number) => void;
+    constructor();
+    /** @description 卸载前回调，需要调用回调参数进行手动销毁 */
+    protected _onBeforeUnmount(beforeUnmount: (destroy: () => void) => void): void;
+    /** @description 窗口大小发生改变后回调 */
+    protected _onResize(resize: (w: number, h: number) => void): void;
+}

package/Utils/LibPixiDialogManager/ui/LibPixiBaseContainer.js

@@ -0,0 +1,15 @@
+import { Container } from "pixi.js";
+/** @description 基础视图，所有弹窗或页面都基于此视图来管理视图生命周期 */
+export class LibPixiBaseContainer extends Container {
+    constructor() {
+        super();
+    }
+    /** @description 卸载前回调，需要调用回调参数进行手动销毁 */
+    _onBeforeUnmount(beforeUnmount) {
+        this.beforeUnmount = beforeUnmount;
+    }
+    /** @description 窗口大小发生改变后回调 */
+    _onResize(resize) {
+        this.resize = resize;
+    }
+}

package/Utils/LibPixiDialogManager/ui/LibPixiDialog.d.ts

@@ -0,0 +1,31 @@
+import { Container } from "pixi.js";
+import { LibPixiBaseContainer } from "./LibPixiBaseContainer";
+interface Params {
+    /** 是否需要显示黑色背景 */
+    needBg?: boolean;
+    /** 竖版初始大小 */
+    size?: number;
+    /** 点击蒙版回调 */
+    onClickMask?: () => void;
+}
+/** @description 弹窗组件 */
+export declare class LibPixiDialog extends LibPixiBaseContainer {
+    /** 蒙版UI */
+    private maskUI;
+    /** 居中容器 */
+    private centerContainer;
+    /** 内容容器 */
+    private dialogContainer;
+    /** 当前大小 */
+    private size;
+    /** 竖版初始大小 */
+    private initialSize;
+    /** 是否处于关闭动画状态 */
+    private isCloseAnimating;
+    constructor(params?: Params);
+    /** @description 设置弹窗内容 */
+    setDialogContent(content: Container): void;
+    /** @description 关闭 */
+    close(): Promise<void>;
+}
+export {};

package/Utils/LibPixiDialogManager/ui/LibPixiDialog.js

@@ -0,0 +1,120 @@
+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 { LibPixiBaseContainer } from "./LibPixiBaseContainer";
+import { LibPixiRectBgColor } from "../../../Components/Base/LibPixiRectBgColor";
+import { libPixiEvent } from '../../LibPixiEvent';
+/** @description 弹窗组件 */
+export class LibPixiDialog extends LibPixiBaseContainer {
+    constructor(params) {
+        super();
+        /** 当前大小 */
+        this.size = 1;
+        /** 是否处于关闭动画状态 */
+        this.isCloseAnimating = false;
+        const { size = 1, onClickMask, needBg = true } = params || {};
+        this.initialSize = size;
+        //蒙版
+        this.maskUI = new LibPixiRectBgColor({
+            bgColor: "#000",
+            width: 2700,
+            height: 1080,
+        });
+        this.addChild(this.maskUI);
+        this.maskUI.alpha = 0;
+        this.maskUI.eventMode = "static";
+        this.maskUI.visible = needBg;
+        if (onClickMask) {
+            libPixiEvent(this.maskUI, "pointertap", () => {
+                if (this.isCloseAnimating)
+                    return;
+                onClickMask === null || onClickMask === void 0 ? void 0 : onClickMask();
+            });
+        }
+        //居中容器
+        this.centerContainer = new Container();
+        this.addChild(this.centerContainer);
+        this.centerContainer.eventMode = "static";
+        //弹窗内容容器
+        this.dialogContainer = new Container();
+    }
+    /** @description 设置弹窗内容 */
+    setDialogContent(content) {
+        this.dialogContainer.addChild(content);
+        this.centerContainer.addChild(this.dialogContainer);
+        const w = this.dialogContainer.width / 2;
+        const h = this.dialogContainer.height / 2;
+        this.dialogContainer.pivot.set(w, h);
+        this.dialogContainer.scale.set(0);
+        this.dialogContainer.alpha = 0;
+        // this.dialogContainer.y = -55;
+        gsap.to(this.maskUI, {
+            duration: 0.5,
+            alpha: 0.5,
+        });
+        gsap.to(this.dialogContainer, {
+            duration: 0.5,
+            alpha: 1,
+        });
+        this._onResize((w, h) => {
+            const halfW = 1920 / 2;
+            const halfH = 1080 / 2;
+            if (w > h) {
+                this.maskUI.renderBg(2700, 1080);
+                this.maskUI.x = -(2700 - 1920) / 2;
+                this.centerContainer.position.set(halfW, halfH);
+                this.size = 1;
+                if (this.dialogContainer.scale.x === this.initialSize) {
+                    this.dialogContainer.scale.set(1);
+                }
+            }
+            else {
+                this.maskUI.renderBg(1080, 2700);
+                this.maskUI.x = 0;
+                this.centerContainer.position.set(halfH, halfW);
+                this.size = this.initialSize;
+                if (this.dialogContainer.scale.x === 1) {
+                    this.dialogContainer.scale.set(this.initialSize);
+                }
+            }
+            gsap.to(this.dialogContainer.scale, {
+                duration: 0.5,
+                ease: "back.out",
+                x: this.size,
+                y: this.size,
+            });
+        });
+    }
+    /** @description 关闭 */
+    close() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.isCloseAnimating)
+                return;
+            this.isCloseAnimating = true;
+            gsap.to(this.dialogContainer.scale, {
+                duration: 0.5,
+                ease: "back.in",
+                x: 0,
+                y: 0,
+            });
+            gsap.to(this.dialogContainer, {
+                duration: 0.5,
+                delay: 0.25,
+                alpha: 0,
+            });
+            yield gsap.to(this.maskUI, {
+                duration: 0.5,
+                delay: 0.25,
+                alpha: 0,
+            });
+        });
+    }
+}

package/lyb-pixi.js

@@ -49265,7 +49265,7 @@ void main(void)\r
         scrollContent,
         scrollbarRgiht,
         scrollbarWidth = 10,
-        scrollbarColor = "#F8A500"
+        scrollbarColor = "#ffffff"
       } = params;
       super(width, height);
       this._startY = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lyb-pixi-js",
-  "version": "1.8.6",
+  "version": "1.8.8",
   "description": "自用Pixi.JS方法库",
   "license": "ISC",
   "exports": {