Moar colors ;) #6012

nodeEditor/src/blockTools.ts

@@ -68,6 +68,35 @@ export class BlockTools {
         return null;
     }
 
+    public static GetColorFromConnectionNodeType(type: NodeMaterialBlockConnectionPointTypes) {
+        let color = "Red";
+        switch (type) {
+            case NodeMaterialBlockConnectionPointTypes.Float:
+				color = "AntiqueWhite";
+                break;
+            case NodeMaterialBlockConnectionPointTypes.Vector2:                
+				color = "Chocolate";
+                break;
+            case NodeMaterialBlockConnectionPointTypes.Vector3:                
+				color = "Crimson";
+                break;
+            case NodeMaterialBlockConnectionPointTypes.Vector4:                
+				color = "DarkMagenta";
+                break;
+            case NodeMaterialBlockConnectionPointTypes.Color3:                
+				color = "ForestGreen";
+                break;
+            case NodeMaterialBlockConnectionPointTypes.Color4:                
+				color = "Gold";
+                break;
+            case NodeMaterialBlockConnectionPointTypes.Matrix:                
+				color = "LightCoral";
+                break;
+        }
+
+        return color;
+    }
+
     public static GetConnectionNodeTypeFromString(type: string) {
         switch (type) {
             case "Float":

nodeEditor/src/components/diagram/defaultNodeModel.ts

@@ -3,7 +3,7 @@ import { Nullable } from 'babylonjs/types';
 import { NodeMaterialBlock } from 'babylonjs/Materials/Node/nodeMaterialBlock';
 import { GraphEditor, NodeCreationOptions } from '../../graphEditor';
 import { GlobalState } from '../../globalState';
-import { DefaultPortModel } from './defaultPortModel';
+import { DefaultPortModel } from './port/defaultPortModel';
 
 /**
  * Generic node model which stores information about a node editor block

nodeEditor/src/components/diagram/diagram.scss

@@ -106,7 +106,7 @@
     .inputs {
         grid-row: 2;
         grid-column: 1;
-        padding-bottom: 5px;
+        padding-bottom: 8px;
 
         .input-port {
             display: grid;
@@ -121,6 +121,16 @@
                 margin-left: -8px;
                 position: relative;
 
+                .input-port-connection {
+                    pointer-events: none;
+                    grid-column: 1;
+                    grid-row: 1;
+                    z-index: 10;
+                    background: black;
+                    border-radius: 10px;
+                    z-index: 9;
+                }
+
                 .input-port-type {
                     width: 15px;
                     pointer-events: none;
@@ -167,7 +177,7 @@
     .outputs {
         grid-row: 2;
         grid-column: 2;
-        padding-bottom: 5px;
+        padding-bottom: 8px;
 
         .output-port {
             display: grid;
@@ -182,6 +192,16 @@
                 position: relative;    
                 margin-left: 3px;
 
+                .output-port-connection {
+                    pointer-events: none;
+                    grid-column: 1;
+                    grid-row: 1;
+                    z-index: 10;
+                    background: black;
+                    border-radius: 10px;
+                    z-index: 9;
+                }
+
                 .output-port-type {
                     pointer-events: none;
                     grid-column: 1;
@@ -208,7 +228,7 @@
                     position: absolute;
                     border-bottom-right-radius: 10px;
                     border-top-right-radius: 10px;
-                    top: -4px;
+                    top: -3.5px;
                     left: 7px;      
                     z-index: 1;      
                 }

nodeEditor/src/components/diagram/link/advancedLinkFactory.tsx

@@ -0,0 +1,59 @@
+import { DefaultLinkFactory, DefaultLinkWidget } from 'storm-react-diagrams';
+import * as React from 'react';
+import { DefaultPortModel } from '../port/defaultPortModel';
+import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPointTypes';
+import { AdvancedLinkModel } from './advancedLinkModel';
+import { BlockTools } from '../../../blockTools';
+
+export class AdvancedLinkFactory extends DefaultLinkFactory {
+	constructor() {
+		super();
+		this.type = "advanced";
+	}
+
+	getNewInstance(initialConfig?: any): AdvancedLinkModel {
+		return new AdvancedLinkModel();
+	}
+
+	generateLinkSegment(model: AdvancedLinkModel, widget: DefaultLinkWidget, selected: boolean, path: string) {
+        const portModel = (model.getSourcePort() || model.getTargetPort()) as DefaultPortModel;
+        const type = portModel.connection!.type;
+		let color = BlockTools.GetColorFromConnectionNodeType(type);
+		let width = 1;
+
+        // Color
+        switch (type) {
+            case NodeMaterialBlockConnectionPointTypes.Float:
+				width = 1;
+                break;
+            case NodeMaterialBlockConnectionPointTypes.Vector2:                
+				width = 2;
+                break;
+            case NodeMaterialBlockConnectionPointTypes.Vector3:                
+				width = 3;
+                break;
+            case NodeMaterialBlockConnectionPointTypes.Vector4:                
+				width = 4;
+                break;
+            case NodeMaterialBlockConnectionPointTypes.Color3:                
+				width = 3;
+                break;
+            case NodeMaterialBlockConnectionPointTypes.Color4:                
+				width = 4;
+                break;
+            case NodeMaterialBlockConnectionPointTypes.Matrix:                
+				width = 6;
+                break;
+        }
+
+
+		return (
+			<path
+				className={selected ? widget.bem("--path-selected") : ""}
+				strokeWidth={width}
+				stroke={color}
+				d={path}
+			/>
+		);
+	}
+}

nodeEditor/src/components/diagram/link/advancedLinkModel.tsx

@@ -0,0 +1,7 @@
+import { DefaultLinkModel } from 'storm-react-diagrams';
+
+export class AdvancedLinkModel extends DefaultLinkModel {
+	constructor() {
+		super("advanced");
+	}
+}

nodeEditor/src/components/diagram/defaultPortModel.ts

@@ -1,7 +1,8 @@
-import { LinkModel, PortModel, DefaultLinkModel } from "storm-react-diagrams";
+import { LinkModel, PortModel } from "storm-react-diagrams";
 import { Nullable } from 'babylonjs/types';
 import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
-import { DefaultNodeModel } from './defaultNodeModel';
+import { DefaultNodeModel } from '../defaultNodeModel';
+import { AdvancedLinkModel } from '../link/advancedLinkModel';
 
 /**
  * Port model
@@ -51,7 +52,7 @@ export class DefaultPortModel extends PortModel {
     }
 
     createLinkModel(): LinkModel {
-        return new DefaultLinkModel();
+        return new AdvancedLinkModel();
     }
 
     static SortInputOutput(a: Nullable<DefaultPortModel>, b: Nullable<DefaultPortModel>) {

nodeEditor/src/components/diagram/port/defaultPortWidget.tsx

@@ -0,0 +1,39 @@
+import { BaseWidget, PortState, NodeModel, BaseWidgetProps } from 'storm-react-diagrams';
+import * as React from 'react';
+
+
+export interface IDefaultPortWidgetProps extends BaseWidgetProps {
+	name: string;
+	node: NodeModel;
+    style: any;
+}
+
+export class DefaultPortWidget extends BaseWidget<IDefaultPortWidgetProps, PortState> {
+    constructor(props: IDefaultPortWidgetProps) {
+		super("srd-port", props);
+		this.state = {
+			selected: false
+		};
+	}
+
+	getClassName() {
+		return "port " + super.getClassName() + (this.state.selected ? this.bem("--selected") : "");
+	}
+
+	render() {
+		return (
+			<div
+				style={this.props.style}
+				{...this.getProps()}
+				onMouseEnter={() => {
+					this.setState({ selected: true });
+				}}
+				onMouseLeave={() => {
+					this.setState({ selected: false });
+				}}
+				data-name={this.props.name}
+				data-nodeid={this.props.node.getID()}
+			/>
+		);
+	}
+}

nodeEditor/src/components/diagram/portHelper.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
-import { PortWidget } from "storm-react-diagrams";
 import { DefaultNodeModel } from './defaultNodeModel';
-import { DefaultPortModel } from './defaultPortModel';
+import { DefaultPortModel } from './port/defaultPortModel';
 import { Nullable } from 'babylonjs/types';
 import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
 import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPointTypes';
+import { DefaultPortWidget } from './port/defaultPortWidget';
+import { BlockTools } from '../../blockTools';
 
 
 export class PortHelper {
@@ -28,6 +29,12 @@ export class PortHelper {
         return null;
     }
 
+    static _GetPortStyle(type: NodeMaterialBlockConnectionPointTypes) {
+        return {
+            background: BlockTools.GetColorFromConnectionNodeType(type)
+        };
+    }
+
     public static GenerateOutputPorts(node: Nullable<DefaultNodeModel>, ignoreLabel: boolean) {
         if (!node) {
             return new Array<JSX.Element>();
@@ -38,6 +45,10 @@ export class PortHelper {
             if (port.position === "output") {
                 let typeIndicator = this._GetPortTypeIndicator(port.connection!);
 
+                let style = this._GetPortStyle(port.connection!.type);
+
+                let isConnected = port.connection && port.connection.endpoints.length > 0;
+
                 outputPorts.push(
                     <div key={key} className="output-port">
                         {
@@ -47,7 +58,12 @@ export class PortHelper {
                             </div>
                         }
                         <div className="output-port-plug">
-                            <PortWidget key={key} name={port.name} node={node} className={port.connection && port.connection.endpoints.length > 0 ? "connected" : ""} />
+                            <DefaultPortWidget key={key} name={port.name} node={node} style={style} />
+                            {
+                                !isConnected &&
+                                <div className="output-port-connection">                             
+                                </div>                            
+                            }
                             <div className="output-port-type"> 
                                 {
                                     typeIndicator
@@ -73,12 +89,19 @@ export class PortHelper {
             let port = node.ports[key] as DefaultPortModel;
             if (port.position === "input") {                
                 let typeIndicator = this._GetPortTypeIndicator(port.connection!);
+                let style = this._GetPortStyle(port.connection!.type);
 
+                let isConnected = port.connection && port.connection.endpoints.length > 0;
                 if (!includeOnly || includeOnly.indexOf(port.name) !== -1) {
                     inputPorts.push(
                         <div key={key} className="input-port">
                             <div className="input-port-plug">
-                                <PortWidget key={key} name={port.name} node={node} className={port.connection && port.connection.connectedPoint ? "connected" : ""} />
+                                <DefaultPortWidget key={key} name={port.name} node={node} style={style}/>
+                                {
+                                    !isConnected &&
+                                    <div className="output-port-connection">                             
+                                    </div>                            
+                                }                                
                                 <div className="input-port-type"> 
                                     {
                                         typeIndicator

nodeEditor/src/graphEditor.tsx

@@ -19,7 +19,7 @@ import { Portal } from './portal';
 import { TextureNodeFactory } from './components/diagram/texture/textureNodeFactory';
 import { DefaultNodeModel } from './components/diagram/defaultNodeModel';
 import { TextureNodeModel } from './components/diagram/texture/textureNodeModel';
-import { DefaultPortModel } from './components/diagram/defaultPortModel';
+import { DefaultPortModel } from './components/diagram/port/defaultPortModel';
 import { InputNodeFactory } from './components/diagram/input/inputNodeFactory';
 import { InputNodeModel } from './components/diagram/input/inputNodeModel';
 import { TextureBlock } from 'babylonjs/Materials/Node/Blocks/Dual/textureBlock';
@@ -33,6 +33,7 @@ import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
 import { Nullable } from 'babylonjs/types';
 import { MessageDialogComponent } from './sharedComponents/messageDialog';
 import { BlockTools } from './blockTools';
+import { AdvancedLinkFactory } from './components/diagram/link/advancedLinkFactory';
 
 require("storm-react-diagrams/dist/style.min.css");
 require("./main.scss");
@@ -140,6 +141,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
         this._engine.registerNodeFactory(new TextureNodeFactory(this.props.globalState));
         this._engine.registerNodeFactory(new LightNodeFactory(this.props.globalState));
         this._engine.registerNodeFactory(new InputNodeFactory(this.props.globalState));
+        this._engine.registerLinkFactory(new AdvancedLinkFactory());
 
         this.props.globalState.onRebuildRequiredObservable.add(() => {
             if (this.props.globalState.nodeMaterial) {
@@ -273,7 +275,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                             }
                         }
                     } else {
-                        if (!e.link.targetPort && e.link.sourcePort) {
+                        if (!e.link.targetPort && e.link.sourcePort && (e.link.sourcePort as DefaultPortModel).position === "input") {
                             // Drag from input port, we are going to build an input for it                            
                             let input = e.link.sourcePort as DefaultPortModel;
                             let nodeModel = this.addValueNode(BlockTools.GetStringFromConnectionNodeType(input.connection!.type));