@tranding-custom-chart/renderer-canvas 0.0.0-stage → 2.0.0

package/README.md

@@ -1,3 +1,41 @@
-# Temporary Holding Version
+# @tranding-custom-chart/renderer-canvas
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+> High-performance, multi-layer Canvas 2D rendering engine with sub-pixel crispness and high-DPI retina display support.
+
+[![Version](https://img.shields.io/badge/version-2.0.0-blue.svg)](https://semver.org)
+[![Canvas 2D](https://img.shields.io/badge/engine-canvas--2d-orange.svg)](#)
+
+## Features
+- **Dual-Layer Architecture**: Dedicated data canvas and interactive overlay canvas for flicker-free 60+ FPS rendering.
+- **High-DPI Retina Scaling**: Physical backing store scaled by DPR with half-pixel alignment (`snapLine`) and sharp borders (`snapRect`).
+- **Coalesced Render Scheduler**: Batches high-frequency draw calls into single `requestAnimationFrame` passes.
+- **20+ Visual Renderers**:
+  - Financial: Candlesticks, Hollow Candles, OHLC Bars, Columns, Line, Line with Markers, Step Line, Area, HLC Area, Baseline, Heikin-Ashi, High-Low, Renko Bricks.
+  - Pro Indicators: Visible Range Volume Profile (VRVP) with POC line & Value Area, Supertrend with buy/sell reversal markers.
+  - Business: Doughnut & Pie (cutout + hover explode), Stacked Bars, Horizontal Bars, Bezier Curved Splines, Radar Risk Grids.
+  - Overlays: Crosshairs, Watermarks, Last Price Lines, Cartesian Grids.
+
+## Installation
+```bash
+npm install @tranding-custom-chart/renderer-canvas @tranding-custom-chart/core
+```
+
+## Quick Start
+```ts
+import { CanvasChartEngine } from '@tranding-custom-chart/renderer-canvas';
+
+const engine = new CanvasChartEngine({
+  container: document.getElementById('chart')!,
+  width: 800,
+  height: 450,
+});
+
+engine.registerDataLayer('main', (ctx) => {
+  // draw series
+});
+
+engine.requestRender();
+```
+
+## License
+UNLICENSED (Internal / In-House Use)

package/dist/canvas-engine.d.ts

@@ -0,0 +1,82 @@
+/**
+ * @file packages/chart-renderer-canvas/src/canvas-engine.ts
+ * High-performance 2D Canvas Chart Engine.
+ * Manages layer creation, High-DPI backing store, rAF scheduling, and disposal.
+ */
+import { type ChartTheme, type Dimension, type Padding, type Scale, type ChartOptions, type DeepPartial, type ChartPlugin, PluginManager, ChartEventEmitter, type ChartEvent, type ChartEventHandler, type ChartEventType, type ChartElementTarget, type Unsubscribe } from '@tranding-custom-chart/core';
+export interface CanvasChartEngineConfig {
+    readonly container: HTMLElement;
+    readonly width?: number | undefined;
+    readonly height?: number | undefined;
+    readonly padding?: Padding | undefined;
+    readonly theme?: ChartTheme | undefined;
+    readonly plugins?: readonly ChartPlugin<any>[] | undefined;
+    readonly onHover?: ((pos: {
+        x: number;
+        y: number;
+    } | null) => void) | undefined;
+    readonly onRangeChange?: ((range: {
+        startRatio: number;
+        endRatio: number;
+    }) => void) | undefined;
+}
+export declare class CanvasChartEngine {
+    private readonly _container;
+    private readonly _bgCanvas;
+    private readonly _overlayCanvas;
+    private readonly _bgCtx;
+    private readonly _overlayCtx;
+    private readonly _scheduler;
+    private readonly _pluginManager;
+    private readonly _emitter;
+    private _chartId;
+    private _hitTestResolver;
+    private _isPointerDown;
+    private _hasDragged;
+    private _dragStartPos;
+    private _lastHoverTarget;
+    private _width;
+    private _height;
+    private _padding;
+    private _theme;
+    private _dpr;
+    private _disposed;
+    private _xScale;
+    private _yScale;
+    private _onHover?;
+    private _drawDataCallback?;
+    private _drawOverlayCallback?;
+    constructor(config: CanvasChartEngineConfig);
+    registerPlugin<O>(plugin: ChartPlugin<O>, options?: O): void;
+    unregisterPlugin(pluginId: string): boolean;
+    getPluginManager(): PluginManager;
+    getChartId(): string;
+    setChartId(id: string): void;
+    getEmitter(): ChartEventEmitter;
+    subscribe<T = unknown>(eventType: ChartEventType | '*', handler: ChartEventHandler<T>): Unsubscribe;
+    on<T = unknown>(eventType: ChartEventType | '*', handler: ChartEventHandler<T>): Unsubscribe;
+    off<T = unknown>(eventType: ChartEventType | '*', handler: ChartEventHandler<T>): void;
+    emit<T = unknown>(event: ChartEvent<T>): void;
+    setHitTestResolver(resolver: ((x: number, y: number) => ChartElementTarget | null) | null): void;
+    setScales(xScale: Scale<number> | null, yScale: Scale<number> | null): void;
+    setDrawCallbacks(drawData: (ctx: CanvasRenderingContext2D, bounds: Dimension, padding: Padding, dpr: number) => void, drawOverlay?: (ctx: CanvasRenderingContext2D, bounds: Dimension, padding: Padding, dpr: number) => void): void;
+    resize(width: number, height: number): void;
+    requestRender(): void;
+    renderOverlayOnly(): void;
+    applyOptions(options: DeepPartial<ChartOptions>): void;
+    getTheme(): ChartTheme;
+    getWidth(): number;
+    getHeight(): number;
+    getPadding(): Padding;
+    getDpr(): number;
+    dispose(): void;
+    private _paint;
+    private _handlePointerDown;
+    private _handlePointerMove;
+    private _handlePointerUp;
+    private _handleDoubleClick;
+    private _handlePointerLeave;
+    private _attachEventListeners;
+    private _detachEventListeners;
+}
+//# sourceMappingURL=canvas-engine.d.ts.map

package/dist/canvas-engine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-engine.d.ts","sourceRoot":"","sources":["../src/canvas-engine.ts"],"names":[],"mappings":"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"}