lyb-pixi-js 1.1.10 → 1.1.11

package/Components/Custom/LibPixiScrollContainer.d.ts

@@ -1,57 +0,0 @@
-import { Container } from "pixi.js";
-import { LibPixiContainer } from "../Base/LibPixiContainer";
-export interface LibPixiScrollContainerParams {
-    /** 宽度 */
-    width: number;
-    /** 高度 */
-    height: number;
-    /** 滚动内容 */
-    scrollContent: Container;
-    /** 底部内边距 */
-    bottomMargin?: number;
-}
-/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainer-滚动容器
- */
-export declare class LibPixiScrollContainer extends LibPixiContainer {
-    /** 开始位置 */
-    private _startY;
-    /** 惯性速度 */
-    private _velocity;
-    /** 上一次滚动时间 */
-    private _startTime;
-    /** 开始位置 */
-    private _startPosition;
-    /** 滚动速度 */
-    private _scrollSpeed;
-    /** 是否处于拖动状态 */
-    private _isDragging;
-    /** 滚动容器 */
-    _scrollContent: Container;
-    /** 遮罩 */
-    private _maskGraphics;
-    /** 滚动的内容 */
-    private _content;
-    constructor(params: LibPixiScrollContainerParams);
-    /** @description 设置滚动容器可视区宽高
-     * @param width 宽度
-     * @param height 高度
-     */
-    setDimensions(width: number, height: number): void;
-    /** @description 返回顶部 */
-    scrollToTop(): void;
-    /** @description 往滚动内容添加元素 */
-    addContent(container: Container): void;
-    /** @description 按下 */
-    private _onDragStart;
-    /** @description 拖动 */
-    private _onDragMove;
-    /** @description 拖动结束 */
-    private _onDragEnd;
-    /** @description 滚轮滚动 */
-    private _onWheelScroll;
-    /** @description 惯性动画 */
-    private _applyInertia;
-    /** @description 限制滚动范围 */
-    private _limitScrollRange;
-}

package/Components/Custom/LibPixiScrollContainer.js

@@ -1,166 +0,0 @@
-import { Container, Graphics, Sprite, } from "pixi.js";
-import { gsap } from "gsap";
-import { LibPixiContainer } from "../Base/LibPixiContainer";
-/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainer-滚动容器
- */
-export class LibPixiScrollContainer extends LibPixiContainer {
-    constructor(params) {
-        const { width, height, scrollContent, bottomMargin = 50 } = params;
-        super(width, height);
-        /** 开始位置 */
-        this._startY = 0;
-        /** 惯性速度 */
-        this._velocity = 0;
-        /** 上一次滚动时间 */
-        this._startTime = 0;
-        /** 开始位置 */
-        this._startPosition = 0;
-        /** 滚动速度 */
-        this._scrollSpeed = 200;
-        /** 是否处于拖动状态 */
-        this._isDragging = false;
-        this._scrollContent = scrollContent;
-        // 创建内容容器
-        this._content = new Container();
-        this.addChild(this._content);
-        this._content.addChild(this._scrollContent);
-        // 创建底部占位
-        if (bottomMargin > 0) {
-            const bottom_box = new Sprite();
-            this._content.addChild(bottom_box);
-            bottom_box.y = this._content.height + bottomMargin;
-        }
-        // 创建遮罩
-        this._maskGraphics = new Graphics();
-        this.addChild(this._maskGraphics);
-        this._maskGraphics.clear();
-        this._maskGraphics.beginFill(0x000000);
-        this._maskGraphics.drawRect(0, 0, width, height);
-        this._maskGraphics.endFill();
-        this.mask = this._maskGraphics;
-        // 添加事件监听
-        this.eventMode = "static";
-        this.on("pointerdown", this._onDragStart, this);
-        this.on("pointermove", this._onDragMove, this);
-        this.on("pointerup", this._onDragEnd, this);
-        this.on("pointerupoutside", this._onDragEnd, this);
-        this.on("wheel", this._onWheelScroll, this);
-    }
-    /** @description 设置滚动容器可视区宽高
-     * @param width 宽度
-     * @param height 高度
-     */
-    setDimensions(width, height) {
-        // 更新遮罩尺寸
-        this._maskGraphics.clear();
-        this._maskGraphics.beginFill(0x000000);
-        this._maskGraphics.drawRect(0, 0, width, height);
-        this._maskGraphics.endFill();
-        this.setSize(width, height);
-    }
-    /** @description 返回顶部 */
-    scrollToTop() {
-        this._content.y = 0;
-    }
-    /** @description 往滚动内容添加元素 */
-    addContent(container) {
-        this._scrollContent.addChild(container);
-    }
-    /** @description 按下 */
-    _onDragStart(event) {
-        if (this._content.height <= this._maskGraphics.height)
-            return;
-        const position = event.getLocalPosition(this);
-        this._startY = position.y - this._content.y;
-        this._isDragging = true;
-        this._velocity = 0;
-        this._startTime = Date.now();
-        this._startPosition = this._content.y;
-        gsap.killTweensOf(this._content);
-    }
-    /** @description 拖动 */
-    _onDragMove(event) {
-        if (this._isDragging) {
-            const position = event.data.getLocalPosition(this);
-            const newPosition = position.y - this._startY;
-            this._content.y = newPosition;
-        }
-    }
-    /** @description 拖动结束 */
-    _onDragEnd() {
-        this._isDragging = false;
-        const currentTime = Date.now();
-        const deltaTime = currentTime - this._startTime; // 计算停留时间
-        if (deltaTime < 250) {
-            // 如果停留时间在阈值内，计算惯性速度
-            this._velocity = (this._content.y - this._startPosition) / deltaTime;
-            this._applyInertia();
-        }
-        else {
-            // 停留时间超出阈值，取消惯性
-            this._velocity = 0;
-        }
-        this._limitScrollRange();
-    }
-    /** @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;
-        }
-        //如果到达底部，则不滚动
-        else if (Math.abs(y) >= this._content.height - this._maskGraphics.height) {
-            y = -(this._content.height - this._maskGraphics.height);
-        }
-        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),
-        });
-    }
-    /** @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) {
-                const y = -(this._content.height - this._maskGraphics.height);
-                gsap.to(this._content, {
-                    duration: 0.75,
-                    y,
-                    ease: "elastic.out",
-                });
-            }
-            // 否则静止不动
-            else {
-                gsap.to(this._content, {
-                    duration: 0.25,
-                    y: 0,
-                });
-            }
-        }
-    }
-}

package/Components/Custom/LibPixiScrollNum.d.ts

@@ -1,62 +0,0 @@
-import { Container } from "pixi.js";
-import { LibPixiContainer } from '../Base/LibPixiContainer';
-export interface LibPixiScrollNumParams {
-    /** 滚动区域宽度 */
-    width: number;
-    /** 滚动区域高度 */
-    height: number;
-    /** 一页高度 */
-    pageHeight: number;
-    /** 滚动的容器 */
-    content: Container;
-    /** 总数 */
-    pageNum: number;
-    /** 松手回调 */
-    slideCallback?: (index: number) => void;
-    /** 滚动回调 */
-    scrollCallback?: (y: number, index: number) => void;
-}
-/** @description 通过鼠标或手指拖动数字列选择数字
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollNum-数字滑动
- */
-export declare class LibPixiScrollNum extends LibPixiContainer {
-    /** 当前幻灯片索引 */
-    private _currentIndex;
-    /** 滚动区域高度 */
-    private _scrollHeight;
-    /** 滑动区域高度 */
-    private _slideHeight;
-    /** 记录拖动开始时的Y坐标 */
-    private _startY;
-    /** 偏移量 */
-    private _offsetY;
-    /** 最大索引 */
-    private _pageNum;
-    /** 记录开始时间 */
-    private _startTime;
-    /** 是否正在拖动 */
-    private _isDragging;
-    /** 滑动内容 */
-    private _slideArea;
-    /** 滑动回调 */
-    private _slideCallback?;
-    /** 滚动回调 */
-    private _scrollCallback?;
-    constructor(params: LibPixiScrollNumParams);
-    /** @description 更新坐标
-     * @param y Y坐标
-     * @param index 页数索引
-     */
-    updatePosition(y: number, index: number): void;
-    /** @description 滑动到指定索引
-     * @param index 页数索引
-     * @param animate 是否需要过渡动画
-     */
-    slideTo(index: number, animate?: boolean): void;
-    /** @description 开始拖动 */
-    private _onDragStart;
-    /** @description 拖动中 */
-    private _onDragMove;
-    /** @description 结束拖动 */
-    private _onDragEnd;
-}

package/Components/Custom/LibPixiScrollNum.js

@@ -1,146 +0,0 @@
-import { Graphics } from "pixi.js";
-import gsap from "gsap";
-import { LibPixiContainer } from '../Base/LibPixiContainer';
-/** @description 通过鼠标或手指拖动数字列选择数字
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollNum-数字滑动
- */
-export class LibPixiScrollNum extends LibPixiContainer {
-    constructor(params) {
-        const { width, height, content, slideCallback, scrollCallback, pageNum, pageHeight, } = params;
-        super(width, height);
-        /** 当前幻灯片索引 */
-        this._currentIndex = 0;
-        /** 滚动区域高度 */
-        this._scrollHeight = 0;
-        /** 滑动区域高度 */
-        this._slideHeight = 0;
-        /** 记录拖动开始时的Y坐标 */
-        this._startY = 0;
-        /** 偏移量 */
-        this._offsetY = 0;
-        /** 最大索引 */
-        this._pageNum = 0;
-        /** 记录开始时间 */
-        this._startTime = new Date().getTime();
-        /** 是否正在拖动 */
-        this._isDragging = false;
-        //设置遮罩
-        const mask = new Graphics();
-        mask.beginFill(0xffffff);
-        mask.drawRect(0, 0, this.width, this.height);
-        mask.endFill();
-        this.addChild(mask);
-        this.mask = mask;
-        this._scrollHeight = height;
-        this._slideHeight = pageHeight;
-        this._slideArea = content;
-        this._slideCallback = slideCallback;
-        this._scrollCallback = scrollCallback;
-        this._pageNum = pageNum - 1;
-        this.addChild(this._slideArea);
-        this._slideArea.x = width / 2;
-        this._slideArea.y = this._scrollHeight / 2;
-        // 监听拖动事件
-        this.eventMode = "static";
-        this.cursor = "pointer";
-        this.on("pointerdown", this._onDragStart);
-        window.addEventListener("pointermove", this._onDragMove.bind(this));
-        window.addEventListener("pointerup", this._onDragEnd.bind(this));
-    }
-    /** @description 更新坐标
-     * @param y Y坐标
-     * @param index 页数索引
-     */
-    updatePosition(y, index) {
-        this._slideArea.y = y;
-        this._currentIndex = index;
-    }
-    /** @description 滑动到指定索引
-     * @param index 页数索引
-     * @param animate 是否需要过渡动画
-     */
-    slideTo(index, animate = true) {
-        var _a;
-        if (index < 0) {
-            // 回弹到第一张
-            gsap.to(this._slideArea, {
-                y: this._scrollHeight / 2,
-                duration: 0.25,
-                onUpdate: () => {
-                    var _a;
-                    (_a = this._scrollCallback) === null || _a === void 0 ? void 0 : _a.call(this, this._slideArea.y, this._currentIndex);
-                },
-            });
-            this._currentIndex = 0;
-        }
-        else if (index > this._pageNum) {
-            // 回弹到最后一张
-            gsap.to(this._slideArea, {
-                y: -this._pageNum * this._slideHeight + this._scrollHeight / 2,
-                duration: 0.5,
-                onUpdate: () => {
-                    var _a;
-                    (_a = this._scrollCallback) === null || _a === void 0 ? void 0 : _a.call(this, this._slideArea.y, this._currentIndex);
-                },
-            });
-            this._currentIndex = this._pageNum;
-        }
-        else {
-            // 正常滑动
-            this._currentIndex = index;
-            gsap.to(this._slideArea, {
-                y: -this._currentIndex * this._slideHeight + this._scrollHeight / 2,
-                duration: animate ? 0.25 : 0.01,
-                onUpdate: () => {
-                    var _a;
-                    (_a = this._scrollCallback) === null || _a === void 0 ? void 0 : _a.call(this, this._slideArea.y, this._currentIndex);
-                },
-            });
-        }
-        (_a = this._slideCallback) === null || _a === void 0 ? void 0 : _a.call(this, this._currentIndex);
-    }
-    /** @description 开始拖动 */
-    _onDragStart(event) {
-        this._isDragging = true;
-        this._startY = event.data.global.y;
-        this._offsetY = this._slideArea.y;
-        gsap.killTweensOf(this._slideArea);
-        this._startTime = new Date().getTime();
-    }
-    /** @description 拖动中 */
-    _onDragMove(event) {
-        var _a;
-        if (!this._isDragging)
-            return;
-        const moveY = event.pageY - this._startY;
-        this._slideArea.y = this._offsetY + moveY;
-        (_a = this._scrollCallback) === null || _a === void 0 ? void 0 : _a.call(this, this._slideArea.y, this._currentIndex);
-    }
-    /** @description 结束拖动 */
-    _onDragEnd(event) {
-        if (!this._isDragging)
-            return;
-        this._isDragging = false;
-        const endTime = new Date().getTime() - this._startTime;
-        const slide = this._startY - event.pageY; // 计算滑动的距离
-        const slideSpeed = Math.abs(slide) / endTime; // 计算滑动速度
-        const speedThreshold = 0.275;
-        // 计算滑动的页面变化数，根据滑动距离来调整页码
-        const slideThreshold = this._slideHeight / 2;
-        // 计算实际的翻页增量，使用 `slide / this._slideHeight` 来计算滑动的页数
-        const pageChange = Math.round(slide / this._slideHeight);
-        // 如果滑动速度足够快，且滑动的距离大于阈值，强制翻页
-        if (Math.abs(slide) > slideThreshold || slideSpeed > speedThreshold) {
-            this._currentIndex += pageChange; // 这里会根据滑动的方向来增加或减少当前页码
-        }
-        // 防止超出页面的上下限
-        if (this._currentIndex < 0) {
-            this._currentIndex = 0; // 保证当前页码不小于 0
-        }
-        else if (this._currentIndex > this._pageNum) {
-            this._currentIndex = this._pageNum; // 保证当前页码不大于最大页码
-        }
-        // 执行滑动到目标页码
-        this.slideTo(this._currentIndex);
-    }
-}

package/Components/Custom/LibPixiSlider.d.ts

@@ -1,45 +0,0 @@
-import { Container } from "pixi.js";
-import { LibPixiContainer } from '../Base/LibPixiContainer';
-/** @description 类似轮播图，但是不会自动轮播
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlider-横向滑动图
- */
-export declare class LibPixiSlider extends LibPixiContainer {
-    /** 当前幻灯片索引 */
-    private _currentIndex;
-    /** 滑动区域宽度 */
-    private _slideWidth;
-    /** 记录拖动开始时的X坐标 */
-    private _startX;
-    /** 偏移量 */
-    private _offsetX;
-    /** 最大索引 */
-    private _pageNum;
-    /** 记录开始时间 */
-    private _startTime;
-    private _isDragging;
-    /** 滑动内容 */
-    private _slideArea;
-    /** @description 滑动回调 */
-    private slideCallback;
-    /**
-     * @param width 宽度
-     * @param height 高度
-     * @param content 内容
-     * @param slideCallback 滑动结束回调
-     */
-    constructor(width: number, height: number, content: Container, slideCallback: (pageIndex: number, _pageNum: number) => void);
-    /** @description 上一页 */
-    prev(): void;
-    /** @description 下一页 */
-    next(): void;
-    /** @description 滑动到指定索引
-     * @param index 索引
-     */
-    private _slideTo;
-    /** @description 开始拖动 */
-    private _onDragStart;
-    /** @description 拖动中 */
-    private _onDragMove;
-    /** @description 结束拖动 */
-    private _onDragEnd;
-}

package/Components/Custom/LibPixiSlider.js

@@ -1,111 +0,0 @@
-import gsap from "gsap";
-import { libPixiOverflowHidden } from "../../Utils/LibPixiOverflowHidden";
-import { LibPixiContainer } from '../Base/LibPixiContainer';
-/** @description 类似轮播图，但是不会自动轮播
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlider-横向滑动图
- */
-export class LibPixiSlider extends LibPixiContainer {
-    /**
-     * @param width 宽度
-     * @param height 高度
-     * @param content 内容
-     * @param slideCallback 滑动结束回调
-     */
-    constructor(width, height, content, slideCallback) {
-        super(width, height);
-        /** 当前幻灯片索引 */
-        this._currentIndex = 0;
-        /** 滑动区域宽度 */
-        this._slideWidth = 0;
-        /** 记录拖动开始时的X坐标 */
-        this._startX = 0;
-        /** 偏移量 */
-        this._offsetX = 0;
-        /** 最大索引 */
-        this._pageNum = 0;
-        /** 记录开始时间 */
-        this._startTime = new Date().getTime();
-        /* 是否正在拖动 */
-        this._isDragging = false;
-        libPixiOverflowHidden(this);
-        this._slideWidth = width;
-        this._slideArea = content;
-        this.slideCallback = slideCallback;
-        this._pageNum = Math.floor(content.width / this._slideWidth) - 1;
-        this.addChild(content);
-        // 监听拖动事件
-        this.eventMode = "static";
-        this.cursor = "pointer";
-        this.on("pointerdown", this._onDragStart);
-        window.addEventListener("pointermove", this._onDragMove.bind(this));
-        window.addEventListener("pointerup", this._onDragEnd.bind(this));
-    }
-    /** @description 上一页 */
-    prev() {
-        this._slideTo(this._currentIndex - 1);
-    }
-    /** @description 下一页 */
-    next() {
-        this._slideTo(this._currentIndex + 1);
-    }
-    /** @description 滑动到指定索引
-     * @param index 索引
-     */
-    _slideTo(index) {
-        if (index < 0) {
-            // 回弹到第一张
-            gsap.to(this._slideArea, { x: 0, duration: 0.25 });
-            this._currentIndex = 0;
-        }
-        else if (index > this._pageNum) {
-            // 回弹到最后一张
-            gsap.to(this._slideArea, {
-                x: -this._pageNum * this._slideWidth,
-                duration: 0.5,
-            });
-            this._currentIndex = this._pageNum;
-        }
-        else {
-            // 正常滑动
-            this._currentIndex = index;
-            gsap.to(this._slideArea, {
-                x: -this._currentIndex * this._slideWidth,
-                duration: 0.25,
-            });
-        }
-        this.slideCallback(this._currentIndex, this._pageNum);
-    }
-    /** @description 开始拖动 */
-    _onDragStart(event) {
-        this._isDragging = true;
-        this._startX = event.global.x;
-        this._offsetX = this._slideArea.x;
-        gsap.killTweensOf(this._slideArea);
-        this._startTime = new Date().getTime();
-    }
-    /** @description 拖动中 */
-    _onDragMove(event) {
-        if (!this._isDragging)
-            return;
-        const moveX = event.pageX - this._startX;
-        this._slideArea.x = this._offsetX + moveX;
-    }
-    /** @description 结束拖动 */
-    _onDragEnd(event) {
-        if (!this._isDragging)
-            return;
-        this._isDragging = false;
-        const endTime = new Date().getTime() - this._startTime;
-        const slide = this._startX - event.pageX;
-        const slideSpeed = Math.abs(slide) / endTime;
-        //滑动距离阈值，滑动到一半以上必定翻页
-        const slideThreshold = this._slideWidth / 2;
-        //滑动速度阈值，滑动速度大于这个值，必定翻页
-        const speedThreshold = 0.275;
-        //如果滑动距离大于阈值，或速度大于阈值翻页
-        if (Math.abs(slide) > slideThreshold || slideSpeed > speedThreshold) {
-            slide > 0 ? this._currentIndex++ : this._currentIndex--;
-        }
-        this._slideTo(this._currentIndex);
-    }
-}

package/Components/Custom/LibPixiSubAddMinMax.d.ts

@@ -1,49 +0,0 @@
-import type { Container } from "pixi.js";
-export interface LibPixiSubAddMinMaxParams {
-    /** 最小按钮 */
-    minBtn: Container;
-    /** 最大按钮 */
-    maxBtn: Container;
-    /** 增加按钮 */
-    subBtn: Container;
-    /** 减少按钮 */
-    addBtn: Container;
-    /** 初始下注索引 */
-    initialBetIndex: number;
-    /** 下注金额列表 */
-    betAmountListLength: number;
-    /** 金额更新回调 */
-    onAmountIndex: (index: number) => void;
-}
-/** @description 最小、最大按钮和增减按钮功能及置灰逻辑
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSubAddMinMax-数字控制器
- */
-export declare class LibPixiSubAddMinMax {
-    /** 步进器 */
-    private baseNumSteper;
-    /** 最大最小按钮 */
-    private minBtn;
-    private maxBtn;
-    /** 增加减少按钮 */
-    private subBtn;
-    private addBtn;
-    /** 金额列表数量 */
-    private betAmountListLength;
-    /** 金额更新回调 */
-    onAmountIndex: (index: number) => void;
-    constructor(params: LibPixiSubAddMinMaxParams);
-    /** @description 点击最小按钮 */
-    min(): void;
-    /** @description 点击最大按钮 */
-    max(): void;
-    /** @description 点击减少按钮 */
-    sub(): void;
-    /** @description 点击增加按钮 */
-    add(): void;
-    /** @description 改变最小最大按钮状态及回调
-     * @param index 索引
-     */
-    minMaxUpdateIndex(index: number): void;
-    /** @description 设置最大最小按钮置灰及恢复 */
-    private _setGrey;
-}