UIElements-based shader properties in inspector

MaterialGraphProject/Assets/UnityShaderEditor/Editor/Drawing/Inspector/GraphInspectorView.cs

         int m_SelectionHash;
 
         VisualElement m_Title;
-        VisualElement m_PropertiesContainer;
+        VisualElement m_PropertyItems;
+        VisualElement m_TopContainer;
-            var topContainer = new VisualElement { name = "top" };
+            m_TopContainer = new VisualElement { name = "top" };
             {
                 var headerContainer = new VisualElement { name = "header" };
                 {
-                topContainer.Add(headerContainer);
+                m_TopContainer.Add(headerContainer);
-                topContainer.Add(m_ContentContainer);
+                m_TopContainer.Add(m_ContentContainer);
-            Add(topContainer);
-
-            ReaddProps();
+            Add(m_TopContainer);
+                var propertiesContainer = new VisualElement { name = "properties" };
+                {
+                    var header = new VisualElement { name = "header" };
+                    {
+                        var title = new VisualElement { name = "title", text = "Properties" };
+                        header.Add(title);
+
+                        var addPropertyButton = new Button(OnAddProperty) { text = "Add", name = "addButton" };
+                        header.Add(addPropertyButton);
+                    }
+                    propertiesContainer.Add(header);
+
+                    m_PropertyItems = new VisualContainer { name = "items" };
+                    propertiesContainer.Add(m_PropertyItems);
+                }
+                bottomContainer.Add(propertiesContainer);
+
                 m_Preview = new Image { name = "preview", image = Texture2D.blackTexture};
                 bottomContainer.Add(m_Preview);
             }
             };
         }
 
-        private void ReaddProps()
+        void OnAddProperty()
-            if (m_PropertiesContainer != null)
-                Remove(m_PropertiesContainer);
-
-            m_PropertiesContainer = new VisualElement()
-            {
-                new IMGUIContainer(OnGuiHandler)
-            };
-
-            m_PropertiesContainer.style.flexDirection = StyleValue<FlexDirection>.Create(FlexDirection.Column);
-            Add(m_PropertiesContainer);
-        }
-
-
-        private void OnGuiHandler()
-        {
-            if (m_Presenter == null)
-                return;
-
-            if (GUILayout.Button("Add Property"))
-            {
-                var gm = new GenericMenu();
-                gm.AddItem(new GUIContent("Float"), false, () =>
-                {
-                    m_Presenter.graph.AddShaderProperty(new FloatShaderProperty());
-                    ReaddProps();
-
-                });
-                gm.AddItem(new GUIContent("Vector2"), false, () =>
-                {
-                    m_Presenter.graph.AddShaderProperty(new Vector2ShaderProperty());
-
-                    ReaddProps();
-
-                });
-                gm.AddItem(new GUIContent("Vector3"), false, () =>
-                {
-                    m_Presenter.graph.AddShaderProperty(new Vector3ShaderProperty());
-                    ReaddProps();
-
-                });
-                gm.AddItem(new GUIContent("Vector4"), false, () =>
-                {
-                    m_Presenter.graph.AddShaderProperty(new Vector4ShaderProperty());
-                    ReaddProps();
-
-                });
-                gm.AddItem(new GUIContent("Color"), false, () =>
-                {
-                    m_Presenter.graph.AddShaderProperty(new ColorShaderProperty());
-                    ReaddProps();
-
-                });
-                gm.AddItem(new GUIContent("Texture"), false, () =>
-                {
-                    m_Presenter.graph.AddShaderProperty(new TextureShaderProperty());
-                    ReaddProps();
-
-                });
-                gm.ShowAsContext();
-            }
-
-            EditorGUI.BeginChangeCheck();
-            foreach (var property in m_Presenter.graph.properties.ToArray())
-            {
-                property.name = EditorGUILayout.DelayedTextField("Name", property.name);
-                property.description = EditorGUILayout.DelayedTextField("Description", property.description);
-
-                if (property is FloatShaderProperty)
-                {
-                    var fProp = property as FloatShaderProperty;
-                    fProp.value = EditorGUILayout.FloatField("Value", fProp.value);
-                }
-                else if (property is Vector2ShaderProperty)
-                {
-                    var fProp = property as Vector2ShaderProperty;
-                    fProp.value = EditorGUILayout.Vector2Field("Value", fProp.value);
-                }
-                else if (property is Vector3ShaderProperty)
-                {
-                    var fProp = property as Vector3ShaderProperty;
-                    fProp.value = EditorGUILayout.Vector3Field("Value", fProp.value);
-                }
-                else if (property is Vector4ShaderProperty)
-                {
-                    var fProp = property as Vector4ShaderProperty;
-                    fProp.value = EditorGUILayout.Vector4Field("Value", fProp.value);
-                }
-                else if (property is ColorShaderProperty)
-                {
-                    var fProp = property as ColorShaderProperty;
-                    fProp.value = EditorGUILayout.ColorField("Value", fProp.value);
-                }
-                else if (property is TextureShaderProperty)
-                {
-                    var fProp = property as TextureShaderProperty;
-                    fProp.value.texture = EditorGUILayout.MiniThumbnailObjectField(new GUIContent("Texture"), fProp.value.texture, typeof(Texture), null) as Texture;
-                }
-
-                if (GUILayout.Button("Remove"))
-                {
-                    m_Presenter.graph.RemoveShaderProperty(property.guid);
-                }
-                EditorGUILayout.Separator();
-            }
-            if (EditorGUI.EndChangeCheck())
-            {
-                foreach (var node in m_Presenter.graph.GetNodes<PropertyNode>())
-                    node.onModified(node, ModificationScope.Node);
-            }
+            var gm = new GenericMenu();
+            gm.AddItem(new GUIContent("Float"), false, () => m_Presenter.graph.AddShaderProperty(new FloatShaderProperty()));
+            gm.AddItem(new GUIContent("Vector2"), false, () => m_Presenter.graph.AddShaderProperty(new Vector2ShaderProperty()));
+            gm.AddItem(new GUIContent("Vector3"), false, () => m_Presenter.graph.AddShaderProperty(new Vector3ShaderProperty()));
+            gm.AddItem(new GUIContent("Vector4"), false, () => m_Presenter.graph.AddShaderProperty(new Vector4ShaderProperty()));
+            gm.AddItem(new GUIContent("Color"), false, () => m_Presenter.graph.AddShaderProperty(new ColorShaderProperty()));
+            gm.AddItem(new GUIContent("Texture"), false, () => m_Presenter.graph.AddShaderProperty(new TextureShaderProperty()));
+            gm.ShowAsContext();
         }
 
         public void OnChange(GraphInspectorPresenter.ChangeType changeType)
             {
                 m_Preview.image = presenter.previewTexture ?? Texture2D.blackTexture;
             }
+
+            if ((changeType & GraphInspectorPresenter.ChangeType.Graph) != 0)
+            {
+                if (m_Graph != null)
+                {
+                    m_Graph.onChange -= OnGraphChange;
+                    m_PropertyItems.Clear();
+                    m_Graph = null;
+                }
+                if (m_Presenter.graph != null)
+                {
+                    m_Graph = m_Presenter.graph;
+                    foreach (var property in m_Graph.properties)
+                        m_PropertyItems.Add(new ShaderPropertyView(m_Graph, property));
+                    m_Graph.onChange += OnGraphChange;
+                }
+            }
+
+        void OnGraphChange(GraphChange change)
+        {
+            var propertyAdded = change as ShaderPropertyAdded;
+            if (propertyAdded != null)
+                m_PropertyItems.Add(new ShaderPropertyView(m_Graph, propertyAdded.shaderProperty));
+
+            var propertyRemoved = change as ShaderPropertyRemoved;
+            if (propertyRemoved != null)
+            {
+                var propertyView = m_PropertyItems.OfType<ShaderPropertyView>().FirstOrDefault(v => v.property.guid == propertyRemoved.guid);
+                if (propertyView != null)
+                    m_PropertyItems.Remove(propertyView);
+            }
+        }
+
+        AbstractMaterialGraph m_Graph;
 
         public GraphInspectorPresenter presenter
         {

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

     background-color: rgb(79, 79, 79);
 }
 
+GraphInspectorView > #bottom > #properties {
+    border-color: rgb(41, 41, 41);
+    border-top-width: 1;
+    border-bottom-width: 1;
+    border-left-width: 1;
+    border-right-width: 1;
+    margin-top: 8;
+    margin-bottom: 8;
+    margin-left: 8;
+    margin-right: 8;
+}
+
+GraphInspectorView > #bottom > #properties > #header {
+    border-color: rgb(41, 41, 41);
+    border-bottom-width: 1;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+GraphInspectorView > #bottom > #properties > #header > #title {
+    text-color: rgb(180, 180, 180);
+    font-style: bold;
+    padding-top: 8;
+    padding-bottom: 8;
+    padding-left: 8;
+    padding-right: 8;
+}
+
+GraphInspectorView > #bottom > #properties > #header > #addButton {
+    height: 24;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    margin-right: 8;
+}
+
+GraphInspectorView > #bottom > #properties > #items {
+    padding-bottom: 4;
+}
+
+ShaderPropertyView {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 8;
+    padding-bottom: 4;
+    padding-left: 8;
+    padding-right: 8;
+}
+
+ShaderPropertyView > #displayName {
+    flex: 1;
+    margin-right: 8;
+}
+
+ShaderPropertyView > #value {
+    flex: 2;
+    margin-right: 8;
+}
+
+ShaderPropertyView > #remove {
+    font-size: 9;
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-left: 1;
+    padding-right: 1;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    margin-right: 0;
+}
+
 .nodeEditor {
     border-color: rgb(79, 79, 79);
     border-bottom-width: 1;

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

 fileFormatVersion: 2
 guid: 466e6b269ff1900438e46c66af51cef8
-timeCreated: 1478070440
-licenseType: Pro
 ScriptedImporter:
   userData: 
   assetBundleName: 

MaterialGraphProject/Assets/UnityShaderEditor/Editor/Drawing/Inspector/ShaderPropertyView.cs

+using System;
+using UnityEngine;
+using UnityEngine.Assertions;
+using UnityEngine.Experimental.UIElements;
+using UnityEngine.Graphing;
+using UnityEngine.MaterialGraph;
+
+namespace UnityEditor.MaterialGraph.Drawing.Inspector
+{
+    public class ShaderPropertyView : VisualElement
+    {
+        Action m_ValueAction;
+        public AbstractMaterialGraph graph { get; private set; }
+        public IShaderProperty property { get; private set; }
+
+        public ShaderPropertyView(AbstractMaterialGraph graph, IShaderProperty property)
+        {
+            this.graph = graph;
+            this.property = property;
+
+            m_ValueAction = null;
+            if (property is FloatShaderProperty)
+                m_ValueAction = FloatField;
+            else if (property is Vector2ShaderProperty)
+                m_ValueAction = Vector2Field;
+            else if (property is Vector3ShaderProperty)
+                m_ValueAction = Vector3Field;
+            else if (property is Vector4ShaderProperty)
+                m_ValueAction = Vector4Field;
+            else if (property is ColorShaderProperty)
+                m_ValueAction = ColorField;
+            else if (property is TextureShaderProperty)
+                m_ValueAction = TextureField;
+            Assert.IsNotNull(m_ValueAction);
+
+            Add(new IMGUIContainer(DisplayNameField) { name = "displayName" });
+            Add(new IMGUIContainer(ValueField) { name = "value" });
+            Add(new Button(OnClickRemove) { name = "remove", text = "Remove" });
+        }
+
+        void OnClickRemove()
+        {
+            graph.RemoveShaderProperty(property.guid);
+            NotifyNodes();
+        }
+
+        void DisplayNameField()
+        {
+            EditorGUI.BeginChangeCheck();
+            property.description = EditorGUILayout.DelayedTextField(property.description);
+            if (EditorGUI.EndChangeCheck())
+                NotifyNodes();
+        }
+
+        void ValueField()
+        {
+            EditorGUI.BeginChangeCheck();
+            m_ValueAction();
+            if (EditorGUI.EndChangeCheck())
+                NotifyNodes();
+        }
+
+        void NotifyNodes()
+        {
+            foreach (var node in graph.GetNodes<PropertyNode>())
+                node.onModified(node, ModificationScope.Node);
+        }
+
+        void FloatField()
+        {
+            var fProp = (FloatShaderProperty) property;
+            fProp.value = EditorGUILayout.FloatField(fProp.value);
+        }
+
+        void Vector2Field()
+        {
+            var fProp = (Vector2ShaderProperty) property;
+            fProp.value = EditorGUILayout.Vector2Field("", fProp.value);
+        }
+
+        void Vector3Field()
+        {
+            var fProp = (Vector3ShaderProperty) property;
+            fProp.value = EditorGUILayout.Vector3Field("", fProp.value);
+        }
+
+        void Vector4Field()
+        {
+            var fProp = (Vector4ShaderProperty) property;
+            fProp.value = EditorGUILayout.Vector4Field("", fProp.value);
+        }
+
+        void ColorField()
+        {
+            var fProp = (ColorShaderProperty) property;
+            fProp.value = EditorGUILayout.ColorField("", fProp.value);
+        }
+
+        void TextureField()
+        {
+            var fProp = (TextureShaderProperty) property;
+            fProp.value.texture = EditorGUILayout.MiniThumbnailObjectField(new GUIContent("Texture"), fProp.value.texture, typeof(Texture), null) as Texture;
+        }
+    }
+}

MaterialGraphProject/Assets/UnityShaderEditor/Editor/Drawing/Inspector/ShaderPropertyView.cs.meta

+fileFormatVersion: 2
+guid: a7487f4dc0fc4cf6a84bde37e66b60cb
+timeCreated: 1507035849