lyb-pixi-js 1.7.1 → 1.7.2

package/Components/Custom/LibPixiScrollContainer.d.ts

@@ -1,5 +1,5 @@
 import { Container } from "pixi.js";
-import { LibPixiContainer } from "../Base/LibPixiContainer";
+import { LibPixiContainer } from '../Base/LibPixiContainer';
 export interface LibPixiScrollContainerParams {
     /** 宽度 */
     width: number;
@@ -9,6 +9,8 @@ export interface LibPixiScrollContainerParams {
     scrollContent: Container;
     /** 底部内边距 */
     bottomMargin?: number;
+    /** 滚动方向，vertical | horizontal，默认vertical */
+    direction?: "vertical" | "horizontal";
 }
 /** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainer-滚动容器
@@ -26,6 +28,8 @@ export declare class LibPixiScrollContainer extends LibPixiContainer {
     private _scrollSpeed;
     /** 是否处于拖动状态 */
     private _isDragging;
+    /** 滚动方向 */
+    private _direction;
     /** 滚动容器 */
     _scrollContent: Container;
     /** 遮罩 */

package/Components/Custom/LibPixiScrollContainer.js

@@ -1,11 +1,12 @@
 import { Container, Graphics, Sprite, } from "pixi.js";
 import { gsap } from "gsap";
-import { LibPixiContainer } from "../Base/LibPixiContainer";
+import { LibPixiContainer } from '../Base/LibPixiContainer';
 /** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainer-滚动容器
  */
 export class LibPixiScrollContainer extends LibPixiContainer {
     constructor(params) {
+        var _a;
         const { width, height, scrollContent, bottomMargin = 50 } = params;
         super(width, height);
         /** 开始位置 */
@@ -20,7 +21,10 @@ export class LibPixiScrollContainer extends LibPixiContainer {
         this._scrollSpeed = 200;
         /** 是否处于拖动状态 */
         this._isDragging = false;
+        /** 滚动方向 */
+        this._direction = "vertical";
         this._scrollContent = scrollContent;
+        this._direction = (_a = params.direction) !== null && _a !== void 0 ? _a : "vertical";
         // 创建内容容器
         this._content = new Container();
         this.addChild(this._content);
@@ -73,7 +77,10 @@ export class LibPixiScrollContainer extends LibPixiContainer {
         if (this._content.height <= this._maskGraphics.height)
             return;
         const position = event.getLocalPosition(this);
-        this._startY = position.y - this._content.y;
+        this._startY =
+            this._direction === "vertical"
+                ? position.y - this._content.y
+                : position.x - this._content.x;
         this._isDragging = true;
         this._velocity = 0;
         this._startTime = Date.now();
@@ -84,8 +91,15 @@ export class LibPixiScrollContainer extends LibPixiContainer {
     _onDragMove(event) {
         if (this._isDragging) {
             const position = event.getLocalPosition(this);
-            const newPosition = position.y - this._startY;
-            this._content.y = newPosition;
+            const newPosition = this._direction === "vertical"
+                ? position.y - this._startY
+                : position.x - this._startY;
+            if (this._direction === "vertical") {
+                this._content.y = newPosition;
+            }
+            else {
+                this._content.x = newPosition;
+            }
         }
     }
     /** @description 拖动结束 */
@@ -106,61 +120,47 @@ export class LibPixiScrollContainer extends LibPixiContainer {
     }
     /** @description 滚轮滚动 */
     _onWheelScroll(event) {
-        // 如果内容高度小于遮罩高度，则不滚动
-        if (this._content.height <= this._maskGraphics.height)
-            return;
-        let y = this._content.y - event.deltaY * (this._scrollSpeed / 100);
-        //如果到达顶部，则不滚动
-        if (y > 0) {
-            y = 0;
+        if (this._direction === "vertical") {
+            if (this._content.height <= this._maskGraphics.height)
+                return;
+            let y = this._content.y - event.deltaY * (this._scrollSpeed / 100);
+            y = Math.min(0, Math.max(y, -(this._content.height - this._maskGraphics.height)));
+            gsap.to(this._content, { duration: 0.25, ease: "power1.out", y });
         }
-        //如果到达底部，则不滚动
-        else if (Math.abs(y) >= this._content.height - this._maskGraphics.height) {
-            y = -(this._content.height - this._maskGraphics.height);
+        else {
+            if (this._content.width <= this._maskGraphics.width)
+                return;
+            let x = this._content.x - event.deltaY * (this._scrollSpeed / 100);
+            x = Math.min(0, Math.max(x, -(this._content.width - this._maskGraphics.width)));
+            gsap.to(this._content, { duration: 0.25, ease: "power1.out", x });
         }
-        gsap.to(this._content, {
-            duration: 0.25,
-            ease: "power1.out",
-            y,
-        });
     }
     /** @description 惯性动画 */
     _applyInertia() {
-        gsap.to(this._content, {
-            y: this._content.y + this._velocity * 250,
-            duration: 0.5,
-            ease: "power1.out",
-            onUpdate: this._limitScrollRange.bind(this),
-        });
+        gsap.to(this._content, Object.assign({ duration: 0.5, ease: "power1.out", onUpdate: this._limitScrollRange.bind(this) }, (this._direction === "vertical"
+            ? { y: this._content.y + this._velocity * 250 }
+            : { x: this._content.x + this._velocity * 250 })));
     }
     /** @description 限制滚动范围 */
     _limitScrollRange() {
-        //如果内容顶部离开了滚动容器顶部，则归位
-        if (this._content.y > 0) {
-            gsap.to(this._content, {
-                duration: 0.75,
-                y: 0,
-                ease: "elastic.out",
-            });
-        }
-        // 如果滚动距离大于内容高度减去遮罩高度
-        else if (Math.abs(this._content.y) >=
-            this._content.height - this._maskGraphics.height) {
-            // 如果内容高度大于遮罩高度，则滚动到底部
-            if (this._content.height > this._maskGraphics.height) {
+        if (this._direction === "vertical") {
+            if (this._content.y > 0) {
+                gsap.to(this._content, { duration: 0.75, y: 0, ease: "elastic.out" });
+            }
+            else if (Math.abs(this._content.y) >=
+                this._content.height - this._maskGraphics.height) {
                 const y = -(this._content.height - this._maskGraphics.height);
-                gsap.to(this._content, {
-                    duration: 0.75,
-                    y,
-                    ease: "elastic.out",
-                });
+                gsap.to(this._content, { duration: 0.75, y, ease: "elastic.out" });
             }
-            // 否则静止不动
-            else {
-                gsap.to(this._content, {
-                    duration: 0.25,
-                    y: 0,
-                });
+        }
+        else {
+            if (this._content.x > 0) {
+                gsap.to(this._content, { duration: 0.75, x: 0, ease: "elastic.out" });
+            }
+            else if (Math.abs(this._content.x) >=
+                this._content.width - this._maskGraphics.width) {
+                const x = -(this._content.width - this._maskGraphics.width);
+                gsap.to(this._content, { duration: 0.75, x, ease: "elastic.out" });
             }
         }
     }

package/README.md

@@ -146,8 +146,6 @@ app.stage.addChild(box);
 
 \- [LibPixiPolygonDrawTool-多边形绘制](#LibPixiPolygonDrawTool-多边形绘制)
 
-\- [LibPixiWatchProperty-对象属性监听](#LibPixiWatchProperty-对象属性监听)
-
 ## Base-基础
 
 ### LibPixiText-文本
@@ -1019,21 +1017,4 @@ $bus.on("play", () => {
 
 ```ts
 new LibPixiPolygonDrawTool(app);
-```
-
-### LibPixiWatchProperty-对象属性监听
-
-> 内部通过 Ticker 每秒调用10次循环判断被监听的属性是否发生改变，当元素被销毁时自动销毁 Ticker，取决于是否传递了元素
-
-```ts
-LibPixiWatchProperty(
-  gameStore,
-  ["a", "b"],
-  () => {
-    warningContainer.visible = a;
-    useBtn.eventMode = a || b ? "none" : "static";
-  },
-  this
-);
-```
-
+```

package/lyb-pixi.js

@@ -49100,7 +49100,9 @@ void main(void)\r
       this._startPosition = 0;
       this._scrollSpeed = 200;
       this._isDragging = false;
+      this._direction = "vertical";
       this._scrollContent = scrollContent;
+      this._direction = params.direction ?? "vertical";
       this._content = new Container();
       this.addChild(this._content);
       this._content.addChild(this._scrollContent);
@@ -49148,7 +49150,7 @@ void main(void)\r
       if (this._content.height <= this._maskGraphics.height)
         return;
       const position = event.getLocalPosition(this);
-      this._startY = position.y - this._content.y;
+      this._startY = this._direction === "vertical" ? position.y - this._content.y : position.x - this._content.x;
       this._isDragging = true;
       this._velocity = 0;
       this._startTime = Date.now();
@@ -49159,8 +49161,12 @@ void main(void)\r
     _onDragMove(event) {
       if (this._isDragging) {
         const position = event.getLocalPosition(this);
-        const newPosition = position.y - this._startY;
-        this._content.y = newPosition;
+        const newPosition = this._direction === "vertical" ? position.y - this._startY : position.x - this._startY;
+        if (this._direction === "vertical") {
+          this._content.y = newPosition;
+        } else {
+          this._content.x = newPosition;
+        }
       }
     }
     /** @description 拖动结束 */
@@ -49178,50 +49184,50 @@ void main(void)\r
     }
     /** @description 滚轮滚动 */
     _onWheelScroll(event) {
-      if (this._content.height <= this._maskGraphics.height)
-        return;
-      let y2 = this._content.y - event.deltaY * (this._scrollSpeed / 100);
-      if (y2 > 0) {
-        y2 = 0;
-      } else if (Math.abs(y2) >= this._content.height - this._maskGraphics.height) {
-        y2 = -(this._content.height - this._maskGraphics.height);
+      if (this._direction === "vertical") {
+        if (this._content.height <= this._maskGraphics.height)
+          return;
+        let y2 = this._content.y - event.deltaY * (this._scrollSpeed / 100);
+        y2 = Math.min(
+          0,
+          Math.max(y2, -(this._content.height - this._maskGraphics.height))
+        );
+        gsapWithCSS.to(this._content, { duration: 0.25, ease: "power1.out", y: y2 });
+      } else {
+        if (this._content.width <= this._maskGraphics.width)
+          return;
+        let x2 = this._content.x - event.deltaY * (this._scrollSpeed / 100);
+        x2 = Math.min(
+          0,
+          Math.max(x2, -(this._content.width - this._maskGraphics.width))
+        );
+        gsapWithCSS.to(this._content, { duration: 0.25, ease: "power1.out", x: x2 });
       }
-      gsapWithCSS.to(this._content, {
-        duration: 0.25,
-        ease: "power1.out",
-        y: y2
-      });
     }
     /** @description 惯性动画 */
     _applyInertia() {
       gsapWithCSS.to(this._content, {
-        y: this._content.y + this._velocity * 250,
         duration: 0.5,
         ease: "power1.out",
-        onUpdate: this._limitScrollRange.bind(this)
+        onUpdate: this._limitScrollRange.bind(this),
+        ...this._direction === "vertical" ? { y: this._content.y + this._velocity * 250 } : { x: this._content.x + this._velocity * 250 }
       });
     }
     /** @description 限制滚动范围 */
     _limitScrollRange() {
-      if (this._content.y > 0) {
-        gsapWithCSS.to(this._content, {
-          duration: 0.75,
-          y: 0,
-          ease: "elastic.out"
-        });
-      } else if (Math.abs(this._content.y) >= this._content.height - this._maskGraphics.height) {
-        if (this._content.height > this._maskGraphics.height) {
+      if (this._direction === "vertical") {
+        if (this._content.y > 0) {
+          gsapWithCSS.to(this._content, { duration: 0.75, y: 0, ease: "elastic.out" });
+        } else if (Math.abs(this._content.y) >= this._content.height - this._maskGraphics.height) {
           const y2 = -(this._content.height - this._maskGraphics.height);
-          gsapWithCSS.to(this._content, {
-            duration: 0.75,
-            y: y2,
-            ease: "elastic.out"
-          });
-        } else {
-          gsapWithCSS.to(this._content, {
-            duration: 0.25,
-            y: 0
-          });
+          gsapWithCSS.to(this._content, { duration: 0.75, y: y2, ease: "elastic.out" });
+        }
+      } else {
+        if (this._content.x > 0) {
+          gsapWithCSS.to(this._content, { duration: 0.75, x: 0, ease: "elastic.out" });
+        } else if (Math.abs(this._content.x) >= this._content.width - this._maskGraphics.width) {
+          const x2 = -(this._content.width - this._maskGraphics.width);
+          gsapWithCSS.to(this._content, { duration: 0.75, x: x2, ease: "elastic.out" });
         }
       }
     }

package/package.json

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