Finally starting to pull a bunch of threads (ahem) together with Figuro.
I took some time off from other projects and updated the "Hacker News browser" demo. It doesn't anything right now beyond load story headlines. It's using CSS theming which makes it easy to tweak with updates based on the dmon-nim file monitoring. What's crazy (to my mind) is that the CSS "engine" is only a couple of hundred lines, but it's already surprisingly useful.
Theming in action:
PS You can still do all styling in code. CSS theming makes iterating much quicker.
Finally I got min-content height sizing working with text!! And the CSS Grid layout engine supports padding!
Ugh thought I was going to go crazy or give up. Even with Pixie doing the heavy lifting getting a “responsive” layout working with text involves lots of headaches. Even Claude basically said “nope” and just started editing tests to fake passing.
I haven’t merged the branch yet. That said it’s pretty awesome to see Figuro smoothly adjust the story box height when the title wraps and makes a new line.
I just tried figuro and it is nice to see that the installation process is much less painful now.
I tried hnbrowser and it has some strange behaviours:
- The scrolling bar work with the mouse scrollbutton, but they don't work by clicking on them and dragging.
- Resizing the window doesn't redraw back the boxes when incresing the size.
- The close button is not working
- Ctrl+C is not working either.
Is Figuro ready for creating new widgets or low level stuff is to be done first yet?
Additionally, with a big disclaimer of not being myself a pro, have you looked at how happyx handles components? I really like its approach. I am not sure if this could serve as inspiration.
For instance, the definition of a Task and then how you use it.
Figuro feels a bit more complex:
...
Button.new "Load":
with this:
size 50'pp, 50'ux
offset 25'pp, 10'ux
onSignal(doMouseClick) do(self: Main, kind: EventKind, buttons: UiButtonView):
echo "Load clicked: ", kind
if kind == Done and not self.loading:
emit self.htmlLoad()
self.loading = true
refresh(self)
...In any case, it is great to see Figuro progressing.
Thanks for the feedback! It's progressing but there's still a fair number of little things missing that need polishing. I'm hoping to get back to working more on Figuro in the next week or two.
I also saw you filed an issue for dmon depdendency. It's been added, but Nimble/Nim interaction messes up which paths are used. It's a huge headache.
I've taken to using nimble install -- deps && nimble setup to ensure I've gotten proper paths as Nimble sets the plaths in nimble.paths explicitly. However you have to be sure to call nimble setup anytime after you do an update.
I'll update the README to include instructions for that but with all the big dependency changes Nimble tends to break things.
The scrolling bar work with the mouse scrollbutton, but they don't work by clicking on them and dragging.
Yeah I never got to porting over the click and drag. It's on my list to get to soon. Luckily the underlying drag events are there and work so it's just plumbing it into the scroll widget.
Resizing the window doesn't redraw back the boxes when incresing the size.
That's a new one. Which platform are you on? Please file an issue. Most of that is ensuring a refresh is done after the event finishes. There may be some platform specific bugs too.
The close button is not working. Ctrl+C is not working either.
That's odd. Please file an issue. I just verified that close, quit, and ctrl-c in the terminal all close on my Mac. I'm not sure if copy and paste has been plumbed in yet. I also don't test on Linux or Windows at the moment so it could be due to that.
Is Figuro ready for creating new widgets or low level stuff is to be done first yet?
Yes the low level stuff is all there, but there's still a fair bit of plumbing and polishing the APIs which needs to be done. For example @matkuki has been awesome in helping me polish up a bunch of the text apis just by giving feedback.
Many of these items just need to be found so I can know to fix them.
Figuro feels a bit more complex:
True it's a bit more complex, but IMHO not that much more complex. Looking at that HappyX example I also know there's a lot of hidden complexity too. The component declaration has a lot of web-related details going on too.
Figuro trys to avoid too much incidental complexity in the core library. That's hard with UI's though and a balancing act.
Though it's possible to add simpler wrappers for many things. I wanted to avoid having an overarching macro DSL or magic variable tracking for the core.
Performance is important too as it should be possible to do 60 fps UIs easily.
Though I've started adding back in more "convenience" templates like size and offset so the with this isn't need anymore. I also added simpler events for buttons, etc. For example the button example could now be:
Button.new "Load": # the id is useful for CSS styling now
size 50'pp, 50'ux
offset 25'pp, 10'ux
onSignal(doClicked) do(self: Main):
# passing the main widget avoids closures and encourages better state management
# onSignal has a bit of magic
emit self.htmlLoad()
self.loading = true
refresh(self)For example the HappyX Task component in Figuro would look something like and is comparable in lines of code:
type Task* = ref object of Figuro
isChecked: bool = false
text: string = "Default text"
proc draw*(self: Task) {.slot.} =
withWidget(self):
size 100'pp, cx"auto" # roughly similar to css helper like `w-full`, e.g. 100% width of parent
if self.isChecked: fill css"green"
else: fill css"red"
Text.new "check":
offset 10'ux, 0'ux
justify Left
align Middle
text({font: if self.isChecked: "✔" else: "❌"})
Text.new "text":
offset 30'ux, 0'ux
justify Left
align Middle
text({font: self.text})
onSignal(doClick) (self: Main):
self.isChecked = not self.isChecked
refresh(self) # you do need to tell Figuro when to re-draw