steveandClaude Opus 4.8
30b36b7033
The editor's technically-riskiest slice, built against mock data so #11 only adds interactions on top. - lib/geometry.ts (+ vitest): world<->screen and object-local<->world transforms, clampScale, zoomViewportAt (the wheel/pinch "keep the point under the cursor stationary" math), zoomToFitRect. 11 geometry tests (round-trips, rotation, cursor-anchored zoom, fit) + 6 units tests. - editor/store.ts: Zustand store for ephemeral editor state — viewport, selection, focusedObjectId (selection interactions grow in #11). - editor/useViewport.ts: @use-gesture wiring — wheel + pinch zoom toward the pointer, drag-pan, scale clamped to [0.05, 20] px/cm, and an animated fitToRect (eased rAF tween). touch-action:none so the browser doesn't fight gestures. - editor/ObjectShape.tsx: rect/circle centered + rotated, kind default colors, name label; non-scaling strokes so outlines stay 1px at any zoom. - editor/GardenCanvas.tsx: full-size svg, single world <g>, fading 1m grid, garden boundary, z-ordered objects; ResizeObserver-driven auto-fit, a zoom readout, and a Fit control. Deps: zustand, @use-gesture/react, vitest (+ test scripts). - GardenEditorPage renders the canvas with a mock scene (#11 swaps in /full). Verified in a real browser: wheel zoom keeps the world point under the cursor stationary (sub-cm drift on a 12m garden), a real drag pans, and Fit animates to frame the garden. tsc + vitest green. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]> Claude-Session: https://claude.ai/code/session_01JdQpdYYsTgtkJBxbcpAszi
41 lines
981 B
JSON
41 lines
981 B
JSON
{
|
|
"name": "pansy-web",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"type": "module",
|
|
"description": "Pansy garden planner — web frontend.",
|
|
"engines": {
|
|
"node": ">=20"
|
|
},
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "tsc --noEmit && vite build",
|
|
"typecheck": "tsc --noEmit",
|
|
"test": "vitest run",
|
|
"test:watch": "vitest",
|
|
"preview": "vite preview"
|
|
},
|
|
"dependencies": {
|
|
"@tanstack/react-query": "^5.62.0",
|
|
"@tanstack/react-router": "^1.95.0",
|
|
"@use-gesture/react": "^10.3.1",
|
|
"clsx": "^2.1.1",
|
|
"react": "^19.0.0",
|
|
"react-dom": "^19.0.0",
|
|
"tailwind-merge": "^2.6.0",
|
|
"zod": "^3.24.1",
|
|
"zustand": "^5.0.14"
|
|
},
|
|
"devDependencies": {
|
|
"@tailwindcss/vite": "^4.0.0",
|
|
"@types/node": "^22.10.5",
|
|
"@types/react": "^19.0.2",
|
|
"@types/react-dom": "^19.0.2",
|
|
"@vitejs/plugin-react": "^4.3.4",
|
|
"tailwindcss": "^4.0.0",
|
|
"typescript": "^5.7.2",
|
|
"vite": "^6.0.7",
|
|
"vitest": "^4.1.10"
|
|
}
|
|
}
|