@forgecharts/sdk 1.1.23

package/src/pixi/PixiChart.ts

@@ -0,0 +1,425 @@
+import { Application, Container } from 'pixi.js';
+import type { ChartOptions, ChartColors, ChartTheme, SeriesOptions, Drawing, OHLCV, ChartKeyAction } from '@forgecharts/types';
+import type { IChart, IChartPlugin } from '../types/IChart';
+import type { ISeries } from '../types/ISeries';
+import { CanvasLayer } from '../core/CanvasLayer';
+import { TimeScale } from '../core/TimeScale';
+import { PriceScale } from '../core/PriceScale';
+import { CoordTransform } from '../core/CoordTransform';
+import { Series } from '../core/Series';
+import { InteractionManager } from '../core/InteractionManager';
+import { DARK_COLORS, LIGHT_COLORS } from '../theme/colors';
+import { LayerName } from './LayerName';
+import { PixiLayerManager } from './PixiLayerManager';
+import { PixiGridRenderer } from './PixiGridRenderer';
+import { PixiCandlestickRenderer } from './PixiCandlestickRenderer';
+import { PixiCrosshairRenderer } from './PixiCrosshairRenderer';
+import { PixiDrawingRenderer } from './PixiDrawingRenderer';
+
+/**
+ * PixiChart — GPU-accelerated chart engine built on PixiJS v8.
+ *
+ * Implements `IChart` identically to the Canvas 2D `Chart` class, so it is
+ * a drop-in replacement. Rendering is performed inside a PixiJS `Application`
+ * (WebGL / WebGPU auto-detected) using seven sortable `Container` layers.
+ *
+ * Selective redraw:
+ * - `DirtyFlags` tracks which layers need painting.
+ * - Each layer's renderer is called only when its flag is set.
+ * - Viewport changes (zoom/pan) mark all layers dirty via `_markViewportDirty()`.
+ * - Data changes only mark `PriceSeries` dirty.
+ *
+ * @example
+ * ```ts
+ * const chart = new PixiChart(container, { theme: 'dark' });
+ * const series = chart.addSeries({ type: 'candlestick' });
+ * series.setData(bars);
+ *
+ * // Access the transform for drawing tools or plugins
+ * const { x, y } = chart.transform().toPixel(bar.time, bar.close);
+ * ```
+ */
+export class PixiChart implements IChart {
+  private readonly _app: Application;
+  private readonly _stage: Container;
+  private readonly _container: HTMLElement;
+  private readonly _options: Required<ChartOptions>;
+  private _colors: ChartColors;
+
+  private readonly _timeScale: TimeScale;
+  private readonly _priceScale: PriceScale;
+  private readonly _transform: CoordTransform;
+
+  private readonly _layers: PixiLayerManager;
+  private readonly _gridRenderer: PixiGridRenderer;
+  private readonly _candleRenderer: PixiCandlestickRenderer;
+  private readonly _crosshairRenderer: PixiCrosshairRenderer;
+  private readonly _drawingRenderer: PixiDrawingRenderer;
+
+  private _series: Series[] = [];
+  private _drawings: Drawing[] = [];
+  private _plugins: IChartPlugin[] = [];
+
+  private _resizeObserver: ResizeObserver;
+  private _initPromise: Promise<void>;
+  private _ready = false;
+  private _interaction!: InteractionManager;
+
+  constructor(container: HTMLElement, options: ChartOptions = {}) {
+    this._container = container;
+    this._container.style.position = 'relative';
+    this._container.style.overflow = 'hidden';
+
+    this._options = this._resolveOptions(options);
+    this._colors  = this._resolveColors(this._options.theme, this._options.colors);
+
+    const { width, height } = container.getBoundingClientRect();
+
+    // ── Scales & transform ────────────────────────────────────────────────────
+    // TimeScale and PriceScale need a CanvasLayer for their Canvas 2D render()
+    // pass; for PixiChart that pass is never called — Pixi renderers own all
+    // drawing.  A hidden dummy canvas satisfies the constructor requirement.
+    const dpr = window.devicePixelRatio ?? 1;
+    const dummyLayer = new CanvasLayer(container, { width, height, dpr, zIndex: 0 });
+    dummyLayer.canvas.style.display = 'none';
+
+    this._timeScale  = new TimeScale(dummyLayer, this._colors, this._options.timeScale);
+    this._priceScale = new PriceScale(dummyLayer, this._colors, this._options.priceScale);
+
+    this._transform  = new CoordTransform(
+      this._timeScale,
+      this._priceScale,
+      this._priceScale.width,
+      this._timeScale.height,
+    );
+    this._transform.update(width, height);
+
+    // ── PixiJS Application ────────────────────────────────────────────────────
+    this._app    = new Application();
+    this._stage  = this._app.stage;
+
+    this._initPromise = this._app.init({
+      width,
+      height,
+      backgroundColor: parseInt(this._colors.background.replace('#', ''), 16),
+      antialias: true,
+      resolution: dpr,
+      autoDensity: true,
+    }).then(() => {
+      const canvas = this._app.canvas as HTMLCanvasElement;
+      canvas.style.position = 'absolute';
+      canvas.style.inset = '0';
+      container.appendChild(canvas);
+
+      // ── Layers ──────────────────────────────────────────────────────────────
+      this._layers.dirty.markAll();
+      this._ready = true;
+
+      // Attach PixiJS ticker for per-frame selective redraw
+      this._app.ticker.add(() => this._renderFrame());
+    });
+
+    // Layer manager + renderers (can be constructed before init resolves)
+    this._layers = new PixiLayerManager(this._stage);
+
+    this._gridRenderer      = new PixiGridRenderer(
+      this._layers.get(LayerName.Background),
+      this._colors,
+      this._timeScale,
+    );
+    this._candleRenderer    = new PixiCandlestickRenderer(
+      this._layers.get(LayerName.PriceSeries),
+    );
+    this._crosshairRenderer = new PixiCrosshairRenderer(
+      this._layers.get(LayerName.Interaction),
+      this._colors,
+    );
+    this._drawingRenderer   = new PixiDrawingRenderer(
+      this._layers.get(LayerName.Drawing),
+    );
+
+    // ── Interactions ─────────────────────────────────────────────────────────
+    this._interaction = new InteractionManager(
+      this._container,
+      this._transform,
+      {
+        onPan: (dx, dy) => {
+          this._transform.pan(dx, dy);
+          this._markViewportDirty();
+        },
+        onZoom: (factor, originX) => {
+          this._transform.zoomTime(factor, originX);
+          this._markViewportDirty();
+        },
+        onCrosshairMove: (x, y) => {
+          this._crosshairRenderer.update(x, y);
+          this._layers.dirty.mark(LayerName.Interaction);
+        },
+        onCrosshairHide: () => {
+          this._crosshairRenderer.hide();
+          this._layers.dirty.mark(LayerName.Interaction);
+        },
+        onKeyAction: (action) => {
+          this._handleKeyAction(action);
+        },
+      },
+      {
+        enablePan:  this._options.handleScroll,
+        enableZoom: this._options.handleScale,
+      },
+    );
+
+    this._resizeObserver = new ResizeObserver(() => this._onResize());
+    this._resizeObserver.observe(container);
+  }
+
+  // ─── IChart implementation ────────────────────────────────────────────────
+
+  addSeries(options: Parameters<IChart['addSeries']>[0]): ISeries {
+    const series = new Series(options, this._colors);
+
+    // When the caller mutates data, mark the series + background layers dirty
+    // so the next ticker frame redraws only those layers (selective redraw).
+    series.onDataChanged = () => {
+      this._layers.dirty.mark(LayerName.PriceSeries);
+      this._layers.dirty.mark(LayerName.Background); // price range may change
+    };
+
+    this._series.push(series);
+    this._layers.dirty.mark(LayerName.PriceSeries);
+    return series;
+  }
+
+  removeSeries(series: ISeries): void {
+    this._series = this._series.filter((s) => s !== series);
+    this._layers.dirty.mark(LayerName.PriceSeries);
+  }
+
+  addPlugin(plugin: IChartPlugin): void {
+    this._plugins.push(plugin);
+    plugin.onAttach(this);
+  }
+
+  removePlugin(plugin: IChartPlugin): void {
+    this._plugins = this._plugins.filter((p) => p !== plugin);
+    plugin.onDetach();
+  }
+
+  applyOptions(options: Partial<ChartOptions>): void {
+    Object.assign(this._options as Record<string, unknown>, options);
+    if (options.theme) {
+      // Mutate the existing colors object in-place so all renderers that hold
+      // a reference to it (PixiGridRenderer, PixiCrosshairRenderer, etc.) pick
+      // up the new values without needing a reference swap.
+      Object.assign(this._colors, this._resolveColors(options.theme as ChartTheme, this._options.colors));
+      // Also update the PixiJS renderer's own background color.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (this._app.renderer as any).background.color = parseInt(this._colors.background.replace('#', ''), 16);
+    }
+    if (options.timezone !== undefined) {
+      this._crosshairRenderer.timezone = options.timezone ?? 'UTC';
+    }
+    this._layers.dirty.markAll();
+  }
+
+  setInterval(tf: string): void {
+    this._crosshairRenderer.interval = tf;
+    this._layers.dirty.mark(LayerName.Interaction);
+  }
+
+  resize(width: number, height: number): void {
+    this._app.renderer.resize(width, height);
+    this._transform.update(width, height);
+    this._markViewportDirty();
+  }
+
+  transform(): CoordTransform {
+    return this._transform;
+  }
+
+  destroy(): void {
+    this._resizeObserver.disconnect();
+    this._interaction.destroy();
+    this._layers.destroy();
+    this._plugins.forEach((p) => p.onDetach());
+    this._series   = [];
+    this._plugins  = [];
+    void this._app.destroy(true, { children: true });
+  }
+
+  // ─── Drawing objects (used by PixiChart directly; TChart uses DrawingManager) ─
+
+  /** @internal Used by PixiChart when DrawingManager pushes an update. */
+  setDrawings(drawings: readonly Drawing[]): void {
+    this._drawings = [...drawings];
+    this._layers.dirty.mark(LayerName.Drawing);
+  }
+
+  // ─── Rendering ───────────────────────────────────────────────────────────────
+
+  private _renderFrame(): void {
+    if (!this._ready) return;
+
+    const t     = this._transform;
+    const cw    = t.canvasWidth;
+    const ch    = t.canvasHeight;
+    const dirty = this._layers.dirty;
+
+    // ── Price series first so auto-fit updates the price range ───────────────
+    // This must run before Background so the grid can reflect the new range
+    // within the same frame.
+    if (dirty.isDirty(LayerName.PriceSeries)) {
+      // Auto-fit price range to visible data, then mark background dirty so
+      // the grid redraws with the updated price range in this same frame.
+      this._autoFitPriceRange();
+      dirty.mark(LayerName.Background);
+
+      // Renderers own their Graphics object; calling gfx.clear() internally.
+      // Do NOT call _layers.clear(PriceSeries) — that would detach the gfx.
+      for (const series of this._series) {
+        const opts = series.options();
+        if (opts.visible === false) continue;
+        const bars = this._getVisibleBars(series);
+        if (bars.length === 0) continue;
+        if (opts.type === 'heikinashi') {
+          this._candleRenderer.drawHeikinAshi(bars, t);
+        } else {
+          this._candleRenderer.draw(bars, t);
+        }
+      }
+      dirty.clear(LayerName.PriceSeries);
+    }
+
+    // ── Background + grid (axes, labels) ─────────────────────────────────────
+    if (dirty.isDirty(LayerName.Background)) {
+      this._gridRenderer.draw(t, cw, ch);
+      dirty.clear(LayerName.Background);
+    }
+
+    // ── Indicator — placeholder ───────────────────────────────────────────────
+    if (dirty.isDirty(LayerName.Indicator)) {
+      dirty.clear(LayerName.Indicator);
+    }
+
+    // ── Drawings ──────────────────────────────────────────────────────────────
+    if (dirty.isDirty(LayerName.Drawing)) {
+      this._drawingRenderer.draw(this._drawings, t);
+      dirty.clear(LayerName.Drawing);
+    }
+
+    // ── Trading overlay — placeholder ─────────────────────────────────────────
+    if (dirty.isDirty(LayerName.TradingOverlay)) {
+      dirty.clear(LayerName.TradingOverlay);
+    }
+
+    // ── Crosshair (Interaction layer) ─────────────────────────────────────────
+    if (dirty.isDirty(LayerName.Interaction)) {
+      this._crosshairRenderer.draw(t);
+      dirty.clear(LayerName.Interaction);
+    }
+
+    // ── UI overlay — placeholder ──────────────────────────────────────────────
+    if (dirty.isDirty(LayerName.UIOverlay)) {
+      dirty.clear(LayerName.UIOverlay);
+    }
+
+    // Let plugins render
+    this._plugins.forEach((p) => p.onRender());
+  }
+
+  // ─── Helpers ─────────────────────────────────────────────────────────────────
+
+  private _getVisibleBars(series: Series): OHLCV[] {
+    const { from, to } = this._transform.timeRange;
+    return (series.data() as OHLCV[]).filter((b) => b.time >= from - 1 && b.time <= to + 1);
+  }
+
+  private _autoFitPriceRange(): void {
+    let low = Infinity, high = -Infinity;
+    for (const series of this._series) {
+      for (const bar of this._getVisibleBars(series)) {
+        if (bar.low  < low)  low  = bar.low;
+        if (bar.high > high) high = bar.high;
+      }
+    }
+    if (low === Infinity || high === -Infinity) return;
+    const padding = (high - low) * 0.05;
+    this._priceScale.setVisibleRange({ min: low - padding, max: high + padding });
+    // Background must redraw so price-axis labels reflect the new range.
+    // Caller is responsible for marking Background dirty after calling this.
+  }
+
+  private _markViewportDirty(): void {
+    this._layers.dirty.mark(LayerName.Background);
+    this._layers.dirty.mark(LayerName.PriceSeries);
+    this._layers.dirty.mark(LayerName.Indicator);
+    this._layers.dirty.mark(LayerName.Drawing);
+    this._layers.dirty.mark(LayerName.TradingOverlay);
+    this._layers.dirty.mark(LayerName.Interaction);
+    this._layers.dirty.mark(LayerName.UIOverlay);
+  }
+
+  private _onResize(): void {
+    const { width, height } = this._container.getBoundingClientRect();
+    this.resize(width, height);
+  }
+
+  // ─── Keyboard action handler ──────────────────────────────────────────────────
+
+  private _handleKeyAction(action: ChartKeyAction): void {
+    const step = 40;   // px per arrow-key press
+    const zf   = 1.1;  // zoom factor per key press
+    const cx   = this._transform.plotWidth / 2;
+
+    switch (action) {
+      case 'panLeft':  this._transform.pan( step, 0); break;
+      case 'panRight': this._transform.pan(-step, 0); break;
+      case 'panUp':    this._transform.pan(0,  step); break;
+      case 'panDown':  this._transform.pan(0, -step); break;
+      case 'zoomIn':   this._transform.zoomTime(1 / zf, cx); break;
+      case 'zoomOut':  this._transform.zoomTime(zf,     cx); break;
+      case 'scrollToEnd':     this._scrollToLatestBar();         break;
+      case 'deselect':        this._interaction.clearSelection(); break;
+      case 'scrollToStart':
+      case 'deleteSelection': break; // handled externally
+    }
+    this._markViewportDirty();
+  }
+
+  /** Pans the viewport so the latest bar sits near the right edge. */
+  private _scrollToLatestBar(): void {
+    let latestTime = -Infinity;
+    for (const s of this._series) {
+      const data = s.data();
+      const last = data[data.length - 1];
+      if (last && last.time > latestTime) latestTime = last.time;
+    }
+    if (!isFinite(latestTime)) return;
+    const pad = this._transform.plotWidth * 0.05;
+    const px  = this._transform.timeToX(latestTime);
+    this._transform.pan(-(px - (this._transform.plotWidth - pad)), 0);
+  }
+
+  // ─── Option resolvers ────────────────────────────────────────────────────────
+
+  private _resolveOptions(opts: ChartOptions): Required<ChartOptions> {
+    return {
+      theme:        opts.theme        ?? 'dark',
+      colors:       opts.colors       ?? {},
+      timeScale:    opts.timeScale    ?? {},
+      priceScale:   opts.priceScale   ?? {},
+      crosshair:    opts.crosshair    ?? {},
+      handleScroll: opts.handleScroll ?? true,
+      handleScale:  opts.handleScale  ?? true,
+      timezone:     opts.timezone     ?? 'UTC',
+    };
+  }
+
+  private _resolveColors(
+    theme: ChartTheme,
+    overrides: Partial<import('@forgecharts/types').ChartColors>,
+  ): ChartColors {
+    const base = theme === 'dark' ? DARK_COLORS : LIGHT_COLORS;
+    return { ...base, ...overrides };
+  }
+}

package/src/pixi/PixiCrosshairRenderer.ts

@@ -0,0 +1,134 @@
+import { Graphics, Container, Text, TextStyle } from 'pixi.js';
+import type { ChartColors } from '@forgecharts/types';
+import type { CoordTransform } from '../core/CoordTransform';
+
+/**
+ * PixiCrosshairRenderer — draws the interactive crosshair lines and their
+ * data-accurate price / time labels using GPU-batched PixiJS Graphics.
+ *
+ * Owned by the Interaction layer; receives pixel coords from mouse events
+ * and converts them to data values via `CoordTransform`.
+ */
+export class PixiCrosshairRenderer {
+  private readonly _gfx: Graphics;
+  private readonly _priceLabel: Text;
+  private readonly _timeLabel: Text;
+
+  private _x: number | null = null;
+  private _y: number | null = null;
+
+  /** Active timeframe — controls whether time is shown alongside the date. */
+  interval: string = '1h';
+  /** IANA timezone for the time label. Falls back to UTC. */
+  timezone: string = 'UTC';
+
+  constructor(
+    layer: Container,
+    private readonly _colors: ChartColors,
+  ) {
+    const labelStyle = new TextStyle({
+      fontSize: 11,
+      fontFamily: 'system-ui, sans-serif',
+      fill: _colors.background,
+    });
+
+    this._gfx = new Graphics();
+    this._priceLabel = new Text({ text: '', style: labelStyle });
+    this._timeLabel  = new Text({ text: '', style: labelStyle });
+
+    layer.addChild(this._gfx, this._priceLabel, this._timeLabel);
+  }
+
+  update(x: number, y: number): void {
+    this._x = x;
+    this._y = y;
+  }
+
+  hide(): void {
+    this._x = null;
+    this._y = null;
+  }
+
+  draw(transform: CoordTransform): void {
+    this._gfx.clear();
+    this._priceLabel.text = '';
+    this._timeLabel.text  = '';
+
+    if (this._x === null || this._y === null) return;
+
+    const x  = this._x;
+    const y  = this._y;
+    const pw = transform.plotWidth;
+    const ph = transform.plotHeight;
+    const psw = transform.priceScaleWidth;
+    const tsh = transform.timeScaleHeight;
+
+    if (!transform.inPlotArea(x, y)) return;
+
+    const crossColor = parseInt(this._colors.crosshair.replace('#', ''), 16);
+
+    // Vertical line
+    this._gfx
+      .moveTo(x, 0)
+      .lineTo(x, ph)
+      .stroke({ color: crossColor, width: 1, alpha: 0.85, join: 'miter' });
+
+    // Horizontal line
+    this._gfx
+      .moveTo(0, y)
+      .lineTo(pw, y)
+      .stroke({ color: crossColor, width: 1, alpha: 0.85, join: 'miter' });
+
+    // ── Price label (right axis) ─────────────────────────────────────────────
+    const price = transform.yToPrice(y);
+    const priceText = this._formatPrice(price);
+    const lh = 18;
+    const lw = psw;
+
+    this._gfx
+      .rect(pw, y - lh / 2, lw, lh)
+      .fill({ color: crossColor, alpha: 0.9 });
+
+    this._priceLabel.text = priceText;
+    this._priceLabel.x = pw + 4;
+    this._priceLabel.y = y - this._priceLabel.height / 2;
+
+    // ── Time label (bottom axis) ─────────────────────────────────────────────
+    const time = transform.xToTime(x);
+    const timeText = this._formatTime(time);
+    const dailyIntervals = new Set(['1d', '2d', '3d', '1w', '2w', '1M', '3M', '6M', '12M']);
+    const tlw = dailyIntervals.has(this.interval) ? 120 : 170;
+    const tlh = tsh - 4;
+    const tlx = Math.max(tlw / 2, Math.min(x, pw - tlw / 2));
+
+    this._gfx
+      .rect(tlx - tlw / 2, ph + 2, tlw, tlh)
+      .fill({ color: crossColor, alpha: 0.9 });
+
+    this._timeLabel.text = timeText;
+    this._timeLabel.x = tlx - this._timeLabel.width / 2;
+    this._timeLabel.y = ph + 2 + (tlh - this._timeLabel.height) / 2;
+  }
+
+  private _formatPrice(price: number): string {
+    const decimals = price < 1 ? 6 : price < 1000 ? 4 : 2;
+    return price.toFixed(decimals);
+  }
+
+  private _formatTime(time: number): string {
+    const timeZone = (!this.timezone || this.timezone === 'exchange') ? 'UTC' : this.timezone;
+    const d = new Date(time * 1000);
+    const weekday = d.toLocaleDateString('en-US', { weekday: 'short', timeZone });
+    const day     = d.toLocaleDateString('en-US', { day: '2-digit',   timeZone });
+    const month   = d.toLocaleDateString('en-US', { month: 'short',   timeZone });
+    const year    = d.toLocaleDateString('en-US', { year: '2-digit',  timeZone });
+    const datePart = `${weekday} ${day} ${month} '${year}`;
+
+    const dailyIntervals = new Set(['1d', '2d', '3d', '1w', '2w', '1M', '3M', '6M', '12M']);
+    if (dailyIntervals.has(this.interval)) return datePart;
+
+    const hh = d.toLocaleString('en-US', { hour: '2-digit', hour12: false, timeZone });
+    const mm = d.toLocaleString('en-US', { minute: '2-digit', timeZone }).padStart(2, '0');
+    return `${datePart}  ${hh}:${mm}`;
+  }
+}

package/src/pixi/PixiDrawingRenderer.ts

@@ -0,0 +1,121 @@
+import { Graphics } from 'pixi.js';
+import type { Container } from 'pixi.js';
+import type { Drawing } from '@forgecharts/types';
+import type { CoordTransform } from '../core/CoordTransform';
+
+const DEFAULT_COLOR  = 0x888888;
+const DEFAULT_WIDTH  = 1;
+const FIB_RATIOS     = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1] as const;
+
+/**
+ * PixiDrawingRenderer — renders all drawing objects via GPU-batched Graphics.
+ *
+ * All `DrawingPoint` (time, price) → pixel conversions go through
+ * `CoordTransform`, keeping drawings perfectly aligned with the price series
+ * across zoom/pan without requiring a full re-fetch of underlying data.
+ */
+export class PixiDrawingRenderer {
+  private readonly _gfx: Graphics;
+
+  constructor(layer: Container) {
+    this._gfx = new Graphics();
+    layer.addChild(this._gfx);
+  }
+
+  draw(drawings: readonly Drawing[], transform: CoordTransform): void {
+    this._gfx.clear();
+    for (const d of drawings) {
+      if (d.visible === false) continue;
+      this._drawOne(d, transform);
+    }
+  }
+
+  private _drawOne(d: Drawing, t: CoordTransform): void {
+    const gfx   = this._gfx;
+    const color = d.color ? parseInt(d.color.replace('#', ''), 16) : DEFAULT_COLOR;
+    const width = d.lineWidth ?? DEFAULT_WIDTH;
+    const stroke = { color, width };
+    const { points, type } = d;
+
+    switch (type) {
+      case 'trendline': {
+        if (points.length < 2) break;
+        const p0 = t.toPixel(points[0]!.time, points[0]!.price);
+        const p1 = t.toPixel(points[1]!.time, points[1]!.price);
+        gfx.moveTo(p0.x, p0.y).lineTo(p1.x, p1.y).stroke(stroke);
+        break;
+      }
+
+      case 'horizontal': {
+        if (points.length < 1) break;
+        const y = t.priceToY(points[0]!.price);
+        gfx.moveTo(0, y).lineTo(t.plotWidth, y).stroke(stroke);
+        break;
+      }
+
+      case 'vertical': {
+        if (points.length < 1) break;
+        const x = t.timeToX(points[0]!.time);
+        gfx.moveTo(x, 0).lineTo(x, t.plotHeight).stroke(stroke);
+        break;
+      }
+
+      case 'rectangle': {
+        if (points.length < 2) break;
+        const p0 = t.toPixel(points[0]!.time, points[0]!.price);
+        const p1 = t.toPixel(points[1]!.time, points[1]!.price);
+        gfx
+          .rect(
+            Math.min(p0.x, p1.x),
+            Math.min(p0.y, p1.y),
+            Math.abs(p1.x - p0.x),
+            Math.abs(p1.y - p0.y),
+          )
+          .stroke(stroke);
+        break;
+      }
+
+      case 'fibRetracement': {
+        if (points.length < 2) break;
+        const priceHigh = Math.max(points[0]!.price, points[1]!.price);
+        const priceLow  = Math.min(points[0]!.price, points[1]!.price);
+        const span = priceHigh - priceLow;
+        const x0 = Math.min(t.timeToX(points[0]!.time), t.timeToX(points[1]!.time));
+        const x1 = Math.max(t.timeToX(points[0]!.time), t.timeToX(points[1]!.time));
+
+        for (const ratio of FIB_RATIOS) {
+          const levelPrice = priceLow + span * (1 - ratio);
+          const y = t.priceToY(levelPrice);
+          gfx.moveTo(x0, y).lineTo(x1, y).stroke({ color, width, alpha: 0.7 });
+        }
+        break;
+      }
+
+      // ray: rendered as a segment from p0 through p1 to the plot boundary
+      case 'ray': {
+        if (points.length < 2) break;
+        const x0 = t.timeToX(points[0]!.time);
+        const y0 = t.priceToY(points[0]!.price);
+        const dx = t.timeToX(points[1]!.time) - x0;
+        const dy = t.priceToY(points[1]!.price) - y0;
+        let tMin = Infinity;
+        if (dx > 0) tMin = Math.min(tMin, (t.plotWidth  - x0) / dx);
+        else if (dx < 0) tMin = Math.min(tMin, -x0 / dx);
+        if (dy > 0) tMin = Math.min(tMin, (t.plotHeight - y0) / dy);
+        else if (dy < 0) tMin = Math.min(tMin, -y0 / dy);
+        const ex = tMin === Infinity ? x0 : x0 + dx * tMin;
+        const ey = tMin === Infinity ? y0 : y0 + dy * tMin;
+        gfx.moveTo(x0, y0).lineTo(ex, ey).stroke(stroke);
+        break;
+      }
+
+      // text: PixiJS does not handle text labels — skip silently
+      case 'text':
+        break;
+
+      default:
+        // Fib/Gann tools and future drawing types are rendered by the canvas layer, not Pixi.
+        break;
+    }
+  }
+}