loganrsilvers/paintingapp

How loganrsilvers/paintingapp works

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: main.js App bootstrap · HistoryManager.js Undo redo history · DrawManager.js Tool state router · actions Shape and style actions

Components 22

Editor runtime

App bootstrap src/main.js
PixiJS canvas

Input and tools

Tool controls src/managers/ToolsManager.js
Pointer events src/managers/InputManager.js
Tool state router src/managers/DrawManager.js
Shape drawing states src/states
Shape constraints src/states/ShapeConstraints.js

Artwork editing

Selection and outlines src/managers/SelectManager.js
Selection outline src/managers/SelectedShapeOutline.js
Move editing src/managers/MoveManager.js
Scale editing src/managers/ScaleManager.js
Rotate editing src/managers/RotateManager.js
Delete editing src/managers/DeleteManager.js
Shape styling src/managers/ShapeStyle.js
Canvas backgrounds src/managers/BackgroundTexture.js

Actions and history

Shape and style actions src/actions
Undo redo history src/managers/HistoryManager.js

Clipboard and export

Keyboard shortcuts src/keyboard-shortcuts/KeyboardShortcuts.js
Clipboard operations src/managers/ClipboardManager.js
Shape cloning src/managers/ShapeCloner.js
Image download src/main.js

Other components

Editor user

Connections 34

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

Drawn by GitDiagram on November 12, 2026 from the repository's file tree, README and source files. Read as Markdown ·