lyb-pixi-js 1.12.58 → 1.12.60

package/Components/Custom/LibPixiInput.d.ts

@@ -31,8 +31,6 @@ interface Params {
     maxLength?: number;
     /** 对齐方式 */
     align?: "left" | "center";
-    /** 输入回调 */
-    onInput?: (text: number | string) => void;
     /** 失去焦点回调 */
     onValue?: (text: number | string) => void;
     /** 格式化显示值 */
@@ -67,11 +65,11 @@ export declare class LibPixiInput extends LibPixiContainer {
     private _createInput;
     /** @description 创建只读输入框 */
     private _createReadOnlyInput;
-    /** @description 失焦 */
-    private _blur;
     /** @description 失去焦点处理 */
     private _onBlurHandler;
     /** @description 实时更新输入框位置 */
     private _updateInputPosition;
+    /** @description 失焦 */
+    private _blur;
 }
 export {};

package/Components/Custom/LibPixiInput.js

@@ -49,20 +49,32 @@ export class LibPixiInput extends LibPixiContainer {
     }
     /** @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);
+        const { onFormatValue, type = "text", onValue, width } = this._params;
+        this._value = v;
+        const formatted = onFormatValue === null || onFormatValue === void 0 ? void 0 : onFormatValue(v);
+        const displayText = type === "password" ? formatted || "●".repeat(v.length) : formatted || v;
+        this._readonlyInput.text = displayText;
+        this._input.style.display = "none";
+        libPixiScaleContainer(this._readonlyInput, width);
+        const isEmpty = v === "";
+        const isNumber = type === "number";
+        const num = Number(v);
+        if (isNumber) {
+            const validNum = !isNaN(num) && num !== 0;
+            this._readonlyInput.visible = validNum;
+            this._placeholder.visible = !validNum;
+            onValue === null || onValue === void 0 ? void 0 : onValue(num);
         }
         else {
-            this._readonlyInput.text = (onFormatValue === null || onFormatValue === void 0 ? void 0 : onFormatValue(value)) || value;
+            this._readonlyInput.visible = !isEmpty;
+            this._placeholder.visible = isEmpty;
+            onValue === null || onValue === void 0 ? void 0 : onValue(v);
         }
     }
     /** @description 更改输入框描述 */
     setPlaceholder(v) {
         this._placeholder.text = v;
+        libPixiScaleContainer(this._placeholder, this._params.width);
     }
     /** @description 聚焦 */
     focus() {
@@ -87,13 +99,11 @@ export class LibPixiInput extends LibPixiContainer {
     /** @description 清空输入框 */
     clear() {
         this._input.value = "";
-        this._placeholder.visible = true;
-        this._readonlyInput.visible = false;
         this._blur();
     }
     /** @description 创建输入框 */
     _createInput() {
-        const { color = "#fff", maxLength = 999999, align = "left", type = "text", onInput = () => { }, fontFamily = "", bold = false, } = this._params;
+        const { color = "#fff", maxLength = 999999, align = "left", type = "text", fontFamily = "", bold = false, } = this._params;
         this._input = document.createElement("input");
         this._input.type = type;
         this._input.maxLength = maxLength;
@@ -113,7 +123,6 @@ export class LibPixiInput extends LibPixiContainer {
             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;
@@ -140,6 +149,7 @@ export class LibPixiInput extends LibPixiContainer {
         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);
+        libPixiScaleContainer(this._placeholder, this._params.width);
         //创建实际显示的文本
         this._readonlyInput = new LibPixiText({
             text: value,
@@ -153,28 +163,6 @@ export class LibPixiInput extends LibPixiContainer {
         this._readonlyInput.anchor.set(align === "left" ? 0 : 0.5, 0.5);
         this._readonlyInput.position.set(align === "left" ? 0 : width / 2, height / 2);
     }
-    /** @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" && value !== "") {
-            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();
@@ -201,4 +189,9 @@ export class LibPixiInput extends LibPixiContainer {
             this._input.style.transform = `rotate(90deg)`;
         }
     }
+    /** @description 失焦 */
+    _blur() {
+        const value = this._onBlurHandler();
+        this.setValue(value);
+    }
 }

package/Components/Custom/LibPixiNoticeBar.d.ts

@@ -0,0 +1,26 @@
+import { Container, type HTMLText, type Text } from "pixi.js";
+interface Params {
+    /** 高度 */
+    width: number;
+    /** 宽度 */
+    height: number;
+    /** 速度，px/s，默认100 */
+    speed?: number;
+    /** 可见性回调 */
+    onVisable: (v: boolean) => void;
+}
+/** @description 滚动通知栏 */
+export declare class LibPixiNoticeBar extends Container {
+    /** 当前参数 */
+    private _params;
+    /** 文本队列 */
+    private _textQueue;
+    /** 当前显示的文本 */
+    private _currentText?;
+    constructor(params: Params);
+    /** @description 添加到队列 */
+    addText(...text: (Text | HTMLText)[]): void;
+    /** @description 显示文本 */
+    private _showText;
+}
+export {};

package/Components/Custom/LibPixiNoticeBar.js

@@ -0,0 +1,50 @@
+import gsap from "gsap";
+import { Container } from "pixi.js";
+import { LibPixiRectangle } from "../Base/LibPixiRectangle";
+/** @description 滚动通知栏 */
+export class LibPixiNoticeBar extends Container {
+    constructor(params) {
+        super();
+        /** 文本队列 */
+        this._textQueue = [];
+        this._params = params;
+        const { width, height } = params;
+        const rectangle = new LibPixiRectangle(width, height);
+        this.addChild(rectangle);
+        this.mask = rectangle;
+    }
+    /** @description 添加到队列 */
+    addText(...text) {
+        this._textQueue.push(...text);
+        if (this._currentText)
+            return;
+        this._showText();
+    }
+    /** @description 显示文本 */
+    _showText() {
+        this._currentText = this._textQueue.shift();
+        if (!this._currentText)
+            return;
+        this._params.onVisable(true);
+        this.addChild(this._currentText);
+        this._currentText.anchor.y = 0.5;
+        this._currentText.position.set(this._params.width, this._params.height / 2);
+        gsap.to(this._currentText, {
+            x: -this._currentText.width,
+            duration: (this._params.width + this._currentText.width) /
+                (this._params.speed || 100),
+            ease: "none",
+            onComplete: () => {
+                this._currentText.destroy();
+                this._currentText = undefined;
+                if (this._textQueue.length) {
+                    this._showText();
+                }
+                else {
+                    this._params.onVisable(false);
+                    this._currentText = undefined;
+                }
+            },
+        });
+    }
+}

package/README.md

@@ -931,6 +931,10 @@ const amountContainer = new LibLabelValue({
 
 > 一列占满后进入下一列，支持从左到右或从右到左
 
+### LibPixiNoticeBar
+
+> 滚动跑马灯
+
 ## Utils-工具方法
 
 ### LibPixiAudio-音频播放器

package/package.json

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