Edges for outside node controls

MaterialGraphProject/Assets/UnityShaderEditor/Editor/Drawing/Views/MaterialNodeView.cs

                     inputContainer.Add(anchor);
                     var portInputView = new PortInputView(slot);
                     m_GraphView.AddElement(portInputView);
-                    m_Attachers.Add(new Attacher(portInputView, anchor, SpriteAlignment.LeftCenter) { distance = 10f });
+                    m_Attachers.Add(new Attacher(portInputView, anchor, SpriteAlignment.LeftCenter) { distance = 0f });
                 }
             }
         }

MaterialGraphProject/Assets/UnityShaderEditor/Editor/Drawing/Views/PortInputView.cs

 using UnityEditor.Graphing;
 using UnityEngine;
 using UnityEngine.Experimental.UIElements;
+using UnityEngine.Experimental.UIElements.StyleSheets;
+        const string k_EdgeColorProperty = "edge-color";
+
+        StyleValue<Color> m_EdgeColor;
+
+        public Color edgeColor
+        {
+            get { return m_EdgeColor.GetSpecifiedValueOrDefault(Color.red); }
+        }
+
-        VisualElement m_ControlContainer;
+        VisualElement m_Container;
+        EdgeControl m_EdgeControl;
-            m_Slot = slot;
+            m_Slot = slot;
-            m_ControlContainer = new VisualElement { name = "controlContainer" };
-            Add(m_ControlContainer);
-            m_Control = m_Slot.InstantiateControl();
-            if (m_Control != null)
-                m_ControlContainer.Add(m_Control);
-            else
-                m_ControlContainer.visible = false;
+            AddToClassList("type" + m_SlotType);
+
+            m_Container = new VisualElement { name = "container" };
+            {
+                m_Control = m_Slot.InstantiateControl();
+                if (m_Control != null)
+                    m_Container.Add(m_Control);
+
+                var slotElement = new VisualElement { name = "slot" };
+                {
+                    slotElement.Add(new VisualElement { name = "dot" });
+                }
+                m_Container.Add(slotElement);
+            }
+            Add(m_Container);
+
+            m_EdgeControl = new EdgeControl
+            {
+                @from = new Vector2(212f - 20f, 11.5f),
+                to = new Vector2(212f, 11.5f),
+                edgeWidth = 2
+            };
+            Add(m_EdgeControl);
+
+            m_Container.visible = m_EdgeControl.visible = m_Control != null;
+
+            clippingOptions = ClippingOptions.NoClipping;
+        }
+
+        protected override void OnStyleResolved(ICustomStyle styles)
+        {
+            base.OnStyleResolved(styles);
+            styles.ApplyCustomProperty(k_EdgeColorProperty, ref m_EdgeColor);
+            m_EdgeControl.UpdateLayout();
+            m_EdgeControl.edgeColor = edgeColor;
         }
 
         public void UpdateSlotType()
+                RemoveFromClassList("type" + m_SlotType);
+                AddToClassList("type" + m_SlotType);
-                    m_ControlContainer.Remove(m_Control);
+                    m_Container.Remove(m_Control);
-                m_ControlContainer.visible = true;
-                    m_ControlContainer.Add(m_Control);
-                else
-                    m_ControlContainer.visible = false;
+                    m_Container.Insert(0, m_Control);
+
+                m_Container.visible = m_EdgeControl.visible = m_Control != null;
             }
         }
 

MaterialGraphProject/Assets/UnityShaderEditor/Editor/Resources/Styles/MaterialGraph.uss

 PortInputView {
     width: 212;
     height: 22;
+    padding-top: 1;
-PortInputView > #controlContainer {
+PortInputView > #container > #slot {
+    width: 8;
+    height: 8;
+    background-color: #000000;
+    border-radius: 4;
+    margin-left: 6;
+    margin-right: 6;
+    align-items: center;
+    justify-content: center;
+}
+
+PortInputView > #edge {
+    position-type: absolute;
+    position-right: 0;
+    position-top: 10.5;
+    height: 2;
+    width: 20;
+    background-color: #ff0000;
+}
+
+PortInputView > #container > #slot > #dot {
+    width: 4;
+    height: 4;
+    background-color: #ff0000;
+    border-radius: 4;
+}
+
+PortInputView.typeMatrix4 > #container > #slot > #dot,
+PortInputView.typeMatrix3 > #container > #slot > #dot,
+PortInputView.typeMatrix2 > #container > #slot > #dot {
+    background-color: #8FC1DF;
+}
+
+PortInputView.typeMatrix4,
+PortInputView.typeMatrix3,
+PortInputView.typeMatrix2 {
+    edge-color: #8FC1DF;
+}
+
+PortInputView.typeTexture2D > #container > #slot > #dot {
+    background-color: #FF8B8B;
+}
+
+PortInputView.typeTexture2D {
+    edge-color: #FF8B8B;
+}
+
+PortInputView.typeVector4 > #container > #slot > #dot {
+    background-color: #FBCBF4;
+}
+
+PortInputView.typeVector4 {
+    edge-color: #FBCBF4;
+}
+
+PortInputView.typeVector3 > #container > #slot > #dot {
+    background-color: #F6FF9A;
+}
+
+PortInputView.typeVector3 {
+    edge-color: #F6FF9A;
+}
+
+PortInputView.typeVector2 > #container > #slot > #dot {
+    background-color: #9AEF92;
+}
+
+PortInputView.typeVector2 {
+    edge-color: #9AEF92;
+}
+
+PortInputView.typeVector1 > #container > #slot > #dot {
+    background-color: #84E4E7;
+}
+
+PortInputView.typeVector1 {
+    edge-color: #84E4E7;
+}
+
+PortInputView > #container {
-    padding-right: 20;
+    margin-right: 10;
     border-left-width: 1;
     border-top-width: 1;
     border-right-width: 1;