marc2332 / freya Goto Github PK

ScrollView component should not scroll beyond its container's bounds when its size changes

Good:

Bad (after resizing):

Freya currently has an image element that accepts raw bytes of an image, this is very low level. Therefore it's needed to have a easy way to load external images (e.g using http). This can be done via a NetworkImage component.

Considerations

It would be really useful to implement some kind of optional persisted cache to avoid getting the images when it's not needed.

This tracks multiple features related to the app's windows.

• Custom launch configuration
  • Window size
  • Window title
  • Window decoration
  • Window transparency
  • Window background color
• #44

HI Marc,
This is a really neat library.

I tried building the counter example on the latest version of macOS and got this compilation error:

   Compiling freya-hooks v0.1.0 (/Users/alex/Documents/projects/freya/hooks)
error[E0632]: cannot provide explicit generic arguments when `impl Trait` is used in argument position
  --> hooks/src/use_animation.rs:39:29
   |
39 |     let tween = use_state::<AnimationMode>(&cx, || mode());
   |                             ^^^^^^^^^^^^^ explicit generic argument not allowed
   |
   = note: see issue #83701 <https://github.com/rust-lang/rust/issues/83701> for more information

For more information about this error, try `rustc --explain E0632`.
error: could not compile `freya-hooks` due to previous error
warning: build failed, waiting for other jobs to finish...

This tracks the support for testing in Freya.

• Headless running
• Read text of a given Node
• Get the NodeState of a given Node
• Get the processed layout of a given Node
• Simulate all supported events (mouse, keyboard, wheel, etc)

Needs #114 first

This issue tracks the support for events.

• onclick
  • implemented
  • screen coordinates
  • element coordinates
  • global
• onmousedown
  • implemented
  • screen coordinates
  • element coordinates
  • global
• onmouseover
  • implemented
  • screen coordinates
  • element coordinates
  • global
• onmouseleave
  • implemented
  • screen coordinates
  • element coordinates
• onmouseenter
  • implemented
  • screen coordinates
  • element coordinates
• onmouseup
  • implemented
  • screen coordinates
  • element coordinates
  • global
• onwheel
  • implemented
  • y scroll
  • x scroll
• keydown
  • implemented
  • Composable characters
  • Modifiers
• keyup
  • implemented
  • Composable characters
  • Modifiers
• onglobalclick
  • implemented
  • screen coordinates
• ontouchcancel
  • screen coordinates
  • element coordinates
  • Finger ID
  • Force
  • global
• ontouchend
  • screen coordinates
  • element coordinates
  • Finger ID
  • Force
  • global
• ontouchmove
  • screen coordinates
  • element coordinates
  • Finger ID
  • Force
  • global
• ontouchstart
  • screen coordinates
  • element coordinates
  • Finger ID
  • Force
  • global
• onpointerdown
  • screen coordinates
  • element coordinates
  • Mouse type
  • Touch type
  • global
• onpointerup
  • screen coordinates
  • element coordinates
  • Mouse type
  • Touch type
  • global
• onpointerover
  • screen coordinates
  • element coordinates
  • Mouse type
  • Touch type
  • global
• onpointerenter
  • screen coordinates
  • element coordinates
  • Mouse type
  • Touch type
• onpointerleave
  • screen coordinates
  • element coordinates
  • Mouse type
  • Touch type

Reproduce

1. Set the width to be a floating percentage (e.g. 23.5%)
2. Run
3. Crash

Error

thread '<unnamed>' panicked at 'called `Result::unwrap()` on an `Err` value: ParseIntError { kind: InvalidDigit }', /Users/school/.cargo/git/checkouts/dioxus-skia-2d7a6bc51af8408d/c27f004/state/src/node.rs:112:84
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
thread 'main' panicked at 'called `Result::unwrap()` on an `Err` value: PoisonError { .. }', /Users/school/.cargo/git/checkouts/dioxus-skia-2d7a6bc51af8408d/c27f004/renderer/src/lib.rs:501:30

Code

cx.render(rsx! {
        view {
            height: "32",
            width: "auto",
            padding: "16",
            onscroll: onscroll,
            view {
                width: "23.5%",
                height: "stretch",
                background: "blue",
            }
        }
    })

Use this as base

Given that we currently have no support for alternative windowing systems (i.e. wayland), I think that we should enable the x11 feature by default on all linux compiles. Is there any specific technical limitation that would prevent this?

This issue tracks the implementation of animation features for Freya.

• use_animation see (#43)
• use_animation_transition see (#43)

Put use_camera hook behind a hook

This issue tracks the implementation of the built-in hooks for Freya.

• use_animation

  • Implemented
  • Bounce in
  • Ease in
  • Ease in out
  • Ease out

• use_animation_transition

  • Implemented
  • Bounce in
  • Ease in
  • Ease in out
  • Ease out

• use_focus

  • Implemented

• use_init_focus

  • Implemented

• use_editable

  • Implemented

• use_node

  • Implemented

• use_theme

  • Implemented

• use_camera

  • Implemented

• use_platform

  • Implemented

• use_accessibility

  • Implemented

• use_canvas

  • Implemented

Tracking the implementation of the supported elements.

See the definitions in the source.

Currently, I am getting incoming keyboard presses from winit but I don't know how to get the resulting key. For example, let's say the user presses shift + 7, that will make a / on my keyboard, how could I actually know it's a /, is there any library to calculate this, or maybe there is a feature on winit that I am missing?

This tracks the current support for different text editing features.

Supported

• Multi line editing
• Enter key
• Backspace key
• Move cursor to cursor on click
• Move cursor using arrows key
• Delete key
• Highlight/select text
• Delete/replace the selected text (#356)
• Copy/cut/paste (#473)

Application text is too small when compared to other system applications.

Left: Example application
Right: Color meter for text size reference.

Tracks styling attributes and features.

Text elements

• Color
• Font size
• Font style
• Built-in Font family
• Custom fonts
• Text decorations
• Text align
• Text max lines
• Font style
• Font weight
• Font width
• Text shadow
• Letter spacing
• Word spacing
• linear-gradient()
• rgb()
• hsl()

Other

• Background color
• Shadow
• Corner radius and smoothing
• Rotate effect
• Border
• Opacity

• Basic support for Accessibility via AccessKit.

> cargo build
    Blocking waiting for file lock on package cache
    Updating git repository `https://github.com/DioxusLabs/dioxus`
    Updating git repository `https://github.com/marc2332/freya`
    Updating crates.io index
error: failed to select a version for `proc-macro2`.
    ... required by package `syn v2.0.3`
    ... which satisfies dependency `syn = "^2.0.3"` of package `serde_derive v1.0.158`
    ... which satisfies git dependency `dioxus-router` of package `freya v0.1.0 (https://github.com/marc2332/freya#a1625237)`
    ... which satisfies git dependency `freya` of package `ticktick v0.1.0 (F:\GITHUB REPOS\ninetynin\todowo)`versions that meet the requirements `^1.0.52` are: 1.0.52
all possible versions conflict with previously selected packages.
  previously selected package `proc-macro2 v1.0.50`
    ... which satisfies dependency `proc-macro2 = ">=1.0.0, <2.0.0"` (locked to 1.0.50) of package `bindgen v0.56.0`
    ... which satisfies dependency `bindgen = "^0.56.0"` of package `v4l2-sys-mit v0.2.0`
    ... which satisfies dependency `v4l2-sys-mit = "^0.2"` of package `nokhwa-bindings-linux v0.1.0`
    ... which satisfies dependency `nokhwa-bindings-linux = "^0.1.0"` of package `nokhwa v0.10.3`
    ... which satisfies dependency `nokhwa = "^0.10.3"` of package `freya-hooks v0.1.0 (https://github.com/marc2332/freya#a1625237)`
    ... which satisfies git dependency `freya-hooks` of package `freya v0.1.0 (https://github.com/marc2332/freya#a1625237)`
    ... which satisfies git dependency `freya` of package `ticktick v0.1.0 (F:\GITHUB REPOS\ninetynin\todowo)`

failed to select a version for `proc-macro2` which could resolve this conflictPS F:\GITHUB REPOS\ninetynin\todowo>

cargo.toml ->

[package]
name = "ticktick"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
#cairo-rs = "0.16.7"
wallpaper = { version = "3.2.0", features = ["from_url"] }
imageproc = "0.23.0"
image = "0.24.5"
rusttype = "0.9.3"
# clap = "4.1.4"
clap = { version = "4.1.4", features = ["cargo"] }

freya = { git="https://github.com/marc2332/freya" }
dioxus = { git="https://github.com/DioxusLabs/dioxus", rev="49c5a5043a16fc82210af146c345793dd448e519"}

At the moment only X11 is supported in Linux.

Freya needs https://github.com/tauri-apps/glutin to have wayland support first.

Currently, themes are global, this means that you cannot have scoped themes. Implementing a ThemeProvider component leveraging the context API from Dioxus it would scoped (aka nested) themes.

It would also be useful to have third-party defines values via some HashMap or something like that.

This would require some refactoring from https://github.com/marc2332/freya/tree/main/renderer/src

Components with editable content such as Inputs should display a cursor.

My idea is to implement a new attribute that specifies the character index where the cursor must be positioned, lately in the layout engine it can calculate the proper position for the cursor using Skia's Font::measure_str()

Some random thing I coded that seems to work:

let p = Paint::default();
let f_t = SkFontStyle::default();
let fonts = font_collection.find_typefaces(&[node.state.font_style.font_family.clone()], f_t);
let f = fonts.get(0).unwrap();   
let f = Font::from_typeface(f, node.state.font_style.font_size);
let l = f.measure_str("l", Some(&p));
// This calculates with width of "l"

Implement incremental layout changes.

Is this technically possible? Yes

But, it needs something like requestAnimationFrame so you can actually paint in the right moment.

Native components I wish I had:

• Button
• Slider
• Text
  • Custom font color
  • Custom font

Maybe add support for Zoom via an attribute?

Freya currently has an image element that accepts raw bytes of an image, this is very low level. Therefore it's needed to have a easy way to load ocal images (dynamically loaded images from the file system). This can be done via a LocalImage component.

Considerations

It would be really useful to implement some kind of optional persisted cache to avoid getting the images when it's not needed.

This issue tracks the support for Devtools.

To enable DevTools, simply run Freya with the devtools feature.

• Isolate the devtools into it's own VirtualDOM
• Node Tree inspector
• Draw a purple border over the selected node in the tree
• Node inspector
  • Style
  • Layout
  • Event listeners

I think it would be cool if nested ThemeProvider components could inherit the theme from their parents if not specified otherwise.

https://api.skia.org/classSkMatrix.html#a6fda31a4539337aec95cdeb574528408

• Remove the / 2.0 (This will break a lot of examples) from https://github.com/marc2332/freya/blob/main/state/src/size.rs#L119 as it doesn't really make sense
• Allow vertical and horizontal for separate, e.g padding: 20 10
• Allow every direction for separate, e.g padding: 5 10 20 7

Example of similar idea: https://github.com/tauri-apps/tauri-egui
https://tauri.app/blog/2022/09/19/tauri-egui-0-1/

Implement Flex support

WIP. I am currently making some tests using Taffy.

I think it would be useful to have some already-enabled features from other crates like rust-skia's svg to be as a standalone freya feature, that way, it could be disabled, although enabled by default.

Actual implementation https://github.com/marc2332/freya-editor/blob/main/src/controlled_virtual_scroll_view.rs

Currently, both ScrollView and VirtualScrollView have uncontrolled scrolling, meaning you cannot manually control the behavior/state of their scroll.

This could be a good way to make the scrolling optionally controllable:

fn app(cx: Scope) -> Element {
    let scroll_controller = use_new_scroll_controller();

    render!(
        rect {
            height: "100%",
            width: "100%",
            padding: "100",
            background: "white",
            Button {
                onclick: move |_| scroll_controller.scroll_to_bottom(),
                label {
                    "Scroll to bottom"
                }
            }
            ScrollView {
                controller: scroll_controller,
                show_scrollbar: true,
                rect {
                    height: "100%",
                    width: "100%",
                    background: "rgb(27, 38, 59)",
                    padding: "25",
                    onclick: move |_| scroll_controller.scroll_to(0),
                    label { "Click to go up" }
                }
            }
        }
    )
}

Both ScrollView and VirtualScrollView would have an option parameter that would accept a trait object that implements a certain trait that controls how the scroll behaves and would also allow to modify the current scroll position.

Maybe it could even be accessed by their children if it was passed via a context provider.

fn app(cx: Scope) -> Element {
    let scroll_controller = use_new_scroll_controller();
    
    // internally calls use_context_provider
    scroll_controller.provide(&cx);

    render!(
        rect {
            height: "100%",
            width: "100%",
            padding: "100",
            background: "white",
            ScrollView {
                controller: scroll_controller,
                show_scrollbar: true,
                CoolComponent { },
                rect {
                    height: "100%",
                    width: "100%",
                    background: "rgb(27, 38, 59)",
                    padding: "25",
                    onclick: move |_| scroll_controller.scroll_to(0),
                    label { "Click to go up" }
                }
            }
        }
    )
}

#[allow(non_snake_case)]
fn CoolComponent(cx: Scope) -> Element {
   let scroll_component = use_scroll_controller(&cx);

   render!(
     Button {
        onclick: move |_| scroll_controller.scroll_to_bottom(),
        label {
            "Scroll to bottom"
        }
    }
  )
}

Using
https://crates.io/crates/nokhwa

This tracks the progress of the documentation

Book

Website: https://book.freyaui.dev/

• Getting started guide
• Hot-reload guide
• Virtualizing guide
• Theming guide
• Layout guide
• Testing
• Animations
• Elements
• Styling
• Font Styling
• Events
• Accessibility
• Devtools
• Publishing

API reference

Stable: https://docs.rs/freya/latest/freya/
Nightly: https://docs.freyaui.dev/freya

Feel free to suggest anything that could be documented!

Having SVG support quires enabling a cargo feature on rust-skia, but, there isn't available any prebuilt binaries of Skia with the SVG feature, so, I guess I'll need to make a PR to their repo.

Because the other option would be to make the users build Skia on their own... but that's not funny.

Some days ago, I made an attempt trying to build a Windows binary with the SVG feature enabled, it seemed to build just fine, but I didn't test it.

• Make a more flexible hook based on use_editable that would allow you passing your own Rope and cursor state instead of being hold by the same hook.
• Make use_editable use this same hook in order to not duplicate code
• Name idea: use_edit

Why?

use_editable is great but it doesn't work well when for example you aremapping some values into multiple Components that call this hook, but you want to save the rope and cursor state outside of this component (e.g global state).

Use custom events data instead of dioxus_html's MouseData and WheelData which doesn't completely fit in Freya since it's designed to be used in for web/web-like renderers

Something like https://shopify.github.io/react-native-skia/docs/shapes/path#using-path-object

This issue tracks the state of the calc() function.

Summary

calc() is inspired by the CSS's spec. It allows specifying a certain calculation instead of using a static value.

For example, this way we can draw a rectangle whose width will be the half of the window plus 100:

fn app(cx: Scope) -> Element {
    cx.render(rsx!(rect {
        background: "black",
        width: "calc(50% + 100)",
        height: "100%",
    }))
}

Downsides

• Calculations are made in order, so there is no priority for divisions or multiplications.
  For example, the expected result of calc(100 + 250 * 2) would be 600, but it's 700 since it goes one by one.

Tracking the implementation of the components library:

• Switch
  • Implemented
• Button
  • Implemented
  • Partial Accessibility
• Slider
  • Implemented
• Input
  • Implemented
  • Cursor support
• ScrollView
  • Implemented
  • show_scrollbar
  • Vertical direction
  • Horizontal direction
  • Both directions
  • Scroll events
  • Custom Scrollbar component
• VirtualScrollView
  • Implemented
  • Vertical direction
  • Horizontal direction
  • Scroll events
  • Custom Scrollbar component
• LocalImage
  • Implemented (#111)
• NetworkImage
  • Implemented
  • Partial Accessibility
• Dropdown
  • Implemented
  • Partial Accessibility
  • Multiselect
• Accordion
  • Implemented
  • Group-awareness (example)
• GestureArea
  • Implemented
  • TapUp
  • TapDown
  • DoubleTap
  • LongPress
  • Drag
• Drag & Drop
  • Implemented
  • DragZone
  • DropZone
• CursorArea
  • Implemented
• Graph
  • Implemented
  • Customizable
• Table
  • Implemented
• ProgressBar
  • Implemented

• Draw wireframe around the selected node
• Use VirtualScrollView
• Computed layout tab
• Improve the overall design
• Simulated events in DevTools
• Persisted ScrollViews position between route changes