@tradecanvas/core 1.10.0 → 1.11.0

package/dist/{WebGLSeriesRenderer-DQOPCwno.js → WebGLSeriesRenderer-DVJBHdfm.js}

@@ -1,6 +1,6 @@
-import { i as e, o as t, r as n, t as r } from "./gridLines-kFhXyH-u.js";
-import { resolveVolumeColors as i } from "@tradecanvas/commons";
-var a = (e, t) => e.time === t.time && e.open === t.open && e.high === t.high && e.low === t.low && e.close === t.close && e.volume === t.volume, o = class {
+import { i as e, o as t, r as n, s as r, t as i } from "./gridLines-BJLaM2d7.js";
+import { resolveVolumeColors as a } from "@tradecanvas/commons";
+var o = (e, t) => e.time === t.time && e.open === t.open && e.high === t.high && e.low === t.low && e.close === t.close && e.volume === t.volume, s = class {
 	buffer = new Float32Array();
 	count = 0;
 	basePrice = 0;
@@ -24,12 +24,12 @@ var a = (e, t) => e.time === t.time && e.open === t.open && e.high === t.high &&
 			to: 0
 		};
 		let n = this.count;
-		if (!(e === this.source && n > 0 && t >= n && this.samples.every(({ index: t, bar: n }) => a(e[t], n)))) return this.basePrice = e[t - 1].close, this.ensure(t), this.write(e, 0, t), this.remember(e), {
+		if (!(e === this.source && n > 0 && t >= n && this.samples.every(({ index: t, bar: n }) => o(e[t], n)))) return this.basePrice = e[t - 1].close, this.ensure(t), this.write(e, 0, t), this.remember(e), {
 			full: !0,
 			from: 0,
 			to: t
 		};
-		let r = this.last !== null && a(e[n - 1], this.last) ? n : n - 1;
+		let r = this.last !== null && o(e[n - 1], this.last) ? n : n - 1;
 		return t > this.buffer.length / 6 ? (this.ensure(t), this.write(e, 0, t), this.remember(e), {
 			full: !0,
 			from: 0,
@@ -62,11 +62,11 @@ var a = (e, t) => e.time === t.time && e.open === t.open && e.high === t.high &&
 			bar: { ...e[t] }
 		})), this.last = { ...e[t - 1] }, this.source = e;
 	}
-}, s = /* @__PURE__ */ new Map(), c;
-function l(e, t) {
+}, c = /* @__PURE__ */ new Map(), l;
+function u(e, t) {
 	return e.endsWith("%") ? parseFloat(e) / 100 : parseFloat(e) / t;
 }
-function u(e) {
+function d(e) {
 	let t = e.trim();
 	if (t.toLowerCase() === "transparent") return [
 		0,
@@ -88,28 +88,28 @@ function u(e) {
 	}
 	let r = /^rgba?\(\s*([\d.]+%?)[\s,]+([\d.]+%?)[\s,]+([\d.]+%?)(?:\s*[,/]\s*([\d.]+%?))?\s*\)$/i.exec(t);
 	return r ? [
-		l(r[1], 255),
-		l(r[2], 255),
-		l(r[3], 255),
-		r[4] === void 0 ? 1 : l(r[4], 1)
+		u(r[1], 255),
+		u(r[2], 255),
+		u(r[3], 255),
+		r[4] === void 0 ? 1 : u(r[4], 1)
 	] : null;
 }
-function d() {
-	if (c !== void 0) return c;
+function f() {
+	if (l !== void 0) return l;
 	try {
-		c = typeof OffscreenCanvas < "u" ? new OffscreenCanvas(1, 1).getContext("2d") : typeof document < "u" ? document.createElement("canvas").getContext("2d") : null;
+		l = typeof OffscreenCanvas < "u" ? new OffscreenCanvas(1, 1).getContext("2d") : typeof document < "u" ? document.createElement("canvas").getContext("2d") : null;
 	} catch {
-		c = null;
+		l = null;
 	}
-	return c;
+	return l;
 }
-function f(e) {
-	let t = d();
+function p(e) {
+	let t = f();
 	if (!t) return null;
 	t.fillStyle = "#000", t.fillStyle = e;
 	let n = String(t.fillStyle);
 	if (t.fillStyle = "#fff", t.fillStyle = e, String(t.fillStyle) !== n) return null;
-	let r = u(n);
+	let r = d(n);
 	if (r) return r;
 	t.clearRect(0, 0, 1, 1), t.fillRect(0, 0, 1, 1);
 	let i = t.getImageData(0, 0, 1, 1).data;
@@ -120,23 +120,23 @@ function f(e) {
 		i[3] / 255
 	];
 }
-var p = /* @__PURE__ */ new Set();
-function m(e) {
-	let t = s.get(e);
+var m = /* @__PURE__ */ new Set();
+function h(e) {
+	let t = c.get(e);
 	if (t) return t;
-	if (p.has(e)) return null;
-	let n = u(e) ?? f(e);
-	return s.size > 256 && s.clear(), p.size > 256 && p.clear(), n ? s.set(e, n) : p.add(e), n;
+	if (m.has(e)) return null;
+	let n = d(e) ?? p(e);
+	return c.size > 256 && c.clear(), m.size > 256 && m.clear(), n ? c.set(e, n) : m.add(e), n;
 }
-function h(e) {
-	return m(e) ?? [
+function g(e) {
+	return h(e) ?? [
 		0,
 		0,
 		0,
 		0
 	];
 }
-function g([e, t, n, r]) {
+function _([e, t, n, r]) {
 	return [
 		e * r,
 		t * r,
@@ -146,7 +146,7 @@ function g([e, t, n, r]) {
 }
 //#endregion
 //#region src/webgl/yMapping.ts
-function _(e, t) {
+function v(e, t) {
 	let { min: n, max: r } = e.priceRange, { y: i, height: a } = e.chartRect, o = +(e.invertScale === !0), s = {
 		log: 0,
 		invert: o,
@@ -185,7 +185,7 @@ function _(e, t) {
 }
 //#endregion
 //#region src/webgl/glKit.ts
-var v = class {
+var ee = class {
 	constructor(e) {
 		this.gl = e;
 	}
@@ -253,14 +253,14 @@ var v = class {
 };
 //#endregion
 //#region src/webgl/polygonSpans.ts
-function ee(e) {
+function te(e) {
 	let t = e.length / 2;
 	if (t < 3) return [];
 	let n = 0, r = 0;
 	for (let i = 1; i < t; i++) e[2 * i] < e[2 * n] && (n = i), e[2 * i] > e[2 * r] && (r = i);
 	if (e[2 * n] === e[2 * r]) return [];
 	let i = b(e, n, r, 1, t), a = b(e, n, r, -1, t);
-	return !i || !a ? null : te(i, a);
+	return !i || !a ? null : ne(i, a);
 }
 function y(e) {
 	let t = 0, n = e.length / 2;
@@ -290,7 +290,7 @@ var x = class {
 		return [s(e), s(t)];
 	}
 };
-function te(e, t) {
+function ne(e, t) {
 	let n = /* @__PURE__ */ new Set();
 	for (let t = 0; t < e.length; t += 2) n.add(e[t]);
 	for (let e = 0; e < t.length; e += 2) n.add(t[e]);
@@ -303,7 +303,7 @@ function te(e, t) {
 }
 //#endregion
 //#region src/webgl/recordedShaders.ts
-var S = "#version 300 es\nprecision highp float;\nuniform vec2 u_canvas;\nuniform vec4 u_clip;\n\nvec4 toClip(vec2 dev) {\n  return vec4(dev.x / u_canvas.x * 2.0 - 1.0, 1.0 - dev.y / u_canvas.y * 2.0, 0.0, 1.0);\n}\n", C = "\nvec2 corner(int k) {\n  if (k == 0) return vec2(0.0, 0.0);\n  if (k == 1 || k == 4) return vec2(1.0, 0.0);\n  if (k == 2 || k == 3) return vec2(0.0, 1.0);\n  return vec2(1.0, 1.0);\n}\nconst vec4 NOWHERE = vec4(-2.0, -2.0, 0.0, 1.0);\n", w = "\n// This fragment's pixel centre in device pixels, y down.\nvec2 pixelCentre() { return vec2(gl_FragCoord.x, u_canvas.y - gl_FragCoord.y); }\n\n// The share of the pixel centred at p inside the clip.\nfloat clipCoverage(vec2 p) {\n  vec2 lo = p - 0.5;\n  vec2 c = clamp(min(lo + 1.0, u_clip.zw) - max(lo, u_clip.xy), 0.0, 1.0);\n  return c.x * c.y;\n}\n", ne = `${S}${C}
+var S = "#version 300 es\nprecision highp float;\nuniform vec2 u_canvas;\nuniform vec4 u_clip;\n\nvec4 toClip(vec2 dev) {\n  return vec4(dev.x / u_canvas.x * 2.0 - 1.0, 1.0 - dev.y / u_canvas.y * 2.0, 0.0, 1.0);\n}\n", C = "\nvec2 corner(int k) {\n  if (k == 0) return vec2(0.0, 0.0);\n  if (k == 1 || k == 4) return vec2(1.0, 0.0);\n  if (k == 2 || k == 3) return vec2(0.0, 1.0);\n  return vec2(1.0, 1.0);\n}\nconst vec4 NOWHERE = vec4(-2.0, -2.0, 0.0, 1.0);\n", w = "\n// This fragment's pixel centre in device pixels, y down.\nvec2 pixelCentre() { return vec2(gl_FragCoord.x, u_canvas.y - gl_FragCoord.y); }\n\n// The share of the pixel centred at p inside the clip.\nfloat clipCoverage(vec2 p) {\n  vec2 lo = p - 0.5;\n  vec2 c = clamp(min(lo + 1.0, u_clip.zw) - max(lo, u_clip.xy), 0.0, 1.0);\n  return c.x * c.y;\n}\n", re = `${S}${C}
 uniform float u_hw;
 in vec4 a_p0;
 in vec4 a_p1;
@@ -332,7 +332,7 @@ void main() {
   vec2 pos = mix(a - dir * m, b + dir * m, cr.x) + n * mix(-m, m, cr.y);
   gl_Position = toClip(pos);
 }
-`, re = `${S}${w}
+`, ie = `${S}${w}
 uniform vec4 u_color;
 uniform float u_hw;
 uniform int u_cap;
@@ -411,7 +411,7 @@ void main() {
   if (cov <= 0.0) discard;
   outColor = u_color * (cov * clipCov);
 }
-`, ie = `${S}${C}
+`, ae = `${S}${C}
 in vec2 a_x;
 in vec4 a_ab;
 in vec2 a_ends;
@@ -428,7 +428,7 @@ void main() {
   vec2 cr = corner(gl_VertexID % 6);
   gl_Position = toClip(mix(vec2(floor(a_x.x), floor(lo) - 1.0), vec2(ceil(a_x.y), ceil(hi) + 1.0), cr));
 }
-`, ae = `${S}${w}
+`, oe = `${S}${w}
 uniform int u_kind;
 uniform vec4 u_color;
 uniform vec4 u_line;
@@ -486,7 +486,7 @@ void main() {
   vec4 color = u_kind == 1 ? gradient(p) : u_color;
   outColor = color * cov;
 }
-`, oe = `${S}${C}
+`, se = `${S}${C}
 in vec3 a_disc;
 in vec4 a_color;
 flat out vec3 v_disc;
@@ -497,7 +497,7 @@ void main() {
   float m = a_disc.z + 1.0;
   gl_Position = toClip(mix(a_disc.xy - m, a_disc.xy + m, corner(gl_VertexID % 6)));
 }
-`, se = `${S}${w}
+`, ce = `${S}${w}
 flat in vec3 v_disc;
 flat in vec4 v_color;
 out vec4 outColor;
@@ -507,29 +507,36 @@ void main() {
   if (cov <= 0.0) discard;
   outColor = v_color * cov;
 }
-`, T = 4, E = T * 4, D = 32, O = 7, k = O * 4, A = class {
+`, T = 4, E = T * 4, D = 32, O = 7, k = O * 4, le = class {
 	stroke;
 	span;
 	disc;
 	buffer;
 	constructor(e) {
-		this.kit = e, this.stroke = e.program(ne, re, [
+		this.kit = e, this.stroke = e.program(re, ie, [
 			"a_p0",
 			"a_p1",
 			"a_p2",
 			"a_p3",
 			"a_p4",
 			"a_p5"
-		]), this.span = e.program(ie, ae, [
+		]), this.span = e.program(ae, oe, [
 			"a_x",
 			"a_ab",
 			"a_ends"
-		]), this.disc = e.program(oe, se, ["a_disc", "a_color"]), this.buffer = e.buffer();
+		]), this.disc = e.program(se, ce, ["a_disc", "a_color"]), this.buffer = e.buffer();
 	}
 	draw(e, t, n, r) {
 		let i = this.kit.gl;
 		i.enable(i.BLEND);
-		for (let a of e) i.blendFunc(i.ONE, i.ONE_MINUS_SRC_ALPHA), i.disable(i.SCISSOR_TEST), a.type === "rects" ? this.drawRects(a.values, r) : a.type === "stroke" ? this.drawStroke(a, t, n) : a.type === "fill" ? this.drawFill(a, t, n) : this.drawDiscs(a.values, a.clip, t, n);
+		for (let a = 0; a < e.length; a++) {
+			let o = e[a];
+			if (i.blendFunc(i.ONE, i.ONE_MINUS_SRC_ALPHA), i.disable(i.SCISSOR_TEST), o.type === "rects") {
+				let t = [o.values];
+				for (; e[a + 1]?.type === "rects";) t.push(e[++a].values);
+				this.drawRects(t, r);
+			} else o.type === "stroke" ? this.drawStroke(o, t, n) : o.type === "fill" ? this.drawFill(o, t, n) : this.drawDiscs(o.values, o.clip, t, n);
+		}
 		i.disable(i.SCISSOR_TEST);
 	}
 	destroy() {
@@ -554,8 +561,10 @@ void main() {
 		]), !0) : !1;
 	}
 	drawRects(e, t) {
-		let n = e.length / 8, r = new Float32Array(n * 10);
-		for (let t = 0; t < n; t++) for (let n = 0; n < 8; n++) r[t * 10 + n] = e[t * 8 + n];
+		let n = 0;
+		for (let t of e) n += t.length / 8;
+		let r = new Float32Array(n * 10), i = 0;
+		for (let t of e) for (let e = 0; e < t.length; e += 8, i++) for (let n = 0; n < 8; n++) r[i * 10 + n] = t[e + n];
 		t(r, n);
 	}
 	drawStroke(e, t, n) {
@@ -610,13 +619,13 @@ void main() {
 		let i = this.disc;
 		this.common(i, t, n, r) && (this.upload(new Float32Array(e)), this.kit.attrib(i, "a_disc", 3, k, 0), this.kit.attrib(i, "a_color", 4, k, 12), this.kit.gl.drawArraysInstanced(this.kit.gl.TRIANGLES, 0, 6, e.length / O));
 	}
-}, j = (e, t) => ({
+}, A = (e, t) => ({
 	x0: Math.max(e.x0, t.x0),
 	y0: Math.max(e.y0, t.y0),
 	x1: Math.min(e.x1, t.x1),
 	y1: Math.min(e.y1, t.y1)
-}), M = (e) => !(e.x1 > e.x0 && e.y1 > e.y0);
-function N(e, t = 0) {
+}), j = (e) => !(e.x1 > e.x0 && e.y1 > e.y0);
+function M(e, t = 0) {
 	let n = Infinity, r = Infinity, i = -Infinity, a = -Infinity;
 	for (let t = 0; t < e.length; t += 2) {
 		let o = e[t], s = e[t + 1];
@@ -629,7 +638,7 @@ function N(e, t = 0) {
 		y1: a + t
 	};
 }
-function P(e) {
+function N(e) {
 	let t = [...e].sort((e, t) => e.x0 - t.x0), n = [];
 	for (let e of t) {
 		for (let t = n.length - 1; t >= 0; t--) n[t].x1 <= e.x0 && n.splice(t, 1);
@@ -640,7 +649,7 @@ function P(e) {
 }
 //#endregion
 //#region src/webgl/recordedPath.ts
-var F = class {
+var P = class {
 	stops = [];
 	constructor(e, t, n, r) {
 		this.x0 = e, this.y0 = t, this.x1 = n, this.y1 = r;
@@ -652,14 +661,14 @@ var F = class {
 			color: t
 		});
 	}
-}, I = typeof Path2D == "function" ? Path2D : class {}, L = class e extends I {
+}, F = typeof Path2D == "function" ? Path2D : class {}, I = class e extends F {
 	calls = [];
 	unsupported = !1;
 	constructor(t) {
 		super(t), t instanceof e ? (this.calls.push(...t.calls), this.unsupported = t.unsupported) : t !== void 0 && (this.unsupported = !0);
 	}
 	note(e, t, n = t) {
-		this.calls.push([e, t]), I.prototype[e]?.apply(this, n);
+		this.calls.push([e, t]), F.prototype[e]?.apply(this, n);
 	}
 	unfollowed(e, t) {
 		this.unsupported = !0, this.note(e, [], t);
@@ -719,12 +728,12 @@ var F = class {
 		this.unfollowed("roundRect", e);
 	}
 	addPath(t, n) {
-		!(t instanceof e) || n !== void 0 ? this.unsupported = !0 : (this.calls.push(...t.calls), this.unsupported ||= t.unsupported), I.prototype.addPath?.call(this, t, n);
+		!(t instanceof e) || n !== void 0 ? this.unsupported = !0 : (this.calls.push(...t.calls), this.unsupported ||= t.unsupported), F.prototype.addPath?.call(this, t, n);
 	}
 };
-function ce(e) {
+function ue(e) {
 	let t = globalThis, n = Object.prototype.hasOwnProperty.call(t, "Path2D"), r = t.Path2D;
-	t.Path2D = L;
+	t.Path2D = I;
 	try {
 		e();
 	} finally {
@@ -733,24 +742,24 @@ function ce(e) {
 }
 //#endregion
 //#region src/webgl/strokeGeometry.ts
-var le = .25;
-function ue(e, t, n, r) {
+var de = .25;
+function fe(e, t, n, r) {
 	if (n === "round") return !1;
 	let i = e.points, a = i.length / 2, o = +!e.closed, s = e.closed ? a : a - 1;
 	for (let e = o; e < s; e++) {
 		let o = (e - 1 + a) % a, s = (e + 1) % a, c = i[2 * e] - i[2 * o], l = i[2 * e + 1] - i[2 * o + 1], u = i[2 * s] - i[2 * e], d = i[2 * s + 1] - i[2 * e + 1], f = Math.hypot(c, l), p = Math.hypot(u, d);
 		if (f === 0 || p === 0) continue;
 		let m = Math.max(-1, Math.min(1, (c * u + l * d) / (f * p))), h = Math.sqrt((1 + m) / 2);
-		if ((n === "miter" && h > 0 && 1 / h <= r ? t * (1 / h - 1) : t * (1 - h)) > le) return !0;
+		if ((n === "miter" && h > 0 && 1 / h <= r ? t * (1 / h - 1) : t * (1 - h)) > de) return !0;
 	}
 	return !1;
 }
-function de(e, t) {
+function pe(e, t) {
 	let n = e.points;
 	for (let e = 2; e < n.length; e += 2) if (Math.hypot(n[e] - n[e - 2], n[e + 1] - n[e - 1]) < t) return !0;
 	return !1;
 }
-function fe(e) {
+function me(e) {
 	let t = [], n = () => t.push(0, 0, -1, 0);
 	n(), n();
 	for (let { points: r, closed: i } of e) {
@@ -764,8 +773,8 @@ function fe(e) {
 }
 //#endregion
 //#region src/webgl/recorder.ts
-var R = Math.PI * 2;
-function pe(e, t) {
+var L = Math.PI * 2;
+function R(e, t) {
 	let n = 2 * Math.sqrt(Math.max(.2 / Math.max(e, .1), 1e-6));
 	return Math.min(512, Math.max(4, Math.ceil(Math.abs(t) / Math.min(n, Math.PI / 4))));
 }
@@ -795,14 +804,17 @@ var z = new Set([
 	"letterSpacing",
 	"wordSpacing",
 	"textRendering"
-]), V = new Set(["imageSmoothingEnabled", "imageSmoothingQuality"]), H = (e) => !!(e.rect || e.circle) || e.points.length >= 6, U = class {
+]), V = new Set(["imageSmoothingEnabled", "imageSmoothingQuality"]), H = (e) => !!(e.rect || e.circle) || e.points.length >= 6, he = class {
 	commands = [];
 	ctx;
 	texts = [];
+	takesText = !0;
 	state;
 	stack = [];
 	path = [];
 	ok = !0;
+	stepStart = 0;
+	solid = null;
 	constructor(e, t) {
 		this.dpr = e, this.measure = t, this.reset({
 			x0: 0,
@@ -811,29 +823,29 @@ var z = new Set([
 			y1: Infinity
 		}), this.ctx = this.proxy();
 	}
-	region(e) {
-		let t = this.dpr, n = {
-			x0: e.x * t,
-			y0: e.y * t,
-			x1: (e.x + e.width) * t,
-			y1: (e.y + e.height) * t
-		}, r = [];
+	region(e, t) {
+		let n = this.dpr, r = {
+			x0: e.x * n,
+			y0: e.y * n,
+			x1: (e.x + e.width) * n,
+			y1: (e.y + e.height) * n
+		}, i = [], a = t?.text !== !1;
 		return {
 			step: (e) => {
-				this.reset(n), this.texts = r;
+				this.reset(r), this.texts = i, this.takesText = a;
 				let t = {
 					commands: this.commands.length,
-					texts: r.length
+					texts: i.length
 				};
-				this.ok = !0;
+				this.stepStart = t.commands, this.ok = !0;
 				try {
-					ce(() => e(this.ctx));
+					ue(() => e(this.ctx));
 				} catch {
 					this.ok = !1;
 				}
-				return this.ok ? !0 : (this.commands.length = t.commands, r.length = t.texts, !1);
+				return this.ok ? !0 : (this.commands.length = t.commands, i.length = t.texts, !1);
 			},
-			drawText: (e) => me(e, r)
+			drawText: (e) => ge(e, i)
 		};
 	}
 	reset(e) {
@@ -967,14 +979,14 @@ var z = new Set([
 		].every(Number.isFinite)) return;
 		if (n < 0) throw new DOMException("negative radius", "IndexSizeError");
 		let o = i - r;
-		o = !a && o >= R ? R : a && -o >= R ? -R : a ? -(((r - i) % R + R) % R) : (o % R + R) % R;
-		let s = this.current(), c = this.state.transform, l = e + n * Math.cos(r), u = t + n * Math.sin(r), d = !s || s.closed || s.points.length === 2 && Math.abs(s.points[0] - (c[0] * l + c[2] * u + c[4])) < 1e-6 && Math.abs(s.points[1] - (c[1] * l + c[3] * u + c[5])) < 1e-6, f = pe(n * Math.abs(c[0]), o);
+		o = !a && o >= L ? L : a && -o >= L ? -L : a ? -(((r - i) % L + L) % L) : (o % L + L) % L;
+		let s = this.current(), c = this.state.transform, l = e + n * Math.cos(r), u = t + n * Math.sin(r), d = !s || s.closed || s.points.length === 2 && Math.abs(s.points[0] - (c[0] * l + c[2] * u + c[4])) < 1e-6 && Math.abs(s.points[1] - (c[1] * l + c[3] * u + c[5])) < 1e-6, f = R(n * Math.abs(c[0]), o);
 		for (let i = 0; i <= f; i++) {
 			let a = r + o * i / f;
 			this.lineTo(e + n * Math.cos(a), t + n * Math.sin(a));
 		}
 		let p = this.current();
-		Math.abs(o) >= R - 1e-9 && d && this.uniform() && p && (p.circle = {
+		Math.abs(o) >= L - 1e-9 && d && this.uniform() && p && (p.circle = {
 			x: c[0] * e + c[4],
 			y: c[3] * t + c[5],
 			r: n * Math.abs(c[0])
@@ -1013,7 +1025,7 @@ var z = new Set([
 		this.path = [], e(), t(), this.path = n;
 	}
 	onPath(e, t) {
-		if (!(e instanceof L) || e.unsupported) return this.unsupported();
+		if (!(e instanceof I) || e.unsupported) return this.unsupported();
 		this.withPath(() => {
 			for (let [t, n] of e.calls) t === "moveTo" ? this.moveTo(n[0], n[1]) : t === "lineTo" ? this.lineTo(n[0], n[1]) : t === "closePath" ? this.closePath() : t === "rect" ? this.rect(n[0], n[1], n[2], n[3]) : t === "arc" ? this.arc(n[0], n[1], n[2], n[3], n[4], !!n[5]) : t === "quadraticCurveTo" ? this.curve([n[0], n[1]], [n[2], n[3]]) : t === "bezierCurveTo" && this.curve([
 				n[0],
@@ -1023,21 +1035,34 @@ var z = new Set([
 			], [n[4], n[5]]);
 		}, t);
 	}
+	baseColor(e) {
+		let t = this.solid;
+		if (t && t.style === e) return t.color;
+		let n = _(g(e));
+		return this.solid = {
+			style: e,
+			color: n
+		}, n;
+	}
+	alpha() {
+		return Math.max(0, Math.min(1, this.state.globalAlpha));
+	}
+	solidColor(e) {
+		let t = this.baseColor(e), n = this.alpha();
+		return [
+			t[0] * n,
+			t[1] * n,
+			t[2] * n,
+			t[3] * n
+		];
+	}
 	paint(e) {
-		let t = Math.max(0, Math.min(1, this.state.globalAlpha));
-		if (typeof e == "string") {
-			let n = g(h(e));
-			return {
-				kind: "solid",
-				color: [
-					n[0] * t,
-					n[1] * t,
-					n[2] * t,
-					n[3] * t
-				]
-			};
-		}
-		if (!(e instanceof F)) return null;
+		let t = this.alpha();
+		if (typeof e == "string") return {
+			kind: "solid",
+			color: this.solidColor(e)
+		};
+		if (!(e instanceof P)) return null;
 		if (e.stops.length === 0) return {
 			kind: "solid",
 			color: [
@@ -1051,7 +1076,7 @@ var z = new Set([
 		let n = this.state.transform, r = e.x0 === e.x1 || e.y0 === e.y1;
 		if (!this.axisAligned() || !this.uniform() && !r) return null;
 		let i = [...e.stops].sort((e, t) => e.offset - t.offset).map((e) => {
-			let n = h(e.color);
+			let n = g(e.color);
 			return {
 				offset: e.offset,
 				color: [
@@ -1073,7 +1098,7 @@ var z = new Set([
 	}
 	plain() {
 		let e = this.state;
-		return e.globalCompositeOperation !== "source-over" || e.filter !== "none" ? !1 : !(h(e.shadowColor)[3] > 0 && (e.shadowBlur > 0 || e.shadowOffsetX !== 0 || e.shadowOffsetY !== 0));
+		return e.globalCompositeOperation !== "source-over" || e.filter !== "none" ? !1 : e.shadowBlur === 0 && e.shadowOffsetX === 0 && e.shadowOffsetY === 0 ? !0 : !(g(e.shadowColor)[3] > 0);
 	}
 	fill(e = "nonzero") {
 		if (!this.plain()) return this.unsupported();
@@ -1081,7 +1106,7 @@ var z = new Set([
 		if (!t) return this.unsupported();
 		let n = this.path.filter(H);
 		if (n.length === 0 || t.kind === "solid" && t.color[3] === 0) return;
-		if (n.length > 1 && P(n.map((e) => N(e.points)))) {
+		if (n.length > 1 && N(n.map((e) => M(e.points)))) {
 			let r = t.kind === "solid" && t.color[3] >= 1, i = Math.sign(y(n[0].points));
 			if (!r || e !== "nonzero" || n.some((e) => Math.sign(y(e.points)) !== i)) return this.unsupported();
 		}
@@ -1098,17 +1123,17 @@ var z = new Set([
 		}
 		let r = [];
 		for (let e of n) {
-			let t = ee(e.points);
+			let t = te(e.points);
 			if (!t) return this.unsupported();
 			for (let e of t) r.push(e);
 		}
-		let i = N(n.flatMap((e) => e.points)), a = j({
+		let i = M(n.flatMap((e) => e.points)), a = A({
 			x0: Math.floor(i.x0),
 			y0: Math.floor(i.y0),
 			x1: Math.ceil(i.x1),
 			y1: Math.ceil(i.y1)
 		}, this.state.clip);
-		r.length > 0 && !M(a) && this.commands.push({
+		r.length > 0 && !j(a) && this.commands.push({
 			type: "fill",
 			spans: r,
 			bounds: a,
@@ -1117,16 +1142,40 @@ var z = new Set([
 		});
 	}
 	fillRects(e, t) {
-		let n = [];
-		for (let r of e) {
-			let e = j(r.rect, this.state.clip);
-			M(e) || n.push(e.x0, e.y0, e.x1, e.y1, t[0], t[1], t[2], t[3]);
-		}
-		n.length && this.commands.push({
+		for (let n of e) this.pushRect(n.rect, t);
+	}
+	pushRect(e, t, n = 1) {
+		let r = this.state.clip, i = Math.max(e.x0, r.x0), a = Math.max(e.y0, r.y0), o = Math.min(e.x1, r.x1), s = Math.min(e.y1, r.y1);
+		if (!(o > i && s > a)) return;
+		let c = this.commands[this.commands.length - 1], l = c && c.type === "rects" && this.commands.length > this.stepStart ? c.values : null, u = t[0] * n, d = t[1] * n, f = t[2] * n, p = t[3] * n;
+		l ? l.push(i, a, o, s, u, d, f, p) : this.commands.push({
 			type: "rects",
-			values: n
+			values: [
+				i,
+				a,
+				o,
+				s,
+				u,
+				d,
+				f,
+				p
+			]
 		});
 	}
+	fillRect(e, t, n, r) {
+		let i = this.state.fillStyle;
+		if (typeof i != "string" || !this.axisAligned() || !this.plain()) return this.withPath(() => this.rect(e, t, n, r), () => this.fill());
+		if (!(Number.isFinite(e) && Number.isFinite(t) && Number.isFinite(n) && Number.isFinite(r))) return;
+		let a = this.baseColor(i), o = this.alpha();
+		if (a[3] * o === 0) return;
+		let s = this.state.transform, c = s[0] * e + s[4], l = s[0] * (e + n) + s[4], u = s[3] * t + s[5], d = s[3] * (t + r) + s[5];
+		this.pushRect({
+			x0: Math.min(c, l),
+			y0: Math.min(u, d),
+			x1: Math.max(c, l),
+			y1: Math.max(u, d)
+		}, a, o);
+	}
 	stroke() {
 		if (!this.plain()) return this.unsupported();
 		let e = this.paint(this.state.strokeStyle);
@@ -1139,7 +1188,7 @@ var z = new Set([
 		let o = t.lineCap === "round" ? 1 : t.lineCap === "square" ? 2 : 0;
 		this.commands.push({
 			type: "stroke",
-			points: fe(i),
+			points: me(i),
 			color: e.color,
 			width: r,
 			cap: o,
@@ -1157,17 +1206,18 @@ var z = new Set([
 	}
 	drawsAlike(e, t, n) {
 		let r = this.state, i = t / 2;
-		if (t > 1 && e.some((e) => ue(e, i, r.lineJoin, r.miterLimit))) return !1;
+		if (t > 1 && e.some((e) => fe(e, i, r.lineJoin, r.miterLimit))) return !1;
 		let a = i + (r.lineCap === "butt" ? 0 : i);
-		return !(e.length > 1 && P(e.map((e) => N(e.points, a))) || n < 1 && e.some((e) => de(e, t)));
+		return !(e.length > 1 && N(e.map((e) => M(e.points, a))) || n < 1 && e.some((e) => pe(e, t)));
 	}
 	clip() {
 		let e = this.path.filter(H);
 		if (e.length !== 1 || !e[0].rect) return this.unsupported();
-		this.state.clip = j(this.state.clip, e[0].rect);
+		this.state.clip = A(this.state.clip, e[0].rect);
 	}
 	text(e, t, n, r, i) {
-		if (typeof (e ? this.state.strokeStyle : this.state.fillStyle) != "string" || !this.plain()) return this.unsupported();
+		let a = e ? this.state.strokeStyle : this.state.fillStyle;
+		if (!this.takesText || typeof a != "string" || !this.plain()) return this.unsupported();
 		this.texts.push({
 			stroke: e,
 			text: String(t),
@@ -1213,7 +1263,7 @@ var z = new Set([
 			fill: (e, t) => typeof e == "object" ? this.onPath(e, () => this.fill(t)) : this.fill(e),
 			stroke: (e) => e ? this.onPath(e, () => this.stroke()) : this.stroke(),
 			clip: (e) => typeof e == "object" ? this.onPath(e, () => this.clip()) : this.clip(),
-			fillRect: (e, t, n, r) => this.withPath(() => this.rect(e, t, n, r), () => this.fill()),
+			fillRect: (e, t, n, r) => this.fillRect(e, t, n, r),
 			strokeRect: (e, t, n, r) => this.withPath(() => this.rect(e, t, n, r), () => this.stroke()),
 			fillText: (e, t, n, r) => this.text(!1, e, t, n, r),
 			strokeText: (e, t, n, r) => this.text(!0, e, t, n, r),
@@ -1261,7 +1311,7 @@ var z = new Set([
 					isIdentity: t === 1 && n === 0 && r === 0 && i === 1 && a === 0 && o === 0
 				};
 			},
-			createLinearGradient: (e, t, n, r) => new F(e, t, n, r)
+			createLinearGradient: (e, t, n, r) => new P(e, t, n, r)
 		}), t;
 	}
 	proxy() {
@@ -1281,24 +1331,66 @@ var z = new Set([
 	}
 	setProp(e, t) {
 		let n = this.state;
-		e === "lineWidth" || e === "miterLimit" ? typeof t == "number" && Number.isFinite(t) && t > 0 && (n[e] = t) : e === "globalAlpha" ? typeof t == "number" && Number.isFinite(t) && t >= 0 && t <= 1 && (n.globalAlpha = t) : e === "fillStyle" || e === "strokeStyle" ? t instanceof F ? n[e] = t : typeof t == "string" ? m(t) && (n[e] = t) : this.unsupported() : z.has(e) ? n[e] = t : B.has(e) ? this.state.textExtras[e] = t : V.has(e) || this.unsupported();
+		e === "lineWidth" || e === "miterLimit" ? typeof t == "number" && Number.isFinite(t) && t > 0 && (n[e] = t) : e === "globalAlpha" ? typeof t == "number" && Number.isFinite(t) && t >= 0 && t <= 1 && (n.globalAlpha = t) : e === "fillStyle" || e === "strokeStyle" ? t instanceof P ? n[e] = t : typeof t == "string" ? h(t) && (n[e] = t) : this.unsupported() : z.has(e) ? n[e] = t : B.has(e) ? this.state.textExtras[e] = t : V.has(e) || this.unsupported();
 	}
 };
-function me(e, t) {
+function ge(e, t) {
 	for (let n of t) {
 		let t = n.state;
-		if (M(t.clip)) continue;
+		if (j(t.clip)) continue;
 		e.save(), e.setTransform(1, 0, 0, 1, 0, 0), Number.isFinite(t.clip.x1) && Number.isFinite(t.clip.y1) && (e.beginPath(), e.rect(t.clip.x0, t.clip.y0, t.clip.x1 - t.clip.x0, t.clip.y1 - t.clip.y0), e.clip());
 		let [r, i, a, o, s, c] = t.transform;
 		e.setTransform(r, i, a, o, s, c), e.font = t.font, e.textAlign = t.textAlign, e.textBaseline = t.textBaseline, e.direction = t.direction, e.globalAlpha = t.globalAlpha, Object.assign(e, t.textExtras), n.stroke ? (e.strokeStyle = t.strokeStyle, e.lineWidth = t.lineWidth, e.strokeText(n.text, n.x, n.y, n.maxWidth)) : (e.fillStyle = t.fillStyle, e.fillText(n.text, n.x, n.y, n.maxWidth)), e.restore();
 	}
 }
-function he(e, t) {
-	return new U(e, t);
+function _e(e, t) {
+	return new he(e, t);
 }
 //#endregion
 //#region src/webgl/shaders.ts
-var W = "#version 300 es\nprecision highp float;\nuniform vec2 u_canvas;\nuniform float u_dpr;\nuniform int u_log;\nuniform int u_invert;\nuniform float u_yA;\nuniform float u_yB;\nuniform float u_logOffset;\nuniform float u_min;\nuniform float u_logFloor;\nuniform float u_logK;\nuniform float u_top;\nuniform float u_bottom;\nout vec4 v_color;\n\n// A price (relative to the base price) to a CSS-pixel y, as priceToYMapper\n// does; mappedY in yMapping.ts is the same steps in TypeScript.\nfloat cssY(float rel) {\n  if (u_log == 1) {\n    float v = log(max(1.0 + (rel + u_logOffset) / u_min, u_logFloor)) * u_logK;\n    return u_invert == 1 ? u_top + v : u_bottom - v;\n  }\n  return u_yA + rel * u_yB;\n}\n\nfloat snap(float v) { return floor(v + 0.5); }\n\nvec4 toClip(vec2 dev) {\n  return vec4(dev.x / u_canvas.x * 2.0 - 1.0, 1.0 - dev.y / u_canvas.y * 2.0, 0.0, 1.0);\n}\n\n// The corners of a quad as two triangles.\nvec2 corner(int k) {\n  if (k == 0) return vec2(0.0, 0.0);\n  if (k == 1 || k == 4) return vec2(1.0, 0.0);\n  if (k == 2 || k == 3) return vec2(0.0, 1.0);\n  return vec2(1.0, 1.0);\n}\n\n// Nothing to draw: every vertex at one point off the canvas.\nconst vec4 NOWHERE = vec4(-2.0, -2.0, 0.0, 1.0);\n", ge = `${W}
+var U = `#version 300 es
+precision highp float;
+uniform vec2 u_canvas;
+uniform float u_dpr;
+uniform int u_log;
+uniform int u_invert;
+uniform float u_yA;
+uniform float u_yB;
+uniform float u_logOffset;
+uniform float u_min;
+uniform float u_logFloor;
+uniform float u_logK;
+uniform float u_top;
+uniform float u_bottom;
+out vec4 v_color;
+
+// A price (relative to the base price) to a CSS-pixel y, as priceToYMapper
+// does; mappedY in yMapping.ts is the same steps in TypeScript.
+float cssY(float rel) {
+  if (u_log == 1) {
+    float v = log(max(1.0 + (rel + u_logOffset) / u_min, u_logFloor)) * u_logK;
+    return u_invert == 1 ? u_top + v : u_bottom - v;
+  }
+  return u_yA + rel * u_yB;
+}
+
+float snap(float v) { return floor(v + ${t.toFixed(4)}); }
+
+vec4 toClip(vec2 dev) {
+  return vec4(dev.x / u_canvas.x * 2.0 - 1.0, 1.0 - dev.y / u_canvas.y * 2.0, 0.0, 1.0);
+}
+
+// The corners of a quad as two triangles.
+vec2 corner(int k) {
+  if (k == 0) return vec2(0.0, 0.0);
+  if (k == 1 || k == 4) return vec2(1.0, 0.0);
+  if (k == 2 || k == 3) return vec2(0.0, 1.0);
+  return vec2(1.0, 1.0);
+}
+
+// Nothing to draw: every vertex at one point off the canvas.
+const vec4 NOWHERE = vec4(-2.0, -2.0, 0.0, 1.0);
+`, ve = `${U}
 in vec4 a_ohlc;
 in vec2 a_vd;
 uniform float u_x0;
@@ -1339,7 +1431,7 @@ void main() {
   }
   gl_Position = toClip(vec2(left + cr.x * width, top + cr.y * height));
 }
-`, _e = `${W}
+`, ye = `${U}
 in vec4 a_ohlc;
 in vec2 a_vd;
 uniform float u_x0;
@@ -1361,7 +1453,7 @@ void main() {
   v_color = a_vd.y > 0.5 ? u_volUp : u_volDown;
   gl_Position = toClip(vec2(left + cr.x * u_body, top + cr.y * (bottom - top)));
 }
-`, ve = `${W}
+`, be = `${U}
 in vec4 a_col;
 in float a_up;
 uniform vec4 u_upBody;
@@ -1376,7 +1468,7 @@ void main() {
   v_color = a_up > 0.5 ? u_upBody : u_downBody;
   gl_Position = toClip(vec2(left + cr.x * width, min(t, b) + cr.y * max(abs(b - t), 1.0)));
 }
-`, ye = `${W}
+`, xe = `${U}
 in vec4 a_col;
 in float a_up;
 uniform float u_volBottom;
@@ -1394,7 +1486,7 @@ void main() {
   v_color = a_up > 0.5 ? u_volUp : u_volDown;
   gl_Position = toClip(vec2(left + cr.x * width, top + cr.y * (bottom - top)));
 }
-`, be = `${W}
+`, Se = `${U}
 in vec4 a_rect;
 in vec4 a_color;
 in vec2 a_dash;
@@ -1408,7 +1500,7 @@ void main() {
   v_color = a_color;
   gl_Position = toClip(mix(floor(v_rect.xy), ceil(v_rect.zw), cr));
 }
-`, xe = "#version 300 es\nprecision highp float;\nuniform vec2 u_canvas;\nuniform int u_union;\nin vec4 v_color;\nflat in vec4 v_rect;\nflat in vec2 v_dash;\nout vec4 outColor;\n\n// The share of rows [y, y + 1] inside the rectangle and, dashed, on a dash.\nfloat rows(float y) {\n  float lo = max(y, v_rect.y);\n  float hi = min(y + 1.0, v_rect.w);\n  if (hi <= lo) return 0.0;\n  if (v_dash.x <= 0.0) return hi - lo;\n  // A dash period is longer than a device pixel, so the row meets the dash\n  // of the period it starts in and the next (a third to spare).\n  float period = v_dash.x + v_dash.y;\n  float first = v_rect.y + floor((lo - v_rect.y) / period) * period;\n  float on = 0.0;\n  for (int i = 0; i < 3; i++) {\n    float start = first + float(i) * period;\n    on += max(0.0, min(hi, start + v_dash.x) - max(lo, start));\n  }\n  return on;\n}\n\nvoid main() {\n  // This pixel's top-left corner in device pixels, y down.\n  vec2 p = vec2(floor(gl_FragCoord.x), u_canvas.y - floor(gl_FragCoord.y) - 1.0);\n  float coverage = clamp(min(p.x + 1.0, v_rect.z) - max(p.x, v_rect.x), 0.0, 1.0) * rows(p.y);\n  outColor = u_union == 1 ? vec4(v_color.rgb * coverage, coverage) : v_color * coverage;\n}\n", G = "#version 300 es\nprecision highp float;\nuniform vec2 u_canvas;\nuniform vec4 u_clip;\nin vec4 v_color;\nout vec4 outColor;\n\nvoid main() {\n  vec2 p = vec2(floor(gl_FragCoord.x), u_canvas.y - floor(gl_FragCoord.y) - 1.0);\n  vec2 c = clamp(min(p + 1.0, u_clip.zw) - max(p, u_clip.xy), 0.0, 1.0);\n  outColor = v_color * (c.x * c.y);\n}\n", K = 24, q = 5, J = q * 4, Y = 10, X = Y * 4, Z = [
+`, Ce = "#version 300 es\nprecision highp float;\nuniform vec2 u_canvas;\nuniform int u_union;\nin vec4 v_color;\nflat in vec4 v_rect;\nflat in vec2 v_dash;\nout vec4 outColor;\n\n// The share of rows [y, y + 1] inside the rectangle and, dashed, on a dash.\nfloat rows(float y) {\n  float lo = max(y, v_rect.y);\n  float hi = min(y + 1.0, v_rect.w);\n  if (hi <= lo) return 0.0;\n  if (v_dash.x <= 0.0) return hi - lo;\n  // A dash period is longer than a device pixel, so the row meets the dash\n  // of the period it starts in and the next (a third to spare).\n  float period = v_dash.x + v_dash.y;\n  float first = v_rect.y + floor((lo - v_rect.y) / period) * period;\n  float on = 0.0;\n  for (int i = 0; i < 3; i++) {\n    float start = first + float(i) * period;\n    on += max(0.0, min(hi, start + v_dash.x) - max(lo, start));\n  }\n  return on;\n}\n\nvoid main() {\n  // This pixel's top-left corner in device pixels, y down.\n  vec2 p = vec2(floor(gl_FragCoord.x), u_canvas.y - floor(gl_FragCoord.y) - 1.0);\n  float coverage = clamp(min(p.x + 1.0, v_rect.z) - max(p.x, v_rect.x), 0.0, 1.0) * rows(p.y);\n  outColor = u_union == 1 ? vec4(v_color.rgb * coverage, coverage) : v_color * coverage;\n}\n", W = "#version 300 es\nprecision highp float;\nuniform vec2 u_canvas;\nuniform vec4 u_clip;\nin vec4 v_color;\nout vec4 outColor;\n\nvoid main() {\n  vec2 p = vec2(floor(gl_FragCoord.x), u_canvas.y - floor(gl_FragCoord.y) - 1.0);\n  vec2 c = clamp(min(p + 1.0, u_clip.zw) - max(p, u_clip.xy), 0.0, 1.0);\n  outColor = v_color * (c.x * c.y);\n}\n", G = 24, K = 5, q = K * 4, J = 10, Y = J * 4, X = [
 	"a_ohlc",
 	"a_vd",
 	"a_col",
@@ -1416,7 +1508,7 @@ void main() {
 	"a_rect",
 	"a_color",
 	"a_dash"
-], Se = class a {
+], we = class t {
 	label;
 	gl;
 	kit;
@@ -1429,10 +1521,10 @@ void main() {
 	seriesBuffer;
 	columnBuffer;
 	rectBuffer;
-	uploads = new o();
+	uploads = new s();
 	gpuFloats = 0;
-	columns = new Float32Array(4096 * q);
-	rectValues = new Float32Array(64 * Y);
+	columns = new Float32Array(4096 * K);
+	rectValues = new Float32Array(64 * J);
 	clip = [
 		0,
 		0,
@@ -1443,9 +1535,9 @@ void main() {
 	lostCallback = null;
 	static create(e = {}) {
 		if (typeof document > "u") return null;
-		let t = document.createElement("canvas"), n = null;
+		let n = document.createElement("canvas"), r = null;
 		try {
-			n = t.getContext("webgl2", {
+			r = n.getContext("webgl2", {
 				alpha: !0,
 				premultipliedAlpha: !0,
 				antialias: !1,
@@ -1457,19 +1549,19 @@ void main() {
 		} catch (e) {
 			return $(e), null;
 		}
-		if (!n) return null;
+		if (!r) return null;
 		try {
-			return new a(t, n);
+			return new t(n, r);
 		} catch (e) {
-			return $(e), Q(n), null;
+			return $(e), Q(r), null;
 		}
 	}
 	constructor(e, t) {
-		this.canvas = e, this.gl = t, this.kit = new v(t);
+		this.canvas = e, this.gl = t, this.kit = new ee(t);
 		let n = t.getExtension("WEBGL_debug_renderer_info");
 		this.label = String(n ? t.getParameter(n.UNMASKED_RENDERER_WEBGL) : t.getParameter(t.RENDERER));
 		let r = this.kit;
-		this.candleBars = r.program(ge, G, Z), this.volumeBars = r.program(_e, G, Z), this.candleColumns = r.program(ve, G, Z), this.volumeColumns = r.program(ye, G, Z), this.rects = r.program(be, xe, Z), this.seriesBuffer = r.buffer(), this.columnBuffer = r.buffer(), this.rectBuffer = r.buffer(), this.drawer = new A(r), e.addEventListener("webglcontextlost", this.handleLost);
+		this.candleBars = r.program(ve, W, X), this.volumeBars = r.program(ye, W, X), this.candleColumns = r.program(be, W, X), this.volumeColumns = r.program(xe, W, X), this.rects = r.program(Se, Ce, X), this.seriesBuffer = r.buffer(), this.columnBuffer = r.buffer(), this.rectBuffer = r.buffer(), this.drawer = new le(r), e.addEventListener("webglcontextlost", this.handleLost);
 	}
 	onLost(e) {
 		this.lostCallback = e, (this.lost || this.gl.isContextLost()) && (this.lost = !0, queueMicrotask(() => {
@@ -1477,7 +1569,7 @@ void main() {
 		}));
 	}
 	recorder(e, t) {
-		return he(e, t);
+		return _e(e, t);
 	}
 	render(e) {
 		let t = this.gl;
@@ -1485,15 +1577,17 @@ void main() {
 			series: !1,
 			volume: !1,
 			background: !1,
-			recorded: !1
+			recorded: !1,
+			under: !1
 		};
-		let n = Ce(e.recorded) ? e.recorded : null, r = {
+		let n = Z(e.recorded) ? e.recorded : null, r = Z(e.under) ? e.under : null, i = {
 			series: e.candles,
 			volume: e.volume !== null,
 			background: e.background !== null,
-			recorded: n !== null
+			recorded: n !== null,
+			under: r !== null
 		};
-		return t.viewport(0, 0, this.canvas.width, this.canvas.height), t.disable(t.SCISSOR_TEST), t.clearColor(0, 0, 0, 0), t.clear(t.COLOR_BUFFER_BIT), t.enable(t.BLEND), e.background && this.drawBackground(e, e.background), this.drawSeries(e), n && n.commands.length > 0 && this.drawer.draw(n.commands, this.canvas.width, this.canvas.height, (t, n) => this.drawRecordedRects(e, t, n)), r;
+		return t.viewport(0, 0, this.canvas.width, this.canvas.height), t.disable(t.SCISSOR_TEST), t.clearColor(0, 0, 0, 0), t.clear(t.COLOR_BUFFER_BIT), t.enable(t.BLEND), e.background && this.drawBackground(e, e.background), r && this.drawRecorded(e, r), this.drawSeries(e), n && this.drawRecorded(e, n), i;
 	}
 	drawSeries(t) {
 		let n = this.gl, { data: r, viewport: i, dpr: a } = t;
@@ -1515,6 +1609,9 @@ void main() {
 		let { min: h, max: g } = i.priceRange;
 		t.candles && g - h !== 0 && this.drawCandles(t, o, s, p, m), n.disable(n.SCISSOR_TEST);
 	}
+	drawRecorded(e, t) {
+		t.commands.length !== 0 && this.drawer.draw(t.commands, this.canvas.width, this.canvas.height, (t, n) => this.drawRecordedRects(e, t, n));
+	}
 	drawRecordedRects(e, t, n) {
 		let r = this.gl, i = this.use(this.rects, e);
 		this.kit.float(i, "u_dpr", 1), this.kit.int(i, "u_union", 0), r.bindBuffer(r.ARRAY_BUFFER, this.rectBuffer), r.bufferData(r.ARRAY_BUFFER, t, r.STREAM_DRAW), this.bindRects(i, 0), r.drawArraysInstanced(r.TRIANGLES, 0, 6, n);
@@ -1539,81 +1636,81 @@ void main() {
 	};
 	syncSeries(e) {
 		let t = this.gl, n = this.uploads.sync(e.data), r = this.uploads.values;
-		t.bindBuffer(t.ARRAY_BUFFER, this.seriesBuffer), n.full || r.length !== this.gpuFloats ? (t.bufferData(t.ARRAY_BUFFER, r, t.DYNAMIC_DRAW), this.gpuFloats = r.length) : n.to > n.from && t.bufferSubData(t.ARRAY_BUFFER, n.from * K, r, n.from * 6, (n.to - n.from) * 6);
+		t.bindBuffer(t.ARRAY_BUFFER, this.seriesBuffer), n.full || r.length !== this.gpuFloats ? (t.bufferData(t.ARRAY_BUFFER, r, t.DYNAMIC_DRAW), this.gpuFloats = r.length) : n.to > n.from && t.bufferSubData(t.ARRAY_BUFFER, n.from * G, r, n.from * 6, (n.to - n.from) * 6);
 	}
 	buildColumns(e, t, r) {
 		let { viewport: i, data: a } = e, o = i.barWidth + i.barSpacing, s = -i.offset + i.chartRect.x + i.barWidth / 2, c = this.uploads.base, l = 0;
 		n(a, t, r, (e) => e * o + s, (e) => {
-			if ((l + 1) * q > this.columns.length) {
+			if ((l + 1) * K > this.columns.length) {
 				let e = new Float32Array(this.columns.length * 2);
 				e.set(this.columns), this.columns = e;
 			}
-			let t = l * q;
+			let t = l * K;
 			this.columns[t] = e.x, this.columns[t + 1] = e.high - c, this.columns[t + 2] = e.low - c, this.columns[t + 3] = e.volume, this.columns[t + 4] = +(e.close >= e.open), l++;
 		});
 		let u = this.gl;
-		return u.bindBuffer(u.ARRAY_BUFFER, this.columnBuffer), u.bufferData(u.ARRAY_BUFFER, this.columns.subarray(0, l * q), u.STREAM_DRAW), l;
+		return u.bindBuffer(u.ARRAY_BUFFER, this.columnBuffer), u.bufferData(u.ARRAY_BUFFER, this.columns.subarray(0, l * K), u.STREAM_DRAW), l;
 	}
 	drawBackground(e, t) {
-		let { viewport: n, theme: i } = e, a = t.grid ? r(n) : {
+		let { viewport: n, theme: r } = e, a = t.grid ? i(n) : {
 			horizontal: [],
 			vertical: []
 		}, o = a.horizontal.length + a.vertical.length, s = o + t.rects.length;
 		if (s === 0) return;
-		this.rectValues.length < s * Y && (this.rectValues = new Float32Array(s * Y * 2));
+		this.rectValues.length < s * J && (this.rectValues = new Float32Array(s * J * 2));
 		let c = this.rectValues, l = 0, u = (e, t, n, r, i, a, o) => {
 			c[l++] = e, c[l++] = t, c[l++] = n, c[l++] = r;
 			for (let e = 0; e < 4; e++) c[l++] = i[e] * a;
 			c[l++] = o ? o[0] : 0, c[l++] = o ? o[1] : 0;
-		}, d = g(h(i.grid)), { chartRect: f } = n;
+		}, d = _(g(r.grid)), { chartRect: f } = n;
 		for (let e of a.horizontal) u(f.x, e - .5, f.x + f.width, e + .5, d, 1);
 		for (let e of a.vertical) u(e - .5, f.y, e + .5, f.y + f.height, d, 1);
 		let p = "", m = d;
-		for (let e of t.rects) e.color !== p && (p = e.color, m = g(h(e.color))), u(e.x, e.y, e.x + e.width, e.y + e.height, m, e.alpha, e.dash);
-		let _ = this.gl, v = this.use(this.rects, e);
-		_.bindBuffer(_.ARRAY_BUFFER, this.rectBuffer), _.bufferData(_.ARRAY_BUFFER, c.subarray(0, l), _.STREAM_DRAW), o > 0 && (_.uniform1i(this.loc(v, "u_union"), 1), _.blendColor(0, 0, 0, d[3]), _.blendFuncSeparate(_.ONE, _.ONE_MINUS_SRC_ALPHA, _.CONSTANT_ALPHA, _.ONE_MINUS_SRC_ALPHA), this.bindRects(v, 0), _.drawArraysInstanced(_.TRIANGLES, 0, 6, o)), t.rects.length > 0 && (_.uniform1i(this.loc(v, "u_union"), 0), _.blendFunc(_.ONE, _.ONE_MINUS_SRC_ALPHA), this.bindRects(v, o), _.drawArraysInstanced(_.TRIANGLES, 0, 6, t.rects.length));
+		for (let e of t.rects) e.color !== p && (p = e.color, m = _(g(e.color))), u(e.x, e.y, e.x + e.width, e.y + e.height, m, e.alpha, e.dash);
+		let h = this.gl, v = this.use(this.rects, e);
+		h.bindBuffer(h.ARRAY_BUFFER, this.rectBuffer), h.bufferData(h.ARRAY_BUFFER, c.subarray(0, l), h.STREAM_DRAW), o > 0 && (h.uniform1i(this.loc(v, "u_union"), 1), h.blendColor(0, 0, 0, d[3]), h.blendFuncSeparate(h.ONE, h.ONE_MINUS_SRC_ALPHA, h.CONSTANT_ALPHA, h.ONE_MINUS_SRC_ALPHA), this.bindRects(v, 0), h.drawArraysInstanced(h.TRIANGLES, 0, 6, o)), t.rects.length > 0 && (h.uniform1i(this.loc(v, "u_union"), 0), h.blendFunc(h.ONE, h.ONE_MINUS_SRC_ALPHA), this.bindRects(v, o), h.drawArraysInstanced(h.TRIANGLES, 0, 6, t.rects.length));
 	}
 	drawCandles(e, t, n, r, i) {
-		let { theme: a, viewport: o, dpr: s } = e, c = g(h(a.candleUp)), l = g(h(a.candleDown));
+		let { theme: a, viewport: o, dpr: s } = e, c = _(g(a.candleUp)), l = _(g(a.candleDown));
 		if (r) {
 			let t = this.use(this.candleColumns, e);
 			this.vec4(t, "u_upBody", c), this.vec4(t, "u_downBody", l), this.bindColumns(t), this.gl.drawArraysInstanced(this.gl.TRIANGLES, 0, 6, i);
 			return;
 		}
 		let u = this.use(this.candleBars, e);
-		this.barUniforms(u, o, t, s), this.vec4(u, "u_upBody", c), this.vec4(u, "u_downBody", l), this.vec4(u, "u_upWick", g(h(a.candleUpWick))), this.vec4(u, "u_downWick", g(h(a.candleDownWick))), this.bindBars(u, t), this.gl.drawArraysInstanced(this.gl.TRIANGLES, 0, 12, n - t + 1);
+		this.barUniforms(u, o, t, s), this.vec4(u, "u_upBody", c), this.vec4(u, "u_downBody", l), this.vec4(u, "u_upWick", _(g(a.candleUpWick))), this.vec4(u, "u_downWick", _(g(a.candleDownWick))), this.bindBars(u, t), this.gl.drawArraysInstanced(this.gl.TRIANGLES, 0, 12, n - t + 1);
 	}
-	drawVolume(e, t, n, r, a) {
+	drawVolume(e, t, n, r, i) {
 		let { data: o, viewport: s, theme: c, dpr: l } = e, u = 0;
 		for (let e = t; e <= n; e++) o[e].volume > u && (u = o[e].volume);
 		if (u === 0) return;
-		let { chartRect: d } = s, f = i(c), p = this.use(r ? this.volumeColumns : this.volumeBars, e);
-		if (this.float(p, "u_volBottom", d.y + d.height), this.float(p, "u_volScale", d.height * (e.volume?.heightRatio ?? .15) / u), this.vec4(p, "u_volUp", g(h(f.up))), this.vec4(p, "u_volDown", g(h(f.down))), r) {
-			this.bindColumns(p), this.gl.drawArraysInstanced(this.gl.TRIANGLES, 0, 6, a);
+		let { chartRect: d } = s, f = a(c), p = this.use(r ? this.volumeColumns : this.volumeBars, e);
+		if (this.float(p, "u_volBottom", d.y + d.height), this.float(p, "u_volScale", d.height * (e.volume?.heightRatio ?? .15) / u), this.vec4(p, "u_volUp", _(g(f.up))), this.vec4(p, "u_volDown", _(g(f.down))), r) {
+			this.bindColumns(p), this.gl.drawArraysInstanced(this.gl.TRIANGLES, 0, 6, i);
 			return;
 		}
 		this.barUniforms(p, s, t, l), this.bindBars(p, t), this.gl.drawArraysInstanced(this.gl.TRIANGLES, 0, 6, n - t + 1);
 	}
-	barUniforms(e, n, r, i) {
-		let a = n.barWidth + n.barSpacing, o = -n.offset + n.chartRect.x + n.barWidth / 2, { body: s, wick: c } = t(n.barWidth, i);
-		this.float(e, "u_x0", r * a + o), this.float(e, "u_unit", a), this.float(e, "u_wick", c), this.float(e, "u_body", s);
+	barUniforms(e, t, n, i) {
+		let a = t.barWidth + t.barSpacing, o = -t.offset + t.chartRect.x + t.barWidth / 2, { body: s, wick: c } = r(t.barWidth, i);
+		this.float(e, "u_x0", n * a + o), this.float(e, "u_unit", a), this.float(e, "u_wick", c), this.float(e, "u_body", s);
 	}
 	use(e, t) {
 		let n = this.gl;
 		this.kit.use(e), n.uniform2f(this.loc(e, "u_canvas"), this.canvas.width, this.canvas.height), this.vec4(e, "u_clip", this.clip), this.float(e, "u_dpr", t.dpr);
-		let r = _(t.viewport, this.uploads.base);
+		let r = v(t.viewport, this.uploads.base);
 		return n.uniform1i(this.loc(e, "u_log"), r.log), n.uniform1i(this.loc(e, "u_invert"), r.invert), this.float(e, "u_yA", r.yA), this.float(e, "u_yB", r.yB), this.float(e, "u_logOffset", r.logOffset), this.float(e, "u_min", r.min), this.float(e, "u_logFloor", r.logFloor), this.float(e, "u_logK", r.logK), this.float(e, "u_top", r.top), this.float(e, "u_bottom", r.bottom), e;
 	}
 	bindBars(e, t) {
 		let n = this.gl;
-		n.bindBuffer(n.ARRAY_BUFFER, this.seriesBuffer), this.attrib(e, "a_ohlc", 4, K, t * K), this.attrib(e, "a_vd", 2, K, t * K + 16);
+		n.bindBuffer(n.ARRAY_BUFFER, this.seriesBuffer), this.attrib(e, "a_ohlc", 4, G, t * G), this.attrib(e, "a_vd", 2, G, t * G + 16);
 	}
 	bindRects(e, t) {
-		this.attrib(e, "a_rect", 4, X, t * X), this.attrib(e, "a_color", 4, X, t * X + 16), this.attrib(e, "a_dash", 2, X, t * X + 32);
+		this.attrib(e, "a_rect", 4, Y, t * Y), this.attrib(e, "a_color", 4, Y, t * Y + 16), this.attrib(e, "a_dash", 2, Y, t * Y + 32);
 	}
 	bindColumns(e) {
 		let t = this.gl;
-		t.bindBuffer(t.ARRAY_BUFFER, this.columnBuffer), this.attrib(e, "a_col", 4, J, 0), this.attrib(e, "a_up", 1, J, 16);
+		t.bindBuffer(t.ARRAY_BUFFER, this.columnBuffer), this.attrib(e, "a_col", 4, q, 0), this.attrib(e, "a_up", 1, q, 16);
 	}
 	attrib(e, t, n, r, i) {
 		this.kit.attrib(e, t, n, r, i);
@@ -1628,7 +1725,7 @@ void main() {
 		return this.kit.loc(e, t);
 	}
 };
-function Ce(e) {
+function Z(e) {
 	return typeof e == "object" && !!e && Array.isArray(e.commands);
 }
 function Q(e) {
@@ -1638,6 +1735,6 @@ function $(e) {
 	console.warn("TradeCanvas: WebGL renderer unavailable, drawing with Canvas 2D.", e);
 }
 //#endregion
-export { Se as WebGLSeriesRenderer };
+export { we as WebGLSeriesRenderer };
 
-//# sourceMappingURL=WebGLSeriesRenderer-DQOPCwno.js.map
+//# sourceMappingURL=WebGLSeriesRenderer-DVJBHdfm.js.map