@babylonjs/gui-editor 5.0.0-beta.2 → 5.0.0-beta.6

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.
Files changed (4) hide show
  1. package/babylon.guiEditor.max.js +1425 -2563
  2. package/babylon.guiEditor.max.js.map +1 -1
  3. package/babylon.guiEditor.module.d.ts +127 -710
  4. package/package.json +2 -2
package/babylon.guiEditor.module.d.ts CHANGED
@@ -31,641 +31,6 @@ declare module "@babylonjs/gui-editor/tools" {
31
31
  static reorderGrid(grid: Grid, index: number, control: Control, cell: Vector2): void;
32
32
  }
33
33
  }
34
- declare module "@babylonjs/gui-editor/diagram/GUIEditorNodeMaterial" {
35
- export const GUIEditorNodeMaterial: {
36
- tags: null;
37
- ignoreAlpha: boolean;
38
- maxSimultaneousLights: number;
39
- mode: number;
40
- id: string;
41
- name: string;
42
- checkReadyOnEveryCall: boolean;
43
- checkReadyOnlyOnce: boolean;
44
- state: string;
45
- alpha: number;
46
- backFaceCulling: boolean;
47
- cullBackFaces: boolean;
48
- sideOrientation: number;
49
- alphaMode: number;
50
- _needDepthPrePass: boolean;
51
- disableDepthWrite: boolean;
52
- disableColorWrite: boolean;
53
- forceDepthWrite: boolean;
54
- depthFunction: number;
55
- separateCullingPass: boolean;
56
- fogEnabled: boolean;
57
- pointSize: number;
58
- zOffset: number;
59
- zOffsetUnits: number;
60
- pointsCloud: boolean;
61
- fillMode: number;
62
- editorData: {
63
- locations: {
64
- blockId: number;
65
- x: number;
66
- y: number;
67
- }[];
68
- frames: {
69
- x: number;
70
- y: number;
71
- width: number;
72
- height: number;
73
- color: number[];
74
- name: string;
75
- isCollapsed: boolean;
76
- blocks: number[];
77
- }[];
78
- x: number;
79
- y: number;
80
- zoom: number;
81
- };
82
- customType: string;
83
- outputNodes: number[];
84
- blocks: ({
85
- customType: string;
86
- id: number;
87
- name: string;
88
- comments: string;
89
- visibleInInspector: boolean;
90
- visibleOnFrame: boolean;
91
- target: number;
92
- inputs: {
93
- name: string;
94
- inputName: string;
95
- targetBlockId: number;
96
- targetConnectionName: string;
97
- isExposedOnFrame: boolean;
98
- exposedPortPosition: number;
99
- }[];
100
- outputs: {
101
- name: string;
102
- }[];
103
- complementZ: number;
104
- complementW: number;
105
- type?: undefined;
106
- mode?: undefined;
107
- animationType?: undefined;
108
- min?: undefined;
109
- max?: undefined;
110
- isBoolean?: undefined;
111
- matrixMode?: undefined;
112
- isConstant?: undefined;
113
- groupInInspector?: undefined;
114
- convertToGammaSpace?: undefined;
115
- convertToLinearSpace?: undefined;
116
- systemValue?: undefined;
117
- rSwizzle?: undefined;
118
- gSwizzle?: undefined;
119
- bSwizzle?: undefined;
120
- aSwizzle?: undefined;
121
- operation?: undefined;
122
- xSwizzle?: undefined;
123
- ySwizzle?: undefined;
124
- zSwizzle?: undefined;
125
- wSwizzle?: undefined;
126
- valueType?: undefined;
127
- value?: undefined;
128
- fragmentOnly?: undefined;
129
- disableLevelMultiplication?: undefined;
130
- } | {
131
- customType: string;
132
- id: number;
133
- name: string;
134
- comments: string;
135
- visibleInInspector: boolean;
136
- visibleOnFrame: boolean;
137
- target: number;
138
- inputs: never[];
139
- outputs: {
140
- name: string;
141
- }[];
142
- type: number;
143
- mode: number;
144
- animationType: number;
145
- min: number;
146
- max: number;
147
- isBoolean: boolean;
148
- matrixMode: number;
149
- isConstant: boolean;
150
- groupInInspector: string;
151
- convertToGammaSpace: boolean;
152
- convertToLinearSpace: boolean;
153
- complementZ?: undefined;
154
- complementW?: undefined;
155
- systemValue?: undefined;
156
- rSwizzle?: undefined;
157
- gSwizzle?: undefined;
158
- bSwizzle?: undefined;
159
- aSwizzle?: undefined;
160
- operation?: undefined;
161
- xSwizzle?: undefined;
162
- ySwizzle?: undefined;
163
- zSwizzle?: undefined;
164
- wSwizzle?: undefined;
165
- valueType?: undefined;
166
- value?: undefined;
167
- fragmentOnly?: undefined;
168
- disableLevelMultiplication?: undefined;
169
- } | {
170
- customType: string;
171
- id: number;
172
- name: string;
173
- comments: string;
174
- visibleInInspector: boolean;
175
- visibleOnFrame: boolean;
176
- target: number;
177
- inputs: never[];
178
- outputs: {
179
- name: string;
180
- }[];
181
- type: number;
182
- mode: number;
183
- systemValue: number;
184
- animationType: number;
185
- min: number;
186
- max: number;
187
- isBoolean: boolean;
188
- matrixMode: number;
189
- isConstant: boolean;
190
- groupInInspector: string;
191
- convertToGammaSpace: boolean;
192
- convertToLinearSpace: boolean;
193
- complementZ?: undefined;
194
- complementW?: undefined;
195
- rSwizzle?: undefined;
196
- gSwizzle?: undefined;
197
- bSwizzle?: undefined;
198
- aSwizzle?: undefined;
199
- operation?: undefined;
200
- xSwizzle?: undefined;
201
- ySwizzle?: undefined;
202
- zSwizzle?: undefined;
203
- wSwizzle?: undefined;
204
- valueType?: undefined;
205
- value?: undefined;
206
- fragmentOnly?: undefined;
207
- disableLevelMultiplication?: undefined;
208
- } | {
209
- customType: string;
210
- id: number;
211
- name: string;
212
- comments: string;
213
- visibleInInspector: boolean;
214
- visibleOnFrame: boolean;
215
- target: number;
216
- inputs: ({
217
- name: string;
218
- displayName: string;
219
- inputName?: undefined;
220
- targetBlockId?: undefined;
221
- targetConnectionName?: undefined;
222
- isExposedOnFrame?: undefined;
223
- exposedPortPosition?: undefined;
224
- } | {
225
- name: string;
226
- displayName: string;
227
- inputName: string;
228
- targetBlockId: number;
229
- targetConnectionName: string;
230
- isExposedOnFrame: boolean;
231
- exposedPortPosition: number;
232
- })[];
233
- outputs: never[];
234
- convertToGammaSpace: boolean;
235
- convertToLinearSpace: boolean;
236
- complementZ?: undefined;
237
- complementW?: undefined;
238
- type?: undefined;
239
- mode?: undefined;
240
- animationType?: undefined;
241
- min?: undefined;
242
- max?: undefined;
243
- isBoolean?: undefined;
244
- matrixMode?: undefined;
245
- isConstant?: undefined;
246
- groupInInspector?: undefined;
247
- systemValue?: undefined;
248
- rSwizzle?: undefined;
249
- gSwizzle?: undefined;
250
- bSwizzle?: undefined;
251
- aSwizzle?: undefined;
252
- operation?: undefined;
253
- xSwizzle?: undefined;
254
- ySwizzle?: undefined;
255
- zSwizzle?: undefined;
256
- wSwizzle?: undefined;
257
- valueType?: undefined;
258
- value?: undefined;
259
- fragmentOnly?: undefined;
260
- disableLevelMultiplication?: undefined;
261
- } | {
262
- customType: string;
263
- id: number;
264
- name: string;
265
- comments: string;
266
- visibleInInspector: boolean;
267
- visibleOnFrame: boolean;
268
- target: number;
269
- inputs: ({
270
- name: string;
271
- displayName: string;
272
- inputName: string;
273
- targetBlockId: number;
274
- targetConnectionName: string;
275
- isExposedOnFrame: boolean;
276
- exposedPortPosition: number;
277
- } | {
278
- name: string;
279
- displayName: string;
280
- isExposedOnFrame: boolean;
281
- exposedPortPosition: number;
282
- inputName?: undefined;
283
- targetBlockId?: undefined;
284
- targetConnectionName?: undefined;
285
- })[];
286
- outputs: {
287
- name: string;
288
- displayName: string;
289
- }[];
290
- complementZ?: undefined;
291
- complementW?: undefined;
292
- type?: undefined;
293
- mode?: undefined;
294
- animationType?: undefined;
295
- min?: undefined;
296
- max?: undefined;
297
- isBoolean?: undefined;
298
- matrixMode?: undefined;
299
- isConstant?: undefined;
300
- groupInInspector?: undefined;
301
- convertToGammaSpace?: undefined;
302
- convertToLinearSpace?: undefined;
303
- systemValue?: undefined;
304
- rSwizzle?: undefined;
305
- gSwizzle?: undefined;
306
- bSwizzle?: undefined;
307
- aSwizzle?: undefined;
308
- operation?: undefined;
309
- xSwizzle?: undefined;
310
- ySwizzle?: undefined;
311
- zSwizzle?: undefined;
312
- wSwizzle?: undefined;
313
- valueType?: undefined;
314
- value?: undefined;
315
- fragmentOnly?: undefined;
316
- disableLevelMultiplication?: undefined;
317
- } | {
318
- customType: string;
319
- id: number;
320
- name: string;
321
- comments: string;
322
- visibleInInspector: boolean;
323
- visibleOnFrame: boolean;
324
- target: number;
325
- inputs: ({
326
- name: string;
327
- displayName: string;
328
- inputName?: undefined;
329
- targetBlockId?: undefined;
330
- targetConnectionName?: undefined;
331
- isExposedOnFrame?: undefined;
332
- exposedPortPosition?: undefined;
333
- } | {
334
- name: string;
335
- displayName: string;
336
- inputName: string;
337
- targetBlockId: number;
338
- targetConnectionName: string;
339
- isExposedOnFrame: boolean;
340
- exposedPortPosition: number;
341
- })[];
342
- outputs: {
343
- name: string;
344
- displayName: string;
345
- }[];
346
- rSwizzle: string;
347
- gSwizzle: string;
348
- bSwizzle: string;
349
- aSwizzle: string;
350
- complementZ?: undefined;
351
- complementW?: undefined;
352
- type?: undefined;
353
- mode?: undefined;
354
- animationType?: undefined;
355
- min?: undefined;
356
- max?: undefined;
357
- isBoolean?: undefined;
358
- matrixMode?: undefined;
359
- isConstant?: undefined;
360
- groupInInspector?: undefined;
361
- convertToGammaSpace?: undefined;
362
- convertToLinearSpace?: undefined;
363
- systemValue?: undefined;
364
- operation?: undefined;
365
- xSwizzle?: undefined;
366
- ySwizzle?: undefined;
367
- zSwizzle?: undefined;
368
- wSwizzle?: undefined;
369
- valueType?: undefined;
370
- value?: undefined;
371
- fragmentOnly?: undefined;
372
- disableLevelMultiplication?: undefined;
373
- } | {
374
- customType: string;
375
- id: number;
376
- name: string;
377
- comments: string;
378
- visibleInInspector: boolean;
379
- visibleOnFrame: boolean;
380
- target: number;
381
- inputs: {
382
- name: string;
383
- inputName: string;
384
- targetBlockId: number;
385
- targetConnectionName: string;
386
- isExposedOnFrame: boolean;
387
- exposedPortPosition: number;
388
- }[];
389
- outputs: {
390
- name: string;
391
- }[];
392
- operation: number;
393
- complementZ?: undefined;
394
- complementW?: undefined;
395
- type?: undefined;
396
- mode?: undefined;
397
- animationType?: undefined;
398
- min?: undefined;
399
- max?: undefined;
400
- isBoolean?: undefined;
401
- matrixMode?: undefined;
402
- isConstant?: undefined;
403
- groupInInspector?: undefined;
404
- convertToGammaSpace?: undefined;
405
- convertToLinearSpace?: undefined;
406
- systemValue?: undefined;
407
- rSwizzle?: undefined;
408
- gSwizzle?: undefined;
409
- bSwizzle?: undefined;
410
- aSwizzle?: undefined;
411
- xSwizzle?: undefined;
412
- ySwizzle?: undefined;
413
- zSwizzle?: undefined;
414
- wSwizzle?: undefined;
415
- valueType?: undefined;
416
- value?: undefined;
417
- fragmentOnly?: undefined;
418
- disableLevelMultiplication?: undefined;
419
- } | {
420
- customType: string;
421
- id: number;
422
- name: string;
423
- comments: string;
424
- visibleInInspector: boolean;
425
- visibleOnFrame: boolean;
426
- target: number;
427
- inputs: ({
428
- name: string;
429
- inputName?: undefined;
430
- targetBlockId?: undefined;
431
- targetConnectionName?: undefined;
432
- isExposedOnFrame?: undefined;
433
- exposedPortPosition?: undefined;
434
- } | {
435
- name: string;
436
- inputName: string;
437
- targetBlockId: number;
438
- targetConnectionName: string;
439
- isExposedOnFrame: boolean;
440
- exposedPortPosition: number;
441
- })[];
442
- outputs: {
443
- name: string;
444
- }[];
445
- xSwizzle: string;
446
- ySwizzle: string;
447
- zSwizzle: string;
448
- wSwizzle: string;
449
- complementZ?: undefined;
450
- complementW?: undefined;
451
- type?: undefined;
452
- mode?: undefined;
453
- animationType?: undefined;
454
- min?: undefined;
455
- max?: undefined;
456
- isBoolean?: undefined;
457
- matrixMode?: undefined;
458
- isConstant?: undefined;
459
- groupInInspector?: undefined;
460
- convertToGammaSpace?: undefined;
461
- convertToLinearSpace?: undefined;
462
- systemValue?: undefined;
463
- rSwizzle?: undefined;
464
- gSwizzle?: undefined;
465
- bSwizzle?: undefined;
466
- aSwizzle?: undefined;
467
- operation?: undefined;
468
- valueType?: undefined;
469
- value?: undefined;
470
- fragmentOnly?: undefined;
471
- disableLevelMultiplication?: undefined;
472
- } | {
473
- customType: string;
474
- id: number;
475
- name: string;
476
- comments: string;
477
- visibleInInspector: boolean;
478
- visibleOnFrame: boolean;
479
- target: number;
480
- inputs: ({
481
- name: string;
482
- inputName: string;
483
- targetBlockId: number;
484
- targetConnectionName: string;
485
- isExposedOnFrame: boolean;
486
- exposedPortPosition: number;
487
- } | {
488
- name: string;
489
- isExposedOnFrame: boolean;
490
- exposedPortPosition: number;
491
- inputName?: undefined;
492
- targetBlockId?: undefined;
493
- targetConnectionName?: undefined;
494
- } | {
495
- name: string;
496
- inputName?: undefined;
497
- targetBlockId?: undefined;
498
- targetConnectionName?: undefined;
499
- isExposedOnFrame?: undefined;
500
- exposedPortPosition?: undefined;
501
- })[];
502
- outputs: {
503
- name: string;
504
- }[];
505
- complementZ?: undefined;
506
- complementW?: undefined;
507
- type?: undefined;
508
- mode?: undefined;
509
- animationType?: undefined;
510
- min?: undefined;
511
- max?: undefined;
512
- isBoolean?: undefined;
513
- matrixMode?: undefined;
514
- isConstant?: undefined;
515
- groupInInspector?: undefined;
516
- convertToGammaSpace?: undefined;
517
- convertToLinearSpace?: undefined;
518
- systemValue?: undefined;
519
- rSwizzle?: undefined;
520
- gSwizzle?: undefined;
521
- bSwizzle?: undefined;
522
- aSwizzle?: undefined;
523
- operation?: undefined;
524
- xSwizzle?: undefined;
525
- ySwizzle?: undefined;
526
- zSwizzle?: undefined;
527
- wSwizzle?: undefined;
528
- valueType?: undefined;
529
- value?: undefined;
530
- fragmentOnly?: undefined;
531
- disableLevelMultiplication?: undefined;
532
- } | {
533
- customType: string;
534
- id: number;
535
- name: string;
536
- comments: string;
537
- visibleInInspector: boolean;
538
- visibleOnFrame: boolean;
539
- target: number;
540
- inputs: never[];
541
- outputs: {
542
- name: string;
543
- }[];
544
- type: number;
545
- mode: number;
546
- animationType: number;
547
- min: number;
548
- max: number;
549
- isBoolean: boolean;
550
- matrixMode: number;
551
- isConstant: boolean;
552
- groupInInspector: string;
553
- convertToGammaSpace: boolean;
554
- convertToLinearSpace: boolean;
555
- valueType: string;
556
- value: number[];
557
- complementZ?: undefined;
558
- complementW?: undefined;
559
- systemValue?: undefined;
560
- rSwizzle?: undefined;
561
- gSwizzle?: undefined;
562
- bSwizzle?: undefined;
563
- aSwizzle?: undefined;
564
- operation?: undefined;
565
- xSwizzle?: undefined;
566
- ySwizzle?: undefined;
567
- zSwizzle?: undefined;
568
- wSwizzle?: undefined;
569
- fragmentOnly?: undefined;
570
- disableLevelMultiplication?: undefined;
571
- } | {
572
- customType: string;
573
- id: number;
574
- name: string;
575
- comments: string;
576
- visibleInInspector: boolean;
577
- visibleOnFrame: boolean;
578
- target: number;
579
- inputs: never[];
580
- outputs: {
581
- name: string;
582
- }[];
583
- type: number;
584
- mode: number;
585
- animationType: number;
586
- min: number;
587
- max: number;
588
- isBoolean: boolean;
589
- matrixMode: number;
590
- isConstant: boolean;
591
- groupInInspector: string;
592
- convertToGammaSpace: boolean;
593
- convertToLinearSpace: boolean;
594
- valueType: string;
595
- value: number;
596
- complementZ?: undefined;
597
- complementW?: undefined;
598
- systemValue?: undefined;
599
- rSwizzle?: undefined;
600
- gSwizzle?: undefined;
601
- bSwizzle?: undefined;
602
- aSwizzle?: undefined;
603
- operation?: undefined;
604
- xSwizzle?: undefined;
605
- ySwizzle?: undefined;
606
- zSwizzle?: undefined;
607
- wSwizzle?: undefined;
608
- fragmentOnly?: undefined;
609
- disableLevelMultiplication?: undefined;
610
- } | {
611
- customType: string;
612
- id: number;
613
- name: string;
614
- comments: string;
615
- visibleInInspector: boolean;
616
- visibleOnFrame: boolean;
617
- target: number;
618
- inputs: ({
619
- name: string;
620
- displayName: string;
621
- inputName: string;
622
- targetBlockId: number;
623
- targetConnectionName: string;
624
- isExposedOnFrame: boolean;
625
- exposedPortPosition: number;
626
- } | {
627
- name: string;
628
- displayName: string;
629
- inputName?: undefined;
630
- targetBlockId?: undefined;
631
- targetConnectionName?: undefined;
632
- isExposedOnFrame?: undefined;
633
- exposedPortPosition?: undefined;
634
- })[];
635
- outputs: {
636
- name: string;
637
- displayName: string;
638
- }[];
639
- convertToGammaSpace: boolean;
640
- convertToLinearSpace: boolean;
641
- fragmentOnly: boolean;
642
- disableLevelMultiplication: boolean;
643
- complementZ?: undefined;
644
- complementW?: undefined;
645
- type?: undefined;
646
- mode?: undefined;
647
- animationType?: undefined;
648
- min?: undefined;
649
- max?: undefined;
650
- isBoolean?: undefined;
651
- matrixMode?: undefined;
652
- isConstant?: undefined;
653
- groupInInspector?: undefined;
654
- systemValue?: undefined;
655
- rSwizzle?: undefined;
656
- gSwizzle?: undefined;
657
- bSwizzle?: undefined;
658
- aSwizzle?: undefined;
659
- operation?: undefined;
660
- xSwizzle?: undefined;
661
- ySwizzle?: undefined;
662
- zSwizzle?: undefined;
663
- wSwizzle?: undefined;
664
- valueType?: undefined;
665
- value?: undefined;
666
- })[];
667
- };
668
- }
669
34
  declare module "@babylonjs/gui-editor/diagram/workbench" {
670
35
  import * as React from "react";
671
36
  import { GlobalState } from "@babylonjs/gui-editor/globalState";
@@ -673,12 +38,9 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
673
38
  import { Control } from "@babylonjs/gui/2D/controls/control";
674
39
  import { Vector2, Vector3 } from "@babylonjs/core/Maths/math.vector";
675
40
  import { Scene } from "@babylonjs/core/scene";
676
- import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
677
- import { Mesh } from "@babylonjs/core/Meshes/mesh";
678
- import { Plane } from "@babylonjs/core/Maths/math.plane";
679
- import { PointerInfo } from "@babylonjs/core/Events/pointerEvents";
680
- import { EventState } from "@babylonjs/core/Misc/observable";
681
- import { Rectangle } from "@babylonjs/gui/2D/controls/rectangle";
41
+ import { IWheelEvent } from "@babylonjs/core/Events/deviceInputEvents";
42
+ import { Container } from "@babylonjs/gui/2D/controls/container";
43
+ import { ISize } from "@babylonjs/core/Maths/math";
682
44
  export interface IWorkbenchComponentProps {
683
45
  globalState: GlobalState;
684
46
  }
@@ -688,12 +50,10 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
688
50
  Y = 3
689
51
  }
690
52
  export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps> {
691
- artBoardBackground: Rectangle;
692
53
  private _rootContainer;
693
54
  private _setConstraintDirection;
694
55
  private _mouseStartPointX;
695
56
  private _mouseStartPointY;
696
- _textureMesh: Mesh;
697
57
  _scene: Scene;
698
58
  private _selectedGuiNodes;
699
59
  private _ctrlKeyIsPressed;
@@ -709,9 +69,6 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
709
69
  private _isOverGUINode;
710
70
  private _clipboard;
711
71
  private _selectAll;
712
- _camera: ArcRotateCamera;
713
- private _cameraRadias;
714
- private _cameraMaxRadiasFactor;
715
72
  private _pasted;
716
73
  private _engine;
717
74
  private _liveRenderObserver;
@@ -721,6 +78,25 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
721
78
  private _doubleClick;
722
79
  private _lockMainSelection;
723
80
  _liveGuiTextureRerender: boolean;
81
+ private _anyControlClicked;
82
+ private _visibleRegionContainer;
83
+ private _panAndZoomContainer;
84
+ get visibleRegionContainer(): Container;
85
+ private _trueRootContainer;
86
+ set trueRootContainer(value: Container);
87
+ get trueRootContainer(): Container;
88
+ private _nextLiveGuiRender;
89
+ private _liveGuiRerenderDelay;
90
+ private _defaultGUISize;
91
+ private _initialPanningOffset;
92
+ private _panningOffset;
93
+ private _zoomFactor;
94
+ private _zoomModeIncrement;
95
+ private _guiSize;
96
+ get guiSize(): ISize;
97
+ set guiSize(value: ISize);
98
+ applyEditorTransformation(): void;
99
+ removeEditorTransformation(): void;
724
100
  get globalState(): GlobalState;
725
101
  get nodes(): Control[];
726
102
  get selectedGuiNodes(): Control[];
@@ -731,7 +107,6 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
731
107
  keyEvent: (evt: KeyboardEvent) => void;
732
108
  private updateHitTest;
733
109
  private updateHitTestForSelection;
734
- private setCameraRadius;
735
110
  copyToClipboard(): void;
736
111
  pasteFromClipboard(): void;
737
112
  CopyGUIControl(original: Control): void;
@@ -742,7 +117,6 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
742
117
  loadFromSnippet(snippetId: string): Promise<void>;
743
118
  loadToEditor(): void;
744
119
  changeSelectionHighlight(value: boolean): void;
745
- resizeGuiTexture(newvalue: Vector2): void;
746
120
  findNodeFromGuiElement(guiControl: Control): Control;
747
121
  appendBlock(guiElement: Control): Control;
748
122
  private _isMainSelectionParent;
@@ -757,17 +131,17 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
757
131
  _onMove(guiControl: Control, evt: Vector2, startPos: Vector2, ignorClick?: boolean): boolean;
758
132
  convertToPercentage(guiControl: Control, includeScale: boolean): void;
759
133
  onMove(evt: React.PointerEvent): void;
760
- getGroundPosition(): Nullable<Vector3>;
134
+ private _screenToTexturePosition;
135
+ private getScaledPointerPosition;
761
136
  onDown(evt: React.PointerEvent<HTMLElement>): void;
762
137
  isUp: boolean;
763
138
  onUp(evt: React.PointerEvent): void;
764
139
  createGUICanvas(): void;
765
140
  synchronizeLiveGUI(): void;
766
- addControls(scene: Scene, camera: ArcRotateCamera): void;
767
- getPosition(scene: Scene, camera: ArcRotateCamera, plane: Plane, x?: number, y?: number): Vector3;
768
- panning(newPos: Vector3, initialPos: Vector3, inertia: number, ref: Vector3): Vector3;
769
- zoomWheel(p: PointerInfo, e: EventState, camera: ArcRotateCamera): number;
770
- zooming(delta: number, scene: Scene, camera: ArcRotateCamera, plane: Plane, ref: Vector3): void;
141
+ addControls(scene: Scene): void;
142
+ panning(): void;
143
+ zoomWheel(event: IWheelEvent): number;
144
+ zooming(delta: number): void;
771
145
  zeroIfClose(vec: Vector3): void;
772
146
  render(): JSX.Element;
773
147
  }
@@ -792,29 +166,32 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lock
792
166
  lock: boolean;
793
167
  }
794
168
  }
795
- declare module "@babylonjs/gui-editor/diagram/guiGizmo" {
169
+ declare module "@babylonjs/gui-editor/diagram/coordinateHelper" {
796
170
  import { Control } from "@babylonjs/gui/2D/controls/control";
171
+ import { Matrix2D } from "@babylonjs/gui/2D/math2D";
797
172
  import { Vector2 } from "@babylonjs/core/Maths/math.vector";
798
- import * as React from "react";
799
173
  import { GlobalState } from "@babylonjs/gui-editor/globalState";
800
- export interface IGuiGizmoProps {
801
- globalState: GlobalState;
802
- }
803
- export class GuiGizmoComponent extends React.Component<IGuiGizmoProps> {
804
- scalePoints: HTMLDivElement[];
805
- private _scalePointIndex;
806
- private _pointerData;
807
- private _htmlPoints;
808
- private _matrixCache;
809
- private _responsive;
810
- constructor(props: IGuiGizmoProps);
811
- componentDidMount(): void;
174
+ export class Rect {
175
+ top: number;
176
+ left: number;
177
+ right: number;
178
+ bottom: number;
179
+ constructor(left: number, top: number, right: number, bottom: number);
180
+ get center(): Vector2;
181
+ get width(): number;
182
+ get height(): number;
183
+ }
184
+ export class CoordinateHelper {
185
+ private static _matrixCache;
186
+ static globalState: GlobalState;
812
187
  /**
813
- * Update the gizmo's corners positions
814
- * @param force should the update be forced. otherwise it will be updated only when the pointer is down
188
+ * Get the scaling of a specific GUI control
189
+ * @param node the node for which we are getting the scaling
190
+ * @param relative should we return only the relative scaling (relative to the parent)
191
+ * @returns an X,Y vector of the scaling
815
192
  */
816
- updateGizmo(force?: boolean): void;
817
- private _resetMatrixArray;
193
+ static getScale(node: Control, relative?: boolean): Vector2;
194
+ static getRotation(node: Control, relative?: boolean): number;
818
195
  /**
819
196
  * This function calculates a local matrix for a node, including it's full transformation and pivot point
820
197
  *
@@ -822,50 +199,72 @@ declare module "@babylonjs/gui-editor/diagram/guiGizmo" {
822
199
  * @param useStoredValues should the stored (cached) values be used to calculate the matrix
823
200
  * @returns a new matrix for the control
824
201
  */
825
- private _getNodeMatrix;
202
+ static getNodeMatrix(node: Control, storedValues?: Rect): Matrix2D;
826
203
  /**
827
204
  * Using the node's tree, calculate its world matrix and return it
828
205
  * @param node the node to calculate the matrix for
829
206
  * @param useStoredValuesIfPossible used stored valued (cached when pointer down is clicked)
830
207
  * @returns the world matrix for this node
831
208
  */
832
- private _nodeToRTTWorldMatrix;
833
- private _nodeToRTTSpace;
834
- private _rttToLocalNodeSpace;
835
- private _rttToCanvasSpace;
836
- private _plane;
837
- private _mousePointerToRTTSpace;
209
+ static nodeToRTTWorldMatrix(node: Control, storedValues?: Rect): Matrix2D;
210
+ static nodeToRTTSpace(node: Control, x: number, y: number, reference?: Vector2, storedValues?: Rect): Vector2;
211
+ static rttToLocalNodeSpace(node: Control, x: number, y: number, reference?: Vector2, storedValues?: Rect): Vector2;
212
+ static rttToCanvasSpace(x: number, y: number): Vector2;
213
+ static mousePointerToRTTSpace(node: Control, x?: number, y?: number): Vector2;
214
+ private static resetMatrixArray;
215
+ static computeLocalBounds(node: Control): Rect;
216
+ }
217
+ }
218
+ declare module "@babylonjs/gui-editor/diagram/guiGizmo" {
219
+ import { Vector2 } from "@babylonjs/core/Maths/math.vector";
220
+ import * as React from "react";
221
+ import { GlobalState } from "@babylonjs/gui-editor/globalState";
222
+ import { Rect } from "@babylonjs/gui-editor/diagram/coordinateHelper";
223
+ export interface IGuiGizmoProps {
224
+ globalState: GlobalState;
225
+ }
226
+ enum ScalePointPosition {
227
+ Top = -1,
228
+ Left = -1,
229
+ Center = 0,
230
+ Right = 1,
231
+ Bottom = 1
232
+ }
233
+ interface IScalePoint {
234
+ position: Vector2;
235
+ horizontalPosition: ScalePointPosition;
236
+ verticalPosition: ScalePointPosition;
237
+ rotation: number;
238
+ isPivot: boolean;
239
+ }
240
+ interface IGuiGizmoState {
241
+ canvasBounds: Rect;
242
+ scalePoints: IScalePoint[];
243
+ scalePointDragging: number;
244
+ isRotating: boolean;
245
+ }
246
+ export class GuiGizmoComponent extends React.Component<IGuiGizmoProps, IGuiGizmoState> {
247
+ private _responsive;
248
+ private _storedValues;
249
+ private _localBounds;
250
+ private _rotation;
251
+ constructor(props: IGuiGizmoProps);
252
+ componentDidMount(): void;
838
253
  /**
839
- * Get the scaling of a specific GUI control
840
- * @param node the node for which we are getting the scaling
841
- * @param relative should we return only the relative scaling (relative to the parent)
842
- * @returns an X,Y vector of the scaling
254
+ * Update the gizmo's positions
255
+ * @param force should the update be forced. otherwise it will be updated only when the pointer is down
843
256
  */
844
- getScale(node: Control, relative?: boolean): Vector2;
845
- getRotation(node: Control, relative?: boolean): number;
846
- createBaseGizmo(): void;
257
+ updateGizmo(force?: boolean): void;
847
258
  onUp(evt?: React.PointerEvent): void;
848
259
  private _onUp;
849
260
  onMove(evt: React.PointerEvent): void;
850
- private _initH;
851
- private _initW;
852
- private _initX;
853
- private _initY;
854
261
  private _onMove;
855
- /**
856
- * Calculate the 4 corners in node space
857
- * @param node The node to use
858
- */
859
- private _nodeToCorners;
860
- /**
861
- * Computer the node's width, height, top and left, using the 4 corners
862
- * @param node the node we use
863
- */
864
- private _updateNodeFromCorners;
865
262
  private _rotate;
866
- private _setNodeCorner;
867
- private _setMousePosition;
868
- render(): null;
263
+ private _dragLocalBounds;
264
+ private _updateNodeFromLocalBounds;
265
+ private _beginDraggingScalePoint;
266
+ private _beginRotate;
267
+ render(): JSX.Element | null;
869
268
  }
870
269
  }
871
270
  declare module "@babylonjs/gui-editor/globalState" {
@@ -876,11 +275,11 @@ declare module "@babylonjs/gui-editor/globalState" {
876
275
  import { WorkbenchComponent } from "@babylonjs/gui-editor/diagram/workbench";
877
276
  import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture";
878
277
  import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
879
- import { Vector2 } from "@babylonjs/core/Maths/math.vector";
880
278
  import { Scene } from "@babylonjs/core/scene";
881
279
  import { Control } from "@babylonjs/gui/2D/controls/control";
882
280
  import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
883
281
  import { GuiGizmoComponent } from "@babylonjs/gui-editor/diagram/guiGizmo";
282
+ import { ISize } from "@babylonjs/core/Maths/math";
884
283
  export enum DragOverLocation {
885
284
  ABOVE = 0,
886
285
  BELOW = 1,
@@ -895,7 +294,7 @@ declare module "@babylonjs/gui-editor/globalState" {
895
294
  hostDocument: HTMLDocument;
896
295
  hostWindow: Window;
897
296
  onSelectionChangedObservable: Observable<Nullable<Control>>;
898
- onResizeObservable: Observable<Vector2>;
297
+ onResizeObservable: Observable<ISize>;
899
298
  onBuiltObservable: Observable<void>;
900
299
  onResetRequiredObservable: Observable<void>;
901
300
  onUpdateRequiredObservable: Observable<void>;
@@ -930,6 +329,7 @@ declare module "@babylonjs/gui-editor/globalState" {
930
329
  onDraggingStartObservable: Observable<void>;
931
330
  onWindowResizeObservable: Observable<void>;
932
331
  onGizmoUpdateRequireObservable: Observable<void>;
332
+ onArtBoardUpdateRequiredObservable: Observable<void>;
933
333
  draggedControl: Nullable<Control>;
934
334
  draggedControlDirection: DragOverLocation;
935
335
  isSaving: boolean;
@@ -1750,7 +1150,7 @@ declare module "@babylonjs/gui-editor/guiNodeTools" {
1750
1150
  import { ImageBasedSlider } from "@babylonjs/gui/2D/controls/sliders/imageBasedSlider";
1751
1151
  export class GUINodeTools {
1752
1152
  static ImageControlDefaultUrl: string;
1753
- static CreateControlFromString(data: string): Grid | Rectangle | Line | Image | TextBlock | Slider | ImageBasedSlider | RadioButton | InputText | ColorPicker | StackPanel | Ellipse | Checkbox | DisplayGrid;
1153
+ static CreateControlFromString(data: string): Grid | Line | Rectangle | Image | TextBlock | Slider | ImageBasedSlider | RadioButton | InputText | ColorPicker | StackPanel | Ellipse | Checkbox | DisplayGrid;
1754
1154
  }
1755
1155
  }
1756
1156
  declare module "@babylonjs/gui-editor/components/propertyTab/propertyTabComponent" {
@@ -1779,8 +1179,9 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyTabComponen
1779
1179
  saveToSnippetServerHelper: (content: string, adt: AdvancedDynamicTexture) => Promise<string>;
1780
1180
  saveToSnippetServer: () => Promise<void>;
1781
1181
  loadFromSnippet(): void;
1782
- renderProperties(): JSX.Element | null;
1783
- renderControlIcon(): string;
1182
+ renderNode(node: Control): JSX.Element;
1183
+ renderProperties(node: Control): JSX.Element | null;
1184
+ renderControlIcon(node: Control): string;
1784
1185
  render(): JSX.Element | null;
1785
1186
  }
1786
1187
  }
@@ -1895,8 +1296,8 @@ declare module "@babylonjs/gui-editor/components/sceneExplorer/treeItemSelectabl
1895
1296
  scrollIntoView(): void;
1896
1297
  componentWillUnmount(): void;
1897
1298
  onSelect(): void;
1898
- renderChildren(isExpanded: boolean): (JSX.Element | null)[] | null;
1899
- render(): JSX.Element | null;
1299
+ renderChildren(isExpanded: boolean, offset?: boolean): (JSX.Element | null)[] | null;
1300
+ render(): JSX.Element | (JSX.Element | null)[] | null;
1900
1301
  dragOver(event: React.DragEvent<HTMLDivElement>): void;
1901
1302
  drop(): void;
1902
1303
  }
@@ -2030,6 +1431,22 @@ declare module "@babylonjs/gui-editor/components/commandBarComponent" {
2030
1431
  render(): JSX.Element;
2031
1432
  }
2032
1433
  }
1434
+ declare module "@babylonjs/gui-editor/diagram/artBoard" {
1435
+ import * as React from "react";
1436
+ import { GlobalState } from "@babylonjs/gui-editor/globalState";
1437
+ import { Rect } from "@babylonjs/gui-editor/diagram/coordinateHelper";
1438
+ interface IArtBoardProps {
1439
+ globalState: GlobalState;
1440
+ }
1441
+ interface IArtBoardState {
1442
+ bounds: Rect;
1443
+ }
1444
+ export class ArtBoardComponent extends React.Component<IArtBoardProps, IArtBoardState> {
1445
+ constructor(props: IArtBoardProps);
1446
+ update(): void;
1447
+ render(): JSX.Element;
1448
+ }
1449
+ }
2033
1450
  declare module "@babylonjs/gui-editor/workbenchEditor" {
2034
1451
  import * as React from "react";
2035
1452
  import { GlobalState } from "@babylonjs/gui-editor/globalState";