Fork me on GitHub
#membrane
<
2021-10-15
>
Ben Sless06:10:02

Do you think there can be a benefit to abstract the representation of coordinates to types and protocols, instead of tying it to the vector representation?

phronmophobic07:10:56

there definitely might be. One thing I've realized is that a lot of the stuff in membrane.ui assumes floating point coordinates, but some UIs like terminal have integer coordinate systems

phronmophobic07:10:03

related, I think it would be better to have the ui model be more firmly grounded on 2d geometry

phronmophobic07:10:15

well, for 2d UI anyway. Obviously, 3d geometry is important if you're making a 3d UI.

phronmophobic07:10:35

User interfaces in 3d (usually games) do a much better job of having a stronger mathematical basis since not having a strong theoretical foundation will bring you down much quicker when you're doing 3d

phronmophobic07:10:58

One of the things I'm interested in when I get the chance is to 1. try a new UI model, 2. extend the current UI model to work under the new model I think it can be done without breaking any existing code which, if true, would prove some of the strengths of clojure's default modeling constructs.

phronmophobic07:10:23

When I say "ui model", I mean is a few things: • descriptions of what to draw like fills, strokes, paths, images, and text. Fills and strokes are currently a bit clunky. Text is definitely an area that could be simplified and expanded. • descriptions for events. there's a few places where behavior is coupled that can be simplified and broken down further. • common abstractions like ui/bounds and ui/origin that events and layout are based on. (`ui/bounds` is currently overloaded and should probably be broken into things like hit detection, pixel extents, framing for layout, etc). There should probably be even more common abstractions. Having said that, the reason I haven't yet is that the current UI model works well enough to test the other ideas I have. Even with some of the weaknesses, it feels much better to me than html/css, but I'm probably a bit biased 😄.

Ben Sless07:10:01

I've never done ui work, myself, but just going by what you said in talks and docs, it looks like you also want a geometry abstraction layer

Ben Sless07:10:29

It has two benefits, one is that you finally get to talk about geometry (just data), second is if it ever gets computationally expensive the abstraction boundary gives you room to optimize

Ben Sless19:10:58

Trying to port cljfx's HN reader

Ben Sless19:10:23

Was super easy

Ben Sless19:10:39

(defui item-row
  [{:keys [time type descendants title kids id score url by expanded?]}]
  (on
   :mouse-down
   (fn [_] [[:update $expanded? not]])
   ;; put the items side by side
   (horizontal-layout
    (translate 5 5 (ui/checkbox $expanded?))
    (spacer 5 0)
    (vertical-layout
     (horizontal-layout
      (spacer 5 0)
      (ui/label score)
      (spacer 10 0)
      (basic/button {:text title :on-click (fn [] [[::load-url url]])}))
     (horizontal-layout
      (spacer 5 0)
      (ui/label (str "By: " by))
      (spacer 5 0)
      (ui/label (str "At: " (str (java.time.Instant/ofEpochSecond time))))
      (spacer 5 0)
      (basic/button {:text (str "Comments: " (count kids))
                     :on-click (fn [] [[::load-comments kids]])})
      )))))

Ben Sless19:10:42

At least the first part

Ben Sless19:10:05

Here, a little more sensible

(defui story-item
  [{:keys [time type descendants title kids id score url by expanded?]}]
  (horizontal-layout
   ;; (translate 5 5 (ui/checkbox $expanded?))
   (spacer 5 0)
   (vertical-layout
    (horizontal-layout
     (spacer 5 0)
     (ui/label score)
     (spacer 10 0)
     (basic/button {:text title :on-click (fn [] [[::load-url url]])}))
    (horizontal-layout
     (spacer 5 0)
     (ui/label (str "By: " by))
     (spacer 5 0)
     (ui/label (str "At: " (str (java.time.Instant/ofEpochSecond time))))
     (spacer 5 0)
     (basic/button {:text (str "Comments: " (count kids))
                    :on-click (fn [] [[::load-comments kids]])})
     ))))

phronmophobic19:10:21

for the checkbox, you can do (basic/checkbox {:checked? expanded?}) and it should "bind" expanded? to the checked value

Ben Sless19:10:54

Yeah, but I decided I didn't want a checkbox at the moment

👍 1
phronmophobic19:10:00

everything in membrane.ui is stateless.

Ben Sless19:10:43

This should probably render the comments:

(defui comment-item
  [{:keys [by text time kids]}]
  (vertical-layout
   (horizontal-layout
    (spacer 5 0)
    (ui/label text))
   (horizontal-layout
    (spacer 5 0)
    (label-by by)
    (spacer 5 0)
    (label-at time))
   (when kids
     (horizontal-layout
      (spacer 5 0)
      (apply
       vertical-layout
       (mapv comment-item kids))))))

Ben Sless19:10:34

sans spacing for readability

Ben Sless20:10:57

Also thinking text element components could be useful, esp when translating to web. (text foo (paragraph bar) bazz), etc

phronmophobic20:10:52

yea, trying to do everything with just ui/label isn't great

phronmophobic20:10:42

text is pretty painful to deal with so I've been putting off trying to figure out the right API for that. It's also pretty complicated with kerning, letter spacing, line height, bounding boxes, fonts, style, emoji, wrapping, aligning (baseline, center, vertical)

phronmophobic20:10:27

also there's markup like bold/italic, underlining, color, etc

phronmophobic20:10:45

and emoji! 🙂 😄 😱 🙃

😨 1
Ben Sless20:10:58

On one hand, yeah, on the other, surrounding it with "constructors" lets you do plenty of calculations and formatting That's before getting in to efficient text editing data structures

phronmophobic20:10:03

> That's before getting in to efficient text editing data structures There's actually already a pretty good library for that https://github.com/mogenslund/liquid/blob/master/src/liq/buffer.cljc

Ben Sless20:10:52

was thinking of ropes, actually

phronmophobic21:10:11

my understanding was that ropes don't allow for markup

Ben Sless06:10:25

Wonder how Xi did it

phronmophobic20:10:15

yea, I think there's definitely an 80/20 featureset that can be done without https://en.wikipedia.org/wiki/TeX making the perfect text library