@forgecharts/sdk 1.1.27 → 1.1.28

package/src/pixi/PixiGridRenderer.ts

@@ -1,136 +0,0 @@
-import { Graphics, Container, Text, TextStyle } from 'pixi.js';
-import type { ChartColors } from '@forgecharts/types';
-import type { CoordTransform } from '../core/CoordTransform';
-import { computeTicks } from '../core/TimeScale';
-import { formatTimestampLabel } from '@forgecharts/utils';
-import type { TimeScale } from '../core/TimeScale';
-
-const TICK_LEN = 4;
-
-/**
- * PixiGridRenderer — draws background fill, horizontal grid lines (price),
- * vertical grid lines (time), and the axis separator borders.
- *
- * All drawing uses PixiJS `Graphics` which is GPU-batched.
- */
-export class PixiGridRenderer {
-  private readonly _gfx: Graphics;
-  private readonly _timeLabels: Container;
-  private readonly _priceLabels: Container;
-  private readonly _timeScale: TimeScale;
-
-  constructor(
-    layer: Container,
-    private readonly _colors: ChartColors,
-    timeScale: TimeScale,
-  ) {
-    this._timeScale = timeScale;
-    this._gfx = new Graphics();
-    this._timeLabels = new Container();
-    this._priceLabels = new Container();
-    layer.addChild(this._gfx, this._timeLabels, this._priceLabels);
-  }
-
-  draw(transform: CoordTransform, width: number, height: number): void {
-    const gfx = this._gfx;
-    gfx.clear();
-
-    const { plotWidth: pw, plotHeight: ph, priceScaleWidth, timeScaleHeight } = transform;
-    const { min: priceMin, max: priceMax } = transform.priceRange;
-    const { from: timeFrom, to: timeTo } = transform.timeRange;
-
-    // ── Background ────────────────────────────────────────────────────────────
-    gfx.rect(0, 0, width, height).fill(this._colors.background);
-
-    // ── Horizontal price grid ─────────────────────────────────────────────────
-    const priceTicks = computeTicks(priceMin, priceMax, Math.max(2, Math.floor(ph / 50)));
-    this._priceLabels.removeChildren();
-
-    const labelStyle = new TextStyle({
-      fontSize: 11,
-      fontFamily: 'system-ui, sans-serif',
-      fill: this._colors.text,
-    });
-
-    for (const tick of priceTicks) {
-      if (tick < priceMin || tick > priceMax) continue;
-      const y = transform.priceToY(tick);
-      if (y < 0 || y > ph) continue;
-
-      gfx.moveTo(0, y).lineTo(pw, y).stroke({ color: this._colors.grid, width: 1, alpha: 0.5 });
-
-      // Tick mark on axis border
-      gfx.moveTo(pw, y).lineTo(pw + TICK_LEN, y).stroke({ color: this._colors.border, width: 1 });
-
-      // Price label
-      const t = new Text({ text: this._formatPrice(tick), style: labelStyle });
-      t.x = pw + TICK_LEN + 2;
-      t.y = y - t.height / 2;
-      this._priceLabels.addChild(t);
-    }
-
-    // ── Vertical time grid ────────────────────────────────────────────────────
-    const approxTicks = Math.max(2, Math.floor(pw / 100));
-    const span = timeTo - timeFrom;
-    const rawStep = span / approxTicks;
-    const step = this._niceTimeStep(rawStep);
-    const startTime = Math.ceil(timeFrom / step) * step;
-
-    this._timeLabels.removeChildren();
-    const timeLabelStyle = new TextStyle({
-      fontSize: 11,
-      fontFamily: 'system-ui, sans-serif',
-      fill: this._colors.text,
-    });
-
-    for (let t = startTime; t <= timeTo; t += step) {
-      const x = transform.timeToX(t);
-      if (x < 0 || x > pw) continue;
-
-      gfx.moveTo(x, 0).lineTo(x, ph).stroke({ color: this._colors.grid, width: 1, alpha: 0.4 });
-      gfx.moveTo(x, ph).lineTo(x, ph + TICK_LEN).stroke({ color: this._colors.border, width: 1 });
-
-      const label = formatTimestampLabel(t, step);
-      const tl = new Text({ text: label, style: timeLabelStyle });
-      tl.x = x - tl.width / 2;
-      tl.y = ph + TICK_LEN + 2;
-      this._timeLabels.addChild(tl);
-    }
-
-    // ── Axis separator lines ──────────────────────────────────────────────────
-    gfx
-      .moveTo(0, ph).lineTo(pw, ph)
-      .stroke({ color: this._colors.border, width: 1 });
-    gfx
-      .moveTo(pw, 0).lineTo(pw, ph)
-      .stroke({ color: this._colors.border, width: 1 });
-
-    // ── Price axis background fill ────────────────────────────────────────────
-    gfx.rect(pw, 0, priceScaleWidth, ph).fill(this._colors.backgroundSecondary);
-
-    // ── Time axis background fill ─────────────────────────────────────────────
-    gfx.rect(0, ph, pw, timeScaleHeight).fill(this._colors.backgroundSecondary);
-  }
-
-  private _formatPrice(price: number): string {
-    const decimals = price < 1 ? 6 : price < 1000 ? 4 : 2;
-    return price.toFixed(decimals);
-  }
-
-  private _niceTimeStep(rawSeconds: number): number {
-    const nice = [
-      1, 5, 10, 30, 60, 300, 600, 900, 1800, 3600, 7200, 14400, 21600, 43200,
-      86400,           // 1 day
-      7   * 86400,     // 1 week
-      14  * 86400,     // 2 weeks
-      30  * 86400,     // ~1 month
-      91  * 86400,     // ~quarter
-      182 * 86400,     // ~half year
-      365 * 86400,     // ~1 year
-    ];
-    for (const s of nice) {
-      if (s >= rawSeconds) return s;
-    }
-    return 365 * 86400 * Math.ceil(rawSeconds / (365 * 86400));
-  }
-}

package/src/pixi/PixiLayerManager.ts

@@ -1,102 +0,0 @@
-import { Container } from 'pixi.js';
-import { LayerName, LAYER_NAMES, LAYER_LABEL } from './LayerName';
-
-/**
- * DirtyFlags — bitmask that tracks which layers need to be redrawn.
- *
- * Call `mark(layer)` whenever data or viewport changes affecting a layer.
- * Call `isDirty(layer)` before redrawing to skip unnecessary work.
- * Call `clear(layer)` after the layer finishes drawing.
- */
-export class DirtyFlags {
-  private _bits = 0;
-
-  mark(layer: LayerName): void {
-    this._bits |= 1 << layer;
-  }
-
-  markAll(): void {
-    this._bits = (1 << LAYER_NAMES.length) - 1;
-  }
-
-  isDirty(layer: LayerName): boolean {
-    return (this._bits & (1 << layer)) !== 0;
-  }
-
-  clear(layer: LayerName): void {
-    this._bits &= ~(1 << layer);
-  }
-
-  clearAll(): void {
-    this._bits = 0;
-  }
-}
-
-/**
- * PixiLayerManager — owns one PixiJS `Container` per layer, stacked by z-index.
- *
- * Responsibilities:
- * - Creates and names seven containers corresponding to `LayerName` values
- * - Attaches all containers to a root `Container` already mounted in the stage
- * - Exposes `get(layer)` so renderers can add display objects to the right layer
- * - Owns a `DirtyFlags` instance for selective redraw signalling
- * - `clear(layer)` removes all children from a layer without destroying the container
- *
- * @example
- * ```ts
- * const layers = new PixiLayerManager(stage);
- *
- * // Direct child access
- * const seriesContainer = layers.get(LayerName.PriceSeries);
- *
- * // Invalidation
- * layers.dirty.mark(LayerName.PriceSeries);
- * if (layers.dirty.isDirty(LayerName.PriceSeries)) {
- *   // redraw…
- *   layers.dirty.clear(LayerName.PriceSeries);
- * }
- * ```
- */
-export class PixiLayerManager {
-  private readonly _containers = new Map<LayerName, Container>();
-  readonly dirty = new DirtyFlags();
-
-  constructor(stage: Container) {
-    for (const name of LAYER_NAMES) {
-      const c = new Container();
-      c.label = LAYER_LABEL[name];
-      c.zIndex = name;
-      stage.addChild(c);
-      this._containers.set(name, c);
-    }
-
-    // PixiJS v8: sortableChildren must be true on the stage so zIndex is respected
-    stage.sortableChildren = true;
-  }
-
-  /** Returns the `Container` for the given layer. */
-  get(layer: LayerName): Container {
-    const c = this._containers.get(layer);
-    if (!c) throw new Error(`[ForgeCharts] Unknown layer: ${layer}`);
-    return c;
-  }
-
-  /** Removes all display objects from a layer (preserves the container itself). */
-  clear(layer: LayerName): void {
-    this.get(layer).removeChildren();
-  }
-
-  /** Removes all display objects from every layer. */
-  clearAll(): void {
-    for (const name of LAYER_NAMES) this.clear(name);
-  }
-
-  /** Destroys all container children (use on chart destroy). */
-  destroy(): void {
-    for (const name of LAYER_NAMES) {
-      const c = this._containers.get(name);
-      c?.destroy({ children: true });
-    }
-    this._containers.clear();
-  }
-}