Canvas · Tools: select, move and snap, resize, draw, pen, text, brush

ToolLayer lies over an InfiniteCanvas and carries its tools. Select
takes the topmost shape a press reaches, Shift adds or drops one, a
drag moves the selection and snaps its nearest edge or middle to
another shape's within reach, a handle resizes it, Shift keeping a
corner's shape, and a drag on empty space draws a SelectionBox that
takes what lies wholly inside. The shape tools draw by a drag toward
any corner, Shift keeping them square; the pen adds a point per press
and a double press ends the path; text drops a line where pressed; the
brush strokes a path its width. A drag may end in the layer or out of
it; each gesture ends once and asks the owner. SelectionBox,
TransformHandles and SnapIndicator draw the marks.

ToolPalette picks a tool from icons named in tips; BrushSettings sets a
brush's width and hue; HistoryPanel lists the steps done, the undone
ones quiet, and takes the drawing to a step on Enter or a double press.

The model changes: lines and arrows end at a named corner, so they run
either way, and paths carry their width. Three Lucide icons: hexagon,
slash and move-up-right.

src/canvas/palette.rs

@@ -0,0 +1,166 @@
+use std::rc::Rc;
+
+use gpui::{
+    App, ElementId, IntoElement, ParentElement, RenderOnce, SharedString, Styled, Window, div,
+};
+
+use super::{edit::Tool, gesture::Brush};
+use crate::{
+    buttons::{ToggleGroup, ToggleItem},
+    forms::{ColorPalette, Slider},
+    primitives::IconName,
+    theme::{ActiveTheme, HUE_NAMES, TextSize},
+    typography::tabular,
+};
+
+type OnTool = Rc<dyn Fn(Tool, &mut Window, &mut App)>;
+type OnBrush = Rc<dyn Fn(Brush, &mut Window, &mut App)>;
+
+fn icon(tool: Tool) -> IconName {
+    match tool {
+        Tool::Select => IconName::MousePointer2,
+        Tool::Hand => IconName::Hand,
+        Tool::Rect => IconName::Square,
+        Tool::Ellipse => IconName::Circle,
+        Tool::Polygon => IconName::Hexagon,
+        Tool::Line => IconName::Slash,
+        Tool::Arrow => IconName::MoveUpRight,
+        Tool::Pen => IconName::PenTool,
+        Tool::Text => IconName::Type,
+        Tool::Brush => IconName::Brush,
+    }
+}
+
+/// The canvas's tools in a row, one picked, each named in a tip.
+#[derive(IntoElement)]
+pub struct ToolPalette {
+    id: ElementId,
+    tool: Tool,
+    on_change: Option<OnTool>,
+}
+
+impl ToolPalette {
+    pub fn new(id: impl Into<ElementId>, tool: Tool) -> Self {
+        Self {
+            id: id.into(),
+            tool,
+            on_change: None,
+        }
+    }
+
+    pub fn on_change(mut self, handler: impl Fn(Tool, &mut Window, &mut App) + 'static) -> Self {
+        self.on_change = Some(Rc::new(handler));
+        self
+    }
+}
+
+impl RenderOnce for ToolPalette {
+    fn render(self, _: &mut Window, _: &mut App) -> impl IntoElement {
+        let on_change = self.on_change;
+        Tool::ALL
+            .into_iter()
+            .fold(ToggleGroup::new(self.id), |group, tool| {
+                group.item(
+                    ToggleItem::new(tool.words())
+                        .icon(icon(tool))
+                        .tooltip(tool.words()),
+                )
+            })
+            .selected([self.tool.words()])
+            .on_change(move |values: &[SharedString], window, cx| {
+                let Some(words) = values.first() else { return };
+                let tool = Tool::ALL
+                    .into_iter()
+                    .find(|tool| tool.words() == words.as_ref())
+                    .expect("a tool of the palette");
+                log::info!("tool palette: {}", tool.words());
+                if let Some(on_change) = &on_change {
+                    on_change(tool, window, cx);
+                }
+            })
+    }
+}
+
+/// A brush's width on a slider and its hue from the chart's named colors.
+#[derive(IntoElement)]
+pub struct BrushSettings {
+    id: ElementId,
+    brush: Brush,
+    on_change: Option<OnBrush>,
+}
+
+impl BrushSettings {
+    pub fn new(id: impl Into<ElementId>, brush: Brush) -> Self {
+        Self {
+            id: id.into(),
+            brush,
+            on_change: None,
+        }
+    }
+
+    pub fn on_change(mut self, handler: impl Fn(Brush, &mut Window, &mut App) + 'static) -> Self {
+        self.on_change = Some(Rc::new(handler));
+        self
+    }
+}
+
+impl RenderOnce for BrushSettings {
+    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
+        let theme = cx.theme();
+        let chart = theme.colors.chart;
+        let brush = self.brush;
+        let (sized, hued) = (self.on_change.clone(), self.on_change);
+        let width = Slider::new((self.id.clone(), "size"), f64::from(brush.size))
+            .range(1.0, 24.0)
+            .step(1.0)
+            .on_change(move |size, window, cx| {
+                if let Some(on_change) = &sized {
+                    on_change(
+                        Brush {
+                            size: size as f32,
+                            ..brush
+                        },
+                        window,
+                        cx,
+                    );
+                }
+            });
+        let hues = ColorPalette::new(
+            (self.id.clone(), "hue"),
+            HUE_NAMES
+                .iter()
+                .zip(chart)
+                .map(|(name, color)| (*name, color)),
+        )
+        .columns(8)
+        .selected(chart[brush.hue])
+        .on_change(move |color, window, cx| {
+            let hue = chart
+                .iter()
+                .position(|each| *each == color)
+                .expect("a hue of the chart");
+            if let Some(on_change) = &hued {
+                on_change(Brush { hue, ..brush }, window, cx);
+            }
+        });
+        div()
+            .flex()
+            .flex_col()
+            .gap_3()
+            .child(
+                div()
+                    .flex()
+                    .items_center()
+                    .gap_3()
+                    .child(div().flex_1().child(width))
+                    .child(
+                        tabular(div())
+                            .flex_none()
+                            .text_size(theme.text_size(TextSize::Sm))
+                            .text_color(theme.colors.fg_muted)
+                            .child(format!("{} pt", brush.size)),
+                    ),
+            )
+            .child(hues)
+    }
+}