Article-22193-Tools-Palette-Part-2-Layered-Sidebar-Architecture/README.md

Article-22193-Tools-Palette-Part-2-Layered-Sidebar-Architecture

This repository is an article-derived reference project based on the original MQL5 article. It does not claim to reproduce the full original source code unless files are explicitly attached.

## Overview

This project documents and reconstructs the MQL5 Expert Advisor architecture presented in article 22193. The article refactors a chart-side tools palette into a layered object-oriented sidebar with:

- supersampled canvas rendering
- anti-aliased rounded corners and borders
- light/dark theme management
- category registration for drawing tool groups
- chart-attached bitmap label rendering

The implementation shown in the article is a self-contained sidebar UI foundation intended for future expansion with interaction, flyout panels, and drawing actions.

## Original Article

- **Article ID:** 22193
- **Title:** Tools Palette Part 2: Layered Sidebar Architecture
- **Author:** Allan Munene Mutiiria
- **Publication date:** 2026.05.08
- **Category:** MQL5 / UI architecture / chart tools
- **URL:** https://www.mql5.com/en/articles/22193

## Repository Purpose

This repository serves as a reference reconstruction of the article's demonstrated design and code structure for a layered chart sidebar in MQL5.

Its purpose is to preserve the article's technical ideas in repository form:

- separation of rendering, theming, registry, canvas, layout, and shell logic
- reusable canvas primitives for rounded geometry and borders
- theme-driven visual styling
- registry-based category definition
- initialization and teardown flow through standard MQL5 event handlers

## Key Concepts

- `CCanvas`-based UI rendering on MetaTrader 5 charts
- supersampling and downsampling for anti-aliased output
- alpha compositing with per-pixel blending
- selective rounded corners depending on snap state
- layered inheritance-based class architecture
- centralized theme color application
- category metadata registry
- chart object lifecycle management

## Algorithm / Architecture Summary

The article describes a 7-layer class hierarchy:

1. **`CCanvasPrimitives`**
- low-level drawing helpers
- alpha blending
- rounded rectangle filling
- quadrilateral scanline fill
- border edge and arc drawing
- high-resolution rendering plus downsampling

2. **`CThemeManager`**
- stores dark/light state
- applies a `ThemeColorSet`

3. **`CCategoryRegistry`**
- populates an array of `CategoryDefinition`
- registers 8 sidebar categories:
- Cursors
- Lines
- Channels
- Pitchfork
- Gann
- Fibonacci
- Shapes
- Annotate

4. **`CCanvasLayer`**
- owns the normal-resolution and high-resolution canvases
- creates, destroys, and resizes canvas resources

5. **`CSidebarLayout`**
- computes panel height and button layout
- maintains geometry and clipping boundaries

6. **`CSidebarRenderer`**
- composes the sidebar background, header, border, indicators, icons, and separators

7. **`CToolsSidebar`**
- public shell for initialization and destruction
- integrates with `OnInit`, `OnDeinit`, and `OnChartEvent`

Rendering flow, as described in the article:

- create display and high-resolution canvases
- draw the panel background at high resolution
- apply selective corner rounding depending on left/right snap mode
- draw header strip and grip dots
- draw category indicators
- draw border
- downsample to the display canvas
- overlay icon glyphs and separator lines
- update the chart bitmap label

The event flow shown in the article is minimal: initialization and cleanup are implemented, while interaction handling is intentionally left empty for future parts.

## Mentioned or Attached Files

### Explicitly attached files

No attached source files were available in the processed input.

### Files mentioned in the article text

- `Tools Palette Part 2.mq5`
- `Canvas/Canvas.mqh`

## Statistics

- **Classes described:** 7
- **Enumerations described:** 2
- **Main category count:** 8
- **Input parameters shown:** 6
- **Canvas layers used:** 2
- **Supersample factor:** 4

## Tags

`MQL5`, `MetaTrader5`, `CCanvas`, `Chart-UI`, `Sidebar`, `Tools-Palette`, `OOP`, `Supersampling`, `Theme-Management`, `Rendering`

## Difficulty

Intermediate to Advanced

## Limitations

- The repository is based on article content only unless source files are explicitly attached.
- No full original repository structure was provided in the processed input.
- Interactive behavior is not implemented in the shown code; `OnEvent(...)` is a placeholder.
- Backtesting evidence in the article is visual/descriptive, not a formal automated test suite.
- No installation or build workflow beyond standard MQL5 compilation can be safely inferred.
- If this repository contains reconstructed code, it should be treated as a reference implementation rather than a guaranteed byte-for-byte copy of the article author's original source.

## Reference

Original article: Allan Munene Mutiiria, **Tools Palette Part 2: Layered Sidebar Architecture**
https://www.mql5.com/en/articles/22193