Phase 4: rules mode, score panel, overlays, drag-time scoring

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-17 13:03:47 -04:00
parent 5d7df0187a
commit eb04a658b8
7 changed files with 416 additions and 16 deletions
+17 -5
View File
@@ -2,7 +2,7 @@
A web tool for venues (events, banquets, conferences) to lay out furniture in a room and, eventually, auto-optimize the layout.
## Current scope: Phases 1-3 (UI only)
## Current scope: Phases 1-4 (UI + scoring, no optimizer)
Layout and editing UI. No optimizer yet.
@@ -29,7 +29,16 @@ Layout and editing UI. No optimizer yet.
- Keep-clear zones: the door swing square and the 0.6 m strip inside the opening, the 0.3 m strip under a wall screen, and obstacles. `getBlockedRects(room)` returns them all and `isValidPlacement` reads it, so furniture can't overlap them (red outline, drop blocked). Doors/screens can't sit on furniture or obstacles or share wall length; obstacles can't overlap furniture, each other, or door/screen zones.
- Export downloads `room.json` (width, height, doors, screens, obstacles; no furniture). Import validates with `parseRoom` (`roomSchema.ts`) and shows a clear error; if furniture is placed it asks for confirmation first, and if the placed furniture doesn't fit the imported room it clears all furniture and warns.
Out of scope: non-rectangular rooms, floor plan image import, phone scanning, placement rules, scoring, optimization. Do not design in a way that blocks the roadmap below.
**Rules and scoring (Phase 4)** - measures the layout only; there is NO optimizer and nothing moves automatically.
- All scoring is pure TS in `src/scoring/` (no React/Konva): `scoreLayout(room, items, configs, rules, weights, {debug})` returns the five sub-scores (0..1 or `null` = n/a), the 0-100 overall (`overallScore`, weighted average of the non-null scores by the 0-10 priority weights), issues (text + item ids), rule violations and optional overlay data. Roughly 12 ms for a 10x8 room, 85 ms for 60x60 with 120 items.
- `seats.ts` `getSeatPoints`: N points evenly around a table's perimeter (seatsOverride, else type default); standalone seating = its center, or `seats` points along its long side; a single chair within 0.8 m of a table edge is that table's seat and isn't counted again.
- `occupancy.ts`: internal 0.1 m grid (never drawn, nothing snaps to it) from `getBlockedRects` + the true rotated furniture, with a chamfer clearance transform and a Dial's-algorithm `reachFrom`. Cached per variant and rebuilt only when the room or items arrays change. Door keep-clear zones are walkable for pathfinding.
- loadingScore: paths from loading doors (any door if none is marked) through >= 0.9 m clear width; 0.6 * fraction of items reachable + 0.4 * (1 - normalized avg path length). screenScore: per seat, angle off the screen normal (ideal <= 45 deg), distance (ideal 1.5-6x screen width), obstacles block line of sight (furniture doesn't); null with no screen. accessScore: per table, fraction of perimeter with 0.6 m free clearance reachable from a door; null with no tables. comfortScore: seat spacing (0.9 m), door distance (1.5 m), not flush to obstacles, blended with crowding (> 0.9 seats/m2).
- Rules mode (third tab): list editor for keepApart, keepNear, screenDistance, doorDistance, againstWall, each with a priority (Required, High 3, Medium 2, Low 1). `evaluateRules` returns violations (rule id, item ids, meters off); `rulesScore = 1 - weighted violated fraction` over non-required rules. Required violations outline items in orange and are listed in the score panel but never block dragging.
- Score panel (top of the sidebar in Layout mode, collapsible): overall number, five labeled bars with priority wheels, required violations, top issues (click to highlight items), and overlay toggles (loading paths, sight lines, table clearance; off by default). Weights and rules live in the store. During a drag the score recomputes at most ~10x/s.
- Tests: `npm test` (vitest) covers seat points, empty room, reachable vs walled-off table, blocked line of sight, comfort, rules and the weighted overall.
Out of scope: the optimizer, auto-moving anything, non-rectangular rooms, floor plan image import, phone scanning, placement rules, scoring, optimization. Do not design in a way that blocks the roadmap below.
## Tech stack
@@ -74,7 +83,9 @@ interface FurnitureTypeConfig {
// seats for an item = item.seatsOverride ?? config.seatsPerUnit (effectiveSeats)
```
Store (`store.ts`; `setRoom` replaces the room, optionally clearing furniture): `{ room, items, configs: Record<id, config>, typeOrder: id[] }`. Defaults live in the configs (chair 0.5x0.5, table 1.8x0.8 w/ 8 seats, screen 2x0.2). Chairs and table seats are independent.
Rules/weights: `type Priority = "required"|"high"|"medium"|"low"`; `Rule { id; kind: keepApart|keepNear|screenDistance|doorDistance|againstWall; priority; typeA; typeB?; min?; max? }`; `ScoreWeights { loading, screen, access, comfort, rules }` (0-10, default 5).
Store (`store.ts`; `setRoom` replaces the room, optionally clearing furniture): `{ room, items, configs: Record<id, config>, typeOrder: id[], rules, weights }`. Defaults live in the configs (chair 0.5x0.5, table 1.8x0.8 w/ 8 seats, screen 2x0.2). Chairs and table seats are independent.
## Conventions
@@ -87,8 +98,9 @@ Store (`store.ts`; `setRoom` replaces the room, optionally clearing furniture):
## File layout
- `src/types.ts`; `src/geometry.ts` (pure: `boundsOf`, `clampToRoom`, `overlaps`, `isValidPlacement`, `tryUpdate`, `resizeLength`, `fitScale`, plus room rules: `getBlockedRects`, `isValidWallItem`, `isValidObstacle`, `isLayoutValid`, `minRoomSize`, `tryResizeRoom`, `findWallSpot`, `findObstacleSpot`); `src/roomSchema.ts` (pure: `parseRoom`, `exportRoom`); `src/inventory.ts` (pure: `placedCount`, `remaining`, `effectiveSeats`); `src/store.ts` (reducer + built-in configs).
- `src/scoring/`: `index.ts` (`scoreLayout`, `overallScore`), `seats.ts`, `occupancy.ts`, `loading.ts`, `screen.ts`, `access.ts`, `comfort.ts`, `rules.ts`, `geom.ts`, `types.ts`, `scoring.test.ts`.
- `src/App.tsx`: owns the store, selection, sidebar mode, palette drag, room scale, Delete key.
- `src/components/`: `Palette`, `TypeMenu`, `ItemPanel`, `CustomForm`, `ModeToggle`, `RoomPanels`, `Wheel`, `Room` (Konva), `FurnitureShape`, `Icons`, `ScaleBar`, `panelStyles`.
- `src/components/`: `Palette`, `TypeMenu`, `ItemPanel`, `CustomForm`, `ModeToggle`, `RoomPanels`, `ScorePanel`, `RulesPanel`, `Wheel`, `Room` (Konva), `FurnitureShape`, `Icons`, `ScaleBar`, `panelStyles`.
## Roadmap (not built yet, don't block)
@@ -115,6 +127,6 @@ npx tsc --noEmit # type check
## Working agreement
- Ask before expanding scope past Phase 3.
- Ask before expanding scope past Phase 4. Commit and push after each finished change (a teammate works in the same repo): fetch first, rebase if needed. Don't commit `dist/` or `node_modules/` changes.
- After changes, make sure the app builds and type checks.
- Hackathon pace: prefer simple and working over clever.