feat: Improve UI

SolarianZ · SolarianZ · commit d3348724532b · 2022-09-26T20:01:31.000+08:00
diff --git a/Editor/Scripts/GraphView/PlayableGraphView.cs b/Editor/Scripts/GraphView/PlayableGraphView.cs
@@ -18,12 +18,10 @@ public class PlayableGraphView : UGraphView
 
         public PlayableGraphView()
         {
+            SetupZoom(ContentZoomer.DefaultMinScale, ContentZoomer.DefaultMaxScale);
             this.AddManipulator(new ContentDragger());
             //this.AddManipulator(new SelectionDragger());
             this.AddManipulator(new RectangleSelector());
-            SetupZoom(ContentZoomer.DefaultMinScale, ContentZoomer.DefaultMaxScale);
-
-            deleteSelection = OnDeleteSelectionEvent;
         }
 
         public void Update(PlayableGraph playableGraph)
@@ -47,11 +45,9 @@ public void Update(PlayableGraph playableGraph)
             }
         }
 
-
         public override void BuildContextualMenu(ContextualMenuPopulateEvent evt)
         {
             // disable contextual menu
-            //base.BuildContextualMenu(evt);
         }
 
         private void ClearView()
@@ -135,13 +131,8 @@ private void CalculateLayout()
 
                 outputNode.CalculateLayout(origin);
 
-                origin.y += treeSize.y + GraphViewNode.VerticalSpace;
+                origin.y += treeSize.y + GraphViewNode.VERTICAL_SPACE;
             }
         }
-
-        private void OnDeleteSelectionEvent(string operationName, AskUser askuser)
-        {
-            // disallow delete graph elements
-        }
     }
-}
+}
diff --git a/Editor/Scripts/Node/GraphViewNode.cs b/Editor/Scripts/Node/GraphViewNode.cs
@@ -57,7 +57,15 @@ public abstract class GraphViewNode : UNode
         protected GraphViewNode Parent { get; private set; }
 
 
-        public virtual void Update() { }
+        protected GraphViewNode()
+        {
+            capabilities &= ~Capabilities.Movable;
+            capabilities &= ~Capabilities.Deletable;
+        }
+        
+        public virtual void Update()
+        {
+        }
 
 
         #region Description
@@ -129,9 +137,9 @@ protected Port InstantiatePort<TPort>(Direction direction)
 
         #region Layout
 
-        public const int HorizontalSpace = 80;
+        public const int HORIZONTAL_SPACE = 80;
 
-        public const int VerticalSpace = 80;
+        public const int VERTICAL_SPACE = 80;
 
         public static readonly Vector2 StandardNodeSize = new Vector2(400, 150);
 
@@ -164,9 +172,10 @@ public Vector2 GetHierarchySize()
                 subHierarchySize.x = Mathf.Max(subHierarchySize.x, childSize.x);
                 subHierarchySize.y += childSize.y;
             }
-            subHierarchySize.y += (InternalInputs.Count - 1) * VerticalSpace;
 
-            var hierarchySize = GetNodeSize() + new Vector2(HorizontalSpace, 0);
+            subHierarchySize.y += (InternalInputs.Count - 1) * VERTICAL_SPACE;
+
+            var hierarchySize = GetNodeSize() + new Vector2(HORIZONTAL_SPACE, 0);
             hierarchySize.y = Mathf.Max(hierarchySize.y, subHierarchySize.y);
             _hierarchySize = hierarchySize;
 
@@ -179,7 +188,7 @@ public void CalculateLayout(Vector2 origin)
             var nodePos = CalculateSubTreeRootNodePosition(subTreeSize, origin);
             SetPosition(new Rect(nodePos, Vector2.zero));
 
-            origin.x -= GetNodeSize().x - HorizontalSpace;
+            origin.x -= GetNodeSize().x - HORIZONTAL_SPACE;
             for (int i = 0; i < InternalInputs.Count; i++)
             {
                 var childNode = InternalInputs[i];
@@ -202,7 +211,7 @@ public static Vector2 CalculateSubTreeRootNodePosition(Vector2 subTreeSize, Vect
 
         #region Flags
 
-        private uint _flags = 0;
+        private uint _flags;
 
 
         public bool CheckFlag(NodeFlag flag)
diff --git a/Editor/Scripts/Node/PlayableNode.cs b/Editor/Scripts/Node/PlayableNode.cs
@@ -75,6 +75,9 @@ public override void Update()
                 var selfInputPort = InternalInputPorts[i];
                 var edge = selfInputPort.ConnectTo(inputPlayableNodeOutputPort);
                 Container.AddElement(edge);
+                edge.capabilities &= ~Capabilities.Movable;
+                edge.capabilities &= ~Capabilities.Deletable;
+                edge.capabilities &= ~Capabilities.Selectable;
                 InternalInputs.Add(new NodeInput(edge, inputPlayableNode, i));
 
                 AddFlag(NodeFlag.HierarchyDirty);
diff --git a/Editor/Scripts/Node/PlayableNodeFactory.cs b/Editor/Scripts/Node/PlayableNodeFactory.cs
@@ -6,15 +6,15 @@ namespace GBG.PlayableGraphMonitor.Editor.Node
 {
     public static class PlayableNodeFactory
     {
-        public const string PlayableHeader = "Playable";
+        public const string PLAYABLE_HEADER = "Playable";
 
         public static PlayableNode CreateNode(Playable playable)
         {
             var playableType = playable.GetPlayableType();
             var playableTypeName = playableType.Name;
             var playableTypeSortName = playableTypeName
-                .Remove(playableTypeName.Length - PlayableHeader.Length);
-            var nodeTitle = $"{PlayableHeader}\n{playableTypeSortName}";
+                .Remove(playableTypeName.Length - PLAYABLE_HEADER.Length);
+            var nodeTitle = $"{PLAYABLE_HEADER}\n{playableTypeSortName}";
 
             // create node by playable type
             PlayableNode playableNode;
diff --git a/Editor/Scripts/Node/PlayableOutputNode.cs b/Editor/Scripts/Node/PlayableOutputNode.cs
@@ -53,6 +53,9 @@ public override void Update()
                     var sourcePlayableOutputPort = sourcePlayableNode.OutputPorts[0];
                     var selfSourcePort = InternalInputPorts[0];
                     var edge = selfSourcePort.ConnectTo(sourcePlayableOutputPort);
+                    edge.capabilities &= ~Capabilities.Movable;
+                    edge.capabilities &= ~Capabilities.Deletable;
+                    edge.capabilities &= ~Capabilities.Selectable;
                     Container.AddElement(edge);
                     InternalInputs.Add(new NodeInput(edge, sourcePlayableNode, 0));
 
@@ -115,7 +118,7 @@ private void CreatePorts()
         protected override void AppendStateDescriptions(StringBuilder descBuilder)
         {
             descBuilder.Append("Type: ").AppendLine(PlayableOutput.GetPlayableOutputType().Name)
-                        .Append("IsValid: ").AppendLine(PlayableOutput.IsOutputValid().ToString());
+                .Append("IsValid: ").AppendLine(PlayableOutput.IsOutputValid().ToString());
             if (PlayableOutput.IsOutputValid())
             {
                 descBuilder.Append("Name: ").AppendLine(PlayableOutput.GetEditorName())
@@ -128,4 +131,4 @@ protected override void AppendStateDescriptions(StringBuilder descBuilder)
 
         #endregion
     }
-}
+}
diff --git a/Editor/Scripts/Node/PlayableOutputNodeFactory.cs b/Editor/Scripts/Node/PlayableOutputNodeFactory.cs
@@ -1,22 +1,21 @@
 ﻿using GBG.PlayableGraphMonitor.Editor.Utility;
 using UnityEditor.Playables;
-using UnityEngine.Animations;
 using UnityEngine.Playables;
 
 namespace GBG.PlayableGraphMonitor.Editor.Node
 {
     public static class PlayableOutputNodeFactory
     {
-        public const string PlayableOutputHeader = "PlayableOutput";
+        public const string PLAYABLE_OUTPUT_HEADER = "PlayableOutput";
 
         public static PlayableOutputNode CreateNode(PlayableOutput playableOutput)
         {
             var playableOutputType = playableOutput.GetPlayableOutputType();
             var playableOutputTypeName = playableOutputType.Name;
             var playableOutputTypeSortName = playableOutputTypeName
-                .Remove(playableOutputTypeName.Length - PlayableOutputHeader.Length);
+                .Remove(playableOutputTypeName.Length - PLAYABLE_OUTPUT_HEADER.Length);
             var playableOutputEditorName = playableOutput.GetEditorName();
-            var nodeTitle = $"{PlayableOutputHeader}\n" +
+            var nodeTitle = $"{PLAYABLE_OUTPUT_HEADER}\n" +
                             $"{playableOutputTypeSortName} ({playableOutputEditorName})";
 
             // default node
diff --git a/Editor/Scripts/Utility/GraphTool.cs b/Editor/Scripts/Utility/GraphTool.cs
@@ -53,12 +53,12 @@ public static void SetNodeStyle(this GraphViewNode node, Color nodeColor,
         #region Port Color
 
         // Ensure edge is always visible.
-        public const float ColorAlphaFactor = 1f / 9;
+        public const float COLOR_ALPHA_FACTOR = 1f / 9;
 
 
         public static Color GetPortColor(float weight)
         {
-            var alpha = (weight + ColorAlphaFactor) / (1 + ColorAlphaFactor);
+            var alpha = (weight + COLOR_ALPHA_FACTOR) / (1 + COLOR_ALPHA_FACTOR);
             return new Color(1, 1, 1, alpha);
         }
 
diff --git a/Editor/Scripts/Window/PlayableGraphMonitorWindow.cs b/Editor/Scripts/Window/PlayableGraphMonitorWindow.cs
@@ -9,6 +9,7 @@ namespace GBG.PlayableGraphMonitor.Editor
 {
     public partial class PlayableGraphMonitorWindow : EditorWindow
     {
+        // ReSharper disable once Unity.IncorrectMethodSignature
         [MenuItem("Window/Analysis/PlayableGraph Monitor")]
         public static PlayableGraphMonitorWindow Open()
         {
diff --git a/Editor/Scripts/Window/PlayableGraphMonitorWindow_GraphView.cs b/Editor/Scripts/Window/PlayableGraphMonitorWindow_GraphView.cs
@@ -13,12 +13,12 @@ private void CreateGraphView(VisualElement container)
             _graphView = new PlayableGraphView
             {
                 style =
-            {
-                flexGrow = new StyleFloat(1)
-            }
+                {
+                    flexGrow = new StyleFloat(1)
+                }
             };
 
             container.Add(_graphView);
         }
     }
-}
+}
diff --git a/Editor/Scripts/Window/PlayableGraphMonitorWindow_NodeInspector.cs b/Editor/Scripts/Window/PlayableGraphMonitorWindow_NodeInspector.cs
@@ -6,7 +6,7 @@ namespace GBG.PlayableGraphMonitor.Editor
 {
     public partial class PlayableGraphMonitorWindow
     {
-        private const float _nodeInspectorWidth = 250f;
+        private const float _NODE_INSPECTOR_WIDTH = 250f;
 
         private VisualElement _nodeInspectorPanel;
 
@@ -19,15 +19,15 @@ private void CreateNodeInspector(VisualElement container)
             {
                 name = "node-inspector",
                 style =
-            {
-                width = new Length(_nodeInspectorWidth, LengthUnit.Pixel),
-                height = new Length(100, LengthUnit.Percent),
-                backgroundColor = GraphTool.GetNodeInspectorBackgroundColor(),
-                paddingLeft = 4,
-                paddingRight = 4,
-                paddingTop = 4,
-                paddingBottom = 4
-            }
+                {
+                    width = new Length(_NODE_INSPECTOR_WIDTH, LengthUnit.Pixel),
+                    height = new Length(100, LengthUnit.Percent),
+                    backgroundColor = GraphTool.GetNodeInspectorBackgroundColor(),
+                    paddingLeft = 4,
+                    paddingRight = 4,
+                    paddingTop = 4,
+                    paddingBottom = 4
+                }
             };
 
             var scrollView = new ScrollView
@@ -38,9 +38,9 @@ private void CreateNodeInspector(VisualElement container)
             {
                 name = "node-desc-label",
                 style =
-            {
-                color = GraphTool.GetNodeInspectorTextColor()
-            }
+                {
+                    color = GraphTool.GetNodeInspectorTextColor()
+                }
             };
             scrollView.Add(_nodeDescriptionLabel);
             _nodeInspectorPanel.Add(scrollView);
@@ -50,7 +50,7 @@ private void CreateNodeInspector(VisualElement container)
 
         private void DrawGraphNodeInspector()
         {
-            if (!(bool)_showInspectorButton.userData)
+            if (!_inspectorToggle.value)
             {
                 return;
             }
@@ -65,4 +65,4 @@ private void DrawGraphNodeInspector()
             _nodeDescriptionLabel.text = "Select one node to show details.";
         }
     }
-}
+}
diff --git a/Editor/Scripts/Window/PlayableGraphMonitorWindow_Toolbar.cs b/Editor/Scripts/Window/PlayableGraphMonitorWindow_Toolbar.cs
@@ -1,4 +1,3 @@
-using GBG.PlayableGraphMonitor.Editor.Utility;
 using UnityEditor.UIElements;
 using UnityEngine.Playables;
 using UnityEngine.UIElements;
@@ -11,7 +10,7 @@ public partial class PlayableGraphMonitorWindow
 
         private PopupField<PlayableGraph> _graphPopupField;
 
-        private Button _showInspectorButton;
+        private ToolbarToggle _inspectorToggle;
 
 
         private void CreateToolbar()
@@ -23,27 +22,26 @@ private void CreateToolbar()
             _graphPopupField = new PopupField<PlayableGraph>(_graphs, 0,
                 GraphPopupFieldFormatter, GraphPopupFieldFormatter);
             _toolbar.Add(_graphPopupField);
+            _toolbar.Add(new ToolbarSpacer());
 
             // frame all button
-            var frameAllButton = new Button(OnFrameAllButtonClicked)
+            var frameAllButton = new ToolbarButton(OnFrameAllButtonClicked)
             {
                 name = "frame-all-button",
                 text = "Frame All",
             };
             _toolbar.Add(frameAllButton);
+            _toolbar.Add(new ToolbarSpacer());
 
-            // inspector button
-            _showInspectorButton = new Button(OnInspectorButtonClicked)
+            // inspector toggle
+            _inspectorToggle = new ToolbarToggle()
             {
-                name = "inspector-button",
-                text = "Show Inspector",
-                style =
-            {
-                backgroundColor = GraphTool.GetButtonBackgroundColor(true)
-            },
-                userData = true
+                name = "inspector-toggle",
+                text = "Inspector",
+                value = true,
             };
-            _toolbar.Add(_showInspectorButton);
+            _inspectorToggle.RegisterValueChangedCallback(ToggleInspector);
+            _toolbar.Add(_inspectorToggle);
         }
 
         private string GraphPopupFieldFormatter(PlayableGraph graph)
@@ -75,14 +73,11 @@ private void OnFrameAllButtonClicked()
             _graphView.FrameAll();
         }
 
-        private void OnInspectorButtonClicked()
+        private void ToggleInspector(ChangeEvent<bool> evt)
         {
-            var showInspector = !(bool)_showInspectorButton.userData;
-            _showInspectorButton.userData = showInspector;
-            _showInspectorButton.style.backgroundColor = GraphTool.GetButtonBackgroundColor(showInspector);
-
+            var showInspector = evt.newValue;
             _nodeInspectorPanel.visible = showInspector;
-            _nodeInspectorPanel.style.width = showInspector ? _nodeInspectorWidth : 0;
+            _nodeInspectorPanel.style.width = showInspector ? _NODE_INSPECTOR_WIDTH : 0;
         }
     }
-}
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "com.greenbamboogames.playablegraphmonitor",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "displayName": "PlayableGraphMonitor!",
   "description": "PlayableGraph monitor.",
   "unity": "2019.4",

Original file line number	Diff line number	Diff line change
`@@ -18,12 +18,10 @@ public class PlayableGraphView : UGraphView`
`18`	`18`
`19`	`19`	`public PlayableGraphView()`
`20`	`20`	`{`
	`21`	`+ SetupZoom(ContentZoomer.DefaultMinScale, ContentZoomer.DefaultMaxScale);`
`21`	`22`	`this.AddManipulator(new ContentDragger());`
`22`	`23`	`//this.AddManipulator(new SelectionDragger());`
`23`	`24`	`this.AddManipulator(new RectangleSelector());`
`24`		`- SetupZoom(ContentZoomer.DefaultMinScale, ContentZoomer.DefaultMaxScale);`
`25`		`-`
`26`		`- deleteSelection = OnDeleteSelectionEvent;`
`27`	`25`	`}`
`28`	`26`
`29`	`27`	`public void Update(PlayableGraph playableGraph)`
`@@ -47,11 +45,9 @@ public void Update(PlayableGraph playableGraph)`
`47`	`45`	`}`
`48`	`46`	`}`
`49`	`47`
`50`		`-`
`51`	`48`	`public override void BuildContextualMenu(ContextualMenuPopulateEvent evt)`
`52`	`49`	`{`
`53`	`50`	`// disable contextual menu`
`54`		`- //base.BuildContextualMenu(evt);`
`55`	`51`	`}`
`56`	`52`
`57`	`53`	`private void ClearView()`
`@@ -135,13 +131,8 @@ private void CalculateLayout()`
`135`	`131`
`136`	`132`	`outputNode.CalculateLayout(origin);`
`137`	`133`
`138`		`- origin.y += treeSize.y + GraphViewNode.VerticalSpace;`
	`134`	`+ origin.y += treeSize.y + GraphViewNode.VERTICAL_SPACE;`
`139`	`135`	`}`
`140`	`136`	`}`
`141`		`-`
`142`		`- private void OnDeleteSelectionEvent(string operationName, AskUser askuser)`
`143`		`- {`
`144`		`- // disallow delete graph elements`
`145`		`- }`
`146`	`137`	`}`
`147`		`-}`
	`138`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -6,15 +6,15 @@ namespace GBG.PlayableGraphMonitor.Editor.Node`
`6`	`6`	`{`
`7`	`7`	`public static class PlayableNodeFactory`
`8`	`8`	`{`
`9`		`- public const string PlayableHeader = "Playable";`
	`9`	`+ public const string PLAYABLE_HEADER = "Playable";`
`10`	`10`
`11`	`11`	`public static PlayableNode CreateNode(Playable playable)`
`12`	`12`	`{`
`13`	`13`	`var playableType = playable.GetPlayableType();`
`14`	`14`	`var playableTypeName = playableType.Name;`
`15`	`15`	`var playableTypeSortName = playableTypeName`
`16`		`- .Remove(playableTypeName.Length - PlayableHeader.Length);`
`17`		`- var nodeTitle = $"{PlayableHeader}\n{playableTypeSortName}";`
	`16`	`+ .Remove(playableTypeName.Length - PLAYABLE_HEADER.Length);`
	`17`	`+ var nodeTitle = $"{PLAYABLE_HEADER}\n{playableTypeSortName}";`
`18`	`18`
`19`	`19`	`// create node by playable type`
`20`	`20`	`PlayableNode playableNode;`
Original file line number	Diff line number	Diff line change
`@@ -53,12 +53,12 @@ public static void SetNodeStyle(this GraphViewNode node, Color nodeColor,`
`53`	`53`	`#region Port Color`
`54`	`54`
`55`	`55`	`// Ensure edge is always visible.`
`56`		`- public const float ColorAlphaFactor = 1f / 9;`
	`56`	`+ public const float COLOR_ALPHA_FACTOR = 1f / 9;`
`57`	`57`
`58`	`58`
`59`	`59`	`public static Color GetPortColor(float weight)`
`60`	`60`	`{`
`61`		`- var alpha = (weight + ColorAlphaFactor) / (1 + ColorAlphaFactor);`
	`61`	`+ var alpha = (weight + COLOR_ALPHA_FACTOR) / (1 + COLOR_ALPHA_FACTOR);`
`62`	`62`	`return new Color(1, 1, 1, alpha);`
`63`	`63`	`}`
`64`	`64`
Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,7 @@ namespace GBG.PlayableGraphMonitor.Editor`
`9`	`9`	`{`
`10`	`10`	`public partial class PlayableGraphMonitorWindow : EditorWindow`
`11`	`11`	`{`
	`12`	`+ // ReSharper disable once Unity.IncorrectMethodSignature`
`12`	`13`	`[MenuItem("Window/Analysis/PlayableGraph Monitor")]`
`13`	`14`	`public static PlayableGraphMonitorWindow Open()`
`14`	`15`	`{`
Original file line number	Diff line number	Diff line change
`@@ -13,12 +13,12 @@ private void CreateGraphView(VisualElement container)`
`13`	`13`	`_graphView = new PlayableGraphView`
`14`	`14`	`{`
`15`	`15`	`style =`
`16`		`- {`
`17`		`- flexGrow = new StyleFloat(1)`
`18`		`- }`
	`16`	`+ {`
	`17`	`+ flexGrow = new StyleFloat(1)`
	`18`	`+ }`
`19`	`19`	`};`
`20`	`20`
`21`	`21`	`container.Add(_graphView);`
`22`	`22`	`}`
`23`	`23`	`}`
`24`		`-}`
	`24`	`+}`