valknar/paint-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
24 Commits 1 Branch 0 Tags
69a468141cf5bc1913a1ee4565896703bc4f7a4b
Commit Graph

4 Commits

Author SHA1 Message Date
Sebastian Krüger
69a468141c feat(text-tool): implement Photoshop-style on-canvas text editor 
- Replaced modal dialog with inline on-canvas text editor
- Text objects stored as editable entities (non-rasterized)
- Live preview with transparent textarea overlay
- Click on existing text to re-edit
- Drag transform handles to move text
- Auto-commit on click outside (via overlay)
- Text selection with visible highlight
- Hidden original text during editing to prevent double vision
- Position alignment fixes for editing existing text
- Keyboard shortcuts: Ctrl+Enter to commit, Escape to cancel

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 14:31:47 +01:00
Sebastian Krüger
b7b072f6d2 feat: improve UI and transparency support 
UI Improvements:
- Style scrollbars with primary color accent
- Scrollbar thumb transitions on hover (40% → 60% → 80% opacity)
- Add fill tool options to toolbar (color picker + opacity)
- Support for Firefox with scrollbar-color property

Transparency Support:
- Set default canvas background to transparent
- First layer now transparent instead of white fill
- Enables creating images with transparency
- Checkerboard pattern shows through transparent areas
- Proper PNG export support with alpha channel

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 09:17:12 +01:00
Sebastian Krüger
4b01e92b88 feat: implement Phase 2 - Core Canvas Engine with layer system 
Complete canvas rendering infrastructure and state management:

**Type System (types/)**
- Layer interface with blend modes, opacity, visibility
- Canvas state with zoom, pan, grid, rulers
- Tool types and settings interfaces
- Selection and pointer state types

**State Management (store/)**
- Layer store: CRUD operations, reordering, merging, flattening
- Canvas store: zoom (0.1x-10x), pan, grid, rulers, coordinate conversion
- Tool store: active tool, brush settings (size, opacity, hardness, flow)
- Full Zustand integration with selectors

**Utilities (lib/)**
- Canvas utils: create, clone, resize, load images, draw grid/checkerboard
- General utils: cn, clamp, lerp, distance, snap to grid, debounce, throttle
- Image data handling with error safety

**Components**
- CanvasWrapper: Multi-layer rendering with transformations
  - Checkerboard transparency background
  - Layer compositing with blend modes and opacity
  - Grid overlay support
  - Selection visualization
  - Mouse wheel zoom (Ctrl+scroll)
  - Middle-click or Shift+click panning

- LayersPanel: Interactive layer management
  - Visibility toggle with eye icon
  - Active layer selection
  - Opacity display
  - Delete with confirmation
  - Sorted by z-order

- EditorLayout: Full editor interface
  - Top toolbar with zoom controls (±, fit to screen, percentage)
  - Canvas area with full viewport
  - Right sidebar for layers panel
  - "New Layer" button with auto-naming

**Features Implemented**
✓ Multi-layer canvas with proper z-ordering
✓ Layer visibility, opacity, blend modes
✓ Zoom: 10%-1000% with Ctrl+wheel
✓ Pan: Middle-click or Shift+drag
✓ Grid overlay (toggleable)
✓ Selection rendering
✓ Background color support
✓ Create/delete/duplicate layers
✓ Layer merging and flattening

**Performance**
- Dev server: 451ms startup
- Efficient canvas rendering with transformations
- Debounced/throttled event handlers ready
- Memory-safe image data operations

Ready for Phase 3: History & Undo System

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-20 21:20:06 +01:00
Sebastian Krüger
37920401b3 feat: complete Phase 1 - project foundation with Next.js 16 and Tailwind CSS 4 
Initialize modern tech stack following audio-ui patterns:

**Framework Setup**
- Next.js 16 with App Router and Turbopack (ready in 754ms)
- React 19 with TypeScript 5
- Static export configuration for deployment

**Styling System**
- Tailwind CSS 4 with @tailwindcss/postcss
- OKLCH color space for vibrant, perceptually uniform colors
- Custom CSS variables for theming (light/dark modes)
- Canvas-specific color palette (canvas-bg, canvas-grid, canvas-selection)
- Custom animations (fadeIn, slideDown, scaleIn, etc.)
- Checkerboard pattern utility for transparency preview
- Custom scrollbar styling

**State Management**
- Zustand installed for layers, canvas, and history state

**Canvas Libraries**
- pica for high-quality image resizing
- file-saver for export functionality
- uuid for layer ID generation

**Development Experience**
- Path aliases (@/* pattern) configured
- Strict TypeScript with proper type checking
- Auto dark mode detection with localStorage persistence
- Responsive layout with overflow handling

**Initial UI**
- Root layout with theme system
- Landing page showing Phase 1 completion status
- Clean, modern design with gradient title

Ready for Phase 2: Core Canvas Engine implementation.

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-20 21:12:38 +01:00