radix_leptos_primitives/components/

resizable.rs

use leptos::callback::Callback;
use leptos::children::Children;
use leptos::prelude::*;

/// Resizable component for resizable panels with constraints
#[component]
pub fn Resizable(
    /// Initial width
    #[prop(optional)]
    width: Option<f64>,
    /// Initial height
    #[prop(optional)]
    height: Option<f64>,
    /// Minimum width
    #[prop(optional)]
    min_width: Option<f64>,
    /// Minimum height
    #[prop(optional)]
    min_height: Option<f64>,
    /// Maximum width
    #[prop(optional)]
    max_width: Option<f64>,
    /// Maximum height
    #[prop(optional)]
    max_height: Option<f64>,
    /// Whether resizing is enabled
    #[prop(optional)]
    enabled: Option<bool>,
    /// Resize handles to show
    #[prop(optional)]
    handles: Option<Vec<ResizeHandle>>,
    /// Whether to maintain aspect ratio
    #[prop(optional)]
    maintain_aspect_ratio: Option<bool>,
    /// Aspect ratio to maintain
    #[prop(optional)]
    aspect_ratio: Option<f64>,
    /// Callback when resize starts
    #[prop(optional)]
    on_resize_start: Option<Callback<ResizeEvent>>,
    /// Callback during resize
    #[prop(optional)]
    on_resize: Option<Callback<ResizeEvent>>,
    /// Callback when resize ends
    #[prop(optional)]
    on_resize_end: Option<Callback<ResizeEvent>>,
    /// Additional CSS classes
    #[prop(optional)]
    class: Option<String>,
    /// Inline styles
    #[prop(optional)]
    style: Option<String>,
    /// Children content
    children: Option<Children>,
) -> impl IntoView {
    let width = width.unwrap_or(200.0);
    let height = height.unwrap_or(200.0);
    let min_width = min_width.unwrap_or(50.0);
    let min_height = min_height.unwrap_or(50.0);
    let max_width = max_width.unwrap_or(f64::INFINITY);
    let max_height = max_height.unwrap_or(f64::INFINITY);
    let enabled = enabled.unwrap_or(true);
    let handles = handles.unwrap_or_else(|| [ResizeHandle::BottomRight].to_vec());
    let maintain_aspect_ratio = maintain_aspect_ratio.unwrap_or(false);
    let aspect_ratio = aspect_ratio.unwrap_or(1.0);

    let class = format!(
        "resizable {} {} {} {} {} {} {}",
        width,
        height,
        min_width,
        min_height,
        max_width,
        max_height,
        style.as_ref().unwrap_or(&String::new())
    );

    let handle_resize_start = move |event: web_sys::MouseEvent| {
        if enabled {
            let resize_event = ResizeEvent {
                width,
                height,
                delta_x: 0.0,
                delta_y: 0.0,
                handle: ResizeHandle::BottomRight,
            };
            if let Some(callback) = on_resize_start {
                callback.run(resize_event);
            }
        }
    };

    let handle_resize = move |event: web_sys::MouseEvent| {
        if enabled {
            let resize_event = ResizeEvent {
                width: width + event.client_x() as f64,
                height: height + event.client_y() as f64,
                delta_x: event.client_x() as f64,
                delta_y: event.client_y() as f64,
                handle: ResizeHandle::BottomRight,
            };
            if let Some(callback) = on_resize {
                callback.run(resize_event);
            }
        }
    };

    let handle_resize_end = move |event: web_sys::MouseEvent| {
        if enabled {
            let resize_event = ResizeEvent {
                width: width + event.client_x() as f64,
                height: height + event.client_y() as f64,
                delta_x: event.client_x() as f64,
                delta_y: event.client_y() as f64,
                handle: ResizeHandle::BottomRight,
            };
            if let Some(callback) = on_resize_end {
                callback.run(resize_event);
            }
        }
    };

    view! {
        <div class=class style=style>
            {children.map(|c| c())}
            {if enabled {
                view! {
                    <div class="resize-handles">
                        {handles.into_iter().map(|handle| {
                            view! {
                                <ResizeHandle
                                    handle=handle
                                    on_resize_start=on_resize_start.unwrap_or_else(|| Callback::new(|_| {}))
                                    on_resize=on_resize.unwrap_or_else(|| Callback::new(|_| {}))
                                    on_resize_end=on_resize_end.unwrap_or_else(|| Callback::new(|_| {}))
                                />
                            }
                        }).collect::<Vec<_>>()}
                    </div>
                }.into_any()
            } else {
                view! { <div></div> }.into_any()
            }}
        </div>
    }
}

/// Resize handle component
#[component]
pub fn ResizeHandle(
    /// Handle type
    handle: ResizeHandle,
    /// Callback when resize starts
    #[prop(optional)]
    on_resize_start: Option<Callback<ResizeEvent>>,
    /// Callback during resize
    #[prop(optional)]
    on_resize: Option<Callback<ResizeEvent>>,
    /// Callback when resize ends
    #[prop(optional)]
    on_resize_end: Option<Callback<ResizeEvent>>,
    /// Additional CSS classes
    #[prop(optional)]
    class: Option<String>,
    /// Inline styles
    #[prop(optional)]
    style: Option<String>,
) -> impl IntoView {
    let class = format!(
        "resize-handle {} {}",
        match handle {
            ResizeHandle::Top => "top",
            ResizeHandle::Right => "right",
            ResizeHandle::Bottom => "bottom",
            ResizeHandle::Left => "left",
            ResizeHandle::TopLeft => "top-left",
            ResizeHandle::TopRight => "top-right",
            ResizeHandle::BottomLeft => "bottom-left",
            ResizeHandle::BottomRight => "bottom-right",
        },
        class.unwrap_or_default()
    );

    let style = style.unwrap_or_default();

    let handle_resize_start = move |event: web_sys::MouseEvent| {
        let resize_event = ResizeEvent {
            width: 0.0,
            height: 0.0,
            delta_x: event.client_x() as f64,
            delta_y: event.client_y() as f64,
            handle,
        };
        if let Some(callback) = on_resize_start {
            callback.run(resize_event);
        }
    };

    let handle_resize = move |event: web_sys::MouseEvent| {
        let resize_event = ResizeEvent {
            width: 0.0,
            height: 0.0,
            delta_x: event.client_x() as f64,
            delta_y: event.client_y() as f64,
            handle,
        };
        if let Some(callback) = on_resize {
            callback.run(resize_event);
        }
    };

    let handle_resize_end = move |event: web_sys::MouseEvent| {
        let resize_event = ResizeEvent {
            width: 0.0,
            height: 0.0,
            delta_x: event.client_x() as f64,
            delta_y: event.client_y() as f64,
            handle,
        };
        if let Some(callback) = on_resize_end {
            callback.run(resize_event);
        }
    };

    view! {
        <div
            class=class
            style=style
            on:mousedown=handle_resize_start
            on:mousemove=handle_resize
            on:mouseup=handle_resize_end
        />
    }
}

/// Resize handle types
#[derive(Debug, Clone, Copy, PartialEq, Default)]
pub enum ResizeHandle {
    #[default]
    BottomRight,
    Top,
    Right,
    Bottom,
    Left,
    TopLeft,
    TopRight,
    BottomLeft,
}

/// Resize event data
#[derive(Debug, Clone, PartialEq, Default)]
pub struct ResizeEvent {
    pub width: f64,
    pub height: f64,
    pub delta_x: f64,
    pub delta_y: f64,
    pub handle: ResizeHandle,
}

/// Resizable panel component
#[component]
pub fn ResizablePanel(
    /// Panel content
    #[prop(optional)]
    content: Option<String>,
    /// Panel title
    #[prop(optional)]
    title: Option<String>,
    /// Whether the panel is collapsible
    #[prop(optional)]
    collapsible: Option<bool>,
    /// Whether the panel is collapsed
    #[prop(optional)]
    collapsed: Option<bool>,
    /// Callback when panel is collapsed/expanded
    #[prop(optional)]
    on_toggle: Option<Callback<bool>>,
    /// Additional CSS classes
    #[prop(optional)]
    class: Option<String>,
    /// Inline styles
    #[prop(optional)]
    style: Option<String>,
    /// Children content
    children: Option<Children>,
) -> impl IntoView {
    let content = content.unwrap_or_default();
    let title = title.unwrap_or_default();
    let collapsible = collapsible.unwrap_or(false);
    let collapsed = collapsed.unwrap_or(false);

    let class = "resizable-panel".to_string();

    let style = style.unwrap_or_default();

    let handle_toggle = move |_| {
        if collapsible {
            if let Some(callback) = on_toggle {
                callback.run(!collapsed);
            }
        }
    };

    view! {
        <div class=class style=style>
            {if !title.is_empty() {
                view! {
                    <div class="panel-header">
                        <h3 class="panel-title">{title}</h3>
                        {if collapsible {
                            view! {
                                <button
                                    class="panel-toggle"
                                    type="button"
                                    on:click=handle_toggle
                                >
                                    {if collapsed {
                                        "Expand"
                                    } else {
                                        "Collapse"
                                    }}
                                </button>
                            }.into_any()
                        } else {
                            view! { <div></div> }.into_any()
                        }}
                    </div>
                }.into_any()
            } else {
                view! { <div></div> }.into_any()
            }}
            {if !collapsed {
                view! {
                    <div class="panel-content">
                        {if !content.is_empty() {
                            view! { <div class="panel-text">{content}</div> }.into_any()
                        } else {
                            view! { <div></div> }.into_any()
                        }}
                        {children.map(|c| c())}
                    </div>
                }.into_any()
            } else {
                view! { <div></div> }.into_any()
            }}
        </div>
    }
}

/// Resizable splitter component
#[component]
pub fn ResizableSplitter(
    /// Splitter orientation
    #[prop(optional)]
    orientation: Option<SplitterOrientation>,
    /// Splitter position (0.0 to 1.0)
    #[prop(optional)]
    position: Option<f64>,
    /// Minimum position
    #[prop(optional)]
    min_position: Option<f64>,
    /// Maximum position
    #[prop(optional)]
    max_position: Option<f64>,
    /// Callback when position changes
    #[prop(optional)]
    on_position_change: Option<Callback<f64>>,
    /// Additional CSS classes
    #[prop(optional)]
    class: Option<String>,
    /// Inline styles
    #[prop(optional)]
    style: Option<String>,
) -> impl IntoView {
    let orientation = orientation.unwrap_or_default();
    let position = position.unwrap_or(0.5);
    let min_position = min_position.unwrap_or(0.1);
    let max_position = max_position.unwrap_or(0.9);

    let class = format!(
        "resizable-splitter {} {}",
        match orientation {
            SplitterOrientation::Horizontal => "horizontal",
            SplitterOrientation::Vertical => "vertical",
        },
        class.unwrap_or_default()
    );

    let style = format!(
        "{}: {}%; {}",
        match orientation {
            SplitterOrientation::Horizontal => "top",
            SplitterOrientation::Vertical => "left",
        },
        position * 100.0,
        style.unwrap_or_default()
    );

    let handle_drag = move |event: web_sys::MouseEvent| {
        let new_position: f64 = match orientation {
            SplitterOrientation::Horizontal => {
                // Simplified calculation for horizontal splitter
                0.5
            }
            SplitterOrientation::Vertical => {
                // Simplified calculation for vertical splitter
                0.5
            }
        };

        let clamped_position = new_position.clamp(min_position, max_position);
        if let Some(callback) = on_position_change {
            callback.run(clamped_position);
        }
    };

    view! {
        <div
            class=class
            style=style
            on:mousedown=handle_drag
        />
    }
}

/// Splitter orientation
#[derive(Debug, Clone, Copy, PartialEq, Default)]
pub enum SplitterOrientation {
    #[default]
    Vertical,
    Horizontal,
}

#[cfg(test)]
mod tests {
    use crate::{ResizeEvent, ResizeHandle, SplitterOrientation};
use crate::utils::{merge_optional_classes, generate_id};

    // Component structure tests
    #[test]
    fn test_resizable_component_creation() {}

    #[test]
    fn test_resize_handle_component_creation() {}

    #[test]
    fn test_resizable_panel_component_creation() {}

    #[test]
    fn test_resizable_splitter_component_creation() {}

    // Data structure tests
    #[test]
    fn test_resize_handle_enum() {
        assert_eq!(ResizeHandle::BottomRight, ResizeHandle::default());
        assert_eq!(ResizeHandle::Top, ResizeHandle::Top);
        assert_eq!(ResizeHandle::Right, ResizeHandle::Right);
        assert_eq!(ResizeHandle::Bottom, ResizeHandle::Bottom);
        assert_eq!(ResizeHandle::Left, ResizeHandle::Left);
        assert_eq!(ResizeHandle::TopLeft, ResizeHandle::TopLeft);
        assert_eq!(ResizeHandle::TopRight, ResizeHandle::TopRight);
        assert_eq!(ResizeHandle::BottomLeft, ResizeHandle::BottomLeft);
    }

    #[test]
    fn test_resize_event_struct() {
        let event = ResizeEvent {
            width: 100.0,
            height: 200.0,
            delta_x: 10.0,
            delta_y: 20.0,
            handle: ResizeHandle::BottomRight,
        };
        assert_eq!(event.width, 100.0);
        assert_eq!(event.height, 200.0);
        assert_eq!(event.delta_x, 10.0);
        assert_eq!(event.delta_y, 20.0);
        assert_eq!(event.handle, ResizeHandle::BottomRight);
    }

    #[test]
    fn test_resize_event_default() {
        let event = ResizeEvent::default();
        assert_eq!(event.width, 0.0);
        assert_eq!(event.height, 0.0);
        assert_eq!(event.delta_x, 0.0);
        assert_eq!(event.delta_y, 0.0);
        assert_eq!(event.handle, ResizeHandle::BottomRight);
    }

    #[test]
    fn test_splitter_orientation_enum() {
        assert_eq!(
            SplitterOrientation::Vertical,
            SplitterOrientation::default()
        );
        assert_eq!(
            SplitterOrientation::Horizontal,
            SplitterOrientation::Horizontal
        );
        assert_eq!(SplitterOrientation::Vertical, SplitterOrientation::Vertical);
    }

    // Props and state tests
    #[test]
    fn test_resizable_props_handling() {}

    #[test]
    fn test_resizable_dimensions() {}

    #[test]
    fn test_resizable_constraints() {}

    #[test]
    fn test_resizable_enabled_state() {}

    #[test]
    fn test_resizable_handles() {}

    #[test]
    fn test_resizable_aspect_ratio() {}

    // Event handling tests
    #[test]
    fn test_resizable_resize_start() {}

    #[test]
    fn test_resizable_resize() {}

    #[test]
    fn test_resizable_resize_end() {}

    #[test]
    fn test_resize_handle_events() {}

    // Panel functionality tests
    #[test]
    fn test_resizable_panel_content() {}

    #[test]
    fn test_resizable_panel_title() {}

    #[test]
    fn test_resizable_panel_collapsible() {}

    #[test]
    fn test_resizable_panel_collapsed() {}

    #[test]
    fn test_resizable_panel_toggle() {}

    // Splitter functionality tests
    #[test]
    fn test_resizable_splitter_orientation() {}

    #[test]
    fn test_resizable_splitter_position() {}

    #[test]
    fn test_resizable_splitter_constraints() {}

    #[test]
    fn test_resizable_splitter_drag() {}

    // Constraint validation tests
    #[test]
    fn test_resizable_min_width_constraint() {}

    #[test]
    fn test_resizable_min_height_constraint() {}

    #[test]
    fn test_resizable_max_width_constraint() {}

    #[test]
    fn test_resizable_max_height_constraint() {}

    // Aspect ratio tests
    #[test]
    fn test_resizable_maintain_aspect_ratio() {}

    #[test]
    fn test_resizable_custom_aspect_ratio() {}

    // Handle positioning tests
    #[test]
    fn test_resize_handle_positioning() {}

    #[test]
    fn test_resize_handle_cursor_styles() {}

    // Accessibility tests
    #[test]
    fn test_resizable_accessibility() {}

    #[test]
    fn test_resizable_keyboard_navigation() {}

    #[test]
    fn test_resizable_screen_reader_support() {}

    // Performance tests
    #[test]
    fn test_resizable_performance() {}

    #[test]
    fn test_resizable_large_content() {}

    // Integration tests
    #[test]
    fn test_resizable_full_workflow() {}

    #[test]
    fn test_resizable_with_panel() {}

    #[test]
    fn test_resizable_with_splitter() {}

    // Edge case tests
    #[test]
    fn test_resizable_zero_dimensions() {}

    #[test]
    fn test_resizable_negative_dimensions() {}

    #[test]
    fn test_resizable_invalid_constraints() {}

    // Styling tests
    #[test]
    fn test_resizable_custom_classes() {}

    #[test]
    fn test_resizable_custom_styles() {}

    #[test]
    fn test_resizable_responsive_design() {}
}