Add Iced panel adapter and AI chat/script panels
- Implemented a theme system in `iced-panel-adapter` for consistent styling across panels. - Created `iced-panel-ai-chat` for an AI assistant interface, including message handling and UI components. - Developed `iced-panel-script` for a DSL editor with execution capabilities, allowing procedural drawing commands. - Introduced message types for interaction in both chat and script panels. - Added color and theme management for improved visual consistency.
This commit is contained in:
@@ -0,0 +1 @@
|
||||
{"pid":373799,"startedAt":1783749172698}
|
||||
@@ -0,0 +1,262 @@
|
||||
# Plan: Full egui → Iced Feature Port
|
||||
|
||||
## Scope
|
||||
|
||||
Port ALL egui GUI features to Iced. The egui GUI has:
|
||||
- 11 dockable panels + document tabs
|
||||
- 4 external panel crates (filters, AI chat, script, AI script)
|
||||
- 14 modal dialogs
|
||||
- 10 top-level menus
|
||||
- 20 toolbox slots (30+ tools)
|
||||
- Brush panel (30+ styles, 3 view modes)
|
||||
- Color panel (HSL wheel, HSV square, palettes)
|
||||
- Brush editor (4 tabs, live preview)
|
||||
- Shell infrastructure (viewer, tablet, clipboard, themes)
|
||||
- ~60 unique features total
|
||||
|
||||
---
|
||||
|
||||
## Phase 1: Fix Critical Bugs + Working Canvas (MUST DO FIRST)
|
||||
|
||||
**Files:** `app.rs`, `canvas/mod.rs`
|
||||
|
||||
### 1.1 Fix `ButtonPressed` → dispatch `CanvasPointerPressed`
|
||||
- Add `last_cursor_pos: Option<(f32, f32)>` to `HcieIcedApp`
|
||||
- Track cursor position in `CursorMoved` handler
|
||||
- `ButtonPressed` dispatches `CanvasPointerPressed` using tracked position
|
||||
|
||||
### 1.2 Call `refresh_composite()` after every stroke
|
||||
- After `CanvasPointerMoved` and `CanvasPointerReleased`, call `canvas::render::refresh_composite()`
|
||||
|
||||
### 1.3 Fix coordinate mapping with `mouse_area`
|
||||
- Wrap canvas with `iced::widget::mouse_area`
|
||||
- `on_press`, `on_move`, `on_scroll` provide widget-relative coords
|
||||
- Simplify `screen_to_canvas` to just divide by zoom
|
||||
|
||||
### 1.4 Request repaint after state changes
|
||||
- Return `iced::Task::perform(async {}, |_| Message::CompositeRefresh)` from drawing messages
|
||||
|
||||
### 1.5 Remove global subscription
|
||||
- Remove `iced::event::listen_with`
|
||||
- All events come from `mouse_area` on canvas
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: Core Panels
|
||||
|
||||
### 2.1 Layers Panel
|
||||
**File:** New `panels/layers.rs`
|
||||
|
||||
- Layer list with visibility toggle, opacity slider, blend mode selector
|
||||
- Active layer highlighting
|
||||
- Lock toggle
|
||||
- Add/delete/merge down/flatten buttons
|
||||
- Hierarchical group fold/collapse
|
||||
- Reorder (move up/down buttons)
|
||||
- Uses `engine.layer_infos()`, `engine.set_layer_visible()`, `engine.set_layer_opacity()`, `engine.set_layer_blend_mode()`, etc.
|
||||
|
||||
### 2.2 History Panel
|
||||
**File:** New `panels/history.rs`
|
||||
|
||||
- Undo/redo timeline list
|
||||
- Jump-to-history-index on click
|
||||
- Shows `engine.history_description(idx)` for each entry
|
||||
- Current position highlighting
|
||||
|
||||
### 2.3 Properties Panel
|
||||
**File:** New `panels/properties.rs`
|
||||
|
||||
- Dynamic properties based on active tool
|
||||
- Text tool: font, size, color, alignment
|
||||
- Vector shapes: position, size, rotation, fill/stroke
|
||||
- Brush: size, opacity, hardness
|
||||
|
||||
### 2.4 Brushes & Tips Panel
|
||||
**File:** New `panels/brushes.rs`
|
||||
|
||||
- Brush preset browser with categories
|
||||
- Grid/list/card view modes
|
||||
- Brush style selection (30+ styles)
|
||||
- Size/opacity/hardness sliders
|
||||
- Rendered stroke preview
|
||||
- Custom preset save/load
|
||||
- Uses `engine.set_brush_tip()`, `engine.set_color()`, etc.
|
||||
|
||||
### 2.5 Color Palette Panel
|
||||
**File:** New `panels/color_panel.rs`
|
||||
|
||||
- HSV saturation/value square
|
||||
- Hue slider
|
||||
- RGB sliders with numeric inputs
|
||||
- Hex input
|
||||
- Palette grid (saved swatches)
|
||||
- Recent colors
|
||||
|
||||
### 2.6 Toolbar (Top)
|
||||
**File:** New `panels/toolbar.rs`
|
||||
|
||||
- New/Open/Save buttons
|
||||
- Undo/Redo buttons
|
||||
- Zoom in/out/reset
|
||||
- Active tool mode + size/opacity sliders
|
||||
- Theme toggle
|
||||
|
||||
### 2.7 Status Bar (Bottom)
|
||||
**File:** New `panels/status_bar.rs`
|
||||
|
||||
- Active tool name
|
||||
- Canvas coordinates
|
||||
- Zoom slider (logarithmic)
|
||||
- Canvas dimensions
|
||||
|
||||
---
|
||||
|
||||
## Phase 3: Tool-Specific Panels
|
||||
|
||||
### 3.1 Text Editor Panel
|
||||
**File:** New `panels/text_editor.rs`
|
||||
|
||||
- Font selector, size, color
|
||||
- Alignment (left/center/right/justify)
|
||||
- Orientation (horizontal/vertical)
|
||||
- Text effects (rotation, warp, extrude)
|
||||
- Accept/Cancel buttons
|
||||
|
||||
### 3.2 Vector Geometry Panel
|
||||
**File:** New `panels/geometry.rs`
|
||||
|
||||
- List vector shapes on active layer
|
||||
- Per-shape: position, size, rotation, fill, stroke, line cap
|
||||
- Boolean operations between shapes
|
||||
|
||||
### 3.3 Layer Styles Panel
|
||||
**File:** New `panels/layer_styles.rs`
|
||||
|
||||
- 10 style types with toggles
|
||||
- Drop shadow, inner shadow, outer/inner glow
|
||||
- Bevel/emboss, satin, color/gradient/pattern overlay, stroke
|
||||
- Per-style parameter sliders and color pickers
|
||||
|
||||
### 3.4 Layer Details Panel
|
||||
**File:** New `panels/layer_details.rs`
|
||||
|
||||
- Layer ID, name, fill opacity
|
||||
- Clipping mask toggle
|
||||
- Adjustment type display
|
||||
- Effects list
|
||||
|
||||
---
|
||||
|
||||
## Phase 4: Filter System
|
||||
|
||||
### 4.1 Filters Panel (ported from `egui-panel-filters`)
|
||||
**File:** New `panels/filters.rs`
|
||||
|
||||
- Category tree (Blur, Sharpen, Pixelate, Distort, Stylize, Color & Light, Restore, Noise & Pattern, Procedural Textures)
|
||||
- Filter selection with bullet indicators
|
||||
- Dynamic parameter panel via `iced-panel-adapter`
|
||||
- Apply/Reset buttons
|
||||
- Instant preview for applicable filters
|
||||
|
||||
### 4.2 Filter Dialogs
|
||||
**File:** New `dialogs/filters.rs`
|
||||
|
||||
- Parameter dialogs for each filter category
|
||||
- Uses `ModulePanel` + `render_module_panel()` from iced-panel-adapter
|
||||
|
||||
---
|
||||
|
||||
## Phase 5: Menus
|
||||
|
||||
### 5.1 Menu Bar
|
||||
**File:** New `panels/menus.rs`
|
||||
|
||||
- File: New, Open, Save, Save As, Import, Export, Close, Exit
|
||||
- Edit: Undo, Redo, Cut, Copy, Paste, Fill, Free Transform, Preferences
|
||||
- Tools: All tool shortcuts
|
||||
- Image: Adjustments, Image Size, Canvas Size, Rotation, Flip
|
||||
- Layer: New, Delete, Merge Down, Flatten, Styles, Align
|
||||
- Filter: All filter categories with submenus
|
||||
- Select: All, Deselect, Invert, Grow, Shrink, Feather
|
||||
- View: Zoom, Reset Pan, Panels submenu, Theme submenu
|
||||
- Window: Documents list, Dock Layout
|
||||
- Help: About
|
||||
|
||||
---
|
||||
|
||||
## Phase 6: Dialogs
|
||||
|
||||
### 6.1 New Image Dialog
|
||||
### 6.2 Adjustments Dialog (Brightness/Contrast, HSL)
|
||||
### 6.3 Close Confirm Dialog
|
||||
### 6.4 Selection Operation Dialog
|
||||
### 6.5 Settings/Preferences Dialog
|
||||
### 6.6 Expand Canvas Dialog
|
||||
|
||||
---
|
||||
|
||||
## Phase 7: External Panel Crates
|
||||
|
||||
### 7.1 iced-panel-filters (port from egui-panel-filters)
|
||||
- All 35+ filter definitions
|
||||
- Parameter panels via iced-panel-adapter
|
||||
- Instant preview integration
|
||||
|
||||
### 7.2 iced-panel-ai-chat (port from egui-panel-ai-chat)
|
||||
- Streaming chat UI
|
||||
- LLM connectivity (Ollama, OpenAI)
|
||||
- Tool calling (execute on canvas)
|
||||
- DSL script execution
|
||||
|
||||
### 7.3 iced-panel-script (port from egui-panel-script)
|
||||
- Script editor with line numbers
|
||||
- DSL parser and executor
|
||||
- Command reference
|
||||
|
||||
### 7.4 iced-panel-ai-script (port from egui-panel-ai-script)
|
||||
- AI-assisted script generation
|
||||
- Multiple LLM providers
|
||||
|
||||
---
|
||||
|
||||
## Phase 8: Infrastructure
|
||||
|
||||
### 8.1 Tablet/Stylus Input
|
||||
- Pen pressure via evdev or winit events
|
||||
- Map pressure to stroke_to()
|
||||
|
||||
### 8.2 Clipboard
|
||||
- Copy/paste images via arboard
|
||||
- PNG clipboard support
|
||||
|
||||
### 8.3 File I/O
|
||||
- Open/Save/Import/Export
|
||||
- Recent files list
|
||||
- Format support (PNG, JPG, WebP, PSD, KRA, HCIE native)
|
||||
|
||||
### 8.4 Themes
|
||||
- 5 theme presets
|
||||
- Theme switching at runtime
|
||||
|
||||
### 8.5 Multi-Document Tabs
|
||||
- Tab bar for multiple open documents
|
||||
- Tab switching
|
||||
|
||||
---
|
||||
|
||||
## Phase 9: Dock Layout
|
||||
|
||||
### 9.1 Pane Grid Layout
|
||||
- Use iced's `PaneGrid` for dockable panels
|
||||
- Panel drag-and-drop
|
||||
- Panel resize
|
||||
- Layout save/load
|
||||
|
||||
---
|
||||
|
||||
## Verification
|
||||
|
||||
After each phase:
|
||||
1. `cargo build -p hcie-iced-gui` — compiles
|
||||
2. `cargo run -p hcie-iced-gui` — visual verification
|
||||
3. `cargo build -p hcie-gui-egui` — no regression
|
||||
@@ -0,0 +1,226 @@
|
||||
# Iced GUI — Photoshop-Style UI Overhaul 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.
|
||||
|
||||
---
|
||||
|
||||
## 1. Custom Window Frame (No OS Title Bar)
|
||||
|
||||
**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()
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Photoshop-Style Theme
|
||||
|
||||
**Files:** `panels/styles.rs`, `theme.rs`
|
||||
|
||||
### 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 |
|
||||
|
||||
### 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)
|
||||
|
||||
**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 |
|
||||
|
||||
---
|
||||
|
||||
## Execution Order
|
||||
|
||||
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
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
Reference in New Issue
Block a user