lyb-pixi-js 1.12.2 → 1.12.4

package/Components/Custom/LibPixiPerforMon.js

@@ -1,5 +1,6 @@
+import { LibJsResizeWatcher } from "lyb-js/Base/LibJsResizeWatcher.js";
 import { Container, Ticker, UPDATE_PRIORITY, } from "pixi.js";
-import { LibPixiRectBgColor } from "../Base/LibPixiRectBgColor";
+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-性能监视器
@@ -27,12 +28,7 @@ export class LibPixiPerforMon extends Container {
         this._containerHeight = 50;
         this.pivot.x = this._containerWidth / 2;
         //创建背景
-        this._bg = new LibPixiRectBgColor({
-            width: this._containerWidth,
-            height: this._containerHeight,
-            bgColor: "#000",
-            alpha: 0.75,
-        });
+        this._bg = new LibPixiRectangle(this._containerWidth, this._containerHeight, "#0000007e");
         this.addChild(this._bg);
         //创建内容容器
         const content = new Container();
@@ -53,6 +49,23 @@ export class LibPixiPerforMon extends Container {
         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() {

package/Utils/LibPixiArrangeLinear.d.ts

@@ -4,6 +4,7 @@ import { Container } from "pixi.js";
  * @param items 要排列的元素数组。
  * @param gap 元素之间的间隔，可以是固定间隔或自定义的间隔数组。
  * @param direction 排列方向，"x"表示水平，"y"表示垂直，默认为水平。
+ * @param cols 列数，默认为元素数量。
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiArrangeLinear-间隔布局
  */
-export declare const LibPixiArrangeLinear: (items: Container[], gap: number | number[], direction?: "x" | "y") => void;
+export declare const LibPixiArrangeLinear: (items: Container[], gap: number | number[], direction?: "x" | "y", cols?: number) => void;

package/Utils/LibPixiArrangeLinear.js

@@ -3,27 +3,43 @@
  * @param items 要排列的元素数组。
  * @param gap 元素之间的间隔，可以是固定间隔或自定义的间隔数组。
  * @param direction 排列方向，"x"表示水平，"y"表示垂直，默认为水平。
+ * @param cols 列数，默认为元素数量。
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiArrangeLinear-间隔布局
  */
-export const LibPixiArrangeLinear = (items, gap, direction = "x") => {
+export const LibPixiArrangeLinear = (items, gap, direction = "x", cols = Infinity) => {
     if (Array.isArray(gap)) {
         if (gap.length !== items.length - 1) {
             console.error(new Error("间隔的数组长度只能等于元素数组长度-1"));
             return;
         }
     }
-    let lastPosition = 0;
+    let lastRowMax = 0; // 记录当前行/列最大高度或宽度
+    let rowOffset = 0; // 累计偏移量（多行时用）
     items.forEach((item, index) => {
-        const position = index === 0
-            ? 0
-            : lastPosition + (Array.isArray(gap) ? gap[index - 1] : gap);
+        var _a, _b;
+        const row = Math.floor(index / cols);
+        const col = index % cols;
         if (direction === "x") {
-            item.x = position;
-            lastPosition = item.x + item.width;
+            const gapValue = Array.isArray(gap) ? (_a = gap[index - 1]) !== null && _a !== void 0 ? _a : 0 : gap;
+            if (col === 0 && row > 0) {
+                rowOffset += lastRowMax + gapValue;
+                lastRowMax = 0;
+            }
+            item.x =
+                col === 0 ? 0 : items[index - 1].x + items[index - 1].width + gapValue;
+            item.y = rowOffset;
+            lastRowMax = Math.max(lastRowMax, item.height);
         }
         else {
-            item.y = position;
-            lastPosition = item.y + item.height;
+            const gapValue = Array.isArray(gap) ? (_b = gap[index - 1]) !== null && _b !== void 0 ? _b : 0 : gap;
+            if (col === 0 && row > 0) {
+                rowOffset += lastRowMax + gapValue;
+                lastRowMax = 0;
+            }
+            item.y =
+                col === 0 ? 0 : items[index - 1].y + items[index - 1].height + gapValue;
+            item.x = rowOffset;
+            lastRowMax = Math.max(lastRowMax, item.width);
         }
     });
 };

package/libPixiJs.d.ts

@@ -274,7 +274,7 @@ export declare const Utils: {
      * @param direction 排列方向，"x"表示水平，"y"表示垂直，默认为水平。
      * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiArrangeLinear-间隔布局
      */
-    LibPixiArrangeLinear: (items: import("pixi.js").Container[], gap: number | number[], direction?: "x" | "y") => void;
+    LibPixiArrangeLinear: (items: import("pixi.js").Container[], gap: number | number[], direction?: "x" | "y", cols?: number) => void;
     /** @description 触发后代监听
      * @param container 容器
      * @param event 事件名称

package/lyb-pixi.js

@@ -48939,7 +48939,72 @@ void main(void)\r
       });
     }
   }
-  class LibPixiPerforMon extends Container {
+  class LibJsResizeWatcher {
+    constructor(mode = "hv") {
+      this._listeners = [];
+      this._handleResize = () => {
+        const w2 = window.innerWidth;
+        const h2 = window.innerHeight;
+        let s2;
+        const orientation = w2 > h2 ? "h" : "v";
+        if (orientation === "h") {
+          s2 = Math.min(w2 / 1920, h2 / 1080);
+        } else {
+          s2 = Math.min(w2 / 1080, h2 / 1920);
+        }
+        this._listeners.forEach(({ cb }) => cb(w2, h2, s2));
+      };
+      this._mode = mode;
+      if (mode === "h" || mode === "v")
+        return;
+      window.addEventListener("resize", this._handleResize);
+    }
+    /**
+     * @description 注册一个窗口尺寸变化的监听器
+     * @param cb 回调函数，参数为当前窗口宽度和高度
+     * @param immediate 是否在注册时立即执行一次回调，默认为 true
+     * @returns 一个函数，用于移除该监听器
+     */
+    on(cb, immediate = true) {
+      const w2 = window.innerWidth;
+      const h2 = window.innerHeight;
+      const orientation = w2 > h2 ? "h" : "v";
+      if (this._mode === "h") {
+        immediate && cb(1920, 1080, Math.min(w2 / 1920, h2 / 1080));
+        return () => {
+        };
+      } else if (this._mode === "v") {
+        immediate && cb(1080, 1920, Math.min(w2 / 1080, h2 / 1920));
+        return () => {
+        };
+      }
+      let s2;
+      if (orientation === "h") {
+        s2 = Math.min(w2 / 1920, h2 / 1080);
+      } else {
+        s2 = Math.min(w2 / 1080, h2 / 1920);
+      }
+      const item = { cb, immediate };
+      this._listeners.push(item);
+      if (immediate)
+        cb(window.innerWidth, window.innerHeight, s2);
+      return () => {
+        this._listeners = this._listeners.filter((l2) => l2 !== item);
+      };
+    }
+  }
+  class LibPixiRectangle extends Graphics {
+    constructor(width, height, color) {
+      super();
+      this.beginFill(color || 0);
+      this.drawRect(0, 0, width, height);
+      this.endFill();
+      if (!color) {
+        this.alpha = 0;
+      }
+    }
+  }
+  const _LibPixiPerforMon = class _LibPixiPerforMon2 extends Container {
     constructor(app) {
       super();
       this.COLLECT_TIME = 5 * 1e3;
@@ -48952,12 +49017,11 @@ void main(void)\r
       this._containerWidth = 590;
       this._containerHeight = 50;
       this.pivot.x = this._containerWidth / 2;
-      this._bg = new LibPixiRectBgColor({
-        width: this._containerWidth,
-        height: this._containerHeight,
-        bgColor: "#000",
-        alpha: 0.75
-      });
+      this._bg = new LibPixiRectangle(
+        this._containerWidth,
+        this._containerHeight,
+        "#0000007e"
+      );
       this.addChild(this._bg);
       const content = new Container();
       this.addChild(content);
@@ -48974,6 +49038,20 @@ void main(void)\r
       this._renderer = app.renderer;
       this._drawElements = this._renderer["gl"].drawElements;
       this.init();
+      if (_LibPixiPerforMon2.ADAPT_MODE === "h") {
+        this.x = 1920 / 2;
+      } else if (_LibPixiPerforMon2.ADAPT_MODE === "v") {
+        this.x = 1080 / 2;
+      } else {
+        const resize = new LibJsResizeWatcher();
+        resize.on((w2, h2) => {
+          if (w2 > h2) {
+            this.x = 1920 / 2;
+          } else {
+            this.x = 1080 / 2;
+          }
+        });
+      }
     }
     /** @description 初始化显示性能数据 */
     init() {
@@ -49039,8 +49117,9 @@ void main(void)\r
       }
       return color;
     }
-  }
-  LibPixiPerforMon.ADAPT_MODE = "hv";
+  };
+  _LibPixiPerforMon.ADAPT_MODE = "hv";
+  let LibPixiPerforMon = _LibPixiPerforMon;
   class TextBox extends Container {
     constructor(text, fontSize = 26) {
       super();
@@ -49237,17 +49316,6 @@ void main(void)\r
       }
     }
   }
-  class LibPixiRectangle extends Graphics {
-    constructor(width, height, color) {
-      super();
-      this.beginFill(color || 0);
-      this.drawRect(0, 0, width, height);
-      this.endFill();
-      if (!color) {
-        this.alpha = 0;
-      }
-    }
-  }
   class LibPixiScrollContainerY extends LibPixiContainer {
     constructor(params) {
       const {
@@ -55015,22 +55083,36 @@ void main(void){
       item.y = rowIndex * (itemHeight + gap);
     });
   };
-  const LibPixiArrangeLinear = (items, gap, direction = "x") => {
+  const LibPixiArrangeLinear = (items, gap, direction = "x", cols = Infinity) => {
     if (Array.isArray(gap)) {
       if (gap.length !== items.length - 1) {
         console.error(new Error("间隔的数组长度只能等于元素数组长度-1"));
         return;
       }
     }
-    let lastPosition = 0;
+    let lastRowMax = 0;
+    let rowOffset = 0;
     items.forEach((item, index) => {
-      const position = index === 0 ? 0 : lastPosition + (Array.isArray(gap) ? gap[index - 1] : gap);
+      const row = Math.floor(index / cols);
+      const col = index % cols;
       if (direction === "x") {
-        item.x = position;
-        lastPosition = item.x + item.width;
+        const gapValue = Array.isArray(gap) ? gap[index - 1] ?? 0 : gap;
+        if (col === 0 && row > 0) {
+          rowOffset += lastRowMax + gapValue;
+          lastRowMax = 0;
+        }
+        item.x = col === 0 ? 0 : items[index - 1].x + items[index - 1].width + gapValue;
+        item.y = rowOffset;
+        lastRowMax = Math.max(lastRowMax, item.height);
       } else {
-        item.y = position;
-        lastPosition = item.y + item.height;
+        const gapValue = Array.isArray(gap) ? gap[index - 1] ?? 0 : gap;
+        if (col === 0 && row > 0) {
+          rowOffset += lastRowMax + gapValue;
+          lastRowMax = 0;
+        }
+        item.y = col === 0 ? 0 : items[index - 1].y + items[index - 1].height + gapValue;
+        item.x = rowOffset;
+        lastRowMax = Math.max(lastRowMax, item.width);
       }
     });
   };

package/package.json

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