babylon.nodeEditor.d.ts 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609
  1. /// <reference types="react" />
  2. declare module NODEEDITOR {
  3. /**
  4. * Port model
  5. */
  6. export class DefaultPortModel extends PortModel {
  7. /**
  8. * If the port is input or output
  9. */
  10. position: string | "input" | "output";
  11. /**
  12. * What the port is connected to
  13. */
  14. connection: BABYLON.Nullable<BABYLON.NodeMaterialConnectionPoint>;
  15. static idCounter: number;
  16. constructor(name: string, type?: string);
  17. syncWithNodeMaterialConnectionPoint(connection: BABYLON.NodeMaterialConnectionPoint): void;
  18. getNodeModel(): DefaultNodeModel;
  19. link(outPort: DefaultPortModel): LinkModel<import("storm-react-diagrams").LinkModelListener>;
  20. getInputFromBlock(): void;
  21. createLinkModel(): LinkModel;
  22. getValue: Function;
  23. static SortInputOutput(a: BABYLON.Nullable<DefaultPortModel>, b: BABYLON.Nullable<DefaultPortModel>): {
  24. input: DefaultPortModel;
  25. output: DefaultPortModel;
  26. } | null;
  27. }
  28. }
  29. declare module NODEEDITOR {
  30. interface ITextLineComponentProps {
  31. label: string;
  32. value: string;
  33. color?: string;
  34. underline?: boolean;
  35. onLink?: () => void;
  36. }
  37. export class TextLineComponent extends React.Component<ITextLineComponentProps> {
  38. constructor(props: ITextLineComponentProps);
  39. onLink(): void;
  40. renderContent(): JSX.Element;
  41. render(): JSX.Element;
  42. }
  43. }
  44. declare module NODEEDITOR {
  45. /**
  46. * Generic node model which stores information about a node editor block
  47. */
  48. export class GenericNodeModel extends DefaultNodeModel {
  49. /**
  50. * Labels for the block
  51. */
  52. header: string;
  53. /**
  54. * BABYLON.Vector2 for the node if it exists
  55. */
  56. vector2: BABYLON.Nullable<BABYLON.Vector2>;
  57. /**
  58. * BABYLON.Vector3 for the node if it exists
  59. */
  60. vector3: BABYLON.Nullable<BABYLON.Vector3>;
  61. /**
  62. * BABYLON.Vector4 for the node if it exists
  63. */
  64. vector4: BABYLON.Nullable<BABYLON.Vector4>;
  65. /**
  66. * BABYLON.Matrix for the node if it exists
  67. */
  68. matrix: BABYLON.Nullable<BABYLON.Matrix>;
  69. /**
  70. * Constructs the node model
  71. */
  72. constructor();
  73. prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor, filterInputs: string[]): void;
  74. renderProperties(globalState: GlobalState): JSX.Element;
  75. }
  76. }
  77. declare module NODEEDITOR {
  78. /**
  79. * GenericNodeWidgetProps
  80. */
  81. export interface GenericNodeWidgetProps {
  82. node: BABYLON.Nullable<GenericNodeModel>;
  83. globalState: GlobalState;
  84. }
  85. /**
  86. * GenericNodeWidgetState
  87. */
  88. export interface GenericNodeWidgetState {
  89. }
  90. /**
  91. * Used to display a node block for the node editor
  92. */
  93. export class GenericNodeWidget extends React.Component<GenericNodeWidgetProps, GenericNodeWidgetState> {
  94. /**
  95. * Creates a GenericNodeWidget
  96. * @param props
  97. */
  98. constructor(props: GenericNodeWidgetProps);
  99. render(): JSX.Element;
  100. }
  101. }
  102. declare module NODEEDITOR {
  103. /**
  104. * Node factory which creates editor nodes
  105. */
  106. export class GenericNodeFactory extends SRD.AbstractNodeFactory {
  107. private _globalState;
  108. /**
  109. * Constructs a GenericNodeFactory
  110. */
  111. constructor(globalState: GlobalState);
  112. /**
  113. * Generates a node widget
  114. * @param diagramEngine diagram engine
  115. * @param node node to generate
  116. * @returns node widget jsx
  117. */
  118. generateReactWidget(diagramEngine: SRD.DiagramEngine, node: GenericNodeModel): JSX.Element;
  119. /**
  120. * Gets a new instance of a node model
  121. * @returns generic node model
  122. */
  123. getNewInstance(): GenericNodeModel;
  124. }
  125. }
  126. declare module NODEEDITOR {
  127. interface ILineContainerComponentProps {
  128. title: string;
  129. children: any[] | any;
  130. closed?: boolean;
  131. }
  132. export class LineContainerComponent extends React.Component<ILineContainerComponentProps, {
  133. isExpanded: boolean;
  134. }> {
  135. private static _InMemoryStorage;
  136. constructor(props: ILineContainerComponentProps);
  137. switchExpandedState(): void;
  138. renderHeader(): JSX.Element;
  139. render(): JSX.Element;
  140. }
  141. }
  142. declare module NODEEDITOR {
  143. export interface IButtonLineComponentProps {
  144. label: string;
  145. onClick: () => void;
  146. }
  147. export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
  148. constructor(props: IButtonLineComponentProps);
  149. render(): JSX.Element;
  150. }
  151. }
  152. declare module NODEEDITOR {
  153. interface INodeListComponentProps {
  154. globalState: GlobalState;
  155. onAddValueNode: (b: string) => void;
  156. onAddNodeFromClass: (ObjectClass: typeof BABYLON.NodeMaterialBlock) => void;
  157. }
  158. export class NodeListComponent extends React.Component<INodeListComponentProps> {
  159. render(): JSX.Element;
  160. }
  161. }
  162. declare module NODEEDITOR {
  163. interface IPropertyTabComponentProps {
  164. globalState: GlobalState;
  165. }
  166. export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, {
  167. currentNode: BABYLON.Nullable<DefaultNodeModel>;
  168. }> {
  169. constructor(props: IPropertyTabComponentProps);
  170. componentWillMount(): void;
  171. render(): JSX.Element;
  172. }
  173. }
  174. declare module NODEEDITOR {
  175. interface IPortalProps {
  176. globalState: GlobalState;
  177. }
  178. export class Portal extends React.Component<IPortalProps> {
  179. render(): React.ReactPortal;
  180. }
  181. }
  182. declare module NODEEDITOR {
  183. interface IFileButtonLineComponentProps {
  184. label: string;
  185. onClick: (file: File) => void;
  186. accept: string;
  187. }
  188. export class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
  189. constructor(props: IFileButtonLineComponentProps);
  190. onChange(evt: any): void;
  191. render(): JSX.Element;
  192. }
  193. }
  194. declare module NODEEDITOR {
  195. interface ITexturePropertyTabComponentProps {
  196. globalState: GlobalState;
  197. node: TextureNodeModel;
  198. }
  199. export class TexturePropertyTabComponent extends React.Component<ITexturePropertyTabComponentProps> {
  200. /**
  201. * Replaces the texture of the node
  202. * @param file the file of the texture to use
  203. */
  204. replaceTexture(file: File): void;
  205. render(): JSX.Element;
  206. }
  207. }
  208. declare module NODEEDITOR {
  209. /**
  210. * BABYLON.Texture node model which stores information about a node editor block
  211. */
  212. export class TextureNodeModel extends DefaultNodeModel {
  213. /**
  214. * BABYLON.Texture for the node if it exists
  215. */
  216. texture: BABYLON.Nullable<BABYLON.Texture>;
  217. /**
  218. * Constructs the node model
  219. */
  220. constructor();
  221. renderProperties(globalState: GlobalState): JSX.Element;
  222. prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor, filterInputs: string[]): void;
  223. }
  224. }
  225. declare module NODEEDITOR {
  226. interface ITextureLineComponentProps {
  227. texture: BABYLON.BaseTexture;
  228. width: number;
  229. height: number;
  230. globalState?: any;
  231. hideChannelSelect?: boolean;
  232. }
  233. export class TextureLineComponent extends React.Component<ITextureLineComponentProps, {
  234. displayRed: boolean;
  235. displayGreen: boolean;
  236. displayBlue: boolean;
  237. displayAlpha: boolean;
  238. face: number;
  239. }> {
  240. constructor(props: ITextureLineComponentProps);
  241. shouldComponentUpdate(nextProps: ITextureLineComponentProps, nextState: {
  242. displayRed: boolean;
  243. displayGreen: boolean;
  244. displayBlue: boolean;
  245. displayAlpha: boolean;
  246. face: number;
  247. }): boolean;
  248. componentDidMount(): void;
  249. componentDidUpdate(): void;
  250. updatePreview(): void;
  251. render(): JSX.Element;
  252. }
  253. }
  254. declare module NODEEDITOR {
  255. /**
  256. * GenericNodeWidgetProps
  257. */
  258. export interface TextureNodeWidgetProps {
  259. node: BABYLON.Nullable<TextureNodeModel>;
  260. globalState: GlobalState;
  261. }
  262. /**
  263. * Used to display a node block for the node editor
  264. */
  265. export class TextureNodeWidget extends React.Component<TextureNodeWidgetProps> {
  266. /**
  267. * Creates a GenericNodeWidget
  268. * @param props
  269. */
  270. constructor(props: TextureNodeWidgetProps);
  271. render(): JSX.Element;
  272. }
  273. }
  274. declare module NODEEDITOR {
  275. /**
  276. * Node factory which creates editor nodes
  277. */
  278. export class TextureNodeFactory extends SRD.AbstractNodeFactory {
  279. private _globalState;
  280. /**
  281. * Constructs a TextureNodeFactory
  282. */
  283. constructor(globalState: GlobalState);
  284. /**
  285. * Generates a node widget
  286. * @param diagramEngine diagram engine
  287. * @param node node to generate
  288. * @returns node widget jsx
  289. */
  290. generateReactWidget(diagramEngine: SRD.DiagramEngine, node: TextureNodeModel): JSX.Element;
  291. /**
  292. * Gets a new instance of a node model
  293. * @returns texture node model
  294. */
  295. getNewInstance(): TextureNodeModel;
  296. }
  297. }
  298. declare module NODEEDITOR {
  299. interface INumericInputComponentProps {
  300. label: string;
  301. value: number;
  302. step?: number;
  303. onChange: (value: number) => void;
  304. }
  305. export class NumericInputComponent extends React.Component<INumericInputComponentProps, {
  306. value: string;
  307. }> {
  308. static defaultProps: {
  309. step: number;
  310. };
  311. private _localChange;
  312. constructor(props: INumericInputComponentProps);
  313. shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: {
  314. value: string;
  315. }): boolean;
  316. updateValue(evt: any): void;
  317. render(): JSX.Element;
  318. }
  319. }
  320. declare module NODEEDITOR {
  321. export class PropertyChangedEvent {
  322. object: any;
  323. property: string;
  324. value: any;
  325. initialValue: any;
  326. }
  327. }
  328. declare module NODEEDITOR {
  329. interface IVector2LineComponentProps {
  330. label: string;
  331. target: any;
  332. propertyName: string;
  333. step?: number;
  334. onChange?: (newvalue: BABYLON.Vector2) => void;
  335. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  336. }
  337. export class Vector2LineComponent extends React.Component<IVector2LineComponentProps, {
  338. isExpanded: boolean;
  339. value: BABYLON.Vector2;
  340. }> {
  341. static defaultProps: {
  342. step: number;
  343. };
  344. private _localChange;
  345. constructor(props: IVector2LineComponentProps);
  346. shouldComponentUpdate(nextProps: IVector2LineComponentProps, nextState: {
  347. isExpanded: boolean;
  348. value: BABYLON.Vector2;
  349. }): boolean;
  350. switchExpandState(): void;
  351. raiseOnPropertyChanged(previousValue: BABYLON.Vector2): void;
  352. updateStateX(value: number): void;
  353. updateStateY(value: number): void;
  354. render(): JSX.Element;
  355. }
  356. }
  357. declare module NODEEDITOR {
  358. interface IVector2PropertyTabComponentProps {
  359. globalState: GlobalState;
  360. connection: BABYLON.NodeMaterialConnectionPoint;
  361. }
  362. export class Vector2PropertyTabComponent extends React.Component<IVector2PropertyTabComponentProps> {
  363. render(): JSX.Element;
  364. }
  365. }
  366. declare module NODEEDITOR {
  367. interface IVector3LineComponentProps {
  368. label: string;
  369. target: any;
  370. propertyName: string;
  371. step?: number;
  372. onChange?: (newvalue: BABYLON.Vector3) => void;
  373. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  374. }
  375. export class Vector3LineComponent extends React.Component<IVector3LineComponentProps, {
  376. isExpanded: boolean;
  377. value: BABYLON.Vector3;
  378. }> {
  379. static defaultProps: {
  380. step: number;
  381. };
  382. private _localChange;
  383. constructor(props: IVector3LineComponentProps);
  384. shouldComponentUpdate(nextProps: IVector3LineComponentProps, nextState: {
  385. isExpanded: boolean;
  386. value: BABYLON.Vector3;
  387. }): boolean;
  388. switchExpandState(): void;
  389. raiseOnPropertyChanged(previousValue: BABYLON.Vector3): void;
  390. updateVector3(): void;
  391. updateStateX(value: number): void;
  392. updateStateY(value: number): void;
  393. updateStateZ(value: number): void;
  394. render(): JSX.Element;
  395. }
  396. }
  397. declare module NODEEDITOR {
  398. interface IVector3PropertyTabComponentProps {
  399. globalState: GlobalState;
  400. connection: BABYLON.NodeMaterialConnectionPoint;
  401. }
  402. export class Vector3PropertyTabComponent extends React.Component<IVector3PropertyTabComponentProps> {
  403. render(): JSX.Element;
  404. }
  405. }
  406. declare module NODEEDITOR {
  407. export interface ICheckBoxLineComponentProps {
  408. label: string;
  409. target?: any;
  410. propertyName?: string;
  411. isSelected?: () => boolean;
  412. onSelect?: (value: boolean) => void;
  413. onValueChanged?: () => void;
  414. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  415. }
  416. export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, {
  417. isSelected: boolean;
  418. }> {
  419. private static _UniqueIdSeed;
  420. private _uniqueId;
  421. private _localChange;
  422. constructor(props: ICheckBoxLineComponentProps);
  423. shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: {
  424. isSelected: boolean;
  425. }): boolean;
  426. onChange(): void;
  427. render(): JSX.Element;
  428. }
  429. }
  430. declare module NODEEDITOR {
  431. class ListLineOption {
  432. label: string;
  433. value: number;
  434. }
  435. interface IOptionsLineComponentProps {
  436. label: string;
  437. target: any;
  438. propertyName: string;
  439. options: ListLineOption[];
  440. noDirectUpdate?: boolean;
  441. onSelect?: (value: number) => void;
  442. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  443. }
  444. export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
  445. value: number;
  446. }> {
  447. private _localChange;
  448. constructor(props: IOptionsLineComponentProps);
  449. shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: {
  450. value: number;
  451. }): boolean;
  452. raiseOnPropertyChanged(newValue: number, previousValue: number): void;
  453. updateValue(valueString: string): void;
  454. render(): JSX.Element;
  455. }
  456. }
  457. declare module NODEEDITOR {
  458. interface IInputPropertyTabComponentProps {
  459. globalState: GlobalState;
  460. inputNode: InputNodeModel;
  461. }
  462. export class InputPropertyTabComponentProps extends React.Component<IInputPropertyTabComponentProps> {
  463. constructor(props: IInputPropertyTabComponentProps);
  464. renderValue(globalState: GlobalState): JSX.Element | null;
  465. setDefaultValue(): void;
  466. render(): JSX.Element;
  467. }
  468. }
  469. declare module NODEEDITOR {
  470. /**
  471. * Generic node model which stores information about a node editor block
  472. */
  473. export class InputNodeModel extends DefaultNodeModel {
  474. connection?: BABYLON.NodeMaterialConnectionPoint;
  475. /**
  476. * Constructs the node model
  477. */
  478. constructor();
  479. renderProperties(globalState: GlobalState): JSX.Element | null;
  480. }
  481. }
  482. declare module NODEEDITOR {
  483. /**
  484. * GenericNodeWidgetProps
  485. */
  486. export interface InputNodeWidgetProps {
  487. node: BABYLON.Nullable<InputNodeModel>;
  488. globalState: GlobalState;
  489. }
  490. /**
  491. * Used to display a node block for the node editor
  492. */
  493. export class InputNodeWidget extends React.Component<InputNodeWidgetProps> {
  494. /**
  495. * Creates a GenericNodeWidget
  496. * @param props
  497. */
  498. constructor(props: InputNodeWidgetProps);
  499. render(): JSX.Element;
  500. }
  501. }
  502. declare module NODEEDITOR {
  503. /**
  504. * Node factory which creates editor nodes
  505. */
  506. export class InputNodeFactory extends SRD.AbstractNodeFactory {
  507. private _globalState;
  508. /**
  509. * Constructs a GenericNodeFactory
  510. */
  511. constructor(globalState: GlobalState);
  512. /**
  513. * Generates a node widget
  514. * @param diagramEngine diagram engine
  515. * @param node node to generate
  516. * @returns node widget jsx
  517. */
  518. generateReactWidget(diagramEngine: SRD.DiagramEngine, node: InputNodeModel): JSX.Element;
  519. /**
  520. * Gets a new instance of a node model
  521. * @returns input node model
  522. */
  523. getNewInstance(): InputNodeModel;
  524. }
  525. }
  526. declare module NODEEDITOR {
  527. interface IGraphEditorProps {
  528. globalState: GlobalState;
  529. }
  530. export class NodeCreationOptions {
  531. column: number;
  532. nodeMaterialBlock?: BABYLON.NodeMaterialBlock;
  533. type?: string;
  534. connection?: BABYLON.NodeMaterialConnectionPoint;
  535. }
  536. export class GraphEditor extends React.Component<IGraphEditorProps> {
  537. private _engine;
  538. private _model;
  539. private _nodes;
  540. /**
  541. * Current row/column position used when adding new nodes
  542. */
  543. private _rowPos;
  544. /**
  545. * Creates a node and recursivly creates its parent nodes from it's input
  546. * @param nodeMaterialBlock
  547. */
  548. createNodeFromObject(options: NodeCreationOptions): DefaultNodeModel;
  549. componentDidMount(): void;
  550. componentWillUnmount(): void;
  551. constructor(props: IGraphEditorProps);
  552. addNodeFromClass(ObjectClass: typeof BABYLON.NodeMaterialBlock): DefaultNodeModel;
  553. addValueNode(type: string, column?: number, connection?: BABYLON.NodeMaterialConnectionPoint): DefaultNodeModel;
  554. render(): JSX.Element;
  555. }
  556. }
  557. declare module NODEEDITOR {
  558. /**
  559. * Generic node model which stores information about a node editor block
  560. */
  561. export class DefaultNodeModel extends NodeModel {
  562. /**
  563. * The babylon block this node represents
  564. */
  565. block: BABYLON.Nullable<BABYLON.NodeMaterialBlock>;
  566. ports: {
  567. [s: string]: DefaultPortModel;
  568. };
  569. /**
  570. * Constructs the node model
  571. */
  572. constructor(key: string);
  573. prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor, filterInputs: string[]): void;
  574. renderProperties(globalState: GlobalState): JSX.Element | null;
  575. }
  576. }
  577. declare module NODEEDITOR {
  578. export class GlobalState {
  579. nodeMaterial?: BABYLON.NodeMaterial;
  580. hostElement: HTMLElement;
  581. hostDocument: HTMLDocument;
  582. onSelectionChangedObservable: BABYLON.Observable<BABYLON.Nullable<DefaultNodeModel>>;
  583. onRebuildRequiredObservable: BABYLON.Observable<void>;
  584. }
  585. }
  586. declare module NODEEDITOR {
  587. export class Popup {
  588. static CreatePopup(title: string, windowVariableName: string, width?: number, height?: number): HTMLDivElement | null;
  589. private static _CopyStyles;
  590. }
  591. }
  592. declare module NODEEDITOR {
  593. /**
  594. * Interface used to specify creation options for the node editor
  595. */
  596. export interface INodeEditorOptions {
  597. nodeMaterial: BABYLON.NodeMaterial;
  598. }
  599. /**
  600. * Class used to create a node editor
  601. */
  602. export class NodeEditor {
  603. /**
  604. * Show the node editor
  605. * @param options defines the options to use to configure the node editor
  606. */
  607. static Show(options: INodeEditorOptions): void;
  608. }
  609. }