# kully/pixel-paint architecture

> Architecture diagram of the GitHub repository kully/pixel-paint, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/kully/pixel-paint
- Repository: https://github.com/kully/pixel-paint

## Overview

Pixel Paint is a browser-based, vanilla-JavaScript pixel-art editor. Users choose a drawing tool and palette, edit a 32×32 canvas, and can use selection operations and undo/redo; the README also documents PNG export. The excerpts show event handling, canvas state, history, palettes, and tool behavior, but do not show all feature wiring or the PNG export implementation. Dashed edges mark documented capabilities whose implementation path or runtime connection is not established by the excerpts.

Main entry points: [`js/eventHandlers.js`](https://github.com/kully/pixel-paint/blob/master/js/eventHandlers.js) (Event Handlers), [`js/historyStates.js`](https://github.com/kully/pixel-paint/blob/master/js/historyStates.js) (Canvas History), [`js/tools.js`](https://github.com/kully/pixel-paint/blob/master/js/tools.js) (Drawing Tools), [`js/script.js`](https://github.com/kully/pixel-paint/blob/master/js/script.js) (Color Selection)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editing["Canvas Editing"]
  node_interface["Editor Interface<br/>[index.html]"]
  node_canvas["Pixel Canvas<br/>[utils.js]"]
  node_selection["Selection Editing<br/>[eventHandlers.js]"]
end

subgraph group_interaction["Input and Tools"]
  node_input["Event Handlers<br/>[eventHandlers.js]"]
  node_toolset["Drawing Tools<br/>[tools.js]"]
  node_fill["Flood Fill<br/>[algo.js]"]
  node_line["Line Drawing<br/>[algo.js]"]
end

subgraph group_state["Color and History"]
  node_appstate["Editor State<br/>[script.js]"]
  node_historyapi["History Controls<br/>[script.js]"]
  node_history["Canvas History<br/>[historyStates.js]"]
  node_colors["Color Selection<br/>[script.js]"]
  node_palettes["NES and GB Palettes<br/>[palette.js]"]
  node_colorutils["Color Utilities<br/>[utils.js]"]
end

subgraph group_output["Export"]
  node_png["PNG Export"]
end

node_artist(("Artist"))

node_artist -->|"uses"| node_interface
node_interface -.->|"dispatches events"| node_input
node_input -->|"activates tools"| node_toolset
node_input -->|"handles selection"| node_selection
node_input -->|"invokes undo redo"| node_historyapi
node_input -->|"updates color"| node_colors
node_toolset -->|"updates active tool"| node_appstate
node_toolset -->|"edits cells"| node_canvas
node_artist -.->|"uses fill tool"| node_fill
node_artist -.->|"draws lines"| node_line
node_appstate -->|"initializes history"| node_history
node_historyapi -->|"moves history pointer"| node_history
node_history -->|"restores saved pixels"| node_canvas
node_history -->|"captures pixels"| node_canvas
node_colors -.->|"uses palette colors"| node_palettes
node_colors -->|"converts colors"| node_colorutils
node_artist -.->|"saves artwork"| node_png

click node_interface "https://github.com/kully/pixel-paint/blob/master/index.html"
click node_canvas "https://github.com/kully/pixel-paint/blob/master/js/utils.js"
click node_selection "https://github.com/kully/pixel-paint/blob/master/js/eventHandlers.js"
click node_input "https://github.com/kully/pixel-paint/blob/master/js/eventHandlers.js"
click node_toolset "https://github.com/kully/pixel-paint/blob/master/js/tools.js"
click node_fill "https://github.com/kully/pixel-paint/blob/master/js/algo.js"
click node_line "https://github.com/kully/pixel-paint/blob/master/js/algo.js"
click node_appstate "https://github.com/kully/pixel-paint/blob/master/js/script.js"
click node_historyapi "https://github.com/kully/pixel-paint/blob/master/js/script.js"
click node_history "https://github.com/kully/pixel-paint/blob/master/js/historyStates.js"
click node_colors "https://github.com/kully/pixel-paint/blob/master/js/script.js"
click node_palettes "https://github.com/kully/pixel-paint/blob/master/js/palette.js"
click node_colorutils "https://github.com/kully/pixel-paint/blob/master/js/utils.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_interface,node_canvas,node_selection toneBlue
class node_input,node_toolset,node_fill,node_line toneAmber
class node_appstate,node_historyapi,node_history,node_colors,node_palettes,node_colorutils toneMint
class node_png toneRose
class node_artist toneIndigo
```

## Components

### Canvas Editing

- [Editor Interface](https://github.com/kully/pixel-paint/blob/master/index.html): `index.html`
- [Pixel Canvas](https://github.com/kully/pixel-paint/blob/master/js/utils.js): `js/utils.js`
- [Selection Editing](https://github.com/kully/pixel-paint/blob/master/js/eventHandlers.js): `js/eventHandlers.js`

### Input and Tools

- [Event Handlers](https://github.com/kully/pixel-paint/blob/master/js/eventHandlers.js): `js/eventHandlers.js`
- [Drawing Tools](https://github.com/kully/pixel-paint/blob/master/js/tools.js): `js/tools.js`
- [Flood Fill](https://github.com/kully/pixel-paint/blob/master/js/algo.js): `js/algo.js`
- [Line Drawing](https://github.com/kully/pixel-paint/blob/master/js/algo.js): `js/algo.js`

### Color and History

- [Editor State](https://github.com/kully/pixel-paint/blob/master/js/script.js): `js/script.js`
- [History Controls](https://github.com/kully/pixel-paint/blob/master/js/script.js): `js/script.js`
- [Canvas History](https://github.com/kully/pixel-paint/blob/master/js/historyStates.js): `js/historyStates.js`
- [Color Selection](https://github.com/kully/pixel-paint/blob/master/js/script.js): `js/script.js`
- [NES and GB Palettes](https://github.com/kully/pixel-paint/blob/master/js/palette.js): `js/palette.js`
- [Color Utilities](https://github.com/kully/pixel-paint/blob/master/js/utils.js): `js/utils.js`

### Export

- **PNG Export**

### Other components

- **Artist**

## Connections

- Artist → Editor Interface: uses (evidence: `README.md`)
- Editor Interface → Event Handlers: dispatches events
- Event Handlers → Drawing Tools: activates tools (evidence: `js/eventHandlers.js`)
- Event Handlers → Selection Editing: handles selection (evidence: `js/eventHandlers.js`)
- Event Handlers → History Controls: invokes undo redo (evidence: `js/eventHandlers.js`)
- Event Handlers → Color Selection: updates color (evidence: `js/eventHandlers.js`)
- Drawing Tools → Editor State: updates active tool (evidence: `js/tools.js`)
- Drawing Tools → Pixel Canvas: edits cells (evidence: `js/tools.js`)
- Artist → Flood Fill: uses fill tool (evidence: `README.md`)
- Artist → Line Drawing: draws lines
- Editor State → Canvas History: initializes history (evidence: `js/script.js`)
- History Controls → Canvas History: moves history pointer (evidence: `js/script.js`)
- Canvas History → Pixel Canvas: restores saved pixels
- Canvas History → Pixel Canvas: captures pixels (evidence: `js/historyStates.js`)
- Color Selection → NES and GB Palettes: uses palette colors (evidence: `README.md`)
- Color Selection → Color Utilities: converts colors (evidence: `js/script.js`)
- Artist → PNG Export: saves artwork (evidence: `README.md`)