lyb-pixi-js 1.11.11 → 1.11.13
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/Custom/LibDragLocate.js +1 -1
- package/Components/Custom/LibPixiDragLocate.d.ts +36 -0
- package/Components/Custom/LibPixiDragLocate.js +230 -0
- package/Components/Custom/LibPixiPuzzleBg.js +2 -1
- package/libPixiJs.d.ts +2 -2
- package/libPixiJs.js +2 -2
- package/lyb-pixi.js +16 -12
- package/package.json +1 -1
|
@@ -17,7 +17,7 @@ export class LibDragLocate extends Container {
|
|
|
17
17
|
/** 按下坐标 */
|
|
18
18
|
this._downPos = { x: 0, y: 0 };
|
|
19
19
|
window.addEventListener("keydown", (e) => {
|
|
20
|
-
if (e.
|
|
20
|
+
if (e.altKey && e.key.toLowerCase() === "q") {
|
|
21
21
|
if (this._isLocalte)
|
|
22
22
|
return;
|
|
23
23
|
this._showInput = true;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { Container } from "pixi.js";
|
|
2
|
+
/** @description 元素拖拽定位 */
|
|
3
|
+
export declare class LibPixiDragLocate extends Container {
|
|
4
|
+
static stage: Container;
|
|
5
|
+
/** 输入框 */
|
|
6
|
+
private _inputEl;
|
|
7
|
+
/** 搜索结果 */
|
|
8
|
+
private _resultEl;
|
|
9
|
+
/** 状态栏元素 */
|
|
10
|
+
private _statusBarEl;
|
|
11
|
+
/** 坐标元素 */
|
|
12
|
+
private _positionEl;
|
|
13
|
+
/** 当前坐标值 */
|
|
14
|
+
private _positionValue;
|
|
15
|
+
/** 是否处于定位状态 */
|
|
16
|
+
private _isLocalte;
|
|
17
|
+
/** 是否显示输入框 */
|
|
18
|
+
private _showInput;
|
|
19
|
+
/** 是否允许移动 */
|
|
20
|
+
private _allowMove;
|
|
21
|
+
/** 按下坐标 */
|
|
22
|
+
private _downPos;
|
|
23
|
+
/** 当前处于移动的元素 */
|
|
24
|
+
private _currentMoveContainer?;
|
|
25
|
+
constructor();
|
|
26
|
+
/** @description 创建输入框 */
|
|
27
|
+
private _createInput;
|
|
28
|
+
/** @description 创建用于展示搜索结果的列表 */
|
|
29
|
+
private _createResultList;
|
|
30
|
+
/** @description 创建搜索结果元素 */
|
|
31
|
+
private _createResultEl;
|
|
32
|
+
/** @description 创建状态栏 */
|
|
33
|
+
private _createStatusBar;
|
|
34
|
+
/** @description 递归搜索 */
|
|
35
|
+
private _findByName;
|
|
36
|
+
}
|
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
import { Container, Ticker } from "pixi.js";
|
|
2
|
+
import gsap from "gsap";
|
|
3
|
+
import { libPixiFilter } from "../../Utils/LibPixiFilter";
|
|
4
|
+
import { libJsCopy } from "lyb-js/Browser/LibJsCopy.js";
|
|
5
|
+
/** @description 元素拖拽定位 */
|
|
6
|
+
export class LibPixiDragLocate extends Container {
|
|
7
|
+
constructor() {
|
|
8
|
+
super();
|
|
9
|
+
/** 当前坐标值 */
|
|
10
|
+
this._positionValue = "";
|
|
11
|
+
/** 是否处于定位状态 */
|
|
12
|
+
this._isLocalte = false;
|
|
13
|
+
/** 是否显示输入框 */
|
|
14
|
+
this._showInput = false;
|
|
15
|
+
/** 是否允许移动 */
|
|
16
|
+
this._allowMove = false;
|
|
17
|
+
/** 按下坐标 */
|
|
18
|
+
this._downPos = { x: 0, y: 0 };
|
|
19
|
+
window.addEventListener("keydown", (e) => {
|
|
20
|
+
if (e.altKey && e.key.toLowerCase() === "q") {
|
|
21
|
+
e.preventDefault();
|
|
22
|
+
if (this._isLocalte)
|
|
23
|
+
return;
|
|
24
|
+
this._showInput = true;
|
|
25
|
+
}
|
|
26
|
+
if (e.key === "Escape") {
|
|
27
|
+
this._showInput = false;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
this._createInput();
|
|
31
|
+
this._createResultList();
|
|
32
|
+
this._createStatusBar();
|
|
33
|
+
LibPixiDragLocate.stage.on("pointerdown", (event) => {
|
|
34
|
+
if (!this._currentMoveContainer)
|
|
35
|
+
return;
|
|
36
|
+
this._allowMove = true;
|
|
37
|
+
const { x, y } = LibPixiDragLocate.stage.toLocal(event.global);
|
|
38
|
+
this._downPos = { x, y };
|
|
39
|
+
});
|
|
40
|
+
LibPixiDragLocate.stage.on("pointermove", (event) => {
|
|
41
|
+
if (!this._allowMove || !this._currentMoveContainer)
|
|
42
|
+
return;
|
|
43
|
+
const { x, y } = LibPixiDragLocate.stage.toLocal(event.global);
|
|
44
|
+
const dx = x - this._downPos.x;
|
|
45
|
+
const dy = y - this._downPos.y;
|
|
46
|
+
this._currentMoveContainer.x += dx;
|
|
47
|
+
this._currentMoveContainer.y += dy;
|
|
48
|
+
this._downPos = { x, y };
|
|
49
|
+
const posX = Math.round(this._currentMoveContainer.x);
|
|
50
|
+
const posY = Math.round(this._currentMoveContainer.y);
|
|
51
|
+
this._positionEl.textContent = `X: ${posX}, Y: ${posY}`;
|
|
52
|
+
this._positionValue = `xxx.position.set(${posX}, ${posY})`;
|
|
53
|
+
});
|
|
54
|
+
LibPixiDragLocate.stage.on("pointerup", () => {
|
|
55
|
+
this._allowMove = false;
|
|
56
|
+
}, this);
|
|
57
|
+
Ticker.shared.add(() => {
|
|
58
|
+
if (this._showInput) {
|
|
59
|
+
if (this._isLocalte) {
|
|
60
|
+
this._inputEl.style.display = "none";
|
|
61
|
+
this._resultEl.style.display = "none";
|
|
62
|
+
this._statusBarEl.style.display = "flex";
|
|
63
|
+
}
|
|
64
|
+
else {
|
|
65
|
+
this._inputEl.style.display = "block";
|
|
66
|
+
this._resultEl.style.display = "flex";
|
|
67
|
+
this._statusBarEl.style.display = "none";
|
|
68
|
+
this._inputEl.focus();
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
else {
|
|
72
|
+
this._inputEl.style.display = "none";
|
|
73
|
+
this._resultEl.style.display = "none";
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
/** @description 创建输入框 */
|
|
78
|
+
_createInput() {
|
|
79
|
+
this._inputEl = document.createElement("input");
|
|
80
|
+
this._inputEl.type = "text";
|
|
81
|
+
this._inputEl.style.cssText = `
|
|
82
|
+
background-color: rgba(0,0,0,0.75);
|
|
83
|
+
border: 2px solid rgba(255,255,255,0.5);
|
|
84
|
+
color: #fff;
|
|
85
|
+
display: none;
|
|
86
|
+
font-size: 25px;
|
|
87
|
+
height: 50px;
|
|
88
|
+
left: 50%;
|
|
89
|
+
outline: none;
|
|
90
|
+
position: fixed;
|
|
91
|
+
text-align: center;
|
|
92
|
+
top: 25%;
|
|
93
|
+
transform: translate(-50%, -50%);
|
|
94
|
+
width: 50vw;
|
|
95
|
+
`;
|
|
96
|
+
document.body.appendChild(this._inputEl);
|
|
97
|
+
this._inputEl.addEventListener("input", () => {
|
|
98
|
+
const results = this._findByName(LibPixiDragLocate.stage, this._inputEl.value);
|
|
99
|
+
//创建搜索结果列表
|
|
100
|
+
this._resultEl.innerHTML = "";
|
|
101
|
+
const renderNode = (item) => {
|
|
102
|
+
const resultEl = this._createResultEl(item.node.constructor.name, item.node.name, item.depth);
|
|
103
|
+
this._resultEl.appendChild(resultEl);
|
|
104
|
+
gsap.killTweensOf(item.node);
|
|
105
|
+
//悬浮结果列表元素闪烁
|
|
106
|
+
resultEl.addEventListener("mouseenter", () => {
|
|
107
|
+
gsap.to(item.node, {
|
|
108
|
+
alpha: 0,
|
|
109
|
+
duration: 0.25,
|
|
110
|
+
yoyo: true,
|
|
111
|
+
ease: "none",
|
|
112
|
+
repeat: -1,
|
|
113
|
+
});
|
|
114
|
+
});
|
|
115
|
+
//离开结果后停止闪烁
|
|
116
|
+
resultEl.addEventListener("mouseleave", () => {
|
|
117
|
+
gsap.killTweensOf(item.node);
|
|
118
|
+
item.node.alpha = 1;
|
|
119
|
+
});
|
|
120
|
+
resultEl.addEventListener("click", () => {
|
|
121
|
+
gsap.killTweensOf(item.node);
|
|
122
|
+
this._currentMoveContainer = item.node;
|
|
123
|
+
item.node.alpha = 1;
|
|
124
|
+
item.node.filters = [libPixiFilter("desaturate", 0)];
|
|
125
|
+
this._isLocalte = true;
|
|
126
|
+
});
|
|
127
|
+
item.children.forEach(renderNode);
|
|
128
|
+
};
|
|
129
|
+
results.forEach(renderNode);
|
|
130
|
+
});
|
|
131
|
+
}
|
|
132
|
+
/** @description 创建用于展示搜索结果的列表 */
|
|
133
|
+
_createResultList() {
|
|
134
|
+
this._resultEl = document.createElement("div");
|
|
135
|
+
this._resultEl.style.cssText = `
|
|
136
|
+
background-color: rgba(0,0,0,0.75);
|
|
137
|
+
border: 2px solid rgba(255,255,255,0.5);
|
|
138
|
+
left: 50%;
|
|
139
|
+
transform: translateX(-50%);
|
|
140
|
+
height: 300px;
|
|
141
|
+
overflow-y: auto;
|
|
142
|
+
position: fixed;
|
|
143
|
+
display: none;
|
|
144
|
+
gap: 10px;
|
|
145
|
+
flex-direction: column;
|
|
146
|
+
top: calc(25% + 50px);
|
|
147
|
+
width: 50vw;
|
|
148
|
+
`;
|
|
149
|
+
document.body.appendChild(this._resultEl);
|
|
150
|
+
}
|
|
151
|
+
/** @description 创建搜索结果元素 */
|
|
152
|
+
_createResultEl(className, tagName, depth) {
|
|
153
|
+
const resultItem = document.createElement("div");
|
|
154
|
+
resultItem.style.cssText = `
|
|
155
|
+
display: flex;
|
|
156
|
+
justify-content: space-between;
|
|
157
|
+
padding: 5px 10px;
|
|
158
|
+
align-items: center;
|
|
159
|
+
width: 100%;
|
|
160
|
+
font-size: 25px;
|
|
161
|
+
background-color: rgba(255,255,255,0.1);
|
|
162
|
+
color: #fff;
|
|
163
|
+
padding-left: ${depth * 20}px;
|
|
164
|
+
`;
|
|
165
|
+
const classNameEl = document.createElement("div");
|
|
166
|
+
classNameEl.textContent = className;
|
|
167
|
+
resultItem.appendChild(classNameEl);
|
|
168
|
+
const tagNameEl = document.createElement("div");
|
|
169
|
+
tagNameEl.textContent = tagName;
|
|
170
|
+
resultItem.appendChild(tagNameEl);
|
|
171
|
+
return resultItem;
|
|
172
|
+
}
|
|
173
|
+
/** @description 创建状态栏 */
|
|
174
|
+
_createStatusBar() {
|
|
175
|
+
this._statusBarEl = document.createElement("div");
|
|
176
|
+
this._statusBarEl.style.cssText = `
|
|
177
|
+
align-items: center;
|
|
178
|
+
background-color: rgba(0,0,0,0.75);
|
|
179
|
+
border: 2px solid rgba(0, 255, 13, 0.5);
|
|
180
|
+
color: #fff;
|
|
181
|
+
display: none;
|
|
182
|
+
font-size: 25px;
|
|
183
|
+
justify-content: center;
|
|
184
|
+
position: fixed;
|
|
185
|
+
top: 25%;
|
|
186
|
+
height: 50px;
|
|
187
|
+
left: 50%;
|
|
188
|
+
transform: translate(-50%, -50%);
|
|
189
|
+
width: 50vw;
|
|
190
|
+
`;
|
|
191
|
+
this._positionEl = document.createElement("div");
|
|
192
|
+
this._statusBarEl.appendChild(this._positionEl);
|
|
193
|
+
document.body.appendChild(this._statusBarEl);
|
|
194
|
+
this._statusBarEl.addEventListener("click", () => {
|
|
195
|
+
this._isLocalte = false;
|
|
196
|
+
libJsCopy(this._positionValue);
|
|
197
|
+
if (this._currentMoveContainer) {
|
|
198
|
+
this._currentMoveContainer.filters = [];
|
|
199
|
+
this._currentMoveContainer = undefined;
|
|
200
|
+
}
|
|
201
|
+
});
|
|
202
|
+
}
|
|
203
|
+
/** @description 递归搜索 */
|
|
204
|
+
_findByName(root, keyword) {
|
|
205
|
+
if (!keyword)
|
|
206
|
+
return [];
|
|
207
|
+
const match = (node) => {
|
|
208
|
+
var _a;
|
|
209
|
+
return ((_a = node.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(keyword.toLowerCase())) ||
|
|
210
|
+
node.constructor.name.toLowerCase().includes(keyword.toLowerCase());
|
|
211
|
+
};
|
|
212
|
+
const dfs = (node, depth) => {
|
|
213
|
+
const children = node.children
|
|
214
|
+
.filter((c) => c instanceof Container)
|
|
215
|
+
.flatMap((c) => dfs(c, depth + 1));
|
|
216
|
+
if (match(node) || children.length > 0) {
|
|
217
|
+
return [
|
|
218
|
+
{
|
|
219
|
+
node,
|
|
220
|
+
depth,
|
|
221
|
+
children,
|
|
222
|
+
expanded: true,
|
|
223
|
+
},
|
|
224
|
+
];
|
|
225
|
+
}
|
|
226
|
+
return [];
|
|
227
|
+
};
|
|
228
|
+
return dfs(root, 0);
|
|
229
|
+
}
|
|
230
|
+
}
|
|
@@ -18,7 +18,8 @@ export class LibPixiPuzzleBg extends Container {
|
|
|
18
18
|
bg.position.set(x || 0, y || 0);
|
|
19
19
|
//监听鼠标空格事件
|
|
20
20
|
document.addEventListener("keydown", (e) => {
|
|
21
|
-
if (e.code === "Space") {
|
|
21
|
+
if (e.altKey && e.code === "Space") {
|
|
22
|
+
e.preventDefault();
|
|
22
23
|
bg.visible = !bg.visible;
|
|
23
24
|
}
|
|
24
25
|
else if (e.code === "ArrowUp") {
|
package/libPixiJs.d.ts
CHANGED
|
@@ -27,7 +27,7 @@ import { LibPixiSlide } from "./Components/Custom/LibPixiSlide";
|
|
|
27
27
|
import { LibPixiLabelValue } from "./Components/Custom/LibPixiLabelValue";
|
|
28
28
|
import { LibPixiPuzzleBg } from "./Components/Custom/LibPixiPuzzleBg";
|
|
29
29
|
import { LibDestroyContainer } from "./Components/Base/LibDestroyContainer";
|
|
30
|
-
import {
|
|
30
|
+
import { LibPixiDragLocate } from "./Components/Custom/LibPixiDragLocate";
|
|
31
31
|
/** @description 组件 */
|
|
32
32
|
export declare const Components: {
|
|
33
33
|
Base: {
|
|
@@ -130,7 +130,7 @@ export declare const Components: {
|
|
|
130
130
|
/** @description 设计图背景拼接 */
|
|
131
131
|
LibPixiPuzzleBg: typeof LibPixiPuzzleBg;
|
|
132
132
|
/** @description 元素拖拽定位 */
|
|
133
|
-
|
|
133
|
+
LibPixiDragLocate: typeof LibPixiDragLocate;
|
|
134
134
|
};
|
|
135
135
|
};
|
|
136
136
|
/** @description 方法 */
|
package/libPixiJs.js
CHANGED
|
@@ -45,7 +45,7 @@ import { libContainerCenter } from "./Utils/LibContainerCenter";
|
|
|
45
45
|
import { libPixiHVCenter } from "./Utils/LibPixiHVCenter";
|
|
46
46
|
import { libPixiHVGap } from "./Utils/LibPixiHVGap";
|
|
47
47
|
import { LibDestroyContainer } from "./Components/Base/LibDestroyContainer";
|
|
48
|
-
import {
|
|
48
|
+
import { LibPixiDragLocate } from "./Components/Custom/LibPixiDragLocate";
|
|
49
49
|
/** @description 组件 */
|
|
50
50
|
export const Components = {
|
|
51
51
|
Base: {
|
|
@@ -148,7 +148,7 @@ export const Components = {
|
|
|
148
148
|
/** @description 设计图背景拼接 */
|
|
149
149
|
LibPixiPuzzleBg,
|
|
150
150
|
/** @description 元素拖拽定位 */
|
|
151
|
-
|
|
151
|
+
LibPixiDragLocate,
|
|
152
152
|
},
|
|
153
153
|
};
|
|
154
154
|
/** @description 方法 */
|
package/lyb-pixi.js
CHANGED
|
@@ -57761,7 +57761,8 @@ void main(void){
|
|
|
57761
57761
|
bg.alpha = alpha || 0.25;
|
|
57762
57762
|
bg.position.set(x2 || 0, y2 || 0);
|
|
57763
57763
|
document.addEventListener("keydown", (e2) => {
|
|
57764
|
-
if (e2.code === "Space") {
|
|
57764
|
+
if (e2.altKey && e2.code === "Space") {
|
|
57765
|
+
e2.preventDefault();
|
|
57765
57766
|
bg.visible = !bg.visible;
|
|
57766
57767
|
} else if (e2.code === "ArrowUp") {
|
|
57767
57768
|
bg.y -= 2;
|
|
@@ -57777,7 +57778,10 @@ void main(void){
|
|
|
57777
57778
|
} else if (e2.code === "NumpadSubtract" && bg.alpha > 0) {
|
|
57778
57779
|
bg.alpha = libJsDecimal(bg.alpha, 0.1, "-");
|
|
57779
57780
|
}
|
|
57780
|
-
localStorage.setItem(
|
|
57781
|
+
localStorage.setItem(
|
|
57782
|
+
"puzzle_bg_config",
|
|
57783
|
+
JSON.stringify({ alpha: bg.alpha, x: bg.x, y: bg.y })
|
|
57784
|
+
);
|
|
57781
57785
|
});
|
|
57782
57786
|
}
|
|
57783
57787
|
}
|
|
@@ -57845,7 +57849,7 @@ void main(void){
|
|
|
57845
57849
|
fallbackCopy(text);
|
|
57846
57850
|
}
|
|
57847
57851
|
};
|
|
57848
|
-
class
|
|
57852
|
+
class LibPixiDragLocate extends Container {
|
|
57849
57853
|
constructor() {
|
|
57850
57854
|
super();
|
|
57851
57855
|
this._positionValue = "";
|
|
@@ -57854,11 +57858,11 @@ void main(void){
|
|
|
57854
57858
|
this._allowMove = false;
|
|
57855
57859
|
this._downPos = { x: 0, y: 0 };
|
|
57856
57860
|
window.addEventListener("keydown", (e2) => {
|
|
57857
|
-
if (e2.
|
|
57861
|
+
if (e2.altKey && e2.key.toLowerCase() === "q") {
|
|
57862
|
+
e2.preventDefault();
|
|
57858
57863
|
if (this._isLocalte)
|
|
57859
57864
|
return;
|
|
57860
57865
|
this._showInput = true;
|
|
57861
|
-
e2.preventDefault();
|
|
57862
57866
|
}
|
|
57863
57867
|
if (e2.key === "Escape") {
|
|
57864
57868
|
this._showInput = false;
|
|
@@ -57867,17 +57871,17 @@ void main(void){
|
|
|
57867
57871
|
this._createInput();
|
|
57868
57872
|
this._createResultList();
|
|
57869
57873
|
this._createStatusBar();
|
|
57870
|
-
|
|
57874
|
+
LibPixiDragLocate.stage.on("pointerdown", (event) => {
|
|
57871
57875
|
if (!this._currentMoveContainer)
|
|
57872
57876
|
return;
|
|
57873
57877
|
this._allowMove = true;
|
|
57874
|
-
const { x: x2, y: y2 } =
|
|
57878
|
+
const { x: x2, y: y2 } = LibPixiDragLocate.stage.toLocal(event.global);
|
|
57875
57879
|
this._downPos = { x: x2, y: y2 };
|
|
57876
57880
|
});
|
|
57877
|
-
|
|
57881
|
+
LibPixiDragLocate.stage.on("pointermove", (event) => {
|
|
57878
57882
|
if (!this._allowMove || !this._currentMoveContainer)
|
|
57879
57883
|
return;
|
|
57880
|
-
const { x: x2, y: y2 } =
|
|
57884
|
+
const { x: x2, y: y2 } = LibPixiDragLocate.stage.toLocal(event.global);
|
|
57881
57885
|
const dx = x2 - this._downPos.x;
|
|
57882
57886
|
const dy = y2 - this._downPos.y;
|
|
57883
57887
|
this._currentMoveContainer.x += dx;
|
|
@@ -57888,7 +57892,7 @@ void main(void){
|
|
|
57888
57892
|
this._positionEl.textContent = `X: ${posX}, Y: ${posY}`;
|
|
57889
57893
|
this._positionValue = `xxx.position.set(${posX}, ${posY})`;
|
|
57890
57894
|
});
|
|
57891
|
-
|
|
57895
|
+
LibPixiDragLocate.stage.on(
|
|
57892
57896
|
"pointerup",
|
|
57893
57897
|
() => {
|
|
57894
57898
|
this._allowMove = false;
|
|
@@ -57935,7 +57939,7 @@ void main(void){
|
|
|
57935
57939
|
document.body.appendChild(this._inputEl);
|
|
57936
57940
|
this._inputEl.addEventListener("input", () => {
|
|
57937
57941
|
const results = this._findByName(
|
|
57938
|
-
|
|
57942
|
+
LibPixiDragLocate.stage,
|
|
57939
57943
|
this._inputEl.value
|
|
57940
57944
|
);
|
|
57941
57945
|
this._resultEl.innerHTML = "";
|
|
@@ -58169,7 +58173,7 @@ void main(void){
|
|
|
58169
58173
|
/** @description 设计图背景拼接 */
|
|
58170
58174
|
LibPixiPuzzleBg,
|
|
58171
58175
|
/** @description 元素拖拽定位 */
|
|
58172
|
-
|
|
58176
|
+
LibPixiDragLocate
|
|
58173
58177
|
}
|
|
58174
58178
|
};
|
|
58175
58179
|
const Utils = {
|