Skip to content

Commit

Permalink
Update graph viewer aesthetics
Browse files Browse the repository at this point in the history 
- Show signal chain tab information
- Fix curved arrow paths
- Add drop shadow to nodes
- Fix various Concertina Panel bugs
- Update node color whenever editor color changes
- Reduce gap between Parameter label and editor
  • Loading branch information
@anjaldoshi
anjaldoshi committed Oct 13, 2023
1 parent 96670d9 commit 1c088f8
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 88 deletions.
9 changes: 5 additions & 4 deletions Source/Processors/Parameter/ParameterEditor.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ void ParameterEditor::updateBounds()
Rectangle<int> bounds = getBounds();
int finalWidth = bounds.getWidth();
int finalHeight = bounds.getHeight();
int gap = finalWidth < 180 ? 2 : 5;

switch (layout)
{
Expand All @@ -55,16 +56,16 @@ void ParameterEditor::updateBounds()
editor->setBounds(0, 0, finalWidth, finalHeight / 2);
break;
case nameOnLeft:
label->setBounds(0, 0, (finalWidth / 2) - 5, finalHeight);
label->setBounds(0, 0, (finalWidth / 2) - gap, finalHeight);
label->setJustificationType(Justification::centredRight);
label->setVisible(true);
editor->setBounds((finalWidth / 2)+ 5, 0, (finalWidth/ 2) - 5, finalHeight);
editor->setBounds((finalWidth / 2) + gap, 0, (finalWidth/ 2) - gap, finalHeight);
break;
case nameOnRight:
label->setBounds((finalWidth / 2) + 5 , 0, (finalWidth / 2) - 5, finalHeight);
label->setBounds((finalWidth / 2) + gap , 0, (finalWidth / 2) - gap, finalHeight);
label->setJustificationType(Justification::centredLeft);
label->setVisible(true);
editor->setBounds(0, 0, (finalWidth / 2) - 5, finalHeight);
editor->setBounds(0, 0, (finalWidth / 2) - gap, finalHeight);
break;
case nameHidden:
label->setVisible(false);
Expand Down
2 changes: 1 addition & 1 deletion Source/UI/EditorViewport.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1059,7 +1059,7 @@ SignalChainTabButton::SignalChainTabButton(int index) :
setRadioGroupId(99);
setClickingTogglesState(true);

buttonFont = Font("Small Text", 10, Font::plain);
buttonFont = Font("Silkscreen", 10, Font::plain);
buttonFont.setHeight(14);

offset = 0;
Expand Down
155 changes: 72 additions & 83 deletions Source/UI/GraphViewer.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,10 @@

#include "../UI/LookAndFeel/CustomLookAndFeel.h"

const int NODE_WIDTH = 200;
const int NODE_WIDTH = 180;
const int NODE_HEIGHT = 50;
const int BORDER_SIZE = 20;
const int X_BORDER_SIZE = 45;
const int Y_BORDER_SIZE = 20;

GraphViewport::GraphViewport(GraphViewer* gv)
{
Expand Down Expand Up @@ -284,12 +285,53 @@ int GraphViewer::getLevelStartY(int level) const

void GraphViewer::paint (Graphics& g)
{

// Draw connections
const int numAvailableNodes = availableNodes.size();

for (int i = 0; i < numAvailableNodes; ++i)
{
if(availableNodes[i]->getSource() == nullptr)
{
Path linePath;
Point<float> startPoint = availableNodes[i]->getSrcPoint().translated(-15, 0);
Point<float> endPoint = availableNodes[i]->getSrcPoint();

linePath.startNewSubPath(startPoint);
linePath.lineTo(endPoint);

g.setColour(Colour(30, 30, 30));
PathStrokeType stroke1(10.0f);
g.strokePath(linePath, stroke1);

g.setColour(Colour(90, 90, 90));
PathStrokeType stroke2(7.5f);
g.strokePath(linePath, stroke2);

g.setColour(Colour(150, 150, 150));
PathStrokeType stroke3(4.5f);
g.strokePath(linePath, stroke3);

Colour ellipseColour = Colour(30,30,30);
ColourGradient ellipseGradient = ColourGradient(Colours::lightgrey,
startPoint.x - 10.0f, startPoint.y,
Colours::grey,
startPoint.x, startPoint.y,
true);

g.setColour(ellipseColour);
g.drawEllipse(startPoint.x - 20.f, startPoint.y - 10.0f, 20.f, 20.f, 2.f);
g.setGradientFill(ellipseGradient);
g.fillEllipse (startPoint.x - 19.f, startPoint.y - 9.f, 18.f, 18.f);

int level = availableNodes[i]->getLevel();
static const String letters = "ABCDEFGHI";

g.setColour(Colours::black);
g.setFont(Font("Silkscreen", "Regular", 14));
g.drawText (String::charToString(letters[level]), startPoint.x - 20, startPoint.y - 10, 20, 20, Justification::centred, true);

}

if (! availableNodes[i]->isSplitter())
{
if (availableNodes[i]->getDest() != nullptr)
Expand Down Expand Up @@ -329,23 +371,25 @@ void GraphViewer::connectNodes (int node1, int node2, Graphics& g)
float y2 = end.getY();

linePath.startNewSubPath (x1, y1);
linePath.cubicTo (x1 + (x2 - x1) * 0.9f, y1,
x1 + (x2 - x1) * 0.1f, y2,

linePath.cubicTo (x2, y1,
x1, y2,
x2, y2);


g.setColour (Colour(30,30,30));
PathStrokeType stroke3 (3.5f);
Path arrowPath;
stroke3.createStrokeWithArrowheads(arrowPath, linePath, 0.0f, 0.0f, 10.0f, 10.0f);
stroke3.createStrokedPath(arrowPath, linePath);
g.fillPath(arrowPath);
// g.strokePath (linePath, stroke3);

g.setColour (Colours::grey);
PathStrokeType stroke2 (2.0f);
Path arrowPath2;
stroke2.createStrokeWithArrowheads(arrowPath2, linePath, 0.0f, 0.0f, 8.5f, 8.5f);
stroke2.createStrokedPath(arrowPath2, linePath);
g.fillPath(arrowPath2);

g.drawArrow(Line<float>(x2 - 9.f, y2, x2 + 1.0f, y2), 0.0f, 10.f, 10.f);
}

/// ------------------------------------------------------
Expand All @@ -367,7 +411,7 @@ DataStreamInfo::DataStreamInfo(DataStream* stream_, GenericEditor* editor, Graph
for (auto paramEditor : pEditors)
{
// set parameter editor bounds
paramEditor->setBounds(3, yPos, rowWidthPixels, rowHeightPixels);
paramEditor->setBounds(5, yPos, rowWidthPixels, rowHeightPixels);
yPos += rowHeightPixels + 5;

//transfer ownership to DataStreamInfo
Expand All @@ -393,7 +437,7 @@ DataStreamInfo::DataStreamInfo(DataStream* stream_, GenericEditor* editor, Graph

addAndMakeVisible(parameterPanel.get());
parameterPanel->addMouseListener(this, true);
parameterPanel->setBounds(0, 60, NODE_WIDTH - 23, 20);
parameterPanel->setBounds(0, 60, NODE_WIDTH, 20);

heightInPixels += 20;
}
Expand Down Expand Up @@ -443,14 +487,14 @@ void DataStreamInfo::buttonClicked(Button* button)
{
heightInPixels = editorHeight + 80;
node->updateBoundaries();
parameterPanel->setSize(NODE_WIDTH - 23, editorHeight + 20);
parameterPanel->setSize(NODE_WIDTH, editorHeight + 20);
parameterPanel->expandPanelFully(streamParameterEditorComponent.get(), false);
}
else
{
heightInPixels = 80;
node->updateBoundaries();
parameterPanel->setSize(NODE_WIDTH - 23, 20);
parameterPanel->setSize(NODE_WIDTH, 20);
parameterPanel->setPanelSize(streamParameterEditorComponent.get(), 0, false);
}

Expand Down Expand Up @@ -487,7 +531,7 @@ ProcessorParameterComponent::ProcessorParameterComponent(GenericProcessor* p)
for (auto editor : editors)
{
// set parameter editor bounds
editor->setBounds(3, yPos, rowWidthPixels, rowHeightPixels);
editor->setBounds(5, yPos, rowWidthPixels, rowHeightPixels);
yPos += rowHeightPixels + 5;

//transfer ownership to DataStreamInfo
Expand Down Expand Up @@ -631,14 +675,15 @@ GraphNode::GraphNode (GenericEditor* ed, GraphViewer* g)
infoPanel->addMouseListener(this, true);
}

setBounds(BORDER_SIZE + getHorzShift() * NODE_WIDTH,
BORDER_SIZE + getLevel() * NODE_HEIGHT,
setBounds(X_BORDER_SIZE + getHorzShift() * NODE_WIDTH,
Y_BORDER_SIZE + getLevel() * NODE_HEIGHT,
nodeWidth,
40);

previousHeight = 0;
verticalOffset = 0;

nodeDropShadower.setOwner(this);
}


Expand Down Expand Up @@ -679,8 +724,7 @@ void GraphNode::setWidth(int width)

void GraphNode::mouseEnter (const MouseEvent& m)
{
if (m.getPosition().getY() < 20)
isMouseOver = true;
isMouseOver = true;

repaint();
}
Expand Down Expand Up @@ -824,16 +868,16 @@ void GraphNode::updateBoundaries()
panelHeight += 20;
}

infoPanel->setBounds(23, 0, NODE_WIDTH - 23, panelHeight);
infoPanel->setBounds(0, 0, NODE_WIDTH, panelHeight);

int nodeY = gv->getLevelStartY(getLevel());
if (nodeY == 0)
setBounds(BORDER_SIZE + getHorzShift() * (NODE_WIDTH + 35),
BORDER_SIZE + getLevel() * (NODE_HEIGHT + 35),
setBounds(X_BORDER_SIZE + getHorzShift() * (NODE_WIDTH + X_BORDER_SIZE),
Y_BORDER_SIZE + getLevel() * (NODE_HEIGHT + 35),
nodeWidth,
panelHeight);
else
setBounds(BORDER_SIZE + getHorzShift() * (NODE_WIDTH + 35),
setBounds(X_BORDER_SIZE + getHorzShift() * (NODE_WIDTH + X_BORDER_SIZE),
nodeY,
nodeWidth,
panelHeight);
Expand Down Expand Up @@ -952,82 +996,27 @@ String GraphNode::getInfoString()


void GraphNode::paint (Graphics& g)
{
//if (isMouseOver)
//{
// g.setColour (Colours::yellow);
// } else {
//
// }

Path linePath;
float x1 = 8;
float y1 = 11;
float x2 = 40;
float y2 = 11;

linePath.startNewSubPath(x1, y1);
linePath.lineTo(x2, y2);

{
g.setColour(Colour(30, 30, 30));
PathStrokeType stroke1(10.0f);
g.strokePath(linePath, stroke1);

g.setColour(Colour(90, 90, 90));
PathStrokeType stroke2(7.5f);
g.strokePath(linePath, stroke2);

g.setColour(Colour(150, 150, 150));
PathStrokeType stroke3(4.5f);
g.strokePath(linePath, stroke3);

g.setColour(Colour(30, 30, 30));
g.fillRect(23, 0, getWidth() - 23, 20);
g.fillRect(0, 0, getWidth(), 20);

g.setColour(Colours::lightgrey);
g.fillRect(24, 1, 24, 18);
g.fillRect(1, 1, 24, 18);
g.setColour(editor->getBackgroundColor());
g.fillRect(48, 1, getWidth() - 49, 18);

ColourGradient ellipseGradient;
Colour ellipseColour;

if (isMouseOver)
{
ellipseColour = Colours::yellow;
ellipseGradient = ColourGradient(Colours::yellow,
6,11,
Colours::orange,
12,12,
true);

} else {
ellipseColour = Colour(30,30,30);
ellipseGradient = ColourGradient(Colours::lightgrey,
6,11,
Colours::grey,
12,12,
true);
}

g.setColour(ellipseColour);
g.drawEllipse(0.5f,5,12,12,1.5f);
g.setGradientFill(ellipseGradient);
g.fillEllipse (0.5f, 5.5f, 11, 11);
g.fillRect(25, 1, getWidth() - 26, 18);

g.setFont(Font("Fira Code", "SemiBold", 14));
g.setColour (Colours::black); // : editor->getBackgroundColor());
g.drawText (String(nodeId), 24, 0, 23, 20, Justification::centred, true);
g.drawText (String(nodeId), 1, 0, 23, 20, Justification::centred, true);
g.setColour(Colours::white); // : editor->getBackgroundColor());
g.drawText(getName(), 52, 0, getWidth() - 52, 20, Justification::left, true);

g.drawText(getName(), 29, 0, getWidth() - 29, 20, Justification::left, true);
}

void GraphNode::paintOverChildren(Graphics& g)
{
g.setColour(Colours::yellow);
if (isMouseOver)
{
g.drawRect(22, 0, getWidth() - 22, getHeight(), 2);
g.drawRect(0, 0, getWidth(), getHeight(), 2);
}
}
2 changes: 2 additions & 0 deletions Source/UI/GraphViewer.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,8 @@ class GraphNode : public Component,

std::unique_ptr<ProcessorParameterComponent> processorParamComponent;
std::unique_ptr<Component> processorParamHeader;

DropShadower nodeDropShadower { DropShadow(Colours::black.withAlpha(0.8f), 10, {2,10}) };

bool processorInfoVisible;

Expand Down

0 comments on commit 1c088f8

Please sign in to comment.