babylon.guiEditor.module.d.ts 61 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688
  1. /// <reference types="react" />
  2. declare module "babylonjs-gui-editor/components/log/logComponent" {
  3. import * as React from "react";
  4. import { GlobalState } from "babylonjs-gui-editor/globalState";
  5. interface ILogComponentProps {
  6. globalState: GlobalState;
  7. }
  8. export class LogEntry {
  9. message: string;
  10. isError: boolean;
  11. constructor(message: string, isError: boolean);
  12. }
  13. export class LogComponent extends React.Component<ILogComponentProps, {
  14. logs: LogEntry[];
  15. }> {
  16. constructor(props: ILogComponentProps);
  17. componentDidMount(): void;
  18. componentDidUpdate(): void;
  19. render(): JSX.Element;
  20. }
  21. }
  22. declare module "babylonjs-gui-editor/diagram/workbench" {
  23. import * as React from "react";
  24. import { GlobalState } from "babylonjs-gui-editor/globalState";
  25. import { GUINode } from "babylonjs-gui-editor/diagram/guiNode";
  26. import { Control } from 'babylonjs-gui/2D/controls/control';
  27. export interface IWorkbenchComponentProps {
  28. globalState: GlobalState;
  29. }
  30. export type FramePortData = {};
  31. export const isFramePortData: (variableToCheck: any) => variableToCheck is FramePortData;
  32. export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps> {
  33. private readonly MinZoom;
  34. private readonly MaxZoom;
  35. private _hostCanvas;
  36. private _gridCanvas;
  37. private _selectionContainer;
  38. private _frameContainer;
  39. private _svgCanvas;
  40. private _rootContainer;
  41. private _guiNodes;
  42. private _mouseStartPointX;
  43. private _mouseStartPointY;
  44. private _selectionStartX;
  45. private _selectionStartY;
  46. private _x;
  47. private _y;
  48. private _zoom;
  49. private _selectedGuiNodes;
  50. private _gridSize;
  51. private _selectionBox;
  52. private _frameCandidate;
  53. private _altKeyIsPressed;
  54. private _ctrlKeyIsPressed;
  55. private _oldY;
  56. _frameIsMoving: boolean;
  57. _isLoading: boolean;
  58. isOverGUINode: boolean;
  59. get gridSize(): number;
  60. set gridSize(value: number);
  61. get globalState(): GlobalState;
  62. get nodes(): GUINode[];
  63. get zoom(): number;
  64. set zoom(value: number);
  65. get x(): number;
  66. set x(value: number);
  67. get y(): number;
  68. set y(value: number);
  69. get selectedGuiNodes(): GUINode[];
  70. get canvasContainer(): HTMLDivElement;
  71. get hostCanvas(): HTMLDivElement;
  72. get svgCanvas(): HTMLElement;
  73. get selectionContainer(): HTMLDivElement;
  74. get frameContainer(): HTMLDivElement;
  75. constructor(props: IWorkbenchComponentProps);
  76. getGridPosition(position: number, useCeil?: boolean): number;
  77. getGridPositionCeil(position: number): number;
  78. updateTransform(): void;
  79. onKeyUp(): void;
  80. findNodeFromGuiElement(guiControl: Control): GUINode;
  81. reset(): void;
  82. appendBlock(guiElement: Control): GUINode;
  83. distributeGraph(): void;
  84. componentDidMount(): void;
  85. onMove(evt: React.PointerEvent): void;
  86. onDown(evt: React.PointerEvent<HTMLElement>): void;
  87. onUp(evt: React.PointerEvent): void;
  88. onWheel(evt: React.WheelEvent): void;
  89. zoomToFit(): void;
  90. createGUICanvas(): void;
  91. updateGUIs(): void;
  92. render(): JSX.Element;
  93. }
  94. }
  95. declare module "babylonjs-gui-editor/diagram/properties/propertyComponentProps" {
  96. import { Control } from "babylonjs-gui/2D/controls/control";
  97. import { GlobalState } from "babylonjs-gui-editor/globalState";
  98. export interface IPropertyComponentProps {
  99. globalState: GlobalState;
  100. guiControl: Control;
  101. }
  102. }
  103. declare module "babylonjs-gui-editor/sharedComponents/lineContainerComponent" {
  104. import * as React from "react";
  105. interface ILineContainerComponentProps {
  106. title: string;
  107. children: any[] | any;
  108. closed?: boolean;
  109. }
  110. export class LineContainerComponent extends React.Component<ILineContainerComponentProps, {
  111. isExpanded: boolean;
  112. }> {
  113. constructor(props: ILineContainerComponentProps);
  114. switchExpandedState(): void;
  115. renderHeader(): JSX.Element;
  116. render(): JSX.Element;
  117. }
  118. }
  119. declare module "babylonjs-gui-editor/sharedComponents/propertyChangedEvent" {
  120. export class PropertyChangedEvent {
  121. object: any;
  122. property: string;
  123. value: any;
  124. initialValue: any;
  125. }
  126. }
  127. declare module "babylonjs-gui-editor/sharedComponents/checkBoxLineComponent" {
  128. import * as React from "react";
  129. import { Observable } from "babylonjs/Misc/observable";
  130. import { PropertyChangedEvent } from "babylonjs-gui-editor/sharedComponents/propertyChangedEvent";
  131. export interface ICheckBoxLineComponentProps {
  132. label: string;
  133. target?: any;
  134. propertyName?: string;
  135. isSelected?: () => boolean;
  136. onSelect?: (value: boolean) => void;
  137. onValueChanged?: () => void;
  138. onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
  139. disabled?: boolean;
  140. }
  141. export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, {
  142. isSelected: boolean;
  143. isDisabled?: boolean;
  144. }> {
  145. private static _UniqueIdSeed;
  146. private _uniqueId;
  147. private _localChange;
  148. constructor(props: ICheckBoxLineComponentProps);
  149. shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: {
  150. isSelected: boolean;
  151. isDisabled: boolean;
  152. }): boolean;
  153. onChange(): void;
  154. render(): JSX.Element;
  155. }
  156. }
  157. declare module "babylonjs-gui-editor/sharedComponents/floatLineComponent" {
  158. import * as React from "react";
  159. import { Observable } from "babylonjs/Misc/observable";
  160. import { PropertyChangedEvent } from "babylonjs-gui-editor/sharedComponents/propertyChangedEvent";
  161. import { GlobalState } from "babylonjs-gui-editor/globalState";
  162. interface IFloatLineComponentProps {
  163. label: string;
  164. target: any;
  165. propertyName: string;
  166. onChange?: (newValue: number) => void;
  167. isInteger?: boolean;
  168. onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
  169. additionalClass?: string;
  170. step?: string;
  171. digits?: number;
  172. globalState: GlobalState;
  173. min?: number;
  174. max?: number;
  175. smallUI?: boolean;
  176. onEnter?: (newValue: number) => void;
  177. }
  178. export class FloatLineComponent extends React.Component<IFloatLineComponentProps, {
  179. value: string;
  180. }> {
  181. private _localChange;
  182. private _store;
  183. private _regExp;
  184. private _digits;
  185. constructor(props: IFloatLineComponentProps);
  186. shouldComponentUpdate(nextProps: IFloatLineComponentProps, nextState: {
  187. value: string;
  188. }): boolean;
  189. raiseOnPropertyChanged(newValue: number, previousValue: number): void;
  190. updateValue(valueString: string): void;
  191. render(): JSX.Element;
  192. }
  193. }
  194. declare module "babylonjs-gui-editor/sharedComponents/sliderLineComponent" {
  195. import * as React from "react";
  196. import { Observable } from "babylonjs/Misc/observable";
  197. import { PropertyChangedEvent } from "babylonjs-gui-editor/sharedComponents/propertyChangedEvent";
  198. import { GlobalState } from "babylonjs-gui-editor/globalState";
  199. interface ISliderLineComponentProps {
  200. label: string;
  201. target?: any;
  202. propertyName?: string;
  203. minimum: number;
  204. maximum: number;
  205. step: number;
  206. directValue?: number;
  207. useEuler?: boolean;
  208. onChange?: (value: number) => void;
  209. onInput?: (value: number) => void;
  210. onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
  211. decimalCount?: number;
  212. globalState: GlobalState;
  213. }
  214. export class SliderLineComponent extends React.Component<ISliderLineComponentProps, {
  215. value: number;
  216. }> {
  217. private _localChange;
  218. constructor(props: ISliderLineComponentProps);
  219. shouldComponentUpdate(nextProps: ISliderLineComponentProps, nextState: {
  220. value: number;
  221. }): boolean;
  222. onChange(newValueString: any): void;
  223. onInput(newValueString: any): void;
  224. prepareDataToRead(value: number): number;
  225. render(): JSX.Element;
  226. }
  227. }
  228. declare module "babylonjs-gui-editor/diagram/properties/genericNodePropertyComponent" {
  229. import * as React from "react";
  230. import { IPropertyComponentProps } from "babylonjs-gui-editor/diagram/properties/propertyComponentProps";
  231. export class GenericPropertyComponent extends React.Component<IPropertyComponentProps> {
  232. constructor(props: IPropertyComponentProps);
  233. render(): JSX.Element;
  234. }
  235. export class GeneralPropertyTabComponent extends React.Component<IPropertyComponentProps> {
  236. constructor(props: IPropertyComponentProps);
  237. render(): JSX.Element;
  238. }
  239. export class GenericPropertyTabComponent extends React.Component<IPropertyComponentProps> {
  240. constructor(props: IPropertyComponentProps);
  241. forceRebuild(notifiers?: {
  242. "rebuild"?: boolean;
  243. "update"?: boolean;
  244. }): void;
  245. render(): JSX.Element;
  246. }
  247. }
  248. declare module "babylonjs-gui-editor/sharedComponents/numericInputComponent" {
  249. import * as React from "react";
  250. import { GlobalState } from "babylonjs-gui-editor/globalState";
  251. interface INumericInputComponentProps {
  252. label: string;
  253. value: number;
  254. step?: number;
  255. onChange: (value: number) => void;
  256. globalState: GlobalState;
  257. }
  258. export class NumericInputComponent extends React.Component<INumericInputComponentProps, {
  259. value: string;
  260. }> {
  261. static defaultProps: {
  262. step: number;
  263. };
  264. private _localChange;
  265. constructor(props: INumericInputComponentProps);
  266. shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: {
  267. value: string;
  268. }): boolean;
  269. updateValue(evt: any): void;
  270. render(): JSX.Element;
  271. }
  272. }
  273. declare module "babylonjs-gui-editor/sharedUiComponents/lines/textLineComponent" {
  274. import * as React from "react";
  275. interface ITextLineComponentProps {
  276. label?: string;
  277. value?: string;
  278. color?: string;
  279. underline?: boolean;
  280. onLink?: () => void;
  281. url?: string;
  282. ignoreValue?: boolean;
  283. additionalClass?: string;
  284. }
  285. export class TextLineComponent extends React.Component<ITextLineComponentProps> {
  286. constructor(props: ITextLineComponentProps);
  287. onLink(): void;
  288. renderContent(): JSX.Element | null;
  289. render(): JSX.Element;
  290. }
  291. }
  292. declare module "babylonjs-gui-editor/diagram/properties/sliderGuiPropertyComponent" {
  293. import * as React from "react";
  294. import { IPropertyComponentProps } from "babylonjs-gui-editor/diagram/properties/propertyComponentProps";
  295. export class SliderPropertyTabComponent extends React.Component<IPropertyComponentProps> {
  296. constructor(props: IPropertyComponentProps);
  297. private _slider;
  298. render(): JSX.Element;
  299. }
  300. }
  301. declare module "babylonjs-gui-editor/diagram/propertyLedger" {
  302. import { ComponentClass } from 'react';
  303. import { IPropertyComponentProps } from "babylonjs-gui-editor/diagram/properties/propertyComponentProps";
  304. export class PropertyGuiLedger {
  305. static RegisteredControls: {
  306. [key: string]: ComponentClass<IPropertyComponentProps>;
  307. };
  308. }
  309. }
  310. declare module "babylonjs-gui-editor/diagram/guiNode" {
  311. import { GlobalState } from "babylonjs-gui-editor/globalState";
  312. import { Nullable } from 'babylonjs/types';
  313. import { Control } from 'babylonjs-gui/2D/controls/control';
  314. import { Vector2 } from 'babylonjs/Maths/math.vector';
  315. export class GUINode {
  316. guiControl: Control;
  317. private _x;
  318. private _y;
  319. private _gridAlignedX;
  320. private _gridAlignedY;
  321. private _globalState;
  322. private _onSelectionChangedObserver;
  323. private _onSelectionBoxMovedObserver;
  324. private _onUpdateRequiredObserver;
  325. private _ownerCanvas;
  326. private _isSelected;
  327. private _isVisible;
  328. private _enclosingFrameId;
  329. get isVisible(): boolean;
  330. set isVisible(value: boolean);
  331. get gridAlignedX(): number;
  332. get gridAlignedY(): number;
  333. get x(): number;
  334. set x(value: number);
  335. get y(): number;
  336. set y(value: number);
  337. get width(): number;
  338. get height(): number;
  339. get id(): number;
  340. get name(): string | undefined;
  341. get isSelected(): boolean;
  342. get enclosingFrameId(): number;
  343. set enclosingFrameId(value: number);
  344. set isSelected(value: boolean);
  345. constructor(globalState: GlobalState, guiControl: Control);
  346. cleanAccumulation(useCeil?: boolean): void;
  347. clicked: boolean;
  348. _onMove(evt: Vector2, startPos: Vector2): boolean;
  349. renderProperties(): Nullable<JSX.Element>;
  350. updateVisual(): void;
  351. dispose(): void;
  352. }
  353. }
  354. declare module "babylonjs-gui-editor/globalState" {
  355. import { Nullable } from "babylonjs/types";
  356. import { Observable } from "babylonjs/Misc/observable";
  357. import { LogEntry } from "babylonjs-gui-editor/components/log/logComponent";
  358. import { Color4 } from "babylonjs/Maths/math.color";
  359. import { GUINode } from "babylonjs-gui-editor/diagram/guiNode";
  360. import { WorkbenchComponent } from "babylonjs-gui-editor/diagram/workbench";
  361. import { AdvancedDynamicTexture } from "babylonjs-gui/2D/advancedDynamicTexture";
  362. export class GlobalState {
  363. guiTexture: AdvancedDynamicTexture;
  364. hostElement: HTMLElement;
  365. hostDocument: HTMLDocument;
  366. hostWindow: Window;
  367. onSelectionChangedObservable: Observable<Nullable<GUINode>>;
  368. onRebuildRequiredObservable: Observable<void>;
  369. onBuiltObservable: Observable<void>;
  370. onResetRequiredObservable: Observable<void>;
  371. onUpdateRequiredObservable: Observable<void>;
  372. onReOrganizedRequiredObservable: Observable<void>;
  373. onLogRequiredObservable: Observable<LogEntry>;
  374. onErrorMessageDialogRequiredObservable: Observable<string>;
  375. onIsLoadingChanged: Observable<boolean>;
  376. onSelectionBoxMoved: Observable<DOMRect | ClientRect>;
  377. onGuiNodeRemovalObservable: Observable<GUINode>;
  378. backgroundColor: Color4;
  379. blockKeyboardEvents: boolean;
  380. controlCamera: boolean;
  381. workbench: WorkbenchComponent;
  382. storeEditorData: (serializationObject: any) => void;
  383. customSave?: {
  384. label: string;
  385. action: (data: string) => Promise<void>;
  386. };
  387. constructor();
  388. }
  389. }
  390. declare module "babylonjs-gui-editor/sharedUiComponents/lines/draggableLineComponent" {
  391. import * as React from "react";
  392. export interface IButtonLineComponentProps {
  393. data: string;
  394. tooltip: string;
  395. }
  396. export class DraggableLineComponent extends React.Component<IButtonLineComponentProps> {
  397. constructor(props: IButtonLineComponentProps);
  398. render(): JSX.Element;
  399. }
  400. }
  401. declare module "babylonjs-gui-editor/components/guiList/guiListComponent" {
  402. import * as React from "react";
  403. import { GlobalState } from "babylonjs-gui-editor/globalState";
  404. interface IGuiListComponentProps {
  405. globalState: GlobalState;
  406. }
  407. export class GuiListComponent extends React.Component<IGuiListComponentProps, {
  408. filter: string;
  409. }> {
  410. private _onResetRequiredObserver;
  411. private static _Tooltips;
  412. constructor(props: IGuiListComponentProps);
  413. componentWillUnmount(): void;
  414. filterContent(filter: string): void;
  415. render(): JSX.Element;
  416. }
  417. }
  418. declare module "babylonjs-gui-editor/sharedUiComponents/lines/buttonLineComponent" {
  419. import * as React from "react";
  420. export interface IButtonLineComponentProps {
  421. label: string;
  422. onClick: () => void;
  423. }
  424. export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
  425. constructor(props: IButtonLineComponentProps);
  426. render(): JSX.Element;
  427. }
  428. }
  429. declare module "babylonjs-gui-editor/sharedUiComponents/lines/fileButtonLineComponent" {
  430. import * as React from "react";
  431. interface IFileButtonLineComponentProps {
  432. label: string;
  433. onClick: (file: File) => void;
  434. accept: string;
  435. }
  436. export class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
  437. private static _IDGenerator;
  438. private _id;
  439. private uploadInputRef;
  440. constructor(props: IFileButtonLineComponentProps);
  441. onChange(evt: any): void;
  442. render(): JSX.Element;
  443. }
  444. }
  445. declare module "babylonjs-gui-editor/serializationTools" {
  446. import { GlobalState } from "babylonjs-gui-editor/globalState";
  447. export class SerializationTools {
  448. static Deserialize(serializationObject: any, globalState: GlobalState): void;
  449. }
  450. }
  451. declare module "babylonjs-gui-editor/components/propertyTab/propertyTabComponent" {
  452. import * as React from "react";
  453. import { GlobalState } from "babylonjs-gui-editor/globalState";
  454. import { Nullable } from 'babylonjs/types';
  455. import { GUINode } from "babylonjs-gui-editor/diagram/guiNode";
  456. interface IPropertyTabComponentProps {
  457. globalState: GlobalState;
  458. }
  459. interface IPropertyTabComponentState {
  460. currentNode: Nullable<GUINode>;
  461. }
  462. export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, IPropertyTabComponentState> {
  463. private _onBuiltObserver;
  464. constructor(props: IPropertyTabComponentProps);
  465. componentDidMount(): void;
  466. componentWillUnmount(): void;
  467. load(file: File): void;
  468. loadFrame(file: File): void;
  469. save(): void;
  470. customSave(): void;
  471. saveToSnippetServer(): void;
  472. loadFromSnippet(): void;
  473. render(): JSX.Element;
  474. }
  475. }
  476. declare module "babylonjs-gui-editor/portal" {
  477. import * as React from "react";
  478. import { GlobalState } from "babylonjs-gui-editor/globalState";
  479. interface IPortalProps {
  480. globalState: GlobalState;
  481. }
  482. export class Portal extends React.Component<IPortalProps> {
  483. render(): React.ReactPortal;
  484. }
  485. }
  486. declare module "babylonjs-gui-editor/guiNodeTools" {
  487. import { Checkbox } from "babylonjs-gui/2D/controls/checkbox";
  488. import { ColorPicker } from "babylonjs-gui/2D/controls/colorpicker";
  489. import { Ellipse } from "babylonjs-gui/2D/controls/ellipse";
  490. import { Line } from "babylonjs-gui/2D/controls/line";
  491. import { Rectangle } from "babylonjs-gui/2D/controls/rectangle";
  492. import { Slider } from "babylonjs-gui/2D/controls/sliders/slider";
  493. import { TextBlock } from "babylonjs-gui/2D/controls/textBlock";
  494. export class GUINodeTools {
  495. static CreateControlFromString(data: string): Slider | Checkbox | ColorPicker | Ellipse | Rectangle | Line | TextBlock;
  496. }
  497. }
  498. declare module "babylonjs-gui-editor/nodeLocationInfo" {
  499. export interface INodeLocationInfo {
  500. blockId: number;
  501. x: number;
  502. y: number;
  503. }
  504. export interface IFrameData {
  505. x: number;
  506. y: number;
  507. width: number;
  508. height: number;
  509. color: number[];
  510. name: string;
  511. isCollapsed: boolean;
  512. blocks: number[];
  513. comments: string;
  514. }
  515. export interface IEditorData {
  516. locations: INodeLocationInfo[];
  517. x: number;
  518. y: number;
  519. zoom: number;
  520. frames?: IFrameData[];
  521. map?: {
  522. [key: number]: number;
  523. };
  524. }
  525. }
  526. declare module "babylonjs-gui-editor/sharedComponents/messageDialog" {
  527. import * as React from "react";
  528. import { GlobalState } from "babylonjs-gui-editor/globalState";
  529. interface IMessageDialogComponentProps {
  530. globalState: GlobalState;
  531. }
  532. export class MessageDialogComponent extends React.Component<IMessageDialogComponentProps, {
  533. message: string;
  534. isError: boolean;
  535. }> {
  536. constructor(props: IMessageDialogComponentProps);
  537. render(): JSX.Element | null;
  538. }
  539. }
  540. declare module "babylonjs-gui-editor/workbenchEditor" {
  541. import * as React from "react";
  542. import { GlobalState } from "babylonjs-gui-editor/globalState";
  543. import { Nullable } from "babylonjs/types";
  544. import { IEditorData } from "babylonjs-gui-editor/nodeLocationInfo";
  545. import { GUINode } from "babylonjs-gui-editor/diagram/guiNode";
  546. import { Control } from "babylonjs-gui/2D/controls/control";
  547. interface IGraphEditorProps {
  548. globalState: GlobalState;
  549. }
  550. interface IGraphEditorState {
  551. showPreviewPopUp: boolean;
  552. }
  553. export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEditorState> {
  554. private _workbenchCanvas;
  555. private _startX;
  556. private _moveInProgress;
  557. private _leftWidth;
  558. private _rightWidth;
  559. private _blocks;
  560. private _onWidgetKeyUpPointer;
  561. private _popUpWindow;
  562. /**
  563. * Creates a node and recursivly creates its parent nodes from it's input
  564. * @param block
  565. */
  566. createNodeFromObject(block: Control, recursion?: boolean): Nullable<GUINode>;
  567. componentDidMount(): void;
  568. componentWillUnmount(): void;
  569. constructor(props: IGraphEditorProps);
  570. pasteSelection(copiedNodes: GUINode[], currentX: number, currentY: number, selectNew?: boolean): GUINode[];
  571. zoomToFit(): void;
  572. showWaitScreen(): void;
  573. hideWaitScreen(): void;
  574. reOrganize(editorData?: Nullable<IEditorData>, isImportingAFrame?: boolean): void;
  575. onPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
  576. onPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
  577. resizeColumns(evt: React.PointerEvent<HTMLDivElement>, forLeft?: boolean): void;
  578. buildColumnLayout(): string;
  579. emitNewBlock(event: React.DragEvent<HTMLDivElement>): void;
  580. handlePopUp: () => void;
  581. handleClosingPopUp: () => void;
  582. createPopupWindow: (title: string, windowVariableName: string, width?: number, height?: number) => Window | null;
  583. copyStyles: (sourceDoc: HTMLDocument, targetDoc: HTMLDocument) => void;
  584. fixPopUpStyles: (document: Document) => void;
  585. render(): JSX.Element;
  586. }
  587. }
  588. declare module "babylonjs-gui-editor/sharedUiComponents/lines/popup" {
  589. export class Popup {
  590. static CreatePopup(title: string, windowVariableName: string, width?: number, height?: number): HTMLDivElement | null;
  591. private static _CopyStyles;
  592. }
  593. }
  594. declare module "babylonjs-gui-editor/guiEditor" {
  595. import { Observable } from "babylonjs/Misc/observable";
  596. /**
  597. * Interface used to specify creation options for the gui editor
  598. */
  599. export interface IGUIEditorOptions {
  600. hostElement?: HTMLElement;
  601. customSave?: {
  602. label: string;
  603. action: (data: string) => Promise<void>;
  604. };
  605. customLoadObservable?: Observable<any>;
  606. }
  607. /**
  608. * Class used to create a gui editor
  609. */
  610. export class GUIEditor {
  611. private static _CurrentState;
  612. /**
  613. * Show the gui editor
  614. * @param options defines the options to use to configure the gui editor
  615. */
  616. static Show(options: IGUIEditorOptions): void;
  617. }
  618. }
  619. declare module "babylonjs-gui-editor/index" {
  620. export * from "babylonjs-gui-editor/guiEditor";
  621. }
  622. declare module "babylonjs-gui-editor/legacy/legacy" {
  623. export * from "babylonjs-gui-editor/index";
  624. }
  625. declare module "babylonjs-gui-editor/sharedComponents/lineWithFileButtonComponent" {
  626. import * as React from "react";
  627. interface ILineWithFileButtonComponentProps {
  628. title: string;
  629. closed?: boolean;
  630. label: string;
  631. iconImage: any;
  632. onIconClick: (file: File) => void;
  633. accept: string;
  634. uploadName?: string;
  635. }
  636. export class LineWithFileButtonComponent extends React.Component<ILineWithFileButtonComponentProps, {
  637. isExpanded: boolean;
  638. }> {
  639. private uploadRef;
  640. constructor(props: ILineWithFileButtonComponentProps);
  641. onChange(evt: any): void;
  642. switchExpandedState(): void;
  643. render(): JSX.Element;
  644. }
  645. }
  646. declare module "babylonjs-gui-editor/sharedComponents/textInputLineComponent" {
  647. import * as React from "react";
  648. import { Observable } from "babylonjs/Misc/observable";
  649. import { PropertyChangedEvent } from "babylonjs-gui-editor/sharedComponents/propertyChangedEvent";
  650. import { GlobalState } from "babylonjs-gui-editor/globalState";
  651. interface ITextInputLineComponentProps {
  652. label: string;
  653. globalState: GlobalState;
  654. target?: any;
  655. propertyName?: string;
  656. value?: string;
  657. multilines?: boolean;
  658. onChange?: (value: string) => void;
  659. validator?: (value: string) => boolean;
  660. onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
  661. }
  662. export class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, {
  663. value: string;
  664. }> {
  665. private _localChange;
  666. constructor(props: ITextInputLineComponentProps);
  667. shouldComponentUpdate(nextProps: ITextInputLineComponentProps, nextState: {
  668. value: string;
  669. }): boolean;
  670. raiseOnPropertyChanged(newValue: string, previousValue: string): void;
  671. updateValue(value: string, raisePropertyChanged: boolean): void;
  672. render(): JSX.Element;
  673. }
  674. }
  675. declare module "babylonjs-gui-editor/sharedUiComponents/colorPicker/colorComponentEntry" {
  676. import * as React from "react";
  677. export interface IColorComponentEntryProps {
  678. value: number;
  679. label: string;
  680. max?: number;
  681. min?: number;
  682. onChange: (value: number) => void;
  683. }
  684. export class ColorComponentEntry extends React.Component<IColorComponentEntryProps> {
  685. constructor(props: IColorComponentEntryProps);
  686. updateValue(valueString: string): void;
  687. render(): JSX.Element;
  688. }
  689. }
  690. declare module "babylonjs-gui-editor/sharedUiComponents/colorPicker/hexColor" {
  691. import * as React from "react";
  692. export interface IHexColorProps {
  693. value: string;
  694. expectedLength: number;
  695. onChange: (value: string) => void;
  696. }
  697. export class HexColor extends React.Component<IHexColorProps, {
  698. hex: string;
  699. }> {
  700. constructor(props: IHexColorProps);
  701. shouldComponentUpdate(nextProps: IHexColorProps, nextState: {
  702. hex: string;
  703. }): boolean;
  704. updateHexValue(valueString: string): void;
  705. render(): JSX.Element;
  706. }
  707. }
  708. declare module "babylonjs-gui-editor/sharedUiComponents/colorPicker/colorPicker" {
  709. import * as React from "react";
  710. import { Color3, Color4 } from "babylonjs/Maths/math.color";
  711. /**
  712. * Interface used to specify creation options for color picker
  713. */
  714. export interface IColorPickerProps {
  715. color: Color3 | Color4;
  716. debugMode?: boolean;
  717. onColorChanged?: (color: Color3 | Color4) => void;
  718. }
  719. /**
  720. * Interface used to specify creation options for color picker
  721. */
  722. export interface IColorPickerState {
  723. color: Color3;
  724. alpha: number;
  725. }
  726. /**
  727. * Class used to create a color picker
  728. */
  729. export class ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> {
  730. private _saturationRef;
  731. private _hueRef;
  732. private _isSaturationPointerDown;
  733. private _isHuePointerDown;
  734. constructor(props: IColorPickerProps);
  735. onSaturationPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
  736. onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
  737. onSaturationPointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
  738. onHuePointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
  739. onHuePointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
  740. onHuePointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
  741. private _evaluateSaturation;
  742. private _evaluateHue;
  743. componentDidUpdate(): void;
  744. raiseOnColorChanged(): void;
  745. render(): JSX.Element;
  746. }
  747. }
  748. declare module "babylonjs-gui-editor/sharedUiComponents/lines/booleanLineComponent" {
  749. import * as React from "react";
  750. export interface IBooleanLineComponentProps {
  751. label: string;
  752. value: boolean;
  753. }
  754. export class BooleanLineComponent extends React.Component<IBooleanLineComponentProps> {
  755. constructor(props: IBooleanLineComponentProps);
  756. render(): JSX.Element;
  757. }
  758. }
  759. declare module "babylonjs-gui-editor/sharedUiComponents/lines/fileMultipleButtonLineComponent" {
  760. import * as React from "react";
  761. interface IFileMultipleButtonLineComponentProps {
  762. label: string;
  763. onClick: (event: any) => void;
  764. accept: string;
  765. }
  766. export class FileMultipleButtonLineComponent extends React.Component<IFileMultipleButtonLineComponentProps> {
  767. private static _IDGenerator;
  768. private _id;
  769. private uploadInputRef;
  770. constructor(props: IFileMultipleButtonLineComponentProps);
  771. onChange(evt: any): void;
  772. render(): JSX.Element;
  773. }
  774. }
  775. declare module "babylonjs-gui-editor/sharedUiComponents/lines/iconButtonLineComponent" {
  776. import * as React from 'react';
  777. export interface IIconButtonLineComponentProps {
  778. icon: string;
  779. onClick: () => void;
  780. tooltip: string;
  781. active?: boolean;
  782. }
  783. export class IconButtonLineComponent extends React.Component<IIconButtonLineComponentProps> {
  784. constructor(props: IIconButtonLineComponentProps);
  785. render(): JSX.Element;
  786. }
  787. }
  788. declare module "babylonjs-gui-editor/sharedUiComponents/lines/indentedTextLineComponent" {
  789. import * as React from "react";
  790. interface IIndentedTextLineComponentProps {
  791. value?: string;
  792. color?: string;
  793. underline?: boolean;
  794. onLink?: () => void;
  795. url?: string;
  796. additionalClass?: string;
  797. }
  798. export class IndentedTextLineComponent extends React.Component<IIndentedTextLineComponentProps> {
  799. constructor(props: IIndentedTextLineComponentProps);
  800. onLink(): void;
  801. renderContent(): JSX.Element;
  802. render(): JSX.Element;
  803. }
  804. }
  805. declare module "babylonjs-gui-editor/sharedUiComponents/lines/linkButtonComponent" {
  806. import * as React from "react";
  807. interface ILinkButtonComponentProps {
  808. label: string;
  809. buttonLabel: string;
  810. url?: string;
  811. onClick: () => void;
  812. onIconClick?: () => void;
  813. }
  814. export class LinkButtonComponent extends React.Component<ILinkButtonComponentProps> {
  815. constructor(props: ILinkButtonComponentProps);
  816. onLink(): void;
  817. render(): JSX.Element;
  818. }
  819. }
  820. declare module "babylonjs-gui-editor/sharedUiComponents/lines/messageLineComponent" {
  821. import * as React from "react";
  822. interface IMessageLineComponentProps {
  823. text: string;
  824. color?: string;
  825. }
  826. export class MessageLineComponent extends React.Component<IMessageLineComponentProps> {
  827. constructor(props: IMessageLineComponentProps);
  828. render(): JSX.Element;
  829. }
  830. }
  831. declare module "babylonjs-gui-editor/sharedUiComponents/lines/numericInputComponent" {
  832. import * as React from "react";
  833. interface INumericInputComponentProps {
  834. label: string;
  835. value: number;
  836. step?: number;
  837. onChange: (value: number) => void;
  838. precision?: number;
  839. }
  840. export class NumericInputComponent extends React.Component<INumericInputComponentProps, {
  841. value: string;
  842. }> {
  843. static defaultProps: {
  844. step: number;
  845. };
  846. private _localChange;
  847. constructor(props: INumericInputComponentProps);
  848. shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: {
  849. value: string;
  850. }): boolean;
  851. updateValue(evt: any): void;
  852. onBlur(): void;
  853. render(): JSX.Element;
  854. }
  855. }
  856. declare module "babylonjs-gui-editor/sharedUiComponents/lines/radioLineComponent" {
  857. import * as React from "react";
  858. import { Observable } from "babylonjs/Misc/observable";
  859. interface IRadioButtonLineComponentProps {
  860. onSelectionChangedObservable: Observable<RadioButtonLineComponent>;
  861. label: string;
  862. isSelected: () => boolean;
  863. onSelect: () => void;
  864. }
  865. export class RadioButtonLineComponent extends React.Component<IRadioButtonLineComponentProps, {
  866. isSelected: boolean;
  867. }> {
  868. private _onSelectionChangedObserver;
  869. constructor(props: IRadioButtonLineComponentProps);
  870. componentDidMount(): void;
  871. componentWillUnmount(): void;
  872. onChange(): void;
  873. render(): JSX.Element;
  874. }
  875. }
  876. declare module "babylonjs-gui-editor/sharedUiComponents/lines/valueLineComponent" {
  877. import * as React from "react";
  878. interface IValueLineComponentProps {
  879. label: string;
  880. value: number;
  881. color?: string;
  882. fractionDigits?: number;
  883. units?: string;
  884. }
  885. export class ValueLineComponent extends React.Component<IValueLineComponentProps> {
  886. constructor(props: IValueLineComponentProps);
  887. render(): JSX.Element;
  888. }
  889. }
  890. declare module "babylonjs-gui-editor" {
  891. export * from "babylonjs-gui-editor/legacy/legacy";
  892. }
  893. /// <reference types="react" />
  894. declare module GUIEDITOR {
  895. interface ILogComponentProps {
  896. globalState: GlobalState;
  897. }
  898. export class LogEntry {
  899. message: string;
  900. isError: boolean;
  901. constructor(message: string, isError: boolean);
  902. }
  903. export class LogComponent extends React.Component<ILogComponentProps, {
  904. logs: LogEntry[];
  905. }> {
  906. constructor(props: ILogComponentProps);
  907. componentDidMount(): void;
  908. componentDidUpdate(): void;
  909. render(): JSX.Element;
  910. }
  911. }
  912. declare module GUIEDITOR {
  913. export interface IWorkbenchComponentProps {
  914. globalState: GlobalState;
  915. }
  916. export type FramePortData = {};
  917. export const isFramePortData: (variableToCheck: any) => variableToCheck is FramePortData;
  918. export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps> {
  919. private readonly MinZoom;
  920. private readonly MaxZoom;
  921. private _hostCanvas;
  922. private _gridCanvas;
  923. private _selectionContainer;
  924. private _frameContainer;
  925. private _svgCanvas;
  926. private _rootContainer;
  927. private _guiNodes;
  928. private _mouseStartPointX;
  929. private _mouseStartPointY;
  930. private _selectionStartX;
  931. private _selectionStartY;
  932. private _x;
  933. private _y;
  934. private _zoom;
  935. private _selectedGuiNodes;
  936. private _gridSize;
  937. private _selectionBox;
  938. private _frameCandidate;
  939. private _altKeyIsPressed;
  940. private _ctrlKeyIsPressed;
  941. private _oldY;
  942. _frameIsMoving: boolean;
  943. _isLoading: boolean;
  944. isOverGUINode: boolean;
  945. get gridSize(): number;
  946. set gridSize(value: number);
  947. get globalState(): GlobalState;
  948. get nodes(): GUINode[];
  949. get zoom(): number;
  950. set zoom(value: number);
  951. get x(): number;
  952. set x(value: number);
  953. get y(): number;
  954. set y(value: number);
  955. get selectedGuiNodes(): GUINode[];
  956. get canvasContainer(): HTMLDivElement;
  957. get hostCanvas(): HTMLDivElement;
  958. get svgCanvas(): HTMLElement;
  959. get selectionContainer(): HTMLDivElement;
  960. get frameContainer(): HTMLDivElement;
  961. constructor(props: IWorkbenchComponentProps);
  962. getGridPosition(position: number, useCeil?: boolean): number;
  963. getGridPositionCeil(position: number): number;
  964. updateTransform(): void;
  965. onKeyUp(): void;
  966. findNodeFromGuiElement(guiControl: Control): GUINode;
  967. reset(): void;
  968. appendBlock(guiElement: Control): GUINode;
  969. distributeGraph(): void;
  970. componentDidMount(): void;
  971. onMove(evt: React.PointerEvent): void;
  972. onDown(evt: React.PointerEvent<HTMLElement>): void;
  973. onUp(evt: React.PointerEvent): void;
  974. onWheel(evt: React.WheelEvent): void;
  975. zoomToFit(): void;
  976. createGUICanvas(): void;
  977. updateGUIs(): void;
  978. render(): JSX.Element;
  979. }
  980. }
  981. declare module GUIEDITOR {
  982. export interface IPropertyComponentProps {
  983. globalState: GlobalState;
  984. guiControl: Control;
  985. }
  986. }
  987. declare module GUIEDITOR {
  988. interface ILineContainerComponentProps {
  989. title: string;
  990. children: any[] | any;
  991. closed?: boolean;
  992. }
  993. export class LineContainerComponent extends React.Component<ILineContainerComponentProps, {
  994. isExpanded: boolean;
  995. }> {
  996. constructor(props: ILineContainerComponentProps);
  997. switchExpandedState(): void;
  998. renderHeader(): JSX.Element;
  999. render(): JSX.Element;
  1000. }
  1001. }
  1002. declare module GUIEDITOR {
  1003. export class PropertyChangedEvent {
  1004. object: any;
  1005. property: string;
  1006. value: any;
  1007. initialValue: any;
  1008. }
  1009. }
  1010. declare module GUIEDITOR {
  1011. export interface ICheckBoxLineComponentProps {
  1012. label: string;
  1013. target?: any;
  1014. propertyName?: string;
  1015. isSelected?: () => boolean;
  1016. onSelect?: (value: boolean) => void;
  1017. onValueChanged?: () => void;
  1018. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1019. disabled?: boolean;
  1020. }
  1021. export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, {
  1022. isSelected: boolean;
  1023. isDisabled?: boolean;
  1024. }> {
  1025. private static _UniqueIdSeed;
  1026. private _uniqueId;
  1027. private _localChange;
  1028. constructor(props: ICheckBoxLineComponentProps);
  1029. shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: {
  1030. isSelected: boolean;
  1031. isDisabled: boolean;
  1032. }): boolean;
  1033. onChange(): void;
  1034. render(): JSX.Element;
  1035. }
  1036. }
  1037. declare module GUIEDITOR {
  1038. interface IFloatLineComponentProps {
  1039. label: string;
  1040. target: any;
  1041. propertyName: string;
  1042. onChange?: (newValue: number) => void;
  1043. isInteger?: boolean;
  1044. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1045. additionalClass?: string;
  1046. step?: string;
  1047. digits?: number;
  1048. globalState: GlobalState;
  1049. min?: number;
  1050. max?: number;
  1051. smallUI?: boolean;
  1052. onEnter?: (newValue: number) => void;
  1053. }
  1054. export class FloatLineComponent extends React.Component<IFloatLineComponentProps, {
  1055. value: string;
  1056. }> {
  1057. private _localChange;
  1058. private _store;
  1059. private _regExp;
  1060. private _digits;
  1061. constructor(props: IFloatLineComponentProps);
  1062. shouldComponentUpdate(nextProps: IFloatLineComponentProps, nextState: {
  1063. value: string;
  1064. }): boolean;
  1065. raiseOnPropertyChanged(newValue: number, previousValue: number): void;
  1066. updateValue(valueString: string): void;
  1067. render(): JSX.Element;
  1068. }
  1069. }
  1070. declare module GUIEDITOR {
  1071. interface ISliderLineComponentProps {
  1072. label: string;
  1073. target?: any;
  1074. propertyName?: string;
  1075. minimum: number;
  1076. maximum: number;
  1077. step: number;
  1078. directValue?: number;
  1079. useEuler?: boolean;
  1080. onChange?: (value: number) => void;
  1081. onInput?: (value: number) => void;
  1082. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1083. decimalCount?: number;
  1084. globalState: GlobalState;
  1085. }
  1086. export class SliderLineComponent extends React.Component<ISliderLineComponentProps, {
  1087. value: number;
  1088. }> {
  1089. private _localChange;
  1090. constructor(props: ISliderLineComponentProps);
  1091. shouldComponentUpdate(nextProps: ISliderLineComponentProps, nextState: {
  1092. value: number;
  1093. }): boolean;
  1094. onChange(newValueString: any): void;
  1095. onInput(newValueString: any): void;
  1096. prepareDataToRead(value: number): number;
  1097. render(): JSX.Element;
  1098. }
  1099. }
  1100. declare module GUIEDITOR {
  1101. export class GenericPropertyComponent extends React.Component<IPropertyComponentProps> {
  1102. constructor(props: IPropertyComponentProps);
  1103. render(): JSX.Element;
  1104. }
  1105. export class GeneralPropertyTabComponent extends React.Component<IPropertyComponentProps> {
  1106. constructor(props: IPropertyComponentProps);
  1107. render(): JSX.Element;
  1108. }
  1109. export class GenericPropertyTabComponent extends React.Component<IPropertyComponentProps> {
  1110. constructor(props: IPropertyComponentProps);
  1111. forceRebuild(notifiers?: {
  1112. "rebuild"?: boolean;
  1113. "update"?: boolean;
  1114. }): void;
  1115. render(): JSX.Element;
  1116. }
  1117. }
  1118. declare module GUIEDITOR {
  1119. interface INumericInputComponentProps {
  1120. label: string;
  1121. value: number;
  1122. step?: number;
  1123. onChange: (value: number) => void;
  1124. globalState: GlobalState;
  1125. }
  1126. export class NumericInputComponent extends React.Component<INumericInputComponentProps, {
  1127. value: string;
  1128. }> {
  1129. static defaultProps: {
  1130. step: number;
  1131. };
  1132. private _localChange;
  1133. constructor(props: INumericInputComponentProps);
  1134. shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: {
  1135. value: string;
  1136. }): boolean;
  1137. updateValue(evt: any): void;
  1138. render(): JSX.Element;
  1139. }
  1140. }
  1141. declare module GUIEDITOR {
  1142. interface ITextLineComponentProps {
  1143. label?: string;
  1144. value?: string;
  1145. color?: string;
  1146. underline?: boolean;
  1147. onLink?: () => void;
  1148. url?: string;
  1149. ignoreValue?: boolean;
  1150. additionalClass?: string;
  1151. }
  1152. export class TextLineComponent extends React.Component<ITextLineComponentProps> {
  1153. constructor(props: ITextLineComponentProps);
  1154. onLink(): void;
  1155. renderContent(): JSX.Element | null;
  1156. render(): JSX.Element;
  1157. }
  1158. }
  1159. declare module GUIEDITOR {
  1160. export class SliderPropertyTabComponent extends React.Component<IPropertyComponentProps> {
  1161. constructor(props: IPropertyComponentProps);
  1162. private _slider;
  1163. render(): JSX.Element;
  1164. }
  1165. }
  1166. declare module GUIEDITOR {
  1167. export class PropertyGuiLedger {
  1168. static RegisteredControls: {
  1169. [key: string]: React.ComponentClass<IPropertyComponentProps>;
  1170. };
  1171. }
  1172. }
  1173. declare module GUIEDITOR {
  1174. export class GUINode {
  1175. guiControl: Control;
  1176. private _x;
  1177. private _y;
  1178. private _gridAlignedX;
  1179. private _gridAlignedY;
  1180. private _globalState;
  1181. private _onSelectionChangedObserver;
  1182. private _onSelectionBoxMovedObserver;
  1183. private _onUpdateRequiredObserver;
  1184. private _ownerCanvas;
  1185. private _isSelected;
  1186. private _isVisible;
  1187. private _enclosingFrameId;
  1188. get isVisible(): boolean;
  1189. set isVisible(value: boolean);
  1190. get gridAlignedX(): number;
  1191. get gridAlignedY(): number;
  1192. get x(): number;
  1193. set x(value: number);
  1194. get y(): number;
  1195. set y(value: number);
  1196. get width(): number;
  1197. get height(): number;
  1198. get id(): number;
  1199. get name(): string | undefined;
  1200. get isSelected(): boolean;
  1201. get enclosingFrameId(): number;
  1202. set enclosingFrameId(value: number);
  1203. set isSelected(value: boolean);
  1204. constructor(globalState: GlobalState, guiControl: Control);
  1205. cleanAccumulation(useCeil?: boolean): void;
  1206. clicked: boolean;
  1207. _onMove(evt: BABYLON.Vector2, startPos: BABYLON.Vector2): boolean;
  1208. renderProperties(): BABYLON.Nullable<JSX.Element>;
  1209. updateVisual(): void;
  1210. dispose(): void;
  1211. }
  1212. }
  1213. declare module GUIEDITOR {
  1214. export class GlobalState {
  1215. guiTexture: AdvancedDynamicTexture;
  1216. hostElement: HTMLElement;
  1217. hostDocument: HTMLDocument;
  1218. hostWindow: Window;
  1219. onSelectionChangedObservable: BABYLON.Observable<BABYLON.Nullable<GUINode>>;
  1220. onRebuildRequiredObservable: BABYLON.Observable<void>;
  1221. onBuiltObservable: BABYLON.Observable<void>;
  1222. onResetRequiredObservable: BABYLON.Observable<void>;
  1223. onUpdateRequiredObservable: BABYLON.Observable<void>;
  1224. onReOrganizedRequiredObservable: BABYLON.Observable<void>;
  1225. onLogRequiredObservable: BABYLON.Observable<LogEntry>;
  1226. onErrorMessageDialogRequiredObservable: BABYLON.Observable<string>;
  1227. onIsLoadingChanged: BABYLON.Observable<boolean>;
  1228. onSelectionBoxMoved: BABYLON.Observable<DOMRect | ClientRect>;
  1229. onGuiNodeRemovalObservable: BABYLON.Observable<GUINode>;
  1230. backgroundColor: BABYLON.Color4;
  1231. blockKeyboardEvents: boolean;
  1232. controlCamera: boolean;
  1233. workbench: WorkbenchComponent;
  1234. storeEditorData: (serializationObject: any) => void;
  1235. customSave?: {
  1236. label: string;
  1237. action: (data: string) => Promise<void>;
  1238. };
  1239. constructor();
  1240. }
  1241. }
  1242. declare module GUIEDITOR {
  1243. export interface IButtonLineComponentProps {
  1244. data: string;
  1245. tooltip: string;
  1246. }
  1247. export class DraggableLineComponent extends React.Component<IButtonLineComponentProps> {
  1248. constructor(props: IButtonLineComponentProps);
  1249. render(): JSX.Element;
  1250. }
  1251. }
  1252. declare module GUIEDITOR {
  1253. interface IGuiListComponentProps {
  1254. globalState: GlobalState;
  1255. }
  1256. export class GuiListComponent extends React.Component<IGuiListComponentProps, {
  1257. filter: string;
  1258. }> {
  1259. private _onResetRequiredObserver;
  1260. private static _Tooltips;
  1261. constructor(props: IGuiListComponentProps);
  1262. componentWillUnmount(): void;
  1263. filterContent(filter: string): void;
  1264. render(): JSX.Element;
  1265. }
  1266. }
  1267. declare module GUIEDITOR {
  1268. export interface IButtonLineComponentProps {
  1269. label: string;
  1270. onClick: () => void;
  1271. }
  1272. export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
  1273. constructor(props: IButtonLineComponentProps);
  1274. render(): JSX.Element;
  1275. }
  1276. }
  1277. declare module GUIEDITOR {
  1278. interface IFileButtonLineComponentProps {
  1279. label: string;
  1280. onClick: (file: File) => void;
  1281. accept: string;
  1282. }
  1283. export class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
  1284. private static _IDGenerator;
  1285. private _id;
  1286. private uploadInputRef;
  1287. constructor(props: IFileButtonLineComponentProps);
  1288. onChange(evt: any): void;
  1289. render(): JSX.Element;
  1290. }
  1291. }
  1292. declare module GUIEDITOR {
  1293. export class SerializationTools {
  1294. static Deserialize(serializationObject: any, globalState: GlobalState): void;
  1295. }
  1296. }
  1297. declare module GUIEDITOR {
  1298. interface IPropertyTabComponentProps {
  1299. globalState: GlobalState;
  1300. }
  1301. interface IPropertyTabComponentState {
  1302. currentNode: BABYLON.Nullable<GUINode>;
  1303. }
  1304. export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, IPropertyTabComponentState> {
  1305. private _onBuiltObserver;
  1306. constructor(props: IPropertyTabComponentProps);
  1307. componentDidMount(): void;
  1308. componentWillUnmount(): void;
  1309. load(file: File): void;
  1310. loadFrame(file: File): void;
  1311. save(): void;
  1312. customSave(): void;
  1313. saveToSnippetServer(): void;
  1314. loadFromSnippet(): void;
  1315. render(): JSX.Element;
  1316. }
  1317. }
  1318. declare module GUIEDITOR {
  1319. interface IPortalProps {
  1320. globalState: GlobalState;
  1321. }
  1322. export class Portal extends React.Component<IPortalProps> {
  1323. render(): React.ReactPortal;
  1324. }
  1325. }
  1326. declare module GUIEDITOR {
  1327. export class GUINodeTools {
  1328. static CreateControlFromString(data: string): Slider | Checkbox | ColorPicker | Ellipse | Rectangle | Line | TextBlock;
  1329. }
  1330. }
  1331. declare module GUIEDITOR {
  1332. export interface INodeLocationInfo {
  1333. blockId: number;
  1334. x: number;
  1335. y: number;
  1336. }
  1337. export interface IFrameData {
  1338. x: number;
  1339. y: number;
  1340. width: number;
  1341. height: number;
  1342. color: number[];
  1343. name: string;
  1344. isCollapsed: boolean;
  1345. blocks: number[];
  1346. comments: string;
  1347. }
  1348. export interface IEditorData {
  1349. locations: INodeLocationInfo[];
  1350. x: number;
  1351. y: number;
  1352. zoom: number;
  1353. frames?: IFrameData[];
  1354. map?: {
  1355. [key: number]: number;
  1356. };
  1357. }
  1358. }
  1359. declare module GUIEDITOR {
  1360. interface IMessageDialogComponentProps {
  1361. globalState: GlobalState;
  1362. }
  1363. export class MessageDialogComponent extends React.Component<IMessageDialogComponentProps, {
  1364. message: string;
  1365. isError: boolean;
  1366. }> {
  1367. constructor(props: IMessageDialogComponentProps);
  1368. render(): JSX.Element | null;
  1369. }
  1370. }
  1371. declare module GUIEDITOR {
  1372. interface IGraphEditorProps {
  1373. globalState: GlobalState;
  1374. }
  1375. interface IGraphEditorState {
  1376. showPreviewPopUp: boolean;
  1377. }
  1378. export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEditorState> {
  1379. private _workbenchCanvas;
  1380. private _startX;
  1381. private _moveInProgress;
  1382. private _leftWidth;
  1383. private _rightWidth;
  1384. private _blocks;
  1385. private _onWidgetKeyUpPointer;
  1386. private _popUpWindow;
  1387. /**
  1388. * Creates a node and recursivly creates its parent nodes from it's input
  1389. * @param block
  1390. */
  1391. createNodeFromObject(block: Control, recursion?: boolean): BABYLON.Nullable<GUINode>;
  1392. componentDidMount(): void;
  1393. componentWillUnmount(): void;
  1394. constructor(props: IGraphEditorProps);
  1395. pasteSelection(copiedNodes: GUINode[], currentX: number, currentY: number, selectNew?: boolean): GUINode[];
  1396. zoomToFit(): void;
  1397. showWaitScreen(): void;
  1398. hideWaitScreen(): void;
  1399. reOrganize(editorData?: BABYLON.Nullable<IEditorData>, isImportingAFrame?: boolean): void;
  1400. onPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
  1401. onPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
  1402. resizeColumns(evt: React.PointerEvent<HTMLDivElement>, forLeft?: boolean): void;
  1403. buildColumnLayout(): string;
  1404. emitNewBlock(event: React.DragEvent<HTMLDivElement>): void;
  1405. handlePopUp: () => void;
  1406. handleClosingPopUp: () => void;
  1407. createPopupWindow: (title: string, windowVariableName: string, width?: number, height?: number) => Window | null;
  1408. copyStyles: (sourceDoc: HTMLDocument, targetDoc: HTMLDocument) => void;
  1409. fixPopUpStyles: (document: Document) => void;
  1410. render(): JSX.Element;
  1411. }
  1412. }
  1413. declare module GUIEDITOR {
  1414. export class Popup {
  1415. static CreatePopup(title: string, windowVariableName: string, width?: number, height?: number): HTMLDivElement | null;
  1416. private static _CopyStyles;
  1417. }
  1418. }
  1419. declare module GUIEDITOR {
  1420. /**
  1421. * Interface used to specify creation options for the gui editor
  1422. */
  1423. export interface IGUIEditorOptions {
  1424. hostElement?: HTMLElement;
  1425. customSave?: {
  1426. label: string;
  1427. action: (data: string) => Promise<void>;
  1428. };
  1429. customLoadObservable?: BABYLON.Observable<any>;
  1430. }
  1431. /**
  1432. * Class used to create a gui editor
  1433. */
  1434. export class GUIEditor {
  1435. private static _CurrentState;
  1436. /**
  1437. * Show the gui editor
  1438. * @param options defines the options to use to configure the gui editor
  1439. */
  1440. static Show(options: IGUIEditorOptions): void;
  1441. }
  1442. }
  1443. declare module GUIEDITOR {
  1444. interface ILineWithFileButtonComponentProps {
  1445. title: string;
  1446. closed?: boolean;
  1447. label: string;
  1448. iconImage: any;
  1449. onIconClick: (file: File) => void;
  1450. accept: string;
  1451. uploadName?: string;
  1452. }
  1453. export class LineWithFileButtonComponent extends React.Component<ILineWithFileButtonComponentProps, {
  1454. isExpanded: boolean;
  1455. }> {
  1456. private uploadRef;
  1457. constructor(props: ILineWithFileButtonComponentProps);
  1458. onChange(evt: any): void;
  1459. switchExpandedState(): void;
  1460. render(): JSX.Element;
  1461. }
  1462. }
  1463. declare module GUIEDITOR {
  1464. interface ITextInputLineComponentProps {
  1465. label: string;
  1466. globalState: GlobalState;
  1467. target?: any;
  1468. propertyName?: string;
  1469. value?: string;
  1470. multilines?: boolean;
  1471. onChange?: (value: string) => void;
  1472. validator?: (value: string) => boolean;
  1473. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1474. }
  1475. export class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, {
  1476. value: string;
  1477. }> {
  1478. private _localChange;
  1479. constructor(props: ITextInputLineComponentProps);
  1480. shouldComponentUpdate(nextProps: ITextInputLineComponentProps, nextState: {
  1481. value: string;
  1482. }): boolean;
  1483. raiseOnPropertyChanged(newValue: string, previousValue: string): void;
  1484. updateValue(value: string, raisePropertyChanged: boolean): void;
  1485. render(): JSX.Element;
  1486. }
  1487. }
  1488. declare module GUIEDITOR {
  1489. export interface IColorComponentEntryProps {
  1490. value: number;
  1491. label: string;
  1492. max?: number;
  1493. min?: number;
  1494. onChange: (value: number) => void;
  1495. }
  1496. export class ColorComponentEntry extends React.Component<IColorComponentEntryProps> {
  1497. constructor(props: IColorComponentEntryProps);
  1498. updateValue(valueString: string): void;
  1499. render(): JSX.Element;
  1500. }
  1501. }
  1502. declare module GUIEDITOR {
  1503. export interface IHexColorProps {
  1504. value: string;
  1505. expectedLength: number;
  1506. onChange: (value: string) => void;
  1507. }
  1508. export class HexColor extends React.Component<IHexColorProps, {
  1509. hex: string;
  1510. }> {
  1511. constructor(props: IHexColorProps);
  1512. shouldComponentUpdate(nextProps: IHexColorProps, nextState: {
  1513. hex: string;
  1514. }): boolean;
  1515. updateHexValue(valueString: string): void;
  1516. render(): JSX.Element;
  1517. }
  1518. }
  1519. declare module GUIEDITOR {
  1520. /**
  1521. * Interface used to specify creation options for color picker
  1522. */
  1523. export interface IColorPickerProps {
  1524. color: BABYLON.Color3 | BABYLON.Color4;
  1525. debugMode?: boolean;
  1526. onColorChanged?: (color: BABYLON.Color3 | BABYLON.Color4) => void;
  1527. }
  1528. /**
  1529. * Interface used to specify creation options for color picker
  1530. */
  1531. export interface IColorPickerState {
  1532. color: BABYLON.Color3;
  1533. alpha: number;
  1534. }
  1535. /**
  1536. * Class used to create a color picker
  1537. */
  1538. export class ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> {
  1539. private _saturationRef;
  1540. private _hueRef;
  1541. private _isSaturationPointerDown;
  1542. private _isHuePointerDown;
  1543. constructor(props: IColorPickerProps);
  1544. onSaturationPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
  1545. onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
  1546. onSaturationPointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
  1547. onHuePointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
  1548. onHuePointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
  1549. onHuePointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
  1550. private _evaluateSaturation;
  1551. private _evaluateHue;
  1552. componentDidUpdate(): void;
  1553. raiseOnColorChanged(): void;
  1554. render(): JSX.Element;
  1555. }
  1556. }
  1557. declare module GUIEDITOR {
  1558. export interface IBooleanLineComponentProps {
  1559. label: string;
  1560. value: boolean;
  1561. }
  1562. export class BooleanLineComponent extends React.Component<IBooleanLineComponentProps> {
  1563. constructor(props: IBooleanLineComponentProps);
  1564. render(): JSX.Element;
  1565. }
  1566. }
  1567. declare module GUIEDITOR {
  1568. interface IFileMultipleButtonLineComponentProps {
  1569. label: string;
  1570. onClick: (event: any) => void;
  1571. accept: string;
  1572. }
  1573. export class FileMultipleButtonLineComponent extends React.Component<IFileMultipleButtonLineComponentProps> {
  1574. private static _IDGenerator;
  1575. private _id;
  1576. private uploadInputRef;
  1577. constructor(props: IFileMultipleButtonLineComponentProps);
  1578. onChange(evt: any): void;
  1579. render(): JSX.Element;
  1580. }
  1581. }
  1582. declare module GUIEDITOR {
  1583. export interface IIconButtonLineComponentProps {
  1584. icon: string;
  1585. onClick: () => void;
  1586. tooltip: string;
  1587. active?: boolean;
  1588. }
  1589. export class IconButtonLineComponent extends React.Component<IIconButtonLineComponentProps> {
  1590. constructor(props: IIconButtonLineComponentProps);
  1591. render(): JSX.Element;
  1592. }
  1593. }
  1594. declare module GUIEDITOR {
  1595. interface IIndentedTextLineComponentProps {
  1596. value?: string;
  1597. color?: string;
  1598. underline?: boolean;
  1599. onLink?: () => void;
  1600. url?: string;
  1601. additionalClass?: string;
  1602. }
  1603. export class IndentedTextLineComponent extends React.Component<IIndentedTextLineComponentProps> {
  1604. constructor(props: IIndentedTextLineComponentProps);
  1605. onLink(): void;
  1606. renderContent(): JSX.Element;
  1607. render(): JSX.Element;
  1608. }
  1609. }
  1610. declare module GUIEDITOR {
  1611. interface ILinkButtonComponentProps {
  1612. label: string;
  1613. buttonLabel: string;
  1614. url?: string;
  1615. onClick: () => void;
  1616. onIconClick?: () => void;
  1617. }
  1618. export class LinkButtonComponent extends React.Component<ILinkButtonComponentProps> {
  1619. constructor(props: ILinkButtonComponentProps);
  1620. onLink(): void;
  1621. render(): JSX.Element;
  1622. }
  1623. }
  1624. declare module GUIEDITOR {
  1625. interface IMessageLineComponentProps {
  1626. text: string;
  1627. color?: string;
  1628. }
  1629. export class MessageLineComponent extends React.Component<IMessageLineComponentProps> {
  1630. constructor(props: IMessageLineComponentProps);
  1631. render(): JSX.Element;
  1632. }
  1633. }
  1634. declare module GUIEDITOR {
  1635. interface INumericInputComponentProps {
  1636. label: string;
  1637. value: number;
  1638. step?: number;
  1639. onChange: (value: number) => void;
  1640. precision?: number;
  1641. }
  1642. export class NumericInputComponent extends React.Component<INumericInputComponentProps, {
  1643. value: string;
  1644. }> {
  1645. static defaultProps: {
  1646. step: number;
  1647. };
  1648. private _localChange;
  1649. constructor(props: INumericInputComponentProps);
  1650. shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: {
  1651. value: string;
  1652. }): boolean;
  1653. updateValue(evt: any): void;
  1654. onBlur(): void;
  1655. render(): JSX.Element;
  1656. }
  1657. }
  1658. declare module GUIEDITOR {
  1659. interface IRadioButtonLineComponentProps {
  1660. onSelectionChangedObservable: BABYLON.Observable<RadioButtonLineComponent>;
  1661. label: string;
  1662. isSelected: () => boolean;
  1663. onSelect: () => void;
  1664. }
  1665. export class RadioButtonLineComponent extends React.Component<IRadioButtonLineComponentProps, {
  1666. isSelected: boolean;
  1667. }> {
  1668. private _onSelectionChangedObserver;
  1669. constructor(props: IRadioButtonLineComponentProps);
  1670. componentDidMount(): void;
  1671. componentWillUnmount(): void;
  1672. onChange(): void;
  1673. render(): JSX.Element;
  1674. }
  1675. }
  1676. declare module GUIEDITOR {
  1677. interface IValueLineComponentProps {
  1678. label: string;
  1679. value: number;
  1680. color?: string;
  1681. fractionDigits?: number;
  1682. units?: string;
  1683. }
  1684. export class ValueLineComponent extends React.Component<IValueLineComponentProps> {
  1685. constructor(props: IValueLineComponentProps);
  1686. render(): JSX.Element;
  1687. }
  1688. }