@babylonjs/shared-ui-components 7.32.4 → 7.33.0
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/Button.modules.scss +1 -1
- package/imgs/dropdownArrowIcon_white.svg +1 -0
- package/nodeGraphSystem/automaticProperties.d.ts +10 -0
- package/nodeGraphSystem/automaticProperties.js +28 -0
- package/nodeGraphSystem/automaticProperties.js.map +1 -0
- package/nodeGraphSystem/common.modules.scss +7 -1
- package/nodeGraphSystem/graphCanvas.js +3 -0
- package/nodeGraphSystem/graphCanvas.js.map +1 -1
- package/nodeGraphSystem/graphNode.d.ts +15 -0
- package/nodeGraphSystem/graphNode.js +234 -5
- package/nodeGraphSystem/graphNode.js.map +1 -1
- package/nodeGraphSystem/graphNode.modules.scss +304 -11
- package/nodeGraphSystem/interfaces/nodeLocationInfo.d.ts +1 -0
- package/nodeGraphSystem/interfaces/nodeLocationInfo.js.map +1 -1
- package/nodeGraphSystem/nodePort.d.ts +2 -0
- package/nodeGraphSystem/nodePort.js +7 -0
- package/nodeGraphSystem/nodePort.js.map +1 -1
- package/nodeGraphSystem/stateManager.d.ts +3 -0
- package/nodeGraphSystem/stateManager.js +1 -0
- package/nodeGraphSystem/stateManager.js.map +1 -1
- package/package.json +1 -1
@@ -14,6 +14,10 @@
|
|
14
14
|
box-shadow: 7px 6px 2px rgba(0, 0, 0, 0.2);
|
15
15
|
}
|
16
16
|
|
17
|
+
.topMost {
|
18
|
+
z-index: 5000;
|
19
|
+
}
|
20
|
+
|
17
21
|
.highlighted {
|
18
22
|
animation: glow 0.5s infinite alternate;
|
19
23
|
@keyframes glow {
|
@@ -35,33 +39,51 @@
|
|
35
39
|
transform: scaleX(1.01) translateY(-0.5px);
|
36
40
|
transform-origin: center;
|
37
41
|
display: grid;
|
38
|
-
grid-template-columns: 1fr auto;
|
42
|
+
grid-template-columns: auto 1fr auto;
|
39
43
|
grid-template-rows: 100%;
|
40
44
|
}
|
41
45
|
|
42
|
-
$iconSize: 20px;
|
43
|
-
$iconMargin: 6px;
|
44
|
-
|
45
46
|
.headerIcon {
|
46
47
|
z-index: 10;
|
47
48
|
align-self: center;
|
48
49
|
user-select: none;
|
49
|
-
pointer-events: none;
|
50
|
-
width: $iconSize;
|
51
50
|
display: grid;
|
52
|
-
|
51
|
+
transform: translateY(1px);
|
52
|
+
grid-row: 1;
|
53
|
+
grid-column: 3;
|
54
|
+
}
|
55
|
+
|
56
|
+
.headerCollapse {
|
57
|
+
grid-row: 1;
|
58
|
+
grid-column: 1;
|
59
|
+
z-index: 10;
|
60
|
+
align-self: center;
|
61
|
+
user-select: none;
|
62
|
+
display: grid;
|
63
|
+
cursor: pointer;
|
64
|
+
color: white;
|
65
|
+
font-weight: bold;
|
66
|
+
font-size: 16px;
|
67
|
+
justify-content: center;
|
68
|
+
width: 20px;
|
69
|
+
transform: rotate(0deg);
|
70
|
+
transition: transform 0.2s;
|
71
|
+
transform-origin: center;
|
72
|
+
}
|
73
|
+
|
74
|
+
.collapsed {
|
75
|
+
transform: rotate(-90deg);
|
53
76
|
}
|
54
77
|
|
55
78
|
.header {
|
79
|
+
grid-row: 1;
|
80
|
+
grid-column: 2;
|
56
81
|
font-size: 16px;
|
57
82
|
text-align: center;
|
58
83
|
white-space: nowrap;
|
59
84
|
text-overflow: ellipsis;
|
60
85
|
overflow: hidden;
|
61
|
-
|
62
|
-
|
63
|
-
.headerWithIcon {
|
64
|
-
margin-left: calc(#{$iconSize} + #{$iconMargin});
|
86
|
+
transform: translateY(-2px);
|
65
87
|
}
|
66
88
|
|
67
89
|
.connections {
|
@@ -70,6 +92,7 @@ $iconMargin: 6px;
|
|
70
92
|
|
71
93
|
display: grid;
|
72
94
|
grid-template-columns: 50% 50%;
|
95
|
+
grid-template-rows: auto auto auto;
|
73
96
|
transform: scale(1);
|
74
97
|
}
|
75
98
|
|
@@ -104,8 +127,278 @@ $iconMargin: 6px;
|
|
104
127
|
align-items: flex-end;
|
105
128
|
justify-content: end;
|
106
129
|
pointer-events: none;
|
130
|
+
z-index: -1;
|
107
131
|
}
|
108
132
|
|
109
133
|
.selected {
|
110
134
|
border-color: white !important;
|
111
135
|
}
|
136
|
+
|
137
|
+
.optionsContainer {
|
138
|
+
grid-row: 2;
|
139
|
+
grid-column: 1 / 3;
|
140
|
+
}
|
141
|
+
|
142
|
+
.booleanContainer {
|
143
|
+
height: 20px;
|
144
|
+
display: flex;
|
145
|
+
margin-left: 4px;
|
146
|
+
input[type="checkbox"] {
|
147
|
+
-webkit-appearance: none;
|
148
|
+
-moz-appearance: none;
|
149
|
+
appearance: none;
|
150
|
+
width: 14px;
|
151
|
+
height: 14px;
|
152
|
+
border-radius: 2px;
|
153
|
+
border: transparent;
|
154
|
+
background-color: black;
|
155
|
+
opacity: 0.5;
|
156
|
+
position: relative;
|
157
|
+
|
158
|
+
&:checked {
|
159
|
+
background-color: rgb(51, 122, 183);
|
160
|
+
opacity: 1;
|
161
|
+
}
|
162
|
+
|
163
|
+
&:checked::after {
|
164
|
+
content: "✓";
|
165
|
+
color: white; /* Checkmark color */
|
166
|
+
font-weight: bold;
|
167
|
+
font-size: 12px;
|
168
|
+
position: relative;
|
169
|
+
left: 3px;
|
170
|
+
top: -1px;
|
171
|
+
}
|
172
|
+
}
|
173
|
+
label {
|
174
|
+
word-wrap: break-word;
|
175
|
+
white-space: nowrap;
|
176
|
+
text-overflow: ellipsis;
|
177
|
+
overflow: hidden;
|
178
|
+
transform: translateY(-1px);
|
179
|
+
}
|
180
|
+
}
|
181
|
+
|
182
|
+
.floatContainer {
|
183
|
+
display: grid;
|
184
|
+
margin-top: 5px;
|
185
|
+
margin-bottom: 5px;
|
186
|
+
height: 20px;
|
187
|
+
|
188
|
+
input[type="number"] {
|
189
|
+
grid-row: 1;
|
190
|
+
grid-column: 1;
|
191
|
+
-moz-appearance: textfield;
|
192
|
+
margin-left: 5px;
|
193
|
+
margin-right: 5px;
|
194
|
+
transform: translateY(2px);
|
195
|
+
border: 0px;
|
196
|
+
opacity: 0.9;
|
197
|
+
color: white;
|
198
|
+
border: 0px;
|
199
|
+
border-radius: 2px;
|
200
|
+
background-color: rgba(0, 0, 0, 0.5);
|
201
|
+
padding-left: 5px;
|
202
|
+
z-index: 1;
|
203
|
+
text-align: end;
|
204
|
+
padding-right: 5px;
|
205
|
+
cursor: col-resize;
|
206
|
+
|
207
|
+
&::-webkit-outer-spin-button,
|
208
|
+
&::-webkit-inner-spin-button {
|
209
|
+
-webkit-appearance: none;
|
210
|
+
margin: 0;
|
211
|
+
}
|
212
|
+
|
213
|
+
&:hover {
|
214
|
+
background-color: rgba(0, 0, 0, 0.2);
|
215
|
+
}
|
216
|
+
|
217
|
+
&:focus {
|
218
|
+
outline: 0px;
|
219
|
+
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
|
220
|
+
background-color: rgba(0, 0, 0, 0.8);
|
221
|
+
opacity: 1;
|
222
|
+
|
223
|
+
+ div {
|
224
|
+
display: none;
|
225
|
+
}
|
226
|
+
}
|
227
|
+
}
|
228
|
+
|
229
|
+
div {
|
230
|
+
grid-row: 1;
|
231
|
+
grid-column: 1;
|
232
|
+
z-index: 2;
|
233
|
+
align-self: center;
|
234
|
+
justify-self: left;
|
235
|
+
margin-left: 15px;
|
236
|
+
font-size: 12px;
|
237
|
+
font-weight: 100;
|
238
|
+
}
|
239
|
+
}
|
240
|
+
|
241
|
+
.listContainer {
|
242
|
+
margin-top: 3px;
|
243
|
+
height: 20px;
|
244
|
+
display: grid;
|
245
|
+
margin-bottom: 3px;
|
246
|
+
}
|
247
|
+
|
248
|
+
.select {
|
249
|
+
grid-row: 1;
|
250
|
+
grid-column: 1;
|
251
|
+
position: relative;
|
252
|
+
margin-left: 10px;
|
253
|
+
margin-right: 10px;
|
254
|
+
border: 1px solid rgba(0, 0, 0, 0.2);
|
255
|
+
border-radius: 2px;
|
256
|
+
background-color: rgba(0, 0, 0, 0.5);
|
257
|
+
opacity: 0.9;
|
258
|
+
cursor: pointer;
|
259
|
+
text-align: center;
|
260
|
+
|
261
|
+
&:hover {
|
262
|
+
background-color: rgba(0, 0, 0, 0.2);
|
263
|
+
}
|
264
|
+
|
265
|
+
&:focus {
|
266
|
+
outline: 0px;
|
267
|
+
opacity: 1;
|
268
|
+
}
|
269
|
+
}
|
270
|
+
|
271
|
+
.selectText {
|
272
|
+
color: white;
|
273
|
+
pointer-events: none;
|
274
|
+
background: transparent;
|
275
|
+
transform: translateY(-1px);
|
276
|
+
}
|
277
|
+
|
278
|
+
.active {
|
279
|
+
border-radius: 4px 4px 0 0;
|
280
|
+
border-color: transparent;
|
281
|
+
background-color: rgba(0, 0, 0, 0.2);
|
282
|
+
opacity: 1;
|
283
|
+
}
|
284
|
+
|
285
|
+
.selectList {
|
286
|
+
border-radius: 0 0 4px 4px;
|
287
|
+
overflow: auto;
|
288
|
+
padding: 0;
|
289
|
+
padding-top: 5px;
|
290
|
+
padding-bottom: 5px;
|
291
|
+
transform: translateX(-1px);
|
292
|
+
top: 20px;
|
293
|
+
width: 100%;
|
294
|
+
list-style: none;
|
295
|
+
margin: 0;
|
296
|
+
position: absolute;
|
297
|
+
border: 0;
|
298
|
+
z-index: 100000;
|
299
|
+
background-color: rgb(51, 51, 51);
|
300
|
+
border: 1px solid rgba(51, 51, 51);
|
301
|
+
max-height: 200px;
|
302
|
+
|
303
|
+
// Simple
|
304
|
+
&::-webkit-scrollbar {
|
305
|
+
width: 6px;
|
306
|
+
height: 6px;
|
307
|
+
}
|
308
|
+
&::-webkit-scrollbar-track {
|
309
|
+
border-radius: 10px;
|
310
|
+
background: rgba(0, 0, 0, 0.1);
|
311
|
+
}
|
312
|
+
&::-webkit-scrollbar-thumb {
|
313
|
+
border-radius: 10px;
|
314
|
+
background: rgba(0, 0, 0, 0.2);
|
315
|
+
}
|
316
|
+
&::-webkit-scrollbar-thumb:hover {
|
317
|
+
background: rgba(0, 0, 0, 0.4);
|
318
|
+
}
|
319
|
+
&::-webkit-scrollbar-thumb:active {
|
320
|
+
background: rgba(0, 0, 0, 0.9);
|
321
|
+
}
|
322
|
+
}
|
323
|
+
|
324
|
+
.option {
|
325
|
+
opacity: 0.8;
|
326
|
+
height: 22px;
|
327
|
+
font-size: 14px;
|
328
|
+
margin-left: 5px;
|
329
|
+
margin-right: 5px;
|
330
|
+
border-radius: 4px;
|
331
|
+
cursor: pointer;
|
332
|
+
&:hover {
|
333
|
+
background-color: rgba(0, 0, 0, 0.2);
|
334
|
+
}
|
335
|
+
}
|
336
|
+
|
337
|
+
.sliderContainer {
|
338
|
+
display: grid;
|
339
|
+
padding-top: 5px;
|
340
|
+
padding-bottom: 5px;
|
341
|
+
|
342
|
+
input[type="range"] {
|
343
|
+
grid-row: 1;
|
344
|
+
grid-column: 1;
|
345
|
+
-webkit-appearance: none;
|
346
|
+
margin: 0;
|
347
|
+
margin-left: 5px;
|
348
|
+
margin-right: 5px;
|
349
|
+
transform: translateY(2px);
|
350
|
+
border-radius: 2px;
|
351
|
+
border: 0px;
|
352
|
+
opacity: 0.5;
|
353
|
+
overflow: hidden;
|
354
|
+
background-color: rgba(0, 0, 0, 1);
|
355
|
+
|
356
|
+
&:hover {
|
357
|
+
outline: 0px;
|
358
|
+
opacity: 0.8;
|
359
|
+
}
|
360
|
+
|
361
|
+
&::-webkit-slider-runnable-track {
|
362
|
+
height: 5px;
|
363
|
+
-webkit-appearance: none;
|
364
|
+
margin-top: -1px;
|
365
|
+
border: 0;
|
366
|
+
}
|
367
|
+
|
368
|
+
&::-webkit-slider-thumb {
|
369
|
+
width: 0.01px;
|
370
|
+
-webkit-appearance: none;
|
371
|
+
height: 0.01px;
|
372
|
+
cursor: ew-resize;
|
373
|
+
background: black;
|
374
|
+
border: 0;
|
375
|
+
box-shadow: -100px 0 0 100px rgb(51, 122, 183);
|
376
|
+
opacity: 0.8;
|
377
|
+
z-index: 1;
|
378
|
+
}
|
379
|
+
}
|
380
|
+
|
381
|
+
label {
|
382
|
+
grid-row: 1;
|
383
|
+
grid-column: 1;
|
384
|
+
margin-left: 10px;
|
385
|
+
word-wrap: break-word;
|
386
|
+
white-space: nowrap;
|
387
|
+
text-overflow: ellipsis;
|
388
|
+
overflow: hidden;
|
389
|
+
z-index: 2;
|
390
|
+
pointer-events: none;
|
391
|
+
font-weight: 100;
|
392
|
+
}
|
393
|
+
|
394
|
+
div {
|
395
|
+
grid-row: 1;
|
396
|
+
grid-column: 1;
|
397
|
+
z-index: 2;
|
398
|
+
pointer-events: none;
|
399
|
+
font-size: 12px;
|
400
|
+
align-self: center;
|
401
|
+
justify-self: end;
|
402
|
+
margin-right: 10px;
|
403
|
+
}
|
404
|
+
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nodeLocationInfo.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/interfaces/nodeLocationInfo.ts"],"names":[],"mappings":"","sourcesContent":["export interface INodeLocationInfo {\r\n blockId: number;\r\n x: number;\r\n y: number;\r\n}\r\n\r\nexport interface IFrameData {\r\n x: number;\r\n y: number;\r\n width: number;\r\n height: number;\r\n color: number[];\r\n name: string;\r\n isCollapsed: boolean;\r\n blocks: number[];\r\n comments: string;\r\n}\r\n\r\nexport interface IEditorData {\r\n locations: INodeLocationInfo[];\r\n x: number;\r\n y: number;\r\n zoom: number;\r\n frames?: IFrameData[];\r\n map?: { [key: number]: number };\r\n}\r\n"]}
|
1
|
+
{"version":3,"file":"nodeLocationInfo.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/interfaces/nodeLocationInfo.ts"],"names":[],"mappings":"","sourcesContent":["export interface INodeLocationInfo {\r\n blockId: number;\r\n x: number;\r\n y: number;\r\n isCollapsed: boolean;\r\n}\r\n\r\nexport interface IFrameData {\r\n x: number;\r\n y: number;\r\n width: number;\r\n height: number;\r\n color: number[];\r\n name: string;\r\n isCollapsed: boolean;\r\n blocks: number[];\r\n comments: string;\r\n}\r\n\r\nexport interface IEditorData {\r\n locations: INodeLocationInfo[];\r\n x: number;\r\n y: number;\r\n zoom: number;\r\n frames?: IFrameData[];\r\n map?: { [key: number]: number };\r\n}\r\n"]}
|
@@ -11,6 +11,7 @@ export declare class NodePort {
|
|
11
11
|
portData: IPortData;
|
12
12
|
node: GraphNode;
|
13
13
|
protected _element: HTMLDivElement;
|
14
|
+
protected _portContainer: HTMLElement;
|
14
15
|
protected _img: HTMLImageElement;
|
15
16
|
protected _pip: HTMLDivElement;
|
16
17
|
protected _stateManager: StateManager;
|
@@ -20,6 +21,7 @@ export declare class NodePort {
|
|
20
21
|
protected _exposedOnFrame: boolean;
|
21
22
|
delegatedPort: Nullable<FrameNodePort>;
|
22
23
|
get element(): HTMLDivElement;
|
24
|
+
get container(): HTMLElement;
|
23
25
|
get portName(): string;
|
24
26
|
set portName(newName: string);
|
25
27
|
get disabled(): boolean;
|
@@ -7,6 +7,12 @@ export class NodePort {
|
|
7
7
|
}
|
8
8
|
return this._element;
|
9
9
|
}
|
10
|
+
get container() {
|
11
|
+
if (this.delegatedPort) {
|
12
|
+
return this.delegatedPort.container;
|
13
|
+
}
|
14
|
+
return this._portContainer;
|
15
|
+
}
|
10
16
|
get portName() {
|
11
17
|
return this.portData.name;
|
12
18
|
}
|
@@ -74,6 +80,7 @@ export class NodePort {
|
|
74
80
|
this.portData = portData;
|
75
81
|
this.node = node;
|
76
82
|
this.delegatedPort = null;
|
83
|
+
this._portContainer = portContainer;
|
77
84
|
this._element = portContainer.ownerDocument.createElement("div");
|
78
85
|
this._element.classList.add(commonStyles.port);
|
79
86
|
portContainer.appendChild(this._element);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nodePort.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/nodeGraphSystem/nodePort.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport type { Observer } from \"core/Misc/observable\";\r\nimport type { Vector2 } from \"core/Maths/math.vector\";\r\nimport type { GraphNode } from \"./graphNode\";\r\nimport type { StateManager } from \"./stateManager\";\r\nimport type { ISelectionChangedOptions } from \"./interfaces/selectionChangedOptions\";\r\nimport type { FrameNodePort } from \"./frameNodePort\";\r\nimport type { IDisplayManager } from \"./interfaces/displayManager\";\r\nimport type { IPortData } from \"./interfaces/portData\";\r\nimport commonStyles from \"./common.modules.scss\";\r\nimport localStyles from \"./nodePort.modules.scss\";\r\n\r\nexport class NodePort {\r\n protected _element: HTMLDivElement;\r\n protected _img: HTMLImageElement;\r\n protected _pip: HTMLDivElement;\r\n protected _stateManager: StateManager;\r\n protected _portLabelElement: Element;\r\n protected _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;\r\n protected _onSelectionChangedObserver: Nullable<Observer<Nullable<ISelectionChangedOptions>>>;\r\n protected _exposedOnFrame: boolean;\r\n public delegatedPort: Nullable<FrameNodePort> = null;\r\n\r\n public get element(): HTMLDivElement {\r\n if (this.delegatedPort) {\r\n return this.delegatedPort.element;\r\n }\r\n\r\n return this._element;\r\n }\r\n\r\n public get portName() {\r\n return this.portData.name;\r\n }\r\n\r\n public set portName(newName: string) {\r\n if (this._portLabelElement) {\r\n this.portData.updateDisplayName(newName);\r\n this._portLabelElement.innerHTML = newName;\r\n }\r\n }\r\n\r\n public get disabled() {\r\n if (!this.portData.isConnected) {\r\n return false;\r\n } else if (this._isConnectedToNodeOutsideOfFrame()) {\r\n //connected to outside node\r\n return true;\r\n } else {\r\n const link = this.node.getLinksForPortData(this.portData);\r\n if (link.length) {\r\n if (link[0].nodeB === this.node) {\r\n // check if this node is the receiving\r\n return true;\r\n }\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n public hasLabel() {\r\n return !!this._portLabelElement;\r\n }\r\n\r\n public get exposedOnFrame() {\r\n if (!!this.portData.isExposedOnFrame || this._isConnectedToNodeOutsideOfFrame()) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n public set exposedOnFrame(value: boolean) {\r\n if (this.disabled) {\r\n return;\r\n }\r\n this.portData.isExposedOnFrame = value;\r\n }\r\n\r\n public get exposedPortPosition() {\r\n return this.portData.exposedPortPosition;\r\n }\r\n\r\n public set exposedPortPosition(value: number) {\r\n this.portData.exposedPortPosition = value;\r\n }\r\n\r\n private _isConnectedToNodeOutsideOfFrame() {\r\n const link = this.node.getLinksForPortData(this.portData);\r\n if (link.length) {\r\n for (let i = 0; i < link.length; i++) {\r\n if (link[i].nodeA.enclosingFrameId !== link[i].nodeB!.enclosingFrameId) {\r\n return true;\r\n }\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n public refresh() {\r\n this._stateManager.applyNodePortDesign(this.portData, this._element, this._img, this._pip);\r\n }\r\n\r\n public constructor(\r\n portContainer: HTMLElement,\r\n public portData: IPortData,\r\n public node: GraphNode,\r\n stateManager: StateManager\r\n ) {\r\n this._element = portContainer.ownerDocument!.createElement(\"div\");\r\n this._element.classList.add(commonStyles.port);\r\n portContainer.appendChild(this._element);\r\n this._stateManager = stateManager;\r\n\r\n this._img = portContainer.ownerDocument!.createElement(\"img\");\r\n this._element.appendChild(this._img);\r\n\r\n this._pip = portContainer.ownerDocument!.createElement(\"div\");\r\n this._pip.classList.add(localStyles[\"pip\"]);\r\n this._pip.style.display = \"none\";\r\n this._element.appendChild(this._pip);\r\n\r\n // determine if node name is editable\r\n if (portContainer.children[0].className === commonStyles[\"port-label\"]) {\r\n this._portLabelElement = portContainer.children[0];\r\n }\r\n\r\n (this._element as any).port = this;\r\n\r\n // Drag support\r\n this._element.ondragstart = () => false;\r\n\r\n this._onCandidateLinkMovedObserver = stateManager.onCandidateLinkMoved.add((coords) => {\r\n const rect = this._element.getBoundingClientRect();\r\n\r\n if (!coords || rect.left > coords.x || rect.right < coords.x || rect.top > coords.y || rect.bottom < coords.y) {\r\n this._element.classList.remove(localStyles[\"selected\"]);\r\n return;\r\n }\r\n\r\n this._element.classList.add(localStyles[\"selected\"]);\r\n this._stateManager.onCandidatePortSelectedObservable.notifyObservers(this);\r\n });\r\n\r\n this._onSelectionChangedObserver = this._stateManager.onSelectionChangedObservable.add((options) => {\r\n const { selection } = options || {};\r\n if (selection === this) {\r\n this._img.classList.add(localStyles[\"selected\"]);\r\n } else {\r\n this._img.classList.remove(localStyles[\"selected\"]);\r\n }\r\n });\r\n\r\n this.refresh();\r\n }\r\n\r\n public dispose() {\r\n this._stateManager.onCandidateLinkMoved.remove(this._onCandidateLinkMovedObserver);\r\n\r\n if (this._onSelectionChangedObserver) {\r\n this._stateManager.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);\r\n }\r\n }\r\n\r\n public static CreatePortElement(portData: IPortData, node: GraphNode, root: HTMLElement, displayManager: Nullable<IDisplayManager>, stateManager: StateManager) {\r\n const portContainer = root.ownerDocument!.createElement(\"div\");\r\n\r\n portContainer.classList.add(commonStyles.portLine);\r\n\r\n root.appendChild(portContainer);\r\n\r\n if (!displayManager || displayManager.shouldDisplayPortLabels(portData)) {\r\n const portLabel = root.ownerDocument!.createElement(\"div\");\r\n portLabel.classList.add(commonStyles[\"port-label\"]);\r\n portLabel.innerHTML = portData.name;\r\n portContainer.appendChild(portLabel);\r\n }\r\n\r\n return new NodePort(portContainer, portData, node, stateManager);\r\n }\r\n}\r\n"]}
|
1
|
+
{"version":3,"file":"nodePort.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/nodeGraphSystem/nodePort.ts"],"names":[],"mappings":"AASA,OAAO,YAAY,MAAM,uBAAuB,CAAC;AACjD,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAElD,MAAM,OAAO,QAAQ;IAYjB,IAAW,OAAO;QACd,IAAI,IAAI,CAAC,aAAa,EAAE;YACpB,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;SACrC;QAED,OAAO,IAAI,CAAC,QAAQ,CAAC;IACzB,CAAC;IAED,IAAW,SAAS;QAChB,IAAI,IAAI,CAAC,aAAa,EAAE;YACpB,OAAO,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC;SACvC;QAED,OAAO,IAAI,CAAC,cAAc,CAAC;IAC/B,CAAC;IAED,IAAW,QAAQ;QACf,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,CAAC;IAED,IAAW,QAAQ,CAAC,OAAe;QAC/B,IAAI,IAAI,CAAC,iBAAiB,EAAE;YACxB,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;YACzC,IAAI,CAAC,iBAAiB,CAAC,SAAS,GAAG,OAAO,CAAC;SAC9C;IACL,CAAC;IAED,IAAW,QAAQ;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC5B,OAAO,KAAK,CAAC;SAChB;aAAM,IAAI,IAAI,CAAC,gCAAgC,EAAE,EAAE;YAChD,2BAA2B;YAC3B,OAAO,IAAI,CAAC;SACf;aAAM;YACH,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC1D,IAAI,IAAI,CAAC,MAAM,EAAE;gBACb,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,IAAI,EAAE;oBAC7B,sCAAsC;oBACtC,OAAO,IAAI,CAAC;iBACf;aACJ;SACJ;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAEM,QAAQ;QACX,OAAO,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC;IACpC,CAAC;IAED,IAAW,cAAc;QACrB,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,IAAI,IAAI,CAAC,gCAAgC,EAAE,EAAE;YAC7E,OAAO,IAAI,CAAC;SACf;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,IAAW,cAAc,CAAC,KAAc;QACpC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,OAAO;SACV;QACD,IAAI,CAAC,QAAQ,CAAC,gBAAgB,GAAG,KAAK,CAAC;IAC3C,CAAC;IAED,IAAW,mBAAmB;QAC1B,OAAO,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC;IAC7C,CAAC;IAED,IAAW,mBAAmB,CAAC,KAAa;QACxC,IAAI,CAAC,QAAQ,CAAC,mBAAmB,GAAG,KAAK,CAAC;IAC9C,CAAC;IAEO,gCAAgC;QACpC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC1D,IAAI,IAAI,CAAC,MAAM,EAAE;YACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAClC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,KAAM,CAAC,gBAAgB,EAAE;oBACpE,OAAO,IAAI,CAAC;iBACf;aACJ;SACJ;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAEM,OAAO;QACV,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/F,CAAC;IAED,YACI,aAA0B,EACnB,QAAmB,EACnB,IAAe,EACtB,YAA0B;QAFnB,aAAQ,GAAR,QAAQ,CAAW;QACnB,SAAI,GAAJ,IAAI,CAAW;QA5FnB,kBAAa,GAA4B,IAAI,CAAC;QA+FjD,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;QACpC,IAAI,CAAC,QAAQ,GAAG,aAAa,CAAC,aAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAClE,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QAC/C,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACzC,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC;QAElC,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,aAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9D,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAErC,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,aAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9D,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;QAC5C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACjC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAErC,qCAAqC;QACrC,IAAI,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,YAAY,CAAC,YAAY,CAAC,EAAE;YACpE,IAAI,CAAC,iBAAiB,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;SACtD;QAEA,IAAI,CAAC,QAAgB,CAAC,IAAI,GAAG,IAAI,CAAC;QAEnC,eAAe;QACf,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC;QAExC,IAAI,CAAC,6BAA6B,GAAG,YAAY,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YAClF,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,qBAAqB,EAAE,CAAC;YAEnD,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,EAAE;gBAC3G,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC;gBACxD,OAAO;aACV;YAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC;YACrD,IAAI,CAAC,aAAa,CAAC,iCAAiC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QAC/E,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC,aAAa,CAAC,4BAA4B,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;YAC/F,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,IAAI,EAAE,CAAC;YACpC,IAAI,SAAS,KAAK,IAAI,EAAE;gBACpB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC;aACpD;iBAAM;gBACH,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC;aACvD;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,OAAO,EAAE,CAAC;IACnB,CAAC;IAEM,OAAO;QACV,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAC,MAAM,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;QAEnF,IAAI,IAAI,CAAC,2BAA2B,EAAE;YAClC,IAAI,CAAC,aAAa,CAAC,4BAA4B,CAAC,MAAM,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;SAC5F;IACL,CAAC;IAEM,MAAM,CAAC,iBAAiB,CAAC,QAAmB,EAAE,IAAe,EAAE,IAAiB,EAAE,cAAyC,EAAE,YAA0B;QAC1J,MAAM,aAAa,GAAG,IAAI,CAAC,aAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE/D,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QAEnD,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;QAEhC,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,uBAAuB,CAAC,QAAQ,CAAC,EAAE;YACrE,MAAM,SAAS,GAAG,IAAI,CAAC,aAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC3D,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC;YACpD,SAAS,CAAC,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC;YACpC,aAAa,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;SACxC;QAED,OAAO,IAAI,QAAQ,CAAC,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC;IACrE,CAAC;CACJ","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport type { Observer } from \"core/Misc/observable\";\r\nimport type { Vector2 } from \"core/Maths/math.vector\";\r\nimport type { GraphNode } from \"./graphNode\";\r\nimport type { StateManager } from \"./stateManager\";\r\nimport type { ISelectionChangedOptions } from \"./interfaces/selectionChangedOptions\";\r\nimport type { FrameNodePort } from \"./frameNodePort\";\r\nimport type { IDisplayManager } from \"./interfaces/displayManager\";\r\nimport type { IPortData } from \"./interfaces/portData\";\r\nimport commonStyles from \"./common.modules.scss\";\r\nimport localStyles from \"./nodePort.modules.scss\";\r\n\r\nexport class NodePort {\r\n protected _element: HTMLDivElement;\r\n protected _portContainer: HTMLElement;\r\n protected _img: HTMLImageElement;\r\n protected _pip: HTMLDivElement;\r\n protected _stateManager: StateManager;\r\n protected _portLabelElement: Element;\r\n protected _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;\r\n protected _onSelectionChangedObserver: Nullable<Observer<Nullable<ISelectionChangedOptions>>>;\r\n protected _exposedOnFrame: boolean;\r\n public delegatedPort: Nullable<FrameNodePort> = null;\r\n\r\n public get element(): HTMLDivElement {\r\n if (this.delegatedPort) {\r\n return this.delegatedPort.element;\r\n }\r\n\r\n return this._element;\r\n }\r\n\r\n public get container(): HTMLElement {\r\n if (this.delegatedPort) {\r\n return this.delegatedPort.container;\r\n }\r\n\r\n return this._portContainer;\r\n }\r\n\r\n public get portName() {\r\n return this.portData.name;\r\n }\r\n\r\n public set portName(newName: string) {\r\n if (this._portLabelElement) {\r\n this.portData.updateDisplayName(newName);\r\n this._portLabelElement.innerHTML = newName;\r\n }\r\n }\r\n\r\n public get disabled() {\r\n if (!this.portData.isConnected) {\r\n return false;\r\n } else if (this._isConnectedToNodeOutsideOfFrame()) {\r\n //connected to outside node\r\n return true;\r\n } else {\r\n const link = this.node.getLinksForPortData(this.portData);\r\n if (link.length) {\r\n if (link[0].nodeB === this.node) {\r\n // check if this node is the receiving\r\n return true;\r\n }\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n public hasLabel() {\r\n return !!this._portLabelElement;\r\n }\r\n\r\n public get exposedOnFrame() {\r\n if (!!this.portData.isExposedOnFrame || this._isConnectedToNodeOutsideOfFrame()) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n public set exposedOnFrame(value: boolean) {\r\n if (this.disabled) {\r\n return;\r\n }\r\n this.portData.isExposedOnFrame = value;\r\n }\r\n\r\n public get exposedPortPosition() {\r\n return this.portData.exposedPortPosition;\r\n }\r\n\r\n public set exposedPortPosition(value: number) {\r\n this.portData.exposedPortPosition = value;\r\n }\r\n\r\n private _isConnectedToNodeOutsideOfFrame() {\r\n const link = this.node.getLinksForPortData(this.portData);\r\n if (link.length) {\r\n for (let i = 0; i < link.length; i++) {\r\n if (link[i].nodeA.enclosingFrameId !== link[i].nodeB!.enclosingFrameId) {\r\n return true;\r\n }\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n public refresh() {\r\n this._stateManager.applyNodePortDesign(this.portData, this._element, this._img, this._pip);\r\n }\r\n\r\n public constructor(\r\n portContainer: HTMLElement,\r\n public portData: IPortData,\r\n public node: GraphNode,\r\n stateManager: StateManager\r\n ) {\r\n this._portContainer = portContainer;\r\n this._element = portContainer.ownerDocument!.createElement(\"div\");\r\n this._element.classList.add(commonStyles.port);\r\n portContainer.appendChild(this._element);\r\n this._stateManager = stateManager;\r\n\r\n this._img = portContainer.ownerDocument!.createElement(\"img\");\r\n this._element.appendChild(this._img);\r\n\r\n this._pip = portContainer.ownerDocument!.createElement(\"div\");\r\n this._pip.classList.add(localStyles[\"pip\"]);\r\n this._pip.style.display = \"none\";\r\n this._element.appendChild(this._pip);\r\n\r\n // determine if node name is editable\r\n if (portContainer.children[0].className === commonStyles[\"port-label\"]) {\r\n this._portLabelElement = portContainer.children[0];\r\n }\r\n\r\n (this._element as any).port = this;\r\n\r\n // Drag support\r\n this._element.ondragstart = () => false;\r\n\r\n this._onCandidateLinkMovedObserver = stateManager.onCandidateLinkMoved.add((coords) => {\r\n const rect = this._element.getBoundingClientRect();\r\n\r\n if (!coords || rect.left > coords.x || rect.right < coords.x || rect.top > coords.y || rect.bottom < coords.y) {\r\n this._element.classList.remove(localStyles[\"selected\"]);\r\n return;\r\n }\r\n\r\n this._element.classList.add(localStyles[\"selected\"]);\r\n this._stateManager.onCandidatePortSelectedObservable.notifyObservers(this);\r\n });\r\n\r\n this._onSelectionChangedObserver = this._stateManager.onSelectionChangedObservable.add((options) => {\r\n const { selection } = options || {};\r\n if (selection === this) {\r\n this._img.classList.add(localStyles[\"selected\"]);\r\n } else {\r\n this._img.classList.remove(localStyles[\"selected\"]);\r\n }\r\n });\r\n\r\n this.refresh();\r\n }\r\n\r\n public dispose() {\r\n this._stateManager.onCandidateLinkMoved.remove(this._onCandidateLinkMovedObserver);\r\n\r\n if (this._onSelectionChangedObserver) {\r\n this._stateManager.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);\r\n }\r\n }\r\n\r\n public static CreatePortElement(portData: IPortData, node: GraphNode, root: HTMLElement, displayManager: Nullable<IDisplayManager>, stateManager: StateManager) {\r\n const portContainer = root.ownerDocument!.createElement(\"div\");\r\n\r\n portContainer.classList.add(commonStyles.portLine);\r\n\r\n root.appendChild(portContainer);\r\n\r\n if (!displayManager || displayManager.shouldDisplayPortLabels(portData)) {\r\n const portLabel = root.ownerDocument!.createElement(\"div\");\r\n portLabel.classList.add(commonStyles[\"port-label\"]);\r\n portLabel.innerHTML = portData.name;\r\n portContainer.appendChild(portLabel);\r\n }\r\n\r\n return new NodePort(portContainer, portData, node, stateManager);\r\n }\r\n}\r\n"]}
|
@@ -10,6 +10,7 @@ import type { IPortData } from "./interfaces/portData";
|
|
10
10
|
import type { ISelectionChangedOptions } from "./interfaces/selectionChangedOptions";
|
11
11
|
import type { NodePort } from "./nodePort";
|
12
12
|
import type { HistoryStack } from "../historyStack";
|
13
|
+
import type { Scene } from "@babylonjs/core/scene.js";
|
13
14
|
export declare class StateManager {
|
14
15
|
data: any;
|
15
16
|
hostDocument: Document;
|
@@ -44,6 +45,7 @@ export declare class StateManager {
|
|
44
45
|
data: any;
|
45
46
|
active: boolean;
|
46
47
|
}>;
|
48
|
+
onPreviewCommandActivated: Observable<boolean>;
|
47
49
|
exportData: (data: any, frame?: Nullable<GraphFrame>) => string;
|
48
50
|
isElbowConnectionAllowed: (nodeA: FrameNodePort | NodePort, nodeB: FrameNodePort | NodePort) => boolean;
|
49
51
|
isDebugConnectionAllowed: (nodeA: FrameNodePort | NodePort, nodeB: FrameNodePort | NodePort) => boolean;
|
@@ -52,6 +54,7 @@ export declare class StateManager {
|
|
52
54
|
getEditorDataMap: () => {
|
53
55
|
[key: number]: number;
|
54
56
|
};
|
57
|
+
getScene?: () => Scene;
|
55
58
|
createDefaultInputData: (rootData: any, portData: IPortData, nodeContainer: INodeContainer) => Nullable<{
|
56
59
|
data: INodeData;
|
57
60
|
name: string;
|
@@ -17,6 +17,7 @@ export class StateManager {
|
|
17
17
|
this.onGridSizeChanged = new Observable();
|
18
18
|
this.onNewBlockRequiredObservable = new Observable();
|
19
19
|
this.onHighlightNodeObservable = new Observable();
|
20
|
+
this.onPreviewCommandActivated = new Observable();
|
20
21
|
}
|
21
22
|
}
|
22
23
|
//# sourceMappingURL=stateManager.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"stateManager.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/nodeGraphSystem/stateManager.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,2CAA6B;
|
1
|
+
{"version":3,"file":"stateManager.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/nodeGraphSystem/stateManager.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,2CAA6B;AAalD,MAAM,OAAO,YAAY;IAAzB;QAQI,kCAA6B,GAAG,IAAI,UAAU,EAA4B,CAAC;QAC3E,iCAA4B,GAAG,IAAI,UAAU,EAAsC,CAAC;QACpF,6BAAwB,GAAG,IAAI,UAAU,EAAc,CAAC;QACxD,+BAA0B,GAAG,IAAI,UAAU,EAAiB,CAAC;QAC7D,iCAA4B,GAAG,IAAI,UAAU,EAAa,CAAC;QAC3D,wBAAmB,GAAG,IAAI,UAAU,EAAwB,CAAC;QAC7D,yBAAoB,GAAG,IAAI,UAAU,EAAqB,CAAC;QAC3D,sCAAiC,GAAG,IAAI,UAAU,EAAsC,CAAC;QACzF,+BAA0B,GAAG,IAAI,UAAU,EAAa,CAAC;QACzD,gCAA2B,GAAG,IAAI,UAAU,EAAQ,CAAC;QACrD,0BAAqB,GAAG,IAAI,UAAU,EAAa,CAAC;QACpD,2CAAsC,GAAG,IAAI,UAAU,EAAU,CAAC;QAClE,kCAA6B,GAAG,IAAI,UAAU,EAAa,CAAC;QAC5D,sBAAiB,GAAG,IAAI,UAAU,EAAQ,CAAC;QAC3C,iCAA4B,GAAG,IAAI,UAAU,EAAuG,CAAC;QACrJ,8BAAyB,GAAG,IAAI,UAAU,EAAkC,CAAC;QAC7E,8BAAyB,GAAG,IAAI,UAAU,EAAW,CAAC;IAc1D,CAAC;CAAA","sourcesContent":["import type { Vector2 } from \"core/Maths/math.vector\";\r\nimport { Observable } from \"core/Misc/observable\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { FrameNodePort } from \"./frameNodePort\";\r\nimport type { GraphFrame } from \"./graphFrame\";\r\nimport type { GraphNode } from \"./graphNode\";\r\nimport type { INodeContainer } from \"./interfaces/nodeContainer\";\r\nimport type { INodeData } from \"./interfaces/nodeData\";\r\nimport type { IPortData } from \"./interfaces/portData\";\r\nimport type { ISelectionChangedOptions } from \"./interfaces/selectionChangedOptions\";\r\nimport type { NodePort } from \"./nodePort\";\r\nimport type { HistoryStack } from \"../historyStack\";\r\nimport type { Scene } from \"core/scene\";\r\n\r\nexport class StateManager {\r\n data: any;\r\n hostDocument: Document;\r\n lockObject: any;\r\n modalIsDisplayed: boolean;\r\n\r\n historyStack: HistoryStack;\r\n\r\n onSearchBoxRequiredObservable = new Observable<{ x: number; y: number }>();\r\n onSelectionChangedObservable = new Observable<Nullable<ISelectionChangedOptions>>();\r\n onFrameCreatedObservable = new Observable<GraphFrame>();\r\n onUpdateRequiredObservable = new Observable<Nullable<any>>();\r\n onGraphNodeRemovalObservable = new Observable<GraphNode>();\r\n onSelectionBoxMoved = new Observable<ClientRect | DOMRect>();\r\n onCandidateLinkMoved = new Observable<Nullable<Vector2>>();\r\n onCandidatePortSelectedObservable = new Observable<Nullable<NodePort | FrameNodePort>>();\r\n onNewNodeCreatedObservable = new Observable<GraphNode>();\r\n onRebuildRequiredObservable = new Observable<void>();\r\n onNodeMovedObservable = new Observable<GraphNode>();\r\n onErrorMessageDialogRequiredObservable = new Observable<string>();\r\n onExposePortOnFrameObservable = new Observable<GraphNode>();\r\n onGridSizeChanged = new Observable<void>();\r\n onNewBlockRequiredObservable = new Observable<{ type: string; targetX: number; targetY: number; needRepositioning?: boolean; smartAdd?: boolean }>();\r\n onHighlightNodeObservable = new Observable<{ data: any; active: boolean }>();\r\n onPreviewCommandActivated = new Observable<boolean>();\r\n\r\n exportData: (data: any, frame?: Nullable<GraphFrame>) => string;\r\n isElbowConnectionAllowed: (nodeA: FrameNodePort | NodePort, nodeB: FrameNodePort | NodePort) => boolean;\r\n isDebugConnectionAllowed: (nodeA: FrameNodePort | NodePort, nodeB: FrameNodePort | NodePort) => boolean;\r\n applyNodePortDesign: (data: IPortData, element: HTMLElement, img: HTMLImageElement, pip: HTMLDivElement) => void;\r\n\r\n storeEditorData: (serializationObject: any, frame?: Nullable<GraphFrame>) => void;\r\n\r\n getEditorDataMap: () => { [key: number]: number };\r\n\r\n getScene?: () => Scene;\r\n\r\n createDefaultInputData: (rootData: any, portData: IPortData, nodeContainer: INodeContainer) => Nullable<{ data: INodeData; name: string }>;\r\n}\r\n"]}
|