Nightly

dist/preview release/inspector/babylon.inspector.bundle.max.js

@@ -7,7 +7,7 @@
 		exports["babylonjs-inspector"] = factory(require("babylonjs-gui"), require("babylonjs-loaders"), require("babylonjs-serializers"), require("babylonjs"));
 	else
 		root["INSPECTOR"] = factory(root["BABYLON"]["GUI"], root["BABYLON"], root["BABYLON"], root["BABYLON"]);
-})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_gui_2D_controls_image__, __WEBPACK_EXTERNAL_MODULE_babylonjs_loaders_glTF_index__, __WEBPACK_EXTERNAL_MODULE_babylonjs_serializers_glTF_2_0_index__, __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_observable__) {
+})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_gui_2D_adtInstrumentation__, __WEBPACK_EXTERNAL_MODULE_babylonjs_loaders_glTF_index__, __WEBPACK_EXTERNAL_MODULE_babylonjs_serializers_glTF_2_0_index__, __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_observable__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -36153,7 +36153,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../lineContainerComponent */ "./components/actionTabs/lineContainerComponent.tsx");
 /* harmony import */ var _lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../lines/textLineComponent */ "./components/actionTabs/lines/textLineComponent.tsx");
-/* harmony import */ var babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! babylonjs-gui/2D/controls/control */ "babylonjs-gui/2D/controls/image");
+/* harmony import */ var babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! babylonjs-gui/2D/controls/control */ "babylonjs-gui/2D/adtInstrumentation");
 /* harmony import */ var babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../lines/sliderLineComponent */ "./components/actionTabs/lines/sliderLineComponent.tsx");
 /* harmony import */ var _lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../lines/floatLineComponent */ "./components/actionTabs/lines/floatLineComponent.tsx");
@@ -36458,7 +36458,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./commonControlPropertyGridComponent */ "./components/actionTabs/tabs/propertyGrids/gui/commonControlPropertyGridComponent.tsx");
 /* harmony import */ var _lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../lineContainerComponent */ "./components/actionTabs/lineContainerComponent.tsx");
-/* harmony import */ var babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! babylonjs-gui/2D/controls/image */ "babylonjs-gui/2D/controls/image");
+/* harmony import */ var babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! babylonjs-gui/2D/controls/image */ "babylonjs-gui/2D/adtInstrumentation");
 /* harmony import */ var babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../lines/floatLineComponent */ "./components/actionTabs/lines/floatLineComponent.tsx");
 /* harmony import */ var _lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../lines/checkBoxLineComponent */ "./components/actionTabs/lines/checkBoxLineComponent.tsx");
@@ -36872,7 +36872,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../node_modules/react/index.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./commonControlPropertyGridComponent */ "./components/actionTabs/tabs/propertyGrids/gui/commonControlPropertyGridComponent.tsx");
-/* harmony import */ var babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! babylonjs-gui/2D/controls/textBlock */ "babylonjs-gui/2D/controls/image");
+/* harmony import */ var babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! babylonjs-gui/2D/controls/textBlock */ "babylonjs-gui/2D/adtInstrumentation");
 /* harmony import */ var babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../lineContainerComponent */ "./components/actionTabs/lineContainerComponent.tsx");
 /* harmony import */ var _lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../lines/textInputLineComponent */ "./components/actionTabs/lines/textInputLineComponent.tsx");
@@ -38009,7 +38009,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../lines/optionsLineComponent */ "./components/actionTabs/lines/optionsLineComponent.tsx");
 /* harmony import */ var _lines_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../lines/fileButtonLineComponent */ "./components/actionTabs/lines/fileButtonLineComponent.tsx");
 /* harmony import */ var _lines_valueLineComponent__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../../lines/valueLineComponent */ "./components/actionTabs/lines/valueLineComponent.tsx");
-/* harmony import */ var babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! babylonjs-gui/2D/adtInstrumentation */ "babylonjs-gui/2D/controls/image");
+/* harmony import */ var babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! babylonjs-gui/2D/adtInstrumentation */ "babylonjs-gui/2D/adtInstrumentation");
 /* harmony import */ var babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12__);
 /* harmony import */ var _customPropertyGridComponent__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../customPropertyGridComponent */ "./components/actionTabs/tabs/propertyGrids/customPropertyGridComponent.tsx");
 
@@ -42699,14 +42699,14 @@ var Tools = /** @class */ (function () {
 
 /***/ }),
 
-/***/ "babylonjs-gui/2D/controls/image":
+/***/ "babylonjs-gui/2D/adtInstrumentation":
 /*!************************************************************************************************************************!*\
   !*** external {"root":["BABYLON","GUI"],"commonjs":"babylonjs-gui","commonjs2":"babylonjs-gui","amd":"babylonjs-gui"} ***!
   \************************************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_gui_2D_controls_image__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_gui_2D_adtInstrumentation__;
 
 /***/ }),
 

dist/preview release/nodeEditor/babylon.nodeEditor.d.ts

@@ -9,33 +9,6 @@ declare module NODEEDITOR {
     }
 }
 declare module NODEEDITOR {
-    /**
-     * Port model
-     */
-    export class DefaultPortModel extends PortModel {
-        /**
-         * If the port is input or output
-         */
-        position: string | "input" | "output";
-        /**
-         * What the port is connected to
-         */
-        connection: BABYLON.Nullable<BABYLON.NodeMaterialConnectionPoint>;
-        defaultValue: any;
-        static idCounter: number;
-        constructor(name: string, type?: string);
-        canLinkToPort(port: DefaultPortModel): boolean;
-        syncWithNodeMaterialConnectionPoint(connection: BABYLON.NodeMaterialConnectionPoint): void;
-        getNodeModel(): DefaultNodeModel;
-        link(outPort: DefaultPortModel): LinkModel<import("storm-react-diagrams").LinkModelListener>;
-        createLinkModel(): LinkModel;
-        static SortInputOutput(a: BABYLON.Nullable<DefaultPortModel>, b: BABYLON.Nullable<DefaultPortModel>): {
-            input: DefaultPortModel;
-            output: DefaultPortModel;
-        } | null;
-    }
-}
-declare module NODEEDITOR {
     interface ITextLineComponentProps {
         label: string;
         value: string;
@@ -126,6 +99,39 @@ declare module NODEEDITOR {
 }
 declare module NODEEDITOR {
     /**
+     * Port model
+     */
+    export class DefaultPortModel extends PortModel {
+        /**
+         * If the port is input or output
+         */
+        position: string | "input" | "output";
+        /**
+         * What the port is connected to
+         */
+        connection: BABYLON.Nullable<BABYLON.NodeMaterialConnectionPoint>;
+        defaultValue: any;
+        static idCounter: number;
+        constructor(name: string, type?: string);
+        canLinkToPort(port: DefaultPortModel): boolean;
+        syncWithNodeMaterialConnectionPoint(connection: BABYLON.NodeMaterialConnectionPoint): void;
+        getNodeModel(): DefaultNodeModel;
+        link(outPort: DefaultPortModel): LinkModel<import("storm-react-diagrams").LinkModelListener>;
+        createLinkModel(): LinkModel;
+        static SortInputOutput(a: BABYLON.Nullable<DefaultPortModel>, b: BABYLON.Nullable<DefaultPortModel>): {
+            input: DefaultPortModel;
+            output: DefaultPortModel;
+        } | null;
+    }
+}
+declare module NODEEDITOR {
+    export class PortHelper {
+        static GenerateOutputPorts(node: BABYLON.Nullable<DefaultNodeModel>, ignoreLabel: boolean): JSX.Element[];
+        static GenerateInputPorts(node: BABYLON.Nullable<DefaultNodeModel>, includeOnly?: string[]): JSX.Element[];
+    }
+}
+declare module NODEEDITOR {
+    /**
      * GenericNodeWidgetProps
      */
     export interface GenericNodeWidgetProps {
@@ -175,10 +181,9 @@ declare module NODEEDITOR {
 }
 declare module NODEEDITOR {
     export interface IButtonLineComponentProps {
-        label: string;
-        onClick: () => void;
+        data: string;
     }
-    export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
+    export class DraggableLineComponent extends React.Component<IButtonLineComponentProps> {
         constructor(props: IButtonLineComponentProps);
         render(): JSX.Element;
     }
@@ -186,14 +191,22 @@ declare module NODEEDITOR {
 declare module NODEEDITOR {
     interface INodeListComponentProps {
         globalState: GlobalState;
-        onAddValueNode: (b: string) => void;
-        onAddNodeFromClass: (ObjectClass: typeof BABYLON.NodeMaterialBlock) => void;
     }
     export class NodeListComponent extends React.Component<INodeListComponentProps> {
         render(): JSX.Element;
     }
 }
 declare module NODEEDITOR {
+    export interface IButtonLineComponentProps {
+        label: string;
+        onClick: () => void;
+    }
+    export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
+        constructor(props: IButtonLineComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module NODEEDITOR {
     interface IPropertyTabComponentProps {
         globalState: GlobalState;
     }
@@ -581,7 +594,6 @@ declare module NODEEDITOR {
      * Generic node model which stores information about a node editor block
      */
     export class InputNodeModel extends DefaultNodeModel {
-        outputType: BABYLON.NodeMaterialBlockConnectionPointTypes;
         readonly inputBlock: BABYLON.InputBlock;
         /**
          * Constructs the node model
@@ -608,7 +620,7 @@ declare module NODEEDITOR {
          */
         constructor(props: InputNodeWidgetProps);
         renderValue(value: string): JSX.Element | null;
-        render(): JSX.Element;
+        render(): JSX.Element | null;
     }
 }
 declare module NODEEDITOR {
@@ -729,7 +741,6 @@ declare module NODEEDITOR {
         globalState: GlobalState;
     }
     export class NodeCreationOptions {
-        column: number;
         nodeMaterialBlock: BABYLON.NodeMaterialBlock;
         type?: string;
         connection?: BABYLON.NodeMaterialConnectionPoint;
@@ -741,10 +752,6 @@ declare module NODEEDITOR {
         /** @hidden */
         _toAdd: LinkModel[] | null;
         /**
-         * Current row/column position used when adding new nodes
-         */
-        private _rowPos;
-        /**
          * Creates a node and recursivly creates its parent nodes from it's input
          * @param nodeMaterialBlock
          */
@@ -752,10 +759,23 @@ declare module NODEEDITOR {
         componentDidMount(): void;
         componentWillUnmount(): void;
         constructor(props: IGraphEditorProps);
+        distributeGraph(): dagre.Node[];
+        mapElements(): {
+            id: string;
+            metadata: {
+                id: string;
+                width: number;
+                height: number;
+            };
+        }[];
+        mapEdges(): {
+            from: import("storm-react-diagrams").NodeModel;
+            to: import("storm-react-diagrams").NodeModel;
+        }[];
         buildMaterial(): void;
         build(): void;
-        addNodeFromClass(ObjectClass: typeof BABYLON.NodeMaterialBlock): DefaultNodeModel;
-        addValueNode(type: string, column?: number, connection?: BABYLON.NodeMaterialConnectionPoint): DefaultNodeModel;
+        reOrganize(): void;
+        addValueNode(type: string): DefaultNodeModel;
         private _startX;
         private _moveInProgress;
         private _leftWidth;
@@ -764,6 +784,7 @@ declare module NODEEDITOR {
         onPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
         resizeColumns(evt: React.PointerEvent<HTMLDivElement>, forLeft?: boolean): void;
         buildColumnLayout(): string;
+        emitNewBlock(event: React.DragEvent<HTMLDivElement>): void;
         render(): JSX.Element;
     }
 }
@@ -797,6 +818,7 @@ declare module NODEEDITOR {
         onResetRequiredObservable: BABYLON.Observable<void>;
         onUpdateRequiredObservable: BABYLON.Observable<void>;
         onZoomToFitRequiredObservable: BABYLON.Observable<void>;
+        onReOrganizedRequiredObservable: BABYLON.Observable<void>;
         onLogRequiredObservable: BABYLON.Observable<LogEntry>;
     }
 }

dist/preview release/nodeEditor/babylon.nodeEditor.module.d.ts

@@ -8,37 +8,6 @@ declare module "babylonjs-node-editor/dataStorage" {
         static StoreNumber(key: string, value: number): void;
     }
 }
-declare module "babylonjs-node-editor/components/diagram/defaultPortModel" {
-    import { LinkModel, PortModel } from "storm-react-diagrams";
-    import { Nullable } from 'babylonjs/types';
-    import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
-    import { DefaultNodeModel } from "babylonjs-node-editor/components/diagram/defaultNodeModel";
-    /**
-     * Port model
-     */
-    export class DefaultPortModel extends PortModel {
-        /**
-         * If the port is input or output
-         */
-        position: string | "input" | "output";
-        /**
-         * What the port is connected to
-         */
-        connection: Nullable<NodeMaterialConnectionPoint>;
-        defaultValue: any;
-        static idCounter: number;
-        constructor(name: string, type?: string);
-        canLinkToPort(port: DefaultPortModel): boolean;
-        syncWithNodeMaterialConnectionPoint(connection: NodeMaterialConnectionPoint): void;
-        getNodeModel(): DefaultNodeModel;
-        link(outPort: DefaultPortModel): LinkModel<import("storm-react-diagrams").LinkModelListener>;
-        createLinkModel(): LinkModel;
-        static SortInputOutput(a: Nullable<DefaultPortModel>, b: Nullable<DefaultPortModel>): {
-            input: DefaultPortModel;
-            output: DefaultPortModel;
-        } | null;
-    }
-}
 declare module "babylonjs-node-editor/sharedComponents/textLineComponent" {
     import * as React from "react";
     interface ITextLineComponentProps {
@@ -139,6 +108,45 @@ declare module "babylonjs-node-editor/components/diagram/generic/genericNodeMode
         renderProperties(globalState: GlobalState): JSX.Element;
     }
 }
+declare module "babylonjs-node-editor/components/diagram/defaultPortModel" {
+    import { LinkModel, PortModel } from "storm-react-diagrams";
+    import { Nullable } from 'babylonjs/types';
+    import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
+    import { DefaultNodeModel } from "babylonjs-node-editor/components/diagram/defaultNodeModel";
+    /**
+     * Port model
+     */
+    export class DefaultPortModel extends PortModel {
+        /**
+         * If the port is input or output
+         */
+        position: string | "input" | "output";
+        /**
+         * What the port is connected to
+         */
+        connection: Nullable<NodeMaterialConnectionPoint>;
+        defaultValue: any;
+        static idCounter: number;
+        constructor(name: string, type?: string);
+        canLinkToPort(port: DefaultPortModel): boolean;
+        syncWithNodeMaterialConnectionPoint(connection: NodeMaterialConnectionPoint): void;
+        getNodeModel(): DefaultNodeModel;
+        link(outPort: DefaultPortModel): LinkModel<import("storm-react-diagrams").LinkModelListener>;
+        createLinkModel(): LinkModel;
+        static SortInputOutput(a: Nullable<DefaultPortModel>, b: Nullable<DefaultPortModel>): {
+            input: DefaultPortModel;
+            output: DefaultPortModel;
+        } | null;
+    }
+}
+declare module "babylonjs-node-editor/components/diagram/portHelper" {
+    import { DefaultNodeModel } from "babylonjs-node-editor/components/diagram/defaultNodeModel";
+    import { Nullable } from 'babylonjs/types';
+    export class PortHelper {
+        static GenerateOutputPorts(node: Nullable<DefaultNodeModel>, ignoreLabel: boolean): JSX.Element[];
+        static GenerateInputPorts(node: Nullable<DefaultNodeModel>, includeOnly?: string[]): JSX.Element[];
+    }
+}
 declare module "babylonjs-node-editor/components/diagram/generic/genericNodeWidget" {
     import * as React from "react";
     import { Nullable } from 'babylonjs/types';
@@ -195,13 +203,12 @@ declare module "babylonjs-node-editor/components/diagram/generic/genericNodeFact
         getNewInstance(): GenericNodeModel;
     }
 }
-declare module "babylonjs-node-editor/sharedComponents/buttonLineComponent" {
+declare module "babylonjs-node-editor/sharedComponents/draggableLineComponent" {
     import * as React from "react";
     export interface IButtonLineComponentProps {
-        label: string;
-        onClick: () => void;
+        data: string;
     }
-    export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
+    export class DraggableLineComponent extends React.Component<IButtonLineComponentProps> {
         constructor(props: IButtonLineComponentProps);
         render(): JSX.Element;
     }
@@ -209,16 +216,24 @@ declare module "babylonjs-node-editor/sharedComponents/buttonLineComponent" {
 declare module "babylonjs-node-editor/components/nodeList/nodeListComponent" {
     import * as React from "react";
     import { GlobalState } from "babylonjs-node-editor/globalState";
-    import { NodeMaterialBlock } from 'babylonjs/Materials/Node/nodeMaterialBlock';
     interface INodeListComponentProps {
         globalState: GlobalState;
-        onAddValueNode: (b: string) => void;
-        onAddNodeFromClass: (ObjectClass: typeof NodeMaterialBlock) => void;
     }
     export class NodeListComponent extends React.Component<INodeListComponentProps> {
         render(): JSX.Element;
     }
 }
+declare module "babylonjs-node-editor/sharedComponents/buttonLineComponent" {
+    import * as React from "react";
+    export interface IButtonLineComponentProps {
+        label: string;
+        onClick: () => void;
+    }
+    export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
+        constructor(props: IButtonLineComponentProps);
+        render(): JSX.Element;
+    }
+}
 declare module "babylonjs-node-editor/components/propertyTab/propertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "babylonjs-node-editor/globalState";
@@ -669,12 +684,10 @@ declare module "babylonjs-node-editor/components/diagram/input/inputNodeModel" {
     import { DefaultNodeModel } from "babylonjs-node-editor/components/diagram/defaultNodeModel";
     import { GlobalState } from "babylonjs-node-editor/globalState";
     import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
-    import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPointTypes';
     /**
      * Generic node model which stores information about a node editor block
      */
     export class InputNodeModel extends DefaultNodeModel {
-        outputType: NodeMaterialBlockConnectionPointTypes;
         readonly inputBlock: InputBlock;
         /**
          * Constructs the node model
@@ -705,7 +718,7 @@ declare module "babylonjs-node-editor/components/diagram/input/inputNodeWidget"
          */
         constructor(props: InputNodeWidgetProps);
         renderValue(value: string): JSX.Element | null;
-        render(): JSX.Element;
+        render(): JSX.Element | null;
     }
 }
 declare module "babylonjs-node-editor/components/diagram/input/inputNodeFactory" {
@@ -845,6 +858,7 @@ declare module "babylonjs-node-editor/components/diagram/light/lightNodeFactory"
 declare module "babylonjs-node-editor/graphEditor" {
     import { LinkModel } from "storm-react-diagrams";
     import * as React from "react";
+    import * as dagre from "babylonjs-node-editor/dagre";
     import { GlobalState } from "babylonjs-node-editor/globalState";
     import { NodeMaterialBlock } from 'babylonjs/Materials/Node/nodeMaterialBlock';
     import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
@@ -853,7 +867,6 @@ declare module "babylonjs-node-editor/graphEditor" {
         globalState: GlobalState;
     }
     export class NodeCreationOptions {
-        column: number;
         nodeMaterialBlock: NodeMaterialBlock;
         type?: string;
         connection?: NodeMaterialConnectionPoint;
@@ -865,10 +878,6 @@ declare module "babylonjs-node-editor/graphEditor" {
         /** @hidden */
         _toAdd: LinkModel[] | null;
         /**
-         * Current row/column position used when adding new nodes
-         */
-        private _rowPos;
-        /**
          * Creates a node and recursivly creates its parent nodes from it's input
          * @param nodeMaterialBlock
          */
@@ -876,10 +885,23 @@ declare module "babylonjs-node-editor/graphEditor" {
         componentDidMount(): void;
         componentWillUnmount(): void;
         constructor(props: IGraphEditorProps);
+        distributeGraph(): dagre.Node[];
+        mapElements(): {
+            id: string;
+            metadata: {
+                id: string;
+                width: number;
+                height: number;
+            };
+        }[];
+        mapEdges(): {
+            from: import("storm-react-diagrams").NodeModel;
+            to: import("storm-react-diagrams").NodeModel;
+        }[];
         buildMaterial(): void;
         build(): void;
-        addNodeFromClass(ObjectClass: typeof NodeMaterialBlock): DefaultNodeModel;
-        addValueNode(type: string, column?: number, connection?: NodeMaterialConnectionPoint): DefaultNodeModel;
+        reOrganize(): void;
+        addValueNode(type: string): DefaultNodeModel;
         private _startX;
         private _moveInProgress;
         private _leftWidth;
@@ -888,6 +910,7 @@ declare module "babylonjs-node-editor/graphEditor" {
         onPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
         resizeColumns(evt: React.PointerEvent<HTMLDivElement>, forLeft?: boolean): void;
         buildColumnLayout(): string;
+        emitNewBlock(event: React.DragEvent<HTMLDivElement>): void;
         render(): JSX.Element;
     }
 }
@@ -932,6 +955,7 @@ declare module "babylonjs-node-editor/globalState" {
         onResetRequiredObservable: Observable<void>;
         onUpdateRequiredObservable: Observable<void>;
         onZoomToFitRequiredObservable: Observable<void>;
+        onReOrganizedRequiredObservable: Observable<void>;
         onLogRequiredObservable: Observable<LogEntry>;
     }
 }
@@ -980,33 +1004,6 @@ declare module NODEEDITOR {
     }
 }
 declare module NODEEDITOR {
-    /**
-     * Port model
-     */
-    export class DefaultPortModel extends PortModel {
-        /**
-         * If the port is input or output
-         */
-        position: string | "input" | "output";
-        /**
-         * What the port is connected to
-         */
-        connection: BABYLON.Nullable<BABYLON.NodeMaterialConnectionPoint>;
-        defaultValue: any;
-        static idCounter: number;
-        constructor(name: string, type?: string);
-        canLinkToPort(port: DefaultPortModel): boolean;
-        syncWithNodeMaterialConnectionPoint(connection: BABYLON.NodeMaterialConnectionPoint): void;
-        getNodeModel(): DefaultNodeModel;
-        link(outPort: DefaultPortModel): LinkModel<import("storm-react-diagrams").LinkModelListener>;
-        createLinkModel(): LinkModel;
-        static SortInputOutput(a: BABYLON.Nullable<DefaultPortModel>, b: BABYLON.Nullable<DefaultPortModel>): {
-            input: DefaultPortModel;
-            output: DefaultPortModel;
-        } | null;
-    }
-}
-declare module NODEEDITOR {
     interface ITextLineComponentProps {
         label: string;
         value: string;
@@ -1097,6 +1094,39 @@ declare module NODEEDITOR {
 }
 declare module NODEEDITOR {
     /**
+     * Port model
+     */
+    export class DefaultPortModel extends PortModel {
+        /**
+         * If the port is input or output
+         */
+        position: string | "input" | "output";
+        /**
+         * What the port is connected to
+         */
+        connection: BABYLON.Nullable<BABYLON.NodeMaterialConnectionPoint>;
+        defaultValue: any;
+        static idCounter: number;
+        constructor(name: string, type?: string);
+        canLinkToPort(port: DefaultPortModel): boolean;
+        syncWithNodeMaterialConnectionPoint(connection: BABYLON.NodeMaterialConnectionPoint): void;
+        getNodeModel(): DefaultNodeModel;
+        link(outPort: DefaultPortModel): LinkModel<import("storm-react-diagrams").LinkModelListener>;
+        createLinkModel(): LinkModel;
+        static SortInputOutput(a: BABYLON.Nullable<DefaultPortModel>, b: BABYLON.Nullable<DefaultPortModel>): {
+            input: DefaultPortModel;
+            output: DefaultPortModel;
+        } | null;
+    }
+}
+declare module NODEEDITOR {
+    export class PortHelper {
+        static GenerateOutputPorts(node: BABYLON.Nullable<DefaultNodeModel>, ignoreLabel: boolean): JSX.Element[];
+        static GenerateInputPorts(node: BABYLON.Nullable<DefaultNodeModel>, includeOnly?: string[]): JSX.Element[];
+    }
+}
+declare module NODEEDITOR {
+    /**
      * GenericNodeWidgetProps
      */
     export interface GenericNodeWidgetProps {
@@ -1146,10 +1176,9 @@ declare module NODEEDITOR {
 }
 declare module NODEEDITOR {
     export interface IButtonLineComponentProps {
-        label: string;
-        onClick: () => void;
+        data: string;
     }
-    export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
+    export class DraggableLineComponent extends React.Component<IButtonLineComponentProps> {
         constructor(props: IButtonLineComponentProps);
         render(): JSX.Element;
     }
@@ -1157,14 +1186,22 @@ declare module NODEEDITOR {
 declare module NODEEDITOR {
     interface INodeListComponentProps {
         globalState: GlobalState;
-        onAddValueNode: (b: string) => void;
-        onAddNodeFromClass: (ObjectClass: typeof BABYLON.NodeMaterialBlock) => void;
     }
     export class NodeListComponent extends React.Component<INodeListComponentProps> {
         render(): JSX.Element;
     }
 }
 declare module NODEEDITOR {
+    export interface IButtonLineComponentProps {
+        label: string;
+        onClick: () => void;
+    }
+    export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
+        constructor(props: IButtonLineComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module NODEEDITOR {
     interface IPropertyTabComponentProps {
         globalState: GlobalState;
     }
@@ -1552,7 +1589,6 @@ declare module NODEEDITOR {
      * Generic node model which stores information about a node editor block
      */
     export class InputNodeModel extends DefaultNodeModel {
-        outputType: BABYLON.NodeMaterialBlockConnectionPointTypes;
         readonly inputBlock: BABYLON.InputBlock;
         /**
          * Constructs the node model
@@ -1579,7 +1615,7 @@ declare module NODEEDITOR {
          */
         constructor(props: InputNodeWidgetProps);
         renderValue(value: string): JSX.Element | null;
-        render(): JSX.Element;
+        render(): JSX.Element | null;
     }
 }
 declare module NODEEDITOR {
@@ -1700,7 +1736,6 @@ declare module NODEEDITOR {
         globalState: GlobalState;
     }
     export class NodeCreationOptions {
-        column: number;
         nodeMaterialBlock: BABYLON.NodeMaterialBlock;
         type?: string;
         connection?: BABYLON.NodeMaterialConnectionPoint;
@@ -1712,10 +1747,6 @@ declare module NODEEDITOR {
         /** @hidden */
         _toAdd: LinkModel[] | null;
         /**
-         * Current row/column position used when adding new nodes
-         */
-        private _rowPos;
-        /**
          * Creates a node and recursivly creates its parent nodes from it's input
          * @param nodeMaterialBlock
          */
@@ -1723,10 +1754,23 @@ declare module NODEEDITOR {
         componentDidMount(): void;
         componentWillUnmount(): void;
         constructor(props: IGraphEditorProps);
+        distributeGraph(): dagre.Node[];
+        mapElements(): {
+            id: string;
+            metadata: {
+                id: string;
+                width: number;
+                height: number;
+            };
+        }[];
+        mapEdges(): {
+            from: import("storm-react-diagrams").NodeModel;
+            to: import("storm-react-diagrams").NodeModel;
+        }[];
         buildMaterial(): void;
         build(): void;
-        addNodeFromClass(ObjectClass: typeof BABYLON.NodeMaterialBlock): DefaultNodeModel;
-        addValueNode(type: string, column?: number, connection?: BABYLON.NodeMaterialConnectionPoint): DefaultNodeModel;
+        reOrganize(): void;
+        addValueNode(type: string): DefaultNodeModel;
         private _startX;
         private _moveInProgress;
         private _leftWidth;
@@ -1735,6 +1779,7 @@ declare module NODEEDITOR {
         onPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
         resizeColumns(evt: React.PointerEvent<HTMLDivElement>, forLeft?: boolean): void;
         buildColumnLayout(): string;
+        emitNewBlock(event: React.DragEvent<HTMLDivElement>): void;
         render(): JSX.Element;
     }
 }
@@ -1768,6 +1813,7 @@ declare module NODEEDITOR {
         onResetRequiredObservable: BABYLON.Observable<void>;
         onUpdateRequiredObservable: BABYLON.Observable<void>;
         onZoomToFitRequiredObservable: BABYLON.Observable<void>;
+        onReOrganizedRequiredObservable: BABYLON.Observable<void>;
         onLogRequiredObservable: BABYLON.Observable<LogEntry>;
     }
 }

dist/preview release/serializers/babylon.glTF2Serializer.js

@@ -3599,6 +3599,7 @@ var _GLTFMaterialExporter = /** @class */ (function () {
         var imageValues = { data: arr, mimeType: mimeType };
         var extension = mimeType === "image/jpeg" /* JPEG */ ? '.jpeg' : '.png';
         var textureName = baseTextureName + extension;
+        var originalTextureName = textureName;
         if (textureName in imageData) {
             textureName = baseTextureName + "_" + babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Tools"].RandomId() + extension;
         }
@@ -3610,7 +3611,7 @@ var _GLTFMaterialExporter = /** @class */ (function () {
             };
             var foundIndex = null;
             for (var i = 0; i < images.length; ++i) {
-                if (images[i].uri === textureName) {
+                if (images[i].uri === originalTextureName) {
                     foundIndex = i;
                     break;
                 }

dist/preview release/serializers/babylonjs.serializers.js

@@ -3777,6 +3777,7 @@ var _GLTFMaterialExporter = /** @class */ (function () {
         var imageValues = { data: arr, mimeType: mimeType };
         var extension = mimeType === "image/jpeg" /* JPEG */ ? '.jpeg' : '.png';
         var textureName = baseTextureName + extension;
+        var originalTextureName = textureName;
         if (textureName in imageData) {
             textureName = baseTextureName + "_" + babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Tools"].RandomId() + extension;
         }
@@ -3788,7 +3789,7 @@ var _GLTFMaterialExporter = /** @class */ (function () {
             };
             var foundIndex = null;
             for (var i = 0; i < images.length; ++i) {
-                if (images[i].uri === textureName) {
+                if (images[i].uri === originalTextureName) {
                     foundIndex = i;
                     break;
                 }