Canvas · Panels: layers, inspector, alignment, assets, style and layout editors

LayerPanel lists the canvas's layers topmost first on lists::Tree: a box
shows or hides each, F2 renames, a drag restacks into a new paint order.
InspectorPanel edits the one selected shape's frame, fill, visibility and
lock. AlignmentToolbar lines up or spreads the selection through
`aligned`. AssetPanel finds shapes by name in a picks grid, each drawn
to fit its tile. ColorPanel, ShadowEditor, BorderEditor and
TypographyPanel edit a look; GradientPanel is forms::GradientEditor.
ConstraintsEditor pins a shape to its frame, with `Constraints::placed`;
AutoLayoutControls sets flow, gap, padding and a place grid, with
`AutoLayout::laid`; ExportPanel names each file once. The panels share
`canvas::panel`: editing, pair, caption, heading and color_well.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/canvas/typography.rs

@@ -0,0 +1,186 @@
+use std::rc::Rc;
+
+use gpui::{
+    App, ElementId, Entity, FontWeight, IntoElement, ParentElement, Pixels, RenderOnce,
+    SharedString, Styled, TextAlign, Window, div, prelude::*, relative,
+};
+
+use super::panel::{OnEdit, editing, pair};
+use crate::{
+    buttons::SegmentedControl,
+    forms::{Choice, FontPicker, ScrubInput, Select, TextInput},
+    primitives::IconName,
+    theme::{ActiveTheme, Radius},
+};
+
+/// How text is set: its family and weight, its size in pixels, its line height as a share of the size, its tracking in pixels, and its alignment.
+#[derive(Clone, Debug, PartialEq)]
+pub struct TypeStyle {
+    pub family: SharedString,
+    pub weight: FontWeight,
+    pub size: f32,
+    pub line_height: f32,
+    pub tracking: f32,
+    pub align: TextAlign,
+}
+
+const WEIGHTS: [(f32, &str); 9] = [
+    (100.0, "Thin"),
+    (200.0, "Extra light"),
+    (300.0, "Light"),
+    (400.0, "Regular"),
+    (500.0, "Medium"),
+    (600.0, "Semibold"),
+    (700.0, "Bold"),
+    (800.0, "Extra bold"),
+    (900.0, "Black"),
+];
+
+const ALIGNS: [(TextAlign, &str, IconName); 3] = [
+    (TextAlign::Left, "Left", IconName::AlignLeft),
+    (TextAlign::Center, "Center", IconName::AlignCenter),
+    (TextAlign::Right, "Right", IconName::AlignRight),
+];
+
+/// A text style's family, weight, size, line height, tracking and alignment, over a line set in it. The line shows all but the tracking, which gpui does not set.
+#[derive(IntoElement)]
+pub struct TypographyPanel {
+    id: ElementId,
+    style: TypeStyle,
+    search: Entity<TextInput>,
+    on_change: Option<OnEdit<TypeStyle>>,
+}
+
+impl TypographyPanel {
+    /// `search` is the family field's text, which the owner keeps.
+    pub fn new(id: impl Into<ElementId>, style: TypeStyle, search: &Entity<TextInput>) -> Self {
+        Self {
+            id: id.into(),
+            style,
+            search: search.clone(),
+            on_change: None,
+        }
+    }
+
+    pub fn on_change(
+        mut self,
+        handler: impl Fn(TypeStyle, &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.on_change = Some(Rc::new(handler));
+        self
+    }
+}
+
+impl RenderOnce for TypographyPanel {
+    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
+        let (id, style, on_change) = (self.id, self.style, &self.on_change);
+        let theme = cx.theme();
+        let family = editing(
+            "typography panel",
+            &style,
+            on_change,
+            |style, family: SharedString| style.family = family,
+        );
+        let weight = editing(
+            "typography panel",
+            &style,
+            on_change,
+            |style, weight: f32| style.weight = FontWeight(weight),
+        );
+        let align = editing(
+            "typography panel",
+            &style,
+            on_change,
+            |style, align: TextAlign| style.align = align,
+        );
+        let at =
+            |edit: fn(&mut TypeStyle, f64)| editing("typography panel", &style, on_change, edit);
+        let scrub = |name: &'static str, value: f32| {
+            ScrubInput::new((id.clone(), name), name, value as f64)
+        };
+        let named = WEIGHTS
+            .iter()
+            .find(|(weight, _)| *weight == style.weight.0)
+            .unwrap_or_else(|| panic!("typography panel: no weight {}", style.weight.0));
+        let (_, word, _) = ALIGNS
+            .iter()
+            .find(|(align, _, _)| *align == style.align)
+            .expect("every alignment is offered");
+        let sample = div()
+            .p_3()
+            .rounded(theme.radius(Radius::Md))
+            .border_1()
+            .border_color(theme.colors.border)
+            .overflow_hidden()
+            .font_family(style.family.clone())
+            .font_weight(style.weight)
+            .text_size(Pixels::from(style.size))
+            .line_height(relative(style.line_height))
+            .text_color(theme.colors.fg)
+            .map(|line| match style.align {
+                TextAlign::Left => line.text_left(),
+                TextAlign::Center => line.text_center(),
+                TextAlign::Right => line.text_right(),
+            })
+            .child("The quick brown fox");
+        div()
+            .flex()
+            .flex_col()
+            .gap_3()
+            .child(
+                FontPicker::new((id.clone(), "family"), &self.search)
+                    .selected(style.family.clone())
+                    .on_change(move |chosen, window, cx| family(chosen.clone(), window, cx)),
+            )
+            .child(pair(
+                Select::new(
+                    (id.clone(), "weight"),
+                    WEIGHTS
+                        .iter()
+                        .map(|(weight, name)| Choice::new(weight.to_string(), *name)),
+                )
+                .selected(named.0.to_string())
+                .on_change(move |value, window, cx| {
+                    weight(
+                        value.parse().expect("a weight the select offers"),
+                        window,
+                        cx,
+                    )
+                }),
+                scrub("Size", style.size)
+                    .range(1.0, 999.0)
+                    .precision(0)
+                    .on_change(at(|s, v| s.size = v as f32)),
+            ))
+            .child(
+                scrub("Line height", style.line_height)
+                    .range(0.5, 4.0)
+                    .step(0.05)
+                    .precision(2)
+                    .on_change(at(|s, v| s.line_height = v as f32)),
+            )
+            .child(
+                scrub("Tracking", style.tracking)
+                    .range(-20.0, 100.0)
+                    .step(0.1)
+                    .precision(1)
+                    .on_change(at(|s, v| s.tracking = v as f32)),
+            )
+            .child(
+                ALIGNS
+                    .iter()
+                    .fold(
+                        SegmentedControl::new((id, "align"), *word),
+                        |control, (_, word, icon)| control.segment(*word, *word, Some(*icon)),
+                    )
+                    .on_change(move |word, window, cx| {
+                        let (chosen, _, _) = ALIGNS
+                            .iter()
+                            .find(|(_, name, _)| *name == word.as_ref())
+                            .expect("an alignment the control offers");
+                        align(*chosen, window, cx)
+                    }),
+            )
+            .child(sample)
+    }
+}