@forgecharts/sdk 1.1.27 → 1.1.28

package/src/react/canvas/IndicatorPane.tsx

@@ -1,503 +0,0 @@
-/**
- * IndicatorPane — Canvas 2D rendering of a single indicator sub-pane.
- *
- * Uses the main chart's CoordTransform for x-axis alignment, then computes
- * its own per-pane y-axis from indicator value ranges.
- */
-
-import { useEffect, useRef } from 'react';
-import type { OHLCV, IndicatorInstance, ChartTheme } from '@forgecharts/types';
-import type { CoordTransform, DAGResult } from '../../';
-import type { IndicatorPoint, MACDPoint } from '../../';
-import { IndicatorLabel } from './IndicatorLabel';
-
-// ─── Constants ────────────────────────────────────────────────────────────────
-
-/** Width of the right-side price axis — must match the main chart's AXIS_WIDTH. */
-const AXIS_W = 70;
-/** Vertical padding inside the pane (logical pixels). */
-const PAD_T = 8;
-const PAD_B = 8;
-
-// ─── Theme palettes ───────────────────────────────────────────────────────────
-
-const PALETTE = {
-  dark: {
-    bg: '#131722',
-    text: '#d1d4dc',
-    muted: '#787b86',
-    border: '#2a2e39',
-    up: '#26a69a',
-    down: '#ef5350',
-    macdLine: '#2196f3',
-    signalLine: '#ff9800',
-  },
-  light: {
-    bg: '#ffffff',
-    text: '#131722',
-    muted: '#9098a1',
-    border: '#e0e3eb',
-    up: '#26a69a',
-    down: '#ef5350',
-    macdLine: '#1565c0',
-    signalLine: '#e65100',
-  },
-} as const;
-
-type Pal = (typeof PALETTE)[keyof typeof PALETTE];
-
-// ─── Low-level draw helpers ───────────────────────────────────────────────────
-
-function _vy(value: number, min: number, max: number, topPad: number, plotH: number): number {
-  if (max === min) return topPad + plotH / 2;
-  return topPad + plotH * (1 - (value - min) / (max - min));
-}
-
-function _hline(
-  ctx: CanvasRenderingContext2D,
-  y: number,
-  plotW: number,
-  color: string,
-  dash: number[] = [],
-): void {
-  ctx.strokeStyle = color;
-  ctx.lineWidth = 0.5;
-  ctx.setLineDash(dash);
-  ctx.beginPath();
-  ctx.moveTo(0, y + 0.5);
-  ctx.lineTo(plotW, y + 0.5);
-  ctx.stroke();
-  ctx.setLineDash([]);
-}
-
-function _axisLabels(
-  ctx: CanvasRenderingContext2D,
-  ticks: number[],
-  min: number,
-  max: number,
-  topPad: number,
-  plotH: number,
-  canvasH: number,
-  plotW: number,
-  color: string,
-  decimals = 0,
-): void {
-  ctx.font = '9px -apple-system, BlinkMacSystemFont, sans-serif';
-  ctx.fillStyle = color;
-  ctx.textAlign = 'left';
-  ctx.textBaseline = 'middle';
-  for (const tick of ticks) {
-    const y = _vy(tick, min, max, topPad, plotH);
-    if (y < 2 || y > canvasH - 2) continue;
-    ctx.fillText(tick.toFixed(decimals), plotW + 4, y);
-  }
-}
-
-// ─── Per-indicator renderers ──────────────────────────────────────────────────
-
-function _renderRSI(
-  ctx: CanvasRenderingContext2D,
-  points: readonly IndicatorPoint[],
-  transform: CoordTransform,
-  plotW: number,
-  h: number,
-  lineColor: string,
-  pal: Pal,
-): void {
-  const plotH = h - PAD_T - PAD_B;
-  const min = 0;
-  const max = 100;
-  const y70 = _vy(70, min, max, PAD_T, plotH);
-  const y50 = _vy(50, min, max, PAD_T, plotH);
-  const y30 = _vy(30, min, max, PAD_T, plotH);
-
-  // Zone fills
-  ctx.fillStyle = 'rgba(239,83,80,0.06)';
-  ctx.fillRect(0, PAD_T, plotW, y70 - PAD_T);
-  ctx.fillStyle = 'rgba(38,166,154,0.06)';
-  ctx.fillRect(0, y30, plotW, h - PAD_B - y30);
-
-  // Reference lines
-  _hline(ctx, y70, plotW, pal.muted, [3, 3]);
-  _hline(ctx, y50, plotW, pal.border);
-  _hline(ctx, y30, plotW, pal.muted, [3, 3]);
-
-  // Level labels inside plot area
-  ctx.font = '9px sans-serif';
-  ctx.fillStyle = pal.muted;
-  ctx.textAlign = 'left';
-  ctx.textBaseline = 'bottom';
-  ctx.fillText('70', 2, y70);
-  ctx.textBaseline = 'top';
-  ctx.fillText('30', 2, y30);
-
-  // RSI line
-  if (points.length > 0) {
-    ctx.strokeStyle = lineColor;
-    ctx.lineWidth = 1.5;
-    ctx.beginPath();
-    let started = false;
-    for (const p of points) {
-      const x = transform.timeToX(p.time);
-      if (x < -20 || x > plotW + 20) { started = false; continue; }
-      const y = _vy(p.value, min, max, PAD_T, plotH);
-      if (!started) { ctx.moveTo(x, y); started = true; } else { ctx.lineTo(x, y); }
-    }
-    ctx.stroke();
-  }
-
-  _axisLabels(ctx, [0, 30, 50, 70, 100], min, max, PAD_T, plotH, h, plotW, pal.muted);
-}
-
-function _renderMACD(
-  ctx: CanvasRenderingContext2D,
-  points: readonly MACDPoint[],
-  transform: CoordTransform,
-  plotW: number,
-  h: number,
-  pal: Pal,
-): void {
-  if (points.length === 0) return;
-  const plotH = h - PAD_T - PAD_B;
-
-  // Auto-scale to visible values
-  let min = Infinity;
-  let max = -Infinity;
-  for (const p of points) {
-    const x = transform.timeToX(p.time);
-    if (x < -20 || x > plotW + 20) continue;
-    min = Math.min(min, p.histogram, p.macd, p.signal);
-    max = Math.max(max, p.histogram, p.macd, p.signal);
-  }
-  if (!isFinite(min)) { min = -0.01; max = 0.01; }
-  const rangePad = (max - min) * 0.1 || 0.001;
-  min -= rangePad; max += rangePad;
-
-  // Zero line
-  _hline(ctx, _vy(0, min, max, PAD_T, plotH), plotW, pal.border, [2, 2]);
-
-  // Compute bar pixel width from consecutive timestamps
-  let barPx = 5;
-  if (points.length >= 2) {
-    barPx = Math.max(1, Math.abs(transform.timeToX(points[1]!.time) - transform.timeToX(points[0]!.time)) * 0.7);
-  }
-
-  // Histogram bars
-  const y0 = _vy(0, min, max, PAD_T, plotH);
-  for (const p of points) {
-    const x = transform.timeToX(p.time);
-    if (x < -barPx || x > plotW + barPx) continue;
-    const yH = _vy(p.histogram, min, max, PAD_T, plotH);
-    ctx.fillStyle = p.histogram >= 0 ? `${pal.up}99` : `${pal.down}99`;
-    ctx.fillRect(x - barPx / 2, Math.min(y0, yH), barPx, Math.abs(y0 - yH) || 1);
-  }
-
-  // MACD line
-  ctx.strokeStyle = pal.macdLine;
-  ctx.lineWidth = 1.5;
-  ctx.beginPath();
-  let started = false;
-  for (const p of points) {
-    const x = transform.timeToX(p.time);
-    if (x < -20 || x > plotW + 20) { started = false; continue; }
-    const y = _vy(p.macd, min, max, PAD_T, plotH);
-    if (!started) { ctx.moveTo(x, y); started = true; } else { ctx.lineTo(x, y); }
-  }
-  ctx.stroke();
-
-  // Signal line
-  ctx.strokeStyle = pal.signalLine;
-  ctx.lineWidth = 1;
-  ctx.beginPath();
-  started = false;
-  for (const p of points) {
-    const x = transform.timeToX(p.time);
-    if (x < -20 || x > plotW + 20) { started = false; continue; }
-    const y = _vy(p.signal, min, max, PAD_T, plotH);
-    if (!started) { ctx.moveTo(x, y); started = true; } else { ctx.lineTo(x, y); }
-  }
-  ctx.stroke();
-
-  const range = max - min;
-  const dec = range < 0.1 ? 4 : range < 10 ? 2 : 0;
-  _axisLabels(
-    ctx,
-    [min + range * 0.1, min + range * 0.5, min + range * 0.9],
-    min, max, PAD_T, plotH, h, plotW, pal.muted, dec,
-  );
-}
-
-function _renderVolume(
-  ctx: CanvasRenderingContext2D,
-  bars: readonly OHLCV[],
-  points: readonly IndicatorPoint[],
-  transform: CoordTransform,
-  plotW: number,
-  h: number,
-  pal: Pal,
-): void {
-  if (points.length === 0) return;
-  const plotH = h - PAD_T - PAD_B;
-  const min = 0;
-  const max = Math.max(...points.map((p) => p.value));
-  if (max === 0) return;
-
-  const barMap = new Map(bars.map((b) => [b.time, b]));
-  let barPx = 5;
-  if (points.length >= 2) {
-    barPx = Math.max(1, Math.abs(transform.timeToX(points[1]!.time) - transform.timeToX(points[0]!.time)) * 0.8);
-  }
-
-  const yBase = _vy(0, min, max, PAD_T, plotH);
-  for (const p of points) {
-    const x = transform.timeToX(p.time);
-    if (x < -barPx || x > plotW + barPx) continue;
-    const bar = barMap.get(p.time);
-    const isUp = bar !== undefined ? bar.close >= bar.open : true;
-    const yTop = _vy(p.value, min, max, PAD_T, plotH);
-    ctx.fillStyle = isUp ? `${pal.up}99` : `${pal.down}99`;
-    ctx.fillRect(x - barPx / 2, yTop, barPx, Math.abs(yBase - yTop) || 1);
-  }
-
-  _axisLabels(ctx, [max], min, max, PAD_T, plotH, h, plotW, pal.muted, 0);
-}
-
-function _renderLineIndicator(
-  ctx: CanvasRenderingContext2D,
-  points: readonly IndicatorPoint[],
-  transform: CoordTransform,
-  plotW: number,
-  h: number,
-  lineColor: string,
-  pal: Pal,
-): void {
-  if (points.length === 0) return;
-  const plotH = h - PAD_T - PAD_B;
-
-  // Auto-scale to visible values
-  let min = Infinity;
-  let max = -Infinity;
-  for (const p of points) {
-    const x = transform.timeToX(p.time);
-    if (x < -20 || x > plotW + 20) continue;
-    min = Math.min(min, p.value);
-    max = Math.max(max, p.value);
-  }
-  if (!isFinite(min)) return;
-  const rangePad = (max - min) * 0.1 || 1;
-  min -= rangePad; max += rangePad;
-
-  ctx.strokeStyle = lineColor;
-  ctx.lineWidth = 1.5;
-  ctx.beginPath();
-  let started = false;
-  for (const p of points) {
-    const x = transform.timeToX(p.time);
-    if (x < -20 || x > plotW + 20) { started = false; continue; }
-    const y = _vy(p.value, min, max, PAD_T, plotH);
-    if (!started) { ctx.moveTo(x, y); started = true; } else { ctx.lineTo(x, y); }
-  }
-  ctx.stroke();
-
-  const range = max - min;
-  const dec = range < 0.1 ? 4 : range < 10 ? 2 : 0;
-  _axisLabels(ctx, [min + range * 0.25, min + range * 0.75], min, max, PAD_T, plotH, h, plotW, pal.muted, dec);
-}
-
-// ─── Label helper ─────────────────────────────────────────────────────────────
-
-function _indicatorLabel(type: string, params: Record<string, unknown> = {}): string {
-  switch (type) {
-    case 'rsi':    return `RSI(${params['period'] ?? 14})`;
-    case 'macd':   return `MACD(${params['fast'] ?? 12},${params['slow'] ?? 26},${params['signal'] ?? 9})`;
-    case 'volume': return 'Volume';
-    case 'sma':    return `SMA(${params['period'] ?? 20})`;
-    case 'ema':    return `EMA(${params['period'] ?? 20})`;
-    case 'wma':    return `WMA(${params['period'] ?? 20})`;
-    default:       return type.toUpperCase();
-  }
-}
-
-// ─── Component ────────────────────────────────────────────────────────────────
-
-export type IndicatorPaneProps = {
-  /** Indicators to render in this pane. */
-  indicators: readonly IndicatorInstance[];
-  /** Full bar dataset — still needed for volume bar up/down colouring. */
-  bars: readonly OHLCV[];
-  /** Shared coordinate transform from the main price chart. Null until chart mounts. */
-  transform: CoordTransform | null;
-  /** CSS height of this pane in pixels. */
-  height: number;
-  /** Colour theme — must match the main chart. */
-  theme: ChartTheme;
-  /** Pre-computed DAG results — keyed by indicator id. */
-  computedResults: ReadonlyMap<string, DAGResult>;
-  /** Called when the user clicks the × button on an indicator label. */
-  onRemove?: (id: string) => void;
-  /** Called when the user clicks the ⚙ button on an indicator label. */
-  onConfigure?: (indicator: IndicatorInstance) => void;
-  /** Ref to the current crosshair X pixel (from the price pane). Drawn as a synced vertical line. */
-  crosshairXRef?: { current: number | null };
-};
-
-export function IndicatorPane({
-  indicators,
-  bars,
-  transform,
-  height,
-  theme,
-  computedResults,
-  crosshairXRef,
-  onRemove,
-  onConfigure,
-}: IndicatorPaneProps) {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  // Stable ref to the draw function — rebuilt whenever data changes,
-  // called each RAF frame to stay in sync with the candle layer.
-  const drawFnRef = useRef<(() => void) | null>(null);
-
-  useEffect(() => {
-    drawFnRef.current = () => {
-    const canvas = canvasRef.current;
-    if (!canvas || !transform || indicators.length === 0) return;
-
-    const dpr = window.devicePixelRatio ?? 1;
-    const cssW = canvas.offsetWidth || (canvas.parentElement?.clientWidth ?? 800);
-    const cssH = height;
-    const physW = Math.round(cssW * dpr);
-    const physH = Math.round(cssH * dpr);
-
-    if (canvas.width !== physW || canvas.height !== physH) {
-      canvas.width = physW;
-      canvas.height = physH;
-    }
-
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    const pal = PALETTE[theme];
-
-    ctx.save();
-    ctx.scale(dpr, dpr);
-
-    const w = cssW;
-    const h = cssH;
-    const plotW = w - AXIS_W;
-
-    // Background
-    ctx.fillStyle = pal.bg;
-    ctx.fillRect(0, 0, w, h);
-
-    // Top separator
-    ctx.strokeStyle = pal.border;
-    ctx.lineWidth = 1;
-    ctx.beginPath();
-    ctx.moveTo(0, 0.5);
-    ctx.lineTo(w, 0.5);
-    ctx.stroke();
-
-    // Axis divider
-    ctx.beginPath();
-    ctx.moveTo(plotW + 0.5, 0);
-    ctx.lineTo(plotW + 0.5, h);
-    ctx.stroke();
-
-    // Clip plot area so indicator lines don't bleed into axis
-    ctx.save();
-    ctx.beginPath();
-    ctx.rect(0, 0, plotW, h);
-    ctx.clip();
-
-    for (const indicator of indicators) {
-      const result = computedResults.get(indicator.id);
-      if (!result) continue;
-      const color = indicator.config.color;
-
-      switch (indicator.config.type) {
-        case 'rsi':
-          if (result.kind === 'series')
-            _renderRSI(ctx, result.points, transform, plotW, h, color ?? '#7c4dff', pal);
-          break;
-        case 'macd':
-          if (result.kind === 'macd')
-            _renderMACD(ctx, result.points, transform, plotW, h, pal);
-          break;
-        case 'volume':
-          if (result.kind === 'series')
-            _renderVolume(ctx, bars, result.points, transform, plotW, h, pal);
-          break;
-        default:
-          // sma, ema, wma, bbands, and any chained / custom indicators
-          if (result.kind === 'series')
-            _renderLineIndicator(ctx, result.points, transform, plotW, h, color ?? '#ffb300', pal);
-      }
-    }
-
-    // ── Crosshair vertical line (synced from price pane) ────────────────
-    const xhair = crosshairXRef?.current ?? null;
-    if (xhair !== null && xhair >= 0 && xhair <= plotW) {
-      ctx.strokeStyle = theme === 'dark' ? 'rgba(255,255,255,0.4)' : 'rgba(0,0,0,0.4)';
-      ctx.lineWidth = 0.5;
-      ctx.setLineDash([3, 3]);
-      ctx.beginPath();
-      ctx.moveTo(xhair + 0.5, 0);
-      ctx.lineTo(xhair + 0.5, h);
-      ctx.stroke();
-      ctx.setLineDash([]);
-    }
-
-    ctx.restore(); // clip
-
-      ctx.restore(); // dpr scale
-    };
-    // Draw immediately when data (not viewport) changes.
-    drawFnRef.current();
-  }, [computedResults, bars, height, indicators, transform, theme]);
-
-  // RAF loop: redraw every frame so the pane tracks pan/zoom in the same
-  // animation frame as the candle layer — no React state update needed.
-  useEffect(() => {
-    let rafId: number;
-    const tick = () => {
-      drawFnRef.current?.();
-      rafId = requestAnimationFrame(tick);
-    };
-    rafId = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(rafId);
-  }, []);
-
-  const pal = PALETTE[theme];
-
-  return (
-    <div style={{ position: 'relative', width: '100%', height: `${height}px` }}>
-      <canvas
-        ref={canvasRef}
-        style={{ width: '100%', height: `${height}px`, display: 'block' }}
-      />
-      {/* Indicator name labels — one per indicator in this pane */}
-      <div
-        style={{
-          position: 'absolute',
-          top: 4,
-          left: 4,
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 2,
-          pointerEvents: 'auto',
-          zIndex: 2,
-        }}
-      >
-        {indicators.map((ind) => (
-          <IndicatorLabel
-            key={ind.id}
-            indicator={ind}
-            color={pal.text}
-            onRemove={() => onRemove?.(ind.id)}
-            onConfigure={() => onConfigure?.(ind)}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/react/canvas/PointerOverlay.tsx

@@ -1,126 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import type { PointerToolType } from '../../';
-import {
-  DOT_RADIUS,
-  DOT_COLOR,
-  DEMONSTRATION_RADIUS,
-  DEMONSTRATION_FILL,
-  DEMONSTRATION_STROKE,
-  DEMONSTRATION_COLOR,
-} from '../../';
-
-/**
- * PointerOverlay — a transparent `<div>` that covers the entire chart area and
- * renders tool-specific cursor visuals for the `dot` and `demonstration` modes.
- *
- * - **dot**: SVG crosshair lines + small filled circle at the intersection.
- * - **demonstration**: SVG crosshair + semi-transparent filled circle centred
- *   on the cursor.
- *
- * The component does NOT intercept pointer events (`pointerEvents: none`), so
- * all mouse interactions pass through to the canvas layers beneath it.
- */
-
-type Props = {
-  mode: PointerToolType;
-  /** Width of the container to size the SVG overlay. */
-  width: number;
-  /** Height of the container to size the SVG overlay. */
-  height: number;
-};
-
-const CROSSHAIR_COLOR = DEMONSTRATION_COLOR;
-
-export function PointerOverlay({ mode, width, height }: Props): React.ReactElement | null {
-  const svgRef      = useRef<SVGSVGElement>(null);
-  const hGroupRef   = useRef<SVGGElement>(null);   // translateY group → horizontal line
-  const vGroupRef   = useRef<SVGGElement>(null);   // translateX group → vertical line
-  const cursorGroup = useRef<SVGGElement>(null);   // translate(x,y) group → dot/circle
-
-  useEffect(() => {
-    const svg = svgRef.current;
-    if (!svg) return;
-    const container = svg.parentElement;
-    if (!container) return;
-
-    // Cache the bounding rect so we never call getBoundingClientRect() inside the
-    // hot move handler (it forces a synchronous reflow on every event).
-    let cachedRect = container.getBoundingClientRect();
-    const ro = new ResizeObserver(() => { cachedRect = container.getBoundingClientRect(); });
-    ro.observe(container);
-
-    const onMove = (e: MouseEvent) => {
-      const x = e.clientX - cachedRect.left;
-      const y = e.clientY - cachedRect.top;
-
-      if (x < 0 || y < 0 || x > cachedRect.width || y > cachedRect.height) {
-        svg.style.opacity = '0';
-        return;
-      }
-
-      svg.style.opacity = '1';
-
-      // CSS transforms are GPU-composited — no layout reflow, no paint.
-      if (hGroupRef.current)   hGroupRef.current.style.transform   = `translateY(${y}px)`;
-      if (vGroupRef.current)   vGroupRef.current.style.transform   = `translateX(${x}px)`;
-      if (cursorGroup.current) cursorGroup.current.style.transform = `translate(${x}px,${y}px)`;
-    };
-
-    const hide = () => { svg.style.opacity = '0'; };
-
-    // passive:true lets the browser skip asking us about preventDefault → lower latency
-    container.addEventListener('mousemove',  onMove, { passive: true });
-    container.addEventListener('mouseleave', hide,  { passive: true });
-    return () => {
-      container.removeEventListener('mousemove',  onMove);
-      container.removeEventListener('mouseleave', hide);
-      ro.disconnect();
-    };
-  }, []);
-
-  if (mode !== 'dot' && mode !== 'demonstration') return null;
-
-  return (
-    <svg
-      ref={svgRef}
-      width={width}
-      height={height}
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        pointerEvents: 'none',
-        zIndex: 5,
-        opacity: 0,
-        overflow: 'visible',
-        willChange: 'opacity',
-      }}
-    >
-      {/* Horizontal crosshair line — spans ±∞ so width never matters */}
-      <g ref={hGroupRef}>
-        <line x1="-9999" y1="0" x2="9999" y2="0"
-          stroke={CROSSHAIR_COLOR} strokeWidth="1" strokeDasharray="4 3" />
-      </g>
-
-      {/* Vertical crosshair line — spans ±∞ so height never matters */}
-      <g ref={vGroupRef}>
-        <line x1="0" y1="-9999" x2="0" y2="9999"
-          stroke={CROSSHAIR_COLOR} strokeWidth="1" strokeDasharray="4 3" />
-      </g>
-
-      {/* Cursor element translated to (x, y) */}
-      <g ref={cursorGroup}>
-        {mode === 'dot' && (
-          <circle r={DOT_RADIUS} fill={DOT_COLOR} />
-        )}
-        {mode === 'demonstration' && (
-          <circle r={DEMONSTRATION_RADIUS}
-            fill={DEMONSTRATION_FILL}
-            stroke={DEMONSTRATION_STROKE}
-            strokeWidth="1.5"
-          />
-        )}
-      </g>
-    </svg>
-  );
-}