membrane 2021-10-17

Man, that's amazing, I never did any UI work in my life and in about 3 hours of work got to this

🎉 1

that looks great!

I mean, not beautiful... but functional! 😄

Beautiful can always come later

👍 1

Once I get html parsing I'll contribute the example to the repo 🙂

Now needs scrolling

just a warning, the built in scrollview is functional, but there's room for improvement. I haven't gotten to it yet because I personally prefer pagination over scrolling, but I should probably just fix it since it's usually one of the first things people try for some reason.

the main issue is that it stops scrolling when your mouse leaves the scroll area, but it should work other than that

Is there an example for scroll?

let me check

one sec, it should be pretty simple, let me just double check the syntax

you should just be able to pass the body and the bounds of the scroll view and it should work

why do I need the bounds? what do they mean?

That's just the size of the scrollview

and can the body be a vertical layout?

the body can be anything

okay, works, but sensitivity is wonky

sensitivity with the scroll wheel or with how it tracks your mouse?

wheel. slow crawl

oh weird

obviously, the scrollview should match whatever is normal for the OS, but as a work around you can wrap the scrollview with something like:

(def scroll-speed-factor 2)
(defn fix-scroll [elem]
  (ui/on-scroll (fn [[sx sy] pos]
                  (ui/scroll elem [(* scroll-speed-factor sx) (* scroll-speed-factor sy)] pos))
                elem))

;; usage
(fix-scroll
 (basic/scrollview {:scroll-bounds [200 150]
                    :body (ui/image ( "lines.png"))}))

in fact, I think if you wrap your top level app with fix-scroll, it should fix it for any child scrollview

Also, scrolling is inverted 🙃

I'll just multiply by a negative number?

👍 1

works great!

Need to also polish the html parsing, but, it's readable 😮

If you are ever feeling extra ambitious, you could use https://github.com/phronmophobic/clj-cef to render the html

just used Crouton for now

any way to mess around with the font inside a label or text area?

Yes.

;; label
(ui/label "my-text" (ui/font "font-path.ttf" 22))

;; text area
(basic/textarea {:text text, :font (ui/font "font-path.ttf" 22)})

I thought more like applying font formatting, i.e. "foo bar bazz"

in the same text area

not currently

I could wrap each word in an area but that seems excessive

yea, I'm not actually sure what the API for that should be

potentially, I could just use the https://github.com/mogenslund/liquid/blob/master/src/liq/buffer.cljcin liquid. I can't remember if they assume a mono spaced font though

which font to look up is part of rendering, no reason it should be uniform to one text area. I can imagine a sort of (with-face text {,,,}) form which overrides lookup

not sure I understand how with-face would be used

text area will be able to render string or sequence of String | Face<String>

it seems like it might work for displaying text, but I would probably want something that works with editable text as well

might be worth checking how Emacs and Vim do it, too 🤔

👍 1

the liquid buffers are pretty similar to how code mirror does it.

Another idea I had was to simply embed emacs as a text editor

which sorta worked. the biggest downside is that it only works with mono spaced fonts

there exists a github issue to add a RichTextView to membrane, https://github.com/phronmophobic/membrane/issues/8

not much there, but it exists

what I would be looking for is a data format that: • supports non mono spaced fonts • is "easy" to edit • allows for markup like italics, bold, strikethrough, etc • allows for color markup

nice to haves would be: • support for multiple fonts • support for emoji Although, both of those have some undefined behavior with respect to layout

For your use case, do you need an editable text area with markup or just for display?

Just display

and which kinds of markup? • bold • italic • other?

Bold and italic first, option to switch fonts would be nice, too (i.e. monospace and regular) Support for text selection would be nice, too, but not critical

ok, that doesn't seem too bad. I'll see if there's a simple workaround

I modeled the domain in the example like so • top stories ◦ story • comments Story element has a button to update comments, but the story shouldn't know about comments. How should I handle this? bubble effect upwards?

I think I got it

Yup, bubble the effect upward to someone that has the right context.