diff --git a/CLAUDE.md b/CLAUDE.md index decbead..b575e42 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -179,12 +179,56 @@ Puppeteer settings for A4 worksheets: - Margins: zero (CSS handles margins) - `preferCSSPageSize: true` +## Visual Position Editor + +`output/html/editor.html` — a standalone drag-and-drop editor for repositioning elements (asteroids, icons, etc.) in generated worksheets. + +### Usage + +``` +http://localhost:3300/html/editor.html?file=collecting-asteroids-1.html +``` + +- **Mouse drag** — move elements freely +- **Arrow keys** — nudge 1mm (Shift+Arrow = 5mm) +- **Copy All JSON** — export all positions to clipboard +- **Copy Changes** — export only moved elements +- **`window.getConfig()`** — same via console + +### How it works + +The editor `fetch()`es the worksheet HTML and injects it into its own DOM, adding drag-and-drop behavior. The worksheet HTML stays clean — no editor code touches it. The editor identifies draggable elements via CSS selector (e.g., `img[src*="pack3-asteroids"]` for asteroids). + +### Applying positions from editor + +User copies JSON from editor, gives it to Claude. Claude applies positions via a Node.js one-liner: + +```js +// Pattern: regex-replace positions in order per page +html.replace( + /(