Deprecated field factory and replace all nodes + drawer fields by PropertyFields

Author: Antoine Lelievre

Assets/com.alelievr.NodeGraphProcessor/Editor/NodeInspectorObject.cs

@@ -18,8 +18,6 @@ public class NodeInspectorObjectEditor : Editor
         protected VisualElement selectedNodeList;
         protected VisualElement placeholder;
 
-        Dictionary<BaseNode, VisualElement> nodeInspectorCache = new Dictionary<BaseNode, VisualElement>();
-
         protected virtual void OnEnable()
         {
             inspector = target as NodeInspectorObject;
@@ -88,6 +86,8 @@ public virtual void UpdateSelectedNodes(HashSet<BaseNodeView> views)
             nodeSelectionUpdated?.Invoke();
         }
 
+        public virtual void RefreshNodes() => nodeSelectionUpdated?.Invoke();
+
         public virtual void NodeViewRemoved(BaseNodeView view)
         {
             selectedNodes.Remove(view);

Assets/com.alelievr.NodeGraphProcessor/Editor/Resources/GraphProcessorStyles/BaseNodeView.uss

@@ -106,49 +106,48 @@ ParameterNodeView #controls EnumField > VisualElement > VisualElement {
     --layer: -50;
 }
 
-#input-container > .port-input-element > IntegerField,
-#input-container > .port-input-element > FloatField {
+#input-container > .port-input-element > * {
     min-width: 30px;
-    max-width: 100px;
+    max-width: 200px;
 }
 
-#input-container > .port-input-element > ColorField,
-#input-container > .port-input-element > ObjectField,
-#input-container > .port-input-element > CurveField {
+#input-container > .port-input-element > PropertyField > ColorField,
+#input-container > .port-input-element > PropertyField > ObjectField,
+#input-container > .port-input-element > PropertyField > CurveField {
     margin-top: 0;
     margin-bottom: 0;
 }
 
-#input-container > .port-input-element > TextField {
+#input-container > .port-input-element > PropertyField > TextField {
     min-width: 50px;
-    max-width: 150px;
 }
 
-#input-container > .port-input-element > CurveField {
+#input-container > .port-input-element > PropertyField > CurveField {
     width: 100px;
 }
 
-#input-container > .port-input-element > Vector4Field Label,
-#input-container > .port-input-element > Vector3Field Label,
-#input-container > .port-input-element > Vector2Field Label,
-#input-container > .port-input-element > Vector3IntField Label,
-#input-container > .port-input-element > Vector2IntField Label {
+#input-container > .port-input-element > PropertyField > Vector4Field Label,
+#input-container > .port-input-element > PropertyField > Vector3Field Label,
+#input-container > .port-input-element > PropertyField > Vector2Field Label,
+#input-container > .port-input-element > PropertyField > Vector3IntField Label,
+#input-container > .port-input-element > PropertyField > Vector2IntField Label {
     font-size: 8px;
     min-width: 8px;
     flex-basis: 8px;
     padding-top: 2px;
     margin-right: 1px;
+    max-height: 150px;
 }
 
-#input-container > .port-input-element > Vector4Field FloatInput,
-#input-container > .port-input-element > Vector3Field FloatInput,
-#input-container > .port-input-element > Vector2Field FloatInput,
-#input-container > .port-input-element > Vector3IntField IntegerInput,
-#input-container > .port-input-element > Vector2IntField IntegerInput {
+#input-container > .port-input-element > PropertyField > Vector4Field FloatInput,
+#input-container > .port-input-element > PropertyField > Vector3Field FloatInput,
+#input-container > .port-input-element > PropertyField > Vector2Field FloatInput,
+#input-container > .port-input-element > PropertyField > Vector3IntField IntegerInput,
+#input-container > .port-input-element > PropertyField > Vector2IntField IntegerInput {
     min-width: 28px;
 }
 
-#input-container > .port-input-element > * .unity-composite-field__field-spacer {
+#input-container > .port-input-element > PropertyField > * .unity-composite-field__field-spacer {
     flex-grow: 0.01;
 }
 
@@ -167,7 +166,7 @@ ParameterNodeView #controls EnumField > VisualElement > VisualElement {
     margin: 0;
 }
 
-#input-container > .port-input-element > ColorField {
+#input-container > .port-input-element > PropertyField > ColorField {
     width: 60px;
 }
 

Assets/com.alelievr.NodeGraphProcessor/Editor/Utils/FieldFactory.cs

@@ -10,6 +10,7 @@
 
 namespace GraphProcessor
 {
+	[Obsolete("Field Factory is not necessary anymore. You can use a SerializedProperty directly instead.")]
 	public static class FieldFactory
 	{
 		static readonly Dictionary< Type, Type >    fieldDrawers = new Dictionary< Type, Type >();

Assets/com.alelievr.NodeGraphProcessor/Editor/Utils/Vector4Drawer.cs

@@ -0,0 +1,22 @@
+using UnityEngine;
+using UnityEditor;
+using UnityEditor.UIElements;
+using UnityEngine.UIElements;
+
+namespace GraphProcessor
+{
+    // We need a drawer to display Vector4 on a single line because by default it's a toggle
+    [CustomPropertyDrawer(typeof(Vector4))]
+    public class IngredientDrawerUIE : PropertyDrawer
+    {
+        public override VisualElement CreatePropertyGUI(SerializedProperty property)
+        {
+            var vectorField = new Vector4Field() { value = property.vector4Value };
+            vectorField.RegisterValueChangedCallback(e => {
+                property.vector4Value = e.newValue;
+            });
+
+            return vectorField;
+        }
+    }
+}

Assets/com.alelievr.NodeGraphProcessor/Editor/Utils/Vector4Drawer.cs.meta

@@ -366,6 +366,8 @@ int GetPriority(GraphElement e)
 							RemoveElement(nodeView);
 							if (Selection.activeObject == nodeInspector)
 								UpdateNodeInspectorSelection();
+
+							SyncSerializedPropertyPathes();
 							return true;
 						case GroupView group:
 							graph.RemoveGroup(group.group);
@@ -1386,6 +1388,16 @@ public RelayNodeView AddRelayNode(PortView inputPort, PortView outputPort, Vecto
 			return view;
 		}
 
+		/// <summary>
+		/// Update all the serialized property bindings (in case a node was deleted / added, the property pathes needs to be updated)
+		/// </summary>
+		public void SyncSerializedPropertyPathes()
+		{
+			foreach (var nodeView in nodeViews)
+				nodeView.SyncSerializedPropertyPathes();
+			nodeInspector.RefreshNodes();
+		}
+
 		/// <summary>
 		/// Call this function when you want to remove this view
 		/// </summary>

Assets/com.alelievr.NodeGraphProcessor/Editor/Views/BaseGraphView.cs

@@ -8,6 +8,7 @@
 using System.Collections;
 using System.Linq;
 using UnityEditor.UIElements;
+using System.Text.RegularExpressions;
 
 using Status = UnityEngine.UIElements.DropdownMenuAction.Status;
 using NodeView = UnityEditor.Experimental.GraphView.Node;
@@ -804,21 +805,37 @@ object GetInputFieldValue(FieldInfo info)
 		protected VisualElement AddControlField(string fieldName, string label = null, bool showInputDrawer = false, Action valueChangedCallback = null)
 			=> AddControlField(nodeTarget.GetType().GetField(fieldName, BindingFlags.Public | BindingFlags.NonPublic | BindingFlags.Instance), label, showInputDrawer, valueChangedCallback);
 
+		Regex s_ReplaceNodeIndexPropertyPath = new Regex(@"(^nodes.Array.data\[)(\d+)(\])");
+		internal void SyncSerializedPropertyPathes()
+		{
+			int nodeIndex = owner.graph.nodes.FindIndex(n => n == nodeTarget);
+			Debug.Log(nodeIndex);
+
+			// If the node is not found, then it means that it has been deleted from serialized data.
+			if (nodeIndex == -1)
+				return;
+
+			var nodeIndexString = nodeIndex.ToString();
+			foreach (var propertyField in this.Query<PropertyField>().ToList())
+			{
+				propertyField.Unbind();
+				// The property path look like this: nodes.Array.data[x].fieldName
+				// And we want to update the value of x with the new node index:
+				propertyField.bindingPath = s_ReplaceNodeIndexPropertyPath.Replace(propertyField.bindingPath, m => m.Groups[1].Value + nodeIndexString + m.Groups[3].Value);
+				propertyField.Bind(owner.serializedGraph);
+			}
+		}
+
 		protected VisualElement AddControlField(FieldInfo field, string label = null, bool showInputDrawer = false, Action valueChangedCallback = null)
 		{
 			if (field == null)
 				return null;
-	
-			var element = FieldFactory.CreateField(field.FieldType, field.GetValue(nodeTarget), (newValue) => {
-				owner.RegisterCompleteObjectUndo("Updated " + newValue);
-				field.SetValue(nodeTarget, newValue);
-				NotifyNodeChanged();
-				valueChangedCallback?.Invoke();
-				UpdateFieldVisibility(field.Name, newValue);
-				// When you have the node inspector, it's possible to have multiple input fields pointing to the same
-				// property. We need to update those manually otherwise they still have the old value in the inspector.
-				UpdateOtherFieldValue(field, newValue);
-			}, showInputDrawer ? "" : label);
+
+			// This doesn't work 
+			int i = owner.graph.nodes.FindIndex(n => n == nodeTarget);
+			var prop = owner.serializedGraph.FindProperty("nodes").GetArrayElementAtIndex(i).FindPropertyRelative(field.Name);
+			var element = new PropertyField(prop, showInputDrawer ? "" : label);
+			element.Bind(owner.serializedGraph);
 
 			// Disallow picking scene objects when the graph is not linked to a scene
 			if (element != null && !owner.graph.IsLinkedToScene())
@@ -843,9 +860,9 @@ protected VisualElement AddControlField(FieldInfo field, string label = null, bo
 				}
 				else
 				{
-					element.name = field.Name;
 					controlsContainer.Add(element);
 				}
+				element.name = field.Name;
 			}
 			else
 			{
@@ -886,6 +903,8 @@ protected void AddSettingField(FieldInfo field)
 
 			var label = field.GetCustomAttribute<SettingAttribute>().name;
 
+			// TODO: find the property path from the field
+			// var element = new PropertyField();
 			var element = FieldFactory.CreateField(field.FieldType, field.GetValue(nodeTarget), (newValue) => {
 				owner.RegisterCompleteObjectUndo("Updated " + newValue);
 				field.SetValue(nodeTarget, newValue);

Assets/com.alelievr.NodeGraphProcessor/Editor/Views/BaseNodeView.cs

@@ -79,6 +79,7 @@ public NodeMenuItemAttribute(string menuTitle = null, Type onlyCompatibleWithGra
 	/// Set a custom drawer for a field. It can then be created using the FieldFactory
 	/// </summary>
 	[AttributeUsage(AttributeTargets.Class, AllowMultiple = false)]
+	[Obsolete("You can use the standard Unity CustomPropertyDrawer instead.")]
 	public class FieldDrawerAttribute : Attribute
 	{
 		public Type		fieldType;

Assets/com.alelievr.NodeGraphProcessor/Runtime/Graph/Attributes.cs

@@ -2,7 +2,7 @@
     "name": "com.alelievr.node-graph-processor",
     "displayName": "Node Graph Processor",
     "version": "1.2.0",
-    "unity": "2020.2",
+    "unity": "2020.3",
     "description": "Node graph editor framework focused on data processing using Unity UIElements and C# 4.7",
     "keywords": [
         "graph",

Assets/com.alelievr.NodeGraphProcessor/package.json

@@ -14,6 +14,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Fixed the node create menu not listing all nodes when created from edge drag.
 - Fixed Int vector drawer display in nodes.
 
+### Changed
+- Deprecated the FieldFactory and [FieldDrawer] system. You can use Unity's CustomPropertyDrawer instead.
+- SerializedProperties are now used to display the properties in the node, so they support Unity's default UI and attributes for all properties.
+
 ## [1.2.0]
 
 ### Added