tutortool/conductor/room-editor-refactor-core.md

Implementation Plan: Room Editor Refactor (Core & Logic)

Objective: Standardize the room layout data model, align backend/frontend types, and refactor the core editor logic for robustness and grid-based precision.

Background: The current room implementation suffers from naming inconsistencies (type vs kind) and coordinate system mismatches (pixels vs grid units). The editor logic in RoomCanvas.svelte is basic and needs to be more robust to support professional room planning.

---

1. Data Model & Type Alignment

Task 1: Standardize LayoutElement Naming

Files to Modify:

• backend/src/models.rs
• frontend/src/lib/types.ts
• backend/demo/demo_seed.sql

Changes:

• Unified field name type (using #[serde(rename = "type")] if necessary in Rust, or changing it consistently).
• Standardize coordinate units: All x, y, width, height values in the database will represent grid units (e.g., 1 unit = 40px) rather than raw pixels.
• Update demo_seed.sql to use these normalized grid units.

Task 2: Backend Validation

Files to Modify:

• backend/src/routes/rooms.rs

Changes:

• Add validation logic to POST /api/admin/rooms and PUT /api/admin/rooms/:id/layout.
• Ensure all elements have unique IDs.
• Validate that type is one of the allowed strings (seat, table, door, gap).

---

2. Editor Core Refactor

Task 3: RoomCanvas Logic Overhaul

Files to Modify:

• frontend/src/lib/RoomCanvas.svelte

Changes:

• Grid Snap: Implement mandatory snap-to-grid (0.5 or 1.0 unit increments) during dragging and resizing.
• State Management: Refactor internal dragging state to be cleaner and more predictable.
• Selection: Improve the selection highlight and event propagation.
• Unit Separation: Ensure the component strictly thinks in grid units, with the rendering layer handling the pixel scaling.

Task 4: Editor UI Improvements

Files to Modify:

• frontend/src/routes/admin/rooms/[roomId]/+page.svelte

Changes:

• Add a "Snap to Grid" toggle.
• Add numeric inputs for precise coordinate editing (X, Y, W, H).
• Implement "duplicate element" functionality.
• Better error handling and visual feedback during saving.

---

3. Verification

Automated Tests:

• backend/src/routes/rooms.rs: Add unit tests for layout validation.
• frontend/tests/rooms.spec.ts: Create a new Playwright test for room editing (creating elements, dragging, snapping, and saving).

Manual Verification:

1. Create a new room.
2. Add a table and two seats.
3. Verify that dragging snaps to the grid.
4. Save and reload to ensure coordinates are preserved exactly.
5. Inspect the SQLite database to confirm coordinates are stored as small grid units (e.g., 2.5) instead of large pixel values.