Add Designer v2: Fabric.js label editor with queue, shapes, and smart snapping#27
Conversation
…pping, and template CRUD Rebuilds the designer as an inline tab alongside the photo flow using Fabric.js. Adds server-side template persistence, grid with snap-to-grid, text elements, preview/print integration, and responsive layout. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Smart snap guides (PowerPoint-style) with object-to-object and canvas edge/center alignment. Image tool for adding photos to canvas with auto-scaling. Clean JSON export strips grid/snap guides from templates and queue items.
…esigner v2 Phase 3 finishing touches: shape tool (rect/circle/line), font dropdown, black/white fill toggle, object layering controls (bring forward/send backward), queue duplicate button, and touch-optimized handles and snap thresholds.
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 7935a77cc1
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| // Load JSON onto the main canvas temporarily, export, then we don't restore | ||
| // (caller is iterating the queue so each load is intentional) | ||
| canvas.loadFromJSON(canvasJSON, () => { | ||
| canvas.renderAll(); | ||
| const dataURL = canvas.toDataURL({ format: 'png', multiplier: 1 }); |
There was a problem hiding this comment.
The queue print path loads each queued item into the main Fabric canvas to generate a blob and never restores the previous canvas state. This means if a user has an in‑progress design on the canvas and clicks “Print Queue,” their current work will be replaced by the last queued label after printing completes. That is data loss unless the user saved it elsewhere. Consider caching the current canvas JSON before printQueue() starts and restoring it afterward, or rendering queue items on an offscreen Fabric canvas so the editor state remains untouched.
Useful? React with 👍 / 👎.
Cover the /dev/ direct-write branch and lpr branch in spool_raw, GET template by ID, template 404, and media_dimensions in public config.
1 participant
Summary
Adds Designer v2 — a full Fabric.js-based label editor available as a tab alongside the existing photo flow. Built across three phases:
Phase 1 — Core editor (
1d5b9a3)/api/public-config/api/templatesAPI (JSON file storage)Phase 2 — Queue and images (
42c477d,3b9b3d6)Phase 3 — Shapes, fonts, and polish (
1db3b0d)Other (
7935a77)spool_raw(): whenprinter_namestarts with/dev/, writes directly to the device instead of going through CUPS/lprFiles changed
ditherbooth/static/designer-v2.js— 881-line Fabric.js editor (new)ditherbooth/static/index.html— tab bar, designer container, toolbar markupditherbooth/static/style.css— designer layout, queue strip, toolbar stylesditherbooth/static/app.js— tab switching,initDesignerV2()/onDesignerTabVisible()hooksditherbooth/app.py— template CRUD endpoints,design_modein public configditherbooth/printer/cups.py— USB device direct-write pathtests/test_templates.py— template API tests (new)CLAUDE.md— updated documentationTest plan
pytestto confirm template API tests pass