Merge branch 'main' into feat/horizontal-scroll-input

crates/components/src/button.rs

@@ -22,6 +22,112 @@ use winit::{
     window::CursorIcon,
 };
 
+/// Properties for the [`Button`], [`FilledButton`] and [`OutlineButton`] components.
+#[derive(Props, Clone, PartialEq)]
+pub struct ButtonProps {
+    /// Theme override.
+    pub theme: Option<ButtonThemeWith>,
+    /// Inner children for the button.
+    pub children: Element,
+    /// Event handler for when the button is pressed.
+    pub onpress: Option<EventHandler<PressEvent>>,
+    /// Event handler for when the button is clicked. Not recommended, use `onpress` instead.
+    pub onclick: Option<EventHandler<()>>,
+}
+
+/// Clickable button.
+///
+/// # Styling
+/// Inherits the [`ButtonTheme`](freya_hooks::ButtonTheme) theme.
+///
+/// # Example
+///
+/// ```no_run
+/// # use freya::prelude::*;
+/// fn app() -> Element {
+///     rsx!(
+///         Button {
+///             onpress: |_| println!("clicked"),
+///             label {
+///                 "Click this"
+///             }
+///         }
+///     )
+/// }
+/// ```
+#[allow(non_snake_case)]
+pub fn Button(props: ButtonProps) -> Element {
+    let theme = use_applied_theme!(&props.theme, button);
+    ButtonBase(BaseButtonProps {
+        theme,
+        children: props.children,
+        onpress: props.onpress,
+        onclick: props.onclick,
+    })
+}
+
+/// Clickable button with a solid fill color.
+///
+/// # Styling
+/// Inherits the filled [`ButtonTheme`](freya_hooks::ButtonTheme) theme.
+///
+/// # Example
+///
+/// ```no_run
+/// # use freya::prelude::*;
+/// fn app() -> Element {
+///     rsx!(
+///         FilledButton {
+///             onpress: |_| println!("clicked"),
+///             label {
+///                 "Click this"
+///             }
+///         }
+///     )
+/// }
+/// ```
+#[allow(non_snake_case)]
+pub fn FilledButton(props: ButtonProps) -> Element {
+    let theme = use_applied_theme!(&props.theme, filled_button);
+    ButtonBase(BaseButtonProps {
+        theme,
+        children: props.children,
+        onpress: props.onpress,
+        onclick: props.onclick,
+    })
+}
+
+/// Clickable button with an outline style.
+///
+/// # Styling
+/// Inherits the outline [`ButtonTheme`](freya_hooks::ButtonTheme) theme.
+///
+/// # Example
+///
+/// ```no_run
+/// # use freya::prelude::*;
+/// fn app() -> Element {
+///     rsx!(
+///         OutlineButton {
+///             onpress: |_| println!("clicked"),
+///             label {
+///                 "Click this"
+///             }
+///         }
+///     )
+/// }
+/// ```
+#[allow(non_snake_case)]
+pub fn OutlineButton(props: ButtonProps) -> Element {
+    let theme = use_applied_theme!(&props.theme, outline_button);
+    ButtonBase(BaseButtonProps {
+        theme,
+        children: props.children,
+        onpress: props.onpress,
+        onclick: props.onclick,
+    })
+}
+
 pub enum PressEvent {
     Pointer(PointerEvent),
     Key(KeyboardEvent),
@@ -38,10 +144,10 @@ impl PressEvent {
 
 /// Properties for the [`Button`] component.
 #[derive(Props, Clone, PartialEq)]
-pub struct ButtonProps {
-    /// Theme override.
-    pub theme: Option<ButtonThemeWith>,
-    /// Inner children for the Button.
+pub struct BaseButtonProps {
+    /// Theme.
+    pub theme: ButtonTheme,
+    /// Inner children for the button.
     pub children: Element,
     /// Event handler for when the button is pressed.
     pub onpress: Option<EventHandler<PressEvent>>,
@@ -59,34 +165,14 @@ pub enum ButtonStatus {
     Hovering,
 }
 
-/// Clickable button.
-///
-/// # Styling
-/// Inherits the [`ButtonTheme`](freya_hooks::ButtonTheme) theme.
-///
-/// # Example
-///
-/// ```no_run
-/// # use freya::prelude::*;
-/// fn app() -> Element {
-///     rsx!(
-///         Button {
-///             onpress: |_| println!("clicked"),
-///             label {
-///                 "Click this"
-///             }
-///         }
-///     )
-/// }
-/// ```
 #[allow(non_snake_case)]
-pub fn Button(
-    ButtonProps {
+pub fn ButtonBase(
+    BaseButtonProps {
         onpress,
         children,
         theme,
         onclick,
-    }: ButtonProps,
+    }: BaseButtonProps,
 ) -> Element {
     let mut focus = use_focus();
     let mut status = use_signal(ButtonStatus::default);
@@ -106,7 +192,7 @@ pub fn Button(
         height,
         font_theme,
         shadow,
-    } = use_applied_theme!(&theme, button);
+    } = theme;
 
     let onpointerup = {
         to_owned![onpress, onclick];

crates/core/src/elements/label.rs

@@ -11,9 +11,9 @@ use torin::prelude::{
 };
 
 use super::utils::ElementUtils;
-use crate::prelude::{
-    align_main_align_paragraph,
-    DioxusNode,
+use crate::{
+    prelude::DioxusNode,
+    render::align_main_align_paragraph,
 };
 
 pub struct LabelElement;

crates/core/src/elements/paragraph.rs

@@ -31,12 +31,13 @@ use torin::{
 use super::utils::ElementUtils;
 use crate::{
     dom::DioxusNode,
-    prelude::{
-        align_highlights_and_cursor_paragraph,
+    prelude::TextGroupMeasurement,
+    render::{
         align_main_align_paragraph,
-        TextGroupMeasurement,
+        create_paragraph,
+        draw_cursor,
+        draw_cursor_highlights,
     },
-    render::create_paragraph,
 };
 
 pub struct ParagraphElement;
@@ -230,80 +231,3 @@ impl ElementUtils for ParagraphElement {
         area
     }
 }
-
-fn draw_cursor_highlights(
-    area: &Area,
-    paragraph: &Paragraph,
-    canvas: &Canvas,
-    node_ref: &DioxusNode,
-) -> Option<()> {
-    let node_cursor_state = &*node_ref.get::<CursorState>().unwrap();
-
-    let highlights = node_cursor_state.highlights.as_ref()?;
-    let highlight_color = node_cursor_state.highlight_color;
-
-    for (from, to) in highlights.iter() {
-        let (from, to) = {
-            if from < to {
-                (from, to)
-            } else {
-                (to, from)
-            }
-        };
-        let cursor_rects = paragraph.get_rects_for_range(
-            *from..*to,
-            RectHeightStyle::Tight,
-            RectWidthStyle::Tight,
-        );
-        for cursor_rect in cursor_rects {
-            let rect = align_highlights_and_cursor_paragraph(
-                node_ref,
-                area,
-                paragraph,
-                &cursor_rect,
-                None,
-            );
-
-            let mut paint = Paint::default();
-            paint.set_anti_alias(true);
-            paint.set_style(PaintStyle::Fill);
-            paint.set_color(highlight_color);
-
-            canvas.draw_rect(rect, &paint);
-        }
-    }
-
-    Some(())
-}
-
-fn draw_cursor(
-    area: &Area,
-    paragraph: &Paragraph,
-    canvas: &Canvas,
-    node_ref: &DioxusNode,
-) -> Option<()> {
-    let node_cursor_state = &*node_ref.get::<CursorState>().unwrap();
-
-    let cursor = node_cursor_state.position?;
-    let cursor_color = node_cursor_state.color;
-    let cursor_position = cursor as usize;
-
-    let cursor_rects = paragraph.get_rects_for_range(
-        cursor_position..cursor_position + 1,
-        RectHeightStyle::Tight,
-        RectWidthStyle::Tight,
-    );
-    let cursor_rect = cursor_rects.first()?;
-
-    let rect =
-        align_highlights_and_cursor_paragraph(node_ref, area, paragraph, cursor_rect, Some(1.0));
-
-    let mut paint = Paint::default();
-    paint.set_anti_alias(true);
-    paint.set_style(PaintStyle::Fill);
-    paint.set_color(cursor_color);
-
-    canvas.draw_rect(rect, &paint);
-
-    Some(())
-}