Workspace's right panel has no 'auto-arrange' or 'tidy' button — user with 20 stitch objects scattered around the canvas has to manually drag each one, no Figma-style 'auto-arrange in a grid' affordance #301

New issue

Closed

opened 2026-10-04 03:48:34 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 03:48:34 +00:00

Owner

Finding

grep -rn 'tidy\|autoArrange\|arrangeGrid' src/components/workspace/ returns 0. The workspace has no auto-arrange.

A user with 20 stitch objects scattered around the canvas:

Wants to align them in a 4x5 grid
Has to drag each one
Time-consuming

The fix is a "Tidy" button that auto-arranges the objects.

Where

Workspace right panel: src/components/workspace/RightPanel.tsx
No tidy: grep -rn 'tidy' src/components/workspace/ returns 0
The stitch object list: same file

Suggested fix shape

UI: a "Tidy" button in the right panel's header (or in a context menu):

<button
  onClick={onTidy}
  data-testid="tidy-objects"
  title="Arrange objects in a tidy grid"
>
  <LayoutGrid size={12} /> Tidy
</button>

Behavior: arrange the selected (or all) objects in a grid:

const onTidy = () => {
  const targets = selectedIds.length > 0 
    ? stitchObjects.filter((o) => selectedIds.includes(o.id))
    : stitchObjects;
  const cols = Math.ceil(Math.sqrt(targets.length));
  const cellSize = 50;  // mm
  const next = targets.map((obj, i) => ({
    ...obj,
    x: (i % cols) * cellSize,
    y: Math.floor(i / cols) * cellSize,
  }));
  // ... apply via dispatch
};

Settings: a "Tidy spacing" input (default 50mm) and "Tidy columns" input (default = sqrt(n)).
History: single undoable action.
Visual feedback: a brief animation showing the rearrangement.

Severity

Low. The user can drag. Power users with many objects notice.

Discovered by

Gap analysis (2026-10-02) of workspace stitch object operations.

The stitch object list has reorder (per #182). The auto-arrange is the bulk version.
The editor's align (per #258) is the parallel; the workspace's tidy is the auto version.
Figma/Illustrator have "Tidy Up" / "Distribute." Standard.

## Finding `grep -rn 'tidy\|autoArrange\|arrangeGrid' src/components/workspace/` returns 0. The workspace has no auto-arrange. A user with 20 stitch objects scattered around the canvas: - Wants to align them in a 4x5 grid - Has to drag each one - Time-consuming The fix is a "Tidy" button that auto-arranges the objects. ## Where - Workspace right panel: `src/components/workspace/RightPanel.tsx` - No tidy: `grep -rn 'tidy' src/components/workspace/` returns 0 - The stitch object list: same file ## Suggested fix shape 1. **UI**: a "Tidy" button in the right panel's header (or in a context menu): ```tsx <button onClick={onTidy} data-testid="tidy-objects" title="Arrange objects in a tidy grid" > <LayoutGrid size={12} /> Tidy </button> ``` 2. **Behavior**: arrange the selected (or all) objects in a grid: ```ts const onTidy = () => { const targets = selectedIds.length > 0 ? stitchObjects.filter((o) => selectedIds.includes(o.id)) : stitchObjects; const cols = Math.ceil(Math.sqrt(targets.length)); const cellSize = 50; // mm const next = targets.map((obj, i) => ({ ...obj, x: (i % cols) * cellSize, y: Math.floor(i / cols) * cellSize, })); // ... apply via dispatch }; ``` 3. **Settings**: a "Tidy spacing" input (default 50mm) and "Tidy columns" input (default = sqrt(n)). 4. **History**: single undoable action. 5. **Visual feedback**: a brief animation showing the rearrangement. ## Severity Low. The user can drag. Power users with many objects notice. ## Discovered by Gap analysis (2026-10-02) of workspace stitch object operations. ## Related - The stitch object list has reorder (per #182). The auto-arrange is the bulk version. - The editor's align (per #258) is the parallel; the workspace's tidy is the auto version. - Figma/Illustrator have "Tidy Up" / "Distribute." Standard.

Mark added the

feature-request

triage-approved

labels

2026-10-04 03:48:34 +00:00

Mark referenced this issue from a commit

2026-10-04 21:07:54 +00:00

fix(#301): 'Tidy' button auto-arranges scattered stitch objects in a grid

Mark commented

2026-10-04 21:12:21 +00:00

Author

Owner

Shipped fix(#301) at 31b9810 on origin/main.

Adds a Tidy button to the Object List toolbar in the workspace right panel. One-click auto-arrange that snaps scattered stitch objects into a tidy grid (Figma-style Tidy Up):

When >=2 stitch objects exist and nothing is selected, every object's boundingBox snaps to a ceil(sqrt(n))-col grid with the largest boundingBox as the cell size and 8mm of spacing between rows/columns.
With a selection, only the selected objects tidy.
Origin lands at the centroid of the existing boundingBoxes so the grid sits where the user already had things (vs. snapping to (0,0) and teleporting the design off-hoop).
Single undoable history entry — undo reverses every object's boundingBox in one step.

Implementation:

New TIDY_OBJECTS action in useWorkspace.ts (mirrors the existing REORDER_OBJECTS pattern).
New RightPanel toolbar above the existing (Grid3x3 icon, disabled below 2 objects, X selected / N objects counter on the left).
11 new tests in issue-301.test.tsx cover the reducer grid math, sub-selection tidy, custom spacing, undo round-trip, and the button's dispatch contract.

Verification:

vitest run src/components/workspace/issue-301.test.tsx — 11/11 pass.
tsc -b clean.
eslint clean on changed files.
git log -1 on origin/main shows 31b9810.

Note: Forgejo Actions CI for this commit is queued but the runner is currently offline (matches the pattern for all recent triage-runner pushes on this repo). The local test + tsc + eslint gates are all green, which is what past successful triage-runner pushes on this repo shipped against.

Shipped fix(#301) at 31b9810 on origin/main. Adds a Tidy button to the Object List toolbar in the workspace right panel. One-click auto-arrange that snaps scattered stitch objects into a tidy grid (Figma-style Tidy Up): - When >=2 stitch objects exist and nothing is selected, every object's boundingBox snaps to a ceil(sqrt(n))-col grid with the largest boundingBox as the cell size and 8mm of spacing between rows/columns. - With a selection, only the selected objects tidy. - Origin lands at the centroid of the existing boundingBoxes so the grid sits where the user already had things (vs. snapping to (0,0) and teleporting the design off-hoop). - Single undoable history entry — undo reverses every object's boundingBox in one step. Implementation: - New TIDY_OBJECTS action in useWorkspace.ts (mirrors the existing REORDER_OBJECTS pattern). - New RightPanel toolbar above the existing <ObjectList> (Grid3x3 icon, disabled below 2 objects, X selected / N objects counter on the left). - 11 new tests in issue-301.test.tsx cover the reducer grid math, sub-selection tidy, custom spacing, undo round-trip, and the button's dispatch contract. Verification: - vitest run src/components/workspace/issue-301.test.tsx — 11/11 pass. - tsc -b clean. - eslint clean on changed files. - git log -1 on origin/main shows 31b9810. Note: Forgejo Actions CI for this commit is queued but the runner is currently offline (matches the pattern for all recent triage-runner pushes on this repo). The local test + tsc + eslint gates are all green, which is what past successful triage-runner pushes on this repo shipped against.

Mark closed this issue

2026-10-04 21:12:24 +00:00