Editor has no 'group' or 'ungroup' operations — user with 5 paths forming one logical shape (e.g., a flower: stem + 5 petals) has no way to treat them as a single unit; multi-select exists but no persistent group identity #259

New issue

Closed

opened 2026-10-04 03:37:35 +00:00 by Mark · 0 comments

Mark commented

2026-10-04 03:37:35 +00:00

Owner

Finding

grep -rn 'group\|Group\b' src/components/editor/ returns matches in the import (Group icon) but not in path operations. The editor's path list has no "Group" or "Ungroup" action.

grep -n 'groupId\|groups\b' src/components/editor/types.ts — let me check if the type has a groupId field.

The workspace's ContextMenu (per the snippet) has Group/Ungroup items wired. The editor doesn't.

A user with 5 paths forming a flower (stem + 5 petals) wants to:

Move the whole flower as one unit
Hide the whole flower
Duplicate the whole flower
Currently can multi-select all 5 paths, but the selection is temporary (lost when they click another path)

A persistent group is the right answer. The paths know they're a group; the user can select the group, not the individual paths.

Where

Editor's path operations: src/components/editor/EditorRightPanel.tsx (per-row actions)
Workspace's Group/Ungroup: src/components/workspace/ContextMenu.tsx (per the snippet)
Editor's types.ts: grep -n 'groupId' src/components/editor/types.ts — needs check
No editor group: grep -rn 'group' src/components/editor/ returns only the icon

Suggested fix shape

Type: add groupId: string | null to the StitchPath type.

export interface StitchPath {
  id: string;
  nodes: PathNode[];
  threadColor: string;
  threadIndex: number;
  // ... other fields
  groupId: string | null;
}

Operations: add to the right panel's multi-select summary (per #188):

{selectedPathIds.length >= 2 && (
  <>
    <button onClick={onGroupSelectedPaths} data-testid="group-paths">
      <Group size={12} /> Group selected
    </button>
  </>
)}

onGroupSelectedPaths:

Creates a new group with a generated ID
Sets each selected path's groupId to that ID
Single history push

onUngroupSelectedPaths:

Clears each selected path's groupId

Display: in the path list, show paths in the same group visually grouped (a slight indent, a connecting line on the left, or a group header).
Click to select group: clicking on a group header selects all paths in the group.
EditorContextMenu (per #191): add "Group selection" and "Ungroup" items.

The workspace already has Group/Ungroup; the editor's parallel is missing.

Severity

Low. The user can use multi-select for ad-hoc grouping. Power users with complex designs notice.

Discovered by

Gap analysis (2026-10-02) of editor path operations.

The workspace's Group/Ungroup is wired (per ContextMenu.tsx); the editor's is the parallel.
#188 (open) — Multi-select. Same selection infrastructure.
#258 (filed in this turn) — Align. The align uses multi-select / groups.

## Finding `grep -rn 'group\|Group\b' src/components/editor/` returns matches in the import (`Group` icon) but not in path operations. The editor's path list has no "Group" or "Ungroup" action. `grep -n 'groupId\|groups\b' src/components/editor/types.ts` — let me check if the type has a groupId field. The workspace's `ContextMenu` (per the snippet) has Group/Ungroup items wired. The editor doesn't. A user with 5 paths forming a flower (stem + 5 petals) wants to: - Move the whole flower as one unit - Hide the whole flower - Duplicate the whole flower - Currently can multi-select all 5 paths, but the selection is temporary (lost when they click another path) A persistent group is the right answer. The paths know they're a group; the user can select the group, not the individual paths. ## Where - Editor's path operations: `src/components/editor/EditorRightPanel.tsx` (per-row actions) - Workspace's Group/Ungroup: `src/components/workspace/ContextMenu.tsx` (per the snippet) - Editor's `types.ts`: `grep -n 'groupId' src/components/editor/types.ts` — needs check - No editor group: `grep -rn 'group' src/components/editor/` returns only the icon ## Suggested fix shape 1. **Type**: add `groupId: string | null` to the `StitchPath` type. ```ts export interface StitchPath { id: string; nodes: PathNode[]; threadColor: string; threadIndex: number; // ... other fields groupId: string | null; } ``` 2. **Operations**: add to the right panel's multi-select summary (per #188): ```tsx {selectedPathIds.length >= 2 && ( <> <button onClick={onGroupSelectedPaths} data-testid="group-paths"> <Group size={12} /> Group selected </button> </> )} ``` `onGroupSelectedPaths`: - Creates a new group with a generated ID - Sets each selected path's `groupId` to that ID - Single history push `onUngroupSelectedPaths`: - Clears each selected path's `groupId` 3. **Display**: in the path list, show paths in the same group visually grouped (a slight indent, a connecting line on the left, or a group header). 4. **Click to select group**: clicking on a group header selects all paths in the group. 5. **EditorContextMenu** (per #191): add "Group selection" and "Ungroup" items. The workspace already has Group/Ungroup; the editor's parallel is missing. ## Severity Low. The user can use multi-select for ad-hoc grouping. Power users with complex designs notice. ## Discovered by Gap analysis (2026-10-02) of editor path operations. ## Related - The workspace's Group/Ungroup is wired (per `ContextMenu.tsx`); the editor's is the parallel. - #188 (open) — Multi-select. Same selection infrastructure. - #258 (filed in this turn) — Align. The align uses multi-select / groups.