lyb-pixi-js 1.12.82 → 1.12.84

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/Components/Custom/LibPixiScrollContainerY.d.ts +10 -0
  2. package/Components/Custom/LibPixiScrollContainerY.js +42 -13
  3. package/README.md +0 -17
  4. package/Utils/LibPixiIntervalTrigger.d.ts +1 -6
  5. package/Utils/LibPixiIntervalTrigger.js +15 -25
  6. package/package.json +1 -1
package/Components/Custom/LibPixiScrollContainerY.d.ts CHANGED
@@ -25,6 +25,8 @@ export interface LibPixiScrollContainerYParams {
25
25
  scrollbarColor?: string;
26
26
  /** 滚动触发 */
27
27
  onScroll?: (y: number) => void;
28
+ /** 上拉加载触发 */
29
+ onLoad?: (pageIndex: number) => Promise<void>;
28
30
  }
29
31
  /** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹 */
30
32
  export declare class LibPixiScrollContainerY extends LibPixiContainer {
@@ -46,6 +48,10 @@ export declare class LibPixiScrollContainerY extends LibPixiContainer {
46
48
  private _scrollbarDragging;
47
49
  /** 滚动条拖动偏移量 */
48
50
  private _scrollbarDragOffset;
51
+ /** 分页索引 */
52
+ private _pageIndex;
53
+ /** 滚动锁 */
54
+ private _scrollLock;
49
55
  /** 滚动条右边距 */
50
56
  private _scrollbarRgiht;
51
57
  /** 滚动条宽度 */
@@ -68,6 +74,8 @@ export declare class LibPixiScrollContainerY extends LibPixiContainer {
68
74
  private _showScrollbar;
69
75
  /** 滚动触发 */
70
76
  private _onScroll?;
77
+ /** 上拉加载触发，通过返回Promise.reject可表示暂无更多，停止触底检测 */
78
+ private _onLoad?;
71
79
  constructor(params: LibPixiScrollContainerYParams);
72
80
  /** @description 添加边距 */
73
81
  addMargin(topMargin: number, bottomMargin?: number): void;
@@ -80,6 +88,8 @@ export declare class LibPixiScrollContainerY extends LibPixiContainer {
80
88
  scrollToTop(animate?: boolean): void;
81
89
  /** @description 往滚动内容添加元素 */
82
90
  addContent(container: Container): void;
91
+ /** @description 重置页码 */
92
+ resetPageIndex(): void;
83
93
  /** @description 更新右边距坐标 */
84
94
  private _updateBottomMargin;
85
95
  /** @description 按下 */
package/Components/Custom/LibPixiScrollContainerY.js CHANGED
@@ -1,3 +1,12 @@
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
1
10
  import { Container, Sprite } from "pixi.js";
2
11
  import { gsap } from "gsap";
3
12
  import { libPixiEvent } from "../../Utils/LibPixiEvent";
@@ -6,7 +15,7 @@ import { LibPixiRectangle } from "../Base/LibPixiRectangle";
6
15
  /** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹 */
7
16
  export class LibPixiScrollContainerY extends LibPixiContainer {
8
17
  constructor(params) {
9
- const { width, height, scrollbar = false, scrollContent, scrollbarRgiht = 0, scrollbarWidth = 10, scrollbarColor = "#ffffff", onScroll, bgColor, maskTexture, maskX = 0, maskY = 0, } = params;
18
+ const { width, height, scrollbar = false, scrollContent, scrollbarRgiht = 0, scrollbarWidth = 10, scrollbarColor = "#ffffff", onScroll, bgColor, maskTexture, maskX = 0, maskY = 0, onLoad, } = params;
10
19
  super(width, height, bgColor);
11
20
  /** 开始位置 */
12
21
  this._startY = 0;
@@ -24,6 +33,10 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
24
33
  this._scrollbarDragging = false;
25
34
  /** 滚动条拖动偏移量 */
26
35
  this._scrollbarDragOffset = 0;
36
+ /** 分页索引 */
37
+ this._pageIndex = 0;
38
+ /** 滚动锁 */
39
+ this._scrollLock = false;
27
40
  /** 上边距 */
28
41
  this._topMargin = 0;
29
42
  this._scrollbarRgiht = scrollbarRgiht;
@@ -31,6 +44,7 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
31
44
  this._scrollContent = scrollContent;
32
45
  this._scrollbarColor = scrollbarColor;
33
46
  this._onScroll = onScroll;
47
+ this._onLoad = onLoad;
34
48
  this._showScrollbar = scrollbar;
35
49
  // 创建内容容器
36
50
  this._content = new Container();
@@ -135,6 +149,10 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
135
149
  addContent(container) {
136
150
  this._scrollContent.addChild(container);
137
151
  }
152
+ /** @description 重置页码 */
153
+ resetPageIndex() {
154
+ this._pageIndex = 0;
155
+ }
138
156
  /** @description 更新右边距坐标 */
139
157
  _updateBottomMargin() {
140
158
  if (!this._bottomMarginBox)
@@ -276,18 +294,29 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
276
294
  }
277
295
  /** @description 更新滚动位置 */
278
296
  _updateScrollbar() {
279
- var _a;
280
- this._scrollbar.alpha = 1;
281
- gsap.killTweensOf(this._scrollbar);
282
- const viewHeight = this._maskGraphics.height;
283
- const contentHeight = this._content.height;
284
- const ratio = viewHeight / contentHeight;
285
- const barHeight = viewHeight * ratio;
286
- const maxScrollY = contentHeight - viewHeight;
287
- const scrollY = Math.min(Math.max(-this._content.y, 0), maxScrollY);
288
- const barY = (scrollY / maxScrollY) * (viewHeight - barHeight);
289
- this._scrollbar.y = barY;
290
- (_a = this._onScroll) === null || _a === void 0 ? void 0 : _a.call(this, this._content.y);
297
+ return __awaiter(this, void 0, void 0, function* () {
298
+ var _a, _b;
299
+ this._scrollbar.alpha = 1;
300
+ gsap.killTweensOf(this._scrollbar);
301
+ const viewHeight = this._maskGraphics.height;
302
+ const contentHeight = this._content.height;
303
+ const ratio = viewHeight / contentHeight;
304
+ const barHeight = viewHeight * ratio;
305
+ const maxScrollY = contentHeight - viewHeight;
306
+ const scrollY = Math.min(Math.max(-this._content.y, 0), maxScrollY);
307
+ const barY = (scrollY / maxScrollY) * (viewHeight - barHeight);
308
+ this._scrollbar.y = barY;
309
+ (_a = this._onScroll) === null || _a === void 0 ? void 0 : _a.call(this, this._content.y);
310
+ const scrollHeight = this._content.height - this._maskGraphics.height;
311
+ if (scrollHeight + this._content.y < this._maskGraphics.height &&
312
+ !this._scrollLock) {
313
+ this._scrollLock = true;
314
+ (_b = this._onLoad) === null || _b === void 0 ? void 0 : _b.call(this, this._pageIndex).then(() => {
315
+ this._pageIndex++;
316
+ this._scrollLock = false;
317
+ });
318
+ }
319
+ });
291
320
  }
292
321
  /** @description 更新滚动条大小 */
293
322
  _updateScrollbarSize() {
package/README.md CHANGED
@@ -61,23 +61,6 @@ const box = new LibPixiRectBgColor({
61
61
  app.stage.addChild(box);
62
62
  ```
63
63
 
64
- **通过 `CDN ` 使用 `LibPixiJs`**
65
-
66
- > 你可以借助 `script` 标签直接通过 `CDN` 来使用 `LibPixiJs`
67
-
68
- ```html
69
- <script src="https://unpkg.com/lyb-pixi-js/lyb-pixi.js"></script>
70
-
71
- <script>
72
- const text = new LibPixiJs.Base.LibPixiText({
73
- text: "Hello World!",
74
- fontSize: 50,
75
- fontColor: "red",
76
- });
77
- app.stage.addChild(text);
78
- </script>
79
- ```
80
-
81
64
  ## 目录
82
65
 
83
66
  ### 基础组件
package/Utils/LibPixiIntervalTrigger.d.ts CHANGED
@@ -1,7 +1,2 @@
1
- /** @description 间隔触发
2
- * @param callback 回调函数
3
- * @param interval 间隔毫秒，或随机范围
4
- * @param immediately 是否立即执行一次
5
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiIntervalTrigger-间隔触发
6
- */
1
+ /** @description 间隔触发（共享 Ticker 版） */
7
2
  export declare const libPixiIntervalTrigger: (callback: () => void, interval: number | [number, number], immediately?: boolean) => () => void;
package/Utils/LibPixiIntervalTrigger.js CHANGED
@@ -1,35 +1,25 @@
1
1
  import { Ticker } from "pixi.js"; //@ts-ignore
2
2
  import { libJsRandom } from "lyb-js/Random/LibJsRandom.js";
3
- /** @description 间隔触发
4
- * @param callback 回调函数
5
- * @param interval 间隔毫秒，或随机范围
6
- * @param immediately 是否立即执行一次
7
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiIntervalTrigger-间隔触发
8
- */
3
+ /** @description 间隔触发（共享 Ticker 版） */
9
4
  export const libPixiIntervalTrigger = (callback, interval, immediately = true) => {
10
- let elapsedTime = 0;
11
- // 创建一个新的 Ticker 实例
12
- const ticker = new Ticker();
13
- // 创建回调函数
5
+ let nextInterval = Array.isArray(interval)
6
+ ? libJsRandom(interval[0], interval[1], 2)
7
+ : interval;
8
+ let elapsed = 0;
9
+ if (immediately)
10
+ callback();
14
11
  const tickerCallback = () => {
15
- elapsedTime += ticker.elapsedMS;
16
- let intervalNum = 0;
17
- if (Array.isArray(interval)) {
18
- intervalNum = libJsRandom(interval[0], interval[1], 2);
19
- }
20
- else {
21
- intervalNum = interval;
22
- }
23
- if (elapsedTime >= intervalNum) {
12
+ elapsed += Ticker.shared.deltaMS;
13
+ if (elapsed >= nextInterval) {
14
+ elapsed -= nextInterval;
24
15
  callback();
25
- elapsedTime = 0;
16
+ nextInterval = Array.isArray(interval)
17
+ ? libJsRandom(interval[0], interval[1], 2)
18
+ : interval;
26
19
  }
27
20
  };
28
- immediately && callback();
29
- ticker.add(tickerCallback);
30
- ticker.start();
21
+ Ticker.shared.add(tickerCallback);
31
22
  return () => {
32
- ticker.remove(tickerCallback);
33
- ticker.stop();
23
+ Ticker.shared.remove(tickerCallback);
34
24
  };
35
25
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lyb-pixi-js",
3
- "version": "1.12.82",
3
+ "version": "1.12.84",
4
4
  "description": "自用Pixi.JS方法库",
5
5
  "license": "ISC",
6
6
  "exports": {