Implement renaming of NME Frames inputs/outputs

dist/preview release/what's new.md

@@ -14,6 +14,8 @@
 - Simplified code contributions by fully automating the dev setup with gitpod ([nisarhassan12](https://github.com/nisarhassan12))
 - Add a `CascadedShadowMap.IsSupported` method and log an error instead of throwing an exception when CSM is not supported ([Popov72](https://github.com/Popov72))
 
+- Can now rename NME frames inputs and outputs ([Kyle Belfort](https://github.com/belfortk)
+
 ### Engine
 
 - Allow logging of shader code when a compilation error occurs ([Popov72](https://github.com/Popov72))

nodeEditor/src/diagram/graphFrame.ts

@@ -180,6 +180,10 @@ export class GraphFrame {
         return this._nodes;
     }
 
+    public get ports(){
+        return this._ports;
+    }
+
     public get name() {
         return this._name;
     }
@@ -498,11 +502,6 @@ export class GraphFrame {
         this.x = newX;
         this.y = newY;
 
-        console.log("move():");
-        console.log("oldX: ", oldX);
-        console.log("oldY: ", oldY);
-        console.log("newX: ", newX);
-        console.log("newY: ", oldY);
         for (var selectedNode of this._nodes) {
             selectedNode.x += this.x - oldX;
             selectedNode.y += this.y - oldY;

nodeEditor/src/diagram/nodePort.ts

@@ -14,6 +14,7 @@ export class NodePort {
     private _img: HTMLImageElement;
     private _globalState: GlobalState;
     private _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;
+    private _portLabel: Element;
 
     public delegatedPort: Nullable<NodePort> = null;
 
@@ -25,6 +26,14 @@ export class NodePort {
         return this._element;
     }
 
+    public get portLabel() {
+        return this._portLabel.innerHTML;
+    }
+
+    public set portLabel(newLabel: string) {
+        this._portLabel.innerHTML = newLabel;
+    }
+
     public refresh() {
         this._element.style.background = BlockTools.GetColorFromConnectionNodeType(this.connectionPoint.type);
         switch (this.connectionPoint.type) {
@@ -51,10 +60,12 @@ export class NodePort {
 
     public constructor(portContainer: HTMLElement, public connectionPoint: NodeMaterialConnectionPoint, public node: GraphNode, globalState: GlobalState) {
         this._element = portContainer.ownerDocument!.createElement("div");
-        this._element.classList.add("port");     
+        this._element.classList.add("port");
         portContainer.appendChild(this._element);
         this._globalState = globalState;
 
+        this._portLabel = portContainer.children[0];
+
         this._img = portContainer.ownerDocument!.createElement("img");
         this._element.appendChild(this._img );
 

nodeEditor/src/diagram/properties/framePropertyComponent.tsx

@@ -8,6 +8,7 @@ import { TextInputLineComponent } from '../../sharedComponents/textInputLineComp
 import { ButtonLineComponent } from '../../sharedComponents/buttonLineComponent';
 import { Nullable } from 'babylonjs/types';
 import { Observer } from 'babylonjs/Misc/observable';
+import { NodePort } from '../nodePort';
 
 export interface IFramePropertyTabComponentProps {
     globalState: GlobalState
@@ -48,7 +49,11 @@ export class FramePropertyTabComponent extends React.Component<IFramePropertyTab
                     <Color3LineComponent globalState={this.props.globalState} label="Color" target={this.props.frame} propertyName="color"></Color3LineComponent>
                     <TextInputLineComponent globalState={this.props.globalState} label="Comments" propertyName="comments" target={this.props.frame}
                     />
-
+                    {
+                        this.props.frame.ports && this.props.frame.ports.map((port: NodePort) => 
+                        <TextInputLineComponent globalState={this.props.globalState} label="Port Label" propertyName="portLabel" target={port}/>
+                        )
+                    }
                     {
                         !this.props.frame.isCollapsed &&
                         <ButtonLineComponent label="Collapse" onClick={() => {