111 lines
3.1 KiB
Markdown
111 lines
3.1 KiB
Markdown
# Image Studio
|
|
|
|
Image Studio is a Bun + React image editor prototype. It uses a command-driven architecture for document and editor state, a canvas/WebGL renderer layer, and a lightweight React UI for tools, layers, imports, exports, and shortcuts.
|
|
|
|
## Features
|
|
|
|
- Import images into an artboard
|
|
- Save and open versioned project files with embedded, project-owned assets
|
|
- Automatic local recovery snapshots after document changes
|
|
- Export the active artboard as PNG
|
|
- Layer selection and layer sheet
|
|
- Select, transform, pan, brush, eraser, chroma key, and magic wand tools
|
|
- Mask-edit workflow support
|
|
- Undo/redo through command history
|
|
- Keyboard shortcuts and pointer/wheel canvas input
|
|
|
|
## Tech stack
|
|
|
|
- [Bun](https://bun.sh/) for runtime, package management, tests, and builds
|
|
- React 19
|
|
- Tailwind CSS 4
|
|
- shadcn/ui-style component utilities
|
|
- TypeScript
|
|
|
|
## Getting started
|
|
|
|
Install dependencies:
|
|
|
|
```bash
|
|
bun install
|
|
```
|
|
|
|
Start the development server:
|
|
|
|
```bash
|
|
bun dev
|
|
```
|
|
|
|
To start Image Studio together with the local headless ComfyUI server:
|
|
|
|
```bash
|
|
bun run dev:full
|
|
```
|
|
|
|
The combined launcher reuses a ComfyUI server already listening at
|
|
`http://127.0.0.1:8188`. Otherwise, it starts the existing local ComfyUI
|
|
installation and stops that process when Image Studio exits. Its paths and
|
|
address can be overridden with the `COMFYUI_BASE_DIR`, `COMFYUI_SOURCE_DIR`,
|
|
`COMFYUI_PYTHON`, `COMFYUI_MODEL_PATHS_CONFIG`, `COMFYUI_HOST`, and
|
|
`COMFYUI_PORT` environment variables.
|
|
|
|
Build for production:
|
|
|
|
```bash
|
|
bun run build
|
|
```
|
|
|
|
Run the production server:
|
|
|
|
```bash
|
|
bun start
|
|
```
|
|
|
|
## Scripts
|
|
|
|
| Command | Description |
|
|
| --- | --- |
|
|
| `bun dev` | Start the app with Bun hot reload |
|
|
| `bun run dev:full` | Start the app and local headless ComfyUI server |
|
|
| `bun run build` | Build the production bundle |
|
|
| `bun start` | Run the production server |
|
|
| `bun test` | Run tests |
|
|
| `bun run lint` | Run ESLint |
|
|
|
|
## Keyboard shortcuts
|
|
|
|
| Shortcut | Action |
|
|
| --- | --- |
|
|
| `S` | Select tool |
|
|
| `B` | Brush tool |
|
|
| `E` | Eraser tool |
|
|
| `K` | Chroma key tool |
|
|
| `W` | Magic wand tool |
|
|
| `Shift` + click | Add to magic wand selection |
|
|
| `Alt` + click | Subtract from magic wand selection |
|
|
| `P` | Pan tool |
|
|
| `Space` | Hold to pan |
|
|
| `L` | Toggle layers |
|
|
| `Cmd/Ctrl` + `O` | Open image |
|
|
| `Shift` + `Cmd/Ctrl` + `O` | Open project |
|
|
| `Cmd/Ctrl` + `S` | Save project |
|
|
| `Cmd/Ctrl` + `Z` | Undo |
|
|
| `Shift` + `Cmd/Ctrl` + `Z` | Redo |
|
|
| `Delete` / `Backspace` | Delete selection |
|
|
|
|
## Project structure
|
|
|
|
```text
|
|
app/ Composition root for app wiring
|
|
commands/ Deterministic state changes and command history
|
|
core/ Pure document/domain models
|
|
editor/ Transient editor state, tools, viewport, selection, store
|
|
input/ Keyboard, pointer, wheel, and canvas input resolution
|
|
renderer/ Canvas/WebGL rendering and overlays
|
|
view/ React UI shell and controls
|
|
```
|
|
|
|
## Architecture notes
|
|
|
|
State changes flow through commands. React components present state and dispatch user intent, while document/editor mutations are handled by command modules. The renderer consumes document and editor snapshots to draw the canvas and overlays without owning application state.
|