gloomberb 0.7.5 → 0.8.0

package/src/components/chart/native/chart-rasterizer.ts

@@ -1,865 +1,18 @@
-import { type PixelResolution } from "../../../ui";
-import { measurePerf } from "../../../utils/perf-marks";
-import { computeGridLines, type ChartScene } from "../chart-renderer";
-import type { ComparisonChartScene } from "../comparison-chart-renderer";
-import type { ChartColors, ChartRenderMode, ChartSessionBackgroundSpan } from "../chart-types";
-
-interface RgbaColor {
-  r: number;
-  g: number;
-  b: number;
-  a: number;
-}
-
-export interface CellRect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export interface PixelRect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export interface NativeChartBitmap {
-  width: number;
-  height: number;
-  pixels: Uint8Array;
-}
-
-export interface NativeCrosshairOverlay {
-  width: number;
-  height: number;
-  chartRows: number;
-  pixelX: number | null;
-  pixelY: number | null;
-  colors: {
-    crosshairColor: string;
-  };
-}
-
-export interface NativePlacement {
-  column: number;
-  row: number;
-  cols: number;
-  rows: number;
-  cropX: number;
-  cropY: number;
-  cropWidth: number;
-  cropHeight: number;
-}
-
-const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
-
-function smoothstep(edge0: number, edge1: number, value: number): number {
-  const range = edge1 - edge0;
-  if (range === 0) return value < edge0 ? 0 : 1;
-  const t = clamp((value - edge0) / range, 0, 1);
-  return t * t * (3 - 2 * t);
-}
-
-function parseHex(hex: string, alpha = 1): RgbaColor {
-  const normalized = hex.replace("#", "");
-  return {
-    r: parseInt(normalized.slice(0, 2), 16),
-    g: parseInt(normalized.slice(2, 4), 16),
-    b: parseInt(normalized.slice(4, 6), 16),
-    a: Math.round(clamp(alpha, 0, 1) * 255),
-  };
-}
-
-function blendPixel(
-  data: Uint8Array,
-  width: number,
-  height: number,
-  x: number,
-  y: number,
-  color: RgbaColor,
-  opacity = 1,
-) {
-  if (x < 0 || y < 0 || x >= width || y >= height) return;
-
-  const alpha = clamp((color.a / 255) * opacity, 0, 1);
-  if (alpha <= 0) return;
-
-  const index = (y * width + x) * 4;
-  const dstAlpha = data[index + 3]! / 255;
-  const outAlpha = alpha + dstAlpha * (1 - alpha);
-
-  if (outAlpha <= 0) return;
-
-  const dstFactor = dstAlpha * (1 - alpha);
-  data[index] = Math.round((color.r * alpha + data[index]! * dstFactor) / outAlpha);
-  data[index + 1] = Math.round((color.g * alpha + data[index + 1]! * dstFactor) / outAlpha);
-  data[index + 2] = Math.round((color.b * alpha + data[index + 2]! * dstFactor) / outAlpha);
-  data[index + 3] = Math.round(outAlpha * 255);
-}
-
-function drawLine(
-  data: Uint8Array,
-  width: number,
-  height: number,
-  x0: number,
-  y0: number,
-  x1: number,
-  y1: number,
-  color: RgbaColor,
-  thickness: number,
-) {
-  const half = thickness / 2;
-  const minX = Math.floor(Math.min(x0, x1) - half - 1);
-  const maxX = Math.ceil(Math.max(x0, x1) + half + 1);
-  const minY = Math.floor(Math.min(y0, y1) - half - 1);
-  const maxY = Math.ceil(Math.max(y0, y1) + half + 1);
-  const dx = x1 - x0;
-  const dy = y1 - y0;
-  const segmentLengthSq = dx * dx + dy * dy || 1;
-
-  for (let py = minY; py <= maxY; py++) {
-    for (let px = minX; px <= maxX; px++) {
-      const cx = px + 0.5;
-      const cy = py + 0.5;
-      const projection = clamp(((cx - x0) * dx + (cy - y0) * dy) / segmentLengthSq, 0, 1);
-      const nearestX = x0 + dx * projection;
-      const nearestY = y0 + dy * projection;
-      const distance = Math.hypot(cx - nearestX, cy - nearestY);
-      const coverage = 1 - smoothstep(half, half + 1.1, distance);
-      if (coverage > 0) {
-        blendPixel(data, width, height, px, py, color, coverage);
-      }
-    }
-  }
-}
-
-function fillRect(
-  data: Uint8Array,
-  width: number,
-  height: number,
-  left: number,
-  top: number,
-  right: number,
-  bottom: number,
-  color: RgbaColor,
-  opacity = 1,
-) {
-  for (let y = Math.max(Math.floor(top), 0); y <= Math.min(Math.ceil(bottom), height - 1); y++) {
-    for (let x = Math.max(Math.floor(left), 0); x <= Math.min(Math.ceil(right), width - 1); x++) {
-      blendPixel(data, width, height, x, y, color, opacity);
-    }
-  }
-}
-
-function drawCircle(
-  data: Uint8Array,
-  width: number,
-  height: number,
-  centerX: number,
-  centerY: number,
-  radius: number,
-  color: RgbaColor,
-) {
-  const minX = Math.floor(centerX - radius - 1);
-  const maxX = Math.ceil(centerX + radius + 1);
-  const minY = Math.floor(centerY - radius - 1);
-  const maxY = Math.ceil(centerY + radius + 1);
-
-  for (let py = minY; py <= maxY; py++) {
-    for (let px = minX; px <= maxX; px++) {
-      const distance = Math.hypot(px + 0.5 - centerX, py + 0.5 - centerY);
-      const coverage = 1 - smoothstep(radius - 0.65, radius + 0.65, distance);
-      if (coverage > 0) {
-        blendPixel(data, width, height, px, py, color, coverage);
-      }
-    }
-  }
-}
-
-function drawWickOutsideBody(
-  data: Uint8Array,
-  width: number,
-  height: number,
-  x: number,
-  highY: number,
-  lowY: number,
-  bodyTop: number,
-  bodyBottom: number,
-  color: RgbaColor,
-) {
-  if (highY < bodyTop) {
-    drawLine(data, width, height, x, highY, x, bodyTop, color, 1.2);
-  }
-  if (bodyBottom < lowY) {
-    drawLine(data, width, height, x, bodyBottom, x, lowY, color, 1.2);
-  }
-}
-
-function drawAreaFill(
-  data: Uint8Array,
-  width: number,
-  height: number,
-  yByColumn: Float32Array,
-  bottom: number,
-  color: RgbaColor,
-) {
-  for (let x = 0; x < yByColumn.length; x++) {
-    const yTop = yByColumn[x]!;
-    if (!Number.isFinite(yTop)) continue;
-    const distance = Math.max(bottom - yTop, 1);
-    for (let y = Math.max(Math.floor(yTop), 0); y <= Math.min(Math.ceil(bottom), height - 1); y++) {
-      const fade = 1 - (y - yTop) / distance;
-      blendPixel(data, width, height, x, y, color, 0.08 + fade * 0.32);
-    }
-  }
-}
-
-function lerp(a: number, b: number, t: number): number {
-  return a + (b - a) * t;
-}
-
-function getChartPixelLayout(scene: ChartScene, pixelWidth: number, pixelHeight: number) {
-  const volumeHeight = scene.showVolume ? Math.max(Math.round((scene.volumeHeight / Math.max(scene.height, 1)) * pixelHeight), 1) : 0;
-  const plotHeight = Math.max(pixelHeight - volumeHeight, 1);
-  return {
-    plotLeft: 0,
-    plotTop: 0,
-    plotRight: Math.max(pixelWidth - 1, 0),
-    plotBottom: Math.max(plotHeight - 1, 0),
-    volumeTop: plotHeight,
-    volumeBottom: Math.max(pixelHeight - 1, plotHeight),
-  };
-}
-
-function getComparisonPixelLayout(pixelWidth: number, pixelHeight: number) {
-  return {
-    plotLeft: 0,
-    plotTop: 0,
-    plotRight: Math.max(pixelWidth - 1, 0),
-    plotBottom: Math.max(pixelHeight - 1, 0),
-  };
-}
-
-function projectX(index: number, count: number, left: number, right: number): number {
-  if (count <= 1) return (left + right) / 2;
-  return lerp(left, right, index / (count - 1));
-}
-
-function isOhlcLikeMode(mode: ChartRenderMode): boolean {
-  return mode === "ohlc" || mode === "hlc";
-}
-
-function isHighLowMode(mode: ChartRenderMode): boolean {
-  return mode === "candles" || isOhlcLikeMode(mode);
-}
-
-function getNativeBarMetrics(count: number, width: number, mode: Extract<ChartRenderMode, "candles" | "ohlc" | "hlc">) {
-  const spacing = width / Math.max(count, 1);
-  if (mode === "candles") {
-    return {
-      bodyWidth: clamp(spacing * 0.58, 2, Math.max(spacing - 1, 2)),
-      tickLength: 0,
-      stemThickness: 1.2,
-    };
-  }
-
-  return {
-    bodyWidth: 0,
-    tickLength: clamp(spacing * 0.5, 3, Math.max(spacing * 0.62, 3)),
-    stemThickness: clamp(spacing * 0.12, 2, 3.2),
-  };
-}
-
-function projectChartX(index: number, count: number, width: number, mode: ChartRenderMode): number {
-  if (!isHighLowMode(mode)) {
-    return projectX(index, count, 0, Math.max(width - 1, 0));
-  }
-
-  const { bodyWidth, tickLength, stemThickness } = getNativeBarMetrics(count, width, mode);
-  const horizontalPad = isOhlcLikeMode(mode)
-    ? Math.ceil(Math.max(tickLength - 1, stemThickness / 2, 0))
-    : Math.ceil(bodyWidth / 2);
-  return projectX(index, count, horizontalPad, Math.max(width - 1 - horizontalPad, horizontalPad));
-}
-
-function getProjectedPointBand(
-  index: number,
-  count: number,
-  width: number,
-  projectIndex: (targetIndex: number) => number,
-): PixelRect {
-  const currentX = projectIndex(index);
-  const previousX = index > 0 ? projectIndex(index - 1) : currentX;
-  const nextX = index < count - 1 ? projectIndex(index + 1) : currentX;
-  const left = index === 0 ? 0 : Math.floor((previousX + currentX) / 2) + 1;
-  const right = index === count - 1 ? Math.max(width - 1, 0) : Math.floor((currentX + nextX) / 2);
-  return {
-    x: clamp(left, 0, Math.max(width - 1, 0)),
-    y: 0,
-    width: Math.max(clamp(right, 0, Math.max(width - 1, 0)) - clamp(left, 0, Math.max(width - 1, 0)) + 1, 1),
-    height: 1,
-  };
-}
-
-function drawSessionBackgroundSpans(
-  data: Uint8Array,
-  width: number,
-  height: number,
-  spans: readonly ChartSessionBackgroundSpan[],
-  pointCount: number,
-  top: number,
-  bottom: number,
-  colors: Pick<ChartColors, "preMarketBgColor" | "postMarketBgColor">,
-  projectIndex: (targetIndex: number) => number,
-) {
-  if (spans.length === 0 || pointCount === 0) return;
-  for (const span of spans) {
-    const startIndex = clamp(span.startIndex, 0, pointCount - 1);
-    const endIndex = clamp(span.endIndex, startIndex, pointCount - 1);
-    const startBand = getProjectedPointBand(startIndex, pointCount, width, projectIndex);
-    const endBand = getProjectedPointBand(endIndex, pointCount, width, projectIndex);
-    const color = parseHex(span.kind === "pre" ? colors.preMarketBgColor : colors.postMarketBgColor, 1);
-    fillRect(data, width, height, startBand.x, top, endBand.x + endBand.width - 1, bottom, color, 1);
-  }
-}
-
-function projectY(value: number, min: number, max: number, top: number, bottom: number): number {
-  const range = max - min || 1;
-  return lerp(bottom, top, (value - min) / range);
-}
-
-function drawPriceGrid(
-  data: Uint8Array,
-  width: number,
-  height: number,
-  scene: ChartScene,
-  top: number,
-  bottom: number,
-) {
-  const gridLines = computeGridLines(scene.min, scene.max, top, bottom, 3);
-  const color = parseHex(scene.colors.gridColor, 0.28);
-
-  for (const line of gridLines) {
-    drawLine(data, width, height, 0, line.y, width - 1, line.y, color, 1);
-  }
-}
-
-function drawLineSeries(
-  data: Uint8Array,
-  width: number,
-  height: number,
-  scene: ChartScene,
-  top: number,
-  bottom: number,
-) {
-  const glow = parseHex(scene.colors.lineColor, 0.2);
-  const line = parseHex(scene.colors.lineColor, 0.95);
-  const fill = parseHex(scene.colors.fillColor, 0.7);
-  const yByColumn = new Float32Array(width).fill(Number.POSITIVE_INFINITY);
-
-  for (let index = 0; index < scene.points.length - 1; index++) {
-    const current = scene.points[index]!;
-    const next = scene.points[index + 1]!;
-    const x0 = projectX(index, scene.points.length, 0, width - 1);
-    const x1 = projectX(index + 1, scene.points.length, 0, width - 1);
-    const y0 = projectY(current.close, scene.min, scene.max, top, bottom);
-    const y1 = projectY(next.close, scene.min, scene.max, top, bottom);
-
-    const start = Math.max(Math.floor(Math.min(x0, x1)), 0);
-    const end = Math.min(Math.ceil(Math.max(x0, x1)), width - 1);
-    for (let x = start; x <= end; x++) {
-      const t = x1 === x0 ? 0 : (x - x0) / (x1 - x0);
-      const y = lerp(y0, y1, clamp(t, 0, 1));
-      yByColumn[x] = Math.min(yByColumn[x]!, y);
-    }
-
-    if (scene.mode === "area") {
-      drawLine(data, width, height, x0, y0, x1, y1, glow, 4);
-      drawLine(data, width, height, x0, y0, x1, y1, line, 1.75);
-    } else {
-      drawLine(data, width, height, x0, y0, x1, y1, glow, 3.2);
-      drawLine(data, width, height, x0, y0, x1, y1, line, 1.4);
-    }
-  }
-
-  if (scene.mode === "area") {
-    drawAreaFill(data, width, height, yByColumn, bottom, fill);
-  }
-}
-
-function drawCandles(
-  data: Uint8Array,
-  width: number,
-  height: number,
-  scene: ChartScene,
-  top: number,
-  bottom: number,
-  mode: Extract<ChartRenderMode, "candles" | "ohlc" | "hlc">,
-) {
-  const { bodyWidth, tickLength, stemThickness } = getNativeBarMetrics(scene.points.length, width, mode);
-  const horizontalPad = isOhlcLikeMode(mode)
-    ? Math.ceil(Math.max(tickLength - 1, stemThickness / 2, 0))
-    : Math.ceil(bodyWidth / 2);
-  const plotLeft = horizontalPad;
-  const plotRight = Math.max(width - 1 - horizontalPad, plotLeft);
-
-  for (let index = 0; index < scene.points.length; index++) {
-    const point = scene.points[index]!;
-    const x = projectX(index, scene.points.length, plotLeft, plotRight);
-    const highY = projectY(point.high, scene.min, scene.max, top, bottom);
-    const lowY = projectY(point.low, scene.min, scene.max, top, bottom);
-    const openY = projectY(point.open, scene.min, scene.max, top, bottom);
-    const closeY = projectY(point.close, scene.min, scene.max, top, bottom);
-    const isUp = point.close >= point.open;
-
-    const wickColor = parseHex(isUp ? scene.colors.wickUp : scene.colors.wickDown, 0.92);
-    const bodyColor = parseHex(isUp ? scene.colors.candleUp : scene.colors.candleDown, 1);
-
-    if (isOhlcLikeMode(mode)) {
-      drawLine(data, width, height, x, highY, x, lowY, wickColor, stemThickness);
-      if (mode === "ohlc") {
-        drawLine(data, width, height, x - tickLength, openY, x, openY, bodyColor, Math.max(stemThickness, 1.4));
-      }
-      drawLine(data, width, height, x, closeY, x + tickLength, closeY, bodyColor, Math.max(stemThickness, 1.4));
-      continue;
-    }
-
-    const bodyTop = Math.min(openY, closeY);
-    const bodyBottom = Math.max(openY, closeY);
-    if (Math.abs(bodyBottom - bodyTop) < 1.25) {
-      drawLine(data, width, height, x, highY, x, lowY, wickColor, 1.2);
-      drawLine(data, width, height, x - bodyWidth / 2, bodyTop, x + bodyWidth / 2, bodyTop, bodyColor, 1.5);
-    } else {
-      drawWickOutsideBody(data, width, height, x, highY, lowY, bodyTop, bodyBottom, wickColor);
-      fillRect(data, width, height, x - bodyWidth / 2, bodyTop, x + bodyWidth / 2, bodyBottom, bodyColor, 1);
-    }
-  }
-}
-
-function drawVolume(
-  data: Uint8Array,
-  width: number,
-  height: number,
-  scene: ChartScene,
-  top: number,
-  bottom: number,
-) {
-  if (!scene.showVolume || bottom < top) return;
-
-  const volumes = scene.points.map((point) => point.volume);
-  const maxVolume = Math.max(...volumes, 1);
-  const spacing = width / Math.max(scene.points.length, 1);
-  const barWidth = clamp(spacing * 0.72, 1, Math.max(spacing, 1));
-
-  for (let index = 0; index < scene.points.length; index++) {
-    const point = scene.points[index]!;
-    const heightRatio = point.volume / maxVolume;
-    if (heightRatio <= 0) continue;
-    const x = projectX(index, scene.points.length, 0, width - 1);
-    const barTop = lerp(bottom, top, heightRatio);
-    const isUp = isHighLowMode(scene.mode)
-      ? point.close >= point.open
-      : index === 0 || point.close >= scene.points[index - 1]!.close;
-    const color = parseHex(isUp ? scene.colors.volumeUp : scene.colors.volumeDown, 0.6);
-    fillRect(data, width, height, x - barWidth / 2, barTop, x + barWidth / 2, bottom, color, 0.8);
-  }
-}
-
-function drawIndicatorOverlays(
-  data: Uint8Array,
-  width: number,
-  height: number,
-  scene: ChartScene,
-  top: number,
-  bottom: number,
-) {
-  if (!scene.indicators) return;
-
-  const drawOverlay = (points: { index: number; value: number }[], color: string) => {
-    const lineColor = parseHex(color, 0.95);
-    for (let index = 0; index < points.length - 1; index += 1) {
-      const p0 = points[index]!;
-      const p1 = points[index + 1]!;
-      const x0 = projectChartX(p0.index, scene.points.length, width, scene.mode);
-      const y0 = projectY(p0.value, scene.min, scene.max, top, bottom);
-      const x1 = projectChartX(p1.index, scene.points.length, width, scene.mode);
-      const y1 = projectY(p1.value, scene.min, scene.max, top, bottom);
-      drawLine(data, width, height, x0, y0, x1, y1, lineColor, 1.2);
-    }
-  };
-
-  for (const sma of scene.indicators.smaLines) {
-    drawOverlay(sma.points, sma.color);
-  }
-  for (const ema of scene.indicators.emaLines) {
-    drawOverlay(ema.points, ema.color);
-  }
-  if (scene.indicators.bollinger) {
-    drawOverlay(scene.indicators.bollinger.upper, scene.indicators.bollinger.color);
-    drawOverlay(scene.indicators.bollinger.middle, scene.indicators.bollinger.color);
-    drawOverlay(scene.indicators.bollinger.lower, scene.indicators.bollinger.color);
-  }
-}
-
-function drawCrosshairOverlay(
-  data: Uint8Array,
-  width: number,
-  height: number,
-  overlay: NativeCrosshairOverlay,
-  plotTop: number,
-  plotBottom: number,
-) {
-  if (overlay.pixelX === null || overlay.pixelY === null) return;
-
-  const x = clamp(overlay.pixelX, 0, Math.max(width - 1, 0));
-  const y = clamp(overlay.pixelY, plotTop, plotBottom);
-
-  const lineColor = parseHex(overlay.colors.crosshairColor, 0.78);
-  const focusColor = parseHex(overlay.colors.crosshairColor, 0.32);
-  drawLine(data, width, height, x, 0, x, height - 1, lineColor, 1.05);
-  drawLine(data, width, height, 0, y, width - 1, y, lineColor, 1.05);
-  drawCircle(data, width, height, x, y, 2.1, focusColor);
-}
-
-function getOverlayPlotBottom(overlay: NativeCrosshairOverlay, pixelHeight: number): number {
-  if (pixelHeight <= 1 || overlay.height <= 0) return Math.max(pixelHeight - 1, 0);
-  const plotHeight = Math.max(Math.round((overlay.chartRows / Math.max(overlay.height, 1)) * pixelHeight), 1);
-  return Math.max(Math.min(plotHeight - 1, pixelHeight - 1), 0);
-}
-
-export function renderNativeChartBase(scene: ChartScene, pixelWidth: number, pixelHeight: number): NativeChartBitmap {
-  return measurePerf("chart.native.base", () => {
-    const pixels = new Uint8Array(pixelWidth * pixelHeight * 4);
-    if (scene.points.length === 0 || pixelWidth <= 0 || pixelHeight <= 0) {
-      return { width: Math.max(pixelWidth, 1), height: Math.max(pixelHeight, 1), pixels };
-    }
-
-    const layout = getChartPixelLayout(scene, pixelWidth, pixelHeight);
-    drawSessionBackgroundSpans(
-      pixels,
-      pixelWidth,
-      pixelHeight,
-      scene.sessionBackgroundSpans,
-      scene.points.length,
-      layout.plotTop,
-      scene.showVolume ? layout.volumeBottom : layout.plotBottom,
-      scene.colors,
-      (index) => projectX(index, scene.points.length, 0, Math.max(pixelWidth - 1, 0)),
-    );
-    drawPriceGrid(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom);
-    drawIndicatorOverlays(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom);
-
-    switch (scene.mode) {
-      case "area":
-      case "line":
-        drawLineSeries(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom);
-        break;
-      case "candles":
-        drawCandles(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom, "candles");
-        break;
-      case "ohlc":
-        drawCandles(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom, "ohlc");
-        break;
-      case "hlc":
-        drawCandles(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom, "hlc");
-        break;
-    }
-
-    drawVolume(pixels, pixelWidth, pixelHeight, scene, layout.volumeTop, layout.volumeBottom);
-
-    return { width: pixelWidth, height: pixelHeight, pixels };
-  }, { pixelWidth, pixelHeight, points: scene.points.length, mode: scene.mode });
-}
-
-interface ComparisonPathSample {
-  x: number;
-  y: number;
-}
-
-function buildComparisonPath(
-  scene: ComparisonChartScene,
-  series: ComparisonChartScene["series"][number],
-  width: number,
-  top: number,
-  bottom: number,
-) {
-  const path: Array<ComparisonPathSample | null> = [];
-  const yByColumn = new Float32Array(width).fill(Number.POSITIVE_INFINITY);
-
-  for (let index = 0; index < series.points.length; index += 1) {
-    const point = series.points[index]!;
-    if (point.value === null) {
-      path.push(null);
-      continue;
-    }
-
-    const x = projectX(index, Math.max(scene.dates.length, 1), 0, width - 1);
-    const y = projectY(point.value, scene.min, scene.max, top, bottom);
-    path.push({ x, y });
-
-    const roundedX = clamp(Math.round(x), 0, Math.max(width - 1, 0));
-    yByColumn[roundedX] = Math.min(yByColumn[roundedX]!, y);
-
-    const previous = path[index - 1] ?? null;
-    if (!previous) continue;
-
-    const start = Math.max(Math.floor(Math.min(previous.x, x)), 0);
-    const end = Math.min(Math.ceil(Math.max(previous.x, x)), width - 1);
-    for (let px = start; px <= end; px += 1) {
-      const t = x === previous.x ? 0 : (px - previous.x) / (x - previous.x);
-      const interpolatedY = lerp(previous.y, y, clamp(t, 0, 1));
-      yByColumn[px] = Math.min(yByColumn[px]!, interpolatedY);
-    }
-  }
-
-  return { path, yByColumn };
-}
-
-function drawComparisonLinePath(
-  data: Uint8Array,
-  width: number,
-  height: number,
-  path: Array<ComparisonPathSample | null>,
-  color: RgbaColor,
-  glow: RgbaColor,
-) {
-  let previous: ComparisonPathSample | null = null;
-
-  for (const sample of path) {
-    if (!sample) {
-      previous = null;
-      continue;
-    }
-
-    if (previous) {
-      drawLine(data, width, height, previous.x, previous.y, sample.x, sample.y, glow, 3.2);
-      drawLine(data, width, height, previous.x, previous.y, sample.x, sample.y, color, 1.4);
-    } else {
-      drawLine(data, width, height, sample.x, sample.y, sample.x, sample.y, color, 1.4);
-    }
-
-    previous = sample;
-  }
-}
-
-export function renderNativeComparisonChartBase(
-  scene: ComparisonChartScene,
-  pixelWidth: number,
-  pixelHeight: number,
-): NativeChartBitmap {
-  const pixels = new Uint8Array(pixelWidth * pixelHeight * 4);
-  if (scene.series.length === 0 || scene.dates.length === 0 || pixelWidth <= 0 || pixelHeight <= 0) {
-    return { width: Math.max(pixelWidth, 1), height: Math.max(pixelHeight, 1), pixels };
-  }
-
-  const layout = getComparisonPixelLayout(pixelWidth, pixelHeight);
-  drawSessionBackgroundSpans(
-    pixels,
-    pixelWidth,
-    pixelHeight,
-    scene.sessionBackgroundSpans,
-    scene.dates.length,
-    layout.plotTop,
-    layout.plotBottom,
-    scene.colors,
-    (index) => projectX(index, Math.max(scene.dates.length, 1), 0, pixelWidth - 1),
-  );
-  drawPriceGrid(
-    pixels,
-    pixelWidth,
-    pixelHeight,
-    {
-      min: scene.min,
-      max: scene.max,
-      colors: { gridColor: scene.colors.gridColor },
-    } as ChartScene,
-    layout.plotTop,
-    layout.plotBottom,
-  );
-
-  const selectedSeries = scene.selectedSeries;
-  const orderedSeries = [
-    ...scene.series.filter((entry) => entry.symbol !== selectedSeries?.symbol),
-    ...(selectedSeries ? [selectedSeries] : []),
-  ];
-
-  const paths = orderedSeries.map((series) => ({
-    series,
-    ...buildComparisonPath(scene, series, pixelWidth, layout.plotTop, layout.plotBottom),
-  }));
-
-  if (scene.mode === "area") {
-    for (const entry of paths) {
-      drawAreaFill(
-        pixels,
-        pixelWidth,
-        pixelHeight,
-        entry.yByColumn,
-        layout.plotBottom,
-        parseHex(entry.series.fillColor, 0.7),
-      );
-    }
-  }
-
-  for (const entry of paths) {
-    drawComparisonLinePath(
-      pixels,
-      pixelWidth,
-      pixelHeight,
-      entry.path,
-      parseHex(entry.series.color, 0.96),
-      parseHex(entry.series.color, scene.mode === "area" ? 0.18 : 0.22),
-    );
-  }
-
-  return { width: pixelWidth, height: pixelHeight, pixels };
-}
-
-export function renderNativeCrosshairOverlay(
-  overlay: NativeCrosshairOverlay,
-  pixelWidth: number,
-  pixelHeight: number,
-): NativeChartBitmap {
-  return measurePerf("chart.native.crosshair", () => {
-    const pixels = new Uint8Array(Math.max(pixelWidth, 1) * Math.max(pixelHeight, 1) * 4);
-    if (pixelWidth <= 0 || pixelHeight <= 0) {
-      return { width: Math.max(pixelWidth, 1), height: Math.max(pixelHeight, 1), pixels };
-    }
-
-    const plotBottom = getOverlayPlotBottom(overlay, pixelHeight);
-    drawCrosshairOverlay(pixels, pixelWidth, pixelHeight, overlay, 0, plotBottom);
-    return { width: pixelWidth, height: pixelHeight, pixels };
-  }, { pixelWidth, pixelHeight });
-}
-
-export function intersectCellRects(a: CellRect, b: CellRect): CellRect | null {
-  const x = Math.max(a.x, b.x);
-  const y = Math.max(a.y, b.y);
-  const right = Math.min(a.x + a.width, b.x + b.width);
-  const bottom = Math.min(a.y + a.height, b.y + b.height);
-  if (right <= x || bottom <= y) return null;
-  return {
-    x,
-    y,
-    width: right - x,
-    height: bottom - y,
-  };
-}
-
-function subtractCellRect(rect: CellRect, cut: CellRect): CellRect[] {
-  const intersection = intersectCellRects(rect, cut);
-  if (!intersection) return [rect];
-
-  const fragments: CellRect[] = [];
-  const rectRight = rect.x + rect.width;
-  const rectBottom = rect.y + rect.height;
-  const cutRight = intersection.x + intersection.width;
-  const cutBottom = intersection.y + intersection.height;
-
-  if (intersection.y > rect.y) {
-    fragments.push({
-      x: rect.x,
-      y: rect.y,
-      width: rect.width,
-      height: intersection.y - rect.y,
-    });
-  }
-
-  if (cutBottom < rectBottom) {
-    fragments.push({
-      x: rect.x,
-      y: cutBottom,
-      width: rect.width,
-      height: rectBottom - cutBottom,
-    });
-  }
-
-  if (intersection.x > rect.x) {
-    fragments.push({
-      x: rect.x,
-      y: intersection.y,
-      width: intersection.x - rect.x,
-      height: intersection.height,
-    });
-  }
-
-  if (cutRight < rectRight) {
-    fragments.push({
-      x: cutRight,
-      y: intersection.y,
-      width: rectRight - cutRight,
-      height: intersection.height,
-    });
-  }
-
-  return fragments.filter((fragment) => fragment.width > 0 && fragment.height > 0);
-}
-
-function subtractCellRects(rects: CellRect[], cut: CellRect): CellRect[] {
-  return rects.flatMap((rect) => subtractCellRect(rect, cut));
-}
-
-export function excludeCellRects(rect: CellRect, cuts: CellRect[]): CellRect[] {
-  let fragments = [rect];
-  for (const cut of cuts) {
-    fragments = subtractCellRects(fragments, cut);
-    if (fragments.length === 0) break;
-  }
-  return fragments;
-}
-
-export function computeBitmapSize(rect: CellRect, resolution: PixelResolution, terminalWidth: number, terminalHeight: number) {
-  const cellWidth = resolution.width / Math.max(terminalWidth, 1);
-  const cellHeight = resolution.height / Math.max(terminalHeight, 1);
-  return {
-    cellWidth,
-    cellHeight,
-    pixelWidth: Math.max(1, Math.round(rect.width * cellWidth)),
-    pixelHeight: Math.max(1, Math.round(rect.height * cellHeight)),
-  };
-}
-
-export function computeNativePlacement(
-  rect: CellRect,
-  visibleRect: CellRect,
-  bitmap: NativeChartBitmap,
-  resolution: PixelResolution,
-  terminalWidth: number,
-  terminalHeight: number,
-): NativePlacement | null {
-  const cellWidth = resolution.width / Math.max(terminalWidth, 1);
-  const cellHeight = resolution.height / Math.max(terminalHeight, 1);
-  const clipped = intersectCellRects(rect, visibleRect);
-  if (!clipped) return null;
-
-  const cropX = Math.max(0, Math.round((clipped.x - rect.x) * cellWidth));
-  const cropY = Math.max(0, Math.round((clipped.y - rect.y) * cellHeight));
-  const cropWidth = Math.max(1, Math.min(bitmap.width - cropX, Math.round(clipped.width * cellWidth)));
-  const cropHeight = Math.max(1, Math.min(bitmap.height - cropY, Math.round(clipped.height * cellHeight)));
-
-  return {
-    column: clipped.x + 1,
-    row: clipped.y + 1,
-    cols: clipped.width,
-    rows: clipped.height,
-    cropX,
-    cropY,
-    cropWidth,
-    cropHeight,
-  };
-}
-
-export function computeNativePlacements(
-  rect: CellRect,
-  visibleRects: CellRect[],
-  bitmap: NativeChartBitmap,
-  resolution: PixelResolution,
-  terminalWidth: number,
-  terminalHeight: number,
-): NativePlacement[] {
-  return visibleRects
-    .map((visibleRect) => computeNativePlacement(rect, visibleRect, bitmap, resolution, terminalWidth, terminalHeight))
-    .filter((placement): placement is NativePlacement => placement !== null);
-}
+export { renderNativeComparisonChartBase } from "./raster/comparison-chart";
+export { renderNativeCrosshairOverlay } from "./raster/crosshair";
+export { renderNativeChartBase } from "./raster/price-chart";
+
+export {
+  computeBitmapSize,
+  computeNativePlacement,
+  computeNativePlacements,
+  excludeCellRects,
+  intersectCellRects,
+} from "./raster/placement";
+
+export type {
+  CellRect,
+  NativeChartBitmap,
+  NativeCrosshairOverlay,
+  NativePlacement,
+} from "./raster/types";