Struct AnimationBlendBinding 

pub struct AnimationBlendBinding {
    pub input: String,
    pub from: String,
    pub to: String,
    pub min: f32,
    pub max: f32,
}

Fields

input: String

from: String

to: String

min: f32

max: f32

Implementations

impl AnimationBlendBinding

pub fn new( input: impl Into<String>, from: impl Into<String>, to: impl Into<String>, ) -> Self

Examples found in repository

examples/showcase.rs (line 8006)

fn animation_blend_machine(
    input: &'static str,
    value: f32,
    translate: UiPoint,
    start_scale: f32,
    end_scale: f32,
    end_opacity: f32,
) -> AnimationMachine {
    let start_values = AnimatedValues::new(0.45, UiPoint::new(0.0, 0.0), start_scale);
    let end_values = AnimatedValues::new(end_opacity, translate, end_scale).with_morph(1.0);
    AnimationMachine::new(
        vec![
            AnimationState::new("start", start_values),
            AnimationState::new("end", end_values),
        ],
        Vec::new(),
        "start",
    )
    .unwrap_or_else(|_| AnimationMachine::single_state("start", start_values))
    .with_number_input(input, value)
    .with_blend_binding(AnimationBlendBinding::new(input, "start", "end"))
}

fn animation_open_machine(open: bool) -> AnimationMachine {
    let closed_values = AnimatedValues::new(0.35, UiPoint::new(0.0, 0.0), 1.0);
    let open_values = AnimatedValues::new(1.0, UiPoint::new(0.0, 0.0), 1.0);
    let fallback_values = if open { open_values } else { closed_values };
    AnimationMachine::new(
        vec![
            AnimationState::new("closed", closed_values),
            AnimationState::new("open", open_values),
        ],
        vec![
            AnimationTransition::when(
                "closed",
                "open",
                AnimationCondition::bool(ANIMATION_INPUT_OPEN, true),
                0.18,
            ),
            AnimationTransition::when(
                "open",
                "closed",
                AnimationCondition::bool(ANIMATION_INPUT_OPEN, false),
                0.14,
            ),
        ],
        "closed",
    )
    .unwrap_or_else(|_| AnimationMachine::single_state("closed", fallback_values))
    .with_bool_input(ANIMATION_INPUT_OPEN, open)
}

fn animation_interaction_machine() -> AnimationMachine {
    let rest_values = AnimatedValues::new(0.72, UiPoint::new(0.0, 0.0), 1.0);
    let right_values = AnimatedValues::new(1.0, UiPoint::new(0.0, 0.0), 1.0).with_morph(1.0);
    AnimationMachine::new(
        vec![
            AnimationState::new("rest", rest_values),
            AnimationState::new("right", right_values),
        ],
        Vec::new(),
        "rest",
    )
    .unwrap_or_else(|_| AnimationMachine::single_state("rest", rest_values))
    .with_number_input(ANIMATION_INPUT_POINTER_NORM_X, 0.0)
    .with_blend_binding(AnimationBlendBinding::new(
        ANIMATION_INPUT_POINTER_NORM_X,
        "rest",
        "right",
    ))
}

fn animation_interaction_primitives(
    fill: ColorRgba,
    size: f32,
    offset: UiPoint,
) -> Vec<ScenePrimitive> {
    vec![
        ScenePrimitive::MorphPolygon {
            from_points: animation_square_points(size, offset),
            to_points: animation_pentagon_points(size, offset),
            amount: 0.0,
            fill,
            stroke: Some(StrokeStyle::new(color(236, 244, 255), 1.0)),
        },
        ScenePrimitive::Circle {
            center: UiPoint::new(offset.x + size * 0.34, offset.y + size * 0.30),
            radius: size * 0.10,
            fill: color(244, 248, 255),
            stroke: None,
        },
    ]
}

fn animation_orb_primitives(fill: ColorRgba, size: f32, offset: UiPoint) -> Vec<ScenePrimitive> {
    let center = size * 0.5;
    let radius = size * 0.44;
    vec![
        ScenePrimitive::Circle {
            center: UiPoint::new(offset.x + center, offset.y + center),
            radius,
            fill,
            stroke: Some(StrokeStyle::new(color(236, 244, 255), 1.0)),
        },
        ScenePrimitive::Circle {
            center: UiPoint::new(offset.x + size * 0.34, offset.y + size * 0.30),
            radius: size * 0.12,
            fill: color(244, 248, 255),
            stroke: None,
        },
    ]
}

fn animation_morph_shape_primitives(
    fill: ColorRgba,
    size: f32,
    offset: UiPoint,
    amount: f32,
) -> Vec<ScenePrimitive> {
    vec![ScenePrimitive::MorphPolygon {
        from_points: animation_square_points(size, offset),
        to_points: animation_pentagon_points(size, offset),
        amount,
        fill,
        stroke: Some(StrokeStyle::new(color(226, 246, 236), 1.0)),
    }]
}

fn animation_square_points(size: f32, offset: UiPoint) -> Vec<UiPoint> {
    let inset = size * 0.08;
    let left = offset.x + inset;
    let top = offset.y + inset;
    let right = offset.x + size - inset;
    let bottom = offset.y + size - inset;
    let center_x = offset.x + size * 0.5;
    vec![
        UiPoint::new(center_x, top),
        UiPoint::new(right, top),
        UiPoint::new(right, bottom),
        UiPoint::new(left, bottom),
        UiPoint::new(left, top),
    ]
}

fn animation_pentagon_points(size: f32, offset: UiPoint) -> Vec<UiPoint> {
    let center = size * 0.5;
    let radius = size * 0.46;
    (0..5)
        .map(|index| {
            let angle = -std::f32::consts::FRAC_PI_2 + index as f32 * std::f32::consts::TAU / 5.0;
            UiPoint::new(
                offset.x + center + angle.cos() * radius,
                offset.y + center + angle.sin() * radius,
            )
        })
        .collect()
}

fn animation_panel_primitives(offset: UiPoint) -> Vec<ScenePrimitive> {
    vec![ScenePrimitive::Rect(
        PaintRect::solid(
            UiRect::new(
                offset.x,
                offset.y,
                ANIMATION_PANEL_WIDTH,
                ANIMATION_PANEL_HEIGHT,
            ),
            color(232, 186, 88),
        )
        .stroke(AlignedStroke::inside(StrokeStyle::new(
            color(255, 226, 154),
            1.0,
        )))
        .corner_radii(CornerRadii::uniform(6.0)),
    )]
}

fn list_and_table_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section_with_min_viewport(
        ui,
        parent,
        "lists_tables",
        "Lists and tables",
        UiSize::new(520.0, 0.0),
    );

    let list_row = ui.add_child(
        body,
        UiNode::container(
            "lists_tables.list_row",
            Layout::row()
                .size(LayoutSize::new(
                    LayoutDimension::percent(1.0),
                    LayoutDimension::Auto,
                ))
                .gap(LayoutGap::points(10.0, 10.0))
                .flex_wrap(LayoutFlexWrap::Wrap)
                .to_layout_style(),
        ),
    );
    let scroll_column = ui.add_child(
        list_row,
        UiNode::container(
            "lists_tables.scroll_area.column",
            Layout::column()
                .min_size(LayoutSize::points(220.0, 0.0))
                .gap(LayoutGap::points(6.0, 6.0))
                .flex(1.0, 1.0, LayoutDimension::points(245.0))
                .to_layout_style(),
        ),
    );
    widgets::label(
        ui,
        scroll_column,
        "lists_tables.scroll_area.title",
        "Scrollable list",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let nested_scroll = widgets::scroll_area(
        ui,
        scroll_column,
        "lists_tables.scroll_area",
        ScrollAxes::VERTICAL,
        LayoutStyle::column()
            .with_width_percent(1.0)
            .with_height(104.0),
    );
    ui.node_mut(nested_scroll)
        .set_action("lists_tables.scroll_area.scroll");
    if let Some(scroll) = ui.node_mut(nested_scroll).scroll_mut() {
        scroll.set_offset(UiPoint::new(0.0, state.list_scroll));
    }
    for index in 0..6 {
        widgets::label(
            ui,
            nested_scroll,
            format!("lists_tables.scroll_area.row.{index}"),
            format!("Scroll row {}", index + 1),
            text(12.0, color(200, 212, 228)),
            LayoutStyle::new()
                .with_width_percent(1.0)
                .with_height(26.0)
                .with_flex_shrink(0.0),
        );
    }

    let virtual_list_column = ui.add_child(
        list_row,
        UiNode::container(
            "lists_tables.virtual_list.column",
            Layout::column()
                .min_size(LayoutSize::points(220.0, 0.0))
                .gap(LayoutGap::points(6.0, 6.0))
                .flex(1.0, 1.0, LayoutDimension::points(245.0))
                .to_layout_style(),
        ),
    );

    widgets::label(
        ui,
        virtual_list_column,
        "lists_tables.virtual_list.title",
        "Virtualized list",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let virtual_list = widgets::virtual_list(
        ui,
        virtual_list_column,
        "lists_tables.virtual_list",
        widgets::VirtualListSpec {
            row_count: 24,
            row_height: 28.0,
            viewport_height: 104.0,
            scroll_offset: state.virtual_scroll,
            overscan: 1,
        },
        |ui, row_parent, row| {
            widgets::label(
                ui,
                row_parent,
                format!("lists_tables.virtual_list.row.{row}"),
                format!("Virtual row {}", row + 1),
                text(12.0, color(214, 224, 238)),
                LayoutStyle::new()
                    .with_width_percent(1.0)
                    .with_height(28.0)
                    .with_flex_shrink(0.0),
            );
        },
    );
    ui.node_mut(virtual_list)
        .set_action("lists_tables.virtual_list.scroll");

    widgets::separator(
        ui,
        body,
        "lists_tables.virtualized_table.separator",
        widgets::SeparatorOptions::default(),
    );
    widgets::label(
        ui,
        body,
        "lists_tables.data_table.title",
        "Virtualized selectable table",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let virtual_controls = wrapping_row(ui, body, "lists_tables.virtualized_table.controls", 8.0);
    button(
        ui,
        virtual_controls,
        "lists_tables.virtualized_table.sort.name",
        if state.virtual_table_descending {
            "Name desc"
        } else {
            "Name asc"
        },
        "lists_tables.virtualized_table.sort.name",
        button_visual(38, 52, 70),
    );
    button(
        ui,
        virtual_controls,
        "lists_tables.virtualized_table.filter.status",
        if state.virtual_table_ready_only {
            "Ready only"
        } else {
            "All status"
        },
        "lists_tables.virtualized_table.filter.status",
        button_visual(38, 52, 70),
    );
    button(
        ui,
        virtual_controls,
        "lists_tables.virtualized_table.resize.reset",
        "Reset width",
        "lists_tables.virtualized_table.resize.reset",
        button_visual(38, 52, 70),
    );

    let columns = virtual_table_columns(state);
    let visible_rows = virtual_table_visible_rows(state);
    let mut table_options = ext_widgets::DataTableOptions::default()
        .with_row_action_prefix("lists_tables.virtualized_table")
        .with_cell_action_prefix("lists_tables.virtualized_table")
        .with_scroll_action("lists_tables.virtualized_table.scroll");
    table_options.layout = LayoutStyle::column()
        .with_width_percent(1.0)
        .with_flex_shrink(0.0);
    table_options.header_visual = UiVisual::panel(
        color(34, 41, 50),
        Some(StrokeStyle::new(color(67, 78, 95), 1.0)),
        0.0,
    );
    table_options.header_text_style = text(12.0, color(222, 230, 240));
    table_options.selection = state.table_selection.clone();
    ext_widgets::virtualized_data_table(
        ui,
        body,
        "lists_tables.virtualized_table",
        &columns,
        ext_widgets::VirtualDataTableSpec {
            row_count: visible_rows.len(),
            row_height: 28.0,
            viewport_width: 520.0,
            viewport_height: 156.0,
            scroll_offset: UiPoint::new(0.0, state.virtual_table_scroll),
            overscan_rows: 1,
        },
        table_options,
        |ui, cell_parent, cell| {
            let source_row = visible_rows.get(cell.row).copied().unwrap_or(cell.row);
            let value = virtual_table_cell_value(source_row, cell.column);
            widgets::label(
                ui,
                cell_parent,
                format!(
                    "lists_tables.virtualized_table.cell.{}.{}.label",
                    cell.row, cell.column
                ),
                value,
                text(12.0, color(220, 228, 238)),
                LayoutStyle::new().with_width_percent(1.0),
            );
        },
    );
}

#[allow(clippy::field_reassign_with_default)]
fn property_inspector(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section(ui, parent, "property_inspector", "Property inspector");
    widgets::label(
        ui,
        body,
        "property_inspector.target",
        "Inspecting: Styling preview",
        text(12.0, color(196, 210, 230)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let mut options = ext_widgets::PropertyInspectorOptions::default();
    options.selected_index = Some(0);
    options.label_width = 120.0;
    options.row_height = 30.0;
    ext_widgets::property_inspector_grid(
        ui,
        body,
        "property_inspector.grid",
        &[
            ext_widgets::PropertyGridRow::new("target", "Widget", "Button preview").read_only(),
            ext_widgets::PropertyGridRow::new(
                "inner",
                "Inner margin",
                format!("{:.0}px", state.styling.inner_margin),
            )
            .with_kind(ext_widgets::PropertyValueKind::Number),
            ext_widgets::PropertyGridRow::new(
                "outer",
                "Outer margin",
                format!("{:.0}px", state.styling.outer_margin),
            )
            .with_kind(ext_widgets::PropertyValueKind::Number),
            ext_widgets::PropertyGridRow::new(
                "radius",
                "Corner radius",
                format!("{:.0}px", state.styling.corner_radius),
            )
            .with_kind(ext_widgets::PropertyValueKind::Number),
            ext_widgets::PropertyGridRow::new(
                "stroke",
                "Stroke",
                format!("{:.1}px", state.styling.stroke_width),
            )
            .with_kind(ext_widgets::PropertyValueKind::Number)
            .changed(),
            ext_widgets::PropertyGridRow::new("state", "Source", "Styling widget").read_only(),
        ],
        options,
    );
}

fn diagnostics_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section(ui, parent, "diagnostics", "Diagnostics");
    let debug_snapshot = &state.diagnostics_snapshot;

    diagnostics_selected_node_panel(ui, body, debug_snapshot);
    diagnostics_animation_panel(ui, body, state, debug_snapshot);

    widgets::label(
        ui,
        body,
        "diagnostics.a11y.title",
        "Accessibility",
        text(14.0, color(222, 230, 240)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let mut overlay_preview_style = UiNodeStyle::from(
        LayoutStyle::new()
            .with_width(320.0)
            .with_height(140.0)
            .with_flex_shrink(0.0),
    );
    overlay_preview_style.set_clip(ClipBehavior::Clip);
    let overlay_preview = ui.add_child(
        body,
        UiNode::container("diagnostics.a11y.preview", overlay_preview_style).with_visual(
            UiVisual::panel(
                color(12, 17, 24),
                Some(StrokeStyle::new(color(47, 62, 82), 1.0)),
                4.0,
            ),
        ),
    );
    let mut overlay_options = ext_widgets::AccessibilityDebugOverlayOptions {
        action_prefix: Some("diagnostics.a11y.visual".to_owned()),
        ..Default::default()
    };
    overlay_options.show_labels = false;
    ext_widgets::accessibility_debug_overlay(
        ui,
        overlay_preview,
        "diagnostics.a11y.visual",
        &debug_snapshot,
        overlay_options,
    );
    diagnostics_accessibility_details(ui, body, debug_snapshot);

    let diagnostic_columns = ui.add_child(
        body,
        UiNode::container(
            "diagnostics.columns",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_flex_shrink(0.0)
                .gap(10.0),
        ),
    );
    let command_column = ui.add_child(
        diagnostic_columns,
        UiNode::container(
            "diagnostics.commands.column",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_flex_shrink(0.0)
                .gap(8.0),
        ),
    );
    let theme_column = ui.add_child(
        diagnostic_columns,
        UiNode::container(
            "diagnostics.theme.column",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_flex_shrink(0.0)
                .gap(8.0),
        ),
    );

    let registry = diagnostics_command_registry();
    diagnostics_commands_panel(ui, command_column, &registry);

    let theme_snapshot = DebugThemeSnapshot::from_theme(&Theme::dark());
    diagnostics_theme_panel(ui, theme_column, &theme_snapshot);
}

fn diagnostics_selected_node_panel(
    ui: &mut UiDocument,
    parent: UiNodeId,
    snapshot: &DebugInspectorSnapshot,
) {
    let panel = diagnostics_panel(ui, parent, "diagnostics.inspector", "Selected node");
    let rows = snapshot
        .node("diagnostics.sample.preview")
        .map(|node| {
            vec![
                ext_widgets::PropertyGridRow::new("name", "Node", "Preview action").read_only(),
                ext_widgets::PropertyGridRow::new("role", "Role", "Button").read_only(),
                ext_widgets::PropertyGridRow::new(
                    "bounds",
                    "Bounds",
                    format!(
                        "{:.0}, {:.0}; {:.0} x {:.0}",
                        node.rect.x, node.rect.y, node.rect.width, node.rect.height
                    ),
                )
                .with_kind(ext_widgets::PropertyValueKind::Number)
                .read_only(),
                ext_widgets::PropertyGridRow::new(
                    "clip",
                    "Clip",
                    format!("{:.0} x {:.0}", node.clip_rect.width, node.clip_rect.height),
                )
                .with_kind(ext_widgets::PropertyValueKind::Number)
                .read_only(),
                ext_widgets::PropertyGridRow::new(
                    "input",
                    "Input",
                    if node.input.pointer {
                        "Receives pointer input"
                    } else {
                        "Passive"
                    },
                )
                .read_only(),
            ]
        })
        .unwrap_or_else(|| {
            vec![
                ext_widgets::PropertyGridRow::new("missing", "Selected node", "No node selected")
                    .read_only(),
            ]
        });
    ext_widgets::property_inspector_grid(
        ui,
        panel,
        "diagnostics.inspector.rows",
        &rows,
        diagnostics_grid_options("Selected node details"),
    );
}

fn diagnostics_animation_panel(
    ui: &mut UiDocument,
    parent: UiNodeId,
    state: &ShowcaseState,
    snapshot: &DebugInspectorSnapshot,
) {
    let graph_panel =
        diagnostics_panel(ui, parent, "diagnostics.animation.graph", "Animation state");
    if let Some(animation) = snapshot.animation("diagnostics.sample.preview") {
        let state_row = row(ui, graph_panel, "diagnostics.animation.graph.states", 8.0);
        for state_name in ["idle", "hot"] {
            diagnostic_chip(
                ui,
                state_row,
                format!("diagnostics.animation.graph.state.{state_name}"),
                state_name,
                animation.current_state == state_name,
            );
        }

        let graph = animation.state_graph();
        for (index, edge) in graph.edges.iter().take(2).enumerate() {
            let value = if edge.kind == DebugAnimationGraphEdgeKind::Blend {
                "Input blend"
            } else {
                "State change"
            };
            let detail = if edge.label.is_empty() {
                if edge.active { "Active" } else { "Inactive" }.to_owned()
            } else if edge.active {
                format!("{}; active", edge.label)
            } else {
                edge.label.clone()
            };
            diagnostic_value_row(
                ui,
                graph_panel,
                format!("diagnostics.animation.graph.edge.{index}"),
                value,
                format!("{} -> {}", edge.from, edge.to),
            );
            diagnostic_muted_label(
                ui,
                graph_panel,
                format!("diagnostics.animation.graph.edge.{index}.detail"),
                detail,
            );
        }
    } else {
        diagnostic_muted_label(
            ui,
            graph_panel,
            "diagnostics.animation.graph.empty",
            "No animation state machine",
        );
    }

    let controls_panel = diagnostics_panel(
        ui,
        parent,
        "diagnostics.animation.controls",
        "Animation controls",
    );
    let transport = row(
        ui,
        controls_panel,
        "diagnostics.animation.controls.transport",
        8.0,
    );
    diagnostic_button(
        ui,
        transport,
        "diagnostics.animation.controls.transport.pause_toggle",
        if state.diagnostics_animation_paused {
            "Resume"
        } else {
            "Pause"
        },
        state.diagnostics_animation_paused,
    );
    diagnostic_button(
        ui,
        transport,
        "diagnostics.animation.controls.transport.step",
        "Step",
        false,
    );
    diagnostic_slider_row(
        ui,
        controls_panel,
        "diagnostics.animation.controls.transport.scrub",
        "Scrub progress",
        state.diagnostics_animation_scrub,
        "diagnostics.animation.controls.transport.scrub",
    );
    diagnostic_button(
        ui,
        controls_panel,
        "diagnostics.animation.controls.input.active.toggle",
        if state.diagnostics_animation_active {
            "Active input: true"
        } else {
            "Active input: false"
        },
        state.diagnostics_animation_active,
    );
    diagnostic_slider_row(
        ui,
        controls_panel,
        "diagnostics.animation.controls.input.hover.set",
        "Hover blend",
        state.diagnostics_animation_hover,
        "diagnostics.animation.controls.input.hover.set",
    );
    diagnostic_button(
        ui,
        controls_panel,
        "diagnostics.animation.controls.input.pulse.fire",
        "Fire pulse",
        false,
    );
    widgets::label(
        ui,
        controls_panel,
        "diagnostics.animation.controls.status",
        format!(
            "Scrub {:.0}%   Hover {:.0}%   Pulses {}",
            state.diagnostics_animation_scrub * 100.0,
            state.diagnostics_animation_hover * 100.0,
            state.diagnostics_animation_pulse_count
        ),
        text(12.0, color(166, 180, 198)),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn diagnostics_accessibility_details(
    ui: &mut UiDocument,
    parent: UiNodeId,
    snapshot: &DebugInspectorSnapshot,
) {
    let rows = snapshot
        .accessibility_overlay
        .iter()
        .find(|node| node.name == "diagnostics.sample.preview")
        .map(|node| {
            let accessibility = node.accessibility.as_ref();
            vec![
                ext_widgets::PropertyGridRow::new("role", "Role", "Button").read_only(),
                ext_widgets::PropertyGridRow::new(
                    "label",
                    "Label",
                    accessibility
                        .and_then(|meta| meta.label.clone())
                        .unwrap_or_else(|| "Preview action".to_owned()),
                )
                .read_only(),
                ext_widgets::PropertyGridRow::new(
                    "focus",
                    "Focus order",
                    node.focus_index
                        .map(|index| format!("#{}", index + 1))
                        .unwrap_or_else(|| "Not focusable".to_owned()),
                )
                .read_only(),
                ext_widgets::PropertyGridRow::new(
                    "warnings",
                    "Warnings",
                    if node.warnings.is_empty() {
                        "None"
                    } else {
                        "Needs review"
                    },
                )
                .read_only(),
            ]
        })
        .unwrap_or_else(|| {
            vec![
                ext_widgets::PropertyGridRow::new("missing", "Accessibility", "No metadata")
                    .read_only(),
            ]
        });
    ext_widgets::property_inspector_grid(
        ui,
        parent,
        "diagnostics.a11y",
        &rows,
        diagnostics_grid_options("Accessibility metadata"),
    );
}

fn diagnostics_commands_panel(ui: &mut UiDocument, parent: UiNodeId, registry: &CommandRegistry) {
    let panel = diagnostics_panel(ui, parent, "diagnostics.commands", "Commands");
    let formatter = ShortcutFormatter::default();
    for command_id in [
        "diagnostics.palette",
        "diagnostics.inspect",
        "diagnostics.record",
        "diagnostics.export_theme",
    ] {
        if let Some(command) = registry.command(command_id) {
            let shortcut = registry
                .command_bindings(command.meta.id.clone())
                .first()
                .map(|binding| formatter.format(binding.shortcut))
                .unwrap_or_else(|| "Unbound".to_owned());
            let status = if command.enabled {
                command
                    .meta
                    .category
                    .clone()
                    .unwrap_or_else(|| "General".to_owned())
            } else {
                command
                    .disabled_reason
                    .clone()
                    .unwrap_or_else(|| "Disabled".to_owned())
            };
            diagnostic_command_row(
                ui,
                panel,
                format!(
                    "diagnostics.commands.row.{}",
                    command.meta.id.as_str().replace('.', "_")
                ),
                &command.meta.label,
                &shortcut,
                &status,
            );
        }
    }
    diagnostic_value_row(
        ui,
        panel,
        "diagnostics.commands.conflicts",
        "Shortcut conflicts",
        if registry.conflicts().is_empty() {
            "None"
        } else {
            "Needs review"
        },
    );
}

fn diagnostics_theme_panel(ui: &mut UiDocument, parent: UiNodeId, snapshot: &DebugThemeSnapshot) {
    let panel = diagnostics_panel(ui, parent, "diagnostics.theme", "Theme tokens");
    diagnostic_value_row(
        ui,
        panel,
        "diagnostics.theme.name",
        "Theme",
        snapshot.name.as_str(),
    );
    for token_path in ["colors.accent", "colors.surface", "typography.body"] {
        if let Some(token) = snapshot.token(token_path) {
            diagnostic_value_row(
                ui,
                panel,
                format!("diagnostics.theme.token.{}", token_path.replace('.', "_")),
                token_path,
                token.value.as_str(),
            );
        }
    }
    if let Some(component) = snapshot.component_states.first() {
        diagnostic_value_row(
            ui,
            panel,
            "diagnostics.theme.component.button",
            "Button normal",
            format!(
                "{:.0} x {:.0}, padding {:.0}",
                component.min_width, component.min_height, component.padding_x
            ),
        );
    }
}

fn diagnostics_panel(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    title: impl Into<String>,
) -> UiNodeId {
    let name = name.into();
    let title = title.into();
    let panel = ui.add_child(
        parent,
        UiNode::container(
            name.clone(),
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_padding(10.0)
                .with_gap(8.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(15, 20, 28),
            Some(StrokeStyle::new(color(52, 65, 84), 1.0)),
            4.0,
        ))
        .with_accessibility(AccessibilityMeta::new(AccessibilityRole::Group).label(title.clone())),
    );
    widgets::label(
        ui,
        panel,
        format!("{name}.title"),
        title,
        text(13.0, color(222, 230, 240)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    panel
}

fn diagnostics_grid_options(label: impl Into<String>) -> ext_widgets::PropertyInspectorOptions {
    ext_widgets::PropertyInspectorOptions {
        label_width: 112.0,
        row_height: 28.0,
        accessibility_label: Some(label.into()),
        ..Default::default()
    }
}

fn diagnostic_value_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: impl Into<String>,
    value: impl Into<String>,
) -> UiNodeId {
    let name = name.into();
    let row = row(ui, parent, name.clone(), 8.0);
    widgets::label(
        ui,
        row,
        format!("{name}.label"),
        label.into(),
        text(12.0, color(166, 180, 198)),
        LayoutStyle::new().with_width(136.0).with_flex_shrink(0.0),
    );
    widgets::label(
        ui,
        row,
        format!("{name}.value"),
        value.into(),
        text(12.0, color(226, 234, 244)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    row
}

fn diagnostic_muted_label(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: impl Into<String>,
) -> UiNodeId {
    let mut style = text(12.0, color(166, 180, 198));
    style.wrap = TextWrap::WordOrGlyph;
    widgets::label(
        ui,
        parent,
        name,
        label.into(),
        style,
        LayoutStyle::new().with_width_percent(1.0),
    )
}

fn diagnostic_command_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: &str,
    shortcut: &str,
    status: &str,
) -> UiNodeId {
    let name = name.into();
    let row = row(ui, parent, name.clone(), 8.0);
    widgets::label(
        ui,
        row,
        format!("{name}.label"),
        label,
        text(12.0, color(226, 234, 244)),
        LayoutStyle::new()
            .with_width_percent(1.0)
            .with_flex_grow(1.0),
    );
    widgets::label(
        ui,
        row,
        format!("{name}.shortcut"),
        shortcut,
        text(12.0, color(166, 180, 198)),
        LayoutStyle::new().with_width(78.0).with_flex_shrink(0.0),
    );
    widgets::label(
        ui,
        row,
        format!("{name}.status"),
        status,
        text(12.0, color(166, 180, 198)),
        LayoutStyle::new().with_width(140.0).with_flex_shrink(0.0),
    );
    row
}

fn diagnostic_slider_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: impl Into<String>,
    value: f32,
    action: impl Into<String>,
) -> UiNodeId {
    let name = name.into();
    let label = label.into();
    let row = row(ui, parent, format!("{name}.row"), 8.0);
    widgets::label(
        ui,
        row,
        format!("{name}.label"),
        label.clone(),
        text(12.0, color(166, 180, 198)),
        LayoutStyle::new().with_width(136.0).with_flex_shrink(0.0),
    );
    let slider_name = if name.ends_with(".set") {
        format!("{name}.slider")
    } else {
        name.clone()
    };
    let mut options = widgets::SliderOptions::default()
        .with_layout(LayoutStyle::new().with_width(160.0).with_height(24.0))
        .with_value_edit_action(action.into());
    options.accessibility_label = Some(label);
    widgets::slider(ui, row, slider_name, value, 0.0..1.0, options);
    widgets::label(
        ui,
        row,
        format!("{name}.percent"),
        format!("{:.0}%", value * 100.0),
        text(12.0, color(226, 234, 244)),
        LayoutStyle::new().with_width(46.0).with_flex_shrink(0.0),
    );
    row
}

fn diagnostic_button(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: impl Into<String>,
    active: bool,
) -> UiNodeId {
    let name = name.into();
    let mut options = widgets::ButtonOptions::default()
        .with_layout(LayoutStyle::new().with_height(32.0))
        .with_action(name.clone())
        .pressed(active);
    if active {
        options.visual = UiVisual::panel(
            color(47, 94, 150),
            Some(StrokeStyle::new(color(103, 164, 224), 1.0)),
            4.0,
        );
    }
    widgets::button(ui, parent, name, label, options)
}

fn diagnostic_chip(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: impl Into<String>,
    active: bool,
) -> UiNodeId {
    let name = name.into();
    let chip = ui.add_child(
        parent,
        UiNode::container(
            name.clone(),
            LayoutStyle::new()
                .with_width(82.0)
                .with_height(28.0)
                .with_padding(4.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(if active {
            UiVisual::panel(
                color(47, 94, 150),
                Some(StrokeStyle::new(color(103, 164, 224), 1.0)),
                4.0,
            )
        } else {
            UiVisual::panel(
                color(31, 39, 50),
                Some(StrokeStyle::new(color(62, 76, 96), 1.0)),
                4.0,
            )
        }),
    );
    widgets::label(
        ui,
        chip,
        format!("{name}.label"),
        label.into(),
        text(12.0, color(226, 234, 244)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    chip
}

fn diagnostics_sample_snapshot(state: &ShowcaseState) -> DebugInspectorSnapshot {
    diagnostics_sample_snapshot_for(
        state.diagnostics_animation_hover,
        state.diagnostics_animation_active,
    )
}

fn diagnostics_sample_snapshot_for(hover: f32, active: bool) -> DebugInspectorSnapshot {
    let mut sample = UiDocument::new(root_style(320.0, 180.0));
    let card = sample.add_child(
        sample.root(),
        UiNode::container(
            "diagnostics.sample.card",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height(120.0)
                .padding(12.0)
                .gap(8.0),
        )
        .with_visual(UiVisual::panel(
            color(16, 22, 30),
            Some(StrokeStyle::new(color(62, 77, 98), 1.0)),
            6.0,
        ))
        .with_accessibility(
            AccessibilityMeta::new(AccessibilityRole::Group).label("Diagnostics sample"),
        ),
    );
    sample.add_child(
        card,
        UiNode::container(
            "diagnostics.sample.preview",
            LayoutStyle::new().with_width(160.0).with_height(38.0),
        )
        .with_input(InputBehavior::BUTTON)
        .with_visual(UiVisual::panel(
            color(52, 112, 180),
            Some(StrokeStyle::new(color(116, 183, 255), 1.0)),
            5.0,
        ))
        .with_accessibility(
            AccessibilityMeta::new(AccessibilityRole::Button)
                .label("Preview action")
                .focusable(),
        )
        .with_animation(
            AnimationMachine::new(
                vec![
                    AnimationState::new(
                        "idle",
                        AnimatedValues::new(1.0, UiPoint::new(0.0, 0.0), 1.0),
                    ),
                    AnimationState::new(
                        "hot",
                        AnimatedValues::new(0.92, UiPoint::new(18.0, 0.0), 1.08),
                    ),
                ],
                vec![AnimationTransition::when(
                    "idle",
                    "hot",
                    AnimationCondition::bool("active", true),
                    0.18,
                )],
                "idle",
            )
            .expect("sample animation")
            .with_number_input("hover", hover)
            .with_blend_binding(AnimationBlendBinding::new("hover", "idle", "hot"))
            .with_bool_input("active", active)
            .with_trigger_input("pulse"),
        ),
    );
    widgets::label(
        &mut sample,
        card,
        "diagnostics.sample.label",
        "Sample node",
        text(12.0, color(198, 210, 226)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    sample
        .compute_layout(UiSize::new(320.0, 180.0), &mut ApproxTextMeasurer)
        .expect("sample layout");
    DebugInspectorSnapshot::from_document(&sample, &mut ApproxTextMeasurer)
}

examples/animation_state_machine.rs (line 155)

fn shape_machine(open: bool) -> AnimationMachine {
    let closed = AnimatedValues::new(0.82, UiPoint::new(0.0, 0.0), 1.0).with_morph(0.0);
    let open_values = AnimatedValues::new(1.0, UiPoint::new(160.0, 0.0), 1.08).with_morph(1.0);
    AnimationMachine::new(
        vec![
            AnimationState::new("closed", closed),
            AnimationState::new("open", open_values),
        ],
        vec![
            AnimationTransition::when(
                "closed",
                "open",
                AnimationCondition::bool(INPUT_OPEN, true),
                0.24,
            ),
            AnimationTransition::when(
                "open",
                "closed",
                AnimationCondition::bool(INPUT_OPEN, false),
                0.18,
            ),
        ],
        "closed",
    )
    .unwrap_or_else(|_| AnimationMachine::single_state("closed", closed))
    .with_bool_input(INPUT_OPEN, open)
    .with_number_input(INPUT_MORPH, if open { 1.0 } else { 0.0 })
    .with_blend_binding(AnimationBlendBinding::new(INPUT_MORPH, "closed", "open"))
}

pub fn with_range(self, min: f32, max: f32) -> Self

Trait Implementations

impl Clone for AnimationBlendBinding

fn clone(&self) -> AnimationBlendBinding

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl Debug for AnimationBlendBinding

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl PartialEq for AnimationBlendBinding

fn eq(&self, other: &AnimationBlendBinding) -> bool

Tests for self and other values to be equal, and is used by ==.

fn ne(&self, other: &Rhs) -> bool

Tests for !=. The default implementation is almost always sufficient, and should not be overridden without very good reason.

impl StructuralPartialEq for AnimationBlendBinding