Fork me on GitHub
#membrane
<
2022-10-23
>
Ben Sless11:10:15

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?

phronmophobic16:10:56

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.

phronmophobic16:10:39

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

Ben Sless17:10:23

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"))

👍 1
Ben Sless17:10:35

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)

Ben Sless17:10:24

A stack/environment model looks like the most natural fit for the problem, wdyt?

phronmophobic17:10:23

depends on the use case

phronmophobic17:10:31

seems reasonable, but text is tricky and I'd like to do a deep dive on the topic at some point

phronmophobic17:10:01

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.

phronmophobic17:10:13

I also wouldn't be opposed to a good 80/20 option that's not too much work to implement

phronmophobic17:10:35

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

phronmophobic17:10:48

another short-term solution is to give better access to the options that already exist in Swing, JavaFX, and Skia

phronmophobic17:10:14

and just try to build a small wrapper on top that is the least common denominator of each

phronmophobic17:10:08

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 🤷

Ben Sless18:10:31

uh, sorry? 🙃

Ben Sless18:10:50

I found out Swing can just take html

Ben Sless18:10:25

frame.add(new JLabel("<html>Text color: <font color='red'>red</font></html>"));
Disgusting, isn't it?

phronmophobic18:10:49

I don't think it will present the same as all the webkit based options, but probably good enough for some use cases.

Ben Sless18:10:06

True but it works well with my ad-hoc model, where (text "Text color: " (color :red "red")) can be rendered pretty easily to it

Ben Sless18:10:11

So that's 1-0 for the good guys

toot 1
Ben Sless18:10:56

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

phronmophobic18:10:14

I haven't tried embedding Swing like JLabel. Is it easy to extract it's draw function?

phronmophobic18:10:33

I imagine there's a way to do it, but haven't tried

phronmophobic18:10:09

Swing, putting the pain in paint

😄 2
phronmophobic19:10:14

(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))

phronmophobic19:10:31

I really gotta work on not being nerd sniped so easily

phronmophobic19:10:17

It's interesting, there's actually some pretty good stuff in the Swing library if you dig deep enough.

Ben Sless19:10:29

Shake the swing tree, see what falls out

phronmophobic20:10:09

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.

phronmophobic21:10:56

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!!

Ben Sless03:10:29

I wasn't planning to encourage embedding, was hoping more for membrane components (pretty, simple, elegant)

phronmophobic03:10:36

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.

👀 1
phronmophobic03:10:49

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.

phronmophobic03:10:23

still needs some work, but it seems plausible

Ben Sless03:10:39

The final boss - text

1
phronmophobic03:10:54

it's so true. that, and animations

Ben Sless04:10:47

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

👍 1