@tradecanvas/core 1.4.0 → 1.10.0

package/dist/gridLines-kFhXyH-u.js

@@ -0,0 +1,218 @@
+import { computeTickStep as e } from "@tradecanvas/commons";
+//#region src/viewport/ScaleMapping.ts
+function t(e, t) {
+	return e * (t.barWidth + t.barSpacing) - t.offset + t.chartRect.x + t.barWidth / 2;
+}
+function n(e, t) {
+	let { min: n, max: r } = t.priceRange, { y: i, height: a } = t.chartRect, o;
+	if (t.logScale && n > 0 && r > 0) {
+		let t = Math.log(n), s = Math.log(r) - t;
+		if (s === 0) return i + a / 2;
+		o = (Math.log(Math.max(e, 2 ** -52)) - t) / s;
+	} else {
+		let t = r - n;
+		if (t === 0) return i + a / 2;
+		o = (e - n) / t;
+	}
+	return i + a * (t.invertScale ? o : 1 - o);
+}
+function r(e) {
+	let { min: t, max: n } = e.priceRange, { y: r, height: i } = e.chartRect, a = e.invertScale === !0;
+	if (e.logScale && t > 0 && n > 0) {
+		let e = Math.log(t), o = Math.log(n) - e;
+		if (o === 0) return () => r + i / 2;
+		let s = i / o, c = r + i;
+		return a ? (t) => r + (Math.log(Math.max(t, 2 ** -52)) - e) * s : (t) => c - (Math.log(Math.max(t, 2 ** -52)) - e) * s;
+	}
+	let o = n - t;
+	if (o === 0) return () => r + i / 2;
+	let s = i / o;
+	return a ? (e) => r + (e - t) * s : (e) => r + (n - e) * s;
+}
+function i(e, t, n, r) {
+	let { min: i, max: a } = n.priceRange, o = (a - i) / t, s = r(i + e * o), c = r(i + (e + 1) * o);
+	return {
+		top: Math.min(s, c),
+		height: Math.abs(s - c),
+		mid: (s + c) / 2
+	};
+}
+function a(e, t) {
+	let n = t.barWidth + t.barSpacing;
+	return Math.round((e - t.chartRect.x - t.barWidth / 2 + t.offset) / n);
+}
+function o(e, t) {
+	let { min: n, max: r } = t.priceRange, i = (e - t.chartRect.y) / t.chartRect.height, a = t.invertScale ? i : 1 - i;
+	if (t.logScale && n > 0 && r > 0) {
+		let e = Math.log(n);
+		return Math.exp(e + (Math.log(r) - e) * a);
+	}
+	return n + (r - n) * a;
+}
+var s = /* @__PURE__ */ new WeakMap();
+function c(e) {
+	let t = e.length;
+	if (t < 2) return 0;
+	let n = s.get(e);
+	if (n && n.length === t) return n.step;
+	let r = [];
+	for (let n = Math.max(1, t - 20); n < t; n++) r.push(e[n].time - e[n - 1].time);
+	r.sort((e, t) => e - t);
+	let i = Math.max(0, r[r.length >> 1]);
+	return s.set(e, {
+		length: t,
+		step: i
+	}), i;
+}
+function l(e) {
+	let t = c(e);
+	return (e.length > 0 ? e[e.length - 1].time : 0) > 0xe8d4a51000 ? t : t * 1e3;
+}
+function u(e, t) {
+	let n = t.length;
+	if (n === 0) return e;
+	let r = n - 1;
+	if (e > r) return t[r].time + (e - r) * c(t);
+	if (e < 0) return t[0].time + e * c(t);
+	let i = Math.floor(e);
+	return i === e || i >= r ? t[i].time : t[i].time + (e - i) * (t[i + 1].time - t[i].time);
+}
+function d(e, t) {
+	if (t.length === 0) return -1;
+	let n = t[0].time, r = t.length - 1, i = t[r].time;
+	if (e <= n || e >= i) {
+		if (e === n) return 0;
+		if (e === i) return r;
+		let a = c(t);
+		return a <= 0 ? e < n ? 0 : r : e < n ? (e - n) / a : r + (e - i) / a;
+	}
+	let a = 0, o = t.length - 1;
+	for (; a <= o;) {
+		let n = a + o >>> 1;
+		if (t[n].time === e) return n;
+		t[n].time < e ? a = n + 1 : o = n - 1;
+	}
+	if (a >= t.length) return t.length - 1;
+	if (o < 0) return 0;
+	let s = t[o].time, l = t[a].time, u = l === s ? 0 : (e - s) / (l - s);
+	return o + u;
+}
+function f(e, t) {
+	let n = t.data;
+	return n && n.length > 0 ? d(e, n) : e;
+}
+function p(e, n) {
+	return t(f(e, n), n);
+}
+function m(e, t) {
+	let n = a(e, t), r = t.data;
+	return r && r.length > 0 ? u(n, r) : n;
+}
+//#endregion
+//#region src/charts/pixelGrid.ts
+function h(e) {
+	let t = typeof e.getTransform == "function" ? e.getTransform() : void 0;
+	return {
+		a: t && Number.isFinite(t.a) && t.a > 0 ? t.a : 1,
+		d: t && Number.isFinite(t.d) && t.d > 0 ? t.d : 1,
+		e: t && Number.isFinite(t.e) ? t.e : 0,
+		f: t && Number.isFinite(t.f) ? t.f : 0
+	};
+}
+function g(e, t) {
+	let { a: n, d: r, e: i, f: a } = h(e);
+	e.save(), e.setTransform(1, 0, 0, 1, 0, 0);
+	try {
+		return t({
+			ratio: n,
+			x: (e) => Math.round(e * n + i),
+			y: (e) => Math.round(e * r + a),
+			left: (e, t) => Math.round(e * n + i - t / 2)
+		});
+	} finally {
+		e.restore();
+	}
+}
+function _(e, t) {
+	let n = Math.max(1, Math.floor(t)), r = Math.max(n, Math.round(e * t));
+	return (r - n) % 2 != 0 && --r, {
+		body: Math.max(r, n),
+		wick: n
+	};
+}
+function v(e, t, n, r) {
+	let i = Math.max(1, Math.round(t * n)), a = i % 2 ? .5 : 0;
+	return {
+		at: (Math.round(e * n + r - a) + a - r) / n,
+		width: i / n
+	};
+}
+function y(e, t, n) {
+	let r = h(e), i = v(t, n, r.d, r.f);
+	return {
+		y: i.at,
+		width: i.width
+	};
+}
+function b(e, t, n) {
+	let r = h(e), i = v(t, n, r.a, r.e);
+	return {
+		x: i.at,
+		width: i.width
+	};
+}
+//#endregion
+//#region src/charts/denseBars.ts
+var x = 1;
+function S(e) {
+	return e.barWidth < 1;
+}
+function C(e, t, n, r, i) {
+	let a = Math.min(n, e.length - 1);
+	if (t > a) return;
+	let o = {
+		x: 0,
+		open: 0,
+		high: 0,
+		low: 0,
+		close: 0,
+		volume: 0
+	}, s = !1;
+	for (let n = Math.max(0, t); n <= a; n++) {
+		let t = e[n], a = Math.floor(r(n));
+		s && a !== o.x && (i(o), s = !1), s ? (t.high > o.high && (o.high = t.high), t.low < o.low && (o.low = t.low), t.volume > o.volume && (o.volume = t.volume)) : (o.x = a, o.open = t.open, o.high = t.high, o.low = t.low, o.volume = t.volume, s = !0), o.close = t.close;
+	}
+	s && i(o);
+}
+function w(e, t, n, i, a) {
+	let { from: o, to: s } = n.visibleRange, c = n.barWidth + n.barSpacing, l = -n.offset + n.chartRect.x + n.barWidth / 2, u = r(n);
+	g(e, (n) => {
+		let r = new Path2D(), d = new Path2D();
+		C(t, o, s, (e) => e * c + l, (e) => {
+			let t = n.y(u(e.high)), i = n.y(u(e.low)), a = n.x(e.x), o = Math.max(1, n.x(e.x + 1) - a);
+			(e.close >= e.open ? r : d).rect(a, Math.min(t, i), o, Math.max(Math.abs(i - t), 1));
+		}), e.fillStyle = i, e.fill(r), e.fillStyle = a, e.fill(d);
+	});
+}
+//#endregion
+//#region src/axis/gridLines.ts
+var T = 80;
+function E(t) {
+	let { chartRect: n, priceRange: i } = t;
+	if (i.max - i.min <= 0) return {
+		horizontal: [],
+		vertical: []
+	};
+	let a = r(t), o = [], s = e(i.min, i.max, 8), c = Math.ceil(i.min / s) * s;
+	for (let e = c; e <= i.max; e += s) o.push(Math.round(a(e)) + .5);
+	let l = [], u = t.barWidth + t.barSpacing, d = Math.max(1, Math.ceil(T / u)), f = -t.offset + n.x + t.barWidth / 2, p = Math.floor(t.offset / u), m = Math.ceil((t.offset + n.width) / u);
+	for (let e = p; e <= m; e++) e % d === 0 && l.push(Math.round(e * u + f) + .5);
+	return {
+		horizontal: o,
+		vertical: l
+	};
+}
+//#endregion
+export { o as S, f as _, w as a, a as b, y as c, t as d, c as f, r as g, n as h, S as i, g as l, i as m, x as n, _ as o, l as p, C as r, b as s, E as t, u, p as v, m as x, d as y };
+
+//# sourceMappingURL=gridLines-kFhXyH-u.js.map

package/dist/gridLines-kFhXyH-u.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridLines-kFhXyH-u.js","names":[],"sources":["../src/viewport/ScaleMapping.ts","../src/charts/pixelGrid.ts","../src/charts/denseBars.ts","../src/axis/gridLines.ts"],"sourcesContent":["import type { ViewportState } from '@tradecanvas/commons';\n\nexport function barIndexToX(index: number, viewport: ViewportState): number {\n  const barUnit = viewport.barWidth + viewport.barSpacing;\n  return index * barUnit - viewport.offset + viewport.chartRect.x + viewport.barWidth / 2;\n}\n\nexport function priceToY(price: number, viewport: ViewportState): number {\n  const { min, max } = viewport.priceRange;\n  const { y: top, height } = viewport.chartRect;\n  let ratio: number;\n  if (viewport.logScale && min > 0 && max > 0) {\n    const logMin = Math.log(min);\n    const logRange = Math.log(max) - logMin;\n    if (logRange === 0) return top + height / 2;\n    ratio = (Math.log(Math.max(price, Number.EPSILON)) - logMin) / logRange;\n  } else {\n    const range = max - min;\n    if (range === 0) return top + height / 2;\n    ratio = (price - min) / range;\n  }\n  return top + height * (viewport.invertScale ? ratio : 1 - ratio);\n}\n\n/**\n * `priceToY` for one frame, with the per-call work hoisted out: for renderers\n * that map every visible bar. Follows the log scale and the inverted scale.\n */\nexport function priceToYMapper(viewport: ViewportState): (price: number) => number {\n  const { min, max } = viewport.priceRange;\n  const { y: top, height } = viewport.chartRect;\n  const invert = viewport.invertScale === true;\n  if (viewport.logScale && min > 0 && max > 0) {\n    const logMin = Math.log(min);\n    const logRange = Math.log(max) - logMin;\n    if (logRange === 0) return () => top + height / 2;\n    const k = height / logRange;\n    const bottom = top + height;\n    return invert\n      ? (price) => top + (Math.log(Math.max(price, Number.EPSILON)) - logMin) * k\n      : (price) => bottom - (Math.log(Math.max(price, Number.EPSILON)) - logMin) * k;\n  }\n  const range = max - min;\n  if (range === 0) return () => top + height / 2;\n  const k = height / range;\n  return invert ? (price) => top + (price - min) * k : (price) => top + (max - price) * k;\n}\n\n/**\n * Where bucket `b` of `count` equal price buckets across the price range sits\n * on screen (bucket 0 holds the lowest prices), on any scale. `toY` is the\n * frame's `priceToYMapper`.\n */\nexport function priceBucketRow(\n  b: number,\n  count: number,\n  viewport: ViewportState,\n  toY: (price: number) => number,\n): { top: number; height: number; mid: number } {\n  const { min, max } = viewport.priceRange;\n  const step = (max - min) / count;\n  const yLow = toY(min + b * step);\n  const yHigh = toY(min + (b + 1) * step);\n  return { top: Math.min(yLow, yHigh), height: Math.abs(yLow - yHigh), mid: (yLow + yHigh) / 2 };\n}\n\nexport function xToBarIndex(x: number, viewport: ViewportState): number {\n  const barUnit = viewport.barWidth + viewport.barSpacing;\n  return Math.round((x - viewport.chartRect.x - viewport.barWidth / 2 + viewport.offset) / barUnit);\n}\n\nexport function yToPrice(y: number, viewport: ViewportState): number {\n  const { min, max } = viewport.priceRange;\n  const fromTop = (y - viewport.chartRect.y) / viewport.chartRect.height;\n  const ratio = viewport.invertScale ? fromTop : 1 - fromTop;\n  if (viewport.logScale && min > 0 && max > 0) {\n    const logMin = Math.log(min);\n    const logMax = Math.log(max);\n    return Math.exp(logMin + (logMax - logMin) * ratio);\n  }\n  return min + (max - min) * ratio;\n}\n\ntype TimedSeries = ReadonlyArray<{ time: number }>;\n\nconst stepCache = new WeakMap<TimedSeries, { length: number; step: number }>();\n\n/**\n * Typical spacing between bar times — the median of the last ~20 intervals,\n * so a weekend or halt gap doesn't skew it. Used to place times beyond either\n * end of the data (the empty future the chart can be panned into). Cached per\n * series and length; 0 when there are fewer than two bars.\n */\nexport function barTimeStep(data: TimedSeries): number {\n  const n = data.length;\n  if (n < 2) return 0;\n  const cached = stepCache.get(data);\n  if (cached && cached.length === n) return cached.step;\n  const diffs: number[] = [];\n  for (let i = Math.max(1, n - 20); i < n; i++) diffs.push(data[i].time - data[i - 1].time);\n  diffs.sort((a, b) => a - b);\n  const step = Math.max(0, diffs[diffs.length >> 1]);\n  stepCache.set(data, { length: n, step });\n  return step;\n}\n\n/**\n * `barTimeStep` in milliseconds whatever unit the series uses: bar times\n * below 1e12 are seconds (the same rule as `normalizeBarTime`).\n */\nexport function barTimeStepMs(data: TimedSeries): number {\n  const step = barTimeStep(data);\n  const last = data.length > 0 ? data[data.length - 1].time : 0;\n  return last > 1e12 ? step : step * 1000;\n}\n\n/**\n * Time at bar index `index`, extrapolated by `barTimeStep` past either end of\n * the data — e.g. the future area right of the newest bar.\n */\nexport function barIndexToTime(index: number, data: TimedSeries): number {\n  const n = data.length;\n  if (n === 0) return index;\n  const last = n - 1;\n  if (index > last) return data[last].time + (index - last) * barTimeStep(data);\n  if (index < 0) return data[0].time + index * barTimeStep(data);\n  const lo = Math.floor(index);\n  if (lo === index || lo >= last) return data[lo].time;\n  return data[lo].time + (index - lo) * (data[lo + 1].time - data[lo].time);\n}\n\n/**\n * Convert a bar timestamp to its data-array index via binary search.\n * Falls back to fractional interpolation when the timestamp falls between bars,\n * and extrapolates (by `barTimeStep`) for times beyond either end — so a drawing\n * anchored in the future keeps its place instead of collapsing onto the last bar.\n * Returns -1 if data is empty.\n */\nexport function timestampToBarIndex(timestamp: number, data: TimedSeries): number {\n  if (data.length === 0) return -1;\n  const first = data[0].time;\n  const lastIdx = data.length - 1;\n  const lastTime = data[lastIdx].time;\n  if (timestamp <= first || timestamp >= lastTime) {\n    if (timestamp === first) return 0;\n    if (timestamp === lastTime) return lastIdx;\n    const step = barTimeStep(data);\n    if (step <= 0) return timestamp < first ? 0 : lastIdx;\n    return timestamp < first ? (timestamp - first) / step : lastIdx + (timestamp - lastTime) / step;\n  }\n  // Binary search\n  let lo = 0, hi = data.length - 1;\n  while (lo <= hi) {\n    const mid = (lo + hi) >>> 1;\n    if (data[mid].time === timestamp) return mid;\n    if (data[mid].time < timestamp) lo = mid + 1;\n    else hi = mid - 1;\n  }\n  // lo is the insertion point; interpolate between hi and lo\n  if (lo >= data.length) return data.length - 1;\n  if (hi < 0) return 0;\n  const tLo = data[hi].time, tHi = data[lo].time;\n  const frac = tHi !== tLo ? (timestamp - tLo) / (tHi - tLo) : 0;\n  return hi + frac;\n}\n\n/**\n * Resolve an anchor `time` value to a (possibly fractional) bar index in the\n * current series. When `viewport.data` is set, `time` is interpreted as a real\n * timestamp and converted via `timestampToBarIndex`. Otherwise `time` is\n * already a bar index and is returned unchanged.\n */\nexport function resolveBarIndex(time: number, viewport: ViewportState): number {\n  const data = viewport.data;\n  if (data && data.length > 0) {\n    return timestampToBarIndex(time, data);\n  }\n  return time;\n}\n\n/**\n * Map an anchor `time` value to its pixel x. Works whether `time` is a\n * timestamp (when `viewport.data` is set) or a bar index (legacy callers).\n */\nexport function timeToX(time: number, viewport: ViewportState): number {\n  return barIndexToX(resolveBarIndex(time, viewport), viewport);\n}\n\n/**\n * Map a pixel x back to an anchor `time` value. Returns a real timestamp when\n * `viewport.data` is set (so the value survives timeframe switches), otherwise\n * returns a bar index for legacy callers.\n */\nexport function xToTime(x: number, viewport: ViewportState): number {\n  const idx = xToBarIndex(x, viewport);\n  const data = viewport.data;\n  if (data && data.length > 0) {\n    // Past either end (the empty future, or before the oldest bar) the time\n    // is extrapolated, so drawings can be placed there.\n    return barIndexToTime(idx, data);\n  }\n  return idx;\n}\n","/**\n * Drawing on whole device pixels. The chart draws in CSS pixels under the\n * device-pixel-ratio transform, so a 1 px line at a fractional position\n * spreads over two device pixels at half strength and looks soft and thick.\n * Bars drawn here go back to the canvas's own pixels and round to them: a\n * wick is one sharp column, a body has hard edges, at any ratio (1, 1.25, 2…).\n */\n\nfunction transformOf(ctx: CanvasRenderingContext2D): { a: number; d: number; e: number; f: number } {\n  const m = typeof ctx.getTransform === 'function' ? ctx.getTransform() : undefined;\n  return {\n    a: m && Number.isFinite(m.a) && m.a > 0 ? m.a : 1,\n    d: m && Number.isFinite(m.d) && m.d > 0 ? m.d : 1,\n    e: m && Number.isFinite(m.e) ? m.e : 0,\n    f: m && Number.isFinite(m.f) ? m.f : 0,\n  };\n}\n\n/** CSS to device-pixel mapping, rounded to whole pixels. */\nexport interface PixelGrid {\n  /** Device pixels per CSS pixel. */\n  ratio: number;\n  /** The device pixel a CSS x falls on. */\n  x(cssX: number): number;\n  /** The device pixel a CSS y falls on. */\n  y(cssY: number): number;\n  /**\n   * Left edge (device px) of a column `width` device pixels wide centred on\n   * CSS x `cssCenter`: the same column `crispX` strokes for a line there.\n   */\n  left(cssCenter: number, width: number): number;\n}\n\n/**\n * Run `draw` with the transform reset to device pixels, then put it back.\n * A context without a readable transform (a test stand-in) is taken as 1:1.\n */\nexport function inDevicePixels<T>(ctx: CanvasRenderingContext2D, draw: (grid: PixelGrid) => T): T {\n  const { a, d, e, f } = transformOf(ctx);\n  ctx.save();\n  ctx.setTransform(1, 0, 0, 1, 0, 0);\n  try {\n    return draw({\n      ratio: a,\n      x: (v) => Math.round(v * a + e),\n      y: (v) => Math.round(v * d + f),\n      left: (v, width) => Math.round(v * a + e - width / 2),\n    });\n  } finally {\n    ctx.restore();\n  }\n}\n\n/**\n * A bar's columns in device pixels: the wick one CSS pixel wide (at least one\n * device pixel), the body about the bar's width, with an even difference so\n * the wick sits exactly in the middle.\n */\nexport function barColumns(barWidth: number, ratio: number): { body: number; wick: number } {\n  const wick = Math.max(1, Math.floor(ratio));\n  let body = Math.max(wick, Math.round(barWidth * ratio));\n  if ((body - wick) % 2 !== 0) body -= 1;\n  return { body: Math.max(body, wick), wick };\n}\n\n/** Snap a line's centre (in CSS px) so a `width`-wide stroke covers whole device pixels. */\nfunction snap(v: number, width: number, scale: number, shift: number): { at: number; width: number } {\n  const w = Math.max(1, Math.round(width * scale));\n  const half = w % 2 ? 0.5 : 0;\n  return { at: (Math.round(v * scale + shift - half) + half - shift) / scale, width: w / scale };\n}\n\n/**\n * A horizontal line's y and width, snapped so the stroke covers whole device\n * pixels: one sharp row instead of a soft two-pixel smear.\n */\nexport function crispY(ctx: CanvasRenderingContext2D, y: number, width: number): { y: number; width: number } {\n  const t = transformOf(ctx);\n  const s = snap(y, width, t.d, t.f);\n  return { y: s.at, width: s.width };\n}\n\n/** A vertical line's x and width, snapped like `crispY`. */\nexport function crispX(ctx: CanvasRenderingContext2D, x: number, width: number): { x: number; width: number } {\n  const t = transformOf(ctx);\n  const s = snap(x, width, t.a, t.e);\n  return { x: s.at, width: s.width };\n}\n","import type { DataSeries, ViewportState } from '@tradecanvas/commons';\nimport { priceToYMapper } from '../viewport/ScaleMapping.js';\nimport { inDevicePixels } from './pixelGrid.js';\n\n/**\n * Below this bar width (CSS px) bar-shaped charts draw one column per pixel\n * instead of one shape per bar: thousands of sub-pixel candles would blur\n * into each other and cost a path segment each.\n */\nexport const DENSE_BAR_WIDTH = 1;\n\nexport function isDense(viewport: Pick<ViewportState, 'barWidth'>): boolean {\n  return viewport.barWidth < DENSE_BAR_WIDTH;\n}\n\n/** The bars on one pixel column merged into one: first open, last close, extremes, largest volume. */\nexport interface PixelColumn {\n  x: number;\n  open: number;\n  high: number;\n  low: number;\n  close: number;\n  volume: number;\n}\n\n/**\n * Walk bars `from`..`to` merged per pixel column (`Math.floor` of their x).\n * The column object is reused between calls: copy it to keep it.\n */\nexport function forEachPixelColumn(\n  data: DataSeries,\n  from: number,\n  to: number,\n  toX: (index: number) => number,\n  visit: (column: Readonly<PixelColumn>) => void,\n): void {\n  const last = Math.min(to, data.length - 1);\n  if (from > last) return;\n  const col: PixelColumn = { x: 0, open: 0, high: 0, low: 0, close: 0, volume: 0 };\n  let open = false;\n  for (let i = Math.max(0, from); i <= last; i++) {\n    const bar = data[i];\n    const x = Math.floor(toX(i));\n    if (open && x !== col.x) {\n      visit(col);\n      open = false;\n    }\n    if (!open) {\n      col.x = x;\n      col.open = bar.open;\n      col.high = bar.high;\n      col.low = bar.low;\n      col.volume = bar.volume;\n      open = true;\n    } else {\n      if (bar.high > col.high) col.high = bar.high;\n      if (bar.low < col.low) col.low = bar.low;\n      if (bar.volume > col.volume) col.volume = bar.volume;\n    }\n    col.close = bar.close;\n  }\n  if (open) visit(col);\n}\n\n/**\n * Draw a dense price series as one high–low line per pixel column, coloured by\n * the column's direction (its last close against its first open).\n */\nexport function renderDenseBars(\n  ctx: CanvasRenderingContext2D,\n  data: DataSeries,\n  viewport: ViewportState,\n  upColor: string,\n  downColor: string,\n): void {\n  const { from, to } = viewport.visibleRange;\n  const barUnit = viewport.barWidth + viewport.barSpacing;\n  const offsetX = -viewport.offset + viewport.chartRect.x + viewport.barWidth / 2;\n  const toY = priceToYMapper(viewport);\n  inDevicePixels(ctx, (px) => {\n    const up = new Path2D();\n    const down = new Path2D();\n    forEachPixelColumn(data, from, to, (i) => i * barUnit + offsetX, (c) => {\n      const top = px.y(toY(c.high));\n      const bottom = px.y(toY(c.low));\n      // A flat column still gets a pixel, like a doji's body.\n      // Each column reaches the next with no gap: at 125% a CSS pixel is 1 or 2 device pixels.\n      const left = px.x(c.x);\n      const width = Math.max(1, px.x(c.x + 1) - left);\n      (c.close >= c.open ? up : down).rect(left, Math.min(top, bottom), width, Math.max(Math.abs(bottom - top), 1));\n    });\n    ctx.fillStyle = upColor;\n    ctx.fill(up);\n    ctx.fillStyle = downColor;\n    ctx.fill(down);\n  });\n}\n","import type { ViewportState } from '@tradecanvas/commons';\nimport { computeTickStep } from '@tradecanvas/commons';\nimport { priceToYMapper } from '../viewport/ScaleMapping.js';\n\n/** The grid's lines as CSS-pixel centres: one across per price step, one down every few slots. */\nexport interface GridLines {\n  horizontal: number[];\n  vertical: number[];\n}\n\n/** Bars between vertical lines: at least this many pixels apart. */\nconst MIN_COLUMN_SPACING = 80;\n\n/** Where the grid lines go, for the 2D grid and the GPU alike. */\nexport function gridLines(viewport: ViewportState): GridLines {\n  const { chartRect, priceRange } = viewport;\n  if (priceRange.max - priceRange.min <= 0) return { horizontal: [], vertical: [] };\n  const toY = priceToYMapper(viewport);\n\n  const horizontal: number[] = [];\n  const priceStep = computeTickStep(priceRange.min, priceRange.max, 8);\n  const firstPrice = Math.ceil(priceRange.min / priceStep) * priceStep;\n  for (let price = firstPrice; price <= priceRange.max; price += priceStep) {\n    horizontal.push(Math.round(toY(price)) + 0.5);\n  }\n\n  const vertical: number[] = [];\n  const barUnit = viewport.barWidth + viewport.barSpacing;\n  const barsPerGrid = Math.max(1, Math.ceil(MIN_COLUMN_SPACING / barUnit));\n  const offsetX = -viewport.offset + chartRect.x + viewport.barWidth / 2;\n  // Every slot on screen — the empty space past either end of the data\n  // (where the chart can be panned) keeps its grid too.\n  const from = Math.floor(viewport.offset / barUnit);\n  const to = Math.ceil((viewport.offset + chartRect.width) / barUnit);\n  for (let i = from; i <= to; i++) {\n    if (i % barsPerGrid !== 0) continue;\n    vertical.push(Math.round(i * barUnit + offsetX) + 0.5);\n  }\n  return { horizontal, vertical };\n}\n"],"mappings":";;AAEA,SAAgB,EAAY,GAAe,GAAiC;AAE1E,QAAO,KADS,EAAS,WAAW,EAAS,cACpB,EAAS,SAAS,EAAS,UAAU,IAAI,EAAS,WAAW;;AAGxF,SAAgB,EAAS,GAAe,GAAiC;CACvE,IAAM,EAAE,QAAK,WAAQ,EAAS,YACxB,EAAE,GAAG,GAAK,cAAW,EAAS,WAChC;AACJ,KAAI,EAAS,YAAY,IAAM,KAAK,IAAM,GAAG;EAC3C,IAAM,IAAS,KAAK,IAAI,EAAI,EACtB,IAAW,KAAK,IAAI,EAAI,GAAG;AACjC,MAAI,MAAa,EAAG,QAAO,IAAM,IAAS;AAC1C,OAAS,KAAK,IAAI,KAAK,IAAI,YAAsB,CAAC,GAAG,KAAU;QAC1D;EACL,IAAM,IAAQ,IAAM;AACpB,MAAI,MAAU,EAAG,QAAO,IAAM,IAAS;AACvC,OAAS,IAAQ,KAAO;;AAE1B,QAAO,IAAM,KAAU,EAAS,cAAc,IAAQ,IAAI;;AAO5D,SAAgB,EAAe,GAAoD;CACjF,IAAM,EAAE,QAAK,WAAQ,EAAS,YACxB,EAAE,GAAG,GAAK,cAAW,EAAS,WAC9B,IAAS,EAAS,gBAAgB;AACxC,KAAI,EAAS,YAAY,IAAM,KAAK,IAAM,GAAG;EAC3C,IAAM,IAAS,KAAK,IAAI,EAAI,EACtB,IAAW,KAAK,IAAI,EAAI,GAAG;AACjC,MAAI,MAAa,EAAG,cAAa,IAAM,IAAS;EAChD,IAAM,IAAI,IAAS,GACb,IAAS,IAAM;AACrB,SAAO,KACF,MAAU,KAAO,KAAK,IAAI,KAAK,IAAI,YAAsB,CAAC,GAAG,KAAU,KACvE,MAAU,KAAU,KAAK,IAAI,KAAK,IAAI,YAAsB,CAAC,GAAG,KAAU;;CAEjF,IAAM,IAAQ,IAAM;AACpB,KAAI,MAAU,EAAG,cAAa,IAAM,IAAS;CAC7C,IAAM,IAAI,IAAS;AACnB,QAAO,KAAU,MAAU,KAAO,IAAQ,KAAO,KAAK,MAAU,KAAO,IAAM,KAAS;;AAQxF,SAAgB,EACd,GACA,GACA,GACA,GAC8C;CAC9C,IAAM,EAAE,QAAK,WAAQ,EAAS,YACxB,KAAQ,IAAM,KAAO,GACrB,IAAO,EAAI,IAAM,IAAI,EAAK,EAC1B,IAAQ,EAAI,KAAO,IAAI,KAAK,EAAK;AACvC,QAAO;EAAE,KAAK,KAAK,IAAI,GAAM,EAAM;EAAE,QAAQ,KAAK,IAAI,IAAO,EAAM;EAAE,MAAM,IAAO,KAAS;EAAG;;AAGhG,SAAgB,EAAY,GAAW,GAAiC;CACtE,IAAM,IAAU,EAAS,WAAW,EAAS;AAC7C,QAAO,KAAK,OAAO,IAAI,EAAS,UAAU,IAAI,EAAS,WAAW,IAAI,EAAS,UAAU,EAAQ;;AAGnG,SAAgB,EAAS,GAAW,GAAiC;CACnE,IAAM,EAAE,QAAK,WAAQ,EAAS,YACxB,KAAW,IAAI,EAAS,UAAU,KAAK,EAAS,UAAU,QAC1D,IAAQ,EAAS,cAAc,IAAU,IAAI;AACnD,KAAI,EAAS,YAAY,IAAM,KAAK,IAAM,GAAG;EAC3C,IAAM,IAAS,KAAK,IAAI,EAAI;AAE5B,SAAO,KAAK,IAAI,KADD,KAAK,IAAI,EACE,GAAS,KAAU,EAAM;;AAErD,QAAO,KAAO,IAAM,KAAO;;AAK7B,IAAM,oBAAY,IAAI,SAAwD;AAQ9E,SAAgB,EAAY,GAA2B;CACrD,IAAM,IAAI,EAAK;AACf,KAAI,IAAI,EAAG,QAAO;CAClB,IAAM,IAAS,EAAU,IAAI,EAAK;AAClC,KAAI,KAAU,EAAO,WAAW,EAAG,QAAO,EAAO;CACjD,IAAM,IAAkB,EAAE;AAC1B,MAAK,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,EAAE,IAAI,GAAG,IAAK,GAAM,KAAK,EAAK,GAAG,OAAO,EAAK,IAAI,GAAG,KAAK;AACzF,GAAM,MAAM,GAAG,MAAM,IAAI,EAAE;CAC3B,IAAM,IAAO,KAAK,IAAI,GAAG,EAAM,EAAM,UAAU,GAAG;AAElD,QADA,EAAU,IAAI,GAAM;EAAE,QAAQ;EAAG;EAAM,CAAC,EACjC;;AAOT,SAAgB,EAAc,GAA2B;CACvD,IAAM,IAAO,EAAY,EAAK;AAE9B,SADa,EAAK,SAAS,IAAI,EAAK,EAAK,SAAS,GAAG,OAAO,KAC9C,eAAO,IAAO,IAAO;;AAOrC,SAAgB,EAAe,GAAe,GAA2B;CACvE,IAAM,IAAI,EAAK;AACf,KAAI,MAAM,EAAG,QAAO;CACpB,IAAM,IAAO,IAAI;AACjB,KAAI,IAAQ,EAAM,QAAO,EAAK,GAAM,QAAQ,IAAQ,KAAQ,EAAY,EAAK;AAC7E,KAAI,IAAQ,EAAG,QAAO,EAAK,GAAG,OAAO,IAAQ,EAAY,EAAK;CAC9D,IAAM,IAAK,KAAK,MAAM,EAAM;AAE5B,QADI,MAAO,KAAS,KAAM,IAAa,EAAK,GAAI,OACzC,EAAK,GAAI,QAAQ,IAAQ,MAAO,EAAK,IAAK,GAAG,OAAO,EAAK,GAAI;;AAUtE,SAAgB,EAAoB,GAAmB,GAA2B;AAChF,KAAI,EAAK,WAAW,EAAG,QAAO;CAC9B,IAAM,IAAQ,EAAK,GAAG,MAChB,IAAU,EAAK,SAAS,GACxB,IAAW,EAAK,GAAS;AAC/B,KAAI,KAAa,KAAS,KAAa,GAAU;AAC/C,MAAI,MAAc,EAAO,QAAO;AAChC,MAAI,MAAc,EAAU,QAAO;EACnC,IAAM,IAAO,EAAY,EAAK;AAE9B,SADI,KAAQ,IAAU,IAAY,IAAQ,IAAI,IACvC,IAAY,KAAS,IAAY,KAAS,IAAO,KAAW,IAAY,KAAY;;CAG7F,IAAI,IAAK,GAAG,IAAK,EAAK,SAAS;AAC/B,QAAO,KAAM,IAAI;EACf,IAAM,IAAO,IAAK,MAAQ;AAC1B,MAAI,EAAK,GAAK,SAAS,EAAW,QAAO;AACzC,EAAI,EAAK,GAAK,OAAO,IAAW,IAAK,IAAM,IACtC,IAAK,IAAM;;AAGlB,KAAI,KAAM,EAAK,OAAQ,QAAO,EAAK,SAAS;AAC5C,KAAI,IAAK,EAAG,QAAO;CACnB,IAAM,IAAM,EAAK,GAAI,MAAM,IAAM,EAAK,GAAI,MACpC,IAAO,MAAQ,IAAwC,KAAjC,IAAY,MAAQ,IAAM;AACtD,QAAO,IAAK;;AASd,SAAgB,EAAgB,GAAc,GAAiC;CAC7E,IAAM,IAAO,EAAS;AAItB,QAHI,KAAQ,EAAK,SAAS,IACjB,EAAoB,GAAM,EAAK,GAEjC;;AAOT,SAAgB,EAAQ,GAAc,GAAiC;AACrE,QAAO,EAAY,EAAgB,GAAM,EAAS,EAAE,EAAS;;AAQ/D,SAAgB,EAAQ,GAAW,GAAiC;CAClE,IAAM,IAAM,EAAY,GAAG,EAAS,EAC9B,IAAO,EAAS;AAMtB,QALI,KAAQ,EAAK,SAAS,IAGjB,EAAe,GAAK,EAAK,GAE3B;;;;ACjMT,SAAS,EAAY,GAA+E;CAClG,IAAM,IAAI,OAAO,EAAI,gBAAiB,aAAa,EAAI,cAAc,GAAG,KAAA;AACxE,QAAO;EACL,GAAG,KAAK,OAAO,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI;EAChD,GAAG,KAAK,OAAO,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI;EAChD,GAAG,KAAK,OAAO,SAAS,EAAE,EAAE,GAAG,EAAE,IAAI;EACrC,GAAG,KAAK,OAAO,SAAS,EAAE,EAAE,GAAG,EAAE,IAAI;EACtC;;AAsBH,SAAgB,EAAkB,GAA+B,GAAiC;CAChG,IAAM,EAAE,MAAG,MAAG,MAAG,SAAM,EAAY,EAAI;AAEvC,CADA,EAAI,MAAM,EACV,EAAI,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE;AAClC,KAAI;AACF,SAAO,EAAK;GACV,OAAO;GACP,IAAI,MAAM,KAAK,MAAM,IAAI,IAAI,EAAE;GAC/B,IAAI,MAAM,KAAK,MAAM,IAAI,IAAI,EAAE;GAC/B,OAAO,GAAG,MAAU,KAAK,MAAM,IAAI,IAAI,IAAI,IAAQ,EAAE;GACtD,CAAC;WACM;AACR,IAAI,SAAS;;;AASjB,SAAgB,EAAW,GAAkB,GAA+C;CAC1F,IAAM,IAAO,KAAK,IAAI,GAAG,KAAK,MAAM,EAAM,CAAC,EACvC,IAAO,KAAK,IAAI,GAAM,KAAK,MAAM,IAAW,EAAM,CAAC;AAEvD,SADK,IAAO,KAAQ,KAAM,KAAG,KACtB;EAAE,MAAM,KAAK,IAAI,GAAM,EAAK;EAAE;EAAM;;AAI7C,SAAS,EAAK,GAAW,GAAe,GAAe,GAA8C;CACnG,IAAM,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,IAAQ,EAAM,CAAC,EAC1C,IAAO,IAAI,IAAI,KAAM;AAC3B,QAAO;EAAE,KAAK,KAAK,MAAM,IAAI,IAAQ,IAAQ,EAAK,GAAG,IAAO,KAAS;EAAO,OAAO,IAAI;EAAO;;AAOhG,SAAgB,EAAO,GAA+B,GAAW,GAA6C;CAC5G,IAAM,IAAI,EAAY,EAAI,EACpB,IAAI,EAAK,GAAG,GAAO,EAAE,GAAG,EAAE,EAAE;AAClC,QAAO;EAAE,GAAG,EAAE;EAAI,OAAO,EAAE;EAAO;;AAIpC,SAAgB,EAAO,GAA+B,GAAW,GAA6C;CAC5G,IAAM,IAAI,EAAY,EAAI,EACpB,IAAI,EAAK,GAAG,GAAO,EAAE,GAAG,EAAE,EAAE;AAClC,QAAO;EAAE,GAAG,EAAE;EAAI,OAAO,EAAE;EAAO;;;;AC7EpC,IAAa,IAAkB;AAE/B,SAAgB,EAAQ,GAAoD;AAC1E,QAAO,EAAS,WAAA;;AAiBlB,SAAgB,EACd,GACA,GACA,GACA,GACA,GACM;CACN,IAAM,IAAO,KAAK,IAAI,GAAI,EAAK,SAAS,EAAE;AAC1C,KAAI,IAAO,EAAM;CACjB,IAAM,IAAmB;EAAE,GAAG;EAAG,MAAM;EAAG,MAAM;EAAG,KAAK;EAAG,OAAO;EAAG,QAAQ;EAAG,EAC5E,IAAO;AACX,MAAK,IAAI,IAAI,KAAK,IAAI,GAAG,EAAK,EAAE,KAAK,GAAM,KAAK;EAC9C,IAAM,IAAM,EAAK,IACX,IAAI,KAAK,MAAM,EAAI,EAAE,CAAC;AAiB5B,EAhBI,KAAQ,MAAM,EAAI,MACpB,EAAM,EAAI,EACV,IAAO,KAEJ,KAQC,EAAI,OAAO,EAAI,SAAM,EAAI,OAAO,EAAI,OACpC,EAAI,MAAM,EAAI,QAAK,EAAI,MAAM,EAAI,MACjC,EAAI,SAAS,EAAI,WAAQ,EAAI,SAAS,EAAI,YAT9C,EAAI,IAAI,GACR,EAAI,OAAO,EAAI,MACf,EAAI,OAAO,EAAI,MACf,EAAI,MAAM,EAAI,KACd,EAAI,SAAS,EAAI,QACjB,IAAO,KAMT,EAAI,QAAQ,EAAI;;AAElB,CAAI,KAAM,EAAM,EAAI;;AAOtB,SAAgB,EACd,GACA,GACA,GACA,GACA,GACM;CACN,IAAM,EAAE,SAAM,UAAO,EAAS,cACxB,IAAU,EAAS,WAAW,EAAS,YACvC,IAAU,CAAC,EAAS,SAAS,EAAS,UAAU,IAAI,EAAS,WAAW,GACxE,IAAM,EAAe,EAAS;AACpC,GAAe,IAAM,MAAO;EAC1B,IAAM,IAAK,IAAI,QAAQ,EACjB,IAAO,IAAI,QAAQ;AAazB,EAZA,EAAmB,GAAM,GAAM,IAAK,MAAM,IAAI,IAAU,IAAU,MAAM;GACtE,IAAM,IAAM,EAAG,EAAE,EAAI,EAAE,KAAK,CAAC,EACvB,IAAS,EAAG,EAAE,EAAI,EAAE,IAAI,CAAC,EAGzB,IAAO,EAAG,EAAE,EAAE,EAAE,EAChB,IAAQ,KAAK,IAAI,GAAG,EAAG,EAAE,EAAE,IAAI,EAAE,GAAG,EAAK;AAC/C,IAAC,EAAE,SAAS,EAAE,OAAO,IAAK,GAAM,KAAK,GAAM,KAAK,IAAI,GAAK,EAAO,EAAE,GAAO,KAAK,IAAI,KAAK,IAAI,IAAS,EAAI,EAAE,EAAE,CAAC;IAC7G,EACF,EAAI,YAAY,GAChB,EAAI,KAAK,EAAG,EACZ,EAAI,YAAY,GAChB,EAAI,KAAK,EAAK;GACd;;;;ACpFJ,IAAM,IAAqB;AAG3B,SAAgB,EAAU,GAAoC;CAC5D,IAAM,EAAE,cAAW,kBAAe;AAClC,KAAI,EAAW,MAAM,EAAW,OAAO,EAAG,QAAO;EAAE,YAAY,EAAE;EAAE,UAAU,EAAE;EAAE;CACjF,IAAM,IAAM,EAAe,EAAS,EAE9B,IAAuB,EAAE,EACzB,IAAY,EAAgB,EAAW,KAAK,EAAW,KAAK,EAAE,EAC9D,IAAa,KAAK,KAAK,EAAW,MAAM,EAAU,GAAG;AAC3D,MAAK,IAAI,IAAQ,GAAY,KAAS,EAAW,KAAK,KAAS,EAC7D,GAAW,KAAK,KAAK,MAAM,EAAI,EAAM,CAAC,GAAG,GAAI;CAG/C,IAAM,IAAqB,EAAE,EACvB,IAAU,EAAS,WAAW,EAAS,YACvC,IAAc,KAAK,IAAI,GAAG,KAAK,KAAK,IAAqB,EAAQ,CAAC,EAClE,IAAU,CAAC,EAAS,SAAS,EAAU,IAAI,EAAS,WAAW,GAG/D,IAAO,KAAK,MAAM,EAAS,SAAS,EAAQ,EAC5C,IAAK,KAAK,MAAM,EAAS,SAAS,EAAU,SAAS,EAAQ;AACnE,MAAK,IAAI,IAAI,GAAM,KAAK,GAAI,IACtB,KAAI,MAAgB,KACxB,EAAS,KAAK,KAAK,MAAM,IAAI,IAAU,EAAQ,GAAG,GAAI;AAExD,QAAO;EAAE;EAAY;EAAU"}