Editor hard-codes `hoopSize: '4x4'` when saving a design — user designing a 5x7 or 4x4 design has no control over the saved hoop size, the saved design always says '4x4' #238

New issue

Closed

opened 2026-10-04 02:34:07 +00:00 by Mark · 0 comments

Mark commented

2026-10-04 02:34:07 +00:00

Owner

Finding

src/pages/Editor.tsx's handleSave (line 832), handleSaveAsNew (line 905), and a third save path all pass hoopSize: '4x4' literally:

const result = saveDesignToGallery({
  filename,
  stitchObjects,
  threadStops: pathsToThreadStops(paths, threadLibrary),
  designSettings: {
    fileName: filename,
    hoopSize: '4x4',          // ← hardcoded
    fabricType: 'medium',
    stabilizer: 'cut-away',
    machineProfile: 'brother-pr1050x',
  },
  ...
});

grep -n 'hoopSize' src/pages/Editor.tsx shows 6 matches. Of those, 3 are in designSettings payloads and all are '4x4'. The other 3 are unrelated (constants).

The user designing a 5×7 design and saving it has no way to set the saved hoop size. The saved design row in the Gallery will display "4×4" (per DesignCard.tsx:251 / :583 rendering the hoop size).

Where

Editor: src/pages/Editor.tsx:832 (handleSave), 905 (handleSaveAsNew), and a third
The literal '4x4' is in 3 places
The design row displays the saved hoopSize: src/components/gallery/DesignCard.tsx

Suggested fix shape

Three options, in order of correctness:

Add a hoop-size selector to the editor's settings (in the gear-icon Settings modal or as a new section in the right panel):

<select value={hoopSize} onChange={(e) => setHoopSize(e.target.value as HoopSize)}>
  <option value="4x4">4×4"</option>
  <option value="5x7">5×7"</option>
  <option value="6x10">6×10"</option>
  <option value="8x12">8×12"</option>
</select>

The default hoop-size could be auto-detected from the path bounding box (largest hoop that fits the design).

Auto-detect the hoop from the bounding box: on save, compute boundingBox(paths), find the smallest hoop that contains it, and use that as hoopSize. The user sees no setting; the system picks the right one.
Use the workspace's currently-selected hoop (the user might have the workspace on a 5x7 and click "Edit" — the editor should inherit the hoop from the source).

The most useful is a combination: auto-detect by default, user can override in the editor's settings.

The hoopSize and other designSettings fields (fabricType, stabilizer, machineProfile) are all hard-coded — same problem, same fix. The Settings modal already has the design settings form (per #125's open issue about "optional defaults sections"); this would tie into that.

Severity

Medium. The user can't save designs for non-4x4 hoops. Power users with 5x7+ hoops notice immediately.

Discovered by

Code review (2026-10-02) of editor save flow.

#125 (open) — Settings modal: add Optional defaults sections. The hoop/fabric/machine settings could be added there.
The workspace's design settings panel has the form. The editor's save path doesn't read it.
The "saved hoopSize" is shown on the gallery card; the user expects it to match the design size.

## Finding `src/pages/Editor.tsx`'s `handleSave` (line 832), `handleSaveAsNew` (line 905), and a third save path all pass `hoopSize: '4x4'` literally: ```ts const result = saveDesignToGallery({ filename, stitchObjects, threadStops: pathsToThreadStops(paths, threadLibrary), designSettings: { fileName: filename, hoopSize: '4x4', // ← hardcoded fabricType: 'medium', stabilizer: 'cut-away', machineProfile: 'brother-pr1050x', }, ... }); ``` `grep -n 'hoopSize' src/pages/Editor.tsx` shows 6 matches. Of those, 3 are in `designSettings` payloads and all are `'4x4'`. The other 3 are unrelated (constants). The user designing a 5×7 design and saving it has no way to set the saved hoop size. The saved design row in the Gallery will display "4×4" (per `DesignCard.tsx:251` / `:583` rendering the hoop size). ## Where - Editor: `src/pages/Editor.tsx:832` (handleSave), `905` (handleSaveAsNew), and a third - The literal `'4x4'` is in 3 places - The design row displays the saved hoopSize: `src/components/gallery/DesignCard.tsx` ## Suggested fix shape Three options, in order of correctness: 1. **Add a hoop-size selector to the editor's settings** (in the gear-icon Settings modal or as a new section in the right panel): ```tsx <select value={hoopSize} onChange={(e) => setHoopSize(e.target.value as HoopSize)}> <option value="4x4">4×4"</option> <option value="5x7">5×7"</option> <option value="6x10">6×10"</option> <option value="8x12">8×12"</option> </select> ``` The default hoop-size could be auto-detected from the path bounding box (largest hoop that fits the design). 2. **Auto-detect the hoop from the bounding box**: on save, compute `boundingBox(paths)`, find the smallest hoop that contains it, and use that as `hoopSize`. The user sees no setting; the system picks the right one. 3. **Use the workspace's currently-selected hoop** (the user might have the workspace on a 5x7 and click "Edit" — the editor should inherit the hoop from the source). The most useful is a combination: auto-detect by default, user can override in the editor's settings. The `hoopSize` and other `designSettings` fields (fabricType, stabilizer, machineProfile) are all hard-coded — same problem, same fix. The Settings modal already has the design settings form (per #125's open issue about "optional defaults sections"); this would tie into that. ## Severity Medium. The user can't save designs for non-4x4 hoops. Power users with 5x7+ hoops notice immediately. ## Discovered by Code review (2026-10-02) of editor save flow. ## Related - #125 (open) — Settings modal: add Optional defaults sections. The hoop/fabric/machine settings could be added there. - The workspace's design settings panel has the form. The editor's save path doesn't read it. - The "saved hoopSize" is shown on the gallery card; the user expects it to match the design size.