Modify Node to be compatible with MG's layout

- NodalView.uss is now gone as the Node's layouting is now in GraphView.uss
- Node now has a bunch of containers to match Hugo's design

This is not be final as, for example, the collapse button is an ugly button
and we're not yet dealing with empty input/output list as required.

Signed-off-by: joce <joce@unity3d.com>

MaterialGraphProject/Assets/NewUI/Editor/Demo/Views/NodesContentView.cs

 
 namespace RMGUI.GraphView.Demo
 {
-	[StyleSheet("Assets/NewUI/Editor/Demo/Views/NodalView.uss")]
 	class NodesContentView : SimpleContentView
 	{
 		private readonly System.Random m_Rnd = new System.Random();

MaterialGraphProject/Assets/NewUI/Editor/Demo/Views/Presenters/NodesContentViewPresenter.cs

 			AddElement(nodePresenter);
 
 			nodePresenter = InitNodePresenter(typeof(int));
-			nodePresenter.position = new Rect(210, 0, 200, 176);
+			nodePresenter.position = new Rect(300, 0, 200, 176);
-			nodePresenter.position = new Rect(420, 0, 200, 176);
+			nodePresenter.position = new Rect(300, 186, 200, 176);
 			nodePresenter.title = "Some Other Operator";
 			AddElement(nodePresenter);
 
 			AddElement(nodePresenter);
 
 			var verticalNodePresenter = InitVerticalNodePresenter();
-			verticalNodePresenter.position = new Rect(210, 420, 100, 100);
+			verticalNodePresenter.position = new Rect(240, 420, 100, 100);
-			verticalNodePresenter.position = new Rect(320, 420, 100, 100);
+			verticalNodePresenter.position = new Rect(350, 420, 100, 100);
-			verticalNodePresenter.position = new Rect(430, 420, 100, 100);
+			verticalNodePresenter.position = new Rect(460, 420, 100, 100);
-			commentPresenter.position = new Rect(830, 0, 500, 300);
+			commentPresenter.position = new Rect(850, 0, 500, 300);
 			commentPresenter.color = new Color(0.4f, 0f, 0f, 0.3f);
 			commentPresenter.titleBar = "My First Comment";
 			commentPresenter.body = "This is my first comment.  It is made of words and a few return carriages.  Nothing more.  I hope we can see this whole line.\n\n" +
 			var miniMapPresenter = CreateInstance<MiniMapPresenter>();
-			miniMapPresenter.position = new Rect(210, 186, 200, 176);
+			miniMapPresenter.position = new Rect(0, 372, 200, 176);
 			AddElement(miniMapPresenter);
 		}
 

MaterialGraphProject/Assets/NewUI/Editor/Elements/Node.cs

+using System.Linq;
+using UnityEngine.RMGUI.StyleEnums;
+using UnityEngine.RMGUI.StyleSheets;
-	class Node : SimpleElement
+	class Node : GraphElement
-		readonly VisualContainer m_InputContainer;
-		readonly VisualContainer m_OutputContainer;
+		protected readonly VisualContainer m_MainContainer;
+		protected readonly VisualContainer m_LeftContainer;
+		protected readonly VisualContainer m_RightContainer;
+		protected readonly VisualContainer m_TitleContainer;
+		protected readonly VisualContainer m_InputContainer;
+		protected readonly VisualContainer m_OutputContainer;
+
+		protected readonly Label m_TitleLabel;
+		protected readonly Button m_CollapseButton;
+
+		public override void SetPosition(Rect newPos)
+		{
+			if (classList.Contains("vertical"))
+			{
+				base.SetPosition(newPos);
+			}
+			else
+			{
+				positionType = PositionType.Absolute;
+				positionLeft = newPos.x;
+				positionTop = newPos.y;
+			}
+		}
 
 		protected virtual void SetLayoutClassLists(NodePresenter nodePresenter)
 		{
+			}
+
+			if (nodePresenter.orientation == Orientation.Vertical)
+			{
+				if (m_LeftContainer.children.Contains(m_TitleContainer))
+				{
+					m_LeftContainer.RemoveChild(m_TitleContainer);
+				}
+			}
+			else
+			{
+				if (!m_LeftContainer.children.Contains(m_TitleContainer))
+				{
+					m_LeftContainer.InsertChild(0, m_TitleContainer);
+				}
 			}
 
 			AddToClassList(nodePresenter.orientation == Orientation.Vertical ? "vertical" : "horizontal");
 				m_OutputContainer.AddChild(NodeAnchor.Create<EdgePresenter>(anchorPresenter));
 			}
 
+			m_TitleLabel.content.text = nodePresenter.title;
+
- 			var mainContainer = new VisualContainer()
+			m_MainContainer = new VisualContainer()
- 				name = "nodeMain", // for USS&Flexbox
+ 				name = "pane",
+			m_LeftContainer = new VisualContainer
+			{
+				name = "left",
+				pickingMode = PickingMode.Ignore,
+			};
+			m_RightContainer = new VisualContainer
+			{
+				name = "right",
+				pickingMode = PickingMode.Ignore,
+			};
+			m_TitleContainer = new VisualContainer
+			{
+				name = "title",
+				pickingMode = PickingMode.Ignore,
+			};
-				name = "input", // for USS&Flexbox
+				name = "input",
-				name = "output", // for USS&Flexbox
+				name = "output",
+			m_TitleLabel = new Label(new GUIContent(""));
+			m_CollapseButton = new Button(() => {})
+			{
+				content = new GUIContent("collapse")
+			};
+
-			AddChild(mainContainer);
-			mainContainer.AddChild(m_InputContainer);
-			mainContainer.AddChild(m_OutputContainer);
+			AddChild(m_MainContainer);
+			m_MainContainer.AddChild(m_LeftContainer);
+			m_MainContainer.AddChild(m_RightContainer);
+
+			m_TitleContainer.AddChild(m_TitleLabel);
+			m_TitleContainer.AddChild(m_CollapseButton);
+
+			m_LeftContainer.AddChild(m_InputContainer);
+			m_RightContainer.AddChild(m_OutputContainer);
+
+			classList = new ClassList("node");
 		}
 	}
 }

MaterialGraphProject/Assets/NewUI/Editor/Views/GraphView.uss

 	border-color: #f0f0f0;
 	border-width:1;
 }
+
+.node * {
+	font:path("Assets/Resources/Roboto/Roboto-Regular.ttf");
+	font-size:12;
+}
+
+.node.horizontal {
+	flex-direction: row;
+	align-items: stretch;
+	border-width: 2;
+	border-radius: 5;
+}
+
+.node.horizontal > #pane {
+	flex:1;
+	flex-direction: row;
+
+	align-items: stretch;
+	border-left: 4;
+	border-top: 4;
+	border-right: 4;
+	border-bottom: 4;
+	border-width: 2;
+	border-radius: 5;
+}
+
+.node.vertical > #pane {
+	flex:1;
+	flex-direction: column;
+}
+
+.node.selected {
+	border-color: rgb(210, 152, 0);
+}
+
+.node.horizontal #pane > #left {
+	width: 208;
+	background-color: rgb(45, 45, 45);
+	border-radius: 2;
+	padding-left: 2;
+}
+
+.node.horizontal #pane > #right {
+	margin-left: 2;
+	padding-left: 8;
+	padding-right: 8;
+	border-radius: 2;
+	background-color: rgb(32, 33, 33);
+}
+
+.node #left > #title {
+	flex-direction: row;
+}
+
+.node #left > #title > Label {
+	text-color: #FFFFFF;
+	font-style: bold;
+	text-alignment: middle-left;
+	flex: 2;
+}
+
+.node #left > #title > Button {
+	text-color: rgb(153, 153, 153);
+	flex: 1;
+}
+
+.node.horizontal #left > #input {
+	flex:1;
+	padding-left: 6;
+}
+
+.node.vertical #left > #input {
+	flex:1;
+}
+
+.node #right > #output {
+	flex:1;
+}
+
+.node.vertical #pane > #left {
+	background-color: rgb(45, 45, 45);
+	flex:1;
+}
+
+.node.vertical #pane > #right {
+	background-color: rgb(32, 33, 33);
+	flex:1;
+}
+
+.node.horizontal NodeAnchor {
+	height: 26;
+	align-items: center;
+}
+
+.node.horizontal NodeAnchor #connector {
+	background-color: rgb(20, 21, 21);
+	border-color: rgb(20, 21, 21);
+	/* width is currently hard-coded */
+	border-width: 4;
+	margin-left: 5;
+	margin-right: 5;
+	width: 10;
+	height: 10;
+	border-radius: 15;
+}
+
+.node.vertical NodeAnchor {
+	margin-top:5;
+	margin-bottom:5;
+}
+
+.node.vertical NodeAnchor #connector {
+	background-color:#111212;
+	border-radius:24;
+	width:10;
+	height:10;
+}
+
+.node NodeAnchor #connector.anchorHighlight {
+	background-color: rgb(220, 220, 220);
+	border-color: rgb(220, 220, 220);
+}
+
+.node NodeAnchor #type {
+	text-color: rgb(153, 153, 153);
+	flex:1;
+}
+
+.node.horizontal #output NodeAnchor #type {
+	text-alignment:middle-right;
+}
+
+.node.horizontal #input NodeAnchor #type {
+	text-alignment:middle-left;
+}
+
+.node.horizontal NodeAnchor #connector {
+	margin-left: 0;
+	margin-right: 4;
+	margin-top:2;
+}
+
+.node.horizontal #output NodeAnchor #connector {
+	margin-left: 4;
+	margin-right: 0;
+}
+
+.node.horizontal {
+	flex-direction: row;
+}
+
+.node.horizontal #nodeMain{
+	flex-direction: row;
+}
+
+.node.horizontal #input NodeAnchor {
+	flex-direction: row;
+}
+
+.node.horizontal #output NodeAnchor {
+	flex-direction: row-reverse;
+}
+
+.node.vertical #input, Node.vertical #output {
+	flex: 1;
+	flex-direction: row;
+	justify-content: center;
+}
+
+.node.vertical NodeAnchor {
+	align-items: center;
+}
+
+/* there is currently an issue with text size evaluation
+   which causes layout to "shake", so this is a just to avoid the visual glitch */
+.node.vertical NodeAnchor #type {
+	text-alignment:middle-center;
+}
+
+.node.vertical #input NodeAnchor {
+	flex-direction: column;
+}
+
+.node.vertical #output NodeAnchor {
+	flex-direction: column-reverse;
+}
+
+/* Example of dynamic properties
+Read from the GridBackground decorator */
+GridBackground {
+	grid-background-color:#141515;
+	line-color:#141515;
+	thick-line-color:#141515;
+	spacing:75.0;
+	thick-lines:0;
+}

MaterialGraphProject/Assets/NewUI/Editor/Demo/Views/NodalView.uss

-* { font:path("Assets/Resources/Roboto/Roboto-Regular.ttf");
-	font-size:12; }
-
-Node #input {
-	flex:1;
-}
-
-Node #output {
-	flex:1;
-}
-
-Node #nodeMain {
-	flex:1;
-}
-
-NodeAnchor {
-	margin-top:5;
-	margin-bottom:5;
-}
-
-NodeAnchor #connector {
-	background-color:#111212;
-	border-radius:24;
-	width:10;
-	height:10;
-}
-
-NodeAnchor #connector.anchorHighlight {
-	background-color:#F0F0F0;
-}
-
-NodeAnchor #type {
-	text-color:#999;
-	flex:1;
-}
-
-Node.horizontal #output NodeAnchor #type {
-	text-alignment:middle-right;
-}
-
-Node.horizontal NodeAnchor #connector {
-	margin-left: 0;
-	margin-right: 4;
-	margin-top:2;
-}
-
-Node.horizontal #output NodeAnchor #connector {
-	margin-left: 4;
-	margin-right: 0;
-}
-
-Node.horizontal {
-	flex-direction: row;
-}
-
-Node.horizontal #nodeMain{
-	flex-direction: row;
-}
-
-Node.horizontal #input, Node.horizontal #output {
-	margin-top: 24;
-}
-
-Node.horizontal #input NodeAnchor {
-	flex-direction: row;
-}
-
-Node.horizontal #output NodeAnchor {
-	flex-direction: row-reverse;
-}
-
-Node.vertical #input, Node.vertical #output {
-	flex: 1;
-	flex-direction: row;
-	justify-content: center;
-}
-
-Node.vertical NodeAnchor {
-	align-items: center;
-}
-
-/* there is currently an issue with text size evaluation
-   which causes layout to "shake", so this is a just to avoid the visual glitch */
-Node.vertical NodeAnchor #type {
-	text-alignment:middle-center;
-}
-
-Node.vertical #input NodeAnchor {
-	flex-direction: column;
-}
-
-Node.vertical #output NodeAnchor {
-	flex-direction: column-reverse;
-}
-
-/* Example of dynamic properties
-Read from the GridBackground decorator */
-GridBackground {
-	grid-background-color:#141515;
-	line-color:#141515;
-	thick-line-color:#141515;
-	spacing:75.0;
-	thick-lines:0;
-}

MaterialGraphProject/Assets/NewUI/Editor/Demo/Views/NodalView.uss.meta

-fileFormatVersion: 2
-guid: b3dd47151f230aa41a6182074b34fc0a
-timeCreated: 1475841339
-licenseType: Pro
-StyleSheetImporter:
-  userData: 
-  assetBundleName: 
-  assetBundleVariant: