better port indicator (#6012)

nodeEditor/src/components/diagram/diagram.scss

@@ -8,6 +8,8 @@
 }
           
 .srd-port {
+    grid-column: 1;
+    grid-row: 1;
     background: rgb(0, 192, 255);
     border-radius: 10px;
     border: black 4px solid;
@@ -107,6 +109,18 @@
                 align-content: center;
                 margin-left: -11px;
 
+                .input-port-type {
+                    pointer-events: none;
+                    grid-column: 1;
+                    grid-row: 1;
+                    display: grid;
+                    align-items: center;
+                    justify-items: center;
+
+                    img {
+                        width: 12px;
+                    }
+                }
             }
 
             .input-port-label {
@@ -134,6 +148,19 @@
                 grid-row: 1;
                 display: grid;
                 align-content: center;
+
+                .output-port-type {
+                    pointer-events: none;
+                    grid-column: 1;
+                    grid-row: 1;
+                    display: grid;
+                    align-items: center;
+                    justify-items: center;
+
+                    img {
+                        width: 12px;
+                    }
+                }
             }
 
             .output-port-label {

nodeEditor/src/components/diagram/portHelper.tsx

@@ -3,9 +3,31 @@ import { PortWidget } from "storm-react-diagrams";
 import { DefaultNodeModel } from './defaultNodeModel';
 import { DefaultPortModel } from './defaultPortModel';
 import { Nullable } from 'babylonjs/types';
+import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
+import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPointTypes';
 
 
 export class PortHelper {
+    private static _GetPortTypeIndicator(connection: NodeMaterialConnectionPoint): Nullable<JSX.Element> {
+        switch (connection.type) {
+            case NodeMaterialBlockConnectionPointTypes.Float:
+            case NodeMaterialBlockConnectionPointTypes.Int:
+                return <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABESURBVDhPY/z//z8DJYAJSpMNRg3Ab4APEL+GYhAbK8AXjSCNIhAmwxsgFoUwUQFNvZAJxCCbQRjExgpGU+LAG8DAAAA+ghAthzG18wAAAABJRU5ErkJggg=="></img>;
+            case NodeMaterialBlockConnectionPointTypes.Vector2:
+                return <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABHSURBVDhPY/z//z8DJYAJSpMN8BngA8SvoRjExgrweQGkUQTCZHgDxKIQJiqgqRcygRhkMwiD2FjB4I4FosBoNA6DaGRgAABqpx09dHGG2QAAAABJRU5ErkJggg=="></img>;
+            case NodeMaterialBlockConnectionPointTypes.Vector3:
+            case NodeMaterialBlockConnectionPointTypes.Color3:
+                return <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABHSURBVDhPY/z//z8DJYAJSmMDPkD8GopBbKwAnwtAGkUgTIY3QCwKYaICfC4gCuAzIBOIQTaDMIiNFYwG4mgggsCQD0QGBgD0QypNGzDYqQAAAABJRU5ErkJggg=="></img>;
+            case NodeMaterialBlockConnectionPointTypes.Vector4:
+            case NodeMaterialBlockConnectionPointTypes.Color4:
+                return <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABRSURBVDhPY/z//z8DJYAJSpMN0A3wAeLXUAxiwwAucQYGkBeQ8GsghgEQm5A45V6AmwTFIUAMsgGEQWxC4gyDLxZIBqPpAAiQTQPiIZcOGBgAyCDrTTmX3gcAAAAASUVORK5CYII="></img>;
+            case NodeMaterialBlockConnectionPointTypes.Matrix:
+                return <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAABuSURBVDhPY/z//z8DJYAJSpMN0A3wAeLXUAxiwwAucQZ0L4AUiECYOMEbIBaFMGnghUwoDQKhQMwIxSA2DCCrwfACCMAEQBqRAVZxqnuBZEB1A9DjHgZwsQdpOgDZAMLo6QAmTjAdkAQo9AIDAwD62SHFU/Hk8QAAAABJRU5ErkJggg=="></img>;
+        }
+
+        return null;
+    }
+
     public static GenerateOutputPorts(node: Nullable<DefaultNodeModel>, ignoreLabel: boolean) {
         if (!node) {
             return new Array<JSX.Element>();
@@ -14,6 +36,8 @@ export class PortHelper {
         for (var key in node.ports) {
             let port = node.ports[key] as DefaultPortModel;
             if (port.position === "output") {
+                let typeIndicator = this._GetPortTypeIndicator(port.connection!);
+
                 outputPorts.push(
                     <div key={key} className="output-port">
                         {
@@ -24,6 +48,11 @@ export class PortHelper {
                         }
                         <div className="output-port-plug">
                             <PortWidget key={key} name={port.name} node={node} className={port.connection && port.connection.endpoints.length > 0 ? "connected" : ""} />
+                            <div className="output-port-type"> 
+                                {
+                                    typeIndicator
+                                }                                
+                            </div>
                         </div>
                     </div>
                 );
@@ -40,12 +69,19 @@ export class PortHelper {
         let inputPorts = [];
         for (var key in node.ports) {
             let port = node.ports[key] as DefaultPortModel;
-            if (port.position === "input") {
+            if (port.position === "input") {                
+                let typeIndicator = this._GetPortTypeIndicator(port.connection!);
+
                 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" : ""} />
+                                <div className="input-port-type"> 
+                                    {
+                                        typeIndicator
+                                    }                                
+                                </div>
                             </div>
                             <div className="input-port-label">
                                 {port.name}