# omarmgaber/interactive-2d-visualization-engine architecture

> Architecture diagram of the GitHub repository omarmgaber/interactive-2d-visualization-engine, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/omarmgaber/interactive-2d-visualization-engine
- Repository: https://github.com/omarmgaber/interactive-2d-visualization-engine

## Overview

This repository is both a reusable interactive 2D visualization engine and a reference app for exploring data structures and algorithms. The user workflow is to start a runtime session, create a visualization through the editor, interact with it, and control its animation or playback; settings persist across sessions. The README documents the engine’s event, system, animation, and extensibility capabilities. Several engine internals were not sampled, so their relationships are shown only where the README supports them or omitted when ownership is unclear.

Main entry points: [`src/App.tsx`](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/App.tsx) (Reference app), [`src/engine/VisualizationRuntime.ts`](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/VisualizationRuntime.ts) (Visualization runtime), [`src/RuntimeSession.ts`](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/RuntimeSession.ts) (Runtime session), [`src/engine/managers/SettingsManager.ts`](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/managers/SettingsManager.ts) (Settings manager)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and session"]
  node_app["Reference app<br/>[App.tsx]"]
  node_session["Runtime session<br/>[RuntimeSession.ts]"]
end

subgraph group_editor["Editor interface"]
  node_canvas["Runtime canvas<br/>[RuntimeCanvas.tsx]"]
  node_context_menu["Canvas context menu"]
  node_modal_manager["Modal manager<br/>[ModalManager.tsx]"]
  node_array_modal["Create array modal"]
  node_controls["Structure controls"]
  node_settings_ui["Settings UI<br/>[Settings.tsx]"]
  node_toast["Event notifications<br/>[ToastLog.tsx]"]
end

subgraph group_runtime["Visualization runtime"]
  node_runtime["Visualization runtime"]
  node_events["Events and commands<br/>[RuntimeEvents.ts]"]
  node_systems["Runtime systems<br/>[System.ts]"]
  node_visuals["Visual objects<br/>[VisualObject.ts]"]
end

subgraph group_capabilities["Visualization capabilities"]
  node_structures["Data structures<br/>[Structure.ts]"]
  node_algorithms["Sorting algorithms"]
  node_actions["Action playback<br/>[ActionPlayer.ts]"]
  node_animations["Animation control"]
end

subgraph group_settings["Settings persistence"]
  node_settings_manager["Settings manager<br/>[SettingsManager.ts]"]
  node_settings_nodes["Settings tree<br/>[SettingsNode.ts]"]
  node_storage_strategy["Storage strategy<br/>[StorageStrategy.ts]"]
  node_persistence["Persistence interface"]
end

node_user(("User"))

node_user -->|"uses"| node_app
node_app -->|"renders"| node_canvas
node_app -->|"renders"| node_modal_manager
node_app -->|"renders"| node_settings_ui
node_app -->|"renders"| node_controls
node_app -->|"renders"| node_toast
node_canvas -->|"starts"| node_session
node_context_menu -->|"opens modal"| node_modal_manager
node_modal_manager -->|"renders"| node_array_modal
node_array_modal -->|"accesses runtime"| node_session
node_session -->|"starts and destroys"| node_runtime
node_runtime -.->|"coordinates"| node_systems
node_runtime -.->|"coordinates"| node_events
node_runtime -.->|"renders"| node_visuals
node_structures -.->|"visualizes as"| node_visuals
node_algorithms -.->|"produces steps"| node_actions
node_actions -.->|"controls playback"| node_animations
node_toast -.->|"shows notifications"| node_events
node_settings_manager -->|"registers and imports"| node_settings_nodes
node_settings_manager -->|"loads and saves"| node_storage_strategy
node_storage_strategy -->|"uses storage"| node_persistence
node_runtime -.->|"manages settings"| node_settings_manager
node_settings_ui -->|"reads runtime settings"| node_session

click node_app "https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/App.tsx"
click node_session "https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/RuntimeSession.ts"
click node_canvas "https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/editor/components/RuntimeCanvas.tsx"
click node_context_menu "https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/editor/components/EngineContextMenu.tsx"
click node_modal_manager "https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/editor/modals/ModalManager.tsx"
click node_array_modal "https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/editor/modals/CreateArrayModal.tsx"
click node_controls "https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/editor/structures/StructureControlsHub.tsx"
click node_settings_ui "https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/editor/settings/Settings.tsx"
click node_toast "https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/editor/components/ToastLog.tsx"
click node_runtime "https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/VisualizationRuntime.ts"
click node_events "https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/events/RuntimeEvents.ts"
click node_systems "https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/systems/System.ts"
click node_visuals "https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/visuals/VisualObject.ts"
click node_structures "https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/structures/Structure.ts"
click node_algorithms "https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/algorithms/sorting/SortingAlgorithm.ts"
click node_actions "https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/action/ActionPlayer.ts"
click node_animations "https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/animations/AnimationController.ts"
click node_settings_manager "https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/managers/SettingsManager.ts"
click node_settings_nodes "https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/settings/SettingsNode.ts"
click node_storage_strategy "https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/settings/strategy/storage/StorageStrategy.ts"
click node_persistence "https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/settings/strategy/persist/PersistSettingsStorage.ts"

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_app,node_session,node_user toneBlue
class node_canvas,node_context_menu,node_modal_manager,node_array_modal,node_controls,node_settings_ui,node_toast toneAmber
class node_runtime,node_events,node_systems,node_visuals toneMint
class node_structures,node_algorithms,node_actions,node_animations toneRose
class node_settings_manager,node_settings_nodes,node_storage_strategy,node_persistence toneIndigo
```

## Components

### App and session

- [Reference app](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/App.tsx): `src/App.tsx`
- [Runtime session](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/RuntimeSession.ts): `src/RuntimeSession.ts`

### Editor interface

- [Runtime canvas](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/editor/components/RuntimeCanvas.tsx): `src/editor/components/RuntimeCanvas.tsx`
- [Canvas context menu](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/editor/components/EngineContextMenu.tsx): `src/editor/components/EngineContextMenu.tsx`
- [Modal manager](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/editor/modals/ModalManager.tsx): `src/editor/modals/ModalManager.tsx`
- [Create array modal](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/editor/modals/CreateArrayModal.tsx): `src/editor/modals/CreateArrayModal.tsx`
- [Structure controls](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/editor/structures/StructureControlsHub.tsx): `src/editor/structures/StructureControlsHub.tsx`
- [Settings UI](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/editor/settings/Settings.tsx): `src/editor/settings/Settings.tsx`
- [Event notifications](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/editor/components/ToastLog.tsx): `src/editor/components/ToastLog.tsx`

### Visualization runtime

- [Visualization runtime](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/VisualizationRuntime.ts): `src/engine/VisualizationRuntime.ts`
- [Events and commands](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/events/RuntimeEvents.ts): `src/engine/events/RuntimeEvents.ts`
- [Runtime systems](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/systems/System.ts): `src/engine/systems/System.ts`
- [Visual objects](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/visuals/VisualObject.ts): `src/engine/visuals/VisualObject.ts`

### Visualization capabilities

- [Data structures](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/structures/Structure.ts): `src/engine/structures/Structure.ts`
- [Sorting algorithms](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/algorithms/sorting/SortingAlgorithm.ts): `src/engine/algorithms/sorting/SortingAlgorithm.ts`
- [Action playback](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/action/ActionPlayer.ts): `src/engine/action/ActionPlayer.ts`
- [Animation control](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/animations/AnimationController.ts): `src/engine/animations/AnimationController.ts`

### Settings persistence

- [Settings manager](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/managers/SettingsManager.ts): `src/engine/managers/SettingsManager.ts`
- [Settings tree](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/settings/SettingsNode.ts): `src/engine/settings/SettingsNode.ts`
- [Storage strategy](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/settings/strategy/storage/StorageStrategy.ts): `src/engine/settings/strategy/storage/StorageStrategy.ts`
- [Persistence interface](https://github.com/omarmgaber/interactive-2d-visualization-engine/blob/main/src/engine/settings/strategy/persist/PersistSettingsStorage.ts): `src/engine/settings/strategy/persist/PersistSettingsStorage.ts`

### Other components

- **User**

## Connections

- User → Reference app: uses (evidence: `README.md`)
- Reference app → Runtime canvas: renders (evidence: `src/App.tsx`)
- Reference app → Modal manager: renders (evidence: `src/App.tsx`)
- Reference app → Settings UI: renders (evidence: `src/App.tsx`)
- Reference app → Structure controls: renders (evidence: `src/App.tsx`)
- Reference app → Event notifications: renders (evidence: `src/App.tsx`)
- Runtime canvas → Runtime session: starts (evidence: `src/editor/components/RuntimeCanvas.tsx`)
- Canvas context menu → Modal manager: opens modal
- Modal manager → Create array modal: renders (evidence: `src/editor/modals/ModalManager.tsx`)
- Create array modal → Runtime session: accesses runtime
- Runtime session → Visualization runtime: starts and destroys (evidence: `src/RuntimeSession.ts`)
- Visualization runtime → Runtime systems: coordinates
- Visualization runtime → Events and commands: coordinates
- Visualization runtime → Visual objects: renders
- Data structures → Visual objects: visualizes as
- Sorting algorithms → Action playback: produces steps
- Action playback → Animation control: controls playback
- Event notifications → Events and commands: shows notifications (evidence: `README.md`)
- Settings manager → Settings tree: registers and imports (evidence: `src/engine/managers/SettingsManager.ts`)
- Settings manager → Storage strategy: loads and saves (evidence: `src/engine/managers/SettingsManager.ts`)
- Storage strategy → Persistence interface: uses storage (evidence: `src/engine/settings/strategy/storage/StorageStrategy.ts`)
- Visualization runtime → Settings manager: manages settings
- Settings UI → Runtime session: reads runtime settings