Permalink
Reply
After 9 months of development and 252 commits later, finally 0.7.0 gets to see the sunlight! This is the biggest update to Fluid yet, almost twice as big as 0.6.0, and also almost half the size of Fluid itself. In fact, so big, that I decided to delay some of the changes to a separate future update; too big.
Fluid is a general-purpose user interface library. It is D first, and comes with Raylib support. While largely a work in progress, and of pre-release quality, it's already mostly stable and ready for use.
Start a new Fluid project with DUB:
dub fetch fluid
dub init -t fluid myproject
Add Fluid to your existing project:
dub add fluid
Among other stuff, this update addresses feedback from community members. Folks reported a lot of issue with building this thing. Fluid now has CI coverage and should work just fine on all the three major platforms. Fluid's tour now also features an experimental, fully interactive "moduleView" chapter, which at the moment only works properly on Linux.
In short term, I hope to improve Fluid's documentation and add a number of missing features, mostly nodes. In long term, I would like to work on animations and reactive programming.
Full changelog can be seen on the releases page
Reworked theme system
Most importantly, 0.7.0 introduces a reworked theme system, one much more readable than the last:
import fluid.theme; // explicit import needed!
auto theme = Theme(
rule!Node(
typeface = Style.loadTypeface("noto.ttf"),
fontSize = 12.pt,
textColor = color("#fff"),
),
rule!Frame(
backgroundColor = color("#000"),
),
);
when rules can be used to alter the style based on any of the node's properties. Multiple when rules can be applied at the same time.
border = 1,
borderStyle = colorBorder(color("#444")),
backgroundColor = color("#000"),
when!"a.isHovered"(
backgroundColor = color("#444"),
),
when!"a.isFocused"(
borderStyle = colorBorder(color("#fff")),
),
when!(a => a.text.isValidPassword)(
backgroundColor = color(color("#0a0")),
),
Rules can now also affect children nodes through children:
rule!PopupFrame(
border = 1,
borderStyle = colorBorder(color("#555")),
children!Button( // style all buttons inside PopupFrames
margin = 0,
padding.sideX = 4,
padding.sideY = 2,
)
),
For more advanced usecases, values can also be picked based on runtime values:
rule!Node(
a => rule(
backgroundColor = pickColor(a.score),
),
),
Extensible construction via node builder
This feature was covered on this year's DConf!
In the previous releases, Layout and Theme were taken directly as constructor arguments, which could be really confusing, and at the same time, limiting. Now, the nodeBuilder takes care of this automatically:
alias label = nodeBuilder!Label;
class Label : Node {
this(string text) {
// ...
}
// ...
}
label(
.layout!"fill",
.myTheme,
"Hello, World!"
),
More interestingly, it's now extensible — for example, sizeLimit can be used with sizeLock nodes:
sizeLock!label(
.sizeLimitX = 400,
.layout!"fill",
.myTheme,
"Hello, World!"
)
You can define your own node property by creating a struct with an apply method:
auto hidden(bool value = true) {
static struct Hidden {
bool value;
void apply(Node node) {
node.isHidden = value;
}
}
return Hidden(value);
}
label(
.hidden,
"I'm invisible!"
),
Other node properties are now available: .tags (see below), .ignoreMouse, .hidden and .disabled.
simpleConstructor remains alive as an alias to nodeBuilder.
Tags
One can now define an enum marked @NodeTag to create tags. These are very similar to CSS classes, making it possible to change how a node is styled in a consistent, predictable manner:
@NodeTag
enum Tag {
heading,
red,
}
vspace(
myTheme,
label(
.tags!(Tag.heading),
"This is a heading!"
),
label(
.tags!(Tag.red),
"Red text!"
),
label(
.tags!(Tag.heading, Tag.red),
"Red heading!"
),
);
Use tags in your theme by passing them into a rule argument:
rule!(Label, Tag.heading)(
fontSize = 22.pt,
),
rule!(Label, Tag.red)(
textColor = color("#f00"),
).
TextInput was overhauled
TextInput now supports multiline input via .multiline, the caret can now be moved around, text can be selected, copied, pasted, and changes can be undone or redone with keyboard shortcuts.
textInput(); // single line
lineInput(); // single line
multilineInput(); // multiline
textInput(.multiline); // multiline
codeInput(); // code editor
This is a massive change under the hood. Fluid's text rendering is now a lot more performant, and can support rendering pages of text without slowdowns. Editing performance still needs some improvements.
A code editor is now available with CodeInput with support for syntax highlighting and automatic indentation. Performance issues are especially visible with this one, but it is expected they will be fixed in coming releases.
