lyb-pixi-js 1.11.9 → 1.11.11
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/LibPixiText.d.ts +2 -0
- package/Components/Base/LibPixiText.js +1 -1
- package/Components/Custom/LibDragLocate.d.ts +36 -0
- package/Components/Custom/LibDragLocate.js +230 -0
- package/libPixiJs.d.ts +4 -3
- package/libPixiJs.js +4 -3
- package/lyb-pixi.js +245 -5
- package/package.json +1 -1
|
@@ -14,7 +14,7 @@ export class LibPixiText extends Text {
|
|
|
14
14
|
breakWords: !!wordWrapWidth,
|
|
15
15
|
fill: fontColor,
|
|
16
16
|
align,
|
|
17
|
-
fontFamily: fontFamily,
|
|
17
|
+
fontFamily: LibPixiText.fontFamily || fontFamily,
|
|
18
18
|
stroke: stroke ? stroke : "transparent",
|
|
19
19
|
strokeThickness: strokeThickness ? strokeThickness : 0,
|
|
20
20
|
lineJoin: "round",
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { Container } from "pixi.js";
|
|
2
|
+
/** @description 拖拽定位 */
|
|
3
|
+
export declare class LibDragLocate 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 LibDragLocate 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.ctrlKey && e.key.toLowerCase() === "q") {
|
|
21
|
+
if (this._isLocalte)
|
|
22
|
+
return;
|
|
23
|
+
this._showInput = true;
|
|
24
|
+
e.preventDefault();
|
|
25
|
+
}
|
|
26
|
+
if (e.key === "Escape") {
|
|
27
|
+
this._showInput = false;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
this._createInput();
|
|
31
|
+
this._createResultList();
|
|
32
|
+
this._createStatusBar();
|
|
33
|
+
LibDragLocate.stage.on("pointerdown", (event) => {
|
|
34
|
+
if (!this._currentMoveContainer)
|
|
35
|
+
return;
|
|
36
|
+
this._allowMove = true;
|
|
37
|
+
const { x, y } = LibDragLocate.stage.toLocal(event.global);
|
|
38
|
+
this._downPos = { x, y };
|
|
39
|
+
});
|
|
40
|
+
LibDragLocate.stage.on("pointermove", (event) => {
|
|
41
|
+
if (!this._allowMove || !this._currentMoveContainer)
|
|
42
|
+
return;
|
|
43
|
+
const { x, y } = LibDragLocate.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
|
+
LibDragLocate.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(LibDragLocate.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
|
+
}
|
package/libPixiJs.d.ts
CHANGED
|
@@ -27,6 +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 { LibDragLocate } from "./Components/Custom/LibDragLocate";
|
|
30
31
|
/** @description 组件 */
|
|
31
32
|
export declare const Components: {
|
|
32
33
|
Base: {
|
|
@@ -126,10 +127,10 @@ export declare const Components: {
|
|
|
126
127
|
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiLabelValue-标签值
|
|
127
128
|
*/
|
|
128
129
|
LibPixiLabelValue: typeof LibPixiLabelValue;
|
|
129
|
-
/** @description 设计图背景拼接
|
|
130
|
-
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPuzzleBg-设计图背景拼接
|
|
131
|
-
*/
|
|
130
|
+
/** @description 设计图背景拼接 */
|
|
132
131
|
LibPixiPuzzleBg: typeof LibPixiPuzzleBg;
|
|
132
|
+
/** @description 元素拖拽定位 */
|
|
133
|
+
LibDragLocate: typeof LibDragLocate;
|
|
133
134
|
};
|
|
134
135
|
};
|
|
135
136
|
/** @description 方法 */
|
package/libPixiJs.js
CHANGED
|
@@ -45,6 +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 { LibDragLocate } from "./Components/Custom/LibDragLocate";
|
|
48
49
|
/** @description 组件 */
|
|
49
50
|
export const Components = {
|
|
50
51
|
Base: {
|
|
@@ -144,10 +145,10 @@ export const Components = {
|
|
|
144
145
|
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiLabelValue-标签值
|
|
145
146
|
*/
|
|
146
147
|
LibPixiLabelValue,
|
|
147
|
-
/** @description 设计图背景拼接
|
|
148
|
-
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPuzzleBg-设计图背景拼接
|
|
149
|
-
*/
|
|
148
|
+
/** @description 设计图背景拼接 */
|
|
150
149
|
LibPixiPuzzleBg,
|
|
150
|
+
/** @description 元素拖拽定位 */
|
|
151
|
+
LibDragLocate,
|
|
151
152
|
},
|
|
152
153
|
};
|
|
153
154
|
/** @description 方法 */
|
package/lyb-pixi.js
CHANGED
|
@@ -31852,7 +31852,7 @@ void main(void)\r
|
|
|
31852
31852
|
breakWords: !!wordWrapWidth,
|
|
31853
31853
|
fill: fontColor,
|
|
31854
31854
|
align,
|
|
31855
|
-
fontFamily,
|
|
31855
|
+
fontFamily: LibPixiText.fontFamily || fontFamily,
|
|
31856
31856
|
stroke: stroke ? stroke : "transparent",
|
|
31857
31857
|
strokeThickness: strokeThickness ? strokeThickness : 0,
|
|
31858
31858
|
lineJoin: "round"
|
|
@@ -57828,6 +57828,246 @@ void main(void){
|
|
|
57828
57828
|
(_b = this._onDestroyed) == null ? void 0 : _b.call(this);
|
|
57829
57829
|
}
|
|
57830
57830
|
}
|
|
57831
|
+
const fallbackCopy = (text) => {
|
|
57832
|
+
const textarea = document.createElement("textarea");
|
|
57833
|
+
textarea.value = text;
|
|
57834
|
+
textarea.style.position = "fixed";
|
|
57835
|
+
textarea.style.opacity = "0";
|
|
57836
|
+
document.body.appendChild(textarea);
|
|
57837
|
+
textarea.select();
|
|
57838
|
+
document.execCommand("copy");
|
|
57839
|
+
document.body.removeChild(textarea);
|
|
57840
|
+
};
|
|
57841
|
+
const libJsCopy = (text) => {
|
|
57842
|
+
if (navigator.clipboard) {
|
|
57843
|
+
navigator.clipboard.writeText(text).catch(() => fallbackCopy(text));
|
|
57844
|
+
} else {
|
|
57845
|
+
fallbackCopy(text);
|
|
57846
|
+
}
|
|
57847
|
+
};
|
|
57848
|
+
class LibDragLocate extends Container {
|
|
57849
|
+
constructor() {
|
|
57850
|
+
super();
|
|
57851
|
+
this._positionValue = "";
|
|
57852
|
+
this._isLocalte = false;
|
|
57853
|
+
this._showInput = false;
|
|
57854
|
+
this._allowMove = false;
|
|
57855
|
+
this._downPos = { x: 0, y: 0 };
|
|
57856
|
+
window.addEventListener("keydown", (e2) => {
|
|
57857
|
+
if (e2.ctrlKey && e2.key.toLowerCase() === "q") {
|
|
57858
|
+
if (this._isLocalte)
|
|
57859
|
+
return;
|
|
57860
|
+
this._showInput = true;
|
|
57861
|
+
e2.preventDefault();
|
|
57862
|
+
}
|
|
57863
|
+
if (e2.key === "Escape") {
|
|
57864
|
+
this._showInput = false;
|
|
57865
|
+
}
|
|
57866
|
+
});
|
|
57867
|
+
this._createInput();
|
|
57868
|
+
this._createResultList();
|
|
57869
|
+
this._createStatusBar();
|
|
57870
|
+
LibDragLocate.stage.on("pointerdown", (event) => {
|
|
57871
|
+
if (!this._currentMoveContainer)
|
|
57872
|
+
return;
|
|
57873
|
+
this._allowMove = true;
|
|
57874
|
+
const { x: x2, y: y2 } = LibDragLocate.stage.toLocal(event.global);
|
|
57875
|
+
this._downPos = { x: x2, y: y2 };
|
|
57876
|
+
});
|
|
57877
|
+
LibDragLocate.stage.on("pointermove", (event) => {
|
|
57878
|
+
if (!this._allowMove || !this._currentMoveContainer)
|
|
57879
|
+
return;
|
|
57880
|
+
const { x: x2, y: y2 } = LibDragLocate.stage.toLocal(event.global);
|
|
57881
|
+
const dx = x2 - this._downPos.x;
|
|
57882
|
+
const dy = y2 - this._downPos.y;
|
|
57883
|
+
this._currentMoveContainer.x += dx;
|
|
57884
|
+
this._currentMoveContainer.y += dy;
|
|
57885
|
+
this._downPos = { x: x2, y: y2 };
|
|
57886
|
+
const posX = Math.round(this._currentMoveContainer.x);
|
|
57887
|
+
const posY = Math.round(this._currentMoveContainer.y);
|
|
57888
|
+
this._positionEl.textContent = `X: ${posX}, Y: ${posY}`;
|
|
57889
|
+
this._positionValue = `xxx.position.set(${posX}, ${posY})`;
|
|
57890
|
+
});
|
|
57891
|
+
LibDragLocate.stage.on(
|
|
57892
|
+
"pointerup",
|
|
57893
|
+
() => {
|
|
57894
|
+
this._allowMove = false;
|
|
57895
|
+
},
|
|
57896
|
+
this
|
|
57897
|
+
);
|
|
57898
|
+
Ticker.shared.add(() => {
|
|
57899
|
+
if (this._showInput) {
|
|
57900
|
+
if (this._isLocalte) {
|
|
57901
|
+
this._inputEl.style.display = "none";
|
|
57902
|
+
this._resultEl.style.display = "none";
|
|
57903
|
+
this._statusBarEl.style.display = "flex";
|
|
57904
|
+
} else {
|
|
57905
|
+
this._inputEl.style.display = "block";
|
|
57906
|
+
this._resultEl.style.display = "flex";
|
|
57907
|
+
this._statusBarEl.style.display = "none";
|
|
57908
|
+
this._inputEl.focus();
|
|
57909
|
+
}
|
|
57910
|
+
} else {
|
|
57911
|
+
this._inputEl.style.display = "none";
|
|
57912
|
+
this._resultEl.style.display = "none";
|
|
57913
|
+
}
|
|
57914
|
+
});
|
|
57915
|
+
}
|
|
57916
|
+
/** @description 创建输入框 */
|
|
57917
|
+
_createInput() {
|
|
57918
|
+
this._inputEl = document.createElement("input");
|
|
57919
|
+
this._inputEl.type = "text";
|
|
57920
|
+
this._inputEl.style.cssText = `
|
|
57921
|
+
background-color: rgba(0,0,0,0.75);
|
|
57922
|
+
border: 2px solid rgba(255,255,255,0.5);
|
|
57923
|
+
color: #fff;
|
|
57924
|
+
display: none;
|
|
57925
|
+
font-size: 25px;
|
|
57926
|
+
height: 50px;
|
|
57927
|
+
left: 50%;
|
|
57928
|
+
outline: none;
|
|
57929
|
+
position: fixed;
|
|
57930
|
+
text-align: center;
|
|
57931
|
+
top: 25%;
|
|
57932
|
+
transform: translate(-50%, -50%);
|
|
57933
|
+
width: 50vw;
|
|
57934
|
+
`;
|
|
57935
|
+
document.body.appendChild(this._inputEl);
|
|
57936
|
+
this._inputEl.addEventListener("input", () => {
|
|
57937
|
+
const results = this._findByName(
|
|
57938
|
+
LibDragLocate.stage,
|
|
57939
|
+
this._inputEl.value
|
|
57940
|
+
);
|
|
57941
|
+
this._resultEl.innerHTML = "";
|
|
57942
|
+
const renderNode = (item) => {
|
|
57943
|
+
const resultEl = this._createResultEl(
|
|
57944
|
+
item.node.constructor.name,
|
|
57945
|
+
item.node.name,
|
|
57946
|
+
item.depth
|
|
57947
|
+
);
|
|
57948
|
+
this._resultEl.appendChild(resultEl);
|
|
57949
|
+
gsapWithCSS.killTweensOf(item.node);
|
|
57950
|
+
resultEl.addEventListener("mouseenter", () => {
|
|
57951
|
+
gsapWithCSS.to(item.node, {
|
|
57952
|
+
alpha: 0,
|
|
57953
|
+
duration: 0.25,
|
|
57954
|
+
yoyo: true,
|
|
57955
|
+
ease: "none",
|
|
57956
|
+
repeat: -1
|
|
57957
|
+
});
|
|
57958
|
+
});
|
|
57959
|
+
resultEl.addEventListener("mouseleave", () => {
|
|
57960
|
+
gsapWithCSS.killTweensOf(item.node);
|
|
57961
|
+
item.node.alpha = 1;
|
|
57962
|
+
});
|
|
57963
|
+
resultEl.addEventListener("click", () => {
|
|
57964
|
+
gsapWithCSS.killTweensOf(item.node);
|
|
57965
|
+
this._currentMoveContainer = item.node;
|
|
57966
|
+
item.node.alpha = 1;
|
|
57967
|
+
item.node.filters = [libPixiFilter("desaturate", 0)];
|
|
57968
|
+
this._isLocalte = true;
|
|
57969
|
+
});
|
|
57970
|
+
item.children.forEach(renderNode);
|
|
57971
|
+
};
|
|
57972
|
+
results.forEach(renderNode);
|
|
57973
|
+
});
|
|
57974
|
+
}
|
|
57975
|
+
/** @description 创建用于展示搜索结果的列表 */
|
|
57976
|
+
_createResultList() {
|
|
57977
|
+
this._resultEl = document.createElement("div");
|
|
57978
|
+
this._resultEl.style.cssText = `
|
|
57979
|
+
background-color: rgba(0,0,0,0.75);
|
|
57980
|
+
border: 2px solid rgba(255,255,255,0.5);
|
|
57981
|
+
left: 50%;
|
|
57982
|
+
transform: translateX(-50%);
|
|
57983
|
+
height: 300px;
|
|
57984
|
+
overflow-y: auto;
|
|
57985
|
+
position: fixed;
|
|
57986
|
+
display: none;
|
|
57987
|
+
gap: 10px;
|
|
57988
|
+
flex-direction: column;
|
|
57989
|
+
top: calc(25% + 50px);
|
|
57990
|
+
width: 50vw;
|
|
57991
|
+
`;
|
|
57992
|
+
document.body.appendChild(this._resultEl);
|
|
57993
|
+
}
|
|
57994
|
+
/** @description 创建搜索结果元素 */
|
|
57995
|
+
_createResultEl(className, tagName, depth) {
|
|
57996
|
+
const resultItem = document.createElement("div");
|
|
57997
|
+
resultItem.style.cssText = `
|
|
57998
|
+
display: flex;
|
|
57999
|
+
justify-content: space-between;
|
|
58000
|
+
padding: 5px 10px;
|
|
58001
|
+
align-items: center;
|
|
58002
|
+
width: 100%;
|
|
58003
|
+
font-size: 25px;
|
|
58004
|
+
background-color: rgba(255,255,255,0.1);
|
|
58005
|
+
color: #fff;
|
|
58006
|
+
padding-left: ${depth * 20}px;
|
|
58007
|
+
`;
|
|
58008
|
+
const classNameEl = document.createElement("div");
|
|
58009
|
+
classNameEl.textContent = className;
|
|
58010
|
+
resultItem.appendChild(classNameEl);
|
|
58011
|
+
const tagNameEl = document.createElement("div");
|
|
58012
|
+
tagNameEl.textContent = tagName;
|
|
58013
|
+
resultItem.appendChild(tagNameEl);
|
|
58014
|
+
return resultItem;
|
|
58015
|
+
}
|
|
58016
|
+
/** @description 创建状态栏 */
|
|
58017
|
+
_createStatusBar() {
|
|
58018
|
+
this._statusBarEl = document.createElement("div");
|
|
58019
|
+
this._statusBarEl.style.cssText = `
|
|
58020
|
+
align-items: center;
|
|
58021
|
+
background-color: rgba(0,0,0,0.75);
|
|
58022
|
+
border: 2px solid rgba(0, 255, 13, 0.5);
|
|
58023
|
+
color: #fff;
|
|
58024
|
+
display: none;
|
|
58025
|
+
font-size: 25px;
|
|
58026
|
+
justify-content: center;
|
|
58027
|
+
position: fixed;
|
|
58028
|
+
top: 25%;
|
|
58029
|
+
height: 50px;
|
|
58030
|
+
left: 50%;
|
|
58031
|
+
transform: translate(-50%, -50%);
|
|
58032
|
+
width: 50vw;
|
|
58033
|
+
`;
|
|
58034
|
+
this._positionEl = document.createElement("div");
|
|
58035
|
+
this._statusBarEl.appendChild(this._positionEl);
|
|
58036
|
+
document.body.appendChild(this._statusBarEl);
|
|
58037
|
+
this._statusBarEl.addEventListener("click", () => {
|
|
58038
|
+
this._isLocalte = false;
|
|
58039
|
+
libJsCopy(this._positionValue);
|
|
58040
|
+
if (this._currentMoveContainer) {
|
|
58041
|
+
this._currentMoveContainer.filters = [];
|
|
58042
|
+
this._currentMoveContainer = void 0;
|
|
58043
|
+
}
|
|
58044
|
+
});
|
|
58045
|
+
}
|
|
58046
|
+
/** @description 递归搜索 */
|
|
58047
|
+
_findByName(root, keyword) {
|
|
58048
|
+
if (!keyword)
|
|
58049
|
+
return [];
|
|
58050
|
+
const match = (node) => {
|
|
58051
|
+
var _a;
|
|
58052
|
+
return ((_a = node.name) == null ? void 0 : _a.toLowerCase().includes(keyword.toLowerCase())) || node.constructor.name.toLowerCase().includes(keyword.toLowerCase());
|
|
58053
|
+
};
|
|
58054
|
+
const dfs = (node, depth) => {
|
|
58055
|
+
const children = node.children.filter((c2) => c2 instanceof Container).flatMap((c2) => dfs(c2, depth + 1));
|
|
58056
|
+
if (match(node) || children.length > 0) {
|
|
58057
|
+
return [
|
|
58058
|
+
{
|
|
58059
|
+
node,
|
|
58060
|
+
depth,
|
|
58061
|
+
children,
|
|
58062
|
+
expanded: true
|
|
58063
|
+
}
|
|
58064
|
+
];
|
|
58065
|
+
}
|
|
58066
|
+
return [];
|
|
58067
|
+
};
|
|
58068
|
+
return dfs(root, 0);
|
|
58069
|
+
}
|
|
58070
|
+
}
|
|
57831
58071
|
const Components = {
|
|
57832
58072
|
Base: {
|
|
57833
58073
|
/** @description 自定义位图文本
|
|
@@ -57926,10 +58166,10 @@ void main(void){
|
|
|
57926
58166
|
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiLabelValue-标签值
|
|
57927
58167
|
*/
|
|
57928
58168
|
LibPixiLabelValue,
|
|
57929
|
-
/** @description 设计图背景拼接
|
|
57930
|
-
|
|
57931
|
-
|
|
57932
|
-
|
|
58169
|
+
/** @description 设计图背景拼接 */
|
|
58170
|
+
LibPixiPuzzleBg,
|
|
58171
|
+
/** @description 元素拖拽定位 */
|
|
58172
|
+
LibDragLocate
|
|
57933
58173
|
}
|
|
57934
58174
|
};
|
|
57935
58175
|
const Utils = {
|