more dosc

nodeEditor/src/components/customDiragramNodes/generic/genericNodeModel.ts

@@ -3,6 +3,7 @@ import { Nullable } from 'babylonjs/types';
 import { NodeMaterialBlock } from 'babylonjs/Materials/Node/nodeMaterialBlock';
 import { Texture } from 'babylonjs/Materials/Textures/texture';
 import { Vector2, Vector3, Vector4, Matrix } from 'babylonjs/Maths/math';
+import { GenericPortModel } from './genericPortModel';
 
 /**
  * Generic node model which stores information about a node editor block
@@ -37,6 +38,8 @@ export class GenericNodeModel extends NodeModel {
 	 */
 	public matrix: Nullable<Matrix> = null;
 
+	public ports: {[s:string]:GenericPortModel};
+
 	/**
 	 * Constructs the node model
 	 */

nodeEditor/src/components/graphEditor.tsx

@@ -37,33 +37,37 @@ import { MultiplyBlock } from 'babylonjs/Materials/Node/Blocks/multiplyBlock';
 import { Vector2TransformBlock } from 'babylonjs/Materials/Node/Blocks/vector2TransformBlock';
 import { Vector3TransformBlock } from 'babylonjs/Materials/Node/Blocks/vector3TransformBlock';
 import { Vector4TransformBlock } from 'babylonjs/Materials/Node/Blocks/vector4TransformBlock';
-//require("../../../inspector/src/components/actionTabs/actionTabs.scss");
+
 require("storm-react-diagrams/dist/style.min.css");
+
 /*
-Data vs View
-NodeMaterialBlock = GenericNodeModel
-NodeMaterialConnectionPoint = GenericPortModel (Connection is a LinkModel, which is a built in react-storm type)
+Graph Editor Overview
 
-You can only access data from view, view is not accessible from data
+Storm React setup:
+GenericNodeModel - Represents the nodes in the graph and can be any node type (eg. texture, vector2, etc)
+GenericNodeWidget - Renders the node model in the graph 
+GenericPortModel - Represents the input/output of a node (contained within each GenericNodeModel)
 
-Traversing data to create view is done in createNodeFromObject method
+Generating/modifying the graph:
+Generating node graph - the createNodeFromObject method is used to recursively create the graph
+Modifications to the graph - The listener in the constructor of GraphEditor listens for port changes and updates the node material based on changes
+Saving the graph/generating code - Not yet done
 */
 
-
-
-
-
 interface IGraphEditorProps {
     globalState: GlobalState;
 }
 
 export class GraphEditor extends React.Component<IGraphEditorProps> {
-    engine:DiagramEngine;
-    model: DiagramModel;
+    private _engine:DiagramEngine;
+    private _model: DiagramModel;
 
-    nodes = new Array<any>();
+    private _nodes = new Array<GenericNodeModel>();
 
-    rowPos = new Array<number>()
+    /**
+     * Current row/column position used when adding new nodes
+     */
+    private _rowPos = new Array<number>()
     
     /**
      * Creates a node and recursivly creates its parent nodes from it's input
@@ -76,17 +80,17 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
         }
     ){
         // Update rows/columns
-        if(this.rowPos[options.column] == undefined){
-            this.rowPos[options.column] = 0;
+        if(this._rowPos[options.column] == undefined){
+            this._rowPos[options.column] = 0;
         }else{
-            this.rowPos[options.column]++;
+            this._rowPos[options.column]++;
         }
 
         // Create new node in the graph
         var outputNode = new GenericNodeModel();
-        this.nodes.push(outputNode)
-        outputNode.setPosition(1600-(300*options.column), 200*this.rowPos[options.column])
-        this.model.addAll(outputNode);
+        this._nodes.push(outputNode)
+        outputNode.setPosition(1600-(300*options.column), 200*this._rowPos[options.column])
+        this._model.addAll(outputNode);
 
         if(options.nodeMaterialBlock){
             outputNode.block = options.nodeMaterialBlock
@@ -108,7 +112,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                 if(connection._connectedPoint){
                     // Block is not a leaf node, create node for the given block type
                     var connectedNode;
-                    var existingNodes = this.nodes.filter((n)=>{return n.block == (connection as any)._connectedPoint._ownerBlock});
+                    var existingNodes = this._nodes.filter((n)=>{return n.block == (connection as any)._connectedPoint._ownerBlock});
                     if(existingNodes.length == 0){
                         connectedNode = this.createNodeFromObject({column: options.column+1, nodeMaterialBlock: connection._connectedPoint._ownerBlock});
                     }else{
@@ -116,7 +120,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                     }
            
                     let link = connectedNode.ports[connection._connectedPoint.name].link(inputPort);
-                    this.model.addAll(link);
+                    this._model.addAll(link);
                     
                 }else {
                     // Create value node for the connection
@@ -138,14 +142,12 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                     var ports = localNode.getPorts()
                     for(var key in ports){
                         let link = (ports[key] as GenericPortModel).link(inputPort);
-                        this.model.addAll(link);
+                        this._model.addAll(link);
                     }
                 }
             })
         }
         
-        
-    
         return outputNode;
     }
 
@@ -166,18 +168,17 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
 
     constructor(props: IGraphEditorProps) {
         super(props);
-        
 
         // setup the diagram engine
-        this.engine = new DiagramEngine();
-        this.engine.installDefaultFactories()
-        this.engine.registerNodeFactory(new GenericNodeFactory());
+        this._engine = new DiagramEngine();
+        this._engine.installDefaultFactories()
+        this._engine.registerNodeFactory(new GenericNodeFactory());
 
         // setup the diagram model
-        this.model = new DiagramModel();
+        this._model = new DiagramModel();
 
         // Listen to events to connect/disconnect blocks or
-        this.model.addListener({
+        this._model.addListener({
             linksUpdated: (e)=>{
                 if(!e.isCreated){
                     // Link is deleted
@@ -250,10 +251,10 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
         }
 
         // Zoom out a bit at the start
-        this.model.setZoomLevel(20)
+        this._model.setZoomLevel(20)
 
         // load model into engine
-        this.engine.setDiagramModel(this.model);
+        this._engine.setDiagramModel(this._model);
     }
 
     addNodeFromClass(ObjectClass:typeof NodeMaterialBlock){
@@ -266,7 +267,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
         // This is needed to fix link offsets when created, (eg. create a fog block)
         // Todo figure out how to correct this without this
         setTimeout(() => {
-            widget.startFiringAction(new MoveCanvasAction(1,0, this.model));
+            widget.startFiringAction(new MoveCanvasAction(1,0, this._model));
         }, 500);
 
         return localNode
@@ -375,7 +376,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                 </div>
                 
                 {/* The node graph diagram */}
-                <DiagramWidget deleteKeys={[46]} ref={"test"} inverseZoom={true} className="srd-demo-canvas" diagramEngine={this.engine} maxNumberPointsPerLink={0} />
+                <DiagramWidget deleteKeys={[46]} ref={"test"} inverseZoom={true} className="srd-demo-canvas" diagramEngine={this._engine} maxNumberPointsPerLink={0} />
             </div>
         );