Fix pixel persistence and improve mobile UX

- Fix pixel data storage to include user information (userId, username, timestamp)
- Enhance zoom controls to center properly without drift
- Improve mobile modal centering with flexbox layout
- Add dynamic backend URL detection for network access
- Fix CORS configuration for development mode
- Add mobile-optimized touch targets and safe area support

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
martin 2025-08-22 20:14:48 +02:00
commit 415919b3e1
14 changed files with 172 additions and 82 deletions

View file

@ -191,9 +191,17 @@ export const useCanvasStore = create<CanvasState>()(
// If center point is provided, zoom towards that point
if (centerX !== undefined && centerY !== undefined) {
const zoomFactor = clampedZoom / state.viewport.zoom;
newViewport.x = centerX - (centerX - state.viewport.x) * zoomFactor;
newViewport.y = centerY - (centerY - state.viewport.y) * zoomFactor;
const BASE_PIXEL_SIZE = 32;
const currentPixelSize = BASE_PIXEL_SIZE * state.viewport.zoom;
const newPixelSize = BASE_PIXEL_SIZE * clampedZoom;
// Calculate what canvas coordinate is at the center point
const canvasCenterX = (centerX + state.viewport.x) / currentPixelSize;
const canvasCenterY = (centerY + state.viewport.y) / currentPixelSize;
// Calculate new viewport to keep same canvas point at center
newViewport.x = canvasCenterX * newPixelSize - centerX;
newViewport.y = canvasCenterY * newPixelSize - centerY;
}
set({ viewport: newViewport });