@babylonjs/gui-editor 5.0.0-beta.9 → 5.0.0-rc.2

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.
@@ -1,4 +1,10 @@
1
1
  /// <reference types="react" />
2
+ declare module "@babylonjs/gui-editor/controlTypes" {
3
+ export const ControlTypes: {
4
+ className: string;
5
+ icon: string;
6
+ }[];
7
+ }
2
8
  declare module "@babylonjs/gui-editor/components/log/logComponent" {
3
9
  import * as React from "react";
4
10
  import { GlobalState } from "@babylonjs/gui-editor/globalState";
@@ -24,7 +30,7 @@ declare module "@babylonjs/gui-editor/tools" {
24
30
  import { Grid } from "@babylonjs/gui/2D/controls/grid";
25
31
  import { Vector2 } from "@babylonjs/core/Maths/math";
26
32
  export class Tools {
27
- static LookForItem(item: any, selectedEntity: any, firstIteration?: boolean): boolean;
33
+ static LookForItems(item: any, selectedEntities: any[], firstIteration?: boolean): boolean;
28
34
  private static _RecursiveRemoveHiddenMeshesAndHoistChildren;
29
35
  static SortAndFilter(parent: any, items: any[]): any[];
30
36
  static getCellInfo(grid: Grid, control: Control): Vector2;
@@ -47,13 +53,14 @@ declare module "@babylonjs/gui-editor/diagram/coordinateHelper" {
47
53
  import { Observable } from "@babylonjs/core/Misc/observable";
48
54
  import { GlobalState } from "@babylonjs/gui-editor/globalState";
49
55
  import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
50
- export type DimensionProperties = "width" | "left" | "height" | "top" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingBottom";
56
+ export type DimensionProperties = "width" | "left" | "height" | "top" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingBottom" | "fontSize";
51
57
  export class Rect {
52
58
  top: number;
53
59
  left: number;
54
60
  right: number;
55
61
  bottom: number;
56
62
  constructor(left: number, top: number, right: number, bottom: number);
63
+ clone(): Rect;
57
64
  get center(): Vector2;
58
65
  get width(): number;
59
66
  get height(): number;
@@ -101,11 +108,9 @@ declare module "@babylonjs/gui-editor/diagram/coordinateHelper" {
101
108
  declare module "@babylonjs/gui-editor/diagram/workbench" {
102
109
  import * as React from "react";
103
110
  import { GlobalState } from "@babylonjs/gui-editor/globalState";
104
- import { Nullable } from "@babylonjs/core/types";
105
111
  import { Control } from "@babylonjs/gui/2D/controls/control";
106
112
  import { Vector2, Vector3 } from "@babylonjs/core/Maths/math.vector";
107
113
  import { Scene } from "@babylonjs/core/scene";
108
- import { IWheelEvent } from "@babylonjs/core/Events/deviceInputEvents";
109
114
  import { Container } from "@babylonjs/gui/2D/controls/container";
110
115
  import { ISize } from "@babylonjs/core/Maths/math";
111
116
  export interface IWorkbenchComponentProps {
@@ -122,28 +127,22 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
122
127
  private _mouseStartPointX;
123
128
  private _mouseStartPointY;
124
129
  _scene: Scene;
125
- private _selectedGuiNodes;
126
130
  private _ctrlKeyIsPressed;
127
131
  private _altKeyIsPressed;
128
132
  private _constraintDirection;
129
133
  private _forcePanning;
130
134
  private _forceZooming;
131
135
  private _forceSelecting;
132
- private _outlines;
133
136
  private _panning;
134
137
  private _canvas;
135
138
  private _responsive;
136
139
  private _isOverGUINode;
137
- private _clipboard;
138
- private _selectAll;
139
- private _pasted;
140
140
  private _engine;
141
141
  private _liveRenderObserver;
142
142
  private _guiRenderObserver;
143
143
  private _mainSelection;
144
144
  private _selectionDepth;
145
145
  private _doubleClick;
146
- private _lockMainSelection;
147
146
  _liveGuiTextureRerender: boolean;
148
147
  private _anyControlClicked;
149
148
  private _visibleRegionContainer;
@@ -171,12 +170,12 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
171
170
  private _getParentWithDepth;
172
171
  private _getMaxParent;
173
172
  constructor(props: IWorkbenchComponentProps);
174
- determineMouseSelection(selection: Nullable<Control>): void;
173
+ determineMouseSelection(selection: Control): void;
175
174
  keyEvent: (evt: KeyboardEvent) => void;
176
- private updateHitTest;
177
- private updateHitTestForSelection;
178
- copyToClipboard(): void;
179
- pasteFromClipboard(): void;
175
+ private _deleteSelectedNodes;
176
+ copyToClipboard(copyFn: (content: string) => void): void;
177
+ cutToClipboard(copyFn: (content: string) => void): void;
178
+ pasteFromClipboard(clipboardContents: string): boolean;
180
179
  CopyGUIControl(original: Control): void;
181
180
  private selectAllGUI;
182
181
  blurEvent: () => void;
@@ -184,7 +183,7 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
184
183
  loadFromJson(serializationObject: any): void;
185
184
  loadFromSnippet(snippetId: string): Promise<void>;
186
185
  loadToEditor(): void;
187
- changeSelectionHighlight(value: boolean): void;
186
+ updateNodeOutlines(): void;
188
187
  findNodeFromGuiElement(guiControl: Control): Control;
189
188
  appendBlock(guiElement: Control): Control;
190
189
  private _isMainSelectionParent;
@@ -207,7 +206,8 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
207
206
  synchronizeLiveGUI(): void;
208
207
  addControls(scene: Scene): void;
209
208
  panning(): void;
210
- zoomWheel(event: IWheelEvent): number;
209
+ moveControls(moveHorizontal: boolean, amount: number): void;
210
+ zoomWheel(event: WheelEvent): number;
211
211
  zooming(delta: number): void;
212
212
  zeroIfClose(vec: Vector3): void;
213
213
  render(): JSX.Element;
@@ -224,58 +224,6 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lock
224
224
  lock: boolean;
225
225
  }
226
226
  }
227
- declare module "@babylonjs/gui-editor/diagram/guiGizmo" {
228
- import { Vector2 } from "@babylonjs/core/Maths/math.vector";
229
- import * as React from "react";
230
- import { GlobalState } from "@babylonjs/gui-editor/globalState";
231
- import { Rect } from "@babylonjs/gui-editor/diagram/coordinateHelper";
232
- export interface IGuiGizmoProps {
233
- globalState: GlobalState;
234
- }
235
- enum ScalePointPosition {
236
- Top = -1,
237
- Left = -1,
238
- Center = 0,
239
- Right = 1,
240
- Bottom = 1
241
- }
242
- interface IScalePoint {
243
- position: Vector2;
244
- horizontalPosition: ScalePointPosition;
245
- verticalPosition: ScalePointPosition;
246
- rotation: number;
247
- isPivot: boolean;
248
- }
249
- interface IGuiGizmoState {
250
- canvasBounds: Rect;
251
- scalePoints: IScalePoint[];
252
- scalePointDragging: number;
253
- isRotating: boolean;
254
- }
255
- export class GuiGizmoComponent extends React.Component<IGuiGizmoProps, IGuiGizmoState> {
256
- private _responsive;
257
- private _storedValues;
258
- private _localBounds;
259
- private _rotation;
260
- constructor(props: IGuiGizmoProps);
261
- componentDidMount(): void;
262
- /**
263
- * Update the gizmo's positions
264
- * @param force should the update be forced. otherwise it will be updated only when the pointer is down
265
- */
266
- updateGizmo(force?: boolean): void;
267
- onUp(evt?: React.PointerEvent): void;
268
- private _onUp;
269
- onMove(evt: React.PointerEvent): void;
270
- private _onMove;
271
- private _rotate;
272
- private _dragLocalBounds;
273
- private _updateNodeFromLocalBounds;
274
- private _beginDraggingScalePoint;
275
- private _beginRotate;
276
- render(): JSX.Element | null;
277
- }
278
- }
279
227
  declare module "@babylonjs/gui-editor/globalState" {
280
228
  import { Nullable } from "@babylonjs/core/types";
281
229
  import { Observable } from "@babylonjs/core/Misc/observable";
@@ -287,7 +235,6 @@ declare module "@babylonjs/gui-editor/globalState" {
287
235
  import { Scene } from "@babylonjs/core/scene";
288
236
  import { Control } from "@babylonjs/gui/2D/controls/control";
289
237
  import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
290
- import { GuiGizmoComponent } from "@babylonjs/gui-editor/diagram/guiGizmo";
291
238
  import { ISize } from "@babylonjs/core/Maths/math";
292
239
  export enum DragOverLocation {
293
240
  ABOVE = 0,
@@ -296,13 +243,13 @@ declare module "@babylonjs/gui-editor/globalState" {
296
243
  NONE = 3
297
244
  }
298
245
  export class GlobalState {
299
- [x: string]: any;
300
246
  liveGuiTexture: Nullable<AdvancedDynamicTexture>;
301
247
  guiTexture: AdvancedDynamicTexture;
302
248
  hostElement: HTMLElement;
303
249
  hostDocument: HTMLDocument;
304
250
  hostWindow: Window;
305
- onSelectionChangedObservable: Observable<Nullable<Control>>;
251
+ selectedControls: Control[];
252
+ onSelectionChangedObservable: Observable<void>;
306
253
  onResizeObservable: Observable<ISize>;
307
254
  onBuiltObservable: Observable<void>;
308
255
  onResetRequiredObservable: Observable<void>;
@@ -314,25 +261,26 @@ declare module "@babylonjs/gui-editor/globalState" {
314
261
  onNewSceneObservable: Observable<Nullable<Scene>>;
315
262
  onGuiNodeRemovalObservable: Observable<Control>;
316
263
  onPopupClosedObservable: Observable<void>;
317
- _backgroundColor: Color3;
264
+ private _backgroundColor;
265
+ private _outlines;
266
+ isMultiSelecting: boolean;
267
+ onOutlineChangedObservable: Observable<void>;
318
268
  blockKeyboardEvents: boolean;
319
269
  controlCamera: boolean;
320
270
  selectionLock: boolean;
321
271
  workbench: WorkbenchComponent;
322
- guiGizmo: GuiGizmoComponent;
323
272
  onPropertyChangedObservable: Observable<PropertyChangedEvent>;
324
273
  onZoomObservable: Observable<void>;
325
274
  onFitToWindowObservable: Observable<void>;
326
275
  onPanObservable: Observable<void>;
327
276
  onSelectionButtonObservable: Observable<void>;
328
- onMoveObservable: Observable<void>;
329
277
  onLoadObservable: Observable<File>;
330
278
  onSaveObservable: Observable<void>;
331
279
  onSnippetLoadObservable: Observable<void>;
332
280
  onSnippetSaveObservable: Observable<void>;
333
- onOutlinesObservable: Observable<void>;
334
281
  onResponsiveChangeObservable: Observable<boolean>;
335
282
  onParentingChangeObservable: Observable<Nullable<Control>>;
283
+ onDropObservable: Observable<void>;
336
284
  onPropertyGridUpdateRequiredObservable: Observable<void>;
337
285
  onDraggingEndObservable: Observable<void>;
338
286
  onDraggingStartObservable: Observable<void>;
@@ -340,8 +288,13 @@ declare module "@babylonjs/gui-editor/globalState" {
340
288
  onGizmoUpdateRequireObservable: Observable<void>;
341
289
  onArtBoardUpdateRequiredObservable: Observable<void>;
342
290
  onBackgroundColorChangeObservable: Observable<void>;
291
+ onPointerMoveObservable: Observable<import("react").PointerEvent<HTMLCanvasElement>>;
292
+ onPointerUpObservable: Observable<Nullable<PointerEvent | import("react").PointerEvent<HTMLCanvasElement>>>;
343
293
  draggedControl: Nullable<Control>;
344
294
  draggedControlDirection: DragOverLocation;
295
+ onCopyObservable: Observable<(content: string) => void>;
296
+ onCutObservable: Observable<(content: string) => void>;
297
+ onPasteObservable: Observable<string>;
345
298
  isSaving: boolean;
346
299
  lockObject: LockObject;
347
300
  storeEditorData: (serializationObject: any) => void;
@@ -354,89 +307,27 @@ declare module "@babylonjs/gui-editor/globalState" {
354
307
  action: (data: string) => Promise<string>;
355
308
  };
356
309
  constructor();
310
+ /** adds copy, cut and paste listeners to the host window */
311
+ registerEventListeners(): void;
312
+ private _updateKeys;
357
313
  get backgroundColor(): Color3;
358
314
  set backgroundColor(value: Color3);
315
+ get outlines(): boolean;
316
+ set outlines(value: boolean);
317
+ select(control: Control): void;
318
+ setSelection(controls: Control[]): void;
319
+ isMultiSelectable(control: Control): boolean;
359
320
  }
360
321
  }
361
- declare module "@babylonjs/gui-editor/sharedUiComponents/lines/buttonLineComponent" {
362
- import * as React from "react";
363
- export interface IButtonLineComponentProps {
364
- label: string;
365
- onClick: () => void;
366
- icon?: string;
367
- iconLabel?: string;
368
- }
369
- export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
370
- constructor(props: IButtonLineComponentProps);
371
- render(): JSX.Element;
372
- }
373
- }
374
- declare module "@babylonjs/gui-editor/sharedUiComponents/lines/fileButtonLineComponent" {
375
- import * as React from "react";
376
- interface IFileButtonLineComponentProps {
377
- label: string;
378
- onClick: (file: File) => void;
379
- accept: string;
380
- icon?: string;
381
- iconLabel?: string;
382
- }
383
- export class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
384
- private static _IDGenerator;
385
- private _id;
386
- private uploadInputRef;
387
- constructor(props: IFileButtonLineComponentProps);
388
- onChange(evt: any): void;
389
- render(): JSX.Element;
390
- }
391
- }
392
- declare module "@babylonjs/gui-editor/sharedUiComponents/lines/targetsProxy" {
393
- import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
394
- import { Observable } from "@babylonjs/core/Misc/observable";
395
- export const conflictingValuesPlaceholder = "\u2014";
396
- /**
397
- *
398
- * @param propertyName the property that the input changes
399
- * @param targets a list of selected targets
400
- * @param defaultValue the value that should be returned when two targets have conflicting values
401
- * @param setter an optional setter function to override the default setter behavior
402
- * @returns a proxy object that can be passed as a target into the input
403
- */
404
- export function makeTargetsProxy<Type>(targets: Type[], onPropertyChangedObservable?: Observable<PropertyChangedEvent>, getProperty?: (target: Type, property: keyof Type) => any): any;
405
- }
406
- declare module "@babylonjs/gui-editor/sharedUiComponents/lines/checkBoxLineComponent" {
407
- import * as React from "react";
408
- import { Observable } from "@babylonjs/core/Misc/observable";
409
- import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
410
- export interface ICheckBoxLineComponentProps {
411
- label?: string;
412
- target?: any;
413
- propertyName?: string;
414
- isSelected?: () => boolean;
415
- onSelect?: (value: boolean) => void;
416
- onValueChanged?: () => void;
417
- onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
418
- disabled?: boolean;
419
- icon?: string;
420
- iconLabel?: string;
421
- faIcons?: {
422
- };
423
- }
424
- export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, {
425
- isSelected: boolean;
426
- isDisabled?: boolean;
427
- isConflict: boolean;
428
- }> {
429
- private static _UniqueIdSeed;
430
- private _uniqueId;
431
- private _localChange;
432
- constructor(props: ICheckBoxLineComponentProps);
433
- shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: {
434
- isSelected: boolean;
435
- isDisabled: boolean;
436
- isConflict: boolean;
437
- }): boolean;
438
- onChange(): void;
439
- render(): JSX.Element;
322
+ declare module "@babylonjs/gui-editor/sharedUiComponents/stringTools" {
323
+ export class StringTools {
324
+ private static _SaveAs;
325
+ private static _Click;
326
+ /**
327
+ * Download a string into a file that will be saved locally by the browser
328
+ * @param content defines the string to download locally as a file
329
+ */
330
+ static DownloadAsFile(document: HTMLDocument, content: string, filename: string): void;
440
331
  }
441
332
  }
442
333
  declare module "@babylonjs/gui-editor/sharedUiComponents/lines/textLineComponent" {
@@ -461,16 +352,19 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/textLineComponent
461
352
  render(): JSX.Element;
462
353
  }
463
354
  }
464
- declare module "@babylonjs/gui-editor/sharedUiComponents/stringTools" {
465
- export class StringTools {
466
- private static _SaveAs;
467
- private static _Click;
468
- /**
469
- * Download a string into a file that will be saved locally by the browser
470
- * @param content defines the string to download locally as a file
471
- */
472
- static DownloadAsFile(document: HTMLDocument, content: string, filename: string): void;
473
- }
355
+ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/targetsProxy" {
356
+ import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
357
+ import { Observable } from "@babylonjs/core/Misc/observable";
358
+ export const conflictingValuesPlaceholder = "\u2014";
359
+ /**
360
+ *
361
+ * @param propertyName the property that the input changes
362
+ * @param targets a list of selected targets
363
+ * @param defaultValue the value that should be returned when two targets have conflicting values
364
+ * @param setter an optional setter function to override the default setter behavior
365
+ * @returns a proxy object that can be passed as a target into the input
366
+ */
367
+ export function makeTargetsProxy<Type>(targets: Type[], onPropertyChangedObservable?: Observable<PropertyChangedEvent>, getProperty?: (target: Type, property: keyof Type) => any): any;
474
368
  }
475
369
  declare module "@babylonjs/gui-editor/sharedUiComponents/lines/floatLineComponent" {
476
370
  import * as React from "react";
@@ -555,13 +449,26 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/sliderLineCompone
555
449
  render(): JSX.Element;
556
450
  }
557
451
  }
452
+ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/inputArrowsComponent" {
453
+ import * as React from "react";
454
+ interface IInputArrowsComponentProps {
455
+ incrementValue: (amount: number) => void;
456
+ setDragging: (dragging: boolean) => void;
457
+ }
458
+ export class InputArrowsComponent extends React.Component<IInputArrowsComponentProps> {
459
+ private _arrowsRef;
460
+ private _drag;
461
+ private _releaseListener;
462
+ render(): JSX.Element;
463
+ }
464
+ }
558
465
  declare module "@babylonjs/gui-editor/sharedUiComponents/lines/textInputLineComponent" {
559
466
  import * as React from "react";
560
467
  import { Observable } from "@babylonjs/core/Misc/observable";
561
468
  import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
562
469
  import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
563
470
  interface ITextInputLineComponentProps {
564
- label: string;
471
+ label?: string;
565
472
  lockObject: LockObject;
566
473
  target?: any;
567
474
  propertyName?: string;
@@ -576,18 +483,25 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/textInputLineComp
576
483
  unit?: string;
577
484
  onUnitClicked?: (unit: string) => void;
578
485
  unitLocked?: boolean;
486
+ arrows?: boolean;
487
+ arrowsIncrement?: (amount: number) => void;
488
+ step?: number;
579
489
  }
580
490
  export class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, {
581
491
  value: string;
492
+ dragging: boolean;
582
493
  }> {
583
494
  private _localChange;
584
495
  constructor(props: ITextInputLineComponentProps);
585
496
  componentWillUnmount(): void;
586
497
  shouldComponentUpdate(nextProps: ITextInputLineComponentProps, nextState: {
587
498
  value: string;
499
+ dragging: boolean;
588
500
  }): boolean;
589
501
  raiseOnPropertyChanged(newValue: string, previousValue: string): void;
590
502
  updateValue(value: string): void;
503
+ incrementValue(amount: number): void;
504
+ onKeyDown(event: React.KeyboardEvent): void;
591
505
  render(): JSX.Element;
592
506
  }
593
507
  }
@@ -608,6 +522,40 @@ declare module "@babylonjs/gui-editor/components/commandButtonComponent" {
608
522
  render(): JSX.Element;
609
523
  }
610
524
  }
525
+ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/checkBoxLineComponent" {
526
+ import * as React from "react";
527
+ import { Observable } from "@babylonjs/core/Misc/observable";
528
+ import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
529
+ export interface ICheckBoxLineComponentProps {
530
+ label?: string;
531
+ target?: any;
532
+ propertyName?: string;
533
+ isSelected?: () => boolean;
534
+ onSelect?: (value: boolean) => void;
535
+ onValueChanged?: () => void;
536
+ onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
537
+ disabled?: boolean;
538
+ icon?: string;
539
+ iconLabel?: string;
540
+ faIcons?: {
541
+ };
542
+ }
543
+ export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, {
544
+ isSelected: boolean;
545
+ isDisabled?: boolean;
546
+ isConflict: boolean;
547
+ }> {
548
+ private _localChange;
549
+ constructor(props: ICheckBoxLineComponentProps);
550
+ shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: {
551
+ isSelected: boolean;
552
+ isDisabled: boolean;
553
+ isConflict: boolean;
554
+ }): boolean;
555
+ onChange(): void;
556
+ render(): JSX.Element;
557
+ }
558
+ }
611
559
  declare module "@babylonjs/gui-editor/sharedUiComponents/lines/numericInputComponent" {
612
560
  import * as React from "react";
613
561
  interface INumericInputComponentProps {
@@ -788,6 +736,50 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/colorLineComponen
788
736
  render(): JSX.Element;
789
737
  }
790
738
  }
739
+ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/iconComponent" {
740
+ import * as React from "react";
741
+ interface IIconComponentProps {
742
+ icon: string;
743
+ label?: string;
744
+ }
745
+ export class IconComponent extends React.Component<IIconComponentProps> {
746
+ render(): JSX.Element;
747
+ }
748
+ }
749
+ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/optionsLineComponent" {
750
+ import * as React from "react";
751
+ import { Observable } from "@babylonjs/core/Misc/observable";
752
+ import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
753
+ import { IInspectableOptions } from "@babylonjs/core/Misc/iInspectable";
754
+ export const Null_Value: number;
755
+ export interface IOptionsLineComponentProps {
756
+ label: string;
757
+ target: any;
758
+ propertyName: string;
759
+ options: IInspectableOptions[];
760
+ noDirectUpdate?: boolean;
761
+ onSelect?: (value: number) => void;
762
+ extractValue?: () => number;
763
+ onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
764
+ allowNullValue?: boolean;
765
+ icon?: string;
766
+ iconLabel?: string;
767
+ }
768
+ export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
769
+ value: number;
770
+ }> {
771
+ private _localChange;
772
+ private remapValueIn;
773
+ private remapValueOut;
774
+ constructor(props: IOptionsLineComponentProps);
775
+ shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: {
776
+ value: number;
777
+ }): boolean;
778
+ raiseOnPropertyChanged(newValue: number, previousValue: number): void;
779
+ updateValue(valueString: string): void;
780
+ render(): JSX.Element;
781
+ }
782
+ }
791
783
  declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/commonControlPropertyGridComponent" {
792
784
  import * as React from "react";
793
785
  import { Observable } from "@babylonjs/core/Misc/observable";
@@ -800,10 +792,13 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/c
800
792
  onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
801
793
  }
802
794
  export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps> {
795
+ private _onPropertyChangedObserver;
803
796
  constructor(props: ICommonControlPropertyGridComponentProps);
797
+ private _getTransformedReferenceCoordinate;
804
798
  private _updateAlignment;
805
799
  private _checkAndUpdateValues;
806
800
  private _markChildrenAsDirty;
801
+ componentWillUnmount(): void;
807
802
  render(): JSX.Element;
808
803
  }
809
804
  }
@@ -873,40 +868,6 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/r
873
868
  render(): JSX.Element;
874
869
  }
875
870
  }
876
- declare module "@babylonjs/gui-editor/sharedUiComponents/lines/optionsLineComponent" {
877
- import * as React from "react";
878
- import { Observable } from "@babylonjs/core/Misc/observable";
879
- import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
880
- import { IInspectableOptions } from "@babylonjs/core/Misc/iInspectable";
881
- export const Null_Value: number;
882
- export interface IOptionsLineComponentProps {
883
- label: string;
884
- target: any;
885
- propertyName: string;
886
- options: IInspectableOptions[];
887
- noDirectUpdate?: boolean;
888
- onSelect?: (value: number) => void;
889
- extractValue?: () => number;
890
- onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
891
- allowNullValue?: boolean;
892
- icon?: string;
893
- iconLabel?: string;
894
- }
895
- export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
896
- value: number;
897
- }> {
898
- private _localChange;
899
- private remapValueIn;
900
- private remapValueOut;
901
- constructor(props: IOptionsLineComponentProps);
902
- shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: {
903
- value: number;
904
- }): boolean;
905
- raiseOnPropertyChanged(newValue: number, previousValue: number): void;
906
- updateValue(valueString: string): void;
907
- render(): JSX.Element;
908
- }
909
- }
910
871
  declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/textBlockPropertyGridComponent" {
911
872
  import * as React from "react";
912
873
  import { Observable } from "@babylonjs/core/Misc/observable";
@@ -1010,6 +971,19 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/i
1010
971
  render(): JSX.Element;
1011
972
  }
1012
973
  }
974
+ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/containerPropertyGridComponent" {
975
+ import * as React from "react";
976
+ import { Observable } from "@babylonjs/core/Misc/observable";
977
+ import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
978
+ import { Container } from "@babylonjs/gui/2D/controls/container";
979
+ interface IContainerPropertyGridComponentProps {
980
+ containers: Container[];
981
+ onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
982
+ }
983
+ export class ContainerPropertyGridComponent extends React.Component<IContainerPropertyGridComponentProps> {
984
+ render(): JSX.Element;
985
+ }
986
+ }
1013
987
  declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/rectanglePropertyGridComponent" {
1014
988
  import * as React from "react";
1015
989
  import { Observable } from "@babylonjs/core/Misc/observable";
@@ -1213,26 +1187,21 @@ declare module "@babylonjs/gui-editor/guiNodeTools" {
1213
1187
  import { ImageBasedSlider } from "@babylonjs/gui/2D/controls/sliders/imageBasedSlider";
1214
1188
  export class GUINodeTools {
1215
1189
  static ImageControlDefaultUrl: string;
1216
- static CreateControlFromString(data: string): Grid | Rectangle | Line | Image | TextBlock | Slider | ImageBasedSlider | RadioButton | InputText | ColorPicker | StackPanel | Ellipse | Checkbox | DisplayGrid;
1190
+ static CreateControlFromString(data: string): Grid | Rectangle | Line | TextBlock | Image | Slider | ImageBasedSlider | RadioButton | InputText | ColorPicker | StackPanel | Ellipse | Checkbox | DisplayGrid;
1217
1191
  }
1218
1192
  }
1219
1193
  declare module "@babylonjs/gui-editor/components/propertyTab/propertyTabComponent" {
1220
1194
  import * as React from "react";
1221
1195
  import { GlobalState } from "@babylonjs/gui-editor/globalState";
1222
- import { Nullable } from "@babylonjs/core/types";
1223
1196
  import { Control } from "@babylonjs/gui/2D/controls/control";
1224
1197
  import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture";
1225
1198
  interface IPropertyTabComponentProps {
1226
1199
  globalState: GlobalState;
1227
1200
  }
1228
- interface IPropertyTabComponentState {
1229
- currentNode: Nullable<Control>;
1230
- }
1231
- export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, IPropertyTabComponentState> {
1201
+ export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps> {
1232
1202
  private _onBuiltObserver;
1233
1203
  private _timerIntervalId;
1234
1204
  private _lockObject;
1235
- private _sizeOption;
1236
1205
  constructor(props: IPropertyTabComponentProps);
1237
1206
  componentDidMount(): void;
1238
1207
  componentWillUnmount(): void;
@@ -1326,7 +1295,7 @@ declare module "@babylonjs/gui-editor/components/sceneExplorer/entities/gui/cont
1326
1295
  onClick: () => void;
1327
1296
  globalState: GlobalState;
1328
1297
  isHovered: boolean;
1329
- dragOverHover: boolean;
1298
+ isDragOver: boolean;
1330
1299
  dragOverLocation: DragOverLocation;
1331
1300
  }
1332
1301
  export class ControlTreeItemComponent extends React.Component<IControlTreeItemComponentProps, {
@@ -1348,22 +1317,29 @@ declare module "@babylonjs/gui-editor/components/sceneExplorer/treeItemSelectabl
1348
1317
  import { DragOverLocation, GlobalState } from "@babylonjs/gui-editor/globalState";
1349
1318
  export interface ITreeItemSelectableComponentProps {
1350
1319
  entity: any;
1351
- selectedEntity?: any;
1320
+ selectedEntities: any[];
1352
1321
  mustExpand?: boolean;
1353
1322
  offset: number;
1354
1323
  globalState: GlobalState;
1355
1324
  extensibilityGroups?: IExplorerExtensibilityGroup[];
1356
1325
  filter: Nullable<string>;
1357
1326
  }
1358
- export class TreeItemSelectableComponent extends React.Component<ITreeItemSelectableComponentProps, {
1327
+ export interface ITreeItemSelectableComponentState {
1328
+ dragOver: boolean;
1359
1329
  isSelected: boolean;
1360
1330
  isHovered: boolean;
1361
1331
  dragOverLocation: DragOverLocation;
1362
- }> {
1363
- dragOverHover: boolean;
1332
+ }
1333
+ export class TreeItemSelectableComponent extends React.Component<ITreeItemSelectableComponentProps, ITreeItemSelectableComponentState> {
1364
1334
  private _onSelectionChangedObservable;
1365
1335
  private _onDraggingEndObservable;
1366
1336
  private _onDraggingStartObservable;
1337
+ /** flag flipped onDragEnter if dragOver is already true
1338
+ * prevents dragLeave from immediately setting dragOver to false
1339
+ * required to make dragging work as expected
1340
+ * see: see: https://github.com/transformation-dev/matrx/tree/master/packages/dragster
1341
+ */
1342
+ private _secondDragEnter;
1367
1343
  constructor(props: ITreeItemSelectableComponentProps);
1368
1344
  switchExpandedState(): void;
1369
1345
  shouldComponentUpdate(nextProps: ITreeItemSelectableComponentProps, nextState: {
@@ -1375,6 +1351,7 @@ declare module "@babylonjs/gui-editor/components/sceneExplorer/treeItemSelectabl
1375
1351
  renderChildren(isExpanded: boolean, offset?: boolean): (JSX.Element | null)[] | null;
1376
1352
  render(): JSX.Element | (JSX.Element | null)[] | null;
1377
1353
  dragOver(event: React.DragEvent<HTMLDivElement>): void;
1354
+ updateDragOverLocation(event: React.DragEvent<HTMLDivElement>): void;
1378
1355
  drop(): void;
1379
1356
  }
1380
1357
  }
@@ -1391,7 +1368,7 @@ declare module "@babylonjs/gui-editor/components/sceneExplorer/treeItemComponent
1391
1368
  forceSubitems?: boolean;
1392
1369
  globalState: GlobalState;
1393
1370
  entity?: any;
1394
- selectedEntity: any;
1371
+ selectedEntities: any[];
1395
1372
  extensibilityGroups?: IExplorerExtensibilityGroup[];
1396
1373
  contextMenuItems?: {
1397
1374
  label: string;
@@ -1462,6 +1439,24 @@ declare module "@babylonjs/gui-editor/components/sceneExplorer/sceneExplorerComp
1462
1439
  render(): JSX.Element;
1463
1440
  }
1464
1441
  }
1442
+ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/fileButtonLineComponent" {
1443
+ import * as React from "react";
1444
+ interface IFileButtonLineComponentProps {
1445
+ label: string;
1446
+ onClick: (file: File) => void;
1447
+ accept: string;
1448
+ icon?: string;
1449
+ iconLabel?: string;
1450
+ }
1451
+ export class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
1452
+ private static _IDGenerator;
1453
+ private _id;
1454
+ private uploadInputRef;
1455
+ constructor(props: IFileButtonLineComponentProps);
1456
+ onChange(evt: any): void;
1457
+ render(): JSX.Element;
1458
+ }
1459
+ }
1465
1460
  declare module "@babylonjs/gui-editor/components/commandDropdownComponent" {
1466
1461
  import * as React from "react";
1467
1462
  import { GlobalState } from "@babylonjs/gui-editor/globalState";
@@ -1501,9 +1496,78 @@ declare module "@babylonjs/gui-editor/components/commandBarComponent" {
1501
1496
  private _panning;
1502
1497
  private _zooming;
1503
1498
  private _selecting;
1504
- private _outlines;
1499
+ private _sizeOption;
1505
1500
  constructor(props: ICommandBarComponentProps);
1506
- private updateNodeOutline;
1501
+ render(): JSX.Element;
1502
+ }
1503
+ }
1504
+ declare module "@babylonjs/gui-editor/diagram/guiGizmo" {
1505
+ import { Control } from "@babylonjs/gui/2D/controls/control";
1506
+ import { Vector2 } from "@babylonjs/core/Maths/math.vector";
1507
+ import * as React from "react";
1508
+ import { GlobalState } from "@babylonjs/gui-editor/globalState";
1509
+ import { Rect } from "@babylonjs/gui-editor/diagram/coordinateHelper";
1510
+ export interface IGuiGizmoProps {
1511
+ globalState: GlobalState;
1512
+ control: Control;
1513
+ }
1514
+ enum ScalePointPosition {
1515
+ Top = -1,
1516
+ Left = -1,
1517
+ Center = 0,
1518
+ Right = 1,
1519
+ Bottom = 1
1520
+ }
1521
+ interface IScalePoint {
1522
+ position: Vector2;
1523
+ horizontalPosition: ScalePointPosition;
1524
+ verticalPosition: ScalePointPosition;
1525
+ rotation: number;
1526
+ isPivot: boolean;
1527
+ }
1528
+ interface IGuiGizmoState {
1529
+ canvasBounds: Rect;
1530
+ scalePoints: IScalePoint[];
1531
+ scalePointDragging: number;
1532
+ isRotating: boolean;
1533
+ }
1534
+ export class GuiGizmoComponent extends React.Component<IGuiGizmoProps, IGuiGizmoState> {
1535
+ private _storedValues;
1536
+ private _localBounds;
1537
+ private _rotation;
1538
+ private _gizmoUpdateObserver;
1539
+ private _pointerUpObserver;
1540
+ private _pointerMoveObserver;
1541
+ constructor(props: IGuiGizmoProps);
1542
+ componentWillUnmount(): void;
1543
+ /**
1544
+ * Update the gizmo's positions
1545
+ * @param force should the update be forced. otherwise it will be updated only when the pointer is down
1546
+ */
1547
+ updateGizmo(force?: boolean): void;
1548
+ private _onUp;
1549
+ private _onMove;
1550
+ private _rotate;
1551
+ private _modulo;
1552
+ private _dragLocalBounds;
1553
+ private _updateNodeFromLocalBounds;
1554
+ private _beginDraggingScalePoint;
1555
+ private _beginRotate;
1556
+ render(): JSX.Element;
1557
+ }
1558
+ }
1559
+ declare module "@babylonjs/gui-editor/diagram/guiGizmoWrapper" {
1560
+ import { Nullable } from "@babylonjs/core/types";
1561
+ import { Observer } from "@babylonjs/core/Misc/observable";
1562
+ import * as React from "react";
1563
+ import { GlobalState } from "@babylonjs/gui-editor/globalState";
1564
+ export interface IGizmoWrapperProps {
1565
+ globalState: GlobalState;
1566
+ }
1567
+ export class GizmoWrapper extends React.Component<IGizmoWrapperProps> {
1568
+ observer: Nullable<Observer<void>>;
1569
+ componentWillMount(): void;
1570
+ componentWillUnmount(): void;
1507
1571
  render(): JSX.Element;
1508
1572
  }
1509
1573
  }
@@ -1526,6 +1590,7 @@ declare module "@babylonjs/gui-editor/diagram/artBoard" {
1526
1590
  declare module "@babylonjs/gui-editor/workbenchEditor" {
1527
1591
  import * as React from "react";
1528
1592
  import { GlobalState } from "@babylonjs/gui-editor/globalState";
1593
+ import { Control } from "@babylonjs/gui/2D/controls/control";
1529
1594
  interface IGraphEditorProps {
1530
1595
  globalState: GlobalState;
1531
1596
  }
@@ -1533,13 +1598,13 @@ declare module "@babylonjs/gui-editor/workbenchEditor" {
1533
1598
  showPreviewPopUp: boolean;
1534
1599
  }
1535
1600
  export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEditorState> {
1536
- private _startX;
1537
1601
  private _moveInProgress;
1538
1602
  private _leftWidth;
1539
1603
  private _rightWidth;
1540
1604
  private _toolBarIconSize;
1541
1605
  private _popUpWindow;
1542
1606
  private _draggedItem;
1607
+ private _rootRef;
1543
1608
  componentDidMount(): void;
1544
1609
  constructor(props: IGraphEditorProps);
1545
1610
  showWaitScreen(): void;
@@ -1553,19 +1618,7 @@ declare module "@babylonjs/gui-editor/workbenchEditor" {
1553
1618
  createPopupWindow: (title: string, windowVariableName: string, width?: number, height?: number) => Window | null;
1554
1619
  copyStyles: (sourceDoc: HTMLDocument, targetDoc: HTMLDocument) => void;
1555
1620
  render(): JSX.Element;
1556
- _items: {
1557
- label: string;
1558
- icon?: string;
1559
- fileButton?: boolean;
1560
- onClick?: () => void;
1561
- onCheck?: (value: boolean) => void;
1562
- storeKey?: string;
1563
- isActive?: boolean;
1564
- defaultValue?: boolean | string;
1565
- subItems?: string[];
1566
- }[];
1567
- createItems(): void;
1568
- onCreate(value: string): void;
1621
+ onCreate(value: string): Control;
1569
1622
  createToolbar(): JSX.Element;
1570
1623
  }
1571
1624
  }
@@ -1862,6 +1915,19 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/booleanLineCompon
1862
1915
  render(): JSX.Element;
1863
1916
  }
1864
1917
  }
1918
+ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/buttonLineComponent" {
1919
+ import * as React from "react";
1920
+ export interface IButtonLineComponentProps {
1921
+ label: string;
1922
+ onClick: () => void;
1923
+ icon?: string;
1924
+ iconLabel?: string;
1925
+ }
1926
+ export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
1927
+ constructor(props: IButtonLineComponentProps);
1928
+ render(): JSX.Element;
1929
+ }
1930
+ }
1865
1931
  declare module "@babylonjs/gui-editor/sharedUiComponents/lines/color4LineComponent" {
1866
1932
  import * as React from "react";
1867
1933
  import { Observable } from "@babylonjs/core/Misc/observable";