Clojurians Log v2
membrane
Rendering html or other structured text: Parsing is easy, we have libraries for that, but how should things like formatting and links be handled? How do we make a bit of text out of a haystack clickable?
There's not currently great support for formatted text. The over-engineered way to do it is to use something like https://github.com/phronmophobic/clj-cef. I'd like to provide a good default option for formatted text within membrane at some point. It seems like the java swing library has some support, http://www.java2s.com/Code/Java/2D-Graphics-GUI/ParagraphLayout.htm. Skia has text shaping as well. I'd have to look into it, but I think they might use the same libraries under the hood.
> How do we make a bit of text out of a haystack clickable?
The main idea is to have a function that maps mouse events to :navigate-url intents or whatever you want to call the intents. A similar thing is done by https://github.com/phronmophobic/membrane/blob/7156976969d2b95cd2cea5feae73ee3780a79e80/src/membrane/basic_components.cljc#L300. You can use membrane.ui/index-for-position to map [x y] coordinates to an index within some text. If you can test which ranges have text, then you should be good to go.
Still needs some hammock time, but for representing formatted text, I was looking at https://github.com/IGJoshua/ropes or https://github.com/mogenslund/liquid/blob/master/src/liq/buffer.cljc
Another option that anything that can take text as argument wouldn't just take string, but also some contextual types that add scope, e.g. (text "hello " (bold "world"))
That also solves the issue of both user defined and local styles. These will just look up the proper style in the scope, and you can override the scope a-la (with-style {...} content)
A stack/environment model looks like the most natural fit for the problem, wdyt?
depends on the use case
seems reasonable, but text is tricky and I'd like to do a deep dive on the topic at some point
what do existing implementations do? how do people like them? what are the trade offs? does this integrate with styling? how does it integrate with events? is it efficient for large documents? is it editable? etc.
I also wouldn't be opposed to a good 80/20 option that's not too much work to implement
membrane.ui/label isn't great and it'd be nice to have some better support, but I want to avoid having a bunch of incremental implementations: label2, Text, Text2, FormattedText3
another short-term solution is to give better access to the options that already exist in Swing, JavaFX, and Skia
and just try to build a small wrapper on top that is the least common denominator of each
I am open to alternatives. It feels like the first thing everyone tries is 1) scrollviews and 2) formatted text. Probably because the web makes both of them easy 🤷
uh, sorry? 🙃
I found out Swing can just take html
frame.add(new JLabel("<html>Text color: <font color='red'>red</font></html>"));haha
I don't think it will present the same as all the webkit based options, but probably good enough for some use cases.
True but it works well with my ad-hoc model, where (text "Text color: " (color :red "red")) can be rendered pretty easily to it
So that's 1-0 for the good guys
For JavaFX there isn't a solution out of the box, either open a new label, or use something like https://github.com/FXMisc/RichTextFX
I haven't tried embedding Swing like JLabel. Is it easy to extract it's draw function?
I imagine there's a way to do it, but haven't tried
Swing, putting the pain in paint
(import 'javax.swing.JLabel
'javax.swing.JComponent)
(extend-type javax.swing.JComponent
IDraw
(draw [this]
(.paint this *g*))
ui/IOrigin
(-origin [_]
[0 0 ])
IBounds
(-bounds [_]
(let [dim (.getPreferredSize jlabel)]
[(.width dim) (.height dim)])))
(defn set-preferred-size [jcomp]
(let [dim (.getPreferredSize jcomp)]
(.setBounds jcomp 0 0 (.width dim) (.height dim))))
(defn my-draw []
(ui/vertical-layout
(doto (JLabel. "hsdfkj i\n thereasdf asdf")
set-preferred-size)
(ui/label "membrane!!")))
(run #(my-draw))I really gotta work on not being nerd sniped so easily
It's interesting, there's actually some pretty good stuff in the Swing library if you dig deep enough.
Shake the swing tree, see what falls out
This seems really neat. I wonder if I can write a macro or something that turns a bunch of the swing components into membrane components.
I've been against implementing any sort of embedding with the reasoning that if you provide a quick start complected option and a slow start simple option, users will choose the quick start option every time. Maybe there's an automatic method to use Swing or other native components simply!!
I wasn't planning to encourage embedding, was hoping more for membrane components (pretty, simple, elegant)
yea, the long term plan is to have a graphical editor that plays well with programmer tools. not sure if you saw https://github.com/phronmophobic/schematic/blob/main/src/com/phronemophobic/membrane/figma.clj, but it's a proof of concept for importing figma files. There's still a few missing drawing primitives, but it's surprisingly close.
a lot of UI libraries take while to get decent looking components because you have reimplement design files. I'm hoping I can leap-frog that step.
still needs some work, but it seems plausible
The final boss - text
it's so true. that, and animations
What I like about the idea of contextual blocks for text properties is it at least plays with membrane's model of path updates. I'm cautiously optimistic