mirror of
https://github.com/juce-framework/JUCE.git
synced 2026-01-13 00:04:19 +00:00
302 lines
12 KiB
C++
302 lines
12 KiB
C++
/*
|
|
==============================================================================
|
|
|
|
This file is part of the JUCE library.
|
|
Copyright (c) 2017 - ROLI Ltd.
|
|
|
|
JUCE is an open source library subject to commercial or open-source
|
|
licensing.
|
|
|
|
By using JUCE, you agree to the terms of both the JUCE 5 End-User License
|
|
Agreement and JUCE 5 Privacy Policy (both updated and effective as of the
|
|
27th April 2017).
|
|
|
|
End User License Agreement: www.juce.com/juce-5-licence
|
|
Privacy Policy: www.juce.com/juce-5-privacy-policy
|
|
|
|
Or: You may also use this code under the terms of the GPL v3 (see
|
|
www.gnu.org/licenses).
|
|
|
|
JUCE IS PROVIDED "AS IS" WITHOUT ANY WARRANTY, AND ALL WARRANTIES, WHETHER
|
|
EXPRESSED OR IMPLIED, INCLUDING MERCHANTABILITY AND FITNESS FOR PURPOSE, ARE
|
|
DISCLAIMED.
|
|
|
|
==============================================================================
|
|
*/
|
|
|
|
#include "../JuceDemoHeader.h"
|
|
|
|
// these classes are C++11-only
|
|
#if JUCE_COMPILER_SUPPORTS_INITIALIZER_LISTS
|
|
|
|
struct DemoFlexPanel : public juce::Component
|
|
{
|
|
DemoFlexPanel (juce::Colour col, FlexItem& item) : flexItem (item), colour (col)
|
|
{
|
|
int x = 70;
|
|
int y = 3;
|
|
|
|
setupTextEditor (flexOrderEditor, { x, y, 20, 18 }, "0", [this] { flexItem.order = (int) flexOrderEditor.getText().getFloatValue(); });
|
|
addLabel ("order", flexOrderEditor);
|
|
y += 20;
|
|
|
|
setupTextEditor (flexGrowEditor, { x, y, 20, 18 }, "0", [this] { flexItem.flexGrow = flexGrowEditor.getText().getFloatValue(); });
|
|
addLabel ("flex-grow", flexGrowEditor);
|
|
y += 20;
|
|
|
|
setupTextEditor (flexShrinkEditor, { x, y, 20, 18 }, "1", [this] { flexItem.flexShrink = flexShrinkEditor.getText().getFloatValue(); });
|
|
addLabel ("flex-shrink", flexShrinkEditor);
|
|
y += 20;
|
|
|
|
setupTextEditor (flexBasisEditor, { x, y, 33, 18 }, "100", [this] { flexItem.flexBasis = flexBasisEditor.getText().getFloatValue(); });
|
|
addLabel ("flex-basis", flexBasisEditor);
|
|
y += 20;
|
|
|
|
alignSelfCombo.addItem ("auto", 1);
|
|
alignSelfCombo.addItem ("flex-start", 2);
|
|
alignSelfCombo.addItem ("flex-end", 3);
|
|
alignSelfCombo.addItem ("center", 4);
|
|
alignSelfCombo.addItem ("stretch", 5);
|
|
|
|
alignSelfCombo.setBounds (x, y, 90, 18);
|
|
alignSelfCombo.onChange = [this] { updateAssignSelf(); };
|
|
alignSelfCombo.setSelectedId (5);
|
|
alignSelfCombo.setColour (ComboBox::outlineColourId, Colours::transparentBlack);
|
|
addAndMakeVisible (alignSelfCombo);
|
|
addLabel ("align-self", alignSelfCombo);
|
|
}
|
|
|
|
void setupTextEditor (TextEditor& te, Rectangle<int> b, StringRef initialText, std::function<void()> updateFn)
|
|
{
|
|
te.setBounds (b);
|
|
te.setText (initialText);
|
|
|
|
te.onTextChange = [this, updateFn]
|
|
{
|
|
updateFn();
|
|
refreshLayout();
|
|
};
|
|
|
|
addAndMakeVisible (te);
|
|
}
|
|
|
|
void addLabel (const String& name, Component& target)
|
|
{
|
|
auto label = new Label (name, name);
|
|
label->attachToComponent (&target, true);
|
|
labels.add (label);
|
|
addAndMakeVisible (label);
|
|
}
|
|
|
|
void updateAssignSelf()
|
|
{
|
|
switch (alignSelfCombo.getSelectedId())
|
|
{
|
|
case 1: flexItem.alignSelf = FlexItem::AlignSelf::autoAlign; break;
|
|
case 2: flexItem.alignSelf = FlexItem::AlignSelf::flexStart; break;
|
|
case 3: flexItem.alignSelf = FlexItem::AlignSelf::flexEnd; break;
|
|
case 4: flexItem.alignSelf = FlexItem::AlignSelf::center; break;
|
|
case 5: flexItem.alignSelf = FlexItem::AlignSelf::stretch; break;
|
|
}
|
|
|
|
refreshLayout();
|
|
}
|
|
|
|
void refreshLayout()
|
|
{
|
|
if (auto parent = getParentComponent())
|
|
parent->resized();
|
|
}
|
|
|
|
void paint (Graphics& g) override
|
|
{
|
|
auto r = getLocalBounds();
|
|
|
|
g.setColour (colour);
|
|
g.fillRect (r);
|
|
|
|
g.setColour (Colours::black);
|
|
g.drawFittedText ("w: " + String (r.getWidth()) + newLine + "h: " + String (r.getHeight()),
|
|
r.reduced (4), Justification::bottomRight, 2);
|
|
}
|
|
|
|
void lookAndFeelChanged() override
|
|
{
|
|
flexOrderEditor.applyFontToAllText (flexOrderEditor.getFont());
|
|
flexGrowEditor.applyFontToAllText (flexGrowEditor.getFont());
|
|
flexShrinkEditor.applyFontToAllText (flexShrinkEditor.getFont());
|
|
flexBasisEditor.applyFontToAllText (flexBasisEditor.getFont());
|
|
}
|
|
|
|
FlexItem& flexItem;
|
|
|
|
TextEditor flexOrderEditor, flexGrowEditor, flexShrinkEditor, flexBasisEditor;
|
|
ComboBox alignSelfCombo;
|
|
|
|
juce::Colour colour;
|
|
OwnedArray<Label> labels;
|
|
|
|
JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (DemoFlexPanel)
|
|
|
|
};
|
|
|
|
//==============================================================================
|
|
struct FlexBoxDemo : public juce::Component
|
|
{
|
|
FlexBoxDemo()
|
|
{
|
|
setupPropertiesPanel();
|
|
setupFlexBoxItems();
|
|
}
|
|
|
|
void resized() override
|
|
{
|
|
flexBox.performLayout (getFlexBoxBounds());
|
|
}
|
|
|
|
Rectangle<float> getFlexBoxBounds() const
|
|
{
|
|
return getLocalBounds().withTrimmedLeft (300)
|
|
.reduced (10)
|
|
.toFloat();
|
|
}
|
|
|
|
void paint (Graphics& g) override
|
|
{
|
|
g.fillAll (getUIColourIfAvailable (LookAndFeel_V4::ColourScheme::UIColour::windowBackground,
|
|
Colours::lightgrey));
|
|
g.setColour (Colours::white);
|
|
g.fillRect (getFlexBoxBounds());
|
|
}
|
|
|
|
void setupPropertiesPanel()
|
|
{
|
|
auto directionGroup = addControl (new GroupComponent ("direction", "flex-direction"));
|
|
directionGroup->setBounds (10, 30, 140, 110);
|
|
|
|
int i = 0;
|
|
int groupID = 1234;
|
|
int leftMargin = 15;
|
|
int topMargin = 45;
|
|
|
|
createToggleButton ("row", groupID, leftMargin, topMargin + i++ * 22, true, [this] { flexBox.flexDirection = FlexBox::Direction::row; }).setToggleState (true, dontSendNotification);
|
|
createToggleButton ("row-reverse", groupID, leftMargin, topMargin + i++ * 22, false, [this] { flexBox.flexDirection = FlexBox::Direction::rowReverse; });
|
|
createToggleButton ("column", groupID, leftMargin, topMargin + i++ * 22, false, [this] { flexBox.flexDirection = FlexBox::Direction::column; });
|
|
createToggleButton ("column-reverse", groupID, leftMargin, topMargin + i++ * 22, false, [this] { flexBox.flexDirection = FlexBox::Direction::columnReverse; });
|
|
|
|
auto wrapGroup = addControl (new GroupComponent ("wrap", "flex-wrap"));
|
|
wrapGroup->setBounds (160, 30, 140, 110);
|
|
|
|
i = 0;
|
|
++groupID;
|
|
leftMargin = 165;
|
|
|
|
createToggleButton ("nowrap", groupID, leftMargin, topMargin + i++ * 22, false, [this] { flexBox.flexWrap = FlexBox::Wrap::noWrap; });
|
|
createToggleButton ("wrap", groupID, leftMargin, topMargin + i++ * 22, true, [this] { flexBox.flexWrap = FlexBox::Wrap::wrap; });
|
|
createToggleButton ("wrap-reverse", groupID, leftMargin, topMargin + i++ * 22, false, [this] { flexBox.flexWrap = FlexBox::Wrap::wrapReverse; });
|
|
|
|
auto justifyGroup = addControl (new GroupComponent ("justify", "justify-content"));
|
|
justifyGroup->setBounds (10, 150, 140, 140);
|
|
|
|
i = 0;
|
|
++groupID;
|
|
leftMargin = 15;
|
|
topMargin = 165;
|
|
|
|
createToggleButton ("flex-start", groupID, leftMargin, topMargin + i++ * 22, true, [this] { flexBox.justifyContent = FlexBox::JustifyContent::flexStart; });
|
|
createToggleButton ("flex-end", groupID, leftMargin, topMargin + i++ * 22, false, [this] { flexBox.justifyContent = FlexBox::JustifyContent::flexEnd; });
|
|
createToggleButton ("center", groupID, leftMargin, topMargin + i++ * 22, false, [this] { flexBox.justifyContent = FlexBox::JustifyContent::center; });
|
|
createToggleButton ("space-between", groupID, leftMargin, topMargin + i++ * 22, false, [this] { flexBox.justifyContent = FlexBox::JustifyContent::spaceBetween; });
|
|
createToggleButton ("space-around", groupID, leftMargin, topMargin + i++ * 22, false, [this] { flexBox.justifyContent = FlexBox::JustifyContent::spaceAround; });
|
|
|
|
auto alignGroup = addControl (new GroupComponent ("align", "align-items"));
|
|
alignGroup->setBounds (160, 150, 140, 140);
|
|
|
|
i = 0;
|
|
++groupID;
|
|
leftMargin = 165;
|
|
topMargin = 165;
|
|
|
|
createToggleButton ("stretch", groupID, leftMargin, topMargin + i++ * 22, true, [this] { flexBox.alignItems = FlexBox::AlignItems::stretch; });
|
|
createToggleButton ("flex-start", groupID, leftMargin, topMargin + i++ * 22, false, [this] { flexBox.alignItems = FlexBox::AlignItems::flexStart; });
|
|
createToggleButton ("flex-end", groupID, leftMargin, topMargin + i++ * 22, false, [this] { flexBox.alignItems = FlexBox::AlignItems::flexEnd; });
|
|
createToggleButton ("center", groupID, leftMargin, topMargin + i++ * 22, false, [this] { flexBox.alignItems = FlexBox::AlignItems::center; });
|
|
|
|
auto alignContentGroup = addControl (new GroupComponent ("content", "align-content"));
|
|
alignContentGroup->setBounds (10, 300, 140, 160);
|
|
|
|
i = 0;
|
|
++groupID;
|
|
leftMargin = 15;
|
|
topMargin = 315;
|
|
|
|
createToggleButton ("stretch", groupID, leftMargin, topMargin + i++ * 22, true, [this] { flexBox.alignContent = FlexBox::AlignContent::stretch; });
|
|
createToggleButton ("flex-start", groupID, leftMargin, topMargin + i++ * 22, false, [this] { flexBox.alignContent = FlexBox::AlignContent::flexStart; });
|
|
createToggleButton ("flex-end", groupID, leftMargin, topMargin + i++ * 22, false, [this] { flexBox.alignContent = FlexBox::AlignContent::flexEnd; });
|
|
createToggleButton ("center", groupID, leftMargin, topMargin + i++ * 22, false, [this] { flexBox.alignContent = FlexBox::AlignContent::center; });
|
|
createToggleButton ("space-between", groupID, leftMargin, topMargin + i++ * 22, false, [this] { flexBox.alignContent = FlexBox::AlignContent::spaceBetween; });
|
|
createToggleButton ("space-around", groupID, leftMargin, topMargin + i++ * 22, false, [this] { flexBox.alignContent = FlexBox::AlignContent::spaceAround; });
|
|
}
|
|
|
|
void setupFlexBoxItems()
|
|
{
|
|
addItem (Colours::orange);
|
|
addItem (Colours::aqua);
|
|
addItem (Colours::lightcoral);
|
|
addItem (Colours::aquamarine);
|
|
addItem (Colours::forestgreen);
|
|
}
|
|
|
|
void addItem (Colour colour)
|
|
{
|
|
flexBox.items.add (FlexItem (100, 150)
|
|
.withMargin (10)
|
|
.withWidth (200));
|
|
|
|
auto& flexItem = flexBox.items.getReference (flexBox.items.size() - 1);
|
|
|
|
auto panel = panels.add (new DemoFlexPanel (colour, flexItem));
|
|
flexItem.associatedComponent = panel;
|
|
addAndMakeVisible (panel);
|
|
}
|
|
|
|
ToggleButton& createToggleButton (StringRef text, int groupID, int x, int y, bool toggleOn, std::function<void()> fn)
|
|
{
|
|
auto* tb = buttons.add (new ToggleButton());
|
|
tb->setButtonText (text);
|
|
tb->setRadioGroupId (groupID);
|
|
tb->setToggleState (toggleOn, dontSendNotification);
|
|
|
|
tb->onClick = [this, fn]
|
|
{
|
|
fn();
|
|
resized();
|
|
};
|
|
|
|
tb->setBounds (x, y, 130, 22);
|
|
addAndMakeVisible (tb);
|
|
return *tb;
|
|
}
|
|
|
|
template <typename ComponentType>
|
|
ComponentType* addControl (ComponentType* newControlComp)
|
|
{
|
|
controls.add (newControlComp);
|
|
addAndMakeVisible (newControlComp);
|
|
return newControlComp;
|
|
}
|
|
|
|
FlexBox flexBox;
|
|
|
|
OwnedArray<DemoFlexPanel> panels;
|
|
OwnedArray<Component> controls;
|
|
OwnedArray<ToggleButton> buttons;
|
|
|
|
JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (FlexBoxDemo)
|
|
};
|
|
|
|
|
|
// This static object will register this demo type in a global list of demos..
|
|
static JuceDemoType<FlexBoxDemo> demo ("10 Components: FlexBox");
|
|
|
|
#endif
|