Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix port and edge coloring/styling #4

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix port and edge coloring/styling #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions Editor/Elements/Graph/BaseEdge.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,16 +211,16 @@ private void SetPositionOverride(Vector2 position, out Vector2 overrideValueToSe
overrideValueToSet = position;
if (overrideFlagToSet != true) {
overrideFlagToSet = true;
portToUpdate?.UpdateCapColor();
portToUpdate?.UpdateCapVisiblity();
}
OnEdgeChanged();
}

public void UnsetPositionOverrides() {
m_InputPositionOverridden = false;
m_OutputPositionOverridden = false;
m_InputPort?.UpdateCapColor();
m_OutputPort?.UpdateCapColor();
m_InputPort?.UpdateCapVisiblity();
m_OutputPort?.UpdateCapVisiblity();
OnEdgeChanged();
}

Expand Down
34 changes: 19 additions & 15 deletions Editor/Elements/Graph/BasePort.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ public class BasePort : VisualElement, IPositionable {
private const float portCirclelineWidth = 1f;

private static readonly Color s_DefaultColor = new(240 / 255f, 240 / 255f, 240 / 255f);
private static readonly Color s_DefaultDisabledColor = new(70 / 255f, 70 / 255f, 70 / 255f);

public readonly HashSet<BaseEdge> m_Connections;
protected VisualElement m_ConnectorBox;
Expand Down Expand Up @@ -66,6 +65,7 @@ public BasePort(Orientation orientation, Direction direction, PortCapacity capac
m_ConnectorBox.AddToClassList("port-connector-box");
m_ConnectorBox.Add(m_ConnectorBoxCap);
m_ConnectorBox.style.backgroundImage = new StyleBackground(PortCircleGraphics);
m_ConnectorBox.style.unityBackgroundImageTintColor = portColor;

Add(m_ConnectorBox);

Expand Down Expand Up @@ -139,11 +139,18 @@ public Color PortColor {
get => portColor;
set {
portColor = value;
UpdateCapColor();
CapColor = portColor;
m_ConnectorBox.style.unityBackgroundImageTintColor = portColor;
}
}
public virtual Color DefaultPortColor { get; } = s_DefaultColor;
public virtual Color DisabledPortColor { get; } = s_DefaultDisabledColor;
public virtual Color DisabledPortColor {
get {
Color color = PortColor * 0.3f;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we avoid this magic number (0.3f) here somehow? :)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe it could be some constant?

private const float k_DisabledColorMultiplier = 0.3f;

color.a = PortColor.a;
return color;
}
}

public Orientation Orientation { get; }
public PortCapacity Capacity { get; }
Expand Down Expand Up @@ -177,14 +184,14 @@ public virtual void Connect(BaseEdge edge) {

if (!m_Connections.Contains(edge)) { m_Connections.Add(edge); }

UpdateCapColor();
UpdateCapVisiblity();
}

public virtual void Disconnect(BaseEdge edge) {
if (edge == null) { throw new ArgumentException("The value passed to PortPresenter.Disconnect is null"); }

m_Connections.Remove(edge);
UpdateCapColor();
UpdateCapVisiblity();
}

public virtual bool CanConnectToMore(bool ignoreCandidateEdges = true)
Expand Down Expand Up @@ -221,18 +228,15 @@ public virtual bool CanConnectTo(BasePort other, bool ignoreCandidateEdges = tru
#endregion

#region Style
internal void UpdateCapColor() {
if (Connected()) { m_ConnectorBoxCap.style.backgroundColor = PortColor; } else { m_ConnectorBoxCap.style.backgroundColor = StyleKeyword.Null; }
internal void UpdateCapVisiblity() {
if (Connected()) { m_ConnectorBoxCap.style.opacity = 1; } else { m_ConnectorBoxCap.style.opacity = StyleKeyword.Null; }
}

private void UpdateConnectorColorAndEnabledState() {
if (m_ConnectorBox == null) { return; }

Color color = Highlight ? PortColor : DisabledPortColor;
m_ConnectorBox.style.borderLeftColor = color;
m_ConnectorBox.style.borderTopColor = color;
m_ConnectorBox.style.borderRightColor = color;
m_ConnectorBox.style.borderBottomColor = color;
m_ConnectorBox.style.unityBackgroundImageTintColor = color;
m_ConnectorBox.SetEnabled(Highlight);
}

Expand Down Expand Up @@ -298,8 +302,8 @@ private void OnDropEnter(DropEnterEvent e) {
return;
}

// But if it's compatible, light this port up
m_ConnectorBoxCap.style.backgroundColor = PortColor;
// But if it's compatible, light this port up
m_ConnectorBoxCap.style.opacity = 1;
}
}

Expand All @@ -320,7 +324,7 @@ private void OnDrop(DropEvent e) {
}

// But if it's compatible, update caps as appropriate
UpdateCapColor();
UpdateCapVisiblity();
}
}

Expand All @@ -333,7 +337,7 @@ private void OnDropExit(DropExitEvent e) {
if (dropPayload.GetPayload().Count == 0) throw new("Drop payload was unexpectedly empty");

// But if it's compatible, update caps as appropriate
UpdateCapColor();
UpdateCapVisiblity();
}
}

Expand Down
40 changes: 27 additions & 13 deletions Editor/Elements/Graph/Edge.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ public class Edge : BaseEdge {
private const float k_InterceptWidth = 6.0f;
private const float k_EdgeLengthFromPort = 12.0f;
private const float k_EdgeTurnDiameter = 20.0f;
private const int k_DefaultEdgeWidth = 2;
private const int k_DefaultEdgeWidthSelected = 2;
private const float k_DefaultEdgeWidth = 2;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i guess float gives us a more granular way to define line thickness? This is a breaking change for our NewGraph framework. But if you clarify the importance of this I can think of making the aprropiate changes.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's exactly that, float adds a larger range of possible line thickness. Which is pretty important when working with values that, imo, should probably be between 1 and 3. And 1 seems too small and 3 seems too large.

The constants above could stay int since they are local/private. I just assumed it was a mistake/oversight so I changed those as well. The important change is with EdgeWidthUnselected and EdgeWithSelected. For example, I do the following:

public override float EdgeWidthUnselected { get; } = 1.5f;
public override float EdgeWidthSelected { get; } = 2.0f;

private const float k_DefaultEdgeWidthSelected = 2;
private static readonly Color s_DefaultSelectedColor = new(240 / 255f, 240 / 255f, 240 / 255f);
private static readonly Color s_DefaultColor = new(146 / 255f, 146 / 255f, 146 / 255f);

Expand All @@ -25,7 +25,7 @@ public class Edge : BaseEdge {
private float m_CapRadius = 5;
private bool m_ControlPointsDirty = true;

private int m_EdgeWidth = 2;
private float m_EdgeWidth = 2;
private VisualElement m_FromCap;
private Color m_FromCapColor;
private Color m_InputColor = Color.grey;
Expand Down Expand Up @@ -104,6 +104,13 @@ public Color OutputColor {
}
}

public Color EdgeColor {
set {
InputColor = value;
OutputColor = value;
}
}

public Color FromCapColor {
get => m_FromCapColor;
set {
Expand Down Expand Up @@ -135,7 +142,7 @@ public float CapRadius {
}
}

public int EdgeWidth {
public float EdgeWidth {
get => m_EdgeWidth;
set {
if (m_EdgeWidth == value) { return; }
Expand Down Expand Up @@ -182,8 +189,8 @@ public bool DrawToCap {
}
}

public virtual int EdgeWidthUnselected { get; } = k_DefaultEdgeWidth;
public virtual int EdgeWidthSelected { get; } = k_DefaultEdgeWidthSelected;
public virtual float EdgeWidthUnselected { get; } = k_DefaultEdgeWidth;
public virtual float EdgeWidthSelected { get; } = k_DefaultEdgeWidthSelected;
public virtual Color ColorSelected { get; } = s_DefaultSelectedColor;
public virtual Color ColorUnselected { get; } = s_DefaultColor;
public float InterceptWidth { get; set; } = 5f;
Expand Down Expand Up @@ -420,27 +427,34 @@ private void OnGenerateVisualContent(MeshGenerationContext mgc) {
return; // Don't draw anything
}

// Color outColor = this.outputColor;
Color outColor = OutputColor;
Color inColor = InputColor;

int cpt = m_RenderPoints.Count;
Painter2D painter2D = mgc.painter2D;

float width = EdgeWidth;

// float alpha = 1.0f;
float alpha = 1.0f;
float zoom = Graph.CurrentScale;

if (EdgeWidth * zoom < k_MinEdgeWidth) {
if (EdgeWidth * zoom < k_MinEdgeWidth)
{
// alpha = edgeWidth * zoom / k_MinEdgeWidth;
width = k_MinEdgeWidth / zoom;
}

// k_Gradient.SetKeys(new[]{ new GradientColorKey(outColor, 0),new GradientColorKey(inColor, 1)},new []{new GradientAlphaKey(alpha, 0)});
painter2D.BeginPath();

// painter2D.strokeGradient = k_Gradient;
painter2D.strokeColor = inColor;
if (inColor == outColor)
{
painter2D.strokeColor = inColor;
}
else
{
Gradient k_Gradient = new Gradient();
k_Gradient.SetKeys(new[] { new GradientColorKey(outColor, 0), new GradientColorKey(inColor, 1) }, new[] { new GradientAlphaKey(alpha, 0) });
painter2D.strokeGradient = k_Gradient;
}
painter2D.lineWidth = width;
painter2D.MoveTo(m_RenderPoints[0]);

Expand Down
7 changes: 6 additions & 1 deletion Editor/Elements/GraphView.uss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,8 +90,13 @@
flex-grow: 0;
}

.port:hover .port-connector-cap{
.port .port-connector-cap {
background-color: rgb(240, 240, 240);
opacity: 0;
}

.port:hover .port-connector-cap {
opacity: 1;
}

.port-input {
Expand Down