lyb-pixi-js 1.12.3 → 1.12.5
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/Utils/LibPixiArrangeLinear.d.ts +2 -1
- package/Utils/LibPixiArrangeLinear.js +25 -9
- package/Utils/LibPixiEvent.js +5 -2
- package/libPixiJs.d.ts +1 -1
- package/lyb-pixi.js +31 -9
- package/package.json +1 -1
|
@@ -4,6 +4,7 @@ import { Container } from "pixi.js";
|
|
|
4
4
|
* @param items 要排列的元素数组。
|
|
5
5
|
* @param gap 元素之间的间隔,可以是固定间隔或自定义的间隔数组。
|
|
6
6
|
* @param direction 排列方向,"x"表示水平,"y"表示垂直,默认为水平。
|
|
7
|
+
* @param cols 列数,默认为元素数量。
|
|
7
8
|
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiArrangeLinear-间隔布局
|
|
8
9
|
*/
|
|
9
|
-
export declare const LibPixiArrangeLinear: (items: Container[], gap: number | number[], direction?: "x" | "y") => void;
|
|
10
|
+
export declare const LibPixiArrangeLinear: (items: Container[], gap: number | number[], direction?: "x" | "y", cols?: number) => void;
|
|
@@ -3,27 +3,43 @@
|
|
|
3
3
|
* @param items 要排列的元素数组。
|
|
4
4
|
* @param gap 元素之间的间隔,可以是固定间隔或自定义的间隔数组。
|
|
5
5
|
* @param direction 排列方向,"x"表示水平,"y"表示垂直,默认为水平。
|
|
6
|
+
* @param cols 列数,默认为元素数量。
|
|
6
7
|
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiArrangeLinear-间隔布局
|
|
7
8
|
*/
|
|
8
|
-
export const LibPixiArrangeLinear = (items, gap, direction = "x") => {
|
|
9
|
+
export const LibPixiArrangeLinear = (items, gap, direction = "x", cols = Infinity) => {
|
|
9
10
|
if (Array.isArray(gap)) {
|
|
10
11
|
if (gap.length !== items.length - 1) {
|
|
11
12
|
console.error(new Error("间隔的数组长度只能等于元素数组长度-1"));
|
|
12
13
|
return;
|
|
13
14
|
}
|
|
14
15
|
}
|
|
15
|
-
let
|
|
16
|
+
let lastRowMax = 0; // 记录当前行/列最大高度或宽度
|
|
17
|
+
let rowOffset = 0; // 累计偏移量(多行时用)
|
|
16
18
|
items.forEach((item, index) => {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
19
|
+
var _a, _b;
|
|
20
|
+
const row = Math.floor(index / cols);
|
|
21
|
+
const col = index % cols;
|
|
20
22
|
if (direction === "x") {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
+
const gapValue = Array.isArray(gap) ? (_a = gap[index - 1]) !== null && _a !== void 0 ? _a : 0 : gap;
|
|
24
|
+
if (col === 0 && row > 0) {
|
|
25
|
+
rowOffset += lastRowMax + gapValue;
|
|
26
|
+
lastRowMax = 0;
|
|
27
|
+
}
|
|
28
|
+
item.x =
|
|
29
|
+
col === 0 ? 0 : items[index - 1].x + items[index - 1].width + gapValue;
|
|
30
|
+
item.y = rowOffset;
|
|
31
|
+
lastRowMax = Math.max(lastRowMax, item.height);
|
|
23
32
|
}
|
|
24
33
|
else {
|
|
25
|
-
|
|
26
|
-
|
|
34
|
+
const gapValue = Array.isArray(gap) ? (_b = gap[index - 1]) !== null && _b !== void 0 ? _b : 0 : gap;
|
|
35
|
+
if (col === 0 && row > 0) {
|
|
36
|
+
rowOffset += lastRowMax + gapValue;
|
|
37
|
+
lastRowMax = 0;
|
|
38
|
+
}
|
|
39
|
+
item.y =
|
|
40
|
+
col === 0 ? 0 : items[index - 1].y + items[index - 1].height + gapValue;
|
|
41
|
+
item.x = rowOffset;
|
|
42
|
+
lastRowMax = Math.max(lastRowMax, item.width);
|
|
27
43
|
}
|
|
28
44
|
});
|
|
29
45
|
};
|
package/Utils/LibPixiEvent.js
CHANGED
|
@@ -21,7 +21,7 @@ const debounceImmediate = (func, wait) => {
|
|
|
21
21
|
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiEvent-事件注册
|
|
22
22
|
*/
|
|
23
23
|
export const libPixiEvent = (v, eventName, callback, params = {}) => {
|
|
24
|
-
const { once = false, debounce = false, debounceTime = 1000, preventDragClick = false } = params;
|
|
24
|
+
const { once = false, debounce = false, debounceTime = 1000, preventDragClick = false, } = params;
|
|
25
25
|
v.cursor = "pointer";
|
|
26
26
|
v.eventMode = "static";
|
|
27
27
|
let lastX = 0;
|
|
@@ -32,8 +32,11 @@ export const libPixiEvent = (v, eventName, callback, params = {}) => {
|
|
|
32
32
|
isDragging = false;
|
|
33
33
|
lastX = e.globalX;
|
|
34
34
|
lastY = e.globalY;
|
|
35
|
+
const threshold = 10; // 阈值像素
|
|
35
36
|
const moveHandler = (ev) => {
|
|
36
|
-
|
|
37
|
+
const dx = ev.globalX - lastX;
|
|
38
|
+
const dy = ev.globalY - lastY;
|
|
39
|
+
if (dx * dx + dy * dy > threshold * threshold) {
|
|
37
40
|
isDragging = true;
|
|
38
41
|
}
|
|
39
42
|
};
|
package/libPixiJs.d.ts
CHANGED
|
@@ -274,7 +274,7 @@ export declare const Utils: {
|
|
|
274
274
|
* @param direction 排列方向,"x"表示水平,"y"表示垂直,默认为水平。
|
|
275
275
|
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiArrangeLinear-间隔布局
|
|
276
276
|
*/
|
|
277
|
-
LibPixiArrangeLinear: (items: import("pixi.js").Container[], gap: number | number[], direction?: "x" | "y") => void;
|
|
277
|
+
LibPixiArrangeLinear: (items: import("pixi.js").Container[], gap: number | number[], direction?: "x" | "y", cols?: number) => void;
|
|
278
278
|
/** @description 触发后代监听
|
|
279
279
|
* @param container 容器
|
|
280
280
|
* @param event 事件名称
|
package/lyb-pixi.js
CHANGED
|
@@ -48800,7 +48800,12 @@ void main(void)\r
|
|
|
48800
48800
|
};
|
|
48801
48801
|
};
|
|
48802
48802
|
const libPixiEvent = (v2, eventName, callback, params = {}) => {
|
|
48803
|
-
const {
|
|
48803
|
+
const {
|
|
48804
|
+
once = false,
|
|
48805
|
+
debounce = false,
|
|
48806
|
+
debounceTime = 1e3,
|
|
48807
|
+
preventDragClick = false
|
|
48808
|
+
} = params;
|
|
48804
48809
|
v2.cursor = "pointer";
|
|
48805
48810
|
v2.eventMode = "static";
|
|
48806
48811
|
let lastX = 0;
|
|
@@ -48811,8 +48816,11 @@ void main(void)\r
|
|
|
48811
48816
|
isDragging = false;
|
|
48812
48817
|
lastX = e2.globalX;
|
|
48813
48818
|
lastY = e2.globalY;
|
|
48819
|
+
const threshold = 10;
|
|
48814
48820
|
const moveHandler = (ev) => {
|
|
48815
|
-
|
|
48821
|
+
const dx = ev.globalX - lastX;
|
|
48822
|
+
const dy = ev.globalY - lastY;
|
|
48823
|
+
if (dx * dx + dy * dy > threshold * threshold) {
|
|
48816
48824
|
isDragging = true;
|
|
48817
48825
|
}
|
|
48818
48826
|
};
|
|
@@ -55107,22 +55115,36 @@ void main(void){
|
|
|
55107
55115
|
item.y = rowIndex * (itemHeight + gap);
|
|
55108
55116
|
});
|
|
55109
55117
|
};
|
|
55110
|
-
const LibPixiArrangeLinear = (items, gap, direction = "x") => {
|
|
55118
|
+
const LibPixiArrangeLinear = (items, gap, direction = "x", cols = Infinity) => {
|
|
55111
55119
|
if (Array.isArray(gap)) {
|
|
55112
55120
|
if (gap.length !== items.length - 1) {
|
|
55113
55121
|
console.error(new Error("间隔的数组长度只能等于元素数组长度-1"));
|
|
55114
55122
|
return;
|
|
55115
55123
|
}
|
|
55116
55124
|
}
|
|
55117
|
-
let
|
|
55125
|
+
let lastRowMax = 0;
|
|
55126
|
+
let rowOffset = 0;
|
|
55118
55127
|
items.forEach((item, index) => {
|
|
55119
|
-
const
|
|
55128
|
+
const row = Math.floor(index / cols);
|
|
55129
|
+
const col = index % cols;
|
|
55120
55130
|
if (direction === "x") {
|
|
55121
|
-
|
|
55122
|
-
|
|
55131
|
+
const gapValue = Array.isArray(gap) ? gap[index - 1] ?? 0 : gap;
|
|
55132
|
+
if (col === 0 && row > 0) {
|
|
55133
|
+
rowOffset += lastRowMax + gapValue;
|
|
55134
|
+
lastRowMax = 0;
|
|
55135
|
+
}
|
|
55136
|
+
item.x = col === 0 ? 0 : items[index - 1].x + items[index - 1].width + gapValue;
|
|
55137
|
+
item.y = rowOffset;
|
|
55138
|
+
lastRowMax = Math.max(lastRowMax, item.height);
|
|
55123
55139
|
} else {
|
|
55124
|
-
|
|
55125
|
-
|
|
55140
|
+
const gapValue = Array.isArray(gap) ? gap[index - 1] ?? 0 : gap;
|
|
55141
|
+
if (col === 0 && row > 0) {
|
|
55142
|
+
rowOffset += lastRowMax + gapValue;
|
|
55143
|
+
lastRowMax = 0;
|
|
55144
|
+
}
|
|
55145
|
+
item.y = col === 0 ? 0 : items[index - 1].y + items[index - 1].height + gapValue;
|
|
55146
|
+
item.x = rowOffset;
|
|
55147
|
+
lastRowMax = Math.max(lastRowMax, item.width);
|
|
55126
55148
|
}
|
|
55127
55149
|
});
|
|
55128
55150
|
};
|