mirror of
https://github.com/storytold/figcraft.git
synced 2026-11-13 05:42:38 +00:00
Merge pull request #2148 from TrevorBrown-dev/feat/scale-tool-focus-2146
Scale tool: K focuses the Scale field, so K, 2, Enter scales by two (#2146)
This commit is contained in:
5 files changed
+257
-7
No files matched your search
@@ -737,6 +737,199 @@ fn scrubbing_the_scale_panel_width_scales_live_in_one_undo_step() {
|
||||
assert_eq!((w, h, undo_steps(&u)), (60.0, 45.0, steps + 1), "40×30 scaled to a width of 60");
|
||||
}
|
||||
|
||||
/// A 100 x 100 rectangle at the origin, selected, in a Ui with the Move tool.
|
||||
fn scale_setup() -> (Ui, NodeId) {
|
||||
let mut s = Session::new();
|
||||
let r = id(s.execute("shape.rectangle", &json!({"x": 0, "y": 0, "width": 100, "height": 100})).unwrap());
|
||||
s.execute("select.set", &json!({"ids": [r]})).unwrap();
|
||||
let mut u = Ui::new(s);
|
||||
u.frame(vec![]);
|
||||
u.frame(vec![]);
|
||||
(u, r)
|
||||
}
|
||||
|
||||
fn scale_field_focused(u: &Ui) -> bool {
|
||||
u.ctx.memory(|m| m.has_focus(Id::unique("scale_k").with("te")))
|
||||
}
|
||||
|
||||
/// Measured in Figma's web app (2026-11-09): K opens the Scale section with its input focused.
|
||||
#[test]
|
||||
fn pressing_k_focuses_the_scale_field_with_its_text_selected() {
|
||||
let (mut u, _) = scale_setup();
|
||||
assert!(!scale_field_focused(&u));
|
||||
key(&mut u, Key::K, Modifiers::NONE);
|
||||
u.frame(vec![]);
|
||||
assert_eq!(u.app.session.tool.tool, figcraft_engine::ToolId::Scale);
|
||||
assert!(scale_field_focused(&u), "the scale field has the keyboard");
|
||||
let state = egui::TextEdit::load_state(&u.ctx, Id::unique("scale_k").with("te")).expect("the editor exists");
|
||||
let range = state.cursor.char_range().expect("a selection");
|
||||
let shown = u.ctx.data(|d| d.get_temp::<String>(Id::unique("scale_k").with("editing"))).expect("the field is being edited");
|
||||
let (lo, hi) = (range.primary.index.min(range.secondary.index), range.primary.index.max(range.secondary.index));
|
||||
assert_eq!((lo, hi), (egui::text::CCursor::new(0).index, egui::text::CCursor::new(shown.chars().count()).index), "all of its text is selected");
|
||||
}
|
||||
|
||||
/// K with nothing selected, then a selection: the field doesn't take the keyboard from the canvas.
|
||||
#[test]
|
||||
fn a_selection_after_k_does_not_move_the_keyboard_to_the_scale_field() {
|
||||
let (mut u, r) = scale_setup();
|
||||
u.app.run("select.set", json!({"ids": []}));
|
||||
u.frame(vec![]);
|
||||
key(&mut u, Key::K, Modifiers::NONE);
|
||||
for _ in 0..3 {
|
||||
u.frame(vec![]);
|
||||
}
|
||||
u.app.run("select.set", json!({"ids": [r]}));
|
||||
for _ in 0..3 {
|
||||
u.frame(vec![]);
|
||||
}
|
||||
assert_eq!(u.app.session.tool.tool, figcraft_engine::ToolId::Scale);
|
||||
assert!(!scale_field_focused(&u), "the canvas keeps the keyboard");
|
||||
}
|
||||
|
||||
/// Ctrl+Enter in the factor field is not the tool's exit.
|
||||
#[test]
|
||||
fn ctrl_enter_in_the_scale_field_keeps_the_scale_tool() {
|
||||
let (mut u, _) = scale_setup();
|
||||
key(&mut u, Key::K, Modifiers::NONE);
|
||||
u.frame(vec![]);
|
||||
key(&mut u, Key::Enter, Modifiers::CTRL);
|
||||
u.frame(vec![]);
|
||||
assert_eq!(u.app.session.tool.tool, figcraft_engine::ToolId::Scale);
|
||||
}
|
||||
|
||||
/// An Enter on the first frame the panel is back from another tab (the field not yet focused again)
|
||||
/// doesn't end the tool on a stale "had the keyboard" flag.
|
||||
#[test]
|
||||
fn enter_on_the_first_frame_back_from_another_tab_keeps_the_scale_tool() {
|
||||
let (mut u, _) = scale_setup();
|
||||
key(&mut u, Key::K, Modifiers::NONE);
|
||||
u.frame(vec![]);
|
||||
assert!(scale_field_focused(&u));
|
||||
u.app.ui.right_tab = crate::state::RightTab::Prototype;
|
||||
u.frame(vec![]);
|
||||
u.frame(vec![]);
|
||||
u.app.ui.right_tab = crate::state::RightTab::Design;
|
||||
key(&mut u, Key::Enter, Modifiers::NONE);
|
||||
u.frame(vec![]);
|
||||
assert_eq!(u.app.session.tool.tool, figcraft_engine::ToolId::Scale);
|
||||
}
|
||||
|
||||
/// The Scale tool chosen again while the Design tab was away (Prototype tab, Move, then K): the
|
||||
/// field takes the keyboard again when the Design tab comes back.
|
||||
#[test]
|
||||
fn the_scale_field_takes_the_keyboard_again_after_another_tab() {
|
||||
let (mut u, _) = scale_setup();
|
||||
key(&mut u, Key::K, Modifiers::NONE);
|
||||
u.frame(vec![]);
|
||||
assert!(scale_field_focused(&u));
|
||||
u.app.ui.right_tab = crate::state::RightTab::Prototype;
|
||||
u.frame(vec![]);
|
||||
u.app.run("tool.set", json!({"tool": "move"}));
|
||||
u.frame(vec![]);
|
||||
u.app.run("tool.set", json!({"tool": "scale"}));
|
||||
u.frame(vec![]);
|
||||
u.app.ui.right_tab = crate::state::RightTab::Design;
|
||||
u.frame(vec![]);
|
||||
u.frame(vec![]);
|
||||
assert!(scale_field_focused(&u), "the field has the keyboard again");
|
||||
}
|
||||
|
||||
/// A value typed and left unsettled when the panel went away is dropped: back again, the field
|
||||
/// shows the fresh value with all of its text selected, so typing replaces it.
|
||||
#[test]
|
||||
fn the_scale_field_comes_back_fresh_with_its_text_selected() {
|
||||
let (mut u, r) = scale_setup();
|
||||
key(&mut u, Key::K, Modifiers::NONE);
|
||||
u.frame(vec![]);
|
||||
u.frame(vec![Event::Text("7".to_string())]);
|
||||
u.app.ui.right_tab = crate::state::RightTab::Prototype;
|
||||
u.frame(vec![]);
|
||||
u.frame(vec![]);
|
||||
u.app.ui.right_tab = crate::state::RightTab::Design;
|
||||
u.frame(vec![]);
|
||||
u.frame(vec![]);
|
||||
assert!(scale_field_focused(&u));
|
||||
let shown = u.ctx.data(|d| d.get_temp::<String>(Id::unique("scale_k").with("editing"))).expect("the field is being edited");
|
||||
assert_ne!(shown, "7", "the leftover edit is gone");
|
||||
let state = egui::TextEdit::load_state(&u.ctx, Id::unique("scale_k").with("te")).expect("the editor exists");
|
||||
let range = state.cursor.char_range().expect("a selection");
|
||||
let (lo, hi) = (range.primary.index.min(range.secondary.index), range.primary.index.max(range.secondary.index));
|
||||
assert_eq!((lo, hi), (egui::text::CCursor::new(0).index, egui::text::CCursor::new(shown.chars().count()).index));
|
||||
assert_eq!(geom(&u, r), (0.0, 0.0, 100.0, 100.0));
|
||||
}
|
||||
|
||||
/// Tab moves the keyboard from the factor field to the next one; an Enter there leaves the
|
||||
/// Scale tool on.
|
||||
#[test]
|
||||
fn enter_in_another_field_after_tab_keeps_the_scale_tool() {
|
||||
let (mut u, _) = scale_setup();
|
||||
key(&mut u, Key::K, Modifiers::NONE);
|
||||
u.frame(vec![]);
|
||||
assert!(scale_field_focused(&u));
|
||||
// Tab, then Enter on the very next frame (as a quick Tab, Enter or a click and Enter would).
|
||||
let ev = |key, pressed| Event::Key { key, physical_key: None, pressed, repeat: false, modifiers: Modifiers::NONE };
|
||||
u.frame(vec![ev(Key::Tab, true), ev(Key::Tab, false)]);
|
||||
assert!(!scale_field_focused(&u), "Tab moved the keyboard on");
|
||||
for _ in 0..4 {
|
||||
u.frame(vec![]);
|
||||
assert!(!scale_field_focused(&u), "the field doesn't take the keyboard back");
|
||||
}
|
||||
u.frame(vec![ev(Key::Enter, true), ev(Key::Enter, false)]);
|
||||
u.frame(vec![]);
|
||||
assert_eq!(u.app.session.tool.tool, figcraft_engine::ToolId::Scale);
|
||||
}
|
||||
|
||||
/// K, 2, Enter: 100 x 100 becomes 200 x 200 about the panel's origin, the tool is Move, one undo step.
|
||||
#[test]
|
||||
fn k_two_enter_scales_the_selection_by_two() {
|
||||
let (mut u, r) = scale_setup();
|
||||
let steps = undo_steps(&u);
|
||||
key(&mut u, Key::K, Modifiers::NONE);
|
||||
u.frame(vec![]);
|
||||
u.frame(vec![Event::Text("2".to_string())]);
|
||||
key(&mut u, Key::Enter, Modifiers::NONE);
|
||||
u.frame(vec![]);
|
||||
// About the panel's origin, FigCraft's top-left default (Figma's grid starts at the centre).
|
||||
assert_eq!(geom(&u, r), (0.0, 0.0, 200.0, 200.0));
|
||||
assert!(!scale_field_focused(&u), "the field let go of the keyboard");
|
||||
assert_eq!(u.app.session.tool.tool, figcraft_engine::ToolId::Move);
|
||||
assert_eq!(u.app.session.ds().unwrap().selection, vec![r]);
|
||||
assert_eq!(undo_steps(&u), steps + 1);
|
||||
u.app.run("edit.undo", json!({}));
|
||||
assert_eq!(geom(&u, r), (0.0, 0.0, 100.0, 100.0));
|
||||
}
|
||||
|
||||
/// "2x" and "1.5" are factors too.
|
||||
#[test]
|
||||
fn the_scale_field_takes_2x_and_1_5() {
|
||||
for (text, size) in [("2x", 200.0), ("1.5", 150.0)] {
|
||||
let (mut u, r) = scale_setup();
|
||||
key(&mut u, Key::K, Modifiers::NONE);
|
||||
u.frame(vec![]);
|
||||
u.frame(vec![Event::Text(text.to_string())]);
|
||||
key(&mut u, Key::Enter, Modifiers::NONE);
|
||||
u.frame(vec![]);
|
||||
assert_eq!(geom(&u, r), (0.0, 0.0, size, size), "{text}");
|
||||
}
|
||||
}
|
||||
|
||||
/// Escape in the scale field closes it and changes nothing.
|
||||
#[test]
|
||||
fn escape_in_the_scale_field_closes_it_and_changes_nothing() {
|
||||
let (mut u, r) = scale_setup();
|
||||
let steps = undo_steps(&u);
|
||||
key(&mut u, Key::K, Modifiers::NONE);
|
||||
u.frame(vec![]);
|
||||
u.frame(vec![Event::Text("3".to_string())]);
|
||||
key(&mut u, Key::Escape, Modifiers::NONE);
|
||||
u.frame(vec![]);
|
||||
assert_eq!(geom(&u, r), (0.0, 0.0, 100.0, 100.0));
|
||||
assert!(!scale_field_focused(&u), "the field let go of the keyboard");
|
||||
assert_eq!(u.app.session.tool.tool, figcraft_engine::ToolId::Move);
|
||||
assert_eq!(u.app.session.ds().unwrap().selection, vec![r]);
|
||||
assert_eq!(undo_steps(&u), steps);
|
||||
}
|
||||
|
||||
/// The texts painted in the last frame: what they say, whether they end in an ellipsis, and where
|
||||
/// they show (within their clip).
|
||||
fn painted_texts(shapes: &[egui::epaint::ClippedShape]) -> Vec<(String, bool, egui::Rect)> {
|
||||
|
||||
@@ -264,6 +264,9 @@ fn design(app: &mut FigApp, ui: &mut Ui) {
|
||||
let sel = ds.selection.clone();
|
||||
let vector_edit = ds.vector_edit.clone();
|
||||
if sel.is_empty() {
|
||||
if app.session.tool.tool == figcraft_engine::ToolId::Scale {
|
||||
crate::scale_panel::note_no_selection(ui);
|
||||
}
|
||||
page_section(app, ui, &doc);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -15,8 +15,36 @@ use crate::widgets::{self, FieldEdit, Lead};
|
||||
|
||||
/// The Scale section, shown in place of Position while the Scale tool is active.
|
||||
pub fn section(app: &mut FigApp, ui: &mut Ui, doc: &Document, sel: &[NodeId]) {
|
||||
let Some(b) = doc.bounds_of(sel) else { return };
|
||||
let Some(b) = doc.bounds_of(sel) else {
|
||||
note_no_selection(ui);
|
||||
return;
|
||||
};
|
||||
widgets::section_header(ui, tr("Scale"), &[], false);
|
||||
// The factor field takes the keyboard, with its text selected, whenever the section shows
|
||||
// after a frame without it: the tool was chosen, or the panel came back from another tab or a
|
||||
// hidden UI.
|
||||
let k_id = Id::unique("scale_k");
|
||||
let shown_id = Id::unique("scale_shown_frame");
|
||||
let frame = ui.ctx().cumulative_frame_nr();
|
||||
let last = ui.data(|d| d.get_temp::<u64>(shown_id));
|
||||
ui.data_mut(|d| d.insert_temp(shown_id, frame));
|
||||
let reappeared = last.is_none_or(|l| l.saturating_add(1) < frame);
|
||||
if reappeared {
|
||||
widgets::request_edit(ui, k_id);
|
||||
}
|
||||
// Enter or Escape in the factor field ends the tool (back to Move, the selection kept). Whether
|
||||
// the field had the keyboard is read as it was when the last frame's widgets were done: the
|
||||
// shortcut layer may let go of it before this frame's panel runs, and a click or Tab that moved
|
||||
// it to another field during the last frame counts.
|
||||
let in_k_id = Id::unique("scale_in_k");
|
||||
// A flag left from before a gap (another tab, a hidden panel) is stale: the field didn't have
|
||||
// the keyboard on the frame before this one.
|
||||
let in_k = !reappeared && ui.data(|d| d.get_temp::<bool>(in_k_id)).unwrap_or(false);
|
||||
// Plain Enter or Escape only: Ctrl+Enter and Alt+Enter are not the tool's exit.
|
||||
let (enter, esc) = ui.input(|i| {
|
||||
let plain = !(i.modifiers.ctrl || i.modifiers.alt || i.modifiers.command);
|
||||
(plain && i.key_pressed(egui::Key::Enter), plain && i.key_pressed(egui::Key::Escape))
|
||||
});
|
||||
let col = widgets::col_width(ui.available_width());
|
||||
// Anchor: column and row (0 start, 1 middle, 2 end) of the point that stays put.
|
||||
let anchor = app.session.tool.scale_anchor;
|
||||
@@ -41,9 +69,7 @@ pub fn section(app: &mut FigApp, ui: &mut Ui, doc: &Document, sel: &[NodeId]) {
|
||||
widgets::sublabels(ui, tr("Scale"), Some(tr("Anchor")));
|
||||
crate::right::block(ui, 52.0, 2.0, |ui| {
|
||||
// Relative to the layers as they are: a scrub applies once, when let go.
|
||||
if let Some(FieldEdit::Set(k) | FieldEdit::Scrub(k, true)) =
|
||||
widgets::number_field(ui, Id::unique("scale_k"), Lead::None, Some(1.0), "x", col, 0.1)
|
||||
{
|
||||
if let Some(FieldEdit::Set(k) | FieldEdit::Scrub(k, true)) = widgets::number_field(ui, k_id, Lead::None, Some(1.0), "x", col, 0.1) {
|
||||
factor = Some(k);
|
||||
}
|
||||
ui.add_space(8.0);
|
||||
@@ -70,6 +96,22 @@ pub fn section(app: &mut FigApp, ui: &mut Ui, doc: &Document, sel: &[NodeId]) {
|
||||
}
|
||||
}
|
||||
}
|
||||
let focused_now = ui.memory(|m| m.has_focus(k_id.with("te")));
|
||||
ui.data_mut(|d| d.insert_temp(in_k_id, focused_now));
|
||||
if in_k && (enter || esc) {
|
||||
app.run("tool.set", json!({"tool": "move"}));
|
||||
}
|
||||
}
|
||||
|
||||
/// The Scale tool is on but nothing is selected, so the section isn't shown: the frame still
|
||||
/// counts as shown (a selection that appears later is not the tool being chosen, and the field must
|
||||
/// not take the keyboard from the canvas), and the field is not the one with the keyboard.
|
||||
pub fn note_no_selection(ui: &Ui) {
|
||||
let frame = ui.ctx().cumulative_frame_nr();
|
||||
ui.data_mut(|d| {
|
||||
d.insert_temp(Id::unique("scale_shown_frame"), frame);
|
||||
d.insert_temp(Id::unique("scale_in_k"), false);
|
||||
});
|
||||
}
|
||||
|
||||
/// The factor (clamped to 0.01–100) and pivot for scaling `b` by `k` around `anchor`; None when
|
||||
|
||||
@@ -223,6 +223,16 @@ pub fn number_field(ui: &mut Ui, id: Id, lead: Lead, value: Option<f64>, suffix:
|
||||
number_field_mixed(ui, id, lead, value, suffix, width, step)?.settled()
|
||||
}
|
||||
|
||||
/// Ask number field `id` to open for typing on its next frame, its text selected (a tool that
|
||||
/// opens with its field focused, such as Scale). An edit left over from when the field was last
|
||||
/// shown (it went away with the keyboard on it) is dropped first, or the request would be ignored.
|
||||
pub fn request_edit(ui: &Ui, id: Id) {
|
||||
ui.data_mut(|d| {
|
||||
d.remove::<String>(id.with("editing"));
|
||||
d.insert_temp(id.with("beginedit"), true);
|
||||
});
|
||||
}
|
||||
|
||||
/// Whether the edit of number field `id` began with a Cmd/Ctrl-click. A padding field edited
|
||||
/// that way sets every side (Guide to auto layout, Keyboard shortcut guide).
|
||||
pub fn edit_began_with_command(ui: &Ui, id: Id) -> bool {
|
||||
@@ -400,7 +410,8 @@ fn number_field_impl(
|
||||
}
|
||||
// Typing on a field the keyboard reached (Tab) edits it: the editor takes the typed text.
|
||||
let typed_now = editing.is_none() && on_field && ui.input(|i| i.events.iter().any(|e| matches!(e, egui::Event::Text(_))));
|
||||
let started = editing.is_none() && ((field_resp.clicked() && !alt_now) || typed_now);
|
||||
let requested = ui.data_mut(|d| d.remove_temp::<bool>(id.with("beginedit"))).unwrap_or(false);
|
||||
let started = editing.is_none() && ((field_resp.clicked() && !alt_now) || typed_now || requested);
|
||||
// The text the field would commit to no effect: what it showed when the edit began, or the
|
||||
// value the arrows last stepped it to.
|
||||
let kept_id = id.with("kept");
|
||||
|
||||
+3
-2
@@ -1,6 +1,6 @@
|
||||
# UI and interaction parity
|
||||
|
||||
> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-11-10 · **Change:** minor (the main menu and its submenus stay inside the window, moving up to fit and scrolling when taller (#2217); locked layers ignore the arrow keys and a locked parent's children can't be locked on their own (#1560); the left rail's and tab strip's icons are larger, 20 pt (#553); pick select: Tab while the keyboard selection box shows (or the chord again) puts a pink outline on a layer and the keys walk the layer tree from it, as Accessibility at Figma says (#1836); scrubbing a field faster or slower by the pointer's height, with a notice of the speed, as the help center's Scrub fields says (#1837); component rows in the Layers panel at AA contrast in the theme's component tint, with the rows inside a selected component in a tone of its row (#1903); Cmd/Ctrl-click on a padding field sets all four sides with the value typed, a documented auto layout shortcut; a fill per region of a vector: with regions selected in edit mode, the Fill section and the fill commands edit those regions' own fills, as Edit vector layers says (#1875); the Fill section of a text whose characters were coloured differently while editing shows mixed content, characters that all share fills the layer doesn't have show those, and a layer-level fill edit reaches every character (#1856); a number field scrubs when dragged with Alt held, as the help center's scrub section says, not only by its label; reuse visible layer selection roots (M8); ; with a shape or frame tool chosen and nothing selected, the arrows show a placement crosshair in the middle of the view and move it, and Enter places there, as Accessibility at Figma says (#1839); text direction per paragraph: Text ▸ Text direction forces a paragraph left to right or right to left, as Add right-to-left text says (#1830), with `text.direction`, `node.set textDirection`, the Type settings control once a right-to-left script is in the text, inspect, the CSS `direction` and the `.fig` lines' `sourceDirectionality`; the boolean operation menu in the Design panel leads each entry with an original icon drawn in code, a filled preview of the result (#2003); a press on the open gradient's handles or stops on the canvas keeps the colour picker open through the drag, as its own control (#1852); a click with the Bend tool on a sharp point curves it, its handles along the line between its neighbours, as Edit vector layers says (#1875); wrap style: Auto, Balance and Pretty on a text layer decide where its lines break, as Explore text properties says (#1827), with the Type settings control, `text.wrapStyle`, `node.set wrapStyle`, inspect and the CSS `text-wrap`; Backspace or Delete at the start of a list item keeps the item's indentation level, as the lists article says; max lines on auto-width text keep it auto width, hugging that many lines, as the text properties article says; superscript and subscript are synthesised where the font has no glyphs for them, from the standard glyphs shrunk and shifted by the font's OS/2 metrics, and a run mixing available and unavailable glyphs is synthesised whole, as Explore text properties says (#1828); Alt+Enter while editing text opens the link at the caret, as the accessibility page documents; Minimize, by its shortcut or the button by the file name, collapses the navigation bar and both sidebars as the help center says, with the right sidebar back while something is selected (#1835); the interface size keys of the help center's accessibility page: Cmd/Ctrl+Shift+Alt with =, - and 0 step the interface through the Preferences sizes and back to the system's size; Cmd/Ctrl+Alt+arrows rotate the selection a degree at a time, 15 with Shift, as the help center's accessibility page says; they resized before; the Layers panel answers Ctrl+1 as well as Alt+1 on Windows and Linux, the two keys the help center gives it; the colour picker's Image tab shows a placeholder and Upload from computer, an asset preview, and a file dropped on it replaces the image, keeping the fill mode, crop and position (#1682); the keyboard's Menu key opens the context menu, as Shift+F10 does; the eyedropper with Cmd/Ctrl+Shift makes a colour style or variable of what it picks; sidebar number and text fields keep their text vertically centered when focused, including typography spacing; with the pen out, Enter or a double-click ends the path and edits the vector with the Move tool instead of drawing on (#1430); the Actions palette offers only commands that run from it, and no second row reading like a menu item: Place image opens the file dialog (#1574); Preferences ▸ Scroll wheel zoom: a mouse wheel zooms the canvas about the pointer and Cmd/Ctrl+wheel scrolls (#1390); boolean operations refuse input past their caps, and a boolean group past them draws without its result (#1104); the selection and hover outlines of rounded rectangles and frames follow their corners (#1506); colour picker review fixes for tLine truncated
|
||||
> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-11-10 · **Change:** minor (M8, #2146: K focuses the Scale tool's factor field with its text selected, so K, 2, Enter scales the selection by two about the panel's origin (FigCraft's starts at the top left; Figma's grid starts at the centre, left for a follow-up because the origin also sets where a handle drag pivots, which is not measured) in one undo step, after which the tool returns to Move with the selection kept; Escape in the field closes it with the tool back on Move and nothing changed (measured in Figma's web app, 2026-11-09; `pressing_k_focuses_the_scale_field_with_its_text_selected`, `k_two_enter_scales_the_selection_by_two`, `escape_in_the_scale_field_closes_it_and_changes_nothing`); the main menu and its submenus stay inside the window, moving up to fit and scrolling when taller (#2217); locked layers ignore the arrow keys and a locked parent's children can't be locked on their own (#1560); the left rail's and tab strip's icons are larger, 20 pt (#553); pick select: Tab while the keyboard selection box shows (or the chord again) puts a pink outline on a layer and the keys walk the layer tree from it, as Accessibility at Figma says (#1836); scrubbing a field faster or slower by the pointer's height, with a notice of the speed, as the help center's Scrub fields says (#1837); component rows in the Layers panel at AA contrast in the theme's component tint, with the rows inside a selected component in a tone of its row (#1903); Cmd/Ctrl-click on a padding field sets all four sides with the value typed, a documented auto layout shortcut; a fill per region of a vector: with regions selected in edit mode, the Fill section and the fill commands edit those regions' own fills, as Edit vector layers says (#1875); the Fill section of a text whose characters were coloured differently while editing shows mixed content, characters that all share fills the layer doesn't have show those, and a layer-level fill edit reaches every character (#1856); a number field scrubs when dragged with Alt held, as the help center's scrub section says, not only by its label; reuse visible layer selection roots (M8); ; with a shape or frame tool chosen and nothing selected, the arrows show a placement crosshair in the middle of the view and move it, and Enter places there, as Accessibility at Figma says (#1839); text direction per paragraph: Text ▸ Text direction forces a paragraph left to right or right to left, as Add right-to-left text says (#1830), with `text.direction`, `node.set textDirection`, the Type settings control once a right-to-left script is in the text, inspect, the CSS `direction` and the `.fig` lines' `sourceDirectionality`; the boolean operation menu in the Design panel leads each entry with an original icon drawn in code, a filled preview of the result (#2003); a press on the open gradient's handles or stops on the canvas keeps the colour picker open through the drag, as its own control (#1852); a click with the Bend tool on a sharp point curves it, its handles along the line between its neighbours, as Edit vector layers says (#1875); wrap style: Auto, Balance and Pretty on a text layer decide where its lines break, as Explore text properties says (#1827), with the Type settings control, `text.wrapStyle`, `node.set wrapStyle`, inspect and the CSS `text-wrap`; Backspace or Delete at the start of a list item keeps the item's indentation level, as the lists article says; max lines on auto-width text keep it auto width, hugging that many lines, as the text properties article says; superscript and subscript are synthesised where the font has no glyphs for them, from the standard glyphs shrunk and shifted by the font's OS/2 metrics, and a run mixing available and unavailable glyphs is synthesised whole, as Explore text properties says (#1828); Alt+Enter while editing text opens the link at the caret, as the accessibility page documents; Minimize, by its shortcut or the button by the file name, collapses the navigation bar and both sidebars as the help center says, with the right sidebar back while something is selected (#1835); the interface size keys of the help center's accessibility page: Cmd/Ctrl+Shift+Alt with =, - and 0 step the interface through the Preferences sizes and back to the system's size; Cmd/Ctrl+Alt+arrows rotate the selection a degree at a time, 15 with Shift, as the help center's accessibility page says; they resized before; the Layers panel answers Ctrl+1 as well as Alt+1 on Windows and Linux, the two keys the help center gives it; the colour picker's Image tab shows a placeholder and Upload from computer, an asset preview, and a file dropped on it replaces the image, keeping the fill mode, crop and position (#1682); the keyboard's Menu key opens the context menu, as Shift+F10 does; the eyedropper with Cmd/Ctrl+Shift makes a colour style or variable of what it picks; sidebar number and text fields keep their text vertically centered Line truncated
|
||||
|
||||
Fine canvas control is what Figma users feel first: handles, snapping, nudging, modifier keys,
|
||||
drag behaviour, numeric precision. This checklist covers the tools, gestures and panels. Status:
|
||||
@@ -67,7 +67,7 @@ interaction feel not yet compared.
|
||||
| Enter with a shape or frame tool chosen | done | places what a click makes (100×100, lines 100 long, sections 400×300) in the middle of the view, selected (`tool.place`); from the toolbar, Enter on the chosen tool. With nothing selected, the arrows first show a crosshair in the middle of the view and then move it by the nudge amounts (`tool.crosshair`; Shift the large one), and Enter places there; Escape or a tool change takes it away ("Use the arrow keys to activate the crosshair cursor. It will appear in the middle of the viewport indicating where the new object will be placed", Accessibility at Figma; #1839) |
|
||||
| Alt-drag duplicate | done | the copy snaps to the layer it came from too (edges, centres, equal spacing); Duplicate (Cmd+D) then repeats the copy's offset, also after a Duplicate whose copy was moved, as long as the copies stay selected (the documentation doesn't say; pinned from community answers) |
|
||||
| Drag threshold; double-click into groups and text | done | a press moves or resizes only once the pointer has travelled 3 px on screen, so a click or double-click made with an unsteady hand drags nothing; a double-click goes one level into a group and the next one edits the text under it, wherever on the text it lands, with all of it selected (a double-click in the text being edited selects the word) (`double_click_tests`); Enter on a selected text does the same (all of it selected, typing replaces it) and Escape leaves editing with the layer still selected (`text_enter_tests`) |
|
||||
| Scale tool (K): handles about an anchor, live factor, panel | done | |
|
||||
| Scale tool (K): handles about an anchor, live factor, panel | done | Pressing K opens the Scale section with its factor field focused and its text selected; typing 2 (or 2x, 1.5) then Enter scales the selection by it about the panel's origin (FigCraft's starts at the top left; Figma's grid starts at the centre, left for a follow-up because the origin also sets where a handle drag pivots, which is not measured), as one undo step, then closes the section and returns to Move with the selection kept; Escape in the field closes it, back to Move, nothing changed. Measured in Figma's web app, 2026-11-09. Tests: `pressing_k_focuses_the_scale_field_with_its_text_selected`, `k_two_enter_scales_the_selection_by_two`, `escape_in_the_scale_field_closes_it_and_changes_nothing`. |
|
||||
| Nudge 1 / Shift 10 (preference), Cmd+arrows resize | done | arrows reorder auto layout children |
|
||||
| Smart guides: edges, centres, equal spacing (between two layers or continuing a row's gap, labelled), spacing labels, parent, layout grid, ruler guides | done | red, `snap.rs`; a guide dragged out of a ruler or moved snaps to layer edges and centres too (Snap to Objects; Cmd/Ctrl suspends), on its own axis only; page guides see the page's top-level layers, frame guides the frame's box, layout grids and every layer in it, along a rotated frame's own axes; thresholds not yet compared with Figma's (`guide_snap_tests`) |
|
||||
| Ctrl to suspend snapping while dragging (macOS) | done | Control on macOS (Cmd keeps working), Ctrl elsewhere; moving, resizing and drawing |
|
||||
@@ -273,4 +273,5 @@ in the table. `crates/ui-egui/src/shortcut_keys_tests.rs` drives the keys a look
|
||||
| 2026-10-11 | minor | Canvas fixes: boolean groups clicked where their result is, a layer dragged inside a group stays in it, View ▸ Frame outlines and View ▸ Slices draw |
|
||||
| 2026-10-11 | minor | Outline mode done: outlines for the selection (the selected layers draw as outlines, the rest normally) and mask outlines |
|
||||
| 2026-10-11 | minor | Design panel arc fields, live boolean editing (operands on the canvas, live results, per-operand operations), shape builder on strokes and open paths, one-sided widths (Alt-drag a width handle) |
|
||||
| 2026-11-09 | patch | M8, #2146: K focuses the Scale tool's factor field with its text selected, so K, 2, Enter scales the selection by two about the panel's origin (FigCraft's starts at the top left; Figma's grid starts at the centre, left for a follow-up because the origin also sets where a handle drag pivots, which is not measured) in one undo step, after which the tool returns to Move with the selection kept; Escape in the field closes it with the tool back on Move and nothing changed (measured in Figma's web app, 2026-11-09; `pressing_k_focuses_the_scale_field_with_its_text_selected`, `k_two_enter_scales_the_selection_by_two`, `escape_in_the_scale_field_closes_it_and_changes_nothing`) |
|
||||
| 2026-10-10 | major | Created from the ROADMAP's look-and-feel and interaction items, the keymap and the canvas code |
|
||||
Reference in new issue
Block a user