gloomberb 0.7.5 → 0.8.0

package/src/components/chart/native/kitty/manager.ts

@@ -0,0 +1,142 @@
+import { type NativeRendererHost as CliRenderer } from "../../../../ui";
+import type { NativeChartBitmap, NativePlacement } from "../chart-rasterizer";
+import { writeRendererRaw } from "./adapter";
+import { encodeKittyDeleteImage, encodeKittyPlacement, encodeKittyTransmitRgba } from "./protocol";
+
+let nextImageId = 2000;
+let nextPlacementId = 1;
+
+function allocateImageId(): number {
+  const id = nextImageId;
+  nextImageId += 1;
+  return id;
+}
+
+function allocatePlacementId(): number {
+  const id = nextPlacementId;
+  nextPlacementId += 1;
+  return id;
+}
+
+function serializePlacement(placement: NativePlacement): string {
+  return [
+    placement.column,
+    placement.row,
+    placement.cols,
+    placement.rows,
+    placement.cropX,
+    placement.cropY,
+    placement.cropWidth,
+    placement.cropHeight,
+  ].join(":");
+}
+
+function asPlacementArray(placement: NativePlacement | NativePlacement[]): NativePlacement[] {
+  return Array.isArray(placement) ? placement : [placement];
+}
+
+export class KittyImageManager {
+  private readonly imageIds = [allocateImageId(), allocateImageId()] as const;
+  private readonly placementIds: number[] = [];
+  private activeSlot: 0 | 1 | null = null;
+  private lastBitmapKey: string | null = null;
+  private lastPlacementKeys: string[] = [];
+
+  constructor(private readonly renderer: CliRenderer) {}
+
+  render(bitmap: NativeChartBitmap, placement: NativePlacement | NativePlacement[], bitmapKey: string) {
+    const placements = asPlacementArray(placement);
+    if (this.activeSlot !== null && this.lastBitmapKey === bitmapKey) {
+      this.placeActive(placements);
+      return;
+    }
+
+    const nextSlot: 0 | 1 = this.activeSlot === 0 ? 1 : 0;
+    const imageId = this.imageIds[nextSlot];
+    const placementIds = this.ensurePlacementIds(placements.length);
+    const sequences = [
+      ...encodeKittyTransmitRgba({
+        imageId,
+        width: bitmap.width,
+        height: bitmap.height,
+        rgba: bitmap.pixels,
+      }),
+      ...placements.map((entry, index) => encodeKittyPlacement({
+        imageId,
+        placementId: placementIds[index]!,
+        column: entry.column,
+        row: entry.row,
+        cols: entry.cols,
+        rows: entry.rows,
+        cropX: entry.cropX,
+        cropY: entry.cropY,
+        cropWidth: entry.cropWidth,
+        cropHeight: entry.cropHeight,
+      })),
+    ];
+
+    if (this.activeSlot !== null) {
+      sequences.push(encodeKittyDeleteImage(this.imageIds[this.activeSlot]));
+    }
+
+    writeRendererRaw(this.renderer, sequences.join(""));
+    this.activeSlot = nextSlot;
+    this.lastBitmapKey = bitmapKey;
+    this.lastPlacementKeys = placements.map(serializePlacement);
+  }
+
+  placeActive(placement: NativePlacement | NativePlacement[]) {
+    if (this.activeSlot === null) return;
+    const placements = asPlacementArray(placement);
+    const imageId = this.imageIds[this.activeSlot];
+    const placementIds = this.ensurePlacementIds(placements.length);
+    const sequences: string[] = [];
+
+    placements.forEach((entry, index) => {
+      const placementKey = serializePlacement(entry);
+      if (placementKey === this.lastPlacementKeys[index]) return;
+      sequences.push(encodeKittyPlacement({
+        imageId,
+        placementId: placementIds[index]!,
+        column: entry.column,
+        row: entry.row,
+        cols: entry.cols,
+        rows: entry.rows,
+        cropX: entry.cropX,
+        cropY: entry.cropY,
+        cropWidth: entry.cropWidth,
+        cropHeight: entry.cropHeight,
+      }));
+    });
+
+    for (let index = placements.length; index < this.lastPlacementKeys.length; index += 1) {
+      sequences.push(encodeKittyDeleteImage(imageId, placementIds[index]!));
+    }
+
+    if (sequences.length === 0) return;
+
+    writeRendererRaw(this.renderer, sequences.join(""));
+    this.lastPlacementKeys = placements.map(serializePlacement);
+  }
+
+  clear() {
+    writeRendererRaw(
+      this.renderer,
+      `${encodeKittyDeleteImage(this.imageIds[0])}${encodeKittyDeleteImage(this.imageIds[1])}`,
+    );
+    this.activeSlot = null;
+    this.lastBitmapKey = null;
+    this.lastPlacementKeys = [];
+  }
+
+  destroy() {
+    this.clear();
+  }
+
+  private ensurePlacementIds(count: number): number[] {
+    while (this.placementIds.length < count) {
+      this.placementIds.push(allocatePlacementId());
+    }
+    return this.placementIds;
+  }
+}

package/src/components/chart/native/kitty/support.ts

@@ -0,0 +1,70 @@
+import { type NativeRendererHost as CliRenderer } from "../../../../ui";
+import { writeRendererRaw } from "./adapter";
+import { buildKittyGraphicsQuery } from "./protocol";
+
+interface RendererCapabilities {
+  kitty_graphics?: boolean;
+}
+
+interface SupportCacheEntry {
+  value: boolean | null;
+  promise?: Promise<boolean>;
+}
+
+const supportCache = new WeakMap<CliRenderer, SupportCacheEntry>();
+const QUERY_TIMEOUT_MS = 250;
+
+function readKnownSupport(renderer: CliRenderer): boolean | null {
+  const capabilities = renderer.capabilities as RendererCapabilities | null;
+  return typeof capabilities?.kitty_graphics === "boolean" ? capabilities.kitty_graphics : null;
+}
+
+export function getCachedKittySupport(renderer: CliRenderer): boolean | null {
+  const known = readKnownSupport(renderer);
+  if (known !== null) return known;
+  return supportCache.get(renderer)?.value ?? null;
+}
+
+export function ensureKittySupport(renderer: CliRenderer): Promise<boolean> {
+  const known = readKnownSupport(renderer);
+  if (known !== null) {
+    supportCache.set(renderer, { value: known });
+    return Promise.resolve(known);
+  }
+
+  const cached = supportCache.get(renderer);
+  if (cached?.promise) return cached.promise;
+
+  const nextEntry: SupportCacheEntry = { value: null };
+  const promise = new Promise<boolean>((resolve) => {
+    let settled = false;
+
+    const finish = (value: boolean) => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timer);
+      renderer.off("capabilities", onCapabilities);
+      nextEntry.value = value;
+      nextEntry.promise = undefined;
+      resolve(value);
+    };
+
+    const onCapabilities = () => {
+      const supported = readKnownSupport(renderer);
+      if (supported !== null) finish(supported);
+    };
+
+    const timer = setTimeout(() => finish(false), QUERY_TIMEOUT_MS);
+    renderer.on("capabilities", onCapabilities);
+    if (!writeRendererRaw(renderer, `${buildKittyGraphicsQuery()}\x1b[c`)) {
+      finish(false);
+      return;
+    }
+    const supported = readKnownSupport(renderer);
+    if (supported !== null) finish(supported);
+  });
+
+  nextEntry.promise = promise;
+  supportCache.set(renderer, nextEntry);
+  return promise;
+}

package/src/components/chart/native/raster/comparison-chart.ts

@@ -0,0 +1,162 @@
+import type { ChartScene } from "../../core/renderer";
+import type { ComparisonChartScene } from "../../comparison/renderer";
+import {
+  clamp,
+  drawAreaFill,
+  drawLine,
+  lerp,
+  parseHex,
+  type RgbaColor,
+} from "./primitives";
+import type { NativeChartBitmap } from "./types";
+import {
+  drawPriceGrid,
+  drawSessionBackgroundSpans,
+  getComparisonPixelLayout,
+  projectX,
+  projectY,
+} from "./layout";
+
+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 };
+}

package/src/components/chart/native/raster/crosshair.ts

@@ -0,0 +1,51 @@
+import { measurePerf } from "../../../../utils/perf-marks";
+import {
+  clamp,
+  drawCircle,
+  drawLine,
+  parseHex,
+} from "./primitives";
+import type { NativeChartBitmap, NativeCrosshairOverlay } from "./types";
+
+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 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 });
+}

package/src/components/chart/native/raster/layout.ts

@@ -0,0 +1,136 @@
+import { computeGridLines, type ChartScene } from "../../core/renderer";
+import type { ChartColors, ChartRenderMode, ChartSessionBackgroundSpan } from "../../core/types";
+import {
+  clamp,
+  drawLine,
+  fillRect,
+  lerp,
+  parseHex,
+} from "./primitives";
+import type { PixelRect } from "./types";
+
+export 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),
+  };
+}
+
+export function getComparisonPixelLayout(pixelWidth: number, pixelHeight: number) {
+  return {
+    plotLeft: 0,
+    plotTop: 0,
+    plotRight: Math.max(pixelWidth - 1, 0),
+    plotBottom: Math.max(pixelHeight - 1, 0),
+  };
+}
+
+export 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));
+}
+
+export function isOhlcLikeMode(mode: ChartRenderMode): boolean {
+  return mode === "ohlc" || mode === "hlc";
+}
+
+export function isHighLowMode(mode: ChartRenderMode): boolean {
+  return mode === "candles" || isOhlcLikeMode(mode);
+}
+
+export 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),
+  };
+}
+
+export 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,
+  };
+}
+
+export 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);
+  }
+}
+
+export 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);
+}
+
+export 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);
+  }
+}

package/src/components/chart/native/raster/placement.ts

@@ -0,0 +1,132 @@
+import type { PixelResolution } from "../../../../ui";
+import type { CellRect, NativeChartBitmap, NativePlacement } from "./types";
+
+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);
+}