Merge pull request #7547 from belfortk/frames-comment

Add comments to NME Frames

dist/preview release/what's new.md

@@ -60,7 +60,6 @@
 - Make sure all properties of CascadedShadowMap class are serialized/parsed ([Popov72](https://github.com/Popov72))
 - Added `textures/opacity.png` file to the Playground ([Popov72](https://github.com/Popov72))
 - Refactored the shadow generators code ([Popov72](https://github.com/Popov72))
-- Added preview area pop up for NME ([Kyle Belfort](https://github.com/belfortk))
 - Supports clip planes with shadows ([sebavan](http://www.github.com/sebavan))
 - Added Workbench color scheme for VSCode ([drigax](https://github.com/drigax) & [Patrick Ryan](https://github.com/PatrickRyanMS))
 
@@ -107,6 +106,8 @@
 - Added diff navigator in the playground ([sailro](http://www.github.com/sailro))
 - Added custom filter to remove internals from the completion in the playground ([sailro](http://www.github.com/sailro))
 - Added support for tagging deprecated members (both in editor and for completion) in the playground ([sailro](http://www.github.com/sailro))
+- Added preview area pop up for NME ([Kyle Belfort](https://github.com/belfortk))
+- Added comments to frames in NME ([Kyle Belfort](https://github.com/belfortk))
 
 ### Meshes
 

nodeEditor/src/diagram/graphFrame.ts

@@ -25,7 +25,8 @@ export class GraphFrame {
     private _headerElement: HTMLDivElement;    
     private _headerTextElement: HTMLDivElement;        
     private _headerCollapseElement: HTMLDivElement;    
-    private _headerCloseElement: HTMLDivElement;    
+    private _headerCloseElement: HTMLDivElement;
+    private _commentsElement: HTMLDivElement;    
     private _portContainer: HTMLDivElement;    
     private _outputPortContainer: HTMLDivElement;    
     private _inputPortContainer: HTMLDivElement;    
@@ -38,6 +39,7 @@ export class GraphFrame {
     private _ports: NodePort[] = [];
     private _controlledPorts: NodePort[] = [];
     private _id: number;
+    private _comments: string;
 
     public onExpandStateChanged = new Observable<GraphFrame>();
 
@@ -241,6 +243,24 @@ export class GraphFrame {
         this.element.style.height = `${gridAlignedBottom - this._gridAlignedY}px`;
     }
 
+    public get comments(): string {
+        return this._comments;
+    }
+
+    public set comments(comments: string) {
+        if (comments.length > 0) {
+            this.element.style.gridTemplateRows = "40px 40px calc(100% - 80px)";
+            this._borderElement.style.gridRow = "1 / span 3";
+            this._portContainer.style.gridRow = "3";
+            this._commentsElement.style.display = "grid";
+            this._commentsElement.style.gridRow = "2";
+            this._commentsElement.style.gridColumn = "1";
+            this._commentsElement.style.paddingLeft = "10px";
+        }
+        this._comments = comments;
+        this._commentsElement.innerText = comments;
+    }
+
     public constructor(candidate: Nullable<HTMLDivElement>, canvas: GraphCanvasComponent, doNotCaptureNodes = false) {
         this._id = GraphFrame._FrameCounter++;
 
@@ -331,8 +351,15 @@ export class GraphFrame {
             } else {
                 this.element.classList.remove("selected");
             }
-        });  
-                
+        }); 
+
+        this._commentsElement = document.createElement('div');
+        this._commentsElement.className = 'frame-comments';
+        this._commentsElement.style.color = 'white';
+        this._commentsElement.style.fontSize = '16px';
+        
+        this.element.appendChild(this._commentsElement);
+
         // Get nodes
         if (!doNotCaptureNodes) {
             this.refresh();
@@ -471,7 +498,8 @@ export class GraphFrame {
             color: this._color.asArray(),
             name: this.name,
             isCollapsed: this.isCollapsed,
-            blocks: this.nodes.map(n => n.block.uniqueId)
+            blocks: this.nodes.map(n => n.block.uniqueId),
+            comments: this._comments
         }
     }
 
@@ -491,6 +519,7 @@ export class GraphFrame {
         newFrame.height = serializationData.height;
         newFrame.name = serializationData.name;
         newFrame.color = Color3.FromArray(serializationData.color);
+        newFrame.comments = serializationData.comments;
 
         if (serializationData.blocks && map) {
             for (var blockId of serializationData.blocks) {

nodeEditor/src/diagram/properties/framePropertyComponent.tsx

@@ -46,6 +46,9 @@ export class FramePropertyTabComponent extends React.Component<IFramePropertyTab
                 <LineContainerComponent title="GENERAL">
                     <TextInputLineComponent globalState={this.props.globalState} label="Name" propertyName="name" target={this.props.frame} />
                     <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.isCollapsed &&
                         <ButtonLineComponent label="Collapse" onClick={() => {

nodeEditor/src/globalState.ts

@@ -35,7 +35,7 @@ export class GlobalState {
     onAnimationCommandActivated = new Observable<void>();
     onCandidateLinkMoved = new Observable<Nullable<Vector2>>();   
     onSelectionBoxMoved = new Observable<ClientRect | DOMRect>();       
-    onFrameCreated = new Observable<GraphFrame>();   
+    onFrameCreated = new Observable<GraphFrame>();
     onCandidatePortSelected = new Observable<Nullable<NodePort>>();
     onGetNodeFromBlock: (block: NodeMaterialBlock) => GraphNode;
     onGridSizeChanged = new Observable<void>();

nodeEditor/src/graphEditor.tsx

@@ -116,7 +116,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps, State> {
         let nodeType: NodeMaterialBlockConnectionPointTypes = BlockTools.GetConnectionNodeTypeFromString(type);
 
         let newInputBlock = new InputBlock(type, undefined, nodeType);
-        return this.createNodeFromObject(newInputBlock)
+        return this.createNodeFromObject(newInputBlock);
     }
 
     componentDidMount() {

nodeEditor/src/nodeLocationInfo.ts

@@ -10,9 +10,10 @@ export interface IFrameData {
     width: number;
     height: number;
     color: number[];
-    name: string,
-    isCollapsed: boolean,
-    blocks: number[]
+    name: string;
+    isCollapsed: boolean;
+    blocks: number[];
+    comments: string;
 }
 
 export interface IEditorData {