浏览代码

Update preview toggle button to mostly match design

/main
Peter Bay Bastian 7 年前
当前提交
4be8c24e
共有 6 个文件被更改,包括 116 次插入56 次删除
  1. 8
      MaterialGraphProject/Assets/UnityShaderEditor/Editor/Drawing/Inspector/GraphInspectorView.cs
  2. 101
      MaterialGraphProject/Assets/UnityShaderEditor/Editor/Drawing/Views/MaterialNodeView.cs
  3. 2
      MaterialGraphProject/Assets/UnityShaderEditor/Editor/Drawing/Views/PreviewTextureView.cs
  4. 61
      MaterialGraphProject/Assets/UnityShaderEditor/Editor/Resources/Styles/MaterialGraph.uss
  5. 0
      /MaterialGraphProject/Assets/UnityShaderEditor/Editor/Drawing/Views/PreviewTextureView.cs.meta
  6. 0
      /MaterialGraphProject/Assets/UnityShaderEditor/Editor/Drawing/Views/PreviewTextureView.cs

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


AbstractNodeEditorView m_EditorView;
TypeMapper m_TypeMapper;
PreviewView m_Preview;
PreviewTextureView m_PreviewTextureView;
AbstractMaterialGraph m_Graph;
PreviewManager m_PreviewManager;

bottomContainer.Add(layersContainer);
}
m_Preview = new PreviewView {name = "preview", image = Texture2D.blackTexture};
bottomContainer.Add(m_Preview);
m_PreviewTextureView = new PreviewTextureView {name = "preview", image = Texture2D.blackTexture};
bottomContainer.Add(m_PreviewTextureView);
m_PreviewMeshPicker = new Experimental.UIElements.ObjectField() { objectType = typeof(Mesh) };
bottomContainer.Add(m_PreviewMeshPicker);

void OnPreviewChanged()
{
m_Preview.image = m_PreviewHandle.texture ?? Texture2D.blackTexture;
m_PreviewTextureView.image = m_PreviewHandle.texture ?? Texture2D.blackTexture;
m_PreviewHandle.mesh = m_PreviewMeshPicker.value as Mesh;
}

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


using UnityEngine;
using UnityEngine.Experimental.UIElements;
using UnityEditor.Graphing;
using UnityEditor.ShaderGraph;
using UnityEngine.WSA;
namespace UnityEditor.ShaderGraph.Drawing
{

PreviewData m_Preview;
PreviewView m_PreviewImage;
VisualElement m_PreviewToggle;
PreviewData m_PreviewData;
PreviewTextureView m_PreviewTextureView;
VisualElement m_PreviewContainer;
public MaterialNodeView(AbstractMaterialNode inNode, PreviewManager previewManager)
{

};
leftContainer.Add(m_ControlsContainer);
m_PreviewToggle = new VisualElement { name = "toggle", text = "" };
m_PreviewToggle.AddManipulator(new Clickable(() => previewExpanded = !previewExpanded));
m_PreviewToggle.RemoveFromClassList("inactive");
else
m_PreviewToggle.AddToClassList("inactive");
previewExpanded = node.previewExpanded;
leftContainer.Add(m_PreviewToggle);
{
m_PreviewContainer = new VisualElement { name = "previewContainer" };
m_PreviewContainer.AddToClassList("expanded");
{
m_PreviewTextureView = new PreviewTextureView
{
name = "preview",
pickingMode = PickingMode.Ignore,
image = Texture2D.whiteTexture
};
m_PreviewData = previewManager.GetPreview(inNode);
m_PreviewData.onPreviewChanged += UpdatePreviewTexture;
UpdatePreviewTexture();
m_PreviewContainer.Add(m_PreviewTextureView);
var collapsePreviewButton = new VisualElement { name = "collapse", text = "▲" };
collapsePreviewButton.AddManipulator(new Clickable(() =>
{
node.owner.owner.RegisterCompleteObjectUndo("Collapse Preview");
UpdatePreviewExpandedState(false);
}));
UpdatePreviewExpandedState(node.previewExpanded);
m_PreviewContainer.Add(collapsePreviewButton);
m_PreviewImage = new PreviewView
{
name = "preview",
pickingMode = PickingMode.Ignore,
image = Texture2D.whiteTexture
};
m_Preview = previewManager.GetPreview(inNode);
m_Preview.onPreviewChanged += UpdatePreviewTexture;
UpdatePreviewTexture();
leftContainer.Add(m_PreviewImage);
var expandPreviewButton = new VisualElement { name = "expand", text = "▼" };
expandPreviewButton.AddManipulator(new Clickable(() =>
{
node.owner.owner.RegisterCompleteObjectUndo("Expand Preview");
UpdatePreviewExpandedState(true);
}));
m_PreviewContainer.Add(expandPreviewButton);
}
leftContainer.Add(m_PreviewContainer);
}
m_ControlViews = new List<VisualElement>();
foreach (var propertyInfo in node.GetType().GetProperties(BindingFlags.Instance | BindingFlags.Public | BindingFlags.NonPublic))

}
}
bool previewExpanded
void UpdatePreviewExpandedState(bool expanded)
get { return node.previewExpanded; }
set
node.previewExpanded = expanded;
if (expanded)
{
m_PreviewContainer.AddToClassList("expanded");
m_PreviewContainer.RemoveFromClassList("collapsed");
}
else
node.previewExpanded = value;
m_PreviewToggle.text = node.previewExpanded ? "▲" : "▼";
m_PreviewContainer.RemoveFromClassList("expanded");
m_PreviewContainer.AddToClassList("collapsed");
}
}

public void OnModified(ModificationScope scope)
{
UpdateTitle();
if (node.hasPreview)
UpdatePreviewExpandedState(node.previewExpanded);
expanded = node.drawState.expanded;
// Update slots to match node modification

void OnResize(Vector2 deltaSize)
{
var updatedWidth = leftContainer.layout.width + deltaSize.x;
var updatedHeight = m_PreviewImage.layout.height + deltaSize.y;
var updatedHeight = m_PreviewTextureView.layout.height + deltaSize.y;
var previewNode = node as PreviewNode;
if (previewNode != null)

void UpdatePreviewTexture()
{
if (m_Preview.texture == null || !node.previewExpanded)
if (m_PreviewData.texture == null || !node.previewExpanded)
m_PreviewImage.visible = false;
m_PreviewImage.RemoveFromClassList("visible");
m_PreviewImage.AddToClassList("hidden");
m_PreviewImage.image = Texture2D.whiteTexture;
m_PreviewTextureView.visible = false;
m_PreviewTextureView.image = Texture2D.blackTexture;
m_PreviewImage.visible = true;
m_PreviewImage.AddToClassList("visible");
m_PreviewImage.RemoveFromClassList("hidden");
m_PreviewImage.image = m_Preview.texture;
m_PreviewTextureView.visible = true;
m_PreviewTextureView.AddToClassList("visible");
m_PreviewTextureView.RemoveFromClassList("hidden");
m_PreviewTextureView.image = m_PreviewData.texture;
}
Dirty(ChangeType.Repaint);
}

var height = previewNode.height;
leftContainer.style.width = width;
m_PreviewImage.style.height = height;
m_PreviewTextureView.style.height = height;
if (m_Preview != null)
if (m_PreviewData != null)
m_Preview.onPreviewChanged -= UpdatePreviewTexture;
m_Preview = null;
m_PreviewData.onPreviewChanged -= UpdatePreviewTexture;
m_PreviewData = null;
}
}
}

2
MaterialGraphProject/Assets/UnityShaderEditor/Editor/Drawing/Views/PreviewTextureView.cs


namespace UnityEditor.ShaderGraph.Drawing
{
public sealed class PreviewView : VisualElement
public sealed class PreviewTextureView : VisualElement
{
Texture m_Image;

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


background-color: rgb(20, 21, 21);
}
MaterialNodeView > .mainContainer > #left > #preview.active {
MaterialNodeView > .mainContainer > #left > #previewContainer {
MaterialNodeView > .mainContainer > #left > #preview.visible {
height: 200;
MaterialNodeView > .mainContainer > #left > #previewContainer.expanded > #preview.active,
MaterialNodeView > .mainContainer > #left > #previewContainer.expanded > #preview.visible {
width: 200;
height: 200;
MaterialNodeView > .mainContainer > #left > #toggle {
text-color: rgb(153, 153, 153);
MaterialNodeView > .mainContainer > #left > #previewContainer.collapsed > #collapse {
height: 0;
}
MaterialNodeView > .mainContainer > #left > #previewContainer.expanded > #collapse {
background-color: rgba(0, 0, 0, 0.5);
text-color: rgba(255, 255, 255, 0.75);
border-color: rgba(255, 255, 255, 0.75);
border-radius: 2;
position-left: 87;
position-right: 87;
position-top: 5;
position-type: absolute;
height: 0;
border-top-width: 0;
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
MaterialNodeView > .mainContainer > #left > #toggle.inactive {
height: 0;
MaterialNodeView > .mainContainer > #left > #previewContainer.expanded:hover > #collapse {
border-top-width: 1;
border-bottom-width: 1;
border-left-width: 1;
border-right-width: 1;
height: 26;
MaterialNodeView > .mainContainer > #left > #toggle:hover {
background-color: rgba(0, 0, 0, 0.33);
MaterialNodeView > .mainContainer > #left > #previewContainer.expanded > #collapse:hover {
background-color: rgba(0, 0, 0, 0.75);
text-color: rgba(255, 255, 255, 1);
border-color: rgba(255, 255, 255, 1);
MaterialNodeView > .mainContainer > #left > #toggle:active {
MaterialNodeView > .mainContainer > #left > #previewContainer.expanded > #collapse:active {
}
MaterialNodeView > .mainContainer > #left > #previewContainer.expanded > #expand {
height: 0;
}
MaterialNodeView > .mainContainer > #left > #previewContainer.collapsed > #expand {
text-alignment: middle-center;
text-color: rgb(153, 153, 153);
align-self: center;
width: 50;
}
MaterialNodeView > .mainContainer > #left > #previewContainer.collapsed > #expand:hover {
background-color: rgba(0, 0, 0, 0.5);
text-color: rgba(255, 255, 255, 1);
}
MaterialNodeView > #resize {

/MaterialGraphProject/Assets/UnityShaderEditor/Editor/Drawing/Views/PreviewView.cs.meta → /MaterialGraphProject/Assets/UnityShaderEditor/Editor/Drawing/Views/PreviewTextureView.cs.meta

/MaterialGraphProject/Assets/UnityShaderEditor/Editor/Drawing/Views/PreviewView.cs → /MaterialGraphProject/Assets/UnityShaderEditor/Editor/Drawing/Views/PreviewTextureView.cs

正在加载...
取消
保存