fix animations - associated with #6012

nodeEditor/src/blockTools.ts

@@ -72,7 +72,7 @@ export class BlockTools {
         let color = "Red";
         switch (type) {
             case NodeMaterialBlockConnectionPointTypes.Float:
-				color = "AntiqueWhite";
+				color = "DimGrey";
                 break;
             case NodeMaterialBlockConnectionPointTypes.Vector2:                
 				color = "Chocolate";

nodeEditor/src/components/diagram/diagram.scss

@@ -11,13 +11,16 @@
         border-color: rgb(0, 192, 255) !important;
     }    
 }
+
+.srd-default-link--path-selected {
+    animation: 0s !important;
+}
       
 .srd-port {
     grid-column: 1;
     grid-row: 1;
     background: #2796B2;
     border-radius: 10px;
-    z-index: 5;
 
     &.connected {
         background: #CAB422;
@@ -121,14 +124,18 @@
                 margin-left: -8px;
                 position: relative;
 
+                &:hover {           
+                    .input-port-connection {
+                        background: greenyellow !important;
+                    }
+                }
+
                 .input-port-connection {
                     pointer-events: none;
                     grid-column: 1;
                     grid-row: 1;
-                    z-index: 10;
-                    background: black;
+                    background: #2796B2;
                     border-radius: 10px;
-                    z-index: 9;
                 }
 
                 .input-port-type {
@@ -138,8 +145,7 @@
                     grid-row: 1;
                     display: grid;
                     align-items: center;
-                    justify-items: center;                        
-                    z-index: 10; 
+                    justify-items: center;     
 
                     img {
                         width: 12px;
@@ -159,7 +165,6 @@
                     border-top-left-radius: 10px;
                     top: -3.5px;
                     right: 10px;      
-                    z-index: 1;      
                 }
             }
 
@@ -192,14 +197,18 @@
                 position: relative;    
                 margin-left: 3px;
 
+                &:hover {           
+                    .output-port-connection {
+                        background: greenyellow !important;
+                    }
+                }
+
                 .output-port-connection {
                     pointer-events: none;
                     grid-column: 1;
                     grid-row: 1;
-                    z-index: 10;
-                    background: black;
+                    background: #2796B2;
                     border-radius: 10px;
-                    z-index: 9;
                 }
 
                 .output-port-type {
@@ -209,7 +218,6 @@
                     display: grid;
                     align-items: center;
                     justify-items: center;
-                    z-index: 10;
 
                     img {
                         width: 12px;
@@ -229,8 +237,7 @@
                     border-bottom-right-radius: 10px;
                     border-top-right-radius: 10px;
                     top: -3.5px;
-                    left: 7px;      
-                    z-index: 1;      
+                    left: 7px;       
                 }
             }
 

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

@@ -1,7 +1,6 @@
 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';
 
@@ -19,33 +18,7 @@ export class AdvancedLinkFactory extends DefaultLinkFactory {
         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;
-        }
-
+		let width = 3;
 
 		return (
 			<path

nodeEditor/src/components/diagram/portHelper.tsx

@@ -58,6 +58,8 @@ export class PortHelper {
                             </div>
                         }
                         <div className="output-port-plug">
+                            <div className="output-port-border">                                
+                            </div>
                             <DefaultPortWidget key={key} name={port.name} node={node} style={style} />
                             {
                                 !isConnected &&
@@ -69,8 +71,6 @@ export class PortHelper {
                                     typeIndicator
                                 }                                
                             </div>
-                            <div className="output-port-border">                                
-                            </div>
                         </div>
                     </div>
                 );
@@ -96,6 +96,8 @@ export class PortHelper {
                     inputPorts.push(
                         <div key={key} className="input-port">
                             <div className="input-port-plug">
+                                <div className="input-port-border">                                
+                                </div>
                                 <DefaultPortWidget key={key} name={port.name} node={node} style={style}/>
                                 {
                                     !isConnected &&
@@ -107,8 +109,6 @@ export class PortHelper {
                                         typeIndicator
                                     }                                
                                 </div>                         
-                                <div className="input-port-border">                                
-                                </div>
                             </div>
                             <div className="input-port-label">
                                 {port.name}

src/Materials/Node/Blocks/Fragment/fragmentOutputBlock.ts

@@ -20,7 +20,9 @@ export class FragmentOutputBlock extends NodeMaterialBlock {
     public constructor(name: string) {
         super(name, NodeMaterialBlockTargets.Fragment, true);
 
-        this.registerInput("color", NodeMaterialBlockConnectionPointTypes.Vector2OrVector3OrColor3OrVector4OrColor4);
+        this.registerInput("rgba", NodeMaterialBlockConnectionPointTypes.Color4, true);
+        this.registerInput("rgb", NodeMaterialBlockConnectionPointTypes.Color3, true);
+        this.registerInput("a", NodeMaterialBlockConnectionPointTypes.Float, true);
     }
 
     /**
@@ -32,24 +34,44 @@ export class FragmentOutputBlock extends NodeMaterialBlock {
     }
 
     /**
-     * Gets the color input component
+     * Gets the rgba input component
      */
-    public get color(): NodeMaterialConnectionPoint {
+    public get rgba(): NodeMaterialConnectionPoint {
         return this._inputs[0];
     }
 
+    /**
+     * Gets the rgb input component
+     */
+    public get rgb(): NodeMaterialConnectionPoint {
+        return this._inputs[1];
+    }
+
+    /**
+     * Gets the a input component
+     */
+    public get a(): NodeMaterialConnectionPoint {
+        return this._inputs[2];
+    }
+
     protected _buildBlock(state: NodeMaterialBuildState) {
         super._buildBlock(state);
 
-        let input = this.color;
+        let rgba = this.rgba;
+        let rgb = this.rgb;
+        let a = this.a;
         state.sharedData.hints.needAlphaBlending = this.alphaBlendingEnabled;
 
-        if (input.connectedPoint && input.connectedPoint!.type === NodeMaterialBlockConnectionPointTypes.Vector2) {
-            state.compilationString += `gl_FragColor = vec4(${input.associatedVariableName}.r, ${input.associatedVariableName}.g, 0., 1.0);\r\n`;
-        } else if (input.connectedPoint && (input.connectedPoint!.type === NodeMaterialBlockConnectionPointTypes.Color3 || input.connectedPoint!.type === NodeMaterialBlockConnectionPointTypes.Vector3)) {
-            state.compilationString += `gl_FragColor = vec4(${input.associatedVariableName}, 1.0);\r\n`;
+        if (rgba.connectedPoint) {
+            state.compilationString += `gl_FragColor = ${rgba.associatedVariableName};\r\n`;            
+        } else if (rgb.connectedPoint) {
+            if (a.connectedPoint) {
+                state.compilationString += `gl_FragColor = vec4(${rgb.associatedVariableName}, ${a.associatedVariableName});\r\n`;
+            } else {
+                state.compilationString += `gl_FragColor = vec4(${rgb.associatedVariableName}, 1.0);\r\n`;
+            }
         } else {
-            state.compilationString += `gl_FragColor = ${input.associatedVariableName};\r\n`;
+            state.sharedData.checks.notConnectedNonOptionalInputs.push(rgba);
         }
 
         return this;

src/Materials/Node/Blocks/Fragment/rgbaMergerBlock.ts

@@ -16,10 +16,10 @@ export class RGBAMergerBlock extends NodeMaterialBlock {
     public constructor(name: string) {
         super(name, NodeMaterialBlockTargets.Fragment);
 
+        this.registerInput("rgb", NodeMaterialBlockConnectionPointTypes.Vector3OrColor3OrVector4OrColor4, true);
         this.registerInput("r", NodeMaterialBlockConnectionPointTypes.Float, true);
         this.registerInput("g", NodeMaterialBlockConnectionPointTypes.Float, true);
         this.registerInput("b", NodeMaterialBlockConnectionPointTypes.Float, true);
-        this.registerInput("rgb", NodeMaterialBlockConnectionPointTypes.Vector3OrColor3OrVector4OrColor4, true);
         this.registerInput("a", NodeMaterialBlockConnectionPointTypes.Float, true);
 
         this.registerOutput("output", NodeMaterialBlockConnectionPointTypes.Color4);
@@ -37,28 +37,28 @@ export class RGBAMergerBlock extends NodeMaterialBlock {
      * Gets the R input component
      */
     public get r(): NodeMaterialConnectionPoint {
-        return this._inputs[0];
+        return this._inputs[1];
     }
 
     /**
      * Gets the G input component
      */
     public get g(): NodeMaterialConnectionPoint {
-        return this._inputs[1];
+        return this._inputs[2];
     }
 
     /**
      * Gets the B input component
      */
     public get b(): NodeMaterialConnectionPoint {
-        return this._inputs[2];
+        return this._inputs[3];
     }
 
     /**
      * Gets the RGB input component
      */
     public get rgb(): NodeMaterialConnectionPoint {
-        return this._inputs[3];
+        return this._inputs[0];
     }
 
     /**
@@ -88,6 +88,7 @@ export class RGBAMergerBlock extends NodeMaterialBlock {
             let rInput = this._inputs[0];
             let gInput = this._inputs[1];
             let bInput = this._inputs[2];
+
             state.compilationString += this._declareOutput(output, state) + ` = vec4(${this._writeVariable(rInput)}, ${this._writeVariable(gInput)}, ${this._writeVariable(bInput)}, ${this._writeVariable(aInput)});\r\n`;
         }
 

src/Materials/Node/nodeMaterialBlock.ts

@@ -153,16 +153,17 @@ export class NodeMaterialBlock {
     }
 
     protected _declareOutput(output: NodeMaterialConnectionPoint, state: NodeMaterialBuildState): string {
-        // if (output.isVarying) {
-        //     return `${output.associatedVariableName}`;
-        // }
-
         return `${state._getGLType(output.type)} ${output.associatedVariableName}`;
     }
 
     protected _writeVariable(currentPoint: NodeMaterialConnectionPoint): string {
-        let connectionPoint = currentPoint.connectedPoint!;
-        return `${currentPoint.associatedVariableName}${connectionPoint.swizzle ? "." + connectionPoint.swizzle : ""}`;
+        let connectionPoint = currentPoint.connectedPoint;
+
+        if (connectionPoint) {
+            return `${currentPoint.associatedVariableName}${connectionPoint.swizzle ? "." + connectionPoint.swizzle : ""}`;
+        }
+
+        return `0.`;
     }
 
     protected _writeFloat(value: number) {