Merge pull request #8020 from BabylonJS/master

Nightly

dist/preview release/babylon.d.ts

@@ -21420,9 +21420,6 @@ declare module BABYLON {
          * Stores the z offset value
          */
         zOffset: number;
-        /**
-         * Gets a value specifying if wireframe mode is enabled
-         */
         get wireframe(): boolean;
         /**
          * Sets the state of wireframe mode
@@ -58592,6 +58589,7 @@ declare module BABYLON {
         serialize(): any;
         /** @hidden */
         _deserialize(serializationObject: any, scene: Scene, rootUrl: string): void;
+        private _deserializePortDisplayNames;
         /**
          * Release resources
          */
@@ -58817,6 +58815,10 @@ declare module BABYLON {
          */
         name: string;
         /**
+         * Gets or sets the connection point name
+         */
+        displayName: string;
+        /**
          * Gets or sets a boolean indicating that this connection point can be omitted
          */
         isOptional: boolean;
@@ -58897,9 +58899,10 @@ declare module BABYLON {
         disconnectFrom(endpoint: NodeMaterialConnectionPoint): NodeMaterialConnectionPoint;
         /**
          * Serializes this point in a JSON representation
+         * @param isInput defines if the connection point is an input (default is true)
          * @returns the serialized point object
          */
-        serialize(): any;
+        serialize(isInput?: boolean): any;
         /**
          * Release resources
          */

dist/preview release/babylon.max.js

@@ -74071,16 +74071,41 @@ var NodeMaterialBlock = /** @class */ (function () {
         serializationObject.name = this.name;
         serializationObject.comments = this.comments;
         serializationObject.inputs = [];
+        serializationObject.outputs = [];
         for (var _i = 0, _a = this.inputs; _i < _a.length; _i++) {
             var input = _a[_i];
             serializationObject.inputs.push(input.serialize());
         }
+        for (var _b = 0, _c = this.outputs; _b < _c.length; _b++) {
+            var output = _c[_b];
+            serializationObject.outputs.push(output.serialize(false));
+        }
         return serializationObject;
     };
     /** @hidden */
     NodeMaterialBlock.prototype._deserialize = function (serializationObject, scene, rootUrl) {
         this.name = serializationObject.name;
         this.comments = serializationObject.comments;
+        this._deserializePortDisplayNames(serializationObject);
+    };
+    NodeMaterialBlock.prototype._deserializePortDisplayNames = function (serializationObject) {
+        var _this = this;
+        var serializedInputs = serializationObject.inputs;
+        var serializedOutputs = serializationObject.outputs;
+        if (serializedInputs) {
+            serializedInputs.forEach(function (port, i) {
+                if (port.displayName) {
+                    _this.inputs[i].displayName = port.displayName;
+                }
+            });
+        }
+        if (serializedOutputs) {
+            serializedOutputs.forEach(function (port, i) {
+                if (port.displayName) {
+                    _this.outputs[i].displayName = port.displayName;
+                }
+            });
+        }
     };
     /**
      * Release resources
@@ -74520,12 +74545,15 @@ var NodeMaterialConnectionPoint = /** @class */ (function () {
     };
     /**
      * Serializes this point in a JSON representation
+     * @param isInput defines if the connection point is an input (default is true)
      * @returns the serialized point object
      */
-    NodeMaterialConnectionPoint.prototype.serialize = function () {
+    NodeMaterialConnectionPoint.prototype.serialize = function (isInput) {
+        if (isInput === void 0) { isInput = true; }
         var serializationObject = {};
         serializationObject.name = this.name;
-        if (this.connectedPoint) {
+        serializationObject.displayName = this.displayName;
+        if (isInput && this.connectedPoint) {
             serializationObject.inputName = this.name;
             serializationObject.targetBlockId = this.connectedPoint.ownerBlock.uniqueId;
             serializationObject.targetConnectionName = this.connectedPoint.name;
@@ -91579,9 +91607,6 @@ var Material = /** @class */ (function () {
         configurable: true
     });
     Object.defineProperty(Material.prototype, "wireframe", {
-        /**
-         * Gets a value specifying if wireframe mode is enabled
-         */
         get: function () {
             switch (this._fillMode) {
                 case Material.WireFrameFillMode:
@@ -92431,9 +92456,6 @@ var Material = /** @class */ (function () {
     ], Material.prototype, "zOffset", void 0);
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
         Object(_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serialize"])()
-    ], Material.prototype, "wireframe", null);
-    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
-        Object(_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serialize"])()
     ], Material.prototype, "pointsCloud", null);
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
         Object(_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serialize"])()
@@ -185577,6 +185599,9 @@ var Scene = /** @class */ (function (_super) {
         if (this.isDisposed) {
             return;
         }
+        if (this.onReadyObservable.hasObservers() && this._executeWhenReadyTimeoutId === -1) {
+            this._checkIsReady();
+        }
         this._frameId++;
         // Register components that have been associated lately to the scene.
         this._registerTransientComponents();

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

@@ -22085,9 +22085,6 @@ declare module "babylonjs/Materials/material" {
          * Stores the z offset value
          */
         zOffset: number;
-        /**
-         * Gets a value specifying if wireframe mode is enabled
-         */
         get wireframe(): boolean;
         /**
          * Sets the state of wireframe mode
@@ -61328,6 +61325,7 @@ declare module "babylonjs/Materials/Node/nodeMaterialBlock" {
         serialize(): any;
         /** @hidden */
         _deserialize(serializationObject: any, scene: Scene, rootUrl: string): void;
+        private _deserializePortDisplayNames;
         /**
          * Release resources
          */
@@ -61571,6 +61569,10 @@ declare module "babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint" {
          */
         name: string;
         /**
+         * Gets or sets the connection point name
+         */
+        displayName: string;
+        /**
          * Gets or sets a boolean indicating that this connection point can be omitted
          */
         isOptional: boolean;
@@ -61651,9 +61653,10 @@ declare module "babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint" {
         disconnectFrom(endpoint: NodeMaterialConnectionPoint): NodeMaterialConnectionPoint;
         /**
          * Serializes this point in a JSON representation
+         * @param isInput defines if the connection point is an input (default is true)
          * @returns the serialized point object
          */
-        serialize(): any;
+        serialize(isInput?: boolean): any;
         /**
          * Release resources
          */
@@ -95971,9 +95974,6 @@ declare module BABYLON {
          * Stores the z offset value
          */
         zOffset: number;
-        /**
-         * Gets a value specifying if wireframe mode is enabled
-         */
         get wireframe(): boolean;
         /**
          * Sets the state of wireframe mode
@@ -133143,6 +133143,7 @@ declare module BABYLON {
         serialize(): any;
         /** @hidden */
         _deserialize(serializationObject: any, scene: Scene, rootUrl: string): void;
+        private _deserializePortDisplayNames;
         /**
          * Release resources
          */
@@ -133368,6 +133369,10 @@ declare module BABYLON {
          */
         name: string;
         /**
+         * Gets or sets the connection point name
+         */
+        displayName: string;
+        /**
          * Gets or sets a boolean indicating that this connection point can be omitted
          */
         isOptional: boolean;
@@ -133448,9 +133453,10 @@ declare module BABYLON {
         disconnectFrom(endpoint: NodeMaterialConnectionPoint): NodeMaterialConnectionPoint;
         /**
          * Serializes this point in a JSON representation
+         * @param isInput defines if the connection point is an input (default is true)
          * @returns the serialized point object
          */
-        serialize(): any;
+        serialize(isInput?: boolean): any;
         /**
          * Release resources
          */

dist/preview release/documentation.d.ts

@@ -21420,9 +21420,6 @@ declare module BABYLON {
          * Stores the z offset value
          */
         zOffset: number;
-        /**
-         * Gets a value specifying if wireframe mode is enabled
-         */
         get wireframe(): boolean;
         /**
          * Sets the state of wireframe mode
@@ -58592,6 +58589,7 @@ declare module BABYLON {
         serialize(): any;
         /** @hidden */
         _deserialize(serializationObject: any, scene: Scene, rootUrl: string): void;
+        private _deserializePortDisplayNames;
         /**
          * Release resources
          */
@@ -58817,6 +58815,10 @@ declare module BABYLON {
          */
         name: string;
         /**
+         * Gets or sets the connection point name
+         */
+        displayName: string;
+        /**
          * Gets or sets a boolean indicating that this connection point can be omitted
          */
         isOptional: boolean;
@@ -58897,9 +58899,10 @@ declare module BABYLON {
         disconnectFrom(endpoint: NodeMaterialConnectionPoint): NodeMaterialConnectionPoint;
         /**
          * Serializes this point in a JSON representation
+         * @param isInput defines if the connection point is an input (default is true)
          * @returns the serialized point object
          */
-        serialize(): any;
+        serialize(isInput?: boolean): any;
         /**
          * Release resources
          */

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

@@ -100,7 +100,6 @@ declare module NODEEDITOR {
     export class FrameNodePort extends NodePort {
         connectionPoint: BABYLON.NodeMaterialConnectionPoint;
         node: GraphNode;
-        private _portLabel;
         private _parentFrameId;
         private _isInput;
         private _framePortPosition;
@@ -109,9 +108,7 @@ declare module NODEEDITOR {
         get parentFrameId(): number;
         get onFramePortPositionChangedObservable(): BABYLON.Observable<FrameNodePort>;
         get isInput(): boolean;
-        get portLabel(): string;
         get framePortId(): number;
-        set portLabel(newLabel: string);
         get framePortPosition(): FramePortPosition;
         set framePortPosition(position: FramePortPosition);
         constructor(portContainer: HTMLElement, connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState, isInput: boolean, framePortId: number, parentFrameId: number);
@@ -260,10 +257,14 @@ declare module NODEEDITOR {
         protected _element: HTMLDivElement;
         protected _img: HTMLImageElement;
         protected _globalState: GlobalState;
+        protected _portLabelElement: Element;
         protected _onCandidateLinkMovedObserver: BABYLON.Nullable<BABYLON.Observer<BABYLON.Nullable<BABYLON.Vector2>>>;
         protected _onSelectionChangedObserver: BABYLON.Nullable<BABYLON.Observer<BABYLON.Nullable<GraphFrame | GraphNode | NodeLink | NodePort | FramePortData>>>;
         delegatedPort: BABYLON.Nullable<FrameNodePort>;
         get element(): HTMLDivElement;
+        get portName(): string;
+        set portName(newName: string);
+        hasLabel(): boolean;
         refresh(): void;
         constructor(portContainer: HTMLElement, connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState);
         dispose(): void;
@@ -1150,6 +1151,7 @@ declare module NODEEDITOR {
         private _isVisible;
         get isVisible(): boolean;
         set isVisible(value: boolean);
+        private _upateNodePortNames;
         get outputPorts(): NodePort[];
         get inputPorts(): NodePort[];
         get links(): NodeLink[];
@@ -1283,14 +1285,28 @@ declare module NODEEDITOR {
     }
 }
 declare module NODEEDITOR {
+    export interface IFrameNodePortPropertyTabComponentProps {
+        globalState: GlobalState;
+        nodePort: NodePort;
+    }
+    export class NodePortPropertyTabComponent extends React.Component<IFrameNodePortPropertyTabComponentProps> {
+        private _onSelectionChangedObserver;
+        constructor(props: IFrameNodePortPropertyTabComponentProps);
+        componentWillUnmount(): void;
+        render(): JSX.Element;
+    }
+}
+declare module NODEEDITOR {
     interface IPropertyTabComponentProps {
         globalState: GlobalState;
     }
-    export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, {
+    interface IPropertyTabComponentState {
         currentNode: BABYLON.Nullable<GraphNode>;
         currentFrame: BABYLON.Nullable<GraphFrame>;
         currentFrameNodePort: BABYLON.Nullable<FrameNodePort>;
-    }> {
+        currentNodePort: BABYLON.Nullable<NodePort>;
+    }
+    export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, IPropertyTabComponentState> {
         private _onBuiltObserver;
         constructor(props: IPropertyTabComponentProps);
         componentDidMount(): void;

dist/preview release/nodeEditor/babylon.nodeEditor.max.js

@@ -61111,13 +61111,17 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _sharedComponents_textLineComponent__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../sharedComponents/textLineComponent */ "./sharedComponents/textLineComponent.tsx");
 /* harmony import */ var _diagram_properties_framePropertyComponent__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../../diagram/properties/framePropertyComponent */ "./diagram/properties/framePropertyComponent.tsx");
 /* harmony import */ var _diagram_properties_frameNodePortPropertyComponent__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../diagram/properties/frameNodePortPropertyComponent */ "./diagram/properties/frameNodePortPropertyComponent.tsx");
-/* harmony import */ var _sharedComponents_color3LineComponent__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../../sharedComponents/color3LineComponent */ "./sharedComponents/color3LineComponent.tsx");
-/* harmony import */ var _sharedComponents_floatLineComponent__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../../sharedComponents/floatLineComponent */ "./sharedComponents/floatLineComponent.tsx");
-/* harmony import */ var _sharedComponents_color4LineComponent__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../../sharedComponents/color4LineComponent */ "./sharedComponents/color4LineComponent.tsx");
-/* harmony import */ var _sharedComponents_vector2LineComponent__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../../sharedComponents/vector2LineComponent */ "./sharedComponents/vector2LineComponent.tsx");
-/* harmony import */ var _sharedComponents_vector3LineComponent__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../../sharedComponents/vector3LineComponent */ "./sharedComponents/vector3LineComponent.tsx");
-/* harmony import */ var _sharedComponents_vector4LineComponent__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../../sharedComponents/vector4LineComponent */ "./sharedComponents/vector4LineComponent.tsx");
-/* harmony import */ var _diagram_graphCanvas__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../../diagram/graphCanvas */ "./diagram/graphCanvas.tsx");
+/* harmony import */ var _diagram_properties_nodePortPropertyComponent__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../../diagram/properties/nodePortPropertyComponent */ "./diagram/properties/nodePortPropertyComponent.tsx");
+/* harmony import */ var _sharedComponents_color3LineComponent__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../../sharedComponents/color3LineComponent */ "./sharedComponents/color3LineComponent.tsx");
+/* harmony import */ var _sharedComponents_floatLineComponent__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../../sharedComponents/floatLineComponent */ "./sharedComponents/floatLineComponent.tsx");
+/* harmony import */ var _sharedComponents_color4LineComponent__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../../sharedComponents/color4LineComponent */ "./sharedComponents/color4LineComponent.tsx");
+/* harmony import */ var _sharedComponents_vector2LineComponent__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../../sharedComponents/vector2LineComponent */ "./sharedComponents/vector2LineComponent.tsx");
+/* harmony import */ var _sharedComponents_vector3LineComponent__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../../sharedComponents/vector3LineComponent */ "./sharedComponents/vector3LineComponent.tsx");
+/* harmony import */ var _sharedComponents_vector4LineComponent__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../../sharedComponents/vector4LineComponent */ "./sharedComponents/vector4LineComponent.tsx");
+/* harmony import */ var _diagram_nodePort__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ../../diagram/nodePort */ "./diagram/nodePort.ts");
+/* harmony import */ var _diagram_graphCanvas__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ../../diagram/graphCanvas */ "./diagram/graphCanvas.tsx");
+
+
 
 
 
@@ -61149,23 +61153,26 @@ var PropertyTabComponent = /** @class */ (function (_super) {
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(PropertyTabComponent, _super);
     function PropertyTabComponent(props) {
         var _this = _super.call(this, props) || this;
-        _this.state = { currentNode: null, currentFrame: null, currentFrameNodePort: null };
+        _this.state = { currentNode: null, currentFrame: null, currentFrameNodePort: null, currentNodePort: null };
         return _this;
     }
     PropertyTabComponent.prototype.componentDidMount = function () {
         var _this = this;
         this.props.globalState.onSelectionChangedObservable.add(function (selection) {
             if (selection instanceof _diagram_graphNode__WEBPACK_IMPORTED_MODULE_9__["GraphNode"]) {
-                _this.setState({ currentNode: selection, currentFrame: null, currentFrameNodePort: null });
+                _this.setState({ currentNode: selection, currentFrame: null, currentFrameNodePort: null, currentNodePort: null });
             }
             else if (selection instanceof _diagram_graphFrame__WEBPACK_IMPORTED_MODULE_11__["GraphFrame"]) {
-                _this.setState({ currentNode: null, currentFrame: selection, currentFrameNodePort: null });
+                _this.setState({ currentNode: null, currentFrame: selection, currentFrameNodePort: null, currentNodePort: null });
             }
-            else if (Object(_diagram_graphCanvas__WEBPACK_IMPORTED_MODULE_21__["isFramePortData"])(selection)) {
-                _this.setState({ currentNode: null, currentFrame: selection.frame, currentFrameNodePort: selection.port });
+            else if (Object(_diagram_graphCanvas__WEBPACK_IMPORTED_MODULE_23__["isFramePortData"])(selection)) {
+                _this.setState({ currentNode: null, currentFrame: selection.frame, currentFrameNodePort: selection.port, currentNodePort: null });
+            }
+            else if (selection instanceof _diagram_nodePort__WEBPACK_IMPORTED_MODULE_22__["NodePort"] && selection.hasLabel()) {
+                _this.setState({ currentNode: null, currentFrame: null, currentFrameNodePort: null, currentNodePort: selection });
             }
             else {
-                _this.setState({ currentNode: null, currentFrame: null, currentFrameNodePort: null });
+                _this.setState({ currentNode: null, currentFrame: null, currentFrameNodePort: null, currentNodePort: null });
             }
         });
         this._onBuiltObserver = this.props.globalState.onBuiltObservable.add(function () {
@@ -61192,19 +61199,19 @@ var PropertyTabComponent = /** @class */ (function (_super) {
                                 _this.processInputBlockUpdate(block);
                             } }),
                     !block.isBoolean && cantDisplaySlider &&
-                        react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_floatLineComponent__WEBPACK_IMPORTED_MODULE_16__["FloatLineComponent"], { globalState: this.props.globalState, key: block.uniqueId, label: block.name, target: block, propertyName: "value", onChange: function () { return _this.processInputBlockUpdate(block); } }),
+                        react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_floatLineComponent__WEBPACK_IMPORTED_MODULE_17__["FloatLineComponent"], { globalState: this.props.globalState, key: block.uniqueId, label: block.name, target: block, propertyName: "value", onChange: function () { return _this.processInputBlockUpdate(block); } }),
                     !block.isBoolean && !cantDisplaySlider &&
                         react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_sliderLineComponent__WEBPACK_IMPORTED_MODULE_10__["SliderLineComponent"], { key: block.uniqueId, label: block.name, target: block, propertyName: "value", step: (block.max - block.min) / 100.0, minimum: block.min, maximum: block.max, onChange: function () { return _this.processInputBlockUpdate(block); } })));
             case babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_6__["NodeMaterialBlockConnectionPointTypes"].Color3:
-                return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_color3LineComponent__WEBPACK_IMPORTED_MODULE_15__["Color3LineComponent"], { globalState: this.props.globalState, key: block.uniqueId, label: block.name, target: block, propertyName: "value", onChange: function () { return _this.processInputBlockUpdate(block); } }));
+                return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_color3LineComponent__WEBPACK_IMPORTED_MODULE_16__["Color3LineComponent"], { globalState: this.props.globalState, key: block.uniqueId, label: block.name, target: block, propertyName: "value", onChange: function () { return _this.processInputBlockUpdate(block); } }));
             case babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_6__["NodeMaterialBlockConnectionPointTypes"].Color4:
-                return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_color4LineComponent__WEBPACK_IMPORTED_MODULE_17__["Color4LineComponent"], { globalState: this.props.globalState, key: block.uniqueId, label: block.name, target: block, propertyName: "value", onChange: function () { return _this.processInputBlockUpdate(block); } }));
+                return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_color4LineComponent__WEBPACK_IMPORTED_MODULE_18__["Color4LineComponent"], { globalState: this.props.globalState, key: block.uniqueId, label: block.name, target: block, propertyName: "value", onChange: function () { return _this.processInputBlockUpdate(block); } }));
             case babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_6__["NodeMaterialBlockConnectionPointTypes"].Vector2:
-                return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_vector2LineComponent__WEBPACK_IMPORTED_MODULE_18__["Vector2LineComponent"], { globalState: this.props.globalState, key: block.uniqueId, label: block.name, target: block, propertyName: "value", onChange: function () { return _this.processInputBlockUpdate(block); } }));
+                return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_vector2LineComponent__WEBPACK_IMPORTED_MODULE_19__["Vector2LineComponent"], { globalState: this.props.globalState, key: block.uniqueId, label: block.name, target: block, propertyName: "value", onChange: function () { return _this.processInputBlockUpdate(block); } }));
             case babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_6__["NodeMaterialBlockConnectionPointTypes"].Vector3:
-                return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_vector3LineComponent__WEBPACK_IMPORTED_MODULE_19__["Vector3LineComponent"], { globalState: this.props.globalState, key: block.uniqueId, label: block.name, target: block, propertyName: "value", onChange: function () { return _this.processInputBlockUpdate(block); } }));
+                return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_vector3LineComponent__WEBPACK_IMPORTED_MODULE_20__["Vector3LineComponent"], { globalState: this.props.globalState, key: block.uniqueId, label: block.name, target: block, propertyName: "value", onChange: function () { return _this.processInputBlockUpdate(block); } }));
             case babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_6__["NodeMaterialBlockConnectionPointTypes"].Vector4:
-                return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_vector4LineComponent__WEBPACK_IMPORTED_MODULE_20__["Vector4LineComponent"], { globalState: this.props.globalState, key: block.uniqueId, label: block.name, target: block, propertyName: "value", onChange: function () { return _this.processInputBlockUpdate(block); } }));
+                return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_vector4LineComponent__WEBPACK_IMPORTED_MODULE_21__["Vector4LineComponent"], { globalState: this.props.globalState, key: block.uniqueId, label: block.name, target: block, propertyName: "value", onChange: function () { return _this.processInputBlockUpdate(block); } }));
         }
         return null;
     };
@@ -61290,16 +61297,20 @@ var PropertyTabComponent = /** @class */ (function (_super) {
     };
     PropertyTabComponent.prototype.render = function () {
         var _this = this;
+        var _a, _b;
         if (this.state.currentNode) {
             return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "propertyTab" },
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "header" },
                     react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { id: "logo", src: "https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" }),
                     react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "title" }, "NODE MATERIAL EDITOR")),
-                this.state.currentNode.renderProperties()));
+                ((_a = this.state.currentNode) === null || _a === void 0 ? void 0 : _a.renderProperties()) || ((_b = this.state.currentNodePort) === null || _b === void 0 ? void 0 : _b.node.renderProperties())));
         }
         if (this.state.currentFrameNodePort && this.state.currentFrame) {
             return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_diagram_properties_frameNodePortPropertyComponent__WEBPACK_IMPORTED_MODULE_14__["FrameNodePortPropertyTabComponent"], { globalState: this.props.globalState, frame: this.state.currentFrame, frameNodePort: this.state.currentFrameNodePort }));
         }
+        if (this.state.currentNodePort) {
+            return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_diagram_properties_nodePortPropertyComponent__WEBPACK_IMPORTED_MODULE_15__["NodePortPropertyTabComponent"], { globalState: this.props.globalState, nodePort: this.state.currentNodePort }));
+        }
         if (this.state.currentFrame) {
             return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_diagram_properties_framePropertyComponent__WEBPACK_IMPORTED_MODULE_13__["FramePropertyTabComponent"], { globalState: this.props.globalState, frame: this.state.currentFrame }));
         }
@@ -61879,7 +61890,6 @@ var FrameNodePort = /** @class */ (function (_super) {
         _this.node = node;
         _this._onFramePortPositionChangedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_2__["Observable"]();
         _this._parentFrameId = parentFrameId;
-        _this._portLabel = portContainer.children[0];
         _this._isInput = isInput;
         _this._framePortId = framePortId;
         _this._onSelectionChangedObserver = _this._globalState.onSelectionChangedObservable.add(function (selection) {
@@ -61914,16 +61924,6 @@ var FrameNodePort = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(FrameNodePort.prototype, "portLabel", {
-        get: function () {
-            return this._portLabel.innerHTML;
-        },
-        set: function (newLabel) {
-            this._portLabel.innerHTML = newLabel;
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(FrameNodePort.prototype, "framePortId", {
         get: function () {
             return this._framePortId;
@@ -61937,7 +61937,6 @@ var FrameNodePort = /** @class */ (function (_super) {
         },
         set: function (position) {
             this._framePortPosition = position;
-            console.log(this.onFramePortPositionChangedObservable.observers);
             this.onFramePortPositionChangedObservable.notifyObservers(this);
         },
         enumerable: true,
@@ -61954,7 +61953,7 @@ var FrameNodePort = /** @class */ (function (_super) {
         if (!displayManager || displayManager.shouldDisplayPortLabels(block)) {
             var portLabel = root.ownerDocument.createElement("div");
             portLabel.classList.add("port-label");
-            portLabel.innerHTML = connectionPoint.name;
+            portLabel.innerHTML = connectionPoint.displayName || connectionPoint.name;
             portContainer.appendChild(portLabel);
         }
         return new FrameNodePort(portContainer, connectionPoint, node, globalState, isInput, framePortId, parentFrameId);
@@ -62103,6 +62102,9 @@ var GraphCanvasComponent = /** @class */ (function (_super) {
                         _this._selectedNodes = [selection];
                     }
                 }
+                else if (selection instanceof _nodePort__WEBPACK_IMPORTED_MODULE_6__["NodePort"] && !selection.hasLabel()) { // if node port is uneditable, select graphNode instead
+                    props.globalState.onSelectionChangedObservable.notifyObservers(selection.node);
+                }
                 else if (selection instanceof _nodePort__WEBPACK_IMPORTED_MODULE_6__["NodePort"]) {
                     _this._selectedNodes = [];
                     _this._selectedFrame = null;
@@ -62610,6 +62612,9 @@ var GraphCanvasComponent = /** @class */ (function (_super) {
                         this.props.globalState.onSelectionChangedObservable.notifyObservers(data);
                     }
                 }
+                else if (this._candidateLink.portA instanceof _nodePort__WEBPACK_IMPORTED_MODULE_6__["NodePort"]) {
+                    this.props.globalState.onSelectionChangedObservable.notifyObservers(this._candidateLink.portA);
+                }
             }
             this._candidateLink.dispose();
             this._candidateLink = null;
@@ -64090,6 +64095,7 @@ var GraphNode = /** @class */ (function () {
             }
             else {
                 this._visual.classList.remove("hidden");
+                this._upateNodePortNames();
             }
             for (var _i = 0, _a = this._links; _i < _a.length; _i++) {
                 var link = _a[_i];
@@ -64100,6 +64106,14 @@ var GraphNode = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    GraphNode.prototype._upateNodePortNames = function () {
+        for (var _i = 0, _a = this._inputPorts.concat(this._outputPorts); _i < _a.length; _i++) {
+            var port = _a[_i];
+            if (port.hasLabel()) {
+                port.portName = port.connectionPoint.displayName || port.connectionPoint.name;
+            }
+        }
+    };
     Object.defineProperty(GraphNode.prototype, "outputPorts", {
         get: function () {
             return this._outputPorts;
@@ -64624,6 +64638,10 @@ var NodePort = /** @class */ (function () {
         this._globalState = globalState;
         this._img = portContainer.ownerDocument.createElement("img");
         this._element.appendChild(this._img);
+        // determine if node name is editable
+        if (portContainer.children[0].className === 'port-label') {
+            this._portLabelElement = portContainer.children[0];
+        }
         this._element.port = this;
         // Drag support
         this._element.ondragstart = function () { return false; };
@@ -64636,6 +64654,14 @@ var NodePort = /** @class */ (function () {
             _this._element.classList.add("selected");
             _this._globalState.onCandidatePortSelectedObservable.notifyObservers(_this);
         });
+        this._onSelectionChangedObserver = this._globalState.onSelectionChangedObservable.add(function (selection) {
+            if (selection === _this) {
+                _this._img.classList.add("selected");
+            }
+            else {
+                _this._img.classList.remove("selected");
+            }
+        });
         this.refresh();
     }
     Object.defineProperty(NodePort.prototype, "element", {
@@ -64648,6 +64674,22 @@ var NodePort = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(NodePort.prototype, "portName", {
+        get: function () {
+            return this.connectionPoint.displayName || this.connectionPoint.name;
+        },
+        set: function (newName) {
+            if (this._portLabelElement) {
+                this.connectionPoint.displayName = newName;
+                this._portLabelElement.innerHTML = newName;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    NodePort.prototype.hasLabel = function () {
+        return !!this._portLabelElement;
+    };
     NodePort.prototype.refresh = function () {
         this._element.style.background = _blockTools__WEBPACK_IMPORTED_MODULE_0__["BlockTools"].GetColorFromConnectionNodeType(this.connectionPoint.type);
         switch (this.connectionPoint.type) {
@@ -64685,7 +64727,7 @@ var NodePort = /** @class */ (function () {
         if (!displayManager || displayManager.shouldDisplayPortLabels(block)) {
             var portLabel = root.ownerDocument.createElement("div");
             portLabel.classList.add("port-label");
-            portLabel.innerHTML = connectionPoint.name;
+            portLabel.innerHTML = connectionPoint.displayName || connectionPoint.name;
             portContainer.appendChild(portLabel);
         }
         return new NodePort(portContainer, connectionPoint, node, globalState);
@@ -64843,7 +64885,7 @@ var FrameNodePortPropertyTabComponent = /** @class */ (function (_super) {
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "title" }, "NODE MATERIAL EDITOR")),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", null,
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__["LineContainerComponent"], { title: "GENERAL" },
-                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { globalState: this.props.globalState, label: "Port Label", propertyName: "portLabel", target: this.props.frameNodePort }),
+                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { globalState: this.props.globalState, label: "Port Name", propertyName: "portName", target: this.props.frameNodePort }),
                     this.props.frameNodePort.framePortPosition !== _graphFrame__WEBPACK_IMPORTED_MODULE_5__["FramePortPosition"].Top && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_buttonLineComponent__WEBPACK_IMPORTED_MODULE_4__["ButtonLineComponent"], { label: "Move Port Up", onClick: function () {
                             _this_1.props.frame.moveFramePortUp(_this_1.props.frameNodePort);
                         } }),
@@ -65498,6 +65540,48 @@ var LightPropertyTabComponent = /** @class */ (function (_super) {
 
 /***/ }),
 
+/***/ "./diagram/properties/nodePortPropertyComponent.tsx":
+/*!**********************************************************!*\
+  !*** ./diagram/properties/nodePortPropertyComponent.tsx ***!
+  \**********************************************************/
+/*! exports provided: NodePortPropertyTabComponent */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "NodePortPropertyTabComponent", function() { return NodePortPropertyTabComponent; });
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
+/* 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 _sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../sharedComponents/lineContainerComponent */ "./sharedComponents/lineContainerComponent.tsx");
+/* harmony import */ var _sharedComponents_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../sharedComponents/textInputLineComponent */ "./sharedComponents/textInputLineComponent.tsx");
+
+
+
+
+var NodePortPropertyTabComponent = /** @class */ (function (_super) {
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(NodePortPropertyTabComponent, _super);
+    function NodePortPropertyTabComponent(props) {
+        return _super.call(this, props) || this;
+    }
+    NodePortPropertyTabComponent.prototype.componentWillUnmount = function () {
+        this.props.globalState.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);
+    };
+    NodePortPropertyTabComponent.prototype.render = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "propertyTab" },
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "header" },
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { id: "logo", src: "https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "title" }, "NODE MATERIAL EDITOR")),
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", null,
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__["LineContainerComponent"], { title: "GENERAL" }, this.props.nodePort.hasLabel() && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { globalState: this.props.globalState, label: "Port Label", propertyName: "portName", target: this.props.nodePort })))));
+    };
+    return NodePortPropertyTabComponent;
+}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
+
+
+
+/***/ }),
+
 /***/ "./diagram/properties/remapNodePropertyComponent.tsx":
 /*!***********************************************************!*\
   !*** ./diagram/properties/remapNodePropertyComponent.tsx ***!

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

@@ -177,7 +177,6 @@ declare module "babylonjs-node-editor/diagram/frameNodePort" {
     export class FrameNodePort extends NodePort {
         connectionPoint: NodeMaterialConnectionPoint;
         node: GraphNode;
-        private _portLabel;
         private _parentFrameId;
         private _isInput;
         private _framePortPosition;
@@ -186,9 +185,7 @@ declare module "babylonjs-node-editor/diagram/frameNodePort" {
         get parentFrameId(): number;
         get onFramePortPositionChangedObservable(): Observable<FrameNodePort>;
         get isInput(): boolean;
-        get portLabel(): string;
         get framePortId(): number;
-        set portLabel(newLabel: string);
         get framePortPosition(): FramePortPosition;
         set framePortPosition(position: FramePortPosition);
         constructor(portContainer: HTMLElement, connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState, isInput: boolean, framePortId: number, parentFrameId: number);
@@ -355,10 +352,14 @@ declare module "babylonjs-node-editor/diagram/nodePort" {
         protected _element: HTMLDivElement;
         protected _img: HTMLImageElement;
         protected _globalState: GlobalState;
+        protected _portLabelElement: Element;
         protected _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;
         protected _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphFrame | GraphNode | NodeLink | NodePort | FramePortData>>>;
         delegatedPort: Nullable<FrameNodePort>;
         get element(): HTMLDivElement;
+        get portName(): string;
+        set portName(newName: string);
+        hasLabel(): boolean;
         refresh(): void;
         constructor(portContainer: HTMLElement, connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState);
         dispose(): void;
@@ -1398,6 +1399,7 @@ declare module "babylonjs-node-editor/diagram/graphNode" {
         private _isVisible;
         get isVisible(): boolean;
         set isVisible(value: boolean);
+        private _upateNodePortNames;
         get outputPorts(): NodePort[];
         get inputPorts(): NodePort[];
         get links(): NodeLink[];
@@ -1554,6 +1556,21 @@ declare module "babylonjs-node-editor/diagram/properties/frameNodePortPropertyCo
         render(): JSX.Element;
     }
 }
+declare module "babylonjs-node-editor/diagram/properties/nodePortPropertyComponent" {
+    import * as React from "react";
+    import { GlobalState } from "babylonjs-node-editor/globalState";
+    import { NodePort } from "babylonjs-node-editor/diagram/nodePort";
+    export interface IFrameNodePortPropertyTabComponentProps {
+        globalState: GlobalState;
+        nodePort: NodePort;
+    }
+    export class NodePortPropertyTabComponent extends React.Component<IFrameNodePortPropertyTabComponentProps> {
+        private _onSelectionChangedObserver;
+        constructor(props: IFrameNodePortPropertyTabComponentProps);
+        componentWillUnmount(): void;
+        render(): JSX.Element;
+    }
+}
 declare module "babylonjs-node-editor/components/propertyTab/propertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "babylonjs-node-editor/globalState";
@@ -1562,14 +1579,17 @@ declare module "babylonjs-node-editor/components/propertyTab/propertyTabComponen
     import { GraphFrame } from "babylonjs-node-editor/diagram/graphFrame";
     import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
     import { FrameNodePort } from "babylonjs-node-editor/diagram/frameNodePort";
+    import { NodePort } from "babylonjs-node-editor/diagram/nodePort";
     interface IPropertyTabComponentProps {
         globalState: GlobalState;
     }
-    export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, {
+    interface IPropertyTabComponentState {
         currentNode: Nullable<GraphNode>;
         currentFrame: Nullable<GraphFrame>;
         currentFrameNodePort: Nullable<FrameNodePort>;
-    }> {
+        currentNodePort: Nullable<NodePort>;
+    }
+    export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, IPropertyTabComponentState> {
         private _onBuiltObserver;
         constructor(props: IPropertyTabComponentProps);
         componentDidMount(): void;
@@ -1892,7 +1912,6 @@ declare module NODEEDITOR {
     export class FrameNodePort extends NodePort {
         connectionPoint: BABYLON.NodeMaterialConnectionPoint;
         node: GraphNode;
-        private _portLabel;
         private _parentFrameId;
         private _isInput;
         private _framePortPosition;
@@ -1901,9 +1920,7 @@ declare module NODEEDITOR {
         get parentFrameId(): number;
         get onFramePortPositionChangedObservable(): BABYLON.Observable<FrameNodePort>;
         get isInput(): boolean;
-        get portLabel(): string;
         get framePortId(): number;
-        set portLabel(newLabel: string);
         get framePortPosition(): FramePortPosition;
         set framePortPosition(position: FramePortPosition);
         constructor(portContainer: HTMLElement, connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState, isInput: boolean, framePortId: number, parentFrameId: number);
@@ -2052,10 +2069,14 @@ declare module NODEEDITOR {
         protected _element: HTMLDivElement;
         protected _img: HTMLImageElement;
         protected _globalState: GlobalState;
+        protected _portLabelElement: Element;
         protected _onCandidateLinkMovedObserver: BABYLON.Nullable<BABYLON.Observer<BABYLON.Nullable<BABYLON.Vector2>>>;
         protected _onSelectionChangedObserver: BABYLON.Nullable<BABYLON.Observer<BABYLON.Nullable<GraphFrame | GraphNode | NodeLink | NodePort | FramePortData>>>;
         delegatedPort: BABYLON.Nullable<FrameNodePort>;
         get element(): HTMLDivElement;
+        get portName(): string;
+        set portName(newName: string);
+        hasLabel(): boolean;
         refresh(): void;
         constructor(portContainer: HTMLElement, connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState);
         dispose(): void;
@@ -2942,6 +2963,7 @@ declare module NODEEDITOR {
         private _isVisible;
         get isVisible(): boolean;
         set isVisible(value: boolean);
+        private _upateNodePortNames;
         get outputPorts(): NodePort[];
         get inputPorts(): NodePort[];
         get links(): NodeLink[];
@@ -3075,14 +3097,28 @@ declare module NODEEDITOR {
     }
 }
 declare module NODEEDITOR {
+    export interface IFrameNodePortPropertyTabComponentProps {
+        globalState: GlobalState;
+        nodePort: NodePort;
+    }
+    export class NodePortPropertyTabComponent extends React.Component<IFrameNodePortPropertyTabComponentProps> {
+        private _onSelectionChangedObserver;
+        constructor(props: IFrameNodePortPropertyTabComponentProps);
+        componentWillUnmount(): void;
+        render(): JSX.Element;
+    }
+}
+declare module NODEEDITOR {
     interface IPropertyTabComponentProps {
         globalState: GlobalState;
     }
-    export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, {
+    interface IPropertyTabComponentState {
         currentNode: BABYLON.Nullable<GraphNode>;
         currentFrame: BABYLON.Nullable<GraphFrame>;
         currentFrameNodePort: BABYLON.Nullable<FrameNodePort>;
-    }> {
+        currentNodePort: BABYLON.Nullable<NodePort>;
+    }
+    export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, IPropertyTabComponentState> {
         private _onBuiltObserver;
         constructor(props: IPropertyTabComponentProps);
         componentDidMount(): void;

dist/preview release/packagesSizeBaseLine.json

@@ -1 +1 @@
-{"thinEngineOnly":115670,"engineOnly":152078,"sceneOnly":511003,"minGridMaterial":643701,"minStandardMaterial":785063}
+{"thinEngineOnly":115670,"engineOnly":152078,"sceneOnly":511043,"minGridMaterial":643741,"minStandardMaterial":785103}

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

@@ -22085,9 +22085,6 @@ declare module "babylonjs/Materials/material" {
          * Stores the z offset value
          */
         zOffset: number;
-        /**
-         * Gets a value specifying if wireframe mode is enabled
-         */
         get wireframe(): boolean;
         /**
          * Sets the state of wireframe mode
@@ -61328,6 +61325,7 @@ declare module "babylonjs/Materials/Node/nodeMaterialBlock" {
         serialize(): any;
         /** @hidden */
         _deserialize(serializationObject: any, scene: Scene, rootUrl: string): void;
+        private _deserializePortDisplayNames;
         /**
          * Release resources
          */
@@ -61571,6 +61569,10 @@ declare module "babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint" {
          */
         name: string;
         /**
+         * Gets or sets the connection point name
+         */
+        displayName: string;
+        /**
          * Gets or sets a boolean indicating that this connection point can be omitted
          */
         isOptional: boolean;
@@ -61651,9 +61653,10 @@ declare module "babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint" {
         disconnectFrom(endpoint: NodeMaterialConnectionPoint): NodeMaterialConnectionPoint;
         /**
          * Serializes this point in a JSON representation
+         * @param isInput defines if the connection point is an input (default is true)
          * @returns the serialized point object
          */
-        serialize(): any;
+        serialize(isInput?: boolean): any;
         /**
          * Release resources
          */
@@ -95971,9 +95974,6 @@ declare module BABYLON {
          * Stores the z offset value
          */
         zOffset: number;
-        /**
-         * Gets a value specifying if wireframe mode is enabled
-         */
         get wireframe(): boolean;
         /**
          * Sets the state of wireframe mode
@@ -133143,6 +133143,7 @@ declare module BABYLON {
         serialize(): any;
         /** @hidden */
         _deserialize(serializationObject: any, scene: Scene, rootUrl: string): void;
+        private _deserializePortDisplayNames;
         /**
          * Release resources
          */
@@ -133368,6 +133369,10 @@ declare module BABYLON {
          */
         name: string;
         /**
+         * Gets or sets the connection point name
+         */
+        displayName: string;
+        /**
          * Gets or sets a boolean indicating that this connection point can be omitted
          */
         isOptional: boolean;
@@ -133448,9 +133453,10 @@ declare module BABYLON {
         disconnectFrom(endpoint: NodeMaterialConnectionPoint): NodeMaterialConnectionPoint;
         /**
          * Serializes this point in a JSON representation
+         * @param isInput defines if the connection point is an input (default is true)
          * @returns the serialized point object
          */
-        serialize(): any;
+        serialize(isInput?: boolean): any;
         /**
          * Release resources
          */

dist/preview release/what's new.md

@@ -26,6 +26,7 @@
 
 - Frames are now resizable from the corners ([belfortk](https://github.com/belfortk)
 - Can now rename and re-order frame inputs and outputs ([belfortk](https://github.com/belfortk)
+- Can now edit Node port names ([belfortk](https://github.com/belfortk)
 
 ### Inspector
 

nodeEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -17,6 +17,7 @@ import { TextLineComponent } from '../../sharedComponents/textLineComponent';
 import { Engine } from 'babylonjs/Engines/engine';
 import { FramePropertyTabComponent } from '../../diagram/properties/framePropertyComponent';
 import { FrameNodePortPropertyTabComponent } from '../../diagram/properties/frameNodePortPropertyComponent';
+import { NodePortPropertyTabComponent } from '../../diagram/properties/nodePortPropertyComponent';
 import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
 import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes';
 import { Color3LineComponent } from '../../sharedComponents/color3LineComponent';
@@ -28,6 +29,7 @@ import { Vector4LineComponent } from '../../sharedComponents/vector4LineComponen
 import { Observer } from 'babylonjs/Misc/observable';
 import { NodeMaterial } from 'babylonjs/Materials/Node/nodeMaterial';
 import { FrameNodePort } from '../../diagram/frameNodePort';
+import { NodePort } from '../../diagram/nodePort';
 import { isFramePortData } from '../../diagram/graphCanvas';
 require("./propertyTab.scss");
 
@@ -35,25 +37,34 @@ interface IPropertyTabComponentProps {
     globalState: GlobalState;
 }
 
-export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, { currentNode: Nullable<GraphNode>, currentFrame: Nullable<GraphFrame>, currentFrameNodePort: Nullable<FrameNodePort> }> {
+interface IPropertyTabComponentState { 
+    currentNode: Nullable<GraphNode>, 
+    currentFrame: Nullable<GraphFrame>, 
+    currentFrameNodePort: Nullable<FrameNodePort>,
+    currentNodePort: Nullable<NodePort>
+ }
+
+export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, IPropertyTabComponentState> {
     private _onBuiltObserver: Nullable<Observer<void>>;
 
     constructor(props: IPropertyTabComponentProps) {
         super(props)
 
-        this.state = { currentNode: null, currentFrame: null, currentFrameNodePort: null };
+        this.state = { currentNode: null, currentFrame: null, currentFrameNodePort: null, currentNodePort: null };
     }
 
     componentDidMount() {
         this.props.globalState.onSelectionChangedObservable.add(selection => {
             if (selection instanceof GraphNode) {
-                this.setState({ currentNode: selection, currentFrame: null, currentFrameNodePort: null });
+                this.setState({ currentNode: selection, currentFrame: null, currentFrameNodePort: null, currentNodePort: null });
             } else if (selection instanceof GraphFrame) {
-                this.setState({ currentNode: null, currentFrame: selection, currentFrameNodePort: null });
+                this.setState({ currentNode: null, currentFrame: selection, currentFrameNodePort: null, currentNodePort: null });
             } else if(isFramePortData(selection)) {
-                this.setState({ currentNode: null, currentFrame: selection.frame, currentFrameNodePort: selection.port });
+                this.setState({ currentNode: null, currentFrame: selection.frame, currentFrameNodePort: selection.port, currentNodePort: null });
+            } else if (selection instanceof NodePort && selection.hasLabel()) {
+                this.setState({ currentNode: null, currentFrame: null, currentFrameNodePort: null, currentNodePort: selection})
             } else {
-                this.setState({ currentNode: null, currentFrame: null, currentFrameNodePort: null });
+                this.setState({ currentNode: null, currentFrame: null, currentFrameNodePort: null, currentNodePort: null });
             }
         });
 
@@ -240,7 +251,7 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                             NODE MATERIAL EDITOR
                         </div>
                     </div>
-                    {this.state.currentNode.renderProperties()}
+                    {this.state.currentNode?.renderProperties() || this.state.currentNodePort?.node.renderProperties()}
                 </div>
             );
         }
@@ -251,6 +262,12 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
             );
         }
 
+        if (this.state.currentNodePort) {
+            return (
+                <NodePortPropertyTabComponent globalState={this.props.globalState} nodePort={this.state.currentNodePort}/>
+            );
+        }
+
         if (this.state.currentFrame) {
             return (
                 <FramePropertyTabComponent globalState={this.props.globalState} frame={this.state.currentFrame}/>

nodeEditor/src/diagram/frameNodePort.ts

@@ -9,7 +9,6 @@ import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMateri
 import { FramePortData, isFramePortData } from './graphCanvas';
 
 export class FrameNodePort extends NodePort {
-    private _portLabel: Element;
     private _parentFrameId: number;
     private _isInput: boolean;
     private _framePortPosition: FramePortPosition
@@ -28,25 +27,16 @@ export class FrameNodePort extends NodePort {
         return this._isInput;
     }
 
-    public get portLabel() {
-        return this._portLabel.innerHTML;
-    }
-
     public get framePortId() {
         return this._framePortId;
     }
 
-    public set portLabel(newLabel: string) {
-        this._portLabel.innerHTML = newLabel;
-    }
-
     public get framePortPosition() {
         return this._framePortPosition;
     }
 
     public set framePortPosition(position: FramePortPosition) {
         this._framePortPosition = position;
-        console.log(this.onFramePortPositionChangedObservable.observers);
         this.onFramePortPositionChangedObservable.notifyObservers(this);
     }
 
@@ -54,7 +44,6 @@ export class FrameNodePort extends NodePort {
         super(portContainer, connectionPoint,node, globalState);
 
         this._parentFrameId = parentFrameId;
-        this._portLabel = portContainer.children[0];
         this._isInput = isInput;
         this._framePortId = framePortId;
 
@@ -83,7 +72,7 @@ export class FrameNodePort extends NodePort {
         if (!displayManager || displayManager.shouldDisplayPortLabels(block)) {
             let portLabel = root.ownerDocument!.createElement("div");
             portLabel.classList.add("port-label");
-            portLabel.innerHTML = connectionPoint.name;        
+            portLabel.innerHTML = connectionPoint.displayName || connectionPoint.name;        
             portContainer.appendChild(portLabel);
         }
 

nodeEditor/src/diagram/graphCanvas.tsx

@@ -198,6 +198,8 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
                     } else {                    
                         this._selectedNodes = [selection];
                     }
+                } else if(selection instanceof NodePort && !selection.hasLabel()){ // if node port is uneditable, select graphNode instead
+                    props.globalState.onSelectionChangedObservable.notifyObservers(selection.node)
                 } else if(selection instanceof NodePort){
                     this._selectedNodes = [];
                     this._selectedFrame = null;
@@ -625,6 +627,8 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
                         }
                         this.props.globalState.onSelectionChangedObservable.notifyObservers(data);
                     }
+                } else if(this._candidateLink.portA instanceof NodePort){
+                    this.props.globalState.onSelectionChangedObservable.notifyObservers(this._candidateLink.portA );
                 }
             }
             this._candidateLink.dispose();

nodeEditor/src/diagram/graphNode.ts

@@ -51,6 +51,7 @@ export class GraphNode {
             this._visual.classList.add("hidden");
         } else {
             this._visual.classList.remove("hidden");
+            this._upateNodePortNames();
         }
 
         for (var link of this._links) {
@@ -60,6 +61,14 @@ export class GraphNode {
         this._refreshLinks();
     }
 
+    private _upateNodePortNames(){
+        for (var port of this._inputPorts.concat(this._outputPorts)) {
+            if(port.hasLabel()){
+                port.portName = port.connectionPoint.displayName || port.connectionPoint.name;
+            }
+        }
+    }
+
     public get outputPorts() {
         return this._outputPorts;
     }

nodeEditor/src/diagram/nodePort.ts

@@ -16,6 +16,7 @@ export class NodePort {
     protected _element: HTMLDivElement;
     protected _img: HTMLImageElement;
     protected _globalState: GlobalState;
+    protected _portLabelElement: Element;
     protected _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;
     protected _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphFrame | GraphNode | NodeLink | NodePort | FramePortData>>>;  
     
@@ -29,6 +30,21 @@ export class NodePort {
         return this._element;
     }
 
+    public get portName(){
+        return this.connectionPoint.displayName || this.connectionPoint.name;
+    }
+
+    public set portName(newName: string){
+        if(this._portLabelElement) {
+            this.connectionPoint.displayName = newName;
+            this._portLabelElement.innerHTML = newName;
+        }
+    }
+
+    public hasLabel(){
+        return !!this._portLabelElement;
+    }
+
     public refresh() {
         this._element.style.background = BlockTools.GetColorFromConnectionNodeType(this.connectionPoint.type);
         switch (this.connectionPoint.type) {
@@ -62,6 +78,11 @@ export class NodePort {
         this._img = portContainer.ownerDocument!.createElement("img");
         this._element.appendChild(this._img );
 
+        // determine if node name is editable
+        if (portContainer.children[0].className === 'port-label') {
+            this._portLabelElement = portContainer.children[0];
+        }
+
         (this._element as any).port = this;
 
         // Drag support
@@ -79,6 +100,14 @@ export class NodePort {
             this._globalState.onCandidatePortSelectedObservable.notifyObservers(this);
         });
 
+        this._onSelectionChangedObserver = this._globalState.onSelectionChangedObservable.add((selection) => {
+            if (selection === this) {
+                this._img.classList.add("selected");
+            } else {
+                this._img.classList.remove("selected");
+            }
+        });
+
         this.refresh();
     }
 
@@ -102,7 +131,7 @@ export class NodePort {
         if (!displayManager || displayManager.shouldDisplayPortLabels(block)) {
             let portLabel = root.ownerDocument!.createElement("div");
             portLabel.classList.add("port-label");
-            portLabel.innerHTML = connectionPoint.name;        
+            portLabel.innerHTML = connectionPoint.displayName || connectionPoint.name;        
             portContainer.appendChild(portLabel);
         }
     

nodeEditor/src/diagram/properties/frameNodePortPropertyComponent.tsx

@@ -62,7 +62,7 @@ export class FrameNodePortPropertyTabComponent extends React.Component<IFrameNod
                 </div>
                 <div>
                     <LineContainerComponent title="GENERAL">
-                        <TextInputLineComponent globalState={this.props.globalState} label="Port Label" propertyName="portLabel" target={this.props.frameNodePort} />
+                        <TextInputLineComponent globalState={this.props.globalState} label="Port Name" propertyName="portName" target={this.props.frameNodePort} />
                         {this.props.frameNodePort.framePortPosition !== FramePortPosition.Top && <ButtonLineComponent label="Move Port Up" onClick={() => {
                             this.props.frame.moveFramePortUp(this.props.frameNodePort);
                         }} />}

nodeEditor/src/diagram/properties/nodePortPropertyComponent.tsx

@@ -0,0 +1,47 @@
+
+import * as React from "react";
+import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
+import { GlobalState } from '../../globalState';
+import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
+import {  GraphFrame } from '../graphFrame';
+import { Nullable } from 'babylonjs/types';
+import { Observer } from 'babylonjs/Misc/observable';
+import { NodePort } from '../nodePort';
+import { GraphNode } from '../graphNode';
+import { NodeLink } from '../nodeLink';
+import { FramePortData } from '../graphCanvas';
+
+export interface IFrameNodePortPropertyTabComponentProps {
+    globalState: GlobalState
+    nodePort: NodePort;
+}
+
+export class NodePortPropertyTabComponent extends React.Component<IFrameNodePortPropertyTabComponentProps> {
+    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphFrame | NodePort | GraphNode | NodeLink | FramePortData>>>;
+
+    constructor(props: IFrameNodePortPropertyTabComponentProps) {
+        super(props);
+    }
+
+    componentWillUnmount() {
+        this.props.globalState.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);
+    }
+
+    render() {
+        return (
+            <div id="propertyTab">
+                <div id="header">
+                    <img id="logo" src="https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" />
+                    <div id="title">
+                        NODE MATERIAL EDITOR
+                </div>
+                </div>
+                <div>
+                    <LineContainerComponent title="GENERAL">
+                        {this.props.nodePort.hasLabel() && <TextInputLineComponent globalState={this.props.globalState} label="Port Label" propertyName="portName" target={this.props.nodePort} />}
+                    </LineContainerComponent>
+                </div>
+            </div>
+        );
+    }
+}

src/Materials/Node/nodeMaterialBlock.ts

@@ -656,11 +656,16 @@ export class NodeMaterialBlock {
         serializationObject.comments = this.comments;
 
         serializationObject.inputs = [];
+        serializationObject.outputs = [];
 
         for (var input of this.inputs) {
             serializationObject.inputs.push(input.serialize());
         }
 
+        for (var output of this.outputs) {
+            serializationObject.outputs.push(output.serialize(false));
+        }
+
         return serializationObject;
     }
 
@@ -668,6 +673,26 @@ export class NodeMaterialBlock {
     public _deserialize(serializationObject: any, scene: Scene, rootUrl: string) {
         this.name = serializationObject.name;
         this.comments = serializationObject.comments;
+        this._deserializePortDisplayNames(serializationObject);
+    }
+
+    private _deserializePortDisplayNames(serializationObject: any) {
+        const serializedInputs = serializationObject.inputs;
+        const serializedOutputs = serializationObject.outputs;
+        if (serializedInputs) {
+            serializedInputs.forEach((port: any, i: number) => {
+                if (port.displayName) {
+                    this.inputs[i].displayName = port.displayName;
+                }
+            });
+        }
+        if (serializedOutputs) {
+            serializedOutputs.forEach((port: any, i: number) => {
+                if (port.displayName) {
+                    this.outputs[i].displayName = port.displayName;
+                }
+            });
+        }
     }
 
     /**

src/Materials/Node/nodeMaterialBlockConnectionPoint.ts

@@ -134,6 +134,11 @@ export class NodeMaterialConnectionPoint {
     public name: string;
 
     /**
+     * Gets or sets the connection point name
+     */
+    public displayName: string;
+
+    /**
      * Gets or sets a boolean indicating that this connection point can be omitted
      */
     public isOptional: boolean;
@@ -426,14 +431,16 @@ export class NodeMaterialConnectionPoint {
 
     /**
      * Serializes this point in a JSON representation
+     * @param isInput defines if the connection point is an input (default is true)
      * @returns the serialized point object
      */
-    public serialize(): any {
+    public serialize(isInput = true): any {
         let serializationObject: any = {};
 
         serializationObject.name = this.name;
+        serializationObject.displayName = this.displayName;
 
-        if (this.connectedPoint) {
+        if (isInput && this.connectedPoint) {
             serializationObject.inputName = this.name;
             serializationObject.targetBlockId = this.connectedPoint.ownerBlock.uniqueId;
             serializationObject.targetConnectionName = this.connectedPoint.name;

src/Materials/material.ts

@@ -501,10 +501,6 @@ export class Material implements IAnimatable {
     @serialize()
     public zOffset = 0;
 
-    /**
-     * Gets a value specifying if wireframe mode is enabled
-     */
-    @serialize()
     public get wireframe(): boolean {
         switch (this._fillMode) {
             case Material.WireFrameFillMode:

src/scene.ts

@@ -3908,6 +3908,10 @@ export class Scene extends AbstractScene implements IAnimatable {
             return;
         }
 
+        if (this.onReadyObservable.hasObservers() && this._executeWhenReadyTimeoutId === -1) {
+            this._checkIsReady();
+        }
+
         this._frameId++;
 
         // Register components that have been associated lately to the scene.