Better half circle port models. #6012

nodeEditor/src/components/diagram/diagram.scss

@@ -2,17 +2,22 @@
     width: 200px;
 }
 
-.srd-node--selected > * {
-    border: 4px solid  rgb(0, 192, 255) !important;
-    border-radius: 20px;
+.srd-node--selected {
+    .input-port-border {
+        border-color: rgb(0, 192, 255) !important;
+    }
+
+    .output-port-border {
+        border-color: rgb(0, 192, 255) !important;
+    }    
 }
-          
+      
 .srd-port {
     grid-column: 1;
     grid-row: 1;
-    background: rgb(0, 192, 255);
+    background: #2796B2;
     border-radius: 10px;
-    border: black 4px solid;
+    z-index: 5;
 
     &.connected {
         background: #CAB422;
@@ -101,6 +106,8 @@
     .inputs {
         grid-row: 2;
         grid-column: 1;
+        padding-bottom: 5px;
+
         .input-port {
             display: grid;
             grid-template-columns: 10px calc(100% - 10px);
@@ -111,24 +118,42 @@
                 grid-row: 1;
                 display: grid;
                 align-content: center;
-                margin-left: -11px;
+                margin-left: -8px;
+                position: relative;
 
                 .input-port-type {
+                    width: 15px;
                     pointer-events: none;
                     grid-column: 1;
                     grid-row: 1;
                     display: grid;
                     align-items: center;
-                    justify-items: center;
+                    justify-items: center;                        
+                    z-index: 10; 
 
                     img {
                         width: 12px;
                     }
                 }
+
+                .input-port-border {
+                    pointer-events: none;
+                    grid-column: 1;
+                    grid-row: 1;     
+                    border: 4px solid black;
+                    width: 7px;
+                    height: 14px;
+                    border-right: 0;
+                    position: absolute;
+                    border-bottom-left-radius: 10px;
+                    border-top-left-radius: 10px;
+                    top: -3.5px;
+                    right: 10px;      
+                    z-index: 1;      
+                }
             }
 
             .input-port-label {
-                margin-left: 10px;
                 grid-column: 2;
                 grid-row: 1;         
                 margin-bottom: 2px;    
@@ -142,6 +167,8 @@
     .outputs {
         grid-row: 2;
         grid-column: 2;
+        padding-bottom: 5px;
+
         .output-port {
             display: grid;
             grid-template-columns: calc(100% - 10px) 10px;
@@ -152,6 +179,8 @@
                 grid-row: 1;
                 display: grid;
                 align-content: center;
+                position: relative;    
+                margin-left: 3px;
 
                 .output-port-type {
                     pointer-events: none;
@@ -160,16 +189,33 @@
                     display: grid;
                     align-items: center;
                     justify-items: center;
+                    z-index: 10;
 
                     img {
                         width: 12px;
                     }
                 }
+
+                .output-port-border {
+                    pointer-events: none;
+                    grid-column: 1;
+                    grid-row: 1;     
+                    border: 4px solid black;
+                    width: 7px;
+                    height: 14px;
+                    border-left: 0;
+                    border-left: 0;
+                    position: absolute;
+                    border-bottom-right-radius: 10px;
+                    border-top-right-radius: 10px;
+                    top: -4px;
+                    left: 7px;      
+                    z-index: 1;      
+                }
             }
 
             .output-port-label {
                 text-align: right;
-                margin-right: 10px;
                 grid-column: 1;
                 grid-row: 1;                        
                 margin-bottom: 2px;   

nodeEditor/src/components/diagram/portHelper.tsx

@@ -53,6 +53,8 @@ export class PortHelper {
                                     typeIndicator
                                 }                                
                             </div>
+                            <div className="output-port-border">                                
+                            </div>
                         </div>
                     </div>
                 );
@@ -81,11 +83,13 @@ export class PortHelper {
                                     {
                                         typeIndicator
                                     }                                
+                                </div>                         
+                                <div className="input-port-border">                                
                                 </div>
                             </div>
                             <div className="input-port-label">
                                 {port.name}
-                            </div>
+                            </div>   
                         </div>
                     );
                 }

nodeEditor/src/graphEditor.tsx

@@ -265,7 +265,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                     var link = DefaultPortModel.SortInputOutput(sourcePort, e.link.targetPort as DefaultPortModel);
                     if (link) {
                         if (link.input.connection && link.output.connection) {
-                            if (link.input.connection.connectedPoint && link.input.connection.connectedPoint.ownerBlock !== link.output.connection.ownerBlock) {
+                            if (link.input.connection.connectedPoint) {
                                 // Disconnect standard nodes
                                 link.output.connection.disconnectFrom(link.input.connection);
                                 link.input.syncWithNodeMaterialConnectionPoint(link.input.connection);