# loganrsilvers/paintingapp architecture

> Architecture diagram of the GitHub repository loganrsilvers/paintingapp, 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/loganrsilvers/paintingapp
- Repository: https://github.com/loganrsilvers/paintingapp

## Overview

paintingApp is a browser-based PixiJS drawing editor. Users choose a tool, draw on the canvas or select existing artwork, then edit shapes and use undo/redo, clipboard shortcuts, and image download. Its main runtime flow runs from the app bootstrap through pointer events and the active drawing or editing behavior; actions and history provide an internal undoable-operation layer. The README documents further editing and canvas-background features. Some subsystem links are based on README or source-index references because their implementation excerpts were not provided.

Main entry points: [`src/main.js`](https://github.com/loganrsilvers/paintingapp/blob/main/src/main.js) (App bootstrap), [`src/managers/HistoryManager.js`](https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/HistoryManager.js) (Undo redo history), [`src/managers/DrawManager.js`](https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/DrawManager.js) (Tool state router), [`src/actions`](https://github.com/loganrsilvers/paintingapp/tree/main/src/actions) (Shape and style actions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Editor runtime"]
  node_bootstrap["App bootstrap<br/>[main.js]"]
  node_pixi["PixiJS canvas"]
end

subgraph group_input["Input and tools"]
  node_tools["Tool controls<br/>[ToolsManager.js]"]
  node_pointer["Pointer events<br/>[InputManager.js]"]
  node_drawmanager["Tool state router<br/>[DrawManager.js]"]
  node_drawstates["Shape drawing states"]
  node_constraints["Shape constraints"]
end

subgraph group_artwork["Artwork editing"]
  node_select["Selection and outlines<br/>[SelectManager.js]"]
  node_selectedoutline["Selection outline"]
  node_move["Move editing<br/>[MoveManager.js]"]
  node_scale["Scale editing<br/>[ScaleManager.js]"]
  node_rotate["Rotate editing<br/>[RotateManager.js]"]
  node_delete["Delete editing<br/>[DeleteManager.js]"]
  node_style["Shape styling<br/>[ShapeStyle.js]"]
  node_background["Canvas backgrounds"]
end

subgraph group_operations["Actions and history"]
  node_actions["Shape and style actions"]
  node_history[("Undo redo history<br/>[HistoryManager.js]")]
end

subgraph group_export["Clipboard and export"]
  node_shortcuts["Keyboard shortcuts"]
  node_clipboard["Clipboard operations"]
  node_cloner["Shape cloning<br/>[ShapeCloner.js]"]
  node_download["Image download<br/>[main.js]"]
end

node_user(("Editor user"))

node_user -->|"opens editor"| node_bootstrap
node_bootstrap -->|"initializes canvas"| node_pixi
node_bootstrap -->|"configures controls"| node_tools
node_bootstrap -->|"initializes input"| node_pointer
node_bootstrap -->|"initializes drawing"| node_drawmanager
node_bootstrap -->|"initializes selection"| node_select
node_bootstrap -->|"loads backgrounds"| node_background
node_bootstrap -->|"registers shortcuts"| node_shortcuts
node_tools -.->|"selects tools"| node_drawmanager
node_pointer -->|"dispatches events"| node_drawmanager
node_drawmanager -->|"chooses drawing state"| node_drawstates
node_drawstates -->|"constrains geometry"| node_constraints
node_drawstates -->|"executes draw actions"| node_history
node_drawstates -->|"creates shape actions"| node_actions
node_actions -->|"adds artwork"| node_pixi
node_actions -->|"applies texture"| node_background
node_actions -->|"attaches style"| node_style
node_drawmanager -->|"selects editing mode"| node_select
node_drawmanager -->|"selects move mode"| node_move
node_drawmanager -->|"selects scale mode"| node_scale
node_drawmanager -->|"selects rotate mode"| node_rotate
node_select -->|"creates outlines"| node_selectedoutline
node_move -->|"records movement"| node_history
node_scale -->|"records scaling"| node_history
node_rotate -->|"records rotation"| node_history
node_delete -.->|"executes deletion"| node_history
node_history -->|"undoes and redoes"| node_actions
node_shortcuts -->|"triggers undo redo"| node_history
node_bootstrap -->|"handles history buttons"| node_history
node_shortcuts -->|"dispatches clipboard commands"| node_clipboard
node_clipboard -->|"clones shapes"| node_cloner
node_clipboard -->|"records clone actions"| node_history
node_bootstrap -->|"exports canvas image"| node_download
node_shortcuts -.->|"requests PNG export"| node_download

click node_bootstrap "https://github.com/loganrsilvers/paintingapp/blob/main/src/main.js"
click node_tools "https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/ToolsManager.js"
click node_pointer "https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/InputManager.js"
click node_drawmanager "https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/DrawManager.js"
click node_drawstates "https://github.com/loganrsilvers/paintingapp/tree/main/src/states"
click node_constraints "https://github.com/loganrsilvers/paintingapp/blob/main/src/states/ShapeConstraints.js"
click node_select "https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/SelectManager.js"
click node_selectedoutline "https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/SelectedShapeOutline.js"
click node_move "https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/MoveManager.js"
click node_scale "https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/ScaleManager.js"
click node_rotate "https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/RotateManager.js"
click node_delete "https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/DeleteManager.js"
click node_actions "https://github.com/loganrsilvers/paintingapp/tree/main/src/actions"
click node_style "https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/ShapeStyle.js"
click node_background "https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/BackgroundTexture.js"
click node_history "https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/HistoryManager.js"
click node_shortcuts "https://github.com/loganrsilvers/paintingapp/blob/main/src/keyboard-shortcuts/KeyboardShortcuts.js"
click node_clipboard "https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/ClipboardManager.js"
click node_cloner "https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/ShapeCloner.js"
click node_download "https://github.com/loganrsilvers/paintingapp/blob/main/src/main.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_bootstrap,node_pixi,node_user toneBlue
class node_tools,node_pointer,node_drawmanager,node_drawstates,node_constraints toneAmber
class node_select,node_selectedoutline,node_move,node_scale,node_rotate,node_delete,node_style,node_background toneMint
class node_actions,node_history toneRose
class node_shortcuts,node_clipboard,node_cloner,node_download toneIndigo
```

## Components

### Editor runtime

- [App bootstrap](https://github.com/loganrsilvers/paintingapp/blob/main/src/main.js): `src/main.js`
- **PixiJS canvas**

### Input and tools

- [Tool controls](https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/ToolsManager.js): `src/managers/ToolsManager.js`
- [Pointer events](https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/InputManager.js): `src/managers/InputManager.js`
- [Tool state router](https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/DrawManager.js): `src/managers/DrawManager.js`
- [Shape drawing states](https://github.com/loganrsilvers/paintingapp/tree/main/src/states): `src/states`
- [Shape constraints](https://github.com/loganrsilvers/paintingapp/blob/main/src/states/ShapeConstraints.js): `src/states/ShapeConstraints.js`

### Artwork editing

- [Selection and outlines](https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/SelectManager.js): `src/managers/SelectManager.js`
- [Selection outline](https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/SelectedShapeOutline.js): `src/managers/SelectedShapeOutline.js`
- [Move editing](https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/MoveManager.js): `src/managers/MoveManager.js`
- [Scale editing](https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/ScaleManager.js): `src/managers/ScaleManager.js`
- [Rotate editing](https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/RotateManager.js): `src/managers/RotateManager.js`
- [Delete editing](https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/DeleteManager.js): `src/managers/DeleteManager.js`
- [Shape styling](https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/ShapeStyle.js): `src/managers/ShapeStyle.js`
- [Canvas backgrounds](https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/BackgroundTexture.js): `src/managers/BackgroundTexture.js`

### Actions and history

- [Shape and style actions](https://github.com/loganrsilvers/paintingapp/tree/main/src/actions): `src/actions`
- [Undo redo history](https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/HistoryManager.js): `src/managers/HistoryManager.js`

### Clipboard and export

- [Keyboard shortcuts](https://github.com/loganrsilvers/paintingapp/blob/main/src/keyboard-shortcuts/KeyboardShortcuts.js): `src/keyboard-shortcuts/KeyboardShortcuts.js`
- [Clipboard operations](https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/ClipboardManager.js): `src/managers/ClipboardManager.js`
- [Shape cloning](https://github.com/loganrsilvers/paintingapp/blob/main/src/managers/ShapeCloner.js): `src/managers/ShapeCloner.js`
- [Image download](https://github.com/loganrsilvers/paintingapp/blob/main/src/main.js): `src/main.js`

### Other components

- **Editor user**

## Connections

- Editor user → App bootstrap: opens editor (evidence: `src/main.js`)
- App bootstrap → PixiJS canvas: initializes canvas (evidence: `src/main.js`)
- App bootstrap → Tool controls: configures controls (evidence: `src/main.js`)
- App bootstrap → Pointer events: initializes input (evidence: `src/main.js`)
- App bootstrap → Tool state router: initializes drawing (evidence: `src/main.js`)
- App bootstrap → Selection and outlines: initializes selection (evidence: `src/main.js`)
- App bootstrap → Canvas backgrounds: loads backgrounds (evidence: `src/main.js`)
- App bootstrap → Keyboard shortcuts: registers shortcuts (evidence: `src/main.js`)
- Tool controls → Tool state router: selects tools
- Pointer events → Tool state router: dispatches events (evidence: `src/managers/DrawManager.js`)
- Tool state router → Shape drawing states: chooses drawing state (evidence: `src/managers/DrawManager.js`)
- Shape drawing states → Shape constraints: constrains geometry (evidence: `src/states/DrawCircleState.js`)
- Shape drawing states → Undo redo history: executes draw actions (evidence: `src/states/DrawCircleState.js`)
- Shape drawing states → Shape and style actions: creates shape actions (evidence: `src/states/DrawCircleState.js`)
- Shape and style actions → PixiJS canvas: adds artwork (evidence: `src/actions/DrawStarAction.js`)
- Shape and style actions → Canvas backgrounds: applies texture (evidence: `src/actions/DrawStarAction.js`)
- Shape and style actions → Shape styling: attaches style (evidence: `src/actions/DrawStarAction.js`)
- Tool state router → Selection and outlines: selects editing mode (evidence: `src/managers/DrawManager.js`)
- Tool state router → Move editing: selects move mode (evidence: `src/managers/DrawManager.js`)
- Tool state router → Scale editing: selects scale mode (evidence: `src/managers/DrawManager.js`)
- Tool state router → Rotate editing: selects rotate mode (evidence: `src/managers/DrawManager.js`)
- Selection and outlines → Selection outline: creates outlines (evidence: `src/managers/SelectManager.js`)
- Move editing → Undo redo history: records movement (evidence: `src/managers/MoveManager.js`)
- Scale editing → Undo redo history: records scaling (evidence: `src/managers/ScaleManager.js`)
- Rotate editing → Undo redo history: records rotation (evidence: `src/managers/RotateManager.js`)
- Delete editing → Undo redo history: executes deletion (evidence: `src/managers/DeleteManager.js`)
- Undo redo history → Shape and style actions: undoes and redoes (evidence: `src/managers/HistoryManager.js`)
- Keyboard shortcuts → Undo redo history: triggers undo redo (evidence: `src/keyboard-shortcuts/KeyboardShortcuts.js`)
- App bootstrap → Undo redo history: handles history buttons (evidence: `src/main.js`)
- Keyboard shortcuts → Clipboard operations: dispatches clipboard commands (evidence: `src/keyboard-shortcuts/KeyboardShortcuts.js`)
- Clipboard operations → Shape cloning: clones shapes (evidence: `src/managers/ClipboardManager.js`)
- Clipboard operations → Undo redo history: records clone actions (evidence: `src/managers/ClipboardManager.js`)
- App bootstrap → Image download: exports canvas image (evidence: `src/main.js`)
- Keyboard shortcuts → Image download: requests PNG export (evidence: `src/main.js`)