How omarmgaber/interactive-2d-visualization-engine works
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: App.tsx Reference app · VisualizationRuntime.ts Visualization runtime · RuntimeSession.ts Runtime session · SettingsManager.ts Settings manager
Components 22
App and session
- Reference app
src/App.tsx - Runtime session
src/RuntimeSession.ts
Editor interface
- Runtime canvas
src/editor/components/RuntimeCanvas.tsx - Canvas context menu
src/editor/components/EngineContextMenu.tsx - Modal manager
src/editor/modals/ModalManager.tsx - Create array modal
src/editor/modals/CreateArrayModal.tsx - Structure controls
src/editor/structures/StructureControlsHub.tsx - Settings UI
src/editor/settings/Settings.tsx - Event notifications
src/editor/components/ToastLog.tsx
Visualization runtime
- Visualization runtime
src/engine/VisualizationRuntime.ts - Events and commands
src/engine/events/RuntimeEvents.ts - Runtime systems
src/engine/systems/System.ts - Visual objects
src/engine/visuals/VisualObject.ts
Visualization capabilities
- Data structures
src/engine/structures/Structure.ts - Sorting algorithms
src/engine/algorithms/sorting/SortingAlgorithm.ts - Action playback
src/engine/action/ActionPlayer.ts - Animation control
src/engine/animations/AnimationController.ts
Settings persistence
- Settings manager
src/engine/managers/SettingsManager.ts - Settings tree
src/engine/settings/SettingsNode.ts - Storage strategy
src/engine/settings/strategy/storage/StorageStrategy.ts - Persistence interface
src/engine/settings/strategy/persist/PersistSettingsStorage.ts
Other components
- User
Connections 23
- User → Reference app: uses
README.md - Reference app → Runtime canvas: renders
src/App.tsx - Reference app → Modal manager: renders
src/App.tsx - Reference app → Settings UI: renders
src/App.tsx - Reference app → Structure controls: renders
src/App.tsx - Reference app → Event notifications: renders
src/App.tsx - Runtime canvas → Runtime session: starts
src/editor/components/RuntimeCanvas.tsx - Canvas context menu → Modal manager: opens modal
- Modal manager → Create array modal: renders
src/editor/modals/ModalManager.tsx - Create array modal → Runtime session: accesses runtime
- Runtime session → Visualization runtime: starts and destroys
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
README.md - Settings manager → Settings tree: registers and imports
src/engine/managers/SettingsManager.ts - Settings manager → Storage strategy: loads and saves
src/engine/managers/SettingsManager.ts - Storage strategy → Persistence interface: uses storage
src/engine/settings/strategy/storage/StorageStrategy.ts - Visualization runtime → Settings manager: manages settings
- Settings UI → Runtime session: reads runtime settings