add support for font-size

[xxrlzzz]

[ealmloff]

This looks great, but there are some improvements that need to be made in native-core that need to be completed before this can be finished.

The layout should depend on the font size. When the font size changes, the layout needs to be updated to reflect that. Using a DashMap to handle font size does not handle these updates. (Try making the font size depend on if the button is focused in the buttons example and see that the text stops being centered)

The native-core system handles this automatically when you mark one state as dependent on another. Unfortunately, there is currently no good way of representing a state like the layout that is dependent based on both parent and children states.

We could probably patch this into the current system by resolving what states are dirty on a node instead of tree level, but it would requiring splitting the layout state in a way that would make the code less readable.

Once https://github.com/DioxusLabs/dioxus/pull/730 is finished it should be much easier to represent this kind of state, and we can make some small changes to this PR to make it work

[xxrlzzz]

Thanks for your reply, I see the problem is the lack of mechanism that state dependency for both parent and children from native-core, so their is no easy way to relayout child when parent's font-size got change. As you say, this patch may require a native-core upgrade to keep forward.

[ealmloff]

It should be possible to integrate text size with layout now that #22 has been merged

[xxrlzzz]

It seems update doesn't get invoked when state has ParentDependencies and parent state change. Since that the case that parent layout depending children font-size don't take effect. You can reproduce this by update parents ForgroundColor, there is my modify of examples/buttons.rs

fn app(cx: Scope) -> Element {
    let count = use_state(cx, || 1);
    let current_count = 10;
    let font_size = if *count.get() > 0 { "32px" } else { "16px" };
    let color = if *count.get() > 0 { "green" } else { "red" };
    cx.render(rsx! {
        div { display: "flex", flex_direction: "column", width: "100%", height: "100%",
            div {
                display: "flex",
                flex_direction: "row",
                justify_content: "center",
                align_items: "center",
                text_align: "center",
                width: "100%",
                height: "10%",
                background_color: "green",
                tabindex: "0",
                onmouseup: |_| {
                    count.modify(|c|if  *c > 0 {0} else {1} );
                },
                "grid: {current_count}x{current_count} = {current_count*current_count} tiles - Click to add more"
            }
            div {
                display: "flex",
                flex_direction: "column",
                justify_content: "center",
                align_items: "center",
                text_align: "center",
                width: "100%",
                height: "90%",
                font_size: "{font_size}",
                color: "{color}",
                (0..current_count).map(|y|
                    rsx! {
                        div { display: "flex", flex_direction: "row", width: "100%", height: "100%",
                            (0..current_count).map(|x| {
                                if (x + y) % 2 == 0 {
                                    rsx! {
                                        div {
                                            border_width: "0px",
                                            width: "100%",
                                            height: "100%",
                                            background_color: "rgb(100, 100, 100)"
                                        }
                                    }
                                } else {
                                    rsx! {
                                        Button {
                                            color_offset: x * y,
                                            layer: ((x + y) % 3) as u16
                                        }
                                    }
                                }
                            })
                        }
                    }
                )
            }
        }
    })
}

If there is any my misunderstood, please let me know.

[ealmloff]

https://github.com/DioxusLabs/dioxus/pull/953 should fix the issue you described. The font size example with a similar data flow in that PR now works.

[xxrlzzz]

A weird compile error

error[E0308]: mismatched types
  --> /Users/hanhaoshen/.cargo/git/checkouts/fount-d923d0582b4b6119/a8c0686/fello/src/meta/attributes.rs:38:31
   |
38 |             if fs_selection & FS_SELECTION_ITALIC != 0 {
   |                ------------   ^^^^^^^^^^^^^^^^^^^ expected struct `SelectionFlags`, found `u16`
   |                |
   |                expected because this is `SelectionFlags`

I have reported to https://github.com/linebender/vello/issues/308 and wait to see their response.

[xxrlzzz]

new commit will be #29