phantom/hcie-rust-v3.05
1
0
Fork 0
Code Issues Pull Requests Actions 12 Packages Projects Releases Wiki Activity

Refactor styles and implement new canvas viewport

Browse Source 
- Updated styles in `styles.rs` to include new pane and canvas backgrounds, while marking unused functions with `#[allow(dead_code)]`.
- Modified `text_editor.rs` to suppress warnings for unused function parameters.
- Enhanced `title_bar.rs` to create a unified title/menu bar with improved hover states and draggable functionality.
- Simplified `sidebar.rs` to always use a single-column layout and improved tool button styling with hover feedback.
- Added a new `viewport.rs` file to implement a custom canvas viewport widget for zoom and pan rendering, replacing the previous layout-based approach.
- Updated theme management in `theme.rs` to suppress warnings for unused methods.
- Adjusted line count report to reflect recent changes in codebase.
This commit is contained in:
Halit Can
2026-07-12 02:05:31 +03:00
parent f4ad22b55b
commit 660694f00f
23 changed files with 2514 additions and 837 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.mimocode/plans/1783771837559-curious-river.md
+194 -203
View File
@@ -1,226 +1,217 @@
# Iced GUI — Photoshop-Style UI Overhaul Plan
# Iced GUI — Remaining Tasks & Reprioritized Plan
## Goal
Transform the iced GUI from a generic dark theme to a professional Photoshop-like appearance with proper toolbox, menus, panels, and window management.
## Current Status
The iced GUI has ~5000 lines across 33 source files. It compiles successfully (16 warnings, 0 errors). Major features are working: dock layout, toolbox with SVG icons, menu system, canvas with checkerboard, dialogs, keyboard shortcuts, brush params, selection, vector shapes, layer management, and theme system.
---
## 1. Custom Window Frame (No OS Title Bar)
## Completed (reference — do not re-do)
**Files:** `main.rs`, `app.rs`
### Changes:
- Set `decorations: false` in iced window settings to hide OS title bar
- Build custom title bar with: app icon, "HCIE" text, menu bar, window controls (min/max/close)
- Add `Message::WindowDrag`, `Message::WindowMinimize`, `Message::WindowMaximize`, `Message::WindowClose`
- Use `iced::window::drag(id)` for title bar drag-to-move
- Use `iced::window::minimize(id, true)` for minimize
- Use `iced::window::toggle_maximize(id)` for maximize
- Title bar: 24px height, `#2a2a2a` background, subtle bottom border
- Window controls: minimize/maximize/close buttons on right side (like Photoshop)
### Window Setup:
```rust
iced::application("HCIE", HcieIcedApp::update, HcieIcedApp::view)
.window_settings(window::Settings {
decorations: false,
..Default::default()
})
```
| # | Feature | Status | Files |
|---|---------|--------|-------|
| 1 | Dock PaneGrid with centered canvas | DONE | `dock/state.rs`, `dock/view.rs` |
| 2 | Brush params wired (size/opacity/hardness/style) | DONE | `app.rs` |
| 3 | Adjustment dialogs (Brightness/Contrast, HSL) | DONE | `dialogs/adjustments.rs` |
| 4 | Selection tool (rectangular drag) | DONE | `app.rs` |
| 5 | Vector shape drawing (Rect/Circle/Line) | DONE | `app.rs` |
| 6 | Keyboard shortcuts (Ctrl+Z/Y/S/N/O/C/V, Esc) | DONE | `app.rs` |
| 7 | CLI file open (`load_path`) | DONE | `main.rs`, `app.rs` |
| 8 | Filter parameters (FilterParamChanged) | DONE | `app.rs` |
| 9 | Menu system (9 menus, dropdown items) | DONE | `panels/menus.rs` |
| 10 | Multi-document tab bar | DONE | `dock/view.rs` |
| 11 | Theme system (5 presets, ThemeColors) | DONE | `theme.rs`, `iced-panel-adapter/theme.rs` |
| 12 | Custom title bar (app name, version, doc info) | DONE | `panels/title_bar.rs` |
| 13 | Properties, Layer Details, Geometry panels | DONE | `panels/*.rs` |
| 14 | SVG icons (64 icons, tool rendering) | DONE | `sidebar/mod.rs` |
| 15 | Checkerboard on canvas | DONE | `canvas/mod.rs` |
| 16 | Clickable color palette swatches | DONE | `sidebar/mod.rs` |
| 17 | Constant pressure for mouse input | DONE | `app.rs` |
| 18 | Toolbox expand/collapse (1→2 column) | DONE | `sidebar/mod.rs` |
| 19 | AI Chat panel (UI only) | DONE | `panels/ai_chat_panel.rs` |
| 20 | Layer Styles panel | DONE | `panels/layer_styles.rs` |
| 21 | Script/AI Script panels | DONE | `panels/script_panel.rs`, `ai_script_panel.rs` |
---
## 2. Photoshop-Style Theme
## Remaining Tasks (prioritized)
**Files:** `panels/styles.rs`, `theme.rs`
### P0 — High Impact, Must Fix
### Color Palette (matching Photoshop):
| Token | Value | Usage |
|-------|-------|-------|
| `bg_app` | `#1e1e1e` | Main app background |
| `bg_panel` | `#2d2d2d` | Panel backgrounds |
| `bg_panel_header` | `#333333` | Panel title bars |
| `bg_hover` | `#3a3a3a` | Hover states |
| `bg_active` | `#404040` | Active/selected states |
| `accent` | `#2d8ceb` | Blue accent (selection, active tool) |
| `border` | `#1a1a1a` | Panel borders (very subtle) |
| `border_high` | `#444444` | Emphasized borders |
| `text_primary` | `#cccccc` | Primary text |
| `text_secondary` | `#888888` | Secondary text |
| `text_disabled` | `#555555` | Disabled text |
| `canvas_bg` | `#262626` | Canvas area background |
#### 1. Custom Window Frame (decorations: false)
**Impact:** Professional look, eliminates OS chrome mismatch
**Files:** `main.rs` (L58-66), `app.rs` (view method), `panels/title_bar.rs`
### Style Functions to Update:
- `panel_background()` — `#2d2d2d` with no visible border
- `panel_header()` — `#333333` background, no horizontal rule
- `active_item_bg()` — subtle `#404040` highlight (NOT blue tint)
- `inactive_item_bg()` — transparent
- `menubar_background()` — `#2a2a2a`
- `statusbar_background()` — `#2a2a2a`
- `sidebar_background()` — `#2d2d2d`
- `titlebar_background()` — `#1e1e1e`
---
## 3. Toolbox with SVG Icons (Photoshop-Style)
**Files:** `sidebar/mod.rs`, new: `sidebar/tool_slots.rs`
### Layout:
- **Single column** (default): 36px wide, icons only, no text labels
- **Two-column mode**: Toggle button (◀/▶ arrow) at top expands to 72px
- Toggle button: small arrow at top of toolbox
- Tool buttons: 28x28px icons, 3px rounded corners
- Active tool: subtle `#404040` background + `#2d8ceb` border
- Hover: `#3a3a3a` background
- Submenu indicator: small triangle for tools with sub-tools
### Tool Slots (matching egui's TOOL_SLOTS):
```
Slot 0: Move
Slot 1: VectorSelect
Slot 2: Select (rect)
Slot 3: Lasso, PolygonSelect (submenu)
Slot 4: MagicWand
Slot 5: SmartSelect, VisionSelect (submenu)
Slot 6: Crop
Slot 7: Eyedropper
Slot 8: Brush
Slot 9: Pen
Slot 10: Spray
Slot 11: Eraser
Slot 12: FloodFill
Slot 13: Gradient
Slot 14: Text
Slot 15: VectorLine
Slot 16: VectorRect
Slot 17: VectorCircle
Slot 18: Vector shapes (submenu: Arrow, Star, Polygon, etc.)
Slot 19: Retouch (submenu: SpotRemoval, RedEye, SmartPatch)
```
### SVG Icons:
- Use existing SVG files from `hcie-egui-app/assets/icons/`
- Copy SVG files to `hcie-iced-app/assets/icons/`
- Use iced's `svg::Handle::from_path()` to load icons
- Tint icons: active=`#2d8ceb`, default=`#cccccc`, hover=`#ffffff`
- Icon size: 20x20px within 28x28 button
### Color Swatches (bottom of toolbox):
- Overlapping fg/bg swatches (20x20 each, offset 2px)
- Swap button (⇅) between them
- Reset to B/W button
---
## 4. Panel Titles (Modern, No Blue Tint)
**Files:** `dock/view.rs`
### Current (bad):
- Blue tinted background on active panel
- Horizontal rule under title
- Primitive appearance
### New (Photoshop-style):
- Panel header: `#333333` background, 24px height
- Title text: 11px, `#cccccc` color, no bold
- No horizontal rule
- Close/maximize buttons: subtle, appear on hover only
- Active panel: slightly lighter header (`#3a3a3a`)
- Panel border: 1px `#1a1a1a` (barely visible)
### Implementation:
- Remove `horizontal_rule` from panel titles
- Replace blue tint with neutral `#3a3a3a` for active
- Make close/maximize buttons hover-only (opacity transition)
- Add small panel icon next to title (from SVG assets)
---
## 5. Menu Dropdown (Overlay, Not Separate Panel)
**Files:** `panels/menus.rs`
### Current (bad):
- Menu opens as a separate panel in the dock
- Takes up space, pushes other content
### New (Photoshop-style):
- Menu dropdown renders as an **overlay** on top of the UI
- Dark background `#2d2d2d`, 1px border `#444444`
- Items: 11px text, 24px height, hover highlight `#3a3a3a`
- Keyboard shortcuts shown on right side in `#888888`
- Separators: 1px line `#3a3a3a`
- Click outside to close
- Escape to close
### Implementation:
- Track `active_menu: Option<usize>` in app state
- When menu button clicked, set `active_menu = Some(idx)`
- Render dropdown as a `Stack` overlay on top of main content
- Use `iced::widget::mouse_area` wrapper to detect clicks outside
- Menu items dispatch `Message::MenuAction(menu_idx, item_idx)`
---
## 6. Dock Manager (Draggable Panels)
**Files:** `dock/state.rs`, `dock/view.rs`
### Current:
- Dock exists with PaneGrid but drag/drop may not be fully functional
- Panel rearrangement limited
### New:
- Ensure `on_drag(Message::PaneDragged)` is properly wired
- Handle `DragEvent::Picked`, `DragEvent::Dropped`, `DragEvent::Canceled`
- On `Dropped`: call `state.drop(pane, target)` for proper rearrangement
- Add right-click context menu on panel titles (Pin, Float, Close)
- Support panel undocking (float) and re-docking
### Implementation:
- Wire `Message::PaneDragged` handler to call appropriate state methods
- Add `PaneDrop(pane, target)` message that calls `state.drop()`
- Add context menu overlay for panel title bars
---
## 7. Menu Items (Full Photoshop-Style)
Current: OS title bar is visible, custom title bar is redundant below it.
Need:
- Set `decorations: false` in window settings
- Add `Message::WindowDrag`, `WindowMinimize`, `WindowMaximize`, `WindowClose`
- Use `iced::window::drag()`, `minimize()`, `toggle_maximize()`
- Merge menu bar INTO title bar (Photoshop-style: app name | menu items | window controls, all in one 28px bar)
- Title bar: make entire bar draggable, buttons on right side
#### 2. Menu Dropdown as Overlay (not inline)
**Impact:** Menus currently push content down when opened
**Files:** `panels/menus.rs`, `app.rs`
### Menu Structure:
| Menu | Items |
|------|-------|
| File | New, Open, Open Recent, Save, Save As, Export PNG, Export JPEG, Close |
| Edit | Undo, Redo, Cut, Copy, Paste, Select All, Deselect, Fill |
| Image | Canvas Size, Image Size, Rotate CW, Rotate CCW, Flip H, Flip V |
| Layer | New Layer, Duplicate, Delete, Merge Down, Flatten, Clear |
| Filter | (all filter categories with submenus) |
| Select | All, Deselect, Invert, Grow, Shrink, Feather |
| View | Zoom In, Zoom Out, Fit Screen, 100%, Panel Toggles |
| Window | Dock Profile, Reset Layout |
| Help | About, Documentation |
Current: Dropdown renders below the menu bar as a `column![bar, dropdown]`, shifting all content down.
Need:
- Wrap main content + dropdown in `iced::widget::Stack`
- Position dropdown absolutely at top-left
- Add `mouse_area` backdrop to close on click-outside
- Keep `active_menu` tracking (already exists)
- Style dropdown with proper hover states per item
#### 3. Unused Warning Cleanup (16 warnings)
**Impact:** Code cleanliness, prevents confusion
**Files:** `panels/styles.rs`, `panels/text_editor.rs`, `theme.rs`
Warnings:
- `panel_header` unused in styles.rs → use in dock title bars
- `hover_item_bg` unused → wire into menu/tool hover states
- `menubar_background` unused → use in menu bar container
- `dropdown_background` unused → use in menu dropdown
- `view` in text_editor.rs → wire into text tool
- `set_preset` in theme.rs → add theme switcher to menu
---
## Execution Order
### P1 — Important UX Polish
1. **Theme colors** — Update `styles.rs` with Photoshop palette
2. **Custom title bar** — Hide OS decorations, build custom title bar
3. **Toolbox SVG icons** — Copy SVGs, implement icon rendering
4. **Toolbox layout** — Single column + expand toggle
5. **Panel titles** — Remove blue tint, modernize
6. **Menu overlay** — Implement dropdown overlay system
7. **Dock drag/drop** — Wire pane rearrangement
8. **Menu items** — Wire all menu actions
#### 4. Menu Actions Fully Wired
**Impact:** Many menu items dispatch to `NoOp` or incomplete handlers
**Files:** `app.rs` (MenuAction handler ~L1340-1410)
Missing wiring:
- Edit menu: Cut (X), Select All (A), Deselect (D), Fill
- Image menu: Canvas Size, Image Size, Rotate CW/CCW/180, Flip H/V, Crop to Selection
- Layer menu: Duplicate, Delete, Clear, Layer Styles, Align
- Filter menu: Color & Light (Levels, Vibrance, Exposure, Posterize, Threshold, Dehaze)
- Select menu: Grow, Shrink, Feather (open SelectionOp dialog)
- View menu: Fit to Window (auto-calc zoom), Debug Mode
- File menu: Export PNG, Export JPEG, Close
#### 5. Hover States for Tool Buttons & Menu Items
**Impact:** No visual feedback on hover
**Files:** `sidebar/mod.rs`, `panels/menus.rs`
Currently: Buttons use static styles, no hover highlight.
Need:
- Track hover state via `iced::widget::mouse_area.on_hover()` or iced hover interaction
- Apply `colors.bg_hover` on hover for tool buttons and menu items
- iced 0.13: use `button::on_hover()` or `style` closure that checks `Status::Hovered`
#### 6. Panel Title Bar Modernization
**Impact:** Current title bars use generic styling
**Files:** `dock/view.rs`
Currently: Title bars show text + close/maximize buttons. Missing:
- Panel type icon (from SVG assets) next to title
- Close/maximize buttons should be hover-only (opacity change)
- Use `colors.bg_hover` for header background (not hardcoded)
- Remove the `horizontal_rule(1)` still used in some places
---
### P2 — Functional Completeness
#### 7. Text Tool Implementation
**Impact:** Text tool is placeholder (TODO handlers)
**Files:** `app.rs` (CanvasPointerPressed handler), new panel
Currently: Text tool selected, but no text input UI.
Need:
- When Text tool active + click on canvas: show text input overlay
- Track: text content, font size, font family, alignment, color
- On confirm: call `engine.draw_text()` to rasterize
- Messages: `TextSizeChanged`, `TextColorChanged`, `TextAccept`, `TextCancel` (exist but unused)
#### 8. Brush Editor (Advanced Params)
**Impact:** Only basic brush params are exposed (size/opacity/hardness/style)
**Files:** `panels/brushes.rs`
Currently: 3 sliders + 4 style buttons.
Need:
- Spacing slider (already in ToolState but not in UI)
- Jitter slider
- Scatter slider
- Brush preview canvas (show brush tip shape)
- Brush presets list (save/load)
#### 9. AI Chat Connection
**Impact:** AI panel shows UI but doesn't connect to any provider
**Files:** `panels/ai_chat_panel.rs`, `app.rs`
Currently: Provider buttons (Ollama/Claude/OpenAI) dispatch NoOp.
Need:
- Wire to `hcie-engine-api` AI client (Ollama compatible)
- Async HTTP requests via `iced::Subscription` or `Task::perform`
- Stream responses into message list
- Map AI commands to engine operations
#### 10. Settings Dialog
**Impact:** No way to configure app settings
**Files:** new: `dialogs/settings.rs`
Need:
- Theme selector (switch between 5 presets)
- Tablet pressure curve settings
- Default brush params
- Canvas background color
- Grid/snap settings
---
### P3 — Nice to Have
#### 11. Context Menu on Panel Titles
- Right-click to Pin, Float, Close panel
- Would require `mouse_area` with secondary click detection
#### 12. Dock Profiles / Reset Layout
- Save/restore panel arrangements
- "Reset to Default" button in Window menu
#### 13. Import SVG/PSD/KRA
- Wire file open dialog to `engine.open_image()` for more formats
- Currently supports PNG/JPG/WebP only via engine
#### 14. Export PNG/JPEG
- Use `engine.get_composite_pixels()` + `image::save_buffer()`
- Wire to File > Export menu items
#### 15. Undo/Redo Visual Feedback
- Highlight current position in history panel
- Show undo count in status bar
---
## Execution Order (recommended next session)
| Phase | Task | Est. Time |
|-------|------|-----------|
| 1 | Custom window frame (decorations: false + draggable title bar) | 45 min |
| 2 | Menu overlay (Stack-based dropdown) | 30 min |
| 3 | Wire unused style functions + fix warnings | 15 min |
| 4 | Wire all menu actions | 30 min |
| 5 | Hover states for tool/menu items | 20 min |
| 6 | Panel title icons + modernize | 20 min |
| 7 | Text tool | 45 min |
| 8 | Brush editor (spacing/jitter/scatter) | 30 min |
**Total: ~3.5 hours for P0+P1+P2 first 3 items**
---
## Verification
1. Build: `cargo build -p hcie-iced-gui`
2. Launch and compare with Photoshop screenshot
3. Test: tool selection, drawing, color picking, menu dropdowns, panel rearrangement
4. Screenshot comparison with Photoshop reference
1. `cargo check -p hcie-iced-gui` — 0 warnings, 0 errors
2. `cargo run -p hcie-iced-gui` — launch and verify:
- No OS title bar, custom title bar with drag
- Menu dropdowns overlay without pushing content
- All menu items dispatch correct actions
- Tool buttons highlight on hover
- Panel titles show icons
3. Test drawing: brush, eraser, vector shapes, text
4. Test dialogs: New Image, Adjustments, Close Confirm
5. Test dock: drag panels, resize splits, close/maximize