Skip to content

Polish the FerroDesign editor and add Scale and Slice tools - #2

Merged
wieslawsoltes merged 174 commits into
mainfrom
polish/figma-editor-workflows
Nov 7, 2026
Merged

wieslawsoltes merged 174 commits into
mainfrom
polish/figma-editor-workflows

Conversation

@wieslawsoltes

@wieslawsoltes wieslawsoltes commented Oct 31, 2026 •

Copy link
Copy Markdown
Contributor

Layer hierarchy, shared resize and canvas-only editing

  • Drag a name in Layers to reorder siblings, or drop inside a frame or group. A line or outline previews the destination. Moving across free parents preserves world geometry. Auto-layout rows follow flow order. Escape cancels, edge scrolling reaches virtualized rows, and one Undo restores the hierarchy and selection.
  • Move now exposes shared side and corner handles for multiple freely positioned layers. The resize preserves opposite edges, affine geometry and individual stroke/font sizes. Shift locks proportions, Alt/Option anchors the center, and the handles snap to layout guides. The native width and height fields follow the preview once per frame. The dimensions badge uses the measured dock bounds to keep the readout visible. Resizing auto-width text gives it a fixed wrapping box. The separate Scale tool remains available for scaling the artwork and its paint/text metrics together.
  • Drag X, Y, W, H or rotation in the inspector to scrub the selection, or Alt/Option-drag inside the field. Each editable layer starts from its exact authored value. Modifiers and vertical motion change precision. A click enters the numeric field and the complete drag commits once. Returning to the origin or cancelling restores bindings and constrained geometry.
  • Minimize the sidebars with Ctrl/Cmd+Shift+\, or hide the chrome with Ctrl/Cmd+\. The artwork remains editable. In the minimized workspace the desktop inspector follows selection and phone users choose when to open it. The canvas-only restore control supports touch, F6 and Enter.

The branch includes main at 8e5ac06 with the pinned FerroUI update c4c4cf87. Integrated CI

At 1a9ea40, 555 core and 310 native editor tests passed. The downloaded release passed 33 checks on each Chromium renderer (Software2D and WebGL2). At 97% zoom, the Orbit fixture showed 407.81 in the native inspector during a drag, matching the 407.8082-unit width of both frames. The full shared size badge cleared the dock by 23 screen pixels. Hosted layout and selection checks

Canvas, batch editing and playback

  • Drag a marquee to see enclosed layers highlight as the pointer moves. Ctrl/Cmd switches to nested layers, including while the pointer is stationary. Escape restores the original selection. Move uses the final pointer position even when no separate motion event arrived.
  • Option/Alt-drag to preview and place a copy. Cmd/Ctrl+D repeats the placed spacing. Copies preserve nested transforms and internal prototype links. Dragging a main component creates a linked instance. Move and copy use the visible rounded contour when choosing a destination inside clipped frames. Drag preview
  • Press F2 or Cmd/Ctrl+R with multiple layers selected to preview and apply names in Layers order. The dialog supports captured text, regular expressions, and padded ascending or descending numbers. Locked subtrees are skipped. One Undo restores all names. On a 320 × 568 screen the preview scrolls above the fixed action row. Phone rename dialog
  • Nudge position, size, or rotation from the focused inspector field. Arrow keys step by 1, Shift by 10, and Alt by 0.1. Mixed values retain their individual precision. Bold, Italic and alignment now show mixed state and apply consistently across editable text.
  • Each page remembers its camera during the editing session. Page navigation and Undo/Redo restore the view, including after a resize. Prototype playback adds Previous/Next, restart shortcuts and keyboard focus traversal. Frame history retains scroll position and authored key interactions take precedence. Phone prototype player

Verification. All 550 core and 303 native editor tests passed locally, along with seven JavaScript test files and 68 Python checks. Chromium passed 16 focused checks and the full 15-check selection scenario on each release renderer, Software2D and WebGL2. The test harness waits for the fitted prototype camera and explicitly activates Move after canceling Rectangle. Final CI run

Measuring, editing pages and previewing flows

  • Hold Alt/Option with Move active to measure the horizontal and vertical distances to a hovered layer, or the insets to a selected child’s parent. Ctrl/Cmd switches to deeper hit testing. The labels remain readable at different zoom levels and disappear on release or focus loss. Resize and corner-radius handles keep their native priority over measurement inside their hit areas.
  • Rename a page from its row with a double-click or F2. The native Pages menu also supports touch renaming and moving a page. A page keeps its identity, artwork, and camera through reordering and Undo.
  • The native position, size and rotation fields evaluate arithmetic. With layers 64 and 96 units wide, entering (Mixed / 2) + 6 produces 38 and 54 in one undoable edit. The existing FerroUI NumberBox evaluator handles expressions. Invalid calculations keep the draft available for correction.
  • The prototype player names the current frame or overlay and provides 44-DIP Back, Restart and Done controls below the artwork. Restart begins at the original frame. Done restores the authored document and editing state. The preview refits on rotation.

Canvas measurements · Page menu · Inspector arithmetic · Phone prototype

Canvas, search and small screens

  • Move can resize an unlocked layer from any side in its transformed local axes. A click on transparent geometry uses normal layer picking. A side drag activates after three screen DIPs. The opposite edge stays fixed. Shift preserves proportions, Alt/Option keeps the center fixed, and Escape cancels. The measured size label shows fractional dimensions and stays inside the viewport.
  • Ctrl/Cmd+F opens Layers search, including on a phone. Matching descendants show their ancestor paths and clearing the search restores expansion. Layers searches the active page and Assets searches reusable components across pages.
  • Quick Actions searches tool, file and layer commands by name or shortcut. Typing R puts Rectangle first. Arrow keys follow the displayed order. Enter uses the current text, Tab stays inside the palette, and Escape returns focus to the canvas.
  • At 320 px the dock shows seven 44-DIP targets. Each of the four tool families keeps its own native flyout and remembered tool. Text, Comment and Quick Actions remain directly accessible.

Side resize · Phone dock · Quick Actions · Layers search

Editor workflows

  • Group Move, Scale, region, shape and drawing tools in native FerroUI flyouts. Each group remembers its last tool. The compiled XAML inspector supports exact zoom, scale multipliers, dimensions and nine scale anchors.
  • Scale with K using edge and corner handles. Uniform scaling covers child geometry, typography, strokes, effects and layout. Instance and style links survive scaling. Tiled fills, strokes and vector faces retain their repeat counts.
  • Draw named export regions with S. Move, rotate and resize slices independently of artwork. PNG and SVG use slice-local coordinates and preserve transparent padding. Multiple targets download in one ZIP with distinct filenames.
  • Support click placement, centered and constrained drawing, directional arrow handles, and insertion into transformed frames. Hand panning bypasses picking. Layers supports range selection, individual toggles and hover previews.
  • Keep the artboard full width on narrow windows. Frame captions ellipsize at low zoom. Quick actions keeps its search field visible and supports arrows, Enter and Escape.

Interaction and visual polish

  • Rename directly in Layers with a double-click, F2, or Cmd/Ctrl+R. Enter commits one undoable rename. Escape cancels it. Reveal in Layers expands the hierarchy and scrolls to a nested or virtualized row.
  • The inspector shows common values and marks differing properties as Mixed. An explicit edit applies to the selected editable layers even when the entered value already matches the first one. Visibility, locking and constraint controls reflect mixed state.
  • The dock retains its selected accent through hover and press. Tool-family menus mark the remembered tool. F6 moves focus from the canvas to the dock, arrows navigate it, and Escape restores canvas focus.
  • Compact drawers show the file and page, expose 44-DIP header controls and dismiss with a backdrop tap or Escape. Dismissal preserves the camera, selection and history. Initial fit waits for a measured canvas when restoring a saved document.

Desktop inspector · Compact workspace · Compact Layers drawer

Earlier validation

Check Result
Rust document engine 544 passed
Native editor and renderer 288 passed
Python CI and cache validators 68 passed
JavaScript host tests 7 test files passed
Release Chromium checks for this round 15 passed on Software2D and 15 on WebGL2. Each renderer exercised geometry formulas and undo, stationary Alt measurement, native page actions, and prototype navigation and dismissal at 320 px. The registered Software2D corner-radius scenario also passed on the final artifact, including individual Alt-drag and exact Undo.
Chromium persistence 5 checks passed
Chromium Software2D and WebGL2 Scaled to 150%, undid the change, drew a slice, decoded the 60 × 40 PNG and verified the CRCs and dimensions in a two-slice ZIP
Registered Software2D scenarios Canvas navigation, selection, geometry authoring and guide bindings passed along with shared 390 px and 10,000-layer checks
Chromium editor polish on Software2D and WebGL2 Verified mixed-width editing and undo, F6 dock focus and navigation, inline layer rename, and dismissal of the Layers drawer at 390 px without changing the document
Registered Software2D UI regressions Six inspector-lifecycle checks passed, including real reloads, and the selection rerun passed all 35 checks including 11 selection assertions, compact layout and the 10,000-layer fixture
Release WebAssembly on Software2D and WebGL2 Five focused Chromium interactions passed on each renderer, including immediate keyboard tool search, ancestor paths and clear, side dragging and exact undo, and selecting a shape from a seven-target 320 px dock
Release polygon and geometry regressions The registered Software2D scenarios passed on the corrected release, including the previously failing transparent-tip click and a real edge drag followed by Undo and Redo
Native compact layout Verified full-width canvas, nine scale-anchor hit targets and bounded caption pixels

A row-projection benchmark with 25 active-page nodes and 16,000 nodes elsewhere measured 1.041 ms per query before and 1.614 µs after the search change, with identical results. With 10,000 rectangles, 20 leaf-resize samples and commit took 0.27–0.40 ms on the scoped path versus 353–395 ms on the full-snapshot path in the same debug build. The resulting documents and undo states matched. Both measurements exclude rendering.

The release SVG benchmark exported 10,000 root rectangles. Repeated single-CPU runs went from 1.50–1.54 s to 89–91 ms, with matching output length and checksum. A separate benchmark of visible-caption lookup on 10,000 roots went from 486.1 µs to 0.8 µs.

Figma Scale reference · Figma Slice reference

All nine CI jobs that ran on 7015eb4 passed, including the four Software2D suites and the WebGL2 smoke suite. GitHub Actions

…nd Layers navigation

Add native interaction and Chromium regressions, including an opt-in comparison against matching artwork exported by Figma.
…e through grouped artwork

Use native accessible inline validation, scroll to the active guide, and exercise the real antialiased rotation target in browser output.
…exports

Cull offscreen guide owners, compare both full artwork and foreground detail against the pinned Figma export, and verify rotated-frame redlines with real input and rendered pixels.
… and page hiding

Distinguish a pending lock grant from a real capture loss, roll back before storage flushes, and verify exact Shift gain beyond the viewport in the release browser.
…ances and frame constraint overrides

Verify keyboard and pointer gestures, visible outline pixels, mobile controls and undo through the editor.
… compact layouts

Keep page hit targets at least 44 DIPs and verify the gestures through native touch events and release Chromium.
@wieslawsoltes
wieslawsoltes marked this pull request as ready for review November 7, 2026 18:07
@wieslawsoltes
wieslawsoltes merged commit f8b44f3 into main Nov 7, 2026
12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant