UNPKG

@babylonjs/gui-editor

Version:
1,336 lines (1,247 loc) 202 kB
declare module "@babylonjs/gui-editor/workbenchEditor" { import * as React from "react"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; import { Control } from "@babylonjs/gui/2D/controls/control"; import "@babylonjs/gui-editor/main.scss"; import "@babylonjs/gui-editor/scss/header.scss"; interface IGraphEditorProps { globalState: GlobalState; onReady?: () => Promise<void>; } interface IGraphEditorState { showPreviewPopUp: boolean; toolbarExpand: boolean; message: string; } export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEditorState> { private _moveInProgress; private _leftWidth; private _rightWidth; private _popUpWindow; private _draggedItem; private _rootRef; private _onErrorMessageObserver; private _workbenchRef; componentDidMount(): void; componentWillUnmount(): void; addToolControls: (evt: KeyboardEvent) => void; removePressToolControls: (evt: KeyboardEvent) => void; constructor(props: IGraphEditorProps); showWaitScreen(): void; hideWaitScreen(): void; onPointerDown(evt: React.PointerEvent<HTMLDivElement>): void; onPointerUp(evt: React.PointerEvent<HTMLDivElement>): void; resizeColumns(evt: React.PointerEvent<HTMLDivElement>, forLeft?: boolean): void; buildColumnLayout(): string; handlePopUp: () => void; handleClosingPopUp: () => void; switchExpandedState(): void; onCreate(value: string): Control; createToolbarHelper(ct: { className: string; icon: string; } export {}; } declare module "@babylonjs/gui-editor/tools" { import { Control } from "@babylonjs/gui/2D/controls/control"; import { Grid } from "@babylonjs/gui/2D/controls/grid"; import { Vector2 } from "@babylonjs/core/Maths/math"; export class Tools { static LookForItems(item: any, selectedEntities: any[], firstIteration?: boolean): boolean; private static _RecursiveRemoveHiddenMeshesAndHoistChildren; static SortAndFilter(parent: any, items: any[]): any[]; static GetCellInfo(grid: Grid, control: Control): Vector2; static ReorderGrid(grid: Grid, index: number, control: Control, cell: Vector2): void; } } declare module "@babylonjs/gui-editor/portal" { import * as React from "react"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; import { PropsWithChildren } from "react"; interface IPortalProps { globalState: GlobalState; } export class Portal extends React.Component<PropsWithChildren<IPortalProps>> { render(): React.ReactPortal; } export {}; } declare module "@babylonjs/gui-editor/nodeLocationInfo" { export interface INodeLocationInfo { blockId: number; x: number; y: number; } export interface IFrameData { x: number; y: number; width: number; height: number; color: number[]; name: string; isCollapsed: boolean; blocks: number[]; comments: string; } export interface IEditorData { locations: INodeLocationInfo[]; x: number; y: number; zoom: number; frames?: IFrameData[]; map?: { [key: number]: number; }; } } declare module "@babylonjs/gui-editor/keyboardManager" { import { Observable } from "@babylonjs/core/Misc/observable"; type Key = "control" | "shift" | "alt" | "space" | "meta"; export class KeyboardManager { private _hostElement; private _kdListener; private _kuListener; private _moveListener; private _focusOutListener; private _keys; onKeyPressedObservable: Observable<Key>; constructor(hostElement: HTMLElement | HTMLDocument); private _keyEvent; private _updateModifierKeys; private _setKeyDown; private _clearKeys; isKeyDown(key: Key): boolean; dispose(): void; } export {}; } declare module "@babylonjs/gui-editor/index" { export * from "@babylonjs/gui-editor/guiEditor"; } declare module "@babylonjs/gui-editor/guiNodeTools" { import { Checkbox } from "@babylonjs/gui/2D/controls/checkbox"; import { ColorPicker } from "@babylonjs/gui/2D/controls/colorpicker"; import { Ellipse } from "@babylonjs/gui/2D/controls/ellipse"; import { Line } from "@babylonjs/gui/2D/controls/line"; import { Rectangle } from "@babylonjs/gui/2D/controls/rectangle"; import { Slider } from "@babylonjs/gui/2D/controls/sliders/slider"; import { TextBlock } from "@babylonjs/gui/2D/controls/textBlock"; import { Image } from "@babylonjs/gui/2D/controls/image"; import { InputText } from "@babylonjs/gui/2D/controls/inputText"; import { Grid } from "@babylonjs/gui/2D/controls/grid"; import { DisplayGrid } from "@babylonjs/gui/2D/controls/displayGrid"; import { StackPanel } from "@babylonjs/gui/2D/controls/stackPanel"; import { RadioButton } from "@babylonjs/gui/2D/controls/radioButton"; import { ImageBasedSlider } from "@babylonjs/gui/2D/controls/sliders/imageBasedSlider"; export class GUINodeTools { static ImageControlDefaultUrl: string; static CreateControlFromString(data: string): Grid | Rectangle | StackPanel | Line | TextBlock | Image | Slider | ImageBasedSlider | RadioButton | InputText | ColorPicker | Ellipse | Checkbox | DisplayGrid; } } declare module "@babylonjs/gui-editor/guiEditor" { import { Observable } from "@babylonjs/core/Misc/observable"; import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture"; /** * Interface used to specify creation options for the gui editor */ export interface IGUIEditorOptions { liveGuiTexture?: AdvancedDynamicTexture; customLoad?: { label: string; action: (data: string) => Promise<string>; } | undefined; hostElement?: HTMLElement; customSave?: { label: string; action: (data: string) => Promise<string>; }; currentSnippetToken?: string; customLoadObservable?: Observable<any>; } /** * Class used to create a gui editor */ export class GUIEditor { private static _CurrentState; /** @internal */ static _PopupWindow: Window | null; /** * Show the gui editor * @param options defines the options to use to configure the gui editor * @param embed defines whether editor is being opened from the Playground */ static Show(options: IGUIEditorOptions, embed?: boolean): Promise<void>; } } declare module "@babylonjs/gui-editor/globalState" { import { Nullable } from "@babylonjs/core/types"; import { Observable } from "@babylonjs/core/Misc/observable"; import { LogEntry } from "@babylonjs/gui-editor/components/log/logComponent"; import { Color3 } from "@babylonjs/core/Maths/math.color"; import { WorkbenchComponent } from "@babylonjs/gui-editor/diagram/workbench"; import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture"; import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent"; import { Scene } from "@babylonjs/core/scene"; import { Control } from "@babylonjs/gui/2D/controls/control"; import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject"; import { ISize } from "@babylonjs/core/Maths/math"; import { KeyboardManager } from "@babylonjs/gui-editor/keyboardManager"; export enum DragOverLocation { ABOVE = 0, BELOW = 1, CENTER = 2, NONE = 3 } export enum GUIEditorTool { SELECT = 0, PAN = 1, ZOOM = 2 } export class GlobalState { liveGuiTexture: Nullable<AdvancedDynamicTexture>; guiTexture: AdvancedDynamicTexture; hostElement: HTMLElement; hostDocument: HTMLDocument; hostWindow: Window; selectedControls: Control[]; onSelectionChangedObservable: Observable<void>; onResizeObservable: Observable<ISize>; onBuiltObservable: Observable<void>; onResetRequiredObservable: Observable<void>; onUpdateRequiredObservable: Observable<void>; onLogRequiredObservable: Observable<LogEntry>; onErrorMessageDialogRequiredObservable: Observable<string>; onIsLoadingChanged: Observable<boolean>; onSelectionBoxMoved: Observable<ClientRect | DOMRect>; onNewSceneObservable: Observable<Nullable<Scene>>; onGuiNodeRemovalObservable: Observable<Control>; onPopupClosedObservable: Observable<void>; private _backgroundColor; private _outlines; keys: KeyboardManager; private _fromPg; /** DO NOT USE: in the process of removing */ blockKeyboardEvents: boolean; onOutlineChangedObservable: Observable<void>; controlCamera: boolean; selectionLock: boolean; workbench: WorkbenchComponent; onPropertyChangedObservable: Observable<PropertyChangedEvent>; private _tool; private _usePrevSelected; private _prevTool; onToolChangeObservable: Observable<void>; get tool(): GUIEditorTool; set tool(newTool: GUIEditorTool); get usePrevSelected(): boolean; set usePrevSelected(val: boolean); restorePreviousTool(): void; onFitControlsToWindowObservable: Observable<void>; onReframeWindowObservable: Observable<void>; onLoadObservable: Observable<File>; onSaveObservable: Observable<void>; onSaveSelectedControl: Observable<void>; onSnippetLoadObservable: Observable<void>; onSnippetSaveObservable: Observable<void>; onControlLoadObservable: Observable<File>; onResponsiveChangeObservable: Observable<boolean>; onParentingChangeObservable: Observable<Nullable<Control>>; onDropObservable: Observable<void>; onPropertyGridUpdateRequiredObservable: Observable<void>; onDraggingEndObservable: Observable<void>; onDraggingStartObservable: Observable<void>; onWindowResizeObservable: Observable<void>; onGizmoUpdateRequireObservable: Observable<void>; onArtBoardUpdateRequiredObservable: Observable<void>; onBackgroundColorChangeObservable: Observable<void>; onFontsParsedObservable: Observable<void>; onPointerMoveObservable: Observable<import("react").PointerEvent<HTMLCanvasElement>>; onPointerUpObservable: Observable<Nullable<PointerEvent | import("react").PointerEvent<HTMLCanvasElement>>>; draggedControl: Nullable<Control>; draggedControlDirection: DragOverLocation; onCopyObservable: Observable<(content: string) => void>; onCutObservable: Observable<(content: string) => void>; onPasteObservable: Observable<string>; isSaving: boolean; lockObject: LockObject; storeEditorData: (serializationObject: any) => void; shiftKeyPressed: boolean; customSave?: { label: string; action: (data: string) => Promise<string>; }; customLoad?: { label: string; action: (data: string) => Promise<string>; }; constructor(); /** adds copy, cut and paste listeners to the host window */ registerEventListeners(): void; get backgroundColor(): Color3; get fromPG(): boolean; set fromPG(value: boolean); set backgroundColor(value: Color3); get outlines(): boolean; set outlines(value: boolean); select(control: Control): void; setSelection(controls: Control[]): void; private _findParentControlInTexture; deleteSelectedNodes(): void; isMultiSelectable(control: Control): boolean; dispose(): void; } } declare module "@babylonjs/gui-editor/controlTypes" { export const ControlTypes: { className: string; icon: string; }[]; } declare module "@babylonjs/gui-editor/legacy/legacy" { export * from "@babylonjs/gui-editor/index"; } declare module "@babylonjs/gui-editor/diagram/workbench" { import * as React from "react"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; import { Control } from "@babylonjs/gui/2D/controls/control"; import { Vector2, Vector3 } from "@babylonjs/core/Maths/math.vector"; import { Scene } from "@babylonjs/core/scene"; import { Container } from "@babylonjs/gui/2D/controls/container"; import { ISize } from "@babylonjs/core/Maths/math"; import "@babylonjs/gui-editor/diagram/workbenchCanvas.scss"; export interface IWorkbenchComponentProps { globalState: GlobalState; } export enum ConstraintDirection { NONE = 0, X = 2,// Horizontal constraint Y = 3 } export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps> { private _mouseDown; private _rootContainer; private _setConstraintDirection; private _mouseStartPoint; _scene: Scene; private _constraintDirection; private _panning; private _isOverGUINode; private _engine; private _guiRenderObserver; private _doubleClick; private _currLeft; private _currTop; private _controlsHit; private _pointerTravelDistance; private _processSelectionOnUp; private _visibleRegionContainer; private _centerZoomMousePosition; private _hasPerformedDragZoom; private static _addedFonts; static get addedFonts(): string[]; get visibleRegionContainer(): Container; private _panAndZoomContainer; get panAndZoomContainer(): Container; private _trueRootContainer; set trueRootContainer(value: Container); get trueRootContainer(): Container; private _defaultGUISize; private _initialPanningOffset; private _panningOffset; private _zoomFactor; private _zoomModeIncrement; private _guiSize; private _pasteDisabled; get guiSize(): ISize; get pasteDisabled(): boolean; set guiSize(value: ISize); applyEditorTransformation(): void; removeEditorTransformation(): void; private _reframeWindow; constructor(props: IWorkbenchComponentProps); keyEvent: (evt: KeyboardEvent) => void; copyToClipboard(copyFn: (content: string) => void): void; cutToClipboard(copyFn: (content: string) => void): void; pasteFromClipboard(clipboardContents: string): boolean; CopyGUIControl(original: Control): void; blurEvent: () => void; /** * Adds editor observers to control and stores old data in metadata * @param guiControl */ addEditorBehavior(guiControl: Control): void; /** * Removes editor behavior (observables, metadata) from control * @param control */ removeEditorBehavior(control: Control): void; dispose(): void; loadFromJson(serializationObject: any): void; /** * Load Control from Json then select loaded Control * @param serializationObject */ loadControlFromJson(serializationObject: any): void; loadFromSnippet(snippetId: string): Promise<void>; loadToEditor(): void; updateNodeOutlines(): void; appendBlock(guiElement: Control): Control; private parent; private _canClone; private _controlToLinkedMeshMap; private _observersMap; private _saveObservables; private _restoreObservables; private _copyEditorGUIToLiveGUI; private _reorderGrid; private _isNotChildInsert; private _adjustParentingIndex; isSelected(value: boolean, guiNode: Control): void; clicked: boolean; _onMove(guiControl: Control, evt: Vector2, startPos: Vector2): void; onMove(evt: React.PointerEvent): void; private _screenToTexturePosition; private getScaledPointerPosition; startPanning(): void; endPanning(): void; processSelection(): void; onDown(evt: React.PointerEvent<HTMLElement>): void; onUp(evt: React.PointerEvent): void; private _syncConnectedLines; private _copyLiveGUIToEditorGUI; createGUICanvas(embed?: boolean): void; synchronizeLiveGUI(): void; addControls(scene: Scene): void; panning(): void; moveControls(moveHorizontal: boolean, amount: number): void; zoomWheel(event: React.WheelEvent): void; private _panZoomToCenter; zoomDrag(event: React.MouseEvent): void; zooming(delta: number): void; zeroIfClose(vec: Vector3): void; } } declare module "@babylonjs/gui-editor/diagram/gizmoWrapper" { import { Nullable } from "@babylonjs/core/types"; import { Observer } from "@babylonjs/core/Misc/observable"; import * as React from "react"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; export interface IGizmoWrapperProps { globalState: GlobalState; } export class GizmoWrapper extends React.Component<IGizmoWrapperProps> { observer: Nullable<Observer<void>>; componentDidMount(): void; componentWillUnmount(): void; } } declare module "@babylonjs/gui-editor/diagram/gizmoScalePoint" { import { Vector2 } from "@babylonjs/core/Maths/math"; import * as React from "react"; export enum ScalePointPosition { Top = -1, Left = -1, Center = 0, Right = 1, Bottom = 1 } export interface IScalePoint { position: Vector2; horizontalPosition: ScalePointPosition; verticalPosition: ScalePointPosition; rotation: number; isPivot: boolean; defaultRotation: number; id?: number; } interface IGizmoScalePointProps { scalePoint: IScalePoint; clickable: boolean; key: number; onDrag: (event?: React.PointerEvent<HTMLDivElement>, scalePoint?: IScalePoint) => void; onRotate: (event?: React.PointerEvent<HTMLDivElement>, scalePoint?: IScalePoint) => void; onUp: () => void; overrideCursor?: string; canRotate: boolean; allowClickOnPivot?: boolean; } export {}; } declare module "@babylonjs/gui-editor/diagram/gizmoLine" { import { GlobalState } from "@babylonjs/gui-editor/globalState"; import { Line } from "@babylonjs/gui/2D/controls/line"; interface IGizmoLineProps { globalState: GlobalState; control: Line; } /** * This class represents the gizmo drawn on a line Control. * It is used to scale and rotate the control around a pivot point * @param props the properties of the gizmo * @returns a gizmo line */ export {}; } declare module "@babylonjs/gui-editor/diagram/gizmoGeneric" { import { Control } from "@babylonjs/gui/2D/controls/control"; import * as React from "react"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; import { Rect } from "@babylonjs/gui-editor/diagram/coordinateHelper"; import { IScalePoint } from "@babylonjs/gui-editor/diagram/gizmoScalePoint"; export interface IGuiGizmoProps { globalState: GlobalState; control: Control; } interface IGuiGizmoState { canvasBounds: Rect; scalePoints: IScalePoint[]; scalePointDragging: number; isRotating: boolean; } export class GizmoGeneric extends React.Component<IGuiGizmoProps, IGuiGizmoState> { private _storedValues; private _localBounds; private _rotation; private _gizmoUpdateObserver; private _pointerUpObserver; private _pointerMoveObserver; constructor(props: IGuiGizmoProps); componentDidMount(): void; componentWillUnmount(): void; /** * Update the gizmo's positions */ updateGizmo(): void; private _onUp; private _onMove; private _rotate; private _dragLocalBounds; private _updateNodeFromLocalBounds; private _beginDraggingScalePoint; private _beginRotate; } export {}; } declare module "@babylonjs/gui-editor/diagram/coordinateHelper" { import { Control } from "@babylonjs/gui/2D/controls/control"; import { Matrix2D } from "@babylonjs/gui/2D/math2D"; import { Vector2 } from "@babylonjs/core/Maths/math.vector"; import { Observable } from "@babylonjs/core/Misc/observable"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent"; import { Measure } from "@babylonjs/gui/2D/measure"; export type DimensionProperties = "width" | "left" | "height" | "top" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingBottom" | "fontSize" | "linkOffsetX" | "linkOffsetY"; export class Rect { top: number; left: number; right: number; bottom: number; constructor(left: number, top: number, right: number, bottom: number); clone(): Rect; get center(): Vector2; get width(): number; get height(): number; } export class CoordinateHelper { private static _MatrixCache; static GlobalState: GlobalState; /** * Get the scaling of a specific GUI control * @param node the node for which we are getting the scaling * @param relative should we return only the relative scaling (relative to the parent) * @returns an X,Y vector of the scaling */ static GetScale(node: Control, relative?: boolean): Vector2; static GetRotation(node: Control, relative?: boolean): number; static GetParentSizes(guiControl: Control): Measure; /** * This function calculates a local matrix for a node, including it's full transformation and pivot point * * @param node the node to calculate the matrix for * @param storedValues should the stored (cached) values be used to calculate the matrix * @returns a new matrix for the control */ static GetNodeMatrix(node: Control, storedValues?: Rect): Matrix2D; /** * Using the node's tree, calculate its world matrix and return it * @param node the node to calculate the matrix for * @param storedValues used stored valued (cached when pointer down is clicked) * @param stopAt stop looking when this node is found * @returns the world matrix for this node */ static NodeToRTTWorldMatrix(node: Control, storedValues?: Rect, stopAt?: Control): Matrix2D; static NodeToRTTSpace(node: Control, x: number, y: number, reference?: Vector2, storedValues?: Rect, stopAt?: Control): Vector2; static RttToLocalNodeSpace(node: Control, x: number, y: number, reference?: Vector2, storedValues?: Rect): Vector2; static RttToCanvasSpace(x: number, y: number): Vector2; static MousePointerToRTTSpace(_node?: Control, x?: number, y?: number): Vector2; private static _ResetMatrixArray; static ComputeLocalBounds(node: Control): Rect; /** * converts a node's dimensions to percentage, properties can be specified as a list, or can convert all * @param guiControl * @param properties * @param onPropertyChangedObservable */ static ConvertToPercentage(guiControl: Control, properties?: DimensionProperties[], onPropertyChangedObservable?: Observable<PropertyChangedEvent>): void; static Round(value: number): number; static ConvertToPixels(guiControl: Control, properties?: DimensionProperties[], onPropertyChangedObservable?: Observable<PropertyChangedEvent>): void; } } declare module "@babylonjs/gui-editor/diagram/artBoard" { import * as React from "react"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; import { Rect } from "@babylonjs/gui-editor/diagram/coordinateHelper"; interface IArtBoardProps { globalState: GlobalState; } interface IArtBoardState { bounds: Rect; } export class ArtBoardComponent extends React.Component<IArtBoardProps, IArtBoardState> { constructor(props: IArtBoardProps); update(): void; } export {}; } declare module "@babylonjs/gui-editor/components/parentingPropertyGridComponent" { import * as React from "react"; import { Control } from "@babylonjs/gui/2D/controls/control"; import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject"; import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent"; import { Observable } from "@babylonjs/core/Misc/observable"; interface IParentingPropertyGridComponentProps { control: Control; lockObject: LockObject; onPropertyChangedObservable?: Observable<PropertyChangedEvent>; } export class ParentingPropertyGridComponent extends React.Component<IParentingPropertyGridComponentProps> { constructor(props: IParentingPropertyGridComponentProps); private _columnNumber; private _rowNumber; updateGridPosition(): void; getCellInfo(): void; private _changeCell; } export {}; } declare module "@babylonjs/gui-editor/components/commandDropdownComponent" { import * as React from "react"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; interface ICommandDropdownComponentProps { globalState: GlobalState; icon?: string; tooltip: string; defaultValue?: string; items: { label: string; icon?: string; fileButton?: boolean; loadControlButton?: boolean; onClick?: () => void; onCheck?: (value: boolean) => void; storeKey?: string; isActive?: boolean; defaultValue?: boolean | string; subItems?: string[]; }[]; toRight?: boolean; } export class CommandDropdownComponent extends React.Component<ICommandDropdownComponentProps, { isExpanded: boolean; activeState: string; }> { constructor(props: ICommandDropdownComponentProps); } export {}; } declare module "@babylonjs/gui-editor/components/commandButtonComponent" { import * as React from "react"; interface ICommandButtonComponentProps { tooltip: string; shortcut?: string; icon: string; iconLabel?: string; isActive: boolean; copyDeleteDisabled?: boolean; pasteDisabled?: boolean; onClick: () => void; altStyle?: boolean; disabled?: boolean; } export class CommandButtonComponent extends React.Component<ICommandButtonComponentProps> { constructor(props: ICommandButtonComponentProps); } export {}; } declare module "@babylonjs/gui-editor/components/commandBarComponent" { import * as React from "react"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; import "@babylonjs/gui-editor/scss/commandBar.scss"; interface ICommandBarComponentProps { globalState: GlobalState; } export class CommandBarComponent extends React.Component<ICommandBarComponentProps> { private _sizeOption; private _stopUpdating; private _lockObject; constructor(props: ICommandBarComponentProps); } export {}; } declare module "@babylonjs/gui-editor/components/sceneExplorer/treeItemSelectableComponent" { import { Nullable } from "@babylonjs/core/types"; import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer"; import * as React from "react"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; import { DragOverLocation } from "@babylonjs/gui-editor/globalState"; export interface ITreeItemSelectableComponentProps { entity: any; selectedEntities: any[]; mustExpand?: boolean; offset: number; globalState: GlobalState; extensibilityGroups?: IExplorerExtensibilityGroup[]; filter: Nullable<string>; } export interface ITreeItemSelectableComponentState { expand: boolean; dragOver: boolean; isSelected: boolean; isHovered: boolean; dragOverLocation: DragOverLocation; blockDrag: boolean; } export class TreeItemSelectableComponent extends React.Component<ITreeItemSelectableComponentProps, ITreeItemSelectableComponentState> { private _onSelectionChangedObservable; private _onDraggingEndObservable; private _onDraggingStartObservable; private _thisRef; /** flag flipped onDragEnter if dragOver is already true * prevents dragLeave from immediately setting dragOver to false * required to make dragging work as expected * see: see: https://github.com/transformation-dev/matrx/tree/master/packages/dragster */ private _secondDragEnter; constructor(props: ITreeItemSelectableComponentProps); switchExpandedState(): void; shouldComponentUpdate(nextProps: ITreeItemSelectableComponentProps, nextState: { isSelected: boolean; }): boolean; scrollIntoView(): void; componentWillUnmount(): void; onSelect(): void; dragOver(event: React.DragEvent<HTMLDivElement>): void; updateDragOverLocation(event: React.DragEvent<HTMLDivElement>): void; drop(): void; } } declare module "@babylonjs/gui-editor/components/sceneExplorer/treeItemLabelComponent" { import * as React from "react"; interface ITreeItemLabelComponentProps { label?: string; onClick?: () => void; onChange: (newValue: string) => void; bracket: string; renaming: boolean; setRenaming: (renaming: boolean) => void; } interface ITreeItemLabelState { value: string; } export class TreeItemLabelComponent extends React.Component<ITreeItemLabelComponentProps, ITreeItemLabelState> { constructor(props: ITreeItemLabelComponentProps); onClick(): void; onBlur(): void; } export {}; } declare module "@babylonjs/gui-editor/components/sceneExplorer/treeItemComponent" { import * as React from "react"; import { Nullable } from "@babylonjs/core/types"; import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; export interface ITreeItemComponentProps { items?: Nullable<any[]>; label: string; offset: number; filter: Nullable<string>; forceSubitems?: boolean; globalState: GlobalState; entity?: any; selectedEntities: any[]; extensibilityGroups?: IExplorerExtensibilityGroup[]; contextMenuItems?: { label: string; action: () => void; }[]; } export class TreeItemComponent extends React.Component<ITreeItemComponentProps, { isExpanded: boolean; mustExpand: boolean; }> { static _ContextMenuUniqueIdGenerator: number; constructor(props: ITreeItemComponentProps); switchExpandedState(): void; shouldComponentUpdate(nextProps: ITreeItemComponentProps, nextState: { isExpanded: boolean; }): boolean; expandAll(expand: boolean): void; } } declare module "@babylonjs/gui-editor/components/sceneExplorer/sceneExplorerComponent" { import * as React from "react"; import { Nullable } from "@babylonjs/core/types"; import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer"; import { Scene } from "@babylonjs/core/scene"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; import "@babylonjs/gui-editor/components/sceneExplorer/sceneExplorer.scss"; import { PropsWithChildren } from "react"; interface ISceneExplorerFilterComponentProps { onFilter: (filter: string) => void; } export class SceneExplorerFilterComponent extends React.Component<ISceneExplorerFilterComponentProps> { constructor(props: ISceneExplorerFilterComponentProps); } interface ISceneExplorerComponentProps { scene?: Scene; noCommands?: boolean; noHeader?: boolean; noExpand?: boolean; noClose?: boolean; extensibilityGroups?: IExplorerExtensibilityGroup[]; globalState: GlobalState; popupMode?: boolean; onPopup?: () => void; onClose?: () => void; } export class SceneExplorerComponent extends React.Component<PropsWithChildren<ISceneExplorerComponentProps>, { filter: Nullable<string>; selectedEntity: any; scene: Nullable<Scene>; }> { private _onSelectionChangeObserver; private _onParrentingChangeObserver; private _onNewSceneObserver; private _onPropertyChangedObservable; private _onUpdateRequiredObserver; constructor(props: ISceneExplorerComponentProps); componentDidMount(): void; componentWillUnmount(): void; filterContent(filter: string): void; findSiblings(parent: any, items: any[], target: any, goNext: boolean, data: { previousOne?: any; found?: boolean; }): boolean; processKeys(keyEvent: React.KeyboardEvent<HTMLDivElement>): void; onClose(): void; onPopup(): void; } export {}; } declare module "@babylonjs/gui-editor/components/sceneExplorer/extensionsComponent" { import * as React from "react"; import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer"; interface IExtensionsComponentProps { target: any; extensibilityGroups?: IExplorerExtensibilityGroup[]; } export class ExtensionsComponent extends React.Component<IExtensionsComponentProps, { popupVisible: boolean; }> { private _popup; private _extensionRef; constructor(props: IExtensionsComponentProps); showPopup(): void; componentDidMount(): void; componentDidUpdate(): void; } export {}; } declare module "@babylonjs/gui-editor/components/sceneExplorer/entities/gui/controlTreeItemComponent" { import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer"; import { Control } from "@babylonjs/gui/2D/controls/control"; import * as React from "react"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; import { DragOverLocation } from "@babylonjs/gui-editor/globalState"; interface IControlTreeItemComponentProps { control: Control; extensibilityGroups?: IExplorerExtensibilityGroup[]; onClick: () => void; globalState: GlobalState; isHovered: boolean; isDragOver: boolean; dragOverLocation: DragOverLocation; onRenamingStateChanged: (renaming: boolean) => void; } export class ControlTreeItemComponent extends React.Component<IControlTreeItemComponentProps, { isActive: boolean; isVisible: boolean; isRenaming: boolean; }> { private _onIsVisibleChangedObserver; constructor(props: IControlTreeItemComponentProps); componentWillUnmount(): void; highlight(): void; switchVisibility(): void; onRename(name: string): void; } export {}; } declare module "@babylonjs/gui-editor/components/propertyTab/propertyTabComponent" { import * as React from "react"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; import { Control } from "@babylonjs/gui/2D/controls/control"; import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture"; import "@babylonjs/gui-editor/components/propertyTab/propertyTab.scss"; interface IPropertyTabComponentProps { globalState: GlobalState; } export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps> { private _onBuiltObserver; private _timerIntervalId; private _lockObject; constructor(props: IPropertyTabComponentProps); componentDidMount(): void; componentWillUnmount(): void; load(file: File): void; /** * Read loaded file * @param file */ loadControl(file: File): void; save(saveCallback: () => void): void; saveLocally: () => void; /** * Save the selected control as Json with file name of guiControl */ saveSelectedControlLocally: () => void; saveToSnippetServerHelper: (content: string, adt: AdvancedDynamicTexture) => Promise<string>; saveToSnippetServer: () => Promise<void>; loadFromSnippet(): void; /** * returns the class name of a list of controls if they share a class, or an empty string if not * @param nodes the list of controls to check * @returns the class name of a list of controls if they share a class, or an empty string if not */ getControlsCommonClassName(nodes: Control[]): string; renderControlIcon(nodes: Control[]): string; } export {}; } declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/textBlockPropertyGridComponent" { import * as React from "react"; import { Observable } from "@babylonjs/core/Misc/observable"; import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent"; import { TextBlock } from "@babylonjs/gui/2D/controls/textBlock"; import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; interface ITextBlockPropertyGridComponentProps { textBlocks: TextBlock[]; lockObject: LockObject; onPropertyChangedObservable?: Observable<PropertyChangedEvent>; onFontsParsedObservable?: Observable<void>; globalState?: GlobalState; } export class TextBlockPropertyGridComponent extends React.Component<ITextBlockPropertyGridComponentProps> { constructor(props: ITextBlockPropertyGridComponentProps); } export {}; } declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/stackPanelPropertyGridComponent" { import * as React from "react"; import { Observable } from "@babylonjs/core/Misc/observable"; import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent"; import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject"; import { StackPanel } from "@babylonjs/gui/2D/controls/stackPanel"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; interface IStackPanelPropertyGridComponentProps { stackPanels: StackPanel[]; lockObject: LockObject; onPropertyChangedObservable?: Observable<PropertyChangedEvent>; onFontsParsedObservable?: Observable<void>; globalState?: GlobalState; } export class StackPanelPropertyGridComponent extends React.Component<IStackPanelPropertyGridComponentProps> { constructor(props: IStackPanelPropertyGridComponentProps); } export {}; } declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/sliderPropertyGridComponent" { import * as React from "react"; import { Observable } from "@babylonjs/core/Misc/observable"; import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent"; import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject"; import { Slider } from "@babylonjs/gui/2D/controls/sliders/slider"; import { ImageBasedSlider } from "@babylonjs/gui/2D/controls/sliders/imageBasedSlider"; interface ISliderPropertyGridComponentProps { sliders: (Slider | ImageBasedSlider)[]; lockObject: LockObject; onPropertyChangedObservable?: Observable<PropertyChangedEvent>; } export class SliderPropertyGridComponent extends React.Component<ISliderPropertyGridComponentProps> { constructor(props: ISliderPropertyGridComponentProps); } export {}; } declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/sliderGenericPropertyGridComponent" { import * as React from "react"; import { Observable } from "@babylonjs/core/Misc/observable"; import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent"; import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject"; import { Slider } from "@babylonjs/gui/2D/controls/sliders/slider"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; interface ISliderGenericPropertyGridComponentProps { sliders: Slider[]; lockObject: LockObject; onPropertyChangedObservable?: Observable<PropertyChangedEvent>; onFontsParsedObservable?: Observable<void>; globalState?: GlobalState; } export class SliderGenericPropertyGridComponent extends React.Component<ISliderGenericPropertyGridComponentProps> { constructor(props: ISliderGenericPropertyGridComponentProps); } export {}; } declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/scrollViewerPropertyGridComponent" { import * as React from "react"; import { Observable } from "@babylonjs/core/Misc/observable"; import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent"; import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject"; import { ScrollViewer } from "@babylonjs/gui/2D/controls/scrollViewers/scrollViewer"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; interface IScrollViewerPropertyGridComponentProps { scrollViewers: ScrollViewer[]; lockObject: LockObject; onPropertyChangedObservable?: Observable<PropertyChangedEvent>; onFontsParsedObservable?: Observable<void>; globalState?: GlobalState; } export class ScrollViewerPropertyGridComponent extends React.Component<IScrollViewerPropertyGridComponentProps> { constructor(props: IScrollViewerPropertyGridComponentProps); } export {}; } declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/rectanglePropertyGridComponent" { import * as React from "react"; import { Observable } from "@babylonjs/core/Misc/observable"; import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent"; import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject"; import { Rectangle } from "@babylonjs/gui/2D/controls/rectangle"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; interface IRectanglePropertyGridComponentProps { rectangles: Rectangle[]; lockObject: LockObject; onPropertyChangedObservable?: Observable<PropertyChangedEvent>; onFontsParsedObservable?: Observable<void>; globalState?: GlobalState; } export class RectanglePropertyGridComponent extends React.Component<IRectanglePropertyGridComponentProps> { constructor(props: IRectanglePropertyGridComponentProps); } export {}; } declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/radioButtonPropertyGridComponent" { import * as React from "react"; import { Observable } from "@babylonjs/core/Misc/observable"; import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent"; import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject"; import { RadioButton } from "@babylonjs/gui/2D/controls/radioButton"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; interface IRadioButtonPropertyGridComponentProps { radioButtons: RadioButton[]; lockObject: LockObject; onPropertyChangedObservable?: Observable<PropertyChangedEvent>; onFontsParsedObservable?: Observable<void>; globalState?: GlobalState; } export class RadioButtonPropertyGridComponent extends React.Component<IRadioButtonPropertyGridComponentProps> { constructor(props: IRadioButtonPropertyGridComponentProps); } export {}; } declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/linePropertyGridComponent" { import * as React from "react"; import { Observable } from "@babylonjs/core/Misc/observable"; import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent"; import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject"; import { Line } from "@babylonjs/gui/2D/controls/line"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; interface ILinePropertyGridComponentProps { lines: Line[]; lockObject: LockObject; onPropertyChangedObservable?: Observable<PropertyChangedEvent>; onFontsParsedObservable?: Observable<void>; globalState?: GlobalState; } export class LinePropertyGridComponent extends React.Component<ILinePropertyGridComponentProps> { constructor(props: ILinePropertyGridComponentProps); onDashChange(value: string): void; } export {}; } declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/inputTextPropertyGridComponent" { import * as React from "react"; import { Observable } from "@babylonjs/core/Misc/observable"; import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent"; import { InputText } from "@babylonjs/gui/2D/controls/inputText"; import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; interface IInputTextPropertyGridComponentProps { inputTexts: InputText[]; lockObject: LockObject; onPropertyChangedObservable?: Observable<PropertyChangedEvent>; onFontsParsedObservable?: Observable<void>; globalState?: GlobalState; } export class InputTextPropertyGridComponent extends React.Component<IInputTextPropertyGridComponentProps> { constructor(props: IInputTextPropertyGridComponentProps); } export {}; } declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/imagePropertyGridComponent" { import * as React from "react"; import { Observable } from "@babylonjs/core/Misc/observable"; import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent"; import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject"; import { Image } from "@babylonjs/gui/2D/controls/image"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; interface IImagePropertyGridComponentProps { images: Image[]; lockObject: LockObject; onPropertyChangedObservable?: Observable<PropertyChangedEvent>; onFontsParsedObservable?: Observable<void>; globalState?: GlobalState; } export class ImagePropertyGridComponent extends React.Component<IImagePropertyGridComponentProps> { private _observers; constructor(props: IImagePropertyGridComponentProps); shouldComponentUpdate(nextProps: IImagePropertyGridComponentProps): boolean; updateObservers(oldImages: Image[], newImages: Image[]): void; componentWillUnmount(): void; toggleAnimations(on: boolean): void; getMaxCells(): number; updateCellSize(): void; } export {}; } declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/imageBasedSliderPropertyGridComponent" { import * as React from "react"; import { Observable } from "@babylonjs/core/Misc/observable"; import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent"; import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject"; import { ImageBasedSlider } from "@babylonjs/gui/2D/controls/sliders/imageBasedSlider"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; interface IImageBasedSliderPropertyGridComponentProps { imageBasedSliders: ImageBasedSlider[]; lockObject: LockObject; onPropertyChangedObservable?: Observable<PropertyChangedEvent>; onFontsParsedObservable?: Observable<void>; globalState?: GlobalState; } export class ImageBasedSliderPropertyGridComponent extends React.Component<IImageBasedSliderPropertyGridComponentProps> { constructor(props: IImageBasedSliderPropertyGridComponentProps); } export {}; } declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/gridPropertyGridComponent" { import * as React from "react"; import { Observable } from "@babylonjs/core/Misc/observable"; import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent"; import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject"; import { Grid } from "@babylonjs/gui/2D/controls/grid"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; interface IGridPropertyGridComponentProps { grids: Grid[]; lockObject: LockObject; onPropertyChangedObservable?: Observable<PropertyChangedEvent>; onFontsParsedObservable?: Observable<void>; globalState?: GlobalState; onUpdateRequiredObservable?: Observable<void>; } interface IGridPropertyComponentState { removingColumn: boolean; removingRow: boolean; } export class GridPropertyGridComponent extends React.Component<IGridPropertyGridComponentProps, IGridPropertyComponentState> { constructor(props: IGridPropertyGridComponentProps); private _previousGrid; private _rowDefinitions; private _rowEditFlags; private _columnEditFlags; private _columnDefinitions; private _editedRow; private _editedColumn; private _rowChild; private _columnChild; setRowValues(): void; setColumnValues(): void; parsePercentage(value: string): number; isCloseTo(value: number, expected: number, epsilon?: number): boolean; adjustPercentages(definitions: string[], editFlags: boolean[]): string[]; resizeRow(): void; resizeColumn(): void; checkValue(value: string, percent: boolean): string; checkPercentage(value: string): boolean; resetValues(): void; } export {}; } declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/ellipsePropertyGridComponent" { import * as React from "react"; import { Observable } from "@babylonjs/core/Misc/observable"; import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent"; import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject"; import { Ellipse } from "@babylonjs/gui/2D/controls/ellipse"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; interface IEllipsePropertyGridComponentProps { ellipses: Ellipse[]; lockObject: LockObject; onPropertyChangedObservable?: Observable<PropertyChangedEvent>; onFontsParsedObservable?: Observable<void>; globalState?: GlobalState; } export class EllipsePropertyGridComponent extends React.Component<IEllipsePropertyGridComponentProps> { constructor(props: IEllipsePropertyGridComponentProps); } export {}; } declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/displayGridPropertyGridComponent" { import * as React from "react"; import { Observable } from "@babylonjs/core/Misc/observable"; import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent"; import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject"; import { DisplayGrid } from "@babylonjs/gui/2D/controls/displayGrid"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; interface IDisplayGridPropertyGridComponentProps { displayGrids: DisplayGrid[]; lockObject: LockObject; onPropertyChangedObservable?: Observable<PropertyChangedEvent>; onFontsParsedObservable?: Observable<void>; globalState?: GlobalState; } export class DisplayGridPropertyGridComponent extends React.Component<IDisplayGridPropertyGridComponentProps> { constructor(props: IDisplayGridPropertyGridComponentProps); } export {}; } declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/controlPropertyGridComponent" { import * as React from "react"; import { Observable } from "@babylonjs/core/Misc/observable"; import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent"; import { Control } from "@babylonjs/gui/2D/controls/control"; import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject"; import { GlobalState } from "@babylonjs/gui-editor/globalState"; interface IControlPropertyGridComponentProps { controls: Control[]; lockObject: LockObject; onPropertyChangedObservable?: Observable<PropertyChangedEvent>; onFontsParsedObservable?: Observable<void>; globalState?: GlobalState; } export class ControlPropertyGridComponent extends React.Component<IControlPropertyGridComponentProps> { constructor(props: IControlPropertyGridComponentProps); } export {}; } declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/contain