gpui_squircle/

lib.rs

use figma_squircle::{FigmaSquircleParams, get_svg_path};
use gpui::{
    App, Background, Bounds, Element, ElementId, GlobalElementId, InspectorElementId,
    InteractiveElement, Interactivity, IntoElement, LayoutId, PathBuilder, Pixels, Refineable,
    Size, StatefulInteractiveElement, Style, StyleRefinement, Styled, Window, point, px,
};
use lyon::{
    extra::parser::{ParserOptions, PathParser, Source},
    path::Path as LyonPath,
};

mod style;
pub use style::{SquircleStyleRefinement, Styled as SquircleStyled};

struct BuildAndPaintOptions {
    builder: PathBuilder,
    background: Background,
}

impl BuildAndPaintOptions {
    fn fill(background: Background) -> Self {
        Self {
            builder: PathBuilder::fill(),
            background,
        }
    }

    fn stroke(background: Background, border_width: f32) -> Self {
        Self {
            builder: PathBuilder::stroke(px(border_width)),
            background,
        }
    }
}

#[derive(Default, Clone, Copy)]
pub enum BorderMode {
    #[default]
    Center,
    Outside,
    Inside,
}

pub struct Squircle {
    pub style: SquircleStyleRefinement,
    interactivity: Interactivity,
}

impl SquircleStyled for Squircle {
    fn style(&mut self) -> &mut StyleRefinement {
        &mut self.style.inner
    }

    fn outer_style(&mut self) -> &mut SquircleStyleRefinement {
        &mut self.style
    }
}

impl Squircle {
    fn new() -> Self {
        Self {
            style: SquircleStyleRefinement::default(),
            interactivity: Interactivity::new(),
        }
    }

    pub fn absolute_expand(mut self) -> Self {
        self.style.inner = self
            .style
            .inner
            .size_full()
            .absolute()
            .top_0()
            .bottom_0()
            .left_0()
            .right_0();

        self
    }

    fn to_params(&self, width: f32, height: f32, border_offset: f32) -> FigmaSquircleParams {
        let style = &self.style;
        let corner_radii = &self.style.corner_radii;

        FigmaSquircleParams {
            width,
            height,
            corner_radius: None,
            top_left_corner_radius: Some(
                corner_radii.top_left.unwrap_or_default().to_f64() as f32 + border_offset,
            ),
            top_right_corner_radius: Some(
                corner_radii.top_right.unwrap_or_default().to_f64() as f32 + border_offset,
            ),
            bottom_left_corner_radius: Some(
                corner_radii.bottom_left.unwrap_or_default().to_f64() as f32 + border_offset,
            ),
            bottom_right_corner_radius: Some(
                corner_radii.bottom_right.unwrap_or_default().to_f64() as f32 + border_offset,
            ),
            corner_smoothing: style.corner_smoothing.unwrap_or(px(1.)).to_f64() as f32,
            preserve_smoothing: style.preserve_smoothing.unwrap_or(true),
        }
    }

    fn build_lyon_path(&self, size: Size<Pixels>, border_offset: f32) -> Option<LyonPath> {
        let svg_path = get_svg_path(self.to_params(
            size.width.to_f64() as f32,
            size.height.to_f64() as f32,
            border_offset,
        ));

        let mut lyon_builder = LyonPath::builder();

        let parsed = PathParser::new().parse(
            &ParserOptions::DEFAULT,
            &mut Source::new(svg_path.chars()),
            &mut lyon_builder,
        );

        if parsed.is_err() {
            return None;
        }

        Some(lyon_builder.build())
    }

    fn build_and_paint_paths<'a, const N: usize>(
        &self,
        window: &mut Window,
        Bounds { origin, size }: Bounds<Pixels>,
        size_offset: f32,
        border_offset: f32,
        mut options: [BuildAndPaintOptions; N],
    ) {
        let size_offset_px = px(size_offset);
        let size = size - gpui::size(size_offset_px, size_offset_px);

        // If the path doesn't exist then the svg is malformed.
        // TODO: fallback to regular rounded rectangle if this case is met.
        let Some(path) = self.build_lyon_path(size, border_offset) else {
            //println!("malformed svg");
            return;
        };

        let (origin_x, origin_y) = (
            (origin.x + size_offset_px / 2.).to_f64() as f32,
            (origin.y + size_offset_px / 2.).to_f64() as f32,
        );

        for event in path.iter() {
            match event {
                lyon::path::Event::Begin { at } => {
                    let at = point(px(origin_x + at.x), px(origin_y + at.y));

                    for BuildAndPaintOptions { builder, .. } in options.as_mut() {
                        builder.move_to(at)
                    }
                }

                lyon::path::Event::Line { from: _, to } => {
                    let to = point(px(origin_x + to.x), px(origin_y + to.y));

                    for BuildAndPaintOptions { builder, .. } in options.as_mut() {
                        builder.line_to(to)
                    }
                }

                lyon::path::Event::Quadratic { from: _, ctrl, to } => {
                    let to = point(px(origin_x + to.x), px(origin_y + to.y));
                    let ctrl = point(px(origin_x + ctrl.x), px(origin_y + ctrl.y));

                    for BuildAndPaintOptions { builder, .. } in options.as_mut() {
                        builder.curve_to(to, ctrl);
                    }
                }

                lyon::path::Event::Cubic {
                    from: _,
                    ctrl1,
                    ctrl2,
                    to,
                } => {
                    let to = point(px(origin_x + to.x), px(origin_y + to.y));
                    let ctrl1 = point(px(origin_x + ctrl1.x), px(origin_y + ctrl1.y));
                    let ctrl2 = point(px(origin_x + ctrl2.x), px(origin_y + ctrl2.y));

                    for BuildAndPaintOptions { builder, .. } in options.as_mut() {
                        builder.cubic_bezier_to(to, ctrl1, ctrl2)
                    }
                }

                lyon::path::Event::End { close, .. } => {
                    if close {
                        for BuildAndPaintOptions { builder, .. } in options.as_mut() {
                            builder.close()
                        }
                    }
                }
            }
        }

        for BuildAndPaintOptions {
            builder,
            background,
            ..
        } in options
        {
            let Ok(path) = builder.build() else { continue };
            window.paint_path(path, background);
        }
    }

    #[inline(always)]
    fn get_size_and_border_offsets(&self, border_width: f32) -> (f32, f32) {
        match self.style.border_mode.unwrap_or_default() {
            BorderMode::Outside => (-border_width, border_width - 2.),
            BorderMode::Inside => (border_width, -(border_width - 1.)),
            BorderMode::Center => (0., 0.),
        }
    }
}

impl Element for Squircle {
    type RequestLayoutState = Style;
    type PrepaintState = Option<()>;

    fn id(&self) -> Option<ElementId> {
        self.interactivity.element_id.clone()
    }

    fn source_location(&self) -> Option<&'static std::panic::Location<'static>> {
        self.interactivity.source_location()
    }

    fn request_layout(
        &mut self,
        _id: Option<&GlobalElementId>,
        _inspector_id: Option<&InspectorElementId>,
        window: &mut Window,
        cx: &mut App,
    ) -> (LayoutId, Self::RequestLayoutState) {
        let mut style = Style::default();
        style.refine(&self.style.inner);

        let layout_id = window.request_layout(style.clone(), [], cx);
        (layout_id, style)
    }

    fn prepaint(
        &mut self,
        _id: Option<&GlobalElementId>,
        _inspector_id: Option<&InspectorElementId>,
        _bounds: Bounds<Pixels>,
        _request_layout: &mut Style,
        _window: &mut Window,
        _cx: &mut App,
    ) -> Option<()> {
        None
    }

    fn paint(
        &mut self,
        _id: Option<&GlobalElementId>,
        _inspector_id: Option<&InspectorElementId>,
        bounds: Bounds<Pixels>,
        style: &mut Style,
        _prepaint: &mut Self::PrepaintState,
        window: &mut Window,
        cx: &mut App,
    ) {
        let style_refinement = &self.style;

        style.refine(&style_refinement.inner);

        style.paint(bounds, window, cx, |window, _cx| {
            match (style_refinement.background, style_refinement.border_color) {
                (Some(bg), None) => {
                    self.build_and_paint_paths(
                        window,
                        bounds,
                        0.,
                        0.,
                        [BuildAndPaintOptions::fill(bg)],
                    );
                }

                (Some(bg), Some(border_color)) => {
                    let border_width =
                        style_refinement.border_width.unwrap_or_default().to_f64() as f32;
                    let (size_offset, border_offset) =
                        self.get_size_and_border_offsets(border_width);

                    if size_offset == 0. {
                        // We can generate the same path for both the fill and the stroke.

                        self.build_and_paint_paths(
                            window,
                            bounds,
                            0.,
                            border_offset,
                            [
                                BuildAndPaintOptions::fill(bg),
                                BuildAndPaintOptions::stroke(border_color, border_width),
                            ],
                        );
                    } else {
                        // We need to generate differen't paths for the fill and
                        // stroke as they have different corner radius's and size's.

                        self.build_and_paint_paths(
                            window,
                            bounds,
                            0.,
                            0.,
                            [BuildAndPaintOptions::fill(bg)],
                        );

                        self.build_and_paint_paths(
                            window,
                            bounds,
                            size_offset,
                            border_offset,
                            [BuildAndPaintOptions::stroke(border_color, border_width)],
                        );
                    }
                }

                (None, None) => (),

                (None, Some(border_color)) => {
                    let border_width =
                        style_refinement.border_width.unwrap_or_default().to_f64() as f32;

                    let (size_offset, border_offset) =
                        self.get_size_and_border_offsets(border_width);

                    self.build_and_paint_paths(
                        window,
                        bounds,
                        size_offset,
                        border_offset,
                        [BuildAndPaintOptions::stroke(border_color, border_width)],
                    );
                }
            }
        });
    }
}

impl IntoElement for Squircle {
    type Element = Self;

    fn into_element(self) -> Self::Element {
        self
    }
}

impl InteractiveElement for Squircle {
    fn interactivity(&mut self) -> &mut Interactivity {
        &mut self.interactivity
    }
}

impl StatefulInteractiveElement for Squircle {}

pub fn squircle() -> Squircle {
    Squircle::new()
}