lyb-pixi-js 1.8.0 → 1.8.2
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.
- package/Components/Base/LibPixiCircular.d.ts +7 -0
- package/Components/Base/LibPixiCircular.js +12 -0
- package/Components/Base/LibPixiPolygon.d.ts +7 -0
- package/Components/Base/LibPixiPolygon.js +15 -0
- package/Components/Base/LibPixiRectBgColor.js +0 -1
- package/Components/Base/LibPixiRectangle.d.ts +7 -0
- package/Components/Base/LibPixiRectangle.js +15 -0
- package/Components/Custom/LibPixiScrollContainerY.d.ts +24 -0
- package/Components/Custom/LibPixiScrollContainerY.js +100 -13
- package/libPixiJs.d.ts +16 -1
- package/libPixiJs.js +16 -1
- package/lyb-pixi.js +265 -146
- package/package.json +1 -1
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Graphics } from "pixi.js";
|
|
2
|
+
/** @description 圆形
|
|
3
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiCircular-圆形
|
|
4
|
+
*/
|
|
5
|
+
export class LibPixiCircular extends Graphics {
|
|
6
|
+
constructor(radius, color) {
|
|
7
|
+
super();
|
|
8
|
+
this.beginFill(color);
|
|
9
|
+
this.drawCircle(0, 0, radius);
|
|
10
|
+
this.endFill();
|
|
11
|
+
}
|
|
12
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Graphics, type IPointData } from "pixi.js";
|
|
2
|
+
/** @description 多边形类，可用于一些场景的局部点击，传颜色是为了方便定位，最终可能需要将颜色隐藏掉
|
|
3
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygon-多边形
|
|
4
|
+
*/
|
|
5
|
+
export declare class LibPixiPolygon extends Graphics {
|
|
6
|
+
constructor(points: IPointData[] | number[], color?: string);
|
|
7
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Graphics } from "pixi.js";
|
|
2
|
+
/** @description 多边形类，可用于一些场景的局部点击，传颜色是为了方便定位，最终可能需要将颜色隐藏掉
|
|
3
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygon-多边形
|
|
4
|
+
*/
|
|
5
|
+
export class LibPixiPolygon extends Graphics {
|
|
6
|
+
constructor(points, color) {
|
|
7
|
+
super();
|
|
8
|
+
this.beginFill(color || 0x000000);
|
|
9
|
+
this.drawPolygon(points);
|
|
10
|
+
this.endFill();
|
|
11
|
+
if (!color) {
|
|
12
|
+
this.alpha = 0;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
@@ -40,7 +40,6 @@ export class LibPixiRectBgColor extends Graphics {
|
|
|
40
40
|
}
|
|
41
41
|
else {
|
|
42
42
|
this.beginFill(this.bgColor, this.bgAlpha);
|
|
43
|
-
this.borderWidth && this.lineStyle(this.borderWidth, this.borderColor, 1);
|
|
44
43
|
}
|
|
45
44
|
this.borderWidth && this.lineStyle(this.borderWidth, this.borderColor, 1);
|
|
46
45
|
if (this.radius !== 0) {
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Graphics } from "pixi.js";
|
|
2
|
+
/** @description 矩形类，可用于一些场景的局部点击，传颜色是为了方便定位，最终可能需要将颜色隐藏掉
|
|
3
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectangle-矩形
|
|
4
|
+
*/
|
|
5
|
+
export declare class LibPixiRectangle extends Graphics {
|
|
6
|
+
constructor(width: number, height: number, color?: string);
|
|
7
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Graphics } from "pixi.js";
|
|
2
|
+
/** @description 矩形类，可用于一些场景的局部点击，传颜色是为了方便定位，最终可能需要将颜色隐藏掉
|
|
3
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectangle-矩形
|
|
4
|
+
*/
|
|
5
|
+
export class LibPixiRectangle extends Graphics {
|
|
6
|
+
constructor(width, height, color) {
|
|
7
|
+
super();
|
|
8
|
+
this.beginFill(color || 0x000000);
|
|
9
|
+
this.drawRect(0, 0, width, height);
|
|
10
|
+
this.endFill();
|
|
11
|
+
if (!color) {
|
|
12
|
+
this.alpha = 0;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
@@ -7,6 +7,14 @@ export interface LibPixiScrollContainerYParams {
|
|
|
7
7
|
height: number;
|
|
8
8
|
/** 滚动内容 */
|
|
9
9
|
scrollContent: Container;
|
|
10
|
+
/** 是否需要滚动条 */
|
|
11
|
+
scrollbar?: boolean;
|
|
12
|
+
/** 滚动靠右坐标 */
|
|
13
|
+
scrollbarRgiht?: number;
|
|
14
|
+
/** 滚动条宽度 */
|
|
15
|
+
scrollbarWidth?: number;
|
|
16
|
+
/** 滚动条颜色 */
|
|
17
|
+
scrollbarColor?: string;
|
|
10
18
|
}
|
|
11
19
|
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
|
|
12
20
|
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y轴滚动容器
|
|
@@ -24,12 +32,20 @@ export declare class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
24
32
|
private _scrollSpeed;
|
|
25
33
|
/** 是否处于拖动状态 */
|
|
26
34
|
private _isDragging;
|
|
35
|
+
/** 是否处于滚动状态 */
|
|
36
|
+
private _scrollbarDragging;
|
|
37
|
+
/** 滚动条拖动偏移量 */
|
|
38
|
+
private _scrollbarDragOffset;
|
|
27
39
|
/** 滚动容器 */
|
|
28
40
|
_scrollContent: Container;
|
|
29
41
|
/** 遮罩 */
|
|
30
42
|
private _maskGraphics;
|
|
31
43
|
/** 滚动的内容 */
|
|
32
44
|
private _content;
|
|
45
|
+
/** 滚动条 */
|
|
46
|
+
private _scrollbar;
|
|
47
|
+
/** 滚动条颜色 */
|
|
48
|
+
private _scrollbarColor;
|
|
33
49
|
constructor(params: LibPixiScrollContainerYParams);
|
|
34
50
|
/** @description 设置滚动容器可视区宽高
|
|
35
51
|
* @param width 宽度
|
|
@@ -52,4 +68,12 @@ export declare class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
52
68
|
private _applyInertia;
|
|
53
69
|
/** @description 限制滚动范围 */
|
|
54
70
|
private _limitScrollRange;
|
|
71
|
+
/** @description 更新滚动位置 */
|
|
72
|
+
private _updateScrollbar;
|
|
73
|
+
/** @description 滚动条按下 */
|
|
74
|
+
private _onScrollbarDragStart;
|
|
75
|
+
/** @description 滚动条移动 */
|
|
76
|
+
private _onScrollbarDragMove;
|
|
77
|
+
/** @description 滚动条松开 */
|
|
78
|
+
private _onScrollbarDragEnd;
|
|
55
79
|
}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import { Container
|
|
2
|
-
import {
|
|
1
|
+
import { Container } from "pixi.js";
|
|
2
|
+
import { libPixiEvent } from "../../Utils/LibPixiEvent";
|
|
3
3
|
import { LibPixiContainer } from "../Base/LibPixiContainer";
|
|
4
|
+
import { LibPixiRectangle } from "../Base/LibPixiRectangle";
|
|
4
5
|
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
|
|
5
6
|
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y轴滚动容器
|
|
6
7
|
*/
|
|
7
8
|
export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
8
9
|
constructor(params) {
|
|
9
|
-
const { width, height, scrollContent } = params;
|
|
10
|
+
const { width, height, scrollbar = false, scrollContent, scrollbarRgiht, scrollbarWidth = 10, scrollbarColor = "#F8A500", } = params;
|
|
10
11
|
super(width, height);
|
|
11
12
|
/** 开始位置 */
|
|
12
13
|
this._startY = 0;
|
|
@@ -20,26 +21,47 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
20
21
|
this._scrollSpeed = 200;
|
|
21
22
|
/** 是否处于拖动状态 */
|
|
22
23
|
this._isDragging = false;
|
|
24
|
+
/** 是否处于滚动状态 */
|
|
25
|
+
this._scrollbarDragging = false;
|
|
26
|
+
/** 滚动条拖动偏移量 */
|
|
27
|
+
this._scrollbarDragOffset = 0;
|
|
23
28
|
this._scrollContent = scrollContent;
|
|
29
|
+
this._scrollbarColor = scrollbarColor;
|
|
24
30
|
// 创建内容容器
|
|
25
31
|
this._content = new Container();
|
|
26
32
|
this.addChild(this._content);
|
|
27
33
|
this._content.addChild(this._scrollContent);
|
|
28
34
|
// 创建遮罩
|
|
29
|
-
this._maskGraphics = new
|
|
35
|
+
this._maskGraphics = new LibPixiRectangle(width, height, "#000");
|
|
30
36
|
this.addChild(this._maskGraphics);
|
|
31
|
-
this._maskGraphics.clear();
|
|
32
|
-
this._maskGraphics.beginFill(0x000000);
|
|
33
|
-
this._maskGraphics.drawRect(0, 0, width, height);
|
|
34
|
-
this._maskGraphics.endFill();
|
|
35
37
|
this.mask = this._maskGraphics;
|
|
38
|
+
// 创建滚动条
|
|
39
|
+
this._scrollbar = new LibPixiRectangle(scrollbarWidth, height, this._scrollbarColor);
|
|
40
|
+
this._scrollbar.x = width - (scrollbarRgiht || scrollbarWidth);
|
|
41
|
+
this.addChild(this._scrollbar);
|
|
42
|
+
this._scrollbar.visible = scrollbar;
|
|
43
|
+
this._updateScrollbar();
|
|
44
|
+
libPixiEvent(this._scrollbar, "pointerdown", this._onScrollbarDragStart.bind(this));
|
|
36
45
|
// 添加事件监听
|
|
37
46
|
this.eventMode = "static";
|
|
38
47
|
this.on("pointerdown", this._onDragStart, this);
|
|
39
|
-
this
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
this
|
|
48
|
+
libPixiEvent(this, "pointerdown", (event) => {
|
|
49
|
+
this._onDragStart(event);
|
|
50
|
+
});
|
|
51
|
+
libPixiEvent(this, "pointermove", (event) => {
|
|
52
|
+
this._onScrollbarDragMove(event);
|
|
53
|
+
this._onDragMove(event);
|
|
54
|
+
});
|
|
55
|
+
libPixiEvent(this, "pointerup", (event) => {
|
|
56
|
+
this._onScrollbarDragEnd(event);
|
|
57
|
+
this._onDragEnd();
|
|
58
|
+
});
|
|
59
|
+
libPixiEvent(this, "wheel", (event) => {
|
|
60
|
+
this._onWheelScroll(event);
|
|
61
|
+
});
|
|
62
|
+
libPixiEvent(this, "pointerupoutside", () => {
|
|
63
|
+
this._onDragEnd();
|
|
64
|
+
});
|
|
43
65
|
}
|
|
44
66
|
/** @description 设置滚动容器可视区宽高
|
|
45
67
|
* @param width 宽度
|
|
@@ -81,10 +103,12 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
81
103
|
const newPosition = position.y - this._startY;
|
|
82
104
|
this._content.y = newPosition;
|
|
83
105
|
}
|
|
106
|
+
this._updateScrollbar();
|
|
84
107
|
}
|
|
85
108
|
/** @description 拖动结束 */
|
|
86
109
|
_onDragEnd() {
|
|
87
110
|
this._isDragging = false;
|
|
111
|
+
this._scrollbarDragging = false;
|
|
88
112
|
const currentTime = Date.now();
|
|
89
113
|
const deltaTime = currentTime - this._startTime; // 计算停留时间
|
|
90
114
|
if (deltaTime < 250) {
|
|
@@ -116,6 +140,9 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
116
140
|
duration: 0.25,
|
|
117
141
|
ease: "power1.out",
|
|
118
142
|
y,
|
|
143
|
+
onUpdate: () => {
|
|
144
|
+
this._updateScrollbar();
|
|
145
|
+
},
|
|
119
146
|
});
|
|
120
147
|
}
|
|
121
148
|
/** @description 惯性动画 */
|
|
@@ -124,7 +151,10 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
124
151
|
y: this._content.y + this._velocity * 250,
|
|
125
152
|
duration: 0.5,
|
|
126
153
|
ease: "power1.out",
|
|
127
|
-
onUpdate:
|
|
154
|
+
onUpdate: () => {
|
|
155
|
+
this._limitScrollRange();
|
|
156
|
+
this._updateScrollbar();
|
|
157
|
+
},
|
|
128
158
|
});
|
|
129
159
|
}
|
|
130
160
|
/** @description 限制滚动范围 */
|
|
@@ -135,6 +165,9 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
135
165
|
duration: 0.75,
|
|
136
166
|
y: 0,
|
|
137
167
|
ease: "elastic.out",
|
|
168
|
+
onUpdate: () => {
|
|
169
|
+
this._updateScrollbar();
|
|
170
|
+
},
|
|
138
171
|
});
|
|
139
172
|
}
|
|
140
173
|
// 如果滚动距离大于内容高度减去遮罩高度
|
|
@@ -147,6 +180,9 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
147
180
|
duration: 0.75,
|
|
148
181
|
y,
|
|
149
182
|
ease: "elastic.out",
|
|
183
|
+
onUpdate: () => {
|
|
184
|
+
this._updateScrollbar();
|
|
185
|
+
},
|
|
150
186
|
});
|
|
151
187
|
}
|
|
152
188
|
// 否则静止不动
|
|
@@ -154,8 +190,59 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
154
190
|
gsap.to(this._content, {
|
|
155
191
|
duration: 0.25,
|
|
156
192
|
y: 0,
|
|
193
|
+
onUpdate: () => {
|
|
194
|
+
this._updateScrollbar();
|
|
195
|
+
},
|
|
157
196
|
});
|
|
158
197
|
}
|
|
159
198
|
}
|
|
160
199
|
}
|
|
200
|
+
/** @description 更新滚动位置 */
|
|
201
|
+
_updateScrollbar() {
|
|
202
|
+
const viewHeight = this._maskGraphics.height;
|
|
203
|
+
const contentHeight = this._content.height;
|
|
204
|
+
if (contentHeight <= viewHeight) {
|
|
205
|
+
this._scrollbar.visible = false;
|
|
206
|
+
return;
|
|
207
|
+
}
|
|
208
|
+
this._scrollbar.visible = true;
|
|
209
|
+
const ratio = viewHeight / contentHeight;
|
|
210
|
+
const barHeight = viewHeight * ratio;
|
|
211
|
+
const maxScrollY = contentHeight - viewHeight;
|
|
212
|
+
const scrollY = Math.min(Math.max(-this._content.y, 0), maxScrollY);
|
|
213
|
+
const barY = (scrollY / maxScrollY) * (viewHeight - barHeight);
|
|
214
|
+
this._scrollbar.clear();
|
|
215
|
+
this._scrollbar.beginFill(this._scrollbarColor);
|
|
216
|
+
this._scrollbar.drawRect(0, 0, 10, barHeight);
|
|
217
|
+
this._scrollbar.endFill();
|
|
218
|
+
this._scrollbar.y = barY;
|
|
219
|
+
}
|
|
220
|
+
/** @description 滚动条按下 */
|
|
221
|
+
_onScrollbarDragStart(event) {
|
|
222
|
+
event.stopPropagation();
|
|
223
|
+
this._scrollbarDragging = true;
|
|
224
|
+
this._scrollbarDragOffset = event.getLocalPosition(this._scrollbar).y;
|
|
225
|
+
gsap.killTweensOf(this._content);
|
|
226
|
+
}
|
|
227
|
+
/** @description 滚动条移动 */
|
|
228
|
+
_onScrollbarDragMove(event) {
|
|
229
|
+
event.stopPropagation();
|
|
230
|
+
if (!this._scrollbarDragging)
|
|
231
|
+
return;
|
|
232
|
+
const localY = event.getLocalPosition(this).y;
|
|
233
|
+
const viewHeight = this._maskGraphics.height;
|
|
234
|
+
const contentHeight = this._content.height;
|
|
235
|
+
const ratio = viewHeight / contentHeight;
|
|
236
|
+
const barHeight = viewHeight * ratio;
|
|
237
|
+
const maxBarY = viewHeight - barHeight;
|
|
238
|
+
const newBarY = Math.min(Math.max(localY - this._scrollbarDragOffset, 0), maxBarY);
|
|
239
|
+
const scrollY = (newBarY / maxBarY) * (contentHeight - viewHeight);
|
|
240
|
+
this._content.y = -scrollY;
|
|
241
|
+
this._updateScrollbar();
|
|
242
|
+
}
|
|
243
|
+
/** @description 滚动条松开 */
|
|
244
|
+
_onScrollbarDragEnd(event) {
|
|
245
|
+
event.stopPropagation();
|
|
246
|
+
this._scrollbarDragging = false;
|
|
247
|
+
}
|
|
161
248
|
}
|
package/libPixiJs.d.ts
CHANGED
|
@@ -19,7 +19,10 @@ import { LibPixiAudio } from "./Utils/LibPixiAudio";
|
|
|
19
19
|
import { LibPixiSlideInput } from "./Utils/LibPixiSlideInput";
|
|
20
20
|
import { LibPixiGlobalUpdater } from "./Utils/LibPixiGlobalUpdater";
|
|
21
21
|
import { LibPixiPolygonDrawTool } from "./Utils/LibPixiPolygonDrawTool";
|
|
22
|
-
import { LibPixiHtmlText } from
|
|
22
|
+
import { LibPixiHtmlText } from "./Components/Base/LibPixiHtmlText";
|
|
23
|
+
import { LibPixiRectangle } from "./Components/Base/LibPixiRectangle";
|
|
24
|
+
import { LibPixiPolygon } from "./Components/Base/LibPixiPolygon";
|
|
25
|
+
import { LibPixiCircular } from "./Components/Base/LibPixiCircular";
|
|
23
26
|
/** @description 组件 */
|
|
24
27
|
export declare const Components: {
|
|
25
28
|
Base: {
|
|
@@ -39,6 +42,18 @@ export declare const Components: {
|
|
|
39
42
|
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectBgColor-矩形
|
|
40
43
|
*/
|
|
41
44
|
LibPixiRectBgColor: typeof LibPixiRectBgColor;
|
|
45
|
+
/** @description 矩形类，可用于一些场景的局部点击，传颜色是为了方便定位，最终可能需要将颜色隐藏掉
|
|
46
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectangle-矩形
|
|
47
|
+
*/
|
|
48
|
+
LibPixiRectangle: typeof LibPixiRectangle;
|
|
49
|
+
/** @description 圆形
|
|
50
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiCircular-圆形
|
|
51
|
+
*/
|
|
52
|
+
LibPixiCircular: typeof LibPixiCircular;
|
|
53
|
+
/** @description 多边形类
|
|
54
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygon-多边形
|
|
55
|
+
*/
|
|
56
|
+
LibPixiPolygon: typeof LibPixiPolygon;
|
|
42
57
|
/** @description 自定义 Spine 动画
|
|
43
58
|
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSpine-动画
|
|
44
59
|
*/
|
package/libPixiJs.js
CHANGED
|
@@ -29,7 +29,10 @@ import { libPixiTickerTimeout } from "./Utils/LibPixiTickerTimeout";
|
|
|
29
29
|
import { LibPixiSlideInput } from "./Utils/LibPixiSlideInput";
|
|
30
30
|
import { LibPixiGlobalUpdater } from "./Utils/LibPixiGlobalUpdater";
|
|
31
31
|
import { LibPixiPolygonDrawTool } from "./Utils/LibPixiPolygonDrawTool";
|
|
32
|
-
import { LibPixiHtmlText } from
|
|
32
|
+
import { LibPixiHtmlText } from "./Components/Base/LibPixiHtmlText";
|
|
33
|
+
import { LibPixiRectangle } from "./Components/Base/LibPixiRectangle";
|
|
34
|
+
import { LibPixiPolygon } from "./Components/Base/LibPixiPolygon";
|
|
35
|
+
import { LibPixiCircular } from "./Components/Base/LibPixiCircular";
|
|
33
36
|
/** @description 组件 */
|
|
34
37
|
export const Components = {
|
|
35
38
|
Base: {
|
|
@@ -49,6 +52,18 @@ export const Components = {
|
|
|
49
52
|
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectBgColor-矩形
|
|
50
53
|
*/
|
|
51
54
|
LibPixiRectBgColor,
|
|
55
|
+
/** @description 矩形类，可用于一些场景的局部点击，传颜色是为了方便定位，最终可能需要将颜色隐藏掉
|
|
56
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectangle-矩形
|
|
57
|
+
*/
|
|
58
|
+
LibPixiRectangle,
|
|
59
|
+
/** @description 圆形
|
|
60
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiCircular-圆形
|
|
61
|
+
*/
|
|
62
|
+
LibPixiCircular,
|
|
63
|
+
/** @description 多边形类
|
|
64
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygon-多边形
|
|
65
|
+
*/
|
|
66
|
+
LibPixiPolygon,
|
|
52
67
|
/** @description 自定义 Spine 动画
|
|
53
68
|
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSpine-动画
|
|
54
69
|
*/
|
package/lyb-pixi.js
CHANGED
|
@@ -1315,7 +1315,7 @@
|
|
|
1315
1315
|
var ys = arrObjKeys(obj, inspect2);
|
|
1316
1316
|
var isPlainObject = gPO ? gPO(obj) === Object.prototype : obj instanceof Object || obj.constructor === Object;
|
|
1317
1317
|
var protoTag = obj instanceof Object ? "" : "null prototype";
|
|
1318
|
-
var stringTag = !isPlainObject && toStringTag && Object(obj) === obj && toStringTag in obj ? $slice.call(toStr(obj), 8, -1) : protoTag ? "Object" : "";
|
|
1318
|
+
var stringTag = !isPlainObject && toStringTag && Object(obj) === obj && toStringTag in obj ? $slice.call(toStr$1(obj), 8, -1) : protoTag ? "Object" : "";
|
|
1319
1319
|
var constructorTag = isPlainObject || typeof obj.constructor !== "function" ? "" : obj.constructor.name ? obj.constructor.name + " " : "";
|
|
1320
1320
|
var tag = constructorTag + (stringTag || protoTag ? "[" + $join.call($concat$1.call([], stringTag || [], protoTag || []), ": ") + "] " : "");
|
|
1321
1321
|
if (ys.length === 0) {
|
|
@@ -1337,25 +1337,25 @@
|
|
|
1337
1337
|
return $replace$1.call(String(s2), /"/g, """);
|
|
1338
1338
|
}
|
|
1339
1339
|
function isArray$3(obj) {
|
|
1340
|
-
return toStr(obj) === "[object Array]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
|
|
1340
|
+
return toStr$1(obj) === "[object Array]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
|
|
1341
1341
|
}
|
|
1342
1342
|
function isDate(obj) {
|
|
1343
|
-
return toStr(obj) === "[object Date]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
|
|
1343
|
+
return toStr$1(obj) === "[object Date]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
|
|
1344
1344
|
}
|
|
1345
1345
|
function isRegExp$1(obj) {
|
|
1346
|
-
return toStr(obj) === "[object RegExp]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
|
|
1346
|
+
return toStr$1(obj) === "[object RegExp]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
|
|
1347
1347
|
}
|
|
1348
1348
|
function isError(obj) {
|
|
1349
|
-
return toStr(obj) === "[object Error]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
|
|
1349
|
+
return toStr$1(obj) === "[object Error]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
|
|
1350
1350
|
}
|
|
1351
1351
|
function isString(obj) {
|
|
1352
|
-
return toStr(obj) === "[object String]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
|
|
1352
|
+
return toStr$1(obj) === "[object String]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
|
|
1353
1353
|
}
|
|
1354
1354
|
function isNumber(obj) {
|
|
1355
|
-
return toStr(obj) === "[object Number]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
|
|
1355
|
+
return toStr$1(obj) === "[object Number]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
|
|
1356
1356
|
}
|
|
1357
1357
|
function isBoolean(obj) {
|
|
1358
|
-
return toStr(obj) === "[object Boolean]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
|
|
1358
|
+
return toStr$1(obj) === "[object Boolean]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
|
|
1359
1359
|
}
|
|
1360
1360
|
function isSymbol(obj) {
|
|
1361
1361
|
if (hasShammedSymbols) {
|
|
@@ -1391,7 +1391,7 @@
|
|
|
1391
1391
|
function has$3(obj, key) {
|
|
1392
1392
|
return hasOwn$1.call(obj, key);
|
|
1393
1393
|
}
|
|
1394
|
-
function toStr(obj) {
|
|
1394
|
+
function toStr$1(obj) {
|
|
1395
1395
|
return objectToString.call(obj);
|
|
1396
1396
|
}
|
|
1397
1397
|
function nameOf(f2) {
|
|
@@ -1700,7 +1700,7 @@
|
|
|
1700
1700
|
var uri = URIError;
|
|
1701
1701
|
var abs$1 = Math.abs;
|
|
1702
1702
|
var floor$1 = Math.floor;
|
|
1703
|
-
var max$
|
|
1703
|
+
var max$2 = Math.max;
|
|
1704
1704
|
var min$1 = Math.min;
|
|
1705
1705
|
var pow$1 = Math.pow;
|
|
1706
1706
|
var round$2 = Math.round;
|
|
@@ -1833,102 +1833,78 @@
|
|
|
1833
1833
|
Object_getPrototypeOf = $Object2.getPrototypeOf || null;
|
|
1834
1834
|
return Object_getPrototypeOf;
|
|
1835
1835
|
}
|
|
1836
|
-
var
|
|
1837
|
-
var
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
var
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
var
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
|
|
1861
|
-
|
|
1862
|
-
|
|
1863
|
-
var joiny = function(arr, joiner) {
|
|
1864
|
-
var str = "";
|
|
1865
|
-
for (var i2 = 0; i2 < arr.length; i2 += 1) {
|
|
1866
|
-
str += arr[i2];
|
|
1867
|
-
if (i2 + 1 < arr.length) {
|
|
1868
|
-
str += joiner;
|
|
1869
|
-
}
|
|
1836
|
+
var ERROR_MESSAGE = "Function.prototype.bind called on incompatible ";
|
|
1837
|
+
var toStr = Object.prototype.toString;
|
|
1838
|
+
var max$1 = Math.max;
|
|
1839
|
+
var funcType = "[object Function]";
|
|
1840
|
+
var concatty = function concatty2(a2, b2) {
|
|
1841
|
+
var arr = [];
|
|
1842
|
+
for (var i2 = 0; i2 < a2.length; i2 += 1) {
|
|
1843
|
+
arr[i2] = a2[i2];
|
|
1844
|
+
}
|
|
1845
|
+
for (var j2 = 0; j2 < b2.length; j2 += 1) {
|
|
1846
|
+
arr[j2 + a2.length] = b2[j2];
|
|
1847
|
+
}
|
|
1848
|
+
return arr;
|
|
1849
|
+
};
|
|
1850
|
+
var slicy = function slicy2(arrLike, offset) {
|
|
1851
|
+
var arr = [];
|
|
1852
|
+
for (var i2 = offset || 0, j2 = 0; i2 < arrLike.length; i2 += 1, j2 += 1) {
|
|
1853
|
+
arr[j2] = arrLike[i2];
|
|
1854
|
+
}
|
|
1855
|
+
return arr;
|
|
1856
|
+
};
|
|
1857
|
+
var joiny = function(arr, joiner) {
|
|
1858
|
+
var str = "";
|
|
1859
|
+
for (var i2 = 0; i2 < arr.length; i2 += 1) {
|
|
1860
|
+
str += arr[i2];
|
|
1861
|
+
if (i2 + 1 < arr.length) {
|
|
1862
|
+
str += joiner;
|
|
1870
1863
|
}
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
);
|
|
1886
|
-
if (Object(result) === result) {
|
|
1887
|
-
return result;
|
|
1888
|
-
}
|
|
1889
|
-
return this;
|
|
1890
|
-
}
|
|
1891
|
-
return target.apply(
|
|
1892
|
-
that,
|
|
1864
|
+
}
|
|
1865
|
+
return str;
|
|
1866
|
+
};
|
|
1867
|
+
var implementation$1 = function bind2(that) {
|
|
1868
|
+
var target = this;
|
|
1869
|
+
if (typeof target !== "function" || toStr.apply(target) !== funcType) {
|
|
1870
|
+
throw new TypeError(ERROR_MESSAGE + target);
|
|
1871
|
+
}
|
|
1872
|
+
var args = slicy(arguments, 1);
|
|
1873
|
+
var bound;
|
|
1874
|
+
var binder = function() {
|
|
1875
|
+
if (this instanceof bound) {
|
|
1876
|
+
var result = target.apply(
|
|
1877
|
+
this,
|
|
1893
1878
|
concatty(args, arguments)
|
|
1894
1879
|
);
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
boundArgs[i2] = "$" + i2;
|
|
1900
|
-
}
|
|
1901
|
-
bound = Function("binder", "return function (" + joiny(boundArgs, ",") + "){ return binder.apply(this,arguments); }")(binder);
|
|
1902
|
-
if (target.prototype) {
|
|
1903
|
-
var Empty = function Empty2() {
|
|
1904
|
-
};
|
|
1905
|
-
Empty.prototype = target.prototype;
|
|
1906
|
-
bound.prototype = new Empty();
|
|
1907
|
-
Empty.prototype = null;
|
|
1880
|
+
if (Object(result) === result) {
|
|
1881
|
+
return result;
|
|
1882
|
+
}
|
|
1883
|
+
return this;
|
|
1908
1884
|
}
|
|
1909
|
-
return
|
|
1885
|
+
return target.apply(
|
|
1886
|
+
that,
|
|
1887
|
+
concatty(args, arguments)
|
|
1888
|
+
);
|
|
1910
1889
|
};
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
functionCall = Function.prototype.call;
|
|
1930
|
-
return functionCall;
|
|
1931
|
-
}
|
|
1890
|
+
var boundLength = max$1(0, target.length - args.length);
|
|
1891
|
+
var boundArgs = [];
|
|
1892
|
+
for (var i2 = 0; i2 < boundLength; i2++) {
|
|
1893
|
+
boundArgs[i2] = "$" + i2;
|
|
1894
|
+
}
|
|
1895
|
+
bound = Function("binder", "return function (" + joiny(boundArgs, ",") + "){ return binder.apply(this,arguments); }")(binder);
|
|
1896
|
+
if (target.prototype) {
|
|
1897
|
+
var Empty = function Empty2() {
|
|
1898
|
+
};
|
|
1899
|
+
Empty.prototype = target.prototype;
|
|
1900
|
+
bound.prototype = new Empty();
|
|
1901
|
+
Empty.prototype = null;
|
|
1902
|
+
}
|
|
1903
|
+
return bound;
|
|
1904
|
+
};
|
|
1905
|
+
var implementation = implementation$1;
|
|
1906
|
+
var functionBind = Function.prototype.bind || implementation;
|
|
1907
|
+
var functionCall = Function.prototype.call;
|
|
1932
1908
|
var functionApply;
|
|
1933
1909
|
var hasRequiredFunctionApply;
|
|
1934
1910
|
function requireFunctionApply() {
|
|
@@ -1939,14 +1915,14 @@
|
|
|
1939
1915
|
return functionApply;
|
|
1940
1916
|
}
|
|
1941
1917
|
var reflectApply = typeof Reflect !== "undefined" && Reflect && Reflect.apply;
|
|
1942
|
-
var bind$2 =
|
|
1918
|
+
var bind$2 = functionBind;
|
|
1943
1919
|
var $apply$1 = requireFunctionApply();
|
|
1944
|
-
var $call$2 =
|
|
1920
|
+
var $call$2 = functionCall;
|
|
1945
1921
|
var $reflectApply = reflectApply;
|
|
1946
1922
|
var actualApply = $reflectApply || bind$2.call($call$2, $apply$1);
|
|
1947
|
-
var bind$1 =
|
|
1923
|
+
var bind$1 = functionBind;
|
|
1948
1924
|
var $TypeError$4 = type;
|
|
1949
|
-
var $call$1 =
|
|
1925
|
+
var $call$1 = functionCall;
|
|
1950
1926
|
var $actualApply = actualApply;
|
|
1951
1927
|
var callBindApplyHelpers = function callBindBasic2(args) {
|
|
1952
1928
|
if (args.length < 1 || typeof args[0] !== "function") {
|
|
@@ -2015,7 +1991,7 @@
|
|
|
2015
1991
|
hasRequiredHasown = 1;
|
|
2016
1992
|
var call = Function.prototype.call;
|
|
2017
1993
|
var $hasOwn = Object.prototype.hasOwnProperty;
|
|
2018
|
-
var bind2 =
|
|
1994
|
+
var bind2 = functionBind;
|
|
2019
1995
|
hasown = bind2.call(call, $hasOwn);
|
|
2020
1996
|
return hasown;
|
|
2021
1997
|
}
|
|
@@ -2030,7 +2006,7 @@
|
|
|
2030
2006
|
var $URIError = uri;
|
|
2031
2007
|
var abs = abs$1;
|
|
2032
2008
|
var floor = floor$1;
|
|
2033
|
-
var max = max$
|
|
2009
|
+
var max = max$2;
|
|
2034
2010
|
var min = min$1;
|
|
2035
2011
|
var pow = pow$1;
|
|
2036
2012
|
var round$1 = round$2;
|
|
@@ -2064,7 +2040,7 @@
|
|
|
2064
2040
|
var $ObjectGPO = requireObject_getPrototypeOf();
|
|
2065
2041
|
var $ReflectGPO = requireReflect_getPrototypeOf();
|
|
2066
2042
|
var $apply = requireFunctionApply();
|
|
2067
|
-
var $call =
|
|
2043
|
+
var $call = functionCall;
|
|
2068
2044
|
var needsEval = {};
|
|
2069
2045
|
var TypedArray = typeof Uint8Array === "undefined" || !getProto ? undefined$1 : getProto(Uint8Array);
|
|
2070
2046
|
var INTRINSICS = {
|
|
@@ -2234,7 +2210,7 @@
|
|
|
2234
2210
|
"%WeakMapPrototype%": ["WeakMap", "prototype"],
|
|
2235
2211
|
"%WeakSetPrototype%": ["WeakSet", "prototype"]
|
|
2236
2212
|
};
|
|
2237
|
-
var bind =
|
|
2213
|
+
var bind = functionBind;
|
|
2238
2214
|
var hasOwn = requireHasown();
|
|
2239
2215
|
var $concat = bind.call($call, Array.prototype.concat);
|
|
2240
2216
|
var $spliceApply = bind.call($apply, Array.prototype.splice);
|
|
@@ -25775,7 +25751,7 @@ void main(void)\r
|
|
|
25775
25751
|
return _isFunction(value) || _isString(value);
|
|
25776
25752
|
}, _isTypedArray = typeof ArrayBuffer === "function" && ArrayBuffer.isView || function() {
|
|
25777
25753
|
}, _isArray = Array.isArray, _strictNumExp = /(?:-?\.?\d|\.)+/gi, _numExp = /[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g, _numWithUnitExp = /[-+=.]*\d+[.e-]*\d*[a-z%]*/g, _complexStringNumExp = /[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi, _relExp = /[+-]=-?[.\d]+/, _delimitedValueExp = /[^,'"\[\]\s]+/gi, _unitExp = /^[+\-=e\s\d]*\d+[.\d]*([a-z]*|%)\s*$/i, _globalTimeline, _win$1, _coreInitted, _doc$1, _globals = {}, _installScope = {}, _coreReady, _install = function _install2(scope) {
|
|
25778
|
-
return (_installScope = _merge(scope, _globals)) && gsap;
|
|
25754
|
+
return (_installScope = _merge(scope, _globals)) && gsap$1;
|
|
25779
25755
|
}, _missingPlugin = function _missingPlugin2(property, value) {
|
|
25780
25756
|
return console.warn("Invalid property", property, "set to", value, "Missing plugin? gsap.registerPlugin()");
|
|
25781
25757
|
}, _warn = function _warn2(message, suppress) {
|
|
@@ -26403,7 +26379,7 @@ void main(void)\r
|
|
|
26403
26379
|
name = (name === "css" ? "CSS" : name.charAt(0).toUpperCase() + name.substr(1)) + "Plugin";
|
|
26404
26380
|
}
|
|
26405
26381
|
_addGlobal(name, Plugin);
|
|
26406
|
-
config.register && config.register(gsap, Plugin, PropTween);
|
|
26382
|
+
config.register && config.register(gsap$1, Plugin, PropTween);
|
|
26407
26383
|
} else {
|
|
26408
26384
|
_registerPluginQueue.push(config);
|
|
26409
26385
|
}
|
|
@@ -26580,8 +26556,8 @@ void main(void)\r
|
|
|
26580
26556
|
if (!_coreInitted && _windowExists$1()) {
|
|
26581
26557
|
_win$1 = _coreInitted = window;
|
|
26582
26558
|
_doc$1 = _win$1.document || {};
|
|
26583
|
-
_globals.gsap = gsap;
|
|
26584
|
-
(_win$1.gsapVersions || (_win$1.gsapVersions = [])).push(gsap.version);
|
|
26559
|
+
_globals.gsap = gsap$1;
|
|
26560
|
+
(_win$1.gsapVersions || (_win$1.gsapVersions = [])).push(gsap$1.version);
|
|
26585
26561
|
_install(_installScope || _win$1.GreenSockGlobals || !_win$1.gsap && _win$1 || {});
|
|
26586
26562
|
_registerPluginQueue.forEach(_createPlugin);
|
|
26587
26563
|
}
|
|
@@ -28447,7 +28423,7 @@ void main(void)\r
|
|
|
28447
28423
|
target = toArray(target);
|
|
28448
28424
|
if (target.length > 1) {
|
|
28449
28425
|
var setters = target.map(function(t2) {
|
|
28450
|
-
return gsap.quickSetter(t2, property, unit);
|
|
28426
|
+
return gsap$1.quickSetter(t2, property, unit);
|
|
28451
28427
|
}), l2 = setters.length;
|
|
28452
28428
|
return function(value) {
|
|
28453
28429
|
var i2 = l2;
|
|
@@ -28470,7 +28446,7 @@ void main(void)\r
|
|
|
28470
28446
|
},
|
|
28471
28447
|
quickTo: function quickTo(target, property, vars) {
|
|
28472
28448
|
var _merge2;
|
|
28473
|
-
var tween = gsap.to(target, _merge((_merge2 = {}, _merge2[property] = "+=0.1", _merge2.paused = true, _merge2), vars || {})), func = function func2(value, start, startIsRelative) {
|
|
28449
|
+
var tween = gsap$1.to(target, _merge((_merge2 = {}, _merge2[property] = "+=0.1", _merge2.paused = true, _merge2), vars || {})), func = function func2(value, start, startIsRelative) {
|
|
28474
28450
|
return tween.resetTo(property, value, start, startIsRelative);
|
|
28475
28451
|
};
|
|
28476
28452
|
func.tween = tween;
|
|
@@ -28656,7 +28632,7 @@ void main(void)\r
|
|
|
28656
28632
|
}
|
|
28657
28633
|
};
|
|
28658
28634
|
};
|
|
28659
|
-
var gsap = _gsap.registerPlugin({
|
|
28635
|
+
var gsap$1 = _gsap.registerPlugin({
|
|
28660
28636
|
name: "attr",
|
|
28661
28637
|
init: function init2(target, vars, tween, index, targets) {
|
|
28662
28638
|
var p2, pt, v2;
|
|
@@ -28685,7 +28661,7 @@ void main(void)\r
|
|
|
28685
28661
|
}
|
|
28686
28662
|
}
|
|
28687
28663
|
}, _buildModifierPlugin("roundProps", _roundModifier), _buildModifierPlugin("modifiers"), _buildModifierPlugin("snap", snap)) || _gsap;
|
|
28688
|
-
Tween.version = Timeline$1.version = gsap.version = "3.12.5";
|
|
28664
|
+
Tween.version = Timeline$1.version = gsap$1.version = "3.12.5";
|
|
28689
28665
|
_coreReady = 1;
|
|
28690
28666
|
_windowExists$1() && _wake();
|
|
28691
28667
|
_easeMap.Power0;
|
|
@@ -28813,7 +28789,7 @@ void main(void)\r
|
|
|
28813
28789
|
revert: _revertStyle,
|
|
28814
28790
|
save: _saveStyle
|
|
28815
28791
|
};
|
|
28816
|
-
target._gsap || gsap.core.getCache(target);
|
|
28792
|
+
target._gsap || gsap$1.core.getCache(target);
|
|
28817
28793
|
properties && properties.split(",").forEach(function(p2) {
|
|
28818
28794
|
return saver.save(p2);
|
|
28819
28795
|
});
|
|
@@ -28846,7 +28822,7 @@ void main(void)\r
|
|
|
28846
28822
|
_transformOriginProp = _transformProp + "Origin";
|
|
28847
28823
|
_tempDiv.style.cssText = "border-width:0;line-height:0;position:absolute;padding:0";
|
|
28848
28824
|
_supports3D = !!_checkPropPrefix("perspective");
|
|
28849
|
-
_reverting = gsap.core.reverting;
|
|
28825
|
+
_reverting = gsap$1.core.reverting;
|
|
28850
28826
|
_pluginInitted = 1;
|
|
28851
28827
|
}
|
|
28852
28828
|
}, _getBBoxHack = function _getBBoxHack2(swapIfPossible) {
|
|
@@ -29720,8 +29696,8 @@ void main(void)\r
|
|
|
29720
29696
|
_getMatrix
|
|
29721
29697
|
}
|
|
29722
29698
|
};
|
|
29723
|
-
gsap.utils.checkPrefix = _checkPropPrefix;
|
|
29724
|
-
gsap.core.getStyleSaver = _getStyleSaver;
|
|
29699
|
+
gsap$1.utils.checkPrefix = _checkPropPrefix;
|
|
29700
|
+
gsap$1.core.getStyleSaver = _getStyleSaver;
|
|
29725
29701
|
(function(positionAndScale, rotation, others, aliases) {
|
|
29726
29702
|
var all = _forEachName(positionAndScale + "," + rotation + "," + others, function(name) {
|
|
29727
29703
|
_transformProps[name] = 1;
|
|
@@ -29739,8 +29715,8 @@ void main(void)\r
|
|
|
29739
29715
|
_forEachName("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective", function(name) {
|
|
29740
29716
|
_config.units[name] = "px";
|
|
29741
29717
|
});
|
|
29742
|
-
gsap.registerPlugin(CSSPlugin);
|
|
29743
|
-
var gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap;
|
|
29718
|
+
gsap$1.registerPlugin(CSSPlugin);
|
|
29719
|
+
var gsapWithCSS = gsap$1.registerPlugin(CSSPlugin) || gsap$1;
|
|
29744
29720
|
gsapWithCSS.core.Tween;
|
|
29745
29721
|
class LibPixiRectBgColor extends Graphics {
|
|
29746
29722
|
constructor(options) {
|
|
@@ -29781,7 +29757,6 @@ void main(void)\r
|
|
|
29781
29757
|
this.tint = this.bgColor;
|
|
29782
29758
|
} else {
|
|
29783
29759
|
this.beginFill(this.bgColor, this.bgAlpha);
|
|
29784
|
-
this.borderWidth && this.lineStyle(this.borderWidth, this.borderColor, 1);
|
|
29785
29760
|
}
|
|
29786
29761
|
this.borderWidth && this.lineStyle(this.borderWidth, this.borderColor, 1);
|
|
29787
29762
|
if (this.radius !== 0) {
|
|
@@ -49246,9 +49221,28 @@ void main(void)\r
|
|
|
49246
49221
|
}
|
|
49247
49222
|
}
|
|
49248
49223
|
}
|
|
49224
|
+
class LibPixiRectangle extends Graphics {
|
|
49225
|
+
constructor(width, height, color) {
|
|
49226
|
+
super();
|
|
49227
|
+
this.beginFill(color || 0);
|
|
49228
|
+
this.drawRect(0, 0, width, height);
|
|
49229
|
+
this.endFill();
|
|
49230
|
+
if (!color) {
|
|
49231
|
+
this.alpha = 0;
|
|
49232
|
+
}
|
|
49233
|
+
}
|
|
49234
|
+
}
|
|
49249
49235
|
class LibPixiScrollContainerY extends LibPixiContainer {
|
|
49250
49236
|
constructor(params) {
|
|
49251
|
-
const {
|
|
49237
|
+
const {
|
|
49238
|
+
width,
|
|
49239
|
+
height,
|
|
49240
|
+
scrollbar = false,
|
|
49241
|
+
scrollContent,
|
|
49242
|
+
scrollbarRgiht,
|
|
49243
|
+
scrollbarWidth = 10,
|
|
49244
|
+
scrollbarColor = "#F8A500"
|
|
49245
|
+
} = params;
|
|
49252
49246
|
super(width, height);
|
|
49253
49247
|
this._startY = 0;
|
|
49254
49248
|
this._velocity = 0;
|
|
@@ -49256,23 +49250,49 @@ void main(void)\r
|
|
|
49256
49250
|
this._startPosition = 0;
|
|
49257
49251
|
this._scrollSpeed = 200;
|
|
49258
49252
|
this._isDragging = false;
|
|
49253
|
+
this._scrollbarDragging = false;
|
|
49254
|
+
this._scrollbarDragOffset = 0;
|
|
49259
49255
|
this._scrollContent = scrollContent;
|
|
49256
|
+
this._scrollbarColor = scrollbarColor;
|
|
49260
49257
|
this._content = new Container();
|
|
49261
49258
|
this.addChild(this._content);
|
|
49262
49259
|
this._content.addChild(this._scrollContent);
|
|
49263
|
-
this._maskGraphics = new
|
|
49260
|
+
this._maskGraphics = new LibPixiRectangle(width, height, "#000");
|
|
49264
49261
|
this.addChild(this._maskGraphics);
|
|
49265
|
-
this._maskGraphics.clear();
|
|
49266
|
-
this._maskGraphics.beginFill(0);
|
|
49267
|
-
this._maskGraphics.drawRect(0, 0, width, height);
|
|
49268
|
-
this._maskGraphics.endFill();
|
|
49269
49262
|
this.mask = this._maskGraphics;
|
|
49263
|
+
this._scrollbar = new LibPixiRectangle(
|
|
49264
|
+
scrollbarWidth,
|
|
49265
|
+
height,
|
|
49266
|
+
this._scrollbarColor
|
|
49267
|
+
);
|
|
49268
|
+
this._scrollbar.x = width - (scrollbarRgiht || scrollbarWidth);
|
|
49269
|
+
this.addChild(this._scrollbar);
|
|
49270
|
+
this._scrollbar.visible = scrollbar;
|
|
49271
|
+
this._updateScrollbar();
|
|
49272
|
+
libPixiEvent(
|
|
49273
|
+
this._scrollbar,
|
|
49274
|
+
"pointerdown",
|
|
49275
|
+
this._onScrollbarDragStart.bind(this)
|
|
49276
|
+
);
|
|
49270
49277
|
this.eventMode = "static";
|
|
49271
49278
|
this.on("pointerdown", this._onDragStart, this);
|
|
49272
|
-
this
|
|
49273
|
-
|
|
49274
|
-
|
|
49275
|
-
this
|
|
49279
|
+
libPixiEvent(this, "pointerdown", (event) => {
|
|
49280
|
+
this._onDragStart(event);
|
|
49281
|
+
});
|
|
49282
|
+
libPixiEvent(this, "pointermove", (event) => {
|
|
49283
|
+
this._onScrollbarDragMove(event);
|
|
49284
|
+
this._onDragMove(event);
|
|
49285
|
+
});
|
|
49286
|
+
libPixiEvent(this, "pointerup", (event) => {
|
|
49287
|
+
this._onScrollbarDragEnd(event);
|
|
49288
|
+
this._onDragEnd();
|
|
49289
|
+
});
|
|
49290
|
+
libPixiEvent(this, "wheel", (event) => {
|
|
49291
|
+
this._onWheelScroll(event);
|
|
49292
|
+
});
|
|
49293
|
+
libPixiEvent(this, "pointerupoutside", () => {
|
|
49294
|
+
this._onDragEnd();
|
|
49295
|
+
});
|
|
49276
49296
|
}
|
|
49277
49297
|
/** @description 设置滚动容器可视区宽高
|
|
49278
49298
|
* @param width 宽度
|
|
@@ -49287,7 +49307,7 @@ void main(void)\r
|
|
|
49287
49307
|
}
|
|
49288
49308
|
/** @description 返回顶部 */
|
|
49289
49309
|
scrollToTop() {
|
|
49290
|
-
|
|
49310
|
+
gsap.killTweensOf(this._content);
|
|
49291
49311
|
this._content.y = 0;
|
|
49292
49312
|
}
|
|
49293
49313
|
/** @description 往滚动内容添加元素 */
|
|
@@ -49304,7 +49324,7 @@ void main(void)\r
|
|
|
49304
49324
|
this._velocity = 0;
|
|
49305
49325
|
this._startTime = Date.now();
|
|
49306
49326
|
this._startPosition = this._content.y;
|
|
49307
|
-
|
|
49327
|
+
gsap.killTweensOf(this._content);
|
|
49308
49328
|
}
|
|
49309
49329
|
/** @description 拖动 */
|
|
49310
49330
|
_onDragMove(event) {
|
|
@@ -49313,10 +49333,12 @@ void main(void)\r
|
|
|
49313
49333
|
const newPosition = position.y - this._startY;
|
|
49314
49334
|
this._content.y = newPosition;
|
|
49315
49335
|
}
|
|
49336
|
+
this._updateScrollbar();
|
|
49316
49337
|
}
|
|
49317
49338
|
/** @description 拖动结束 */
|
|
49318
49339
|
_onDragEnd() {
|
|
49319
49340
|
this._isDragging = false;
|
|
49341
|
+
this._scrollbarDragging = false;
|
|
49320
49342
|
const currentTime = Date.now();
|
|
49321
49343
|
const deltaTime = currentTime - this._startTime;
|
|
49322
49344
|
if (deltaTime < 250) {
|
|
@@ -49337,45 +49359,111 @@ void main(void)\r
|
|
|
49337
49359
|
} else if (Math.abs(y2) >= this._content.height - this._maskGraphics.height) {
|
|
49338
49360
|
y2 = -(this._content.height - this._maskGraphics.height);
|
|
49339
49361
|
}
|
|
49340
|
-
|
|
49362
|
+
gsap.to(this._content, {
|
|
49341
49363
|
duration: 0.25,
|
|
49342
49364
|
ease: "power1.out",
|
|
49343
|
-
y: y2
|
|
49365
|
+
y: y2,
|
|
49366
|
+
onUpdate: () => {
|
|
49367
|
+
this._updateScrollbar();
|
|
49368
|
+
}
|
|
49344
49369
|
});
|
|
49345
49370
|
}
|
|
49346
49371
|
/** @description 惯性动画 */
|
|
49347
49372
|
_applyInertia() {
|
|
49348
|
-
|
|
49373
|
+
gsap.to(this._content, {
|
|
49349
49374
|
y: this._content.y + this._velocity * 250,
|
|
49350
49375
|
duration: 0.5,
|
|
49351
49376
|
ease: "power1.out",
|
|
49352
|
-
onUpdate:
|
|
49377
|
+
onUpdate: () => {
|
|
49378
|
+
this._limitScrollRange();
|
|
49379
|
+
this._updateScrollbar();
|
|
49380
|
+
}
|
|
49353
49381
|
});
|
|
49354
49382
|
}
|
|
49355
49383
|
/** @description 限制滚动范围 */
|
|
49356
49384
|
_limitScrollRange() {
|
|
49357
49385
|
if (this._content.y > 0) {
|
|
49358
|
-
|
|
49386
|
+
gsap.to(this._content, {
|
|
49359
49387
|
duration: 0.75,
|
|
49360
49388
|
y: 0,
|
|
49361
|
-
ease: "elastic.out"
|
|
49389
|
+
ease: "elastic.out",
|
|
49390
|
+
onUpdate: () => {
|
|
49391
|
+
this._updateScrollbar();
|
|
49392
|
+
}
|
|
49362
49393
|
});
|
|
49363
49394
|
} else if (Math.abs(this._content.y) >= this._content.height - this._maskGraphics.height) {
|
|
49364
49395
|
if (this._content.height > this._maskGraphics.height) {
|
|
49365
49396
|
const y2 = -(this._content.height - this._maskGraphics.height);
|
|
49366
|
-
|
|
49397
|
+
gsap.to(this._content, {
|
|
49367
49398
|
duration: 0.75,
|
|
49368
49399
|
y: y2,
|
|
49369
|
-
ease: "elastic.out"
|
|
49400
|
+
ease: "elastic.out",
|
|
49401
|
+
onUpdate: () => {
|
|
49402
|
+
this._updateScrollbar();
|
|
49403
|
+
}
|
|
49370
49404
|
});
|
|
49371
49405
|
} else {
|
|
49372
|
-
|
|
49406
|
+
gsap.to(this._content, {
|
|
49373
49407
|
duration: 0.25,
|
|
49374
|
-
y: 0
|
|
49408
|
+
y: 0,
|
|
49409
|
+
onUpdate: () => {
|
|
49410
|
+
this._updateScrollbar();
|
|
49411
|
+
}
|
|
49375
49412
|
});
|
|
49376
49413
|
}
|
|
49377
49414
|
}
|
|
49378
49415
|
}
|
|
49416
|
+
/** @description 更新滚动位置 */
|
|
49417
|
+
_updateScrollbar() {
|
|
49418
|
+
const viewHeight = this._maskGraphics.height;
|
|
49419
|
+
const contentHeight = this._content.height;
|
|
49420
|
+
if (contentHeight <= viewHeight) {
|
|
49421
|
+
this._scrollbar.visible = false;
|
|
49422
|
+
return;
|
|
49423
|
+
}
|
|
49424
|
+
this._scrollbar.visible = true;
|
|
49425
|
+
const ratio = viewHeight / contentHeight;
|
|
49426
|
+
const barHeight = viewHeight * ratio;
|
|
49427
|
+
const maxScrollY = contentHeight - viewHeight;
|
|
49428
|
+
const scrollY = Math.min(Math.max(-this._content.y, 0), maxScrollY);
|
|
49429
|
+
const barY = scrollY / maxScrollY * (viewHeight - barHeight);
|
|
49430
|
+
this._scrollbar.clear();
|
|
49431
|
+
this._scrollbar.beginFill(this._scrollbarColor);
|
|
49432
|
+
this._scrollbar.drawRect(0, 0, 10, barHeight);
|
|
49433
|
+
this._scrollbar.endFill();
|
|
49434
|
+
this._scrollbar.y = barY;
|
|
49435
|
+
}
|
|
49436
|
+
/** @description 滚动条按下 */
|
|
49437
|
+
_onScrollbarDragStart(event) {
|
|
49438
|
+
event.stopPropagation();
|
|
49439
|
+
this._scrollbarDragging = true;
|
|
49440
|
+
this._scrollbarDragOffset = event.getLocalPosition(this._scrollbar).y;
|
|
49441
|
+
gsap.killTweensOf(this._content);
|
|
49442
|
+
}
|
|
49443
|
+
/** @description 滚动条移动 */
|
|
49444
|
+
_onScrollbarDragMove(event) {
|
|
49445
|
+
event.stopPropagation();
|
|
49446
|
+
if (!this._scrollbarDragging)
|
|
49447
|
+
return;
|
|
49448
|
+
const localY = event.getLocalPosition(this).y;
|
|
49449
|
+
const viewHeight = this._maskGraphics.height;
|
|
49450
|
+
const contentHeight = this._content.height;
|
|
49451
|
+
const ratio = viewHeight / contentHeight;
|
|
49452
|
+
const barHeight = viewHeight * ratio;
|
|
49453
|
+
const maxBarY = viewHeight - barHeight;
|
|
49454
|
+
const newBarY = Math.min(
|
|
49455
|
+
Math.max(localY - this._scrollbarDragOffset, 0),
|
|
49456
|
+
maxBarY
|
|
49457
|
+
);
|
|
49458
|
+
const scrollY = newBarY / maxBarY * (contentHeight - viewHeight);
|
|
49459
|
+
this._content.y = -scrollY;
|
|
49460
|
+
this._updateScrollbar();
|
|
49461
|
+
}
|
|
49462
|
+
/** @description 滚动条松开 */
|
|
49463
|
+
_onScrollbarDragEnd(event) {
|
|
49464
|
+
event.stopPropagation();
|
|
49465
|
+
this._scrollbarDragging = false;
|
|
49466
|
+
}
|
|
49379
49467
|
}
|
|
49380
49468
|
const LibJsLerp = (start, end, value) => {
|
|
49381
49469
|
const t2 = Math.min(Math.max(value, 0), 1);
|
|
@@ -54877,6 +54965,25 @@ void main(void){
|
|
|
54877
54965
|
}
|
|
54878
54966
|
}
|
|
54879
54967
|
}
|
|
54968
|
+
class LibPixiPolygon extends Graphics {
|
|
54969
|
+
constructor(points, color) {
|
|
54970
|
+
super();
|
|
54971
|
+
this.beginFill(color || 0);
|
|
54972
|
+
this.drawPolygon(points);
|
|
54973
|
+
this.endFill();
|
|
54974
|
+
if (!color) {
|
|
54975
|
+
this.alpha = 0;
|
|
54976
|
+
}
|
|
54977
|
+
}
|
|
54978
|
+
}
|
|
54979
|
+
class LibPixiCircular extends Graphics {
|
|
54980
|
+
constructor(radius, color) {
|
|
54981
|
+
super();
|
|
54982
|
+
this.beginFill(color);
|
|
54983
|
+
this.drawCircle(0, 0, radius);
|
|
54984
|
+
this.endFill();
|
|
54985
|
+
}
|
|
54986
|
+
}
|
|
54880
54987
|
const Components = {
|
|
54881
54988
|
Base: {
|
|
54882
54989
|
/** @description 自定义位图文本
|
|
@@ -54895,6 +55002,18 @@ void main(void){
|
|
|
54895
55002
|
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectBgColor-矩形
|
|
54896
55003
|
*/
|
|
54897
55004
|
LibPixiRectBgColor,
|
|
55005
|
+
/** @description 矩形类，可用于一些场景的局部点击，传颜色是为了方便定位，最终可能需要将颜色隐藏掉
|
|
55006
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectangle-矩形
|
|
55007
|
+
*/
|
|
55008
|
+
LibPixiRectangle,
|
|
55009
|
+
/** @description 圆形
|
|
55010
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiCircular-圆形
|
|
55011
|
+
*/
|
|
55012
|
+
LibPixiCircular,
|
|
55013
|
+
/** @description 多边形类
|
|
55014
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygon-多边形
|
|
55015
|
+
*/
|
|
55016
|
+
LibPixiPolygon,
|
|
54898
55017
|
/** @description 自定义 Spine 动画
|
|
54899
55018
|
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSpine-动画
|
|
54900
55019
|
*/
|