blazeplot 0.1.5 → 0.1.7

package/dist/index.js

@@ -122,7 +122,7 @@ var t = 16, n = class {
 	_dirty = !1;
 	_visible = !0;
 	constructor(e, t, r) {
-		this.dataset = e, this.config = t, this.pyramid = t.downsample === "none" ? null : new n(), this.style = r, this.pyramid && e.length > 0 && this.pyramid.build(e);
+		this.dataset = e, this.config = t, this.pyramid = t.mode === "line" && t.downsample !== "none" ? new n() : null, this.style = r, this.pyramid && e.length > 0 && this.pyramid.build(e);
 	}
 	get hasLOD() {
 		return this.pyramid !== null;
@@ -168,28 +168,58 @@ var t = 16, n = class {
 		return Math.max(0, n - t);
 	}
 	copyRawVisible(e, t, n) {
-		if (n <= 0 || t.length < n * 2) return 0;
-		let r = this.dataset.lowerBoundX(e.xMin), i = this.dataset.upperBoundX(e.xMax), a = i - r;
-		if (a <= 0) return 0;
-		let o = Math.max(1, Math.ceil(a / n)), s = 0;
-		for (let e = r; e < i && s < n; e += o) t[s * 2] = this.dataset.getX(e), t[s * 2 + 1] = this.dataset.getY(e), s++;
-		return s;
+		return this.copyVisibleSamples(e, t, n, "points", 0);
+	}
+	copyAreaVisible(e, t, n, r = 0) {
+		return this.copyVisibleSamples(e, t, n, "area", r) * 2;
 	}
 	copyMinMaxVisible(e, t, n) {
-		if (!this.pyramid || n <= 0 || t.length < n * 4) return 0;
-		let r = this.dataset.lowerBoundX(e.xMin), i = this.dataset.upperBoundX(e.xMax), a = i - r;
-		if (a <= 0) return 0;
-		let o = Math.min(n, a), s = 0;
-		for (let e = 0; e < o; e++) {
-			let n = r + Math.floor(e * a / o), c = r + Math.max(Math.floor((e + 1) * a / o), Math.floor(e * a / o) + 1), l = Math.min(i, c), u = Infinity, d = -Infinity;
+		return this.copyMinMaxSegments(e, t, n, "line-list") * 2;
+	}
+	copyMinMaxInstanced(e, t, n) {
+		return this.copyMinMaxSegments(e, t, n, "instanced");
+	}
+	copyVisibleSamples(e, t, n, r, i) {
+		let a = r === "points" ? 2 : 4;
+		if (n <= 0 || t.length < n * a) return 0;
+		let o = this.dataset.lowerBoundX(e.xMin), s = this.dataset.upperBoundX(e.xMax), c = s - o;
+		if (c <= 0) return 0;
+		let l = Math.max(1, Math.ceil(c / n)), u = 0;
+		for (let e = o; e < s && u < n; e += l) {
+			let n = this.dataset.getX(e), a = this.dataset.getY(e);
+			if (r === "points") {
+				let e = u * 2;
+				t[e] = n, t[e + 1] = a;
+			} else {
+				let e = u * 4;
+				t[e] = n, t[e + 1] = i, t[e + 2] = n, t[e + 3] = a;
+			}
+			u++;
+		}
+		return u;
+	}
+	copyMinMaxSegments(e, t, n, r) {
+		let i = r === "line-list" ? 4 : 3;
+		if (!this.pyramid || n <= 0 || t.length < n * i) return 0;
+		let a = this.dataset.lowerBoundX(e.xMin), o = this.dataset.upperBoundX(e.xMax), s = o - a;
+		if (s <= 0) return 0;
+		let c = Math.min(n, s);
+		for (let e = 0; e < c; e++) {
+			let n = a + Math.floor(e * s / c), i = a + Math.max(Math.floor((e + 1) * s / c), Math.floor(e * s / c) + 1), l = Math.min(o, i), u = Infinity, d = -Infinity;
 			for (let e = n; e < l; e++) {
 				let t = this.dataset.getY(e);
 				t < u && (u = t), t > d && (d = t);
 			}
 			let f = this.dataset.getX(n + (l - n >> 1));
-			t[s * 2] = f, t[s * 2 + 1] = u, s++, t[s * 2] = f, t[s * 2 + 1] = d, s++;
+			if (r === "line-list") {
+				let n = e * 4;
+				t[n] = f, t[n + 1] = u, t[n + 2] = f, t[n + 3] = d;
+			} else {
+				let n = e * 3;
+				t[n] = f, t[n + 1] = u, t[n + 2] = d;
+			}
 		}
-		return s;
+		return c;
 	}
 }, i = class {
 	capacity;
@@ -260,16 +290,70 @@ var t = 16, n = class {
 		frag: "precision mediump float;\n\nuniform vec4 uColor;\n\nvoid main() {\n  gl_FragColor = uColor;\n}\n"
 	},
 	segment: {
-		vert: "attribute float aX;\nattribute float aMinY;\nattribute float aMaxY;\n\nuniform vec2 uScale;\nuniform vec2 uOffset;\n\nvoid main() {\n  float y = (gl_VertexID == 0) ? aMinY : aMaxY;\n  vec2 position = vec2(aX, y);\n  vec2 clipSpace = position * uScale + uOffset;\n  gl_Position = vec4(clipSpace, 0.0, 1.0);\n}\n",
+		vert: "attribute float aX;\nattribute float aMinY;\nattribute float aMaxY;\nattribute float aSelect;\n\nuniform vec2 uScale;\nuniform vec2 uOffset;\n\nvoid main() {\n  float y = (aSelect < 0.5) ? aMinY : aMaxY;\n  vec2 position = vec2(aX, y);\n  vec2 clipSpace = position * uScale + uOffset;\n  gl_Position = vec4(clipSpace, 0.0, 1.0);\n}\n",
+		frag: "precision mediump float;\n\nuniform vec4 uColor;\n\nvoid main() {\n  gl_FragColor = uColor;\n}\n"
+	},
+	point: {
+		vert: "attribute vec2 aPosition;\nattribute vec2 aCorner;\n\nuniform vec2 uScale;\nuniform vec2 uOffset;\nuniform vec2 uCanvasSize;\nuniform float uPointSize;\n\nvoid main() {\n  vec2 centerClip = aPosition * uScale + uOffset;\n  vec2 pointSizeClip = vec2(2.0 / uCanvasSize.x, 2.0 / uCanvasSize.y) * uPointSize * 0.5;\n  vec2 clipSpace = centerClip + aCorner * pointSizeClip;\n  gl_Position = vec4(clipSpace, 0.0, 1.0);\n}\n",
+		frag: "precision mediump float;\n\nuniform vec4 uColor;\n\nvoid main() {\n  gl_FragColor = uColor;\n}\n"
+	},
+	bar: {
+		vert: "attribute vec2 aPosition;\nattribute vec2 aCorner;\n\nuniform vec2 uScale;\nuniform vec2 uOffset;\nuniform float uBarWidth;\nuniform float uBaseline;\n\nvoid main() {\n  float x = aPosition.x + aCorner.x * uBarWidth;\n  float y = mix(uBaseline, aPosition.y, aCorner.y);\n  vec2 clipSpace = vec2(x, y) * uScale + uOffset;\n  gl_Position = vec4(clipSpace, 0.0, 1.0);\n}\n",
 		frag: "precision mediump float;\n\nuniform vec4 uColor;\n\nvoid main() {\n  gl_FragColor = uColor;\n}\n"
 	}
-}, o = class {
+}, o = 3, s = 2, c = 4, l = 4, u = .8, d = 0, f = class {
 	backend;
 	lineProgram;
+	segmentProgram;
+	pointProgram;
+	barProgram;
+	segmentSelectBuffer;
+	pointCornerBuffer;
+	barCornerBuffer;
 	scaleUniform = new Float32Array(2);
 	offsetUniform = new Float32Array(2);
+	canvasSizeUniform = new Float32Array(2);
 	constructor(e) {
-		this.backend = e, this.lineProgram = this.backend.createProgram(a.line.vert, a.line.frag);
+		this.backend = e, this.lineProgram = this.backend.createProgram(a.line.vert, a.line.frag), this.segmentProgram = this.backend.createProgram(a.segment.vert, a.segment.frag), this.pointProgram = this.backend.createProgram(a.point.vert, a.point.frag), this.barProgram = this.backend.createProgram(a.bar.vert, a.bar.frag), this.segmentSelectBuffer = this.backend.createBuffer({
+			usage: "static",
+			type: "float",
+			length: 2
+		}), this.backend.updateBuffer(this.segmentSelectBuffer, new Float32Array([0, 1])), this.pointCornerBuffer = this.backend.createBuffer({
+			usage: "static",
+			type: "float",
+			length: 8
+		}), this.backend.updateBuffer(this.pointCornerBuffer, new Float32Array([
+			-1,
+			-1,
+			1,
+			-1,
+			-1,
+			1,
+			1,
+			1
+		])), this.barCornerBuffer = this.backend.createBuffer({
+			usage: "static",
+			type: "float",
+			length: 8
+		}), this.backend.updateBuffer(this.barCornerBuffer, new Float32Array([
+			-.5,
+			0,
+			.5,
+			0,
+			-.5,
+			1,
+			.5,
+			1
+		]));
+	}
+	get supportsInstancedSegments() {
+		return this.backend.capabilities.instancing;
+	}
+	get supportsInstancedPoints() {
+		return this.backend.capabilities.instancing;
+	}
+	get supportsInstancedBars() {
+		return this.backend.capabilities.instancing;
 	}
 	clear(e, t, n, r) {
 		this.backend.clear(e, t, n, r);
@@ -293,8 +377,131 @@ var t = 16, n = class {
 	drawLineStrip(e, t, n, r) {
 		this.drawLinePrimitive("line_strip", e, t, n, r);
 	}
+	drawMinMaxSegments(e, t, n, r) {
+		this.drawLines(e, t, n, r);
+	}
+	drawMinMaxSegmentsInstanced(e, t, n, r) {
+		this.writeCameraUniforms(r);
+		let i = o * c, a = {
+			buffer: e,
+			divisor: 1,
+			stride: i,
+			offset: 0
+		}, s = {
+			buffer: e,
+			divisor: 1,
+			stride: i,
+			offset: c
+		}, l = {
+			buffer: e,
+			divisor: 1,
+			stride: i,
+			offset: c * 2
+		}, u = {
+			buffer: this.segmentSelectBuffer,
+			divisor: 0,
+			stride: c,
+			offset: 0
+		};
+		this.backend.draw({
+			program: this.segmentProgram,
+			primitive: "lines",
+			count: 2,
+			instances: t,
+			attributes: {
+				aMaxY: l,
+				aMinY: s,
+				aSelect: u,
+				aX: a
+			},
+			uniforms: {
+				uScale: this.scaleUniform,
+				uOffset: this.offsetUniform,
+				uColor: n.color
+			}
+		});
+	}
+	drawPointsInstanced(e, t, n, r, i, a) {
+		this.writeCameraUniforms(r), this.canvasSizeUniform[0] = Math.max(1, i), this.canvasSizeUniform[1] = Math.max(1, a);
+		let o = {
+			buffer: e,
+			divisor: 1,
+			stride: s * c,
+			offset: 0,
+			size: 2
+		}, u = {
+			buffer: this.pointCornerBuffer,
+			divisor: 0,
+			stride: s * c,
+			offset: 0,
+			size: 2
+		};
+		this.backend.draw({
+			program: this.pointProgram,
+			primitive: "triangle_strip",
+			count: 4,
+			instances: t,
+			attributes: {
+				aCorner: u,
+				aPosition: o
+			},
+			uniforms: {
+				uScale: this.scaleUniform,
+				uOffset: this.offsetUniform,
+				uCanvasSize: this.canvasSizeUniform,
+				uPointSize: n.pointSize ?? l,
+				uColor: n.color
+			}
+		});
+	}
+	drawAreaStrip(e, t, n, r) {
+		this.writeCameraUniforms(r), this.backend.draw({
+			program: this.lineProgram,
+			primitive: "triangle_strip",
+			count: t,
+			attributes: { position: e },
+			uniforms: {
+				uScale: this.scaleUniform,
+				uOffset: this.offsetUniform,
+				uColor: n.fillColor ?? n.color
+			}
+		});
+	}
+	drawBarsInstanced(e, t, n, r) {
+		this.writeCameraUniforms(r);
+		let i = {
+			buffer: e,
+			divisor: 1,
+			stride: s * c,
+			offset: 0,
+			size: 2
+		}, a = {
+			buffer: this.barCornerBuffer,
+			divisor: 0,
+			stride: s * c,
+			offset: 0,
+			size: 2
+		};
+		this.backend.draw({
+			program: this.barProgram,
+			primitive: "triangle_strip",
+			count: 4,
+			instances: t,
+			attributes: {
+				aCorner: a,
+				aPosition: i
+			},
+			uniforms: {
+				uScale: this.scaleUniform,
+				uOffset: this.offsetUniform,
+				uBarWidth: n.barWidth ?? u,
+				uBaseline: n.baseline ?? d,
+				uColor: n.color
+			}
+		});
+	}
 	drawLinePrimitive(e, t, n, r, i) {
-		this.scaleUniform[0] = i.xScale, this.scaleUniform[1] = i.yScale, this.offsetUniform[0] = i.xOffset, this.offsetUniform[1] = i.yOffset, this.backend.draw({
+		this.writeCameraUniforms(i), this.backend.draw({
 			program: this.lineProgram,
 			primitive: e,
 			count: n,
@@ -306,19 +513,19 @@ var t = 16, n = class {
 			}
 		});
 	}
-	drawMinMaxSegments(e, t, n, r) {
-		this.drawLines(e, t, n, r);
+	writeCameraUniforms(e) {
+		this.scaleUniform[0] = e.xScale, this.scaleUniform[1] = e.yScale, this.offsetUniform[0] = e.xOffset, this.offsetUniform[1] = e.yOffset;
 	}
 	dispose() {
 		this.backend.destroy();
 	}
-}, s = [
+}, p = [
 	1024,
 	4096,
 	16384,
 	32768,
 	131072
-], c = class {
+], m = class {
 	regl;
 	pool = [];
 	preAllocated = !1;
@@ -331,7 +538,7 @@ var t = 16, n = class {
 	preAllocate() {
 		if (!this.preAllocated) {
 			this.preAllocated = !0;
-			for (let e of s) this.pool.push(this.createEntry(e, "stream"));
+			for (let e of p) this.pool.push(this.createEntry(e, "stream"));
 		}
 	}
 	acquire(e, t = "stream") {
@@ -371,23 +578,24 @@ var t = 16, n = class {
 		return this.pool.find((t) => !t.inUse && t.floatCapacity >= e);
 	}
 	roundUp(e) {
-		for (let t of s) if (t >= e) return t;
-		let t = s[s.length - 1], n = 1 << 32 - Math.clz32(e - 1);
+		for (let t of p) if (t >= e) return t;
+		let t = p[p.length - 1], n = 1 << 32 - Math.clz32(e - 1);
 		return Math.max(t * 2, n);
 	}
 };
 //#endregion
 //#region src/render/ReglBackend.ts
-function l(e) {
+function h(e) {
 	return e;
 }
-var u = class {
+var g = class {
 	gl;
 	regl;
 	resources;
 	nextProgramId = 1;
 	commandCache = /* @__PURE__ */ new Map();
 	scissorBox = null;
+	capabilities;
 	constructor(t) {
 		let n = t.getContext("webgl2", {
 			alpha: !0,
@@ -400,10 +608,10 @@ var u = class {
 		});
 		if (!n) throw Error("BlazePlot requires WebGL2, but this browser/context does not support it.");
 		this.gl = n, this.regl = e({
-			gl: l(this.gl),
+			gl: h(this.gl),
 			extensions: [],
-			optionalExtensions: ["ext_disjoint_timer_query_webgl2"]
-		}), this.resources = new c(this.regl), this.resources.preAllocate();
+			optionalExtensions: ["angle_instanced_arrays", "ext_disjoint_timer_query_webgl2"]
+		}), this.capabilities = { instancing: this.regl.hasExtension("angle_instanced_arrays") }, this.resources = new m(this.regl), this.resources.preAllocate();
 	}
 	createBuffer(e) {
 		let { buffer: t } = this.resources.acquire(e.length, e.usage);
@@ -436,7 +644,7 @@ var u = class {
 		].join("|"), a = this.commandCache.get(i);
 		a || (a = this.createDrawCommand(t, e.primitive, n, r, e.instances !== void 0), this.commandCache.set(i, a));
 		let o = {};
-		for (let t of n) o[t] = this.asReglBuffer(e.attributes[t]).buffer;
+		for (let t of n) o[t] = this.resolveAttribute(e.attributes[t]);
 		let s = {
 			count: e.count,
 			instances: e.instances ?? 0,
@@ -497,6 +705,15 @@ var u = class {
 			}
 		});
 	}
+	resolveAttribute(e) {
+		return "divisor" in e ? {
+			buffer: this.asReglBuffer(e.buffer).buffer,
+			divisor: e.divisor,
+			stride: e.stride,
+			offset: e.offset,
+			size: e.size
+		} : this.asReglBuffer(e).buffer;
+	}
 	asReglBuffer(e) {
 		return e;
 	}
@@ -513,7 +730,7 @@ var u = class {
 			default: return e;
 		}
 	}
-}, d = class {
+}, _ = class {
 	canvas;
 	camera;
 	policy;
@@ -567,7 +784,7 @@ var u = class {
 	dispose() {
 		this.canvas.removeEventListener("pointerdown", this.onPointerDown), this.canvas.removeEventListener("pointermove", this.onPointerMove), this.canvas.removeEventListener("pointerup", this.onPointerUp), this.canvas.removeEventListener("pointercancel", this.onPointerUp), this.canvas.removeEventListener("wheel", this.onWheel);
 	}
-}, f = class e {
+}, v = class e {
 	_xMin = 0;
 	_xMax = 1;
 	_yMin = 0;
@@ -652,7 +869,7 @@ var u = class {
 	static assertFinite(e, t) {
 		if (!Number.isFinite(t)) throw RangeError(`Camera2D ${e} must be finite.`);
 	}
-}, p = class {
+}, y = class {
 	camera;
 	constructor(e) {
 		this.camera = e;
@@ -684,53 +901,77 @@ var u = class {
 		let n = Math.max(0, -Math.floor(Math.log10(t)) + 2), r = Number(e.toFixed(n));
 		return Object.is(r, -0) ? 0 : r;
 	}
-}, m = class {
-	canvas;
+}, b = class {
+	layout;
 	config;
 	options;
-	container;
 	xPool = [];
 	yPool = [];
 	xTicks = [];
 	yTicks = [];
 	constructor(e, t, n = {}) {
-		this.canvas = e, this.config = t, this.options = n, this.container = document.createElement("div"), this.container.style.position = "absolute", this.container.style.pointerEvents = "none", this.container.style.overflow = "hidden";
-		let r = e.parentElement;
-		r && getComputedStyle(r).position === "static" && (r.style.position = "relative"), this.syncPosition(), r?.appendChild(this.container);
+		this.layout = e, this.config = t, this.options = n;
 	}
-	update(e, t, n, r) {
-		this.syncPosition();
-		let i = this.canvas.clientWidth, a = this.canvas.clientHeight, o = Math.max(1, i - n), s = Math.max(1, a - r);
-		this.config.x.visible ? t.getXTickValues(o, 12, this.xTicks) : this.xTicks.length = 0, this.config.y.visible ? t.getYTickValues(s, 8, this.yTicks) : this.yTicks.length = 0, this.updateAxis(this.xPool, this.xTicks, "x", e, i, a, t, n, r), this.updateAxis(this.yPool, this.yTicks, "y", e, i, a, t, n, r);
+	update(e, t) {
+		let n = Math.max(1, this.layout.plot.clientWidth), r = Math.max(1, this.layout.plot.clientHeight);
+		this.config.x.visible ? t.getXTickValues(n, 12, this.xTicks) : this.xTicks.length = 0, this.config.y.visible ? t.getYTickValues(r, 8, this.yTicks) : this.yTicks.length = 0, this.updateAxis(this.xPool, this.xTicks, "x", e, n, r, t), this.updateAxis(this.yPool, this.yTicks, "y", e, n, r, t);
 	}
 	dispose() {
-		this.container.remove();
-	}
-	syncPosition() {
-		let e = this.canvas.parentElement;
-		if (!e) return;
-		let t = this.canvas.getBoundingClientRect(), n = e.getBoundingClientRect();
-		this.container.style.top = `${Math.round(t.top - n.top)}px`, this.container.style.left = `${Math.round(t.left - n.left)}px`, this.container.style.width = `${this.canvas.clientWidth}px`, this.container.style.height = `${this.canvas.clientHeight}px`;
+		for (let e of this.xPool) e.remove();
+		for (let e of this.yPool) e.remove();
+		this.xPool = [], this.yPool = [];
 	}
-	toCssScreen(e, t, n, r, i, a) {
-		let o = Math.max(1, n - i), s = Math.max(1, r - a);
-		return [(e + 1) * .5 * o + i, (1 - t) * .5 * s];
+	parentForAxis(e) {
+		return e === "x" ? this.config.x.position === "outside" ? this.layout.xAxis : this.layout.plot : this.config.y.position === "outside" ? this.layout.yAxis : this.layout.plot;
 	}
-	updateAxis(e, t, n, r, i, a, o, s, c) {
+	updateAxis(e, t, n, r, i, a, o) {
+		let s = this.parentForAxis(n);
 		for (; e.length < t.length;) {
 			let t = document.createElement("div");
-			t.style.position = "absolute", t.style.pointerEvents = "none", t.style.whiteSpace = "nowrap", t.style.font = this.options.font ?? "11px ui-monospace, monospace, sans-serif", t.style.color = this.options.color ?? "#bfd6ff", t.style.userSelect = "none", this.container.appendChild(t), e.push(t);
+			t.style.position = "absolute", t.style.pointerEvents = "none", t.style.whiteSpace = "nowrap", t.style.font = this.options.font ?? "11px ui-monospace, monospace, sans-serif", t.style.color = this.options.color ?? "#bfd6ff", t.style.userSelect = "none", s.appendChild(t), e.push(t);
 		}
+		for (let t of e) t.parentElement !== s && s.appendChild(t);
 		for (let n = t.length; n < e.length; n++) e[n].style.display = "none";
-		for (let l = 0; l < t.length; l++) {
-			let u = e[l], d = t[l], f = o.formatValue(d);
-			u.textContent !== f && (u.textContent = f), u.style.display = "block";
-			let [p, m] = n === "x" ? r.toClip(d, r.yMin) : r.toClip(r.xMin, d), [h, g] = this.toCssScreen(p, m, i, a, s, c);
-			n === "x" ? (u.style.left = `${h}px`, u.style.transform = "translateX(-50%)", this.config.x.position === "outside" ? (u.style.top = `${g + 4}px`, u.style.bottom = "auto") : (u.style.top = "auto", u.style.bottom = `${a - g + 4}px`)) : (u.style.top = `${g}px`, u.style.transform = "translateY(-50%)", this.config.y.position === "outside" ? (u.style.left = "auto", u.style.right = `${i - h + 4}px`) : (u.style.left = `${h + 4}px`, u.style.right = "auto"));
+		for (let s = 0; s < t.length; s++) {
+			let c = e[s], l = t[s], u = o.formatValue(l);
+			if (c.textContent !== u && (c.textContent = u), c.style.display = "block", n === "x") {
+				let [e] = r.toClip(l, r.yMin), t = (e + 1) * .5 * i;
+				c.style.left = `${t}px`, c.style.right = "auto", c.style.transform = "translateX(-50%)", this.config.x.position === "outside" ? (c.style.top = "4px", c.style.bottom = "auto") : (c.style.top = "auto", c.style.bottom = "4px");
+			} else {
+				let [, e] = r.toClip(r.xMin, l), t = (1 - e) * .5 * a;
+				c.style.top = `${t}px`, c.style.bottom = "auto", c.style.transform = "translateY(-50%)", this.config.y.position === "outside" ? (c.style.left = "auto", c.style.right = "4px") : (c.style.left = "4px", c.style.right = "auto");
+			}
 		}
 	}
-}, h = 16384, g = 64, _ = 52, v = 28;
-function y(e) {
+}, x = class {
+	root;
+	plot;
+	canvas;
+	xAxis;
+	yAxis;
+	corner;
+	externalCanvas;
+	originalCanvasCssText;
+	originalCanvasParent;
+	constructor(e, t) {
+		let n = e instanceof HTMLCanvasElement ? e : null;
+		this.externalCanvas = n !== null, this.originalCanvasCssText = n?.style.cssText ?? "", this.originalCanvasParent = n?.parentElement ?? null, this.root = document.createElement("div"), this.plot = document.createElement("div"), this.canvas = n ?? document.createElement("canvas"), this.xAxis = document.createElement("div"), this.yAxis = document.createElement("div"), this.corner = document.createElement("div"), this.root.className = "blazeplot-root", this.plot.className = "blazeplot-plot", this.canvas.classList.add("blazeplot-canvas"), this.xAxis.className = "blazeplot-axis blazeplot-axis-x", this.yAxis.className = "blazeplot-axis blazeplot-axis-y", this.corner.className = "blazeplot-axis-corner", this.applyBaseStyles(), this.mount(e), this.update(t);
+	}
+	update(e) {
+		let t = e.y.visible && e.y.position === "outside", n = e.x.visible && e.x.position === "outside";
+		this.root.style.gridTemplateColumns = `${t ? 52 : 0}px minmax(0, 1fr)`, this.root.style.gridTemplateRows = `minmax(0, 1fr) ${n ? 28 : 0}px`, this.yAxis.style.display = t ? "block" : "none", this.xAxis.style.display = n ? "block" : "none", this.corner.style.display = n && t ? "block" : "none";
+	}
+	dispose() {
+		this.externalCanvas && this.originalCanvasParent && (this.canvas.style.cssText = this.originalCanvasCssText, this.originalCanvasParent.insertBefore(this.canvas, this.root)), this.root.remove();
+	}
+	mount(e) {
+		this.externalCanvas ? this.originalCanvasParent?.insertBefore(this.root, e) : e.appendChild(this.root), this.root.appendChild(this.yAxis), this.root.appendChild(this.plot), this.root.appendChild(this.corner), this.root.appendChild(this.xAxis), this.plot.appendChild(this.canvas);
+	}
+	applyBaseStyles() {
+		this.root.style.display = "grid", this.root.style.width = "100%", this.root.style.height = "100%", this.root.style.minWidth = "0", this.root.style.minHeight = "0", this.root.style.overflow = "hidden", this.plot.style.position = "relative", this.plot.style.gridColumn = "2", this.plot.style.gridRow = "1", this.plot.style.minWidth = "0", this.plot.style.minHeight = "0", this.plot.style.overflow = "hidden", this.canvas.style.position = "absolute", this.canvas.style.inset = "0", this.canvas.style.display = "block", this.canvas.style.width = "100%", this.canvas.style.height = "100%", this.canvas.style.touchAction = "none", this.yAxis.style.position = "relative", this.yAxis.style.gridColumn = "1", this.yAxis.style.gridRow = "1", this.yAxis.style.minWidth = "0", this.yAxis.style.minHeight = "0", this.yAxis.style.overflow = "hidden", this.yAxis.style.pointerEvents = "none", this.xAxis.style.position = "relative", this.xAxis.style.gridColumn = "2", this.xAxis.style.gridRow = "2", this.xAxis.style.minWidth = "0", this.xAxis.style.minHeight = "0", this.xAxis.style.overflow = "hidden", this.xAxis.style.pointerEvents = "none", this.corner.style.gridColumn = "1", this.corner.style.gridRow = "2", this.corner.style.minWidth = "0", this.corner.style.minHeight = "0", this.corner.style.pointerEvents = "none";
+	}
+}, S = 16384, C = S >> 1, w = S >> 1, T = 3, E = 64;
+function D(e) {
 	return e === !1 ? {
 		visible: !1,
 		position: "inside"
@@ -742,8 +983,7 @@ function y(e) {
 		position: e.position ?? "inside"
 	};
 }
-var b = class {
-	canvas;
+var O = class {
 	options;
 	series = [];
 	camera;
@@ -752,6 +992,8 @@ var b = class {
 	input;
 	rawLineBuffer;
 	rawLineData;
+	minMaxInstanceBuffer;
+	minMaxInstanceData;
 	gridBuffer;
 	gridData;
 	gridStyle;
@@ -759,6 +1001,7 @@ var b = class {
 	yTicks = [];
 	axisOverlay = null;
 	normalizedAxes;
+	layout;
 	stats = {
 		fps: 0,
 		frameMs: 0,
@@ -771,15 +1014,7 @@ var b = class {
 	lastFrameAt = 0;
 	_rafId = 0;
 	constructor(e, t = {}) {
-		this.canvas = e, this.options = t, this.applyCanvasSize(), this.camera = new f(), this.axis = new p(this.camera), this.renderer = new o(new u(e)), this.input = new d(e, this.camera, t.viewportPolicy), this.rawLineData = new Float32Array(h * 2), this.rawLineBuffer = this.renderer.createFloatBuffer(this.rawLineData.length), this.gridData = new Float32Array(g * 2), this.gridBuffer = this.renderer.createFloatBuffer(this.gridData.length), this.gridStyle = {
-			color: t.gridStyle?.color ?? [
-				.22,
-				.3,
-				.44,
-				.45
-			],
-			lineWidth: t.gridStyle?.lineWidth ?? 1
-		};
+		this.options = t;
 		let n = t.axes;
 		n === !1 ? this.normalizedAxes = {
 			x: {
@@ -800,21 +1035,41 @@ var b = class {
 				position: "inside"
 			}
 		} : this.normalizedAxes = {
-			x: y(n.x),
-			y: y(n.y)
-		}, (this.normalizedAxes.x.visible || this.normalizedAxes.y.visible) && (this.axisOverlay = new m(e, this.normalizedAxes)), typeof ResizeObserver < "u" && (this.resizeObserver = new ResizeObserver(() => this.resize()), this.resizeObserver.observe(this.canvas));
-	}
-	addSeries(e, t) {
-		let n = new r(e.dataset ?? new i(e.capacity), e, {
-			color: t?.color ?? [
+			x: D(n.x),
+			y: D(n.y)
+		}, this.layout = new x(e, this.normalizedAxes), this.applyCanvasSize(), this.camera = new v(), this.axis = new y(this.camera), this.renderer = new f(new g(this.layout.canvas)), this.input = new _(this.layout.canvas, this.camera, t.viewportPolicy), this.rawLineData = new Float32Array(S * 2), this.rawLineBuffer = this.renderer.createFloatBuffer(this.rawLineData.length), this.minMaxInstanceData = new Float32Array(w * T), this.minMaxInstanceBuffer = this.renderer.createFloatBuffer(this.minMaxInstanceData.length), this.gridData = new Float32Array(E * 2), this.gridBuffer = this.renderer.createFloatBuffer(this.gridData.length), this.gridStyle = {
+			color: t.gridStyle?.color ?? [
+				.22,
 				.3,
-				.6,
-				1,
-				1
+				.44,
+				.45
 			],
-			lineWidth: t?.lineWidth ?? 1
+			lineWidth: t.gridStyle?.lineWidth ?? 1
+		}, (this.normalizedAxes.x.visible || this.normalizedAxes.y.visible) && (this.axisOverlay = new b(this.layout, this.normalizedAxes)), typeof ResizeObserver < "u" && (this.resizeObserver = new ResizeObserver(() => this.resize()), this.resizeObserver.observe(this.layout.plot));
+	}
+	get canvas() {
+		return this.layout.canvas;
+	}
+	addSeries(e, t) {
+		let n = e.dataset ?? new i(e.capacity), a = t?.color ?? [
+			.3,
+			.6,
+			1,
+			1
+		], o = new r(n, e, {
+			color: a,
+			lineWidth: t?.lineWidth ?? 1,
+			pointSize: t?.pointSize ?? 4,
+			barWidth: t?.barWidth ?? .8,
+			baseline: t?.baseline ?? 0,
+			fillColor: t?.fillColor ?? [
+				a[0],
+				a[1],
+				a[2],
+				a[3] * .25
+			]
 		});
-		return this.series.push(n), n;
+		return this.series.push(o), o;
 	}
 	removeSeries(e) {
 		let t = this.series.indexOf(e);
@@ -845,54 +1100,92 @@ var b = class {
 	stop() {
 		cancelAnimationFrame(this._rafId);
 	}
-	getMargins() {
-		return {
-			left: this.normalizedAxes.y.visible && this.normalizedAxes.y.position === "outside" ? _ : 0,
-			bottom: this.normalizedAxes.x.visible && this.normalizedAxes.x.position === "outside" ? v : 0
-		};
-	}
 	render() {
 		let e = performance.now();
-		this.lastFrameAt > 0 && (this.stats.fps = 1e3 / (e - this.lastFrameAt)), this.lastFrameAt = e, this.stats.pointsRendered = 0, this.stats.drawCalls = 0, this.stats.uploadBytes = 0, this.stats.renderMode = "none";
-		let t = this.getMargins(), n = this.canvas.width / Math.max(1, this.canvas.clientWidth), r = Math.floor(t.left * n), i = Math.floor(t.bottom * n);
-		this.options.viewportPolicy?.beforeRender?.(this.camera), this.renderer.viewport(0, 0, this.canvas.width, this.canvas.height), this.renderer.clear(.08, .1, .16, 1), this.renderer.viewport(r, i, this.canvas.width - r, this.canvas.height - i);
-		let a = this.camera.viewport;
+		this.lastFrameAt > 0 && (this.stats.fps = 1e3 / (e - this.lastFrameAt)), this.lastFrameAt = e, this.stats.pointsRendered = 0, this.stats.drawCalls = 0, this.stats.uploadBytes = 0, this.stats.renderMode = "none", this.options.viewportPolicy?.beforeRender?.(this.camera), this.renderer.viewport(0, 0, this.canvas.width, this.canvas.height), this.renderer.clear(.08, .1, .16, 1);
+		let t = this.camera.viewport;
 		if (this.options.grid !== !1) {
-			let e = this.writeGridVertices(a, t);
+			let e = this.writeGridVertices(t);
 			e > 0 && (this.renderer.updateFloatBuffer(this.gridBuffer, this.gridData), this.renderer.drawLines(this.gridBuffer, e, this.gridStyle, this.camera), this.stats.drawCalls++, this.stats.uploadBytes += this.gridData.byteLength);
 		}
 		for (let e of this.series) {
 			if (!e.visible) continue;
-			let t = e.visibleSampleCount(a), n = e.hasLOD && t > h, r = n ? e.copyMinMaxVisible(a, this.rawLineData, Math.min(this.canvas.width, h >> 1)) : e.copyRawVisible(a, this.rawLineData, h);
-			r < 2 || (this.renderer.updateFloatBuffer(this.rawLineBuffer, this.rawLineData), n ? (this.renderer.drawMinMaxSegments(this.rawLineBuffer, r, e.style, this.camera), this.recordRenderMode("minmax")) : (this.renderer.drawLineStrip(this.rawLineBuffer, r, e.style, this.camera), this.recordRenderMode("raw")), this.stats.pointsRendered += r, this.stats.drawCalls++, this.stats.uploadBytes += this.rawLineData.byteLength);
+			if (e.config.mode === "scatter") {
+				this.drawScatterSeries(e, t);
+				continue;
+			}
+			if (e.config.mode === "bar") {
+				this.drawBarSeries(e, t);
+				continue;
+			}
+			if (e.config.mode === "area") {
+				this.drawAreaSeries(e, t);
+				continue;
+			}
+			let n = e.visibleSampleCount(t), r = e.hasLOD && n > S;
+			if (r && this.renderer.supportsInstancedSegments) {
+				let n = e.copyMinMaxInstanced(t, this.minMaxInstanceData, this.maxMinMaxSegments());
+				if (n <= 0) continue;
+				this.renderer.updateFloatBuffer(this.minMaxInstanceBuffer, this.minMaxInstanceData), this.renderer.drawMinMaxSegmentsInstanced(this.minMaxInstanceBuffer, n, e.style, this.camera), this.recordRenderMode("minmax"), this.stats.pointsRendered += n * 2, this.stats.drawCalls++, this.stats.uploadBytes += this.minMaxInstanceData.byteLength;
+				continue;
+			}
+			let i = r ? e.copyMinMaxVisible(t, this.rawLineData, this.maxMinMaxSegments()) : e.copyRawVisible(t, this.rawLineData, S);
+			i < 2 || (this.renderer.updateFloatBuffer(this.rawLineBuffer, this.rawLineData), r ? (this.renderer.drawMinMaxSegments(this.rawLineBuffer, i, e.style, this.camera), this.recordRenderMode("minmax")) : (this.renderer.drawLineStrip(this.rawLineBuffer, i, e.style, this.camera), this.recordRenderMode("raw")), this.stats.pointsRendered += i, this.stats.drawCalls++, this.stats.uploadBytes += this.rawLineData.byteLength);
 		}
-		this.axisOverlay?.update(this.camera, this.axis, t.left, t.bottom), this.stats.frameMs = performance.now() - e;
+		this.axisOverlay?.update(this.camera, this.axis), this.stats.frameMs = performance.now() - e;
 	}
 	dispose() {
-		this.stop(), this.resizeObserver?.disconnect(), this.input.dispose(), this.axisOverlay?.dispose(), this.renderer.dispose();
+		this.stop(), this.resizeObserver?.disconnect(), this.input.dispose(), this.axisOverlay?.dispose(), this.renderer.dispose(), this.layout.dispose();
 	}
 	applyCanvasSize(e = globalThis.devicePixelRatio) {
 		let t = Number.isFinite(e) ? Math.max(1, e) : 1, n = Math.max(1, Math.floor(this.canvas.clientWidth * t)), r = Math.max(1, Math.floor(this.canvas.clientHeight * t));
 		return this.canvas.width === n && this.canvas.height === r ? !1 : (this.canvas.width = n, this.canvas.height = r, !0);
 	}
-	writeGridVertices(e, t) {
-		let n = Math.max(1, this.canvas.clientWidth - t.left), r = Math.max(1, this.canvas.clientHeight - t.bottom);
-		this.axis.getXTickValues(n, 12, this.xTicks), this.axis.getYTickValues(r, 8, this.yTicks);
-		let i = 0;
+	drawAreaSeries(e, t) {
+		let n = e.style.baseline ?? 0, r = e.copyAreaVisible(t, this.rawLineData, C, n);
+		if (r < 4) return;
+		this.renderer.updateFloatBuffer(this.rawLineBuffer, this.rawLineData), this.renderer.drawAreaStrip(this.rawLineBuffer, r, e.style, this.camera), this.stats.pointsRendered += r, this.stats.drawCalls++, this.stats.uploadBytes += this.rawLineData.byteLength;
+		let i = this.uploadRawInstances(e, t, C);
+		i >= 2 && (this.renderer.drawLineStrip(this.rawLineBuffer, i, e.style, this.camera), this.stats.pointsRendered += i, this.stats.drawCalls++), this.recordRenderMode("area");
+	}
+	drawScatterSeries(e, t) {
+		if (!this.renderer.supportsInstancedPoints) return;
+		let n = this.uploadRawInstances(e, t, S);
+		n <= 0 || (this.renderer.drawPointsInstanced(this.rawLineBuffer, n, e.style, this.camera, this.canvas.width, this.canvas.height), this.recordInstancedDraw("points", n));
+	}
+	drawBarSeries(e, t) {
+		if (!this.renderer.supportsInstancedBars) return;
+		let n = this.uploadRawInstances(e, t, S);
+		n <= 0 || (this.renderer.drawBarsInstanced(this.rawLineBuffer, n, e.style, this.camera), this.recordInstancedDraw("bars", n));
+	}
+	uploadRawInstances(e, t, n) {
+		let r = e.copyRawVisible(t, this.rawLineData, n);
+		return r <= 0 ? 0 : (this.renderer.updateFloatBuffer(this.rawLineBuffer, this.rawLineData), this.stats.uploadBytes += this.rawLineData.byteLength, r);
+	}
+	recordInstancedDraw(e, t) {
+		this.recordRenderMode(e), this.stats.pointsRendered += t, this.stats.drawCalls++;
+	}
+	maxMinMaxSegments() {
+		return Math.min(this.canvas.width, w);
+	}
+	writeGridVertices(e) {
+		let t = Math.max(1, this.canvas.clientWidth), n = Math.max(1, this.canvas.clientHeight);
+		this.axis.getXTickValues(t, 12, this.xTicks), this.axis.getYTickValues(n, 8, this.yTicks);
+		let r = 0;
 		for (let t of this.xTicks) {
-			if (i + 2 > g) return i;
-			this.gridData[i * 2] = t, this.gridData[i * 2 + 1] = e.yMin, i++, this.gridData[i * 2] = t, this.gridData[i * 2 + 1] = e.yMax, i++;
+			if (r + 2 > E) return r;
+			this.gridData[r * 2] = t, this.gridData[r * 2 + 1] = e.yMin, r++, this.gridData[r * 2] = t, this.gridData[r * 2 + 1] = e.yMax, r++;
 		}
 		for (let t of this.yTicks) {
-			if (i + 2 > g) return i;
-			this.gridData[i * 2] = e.xMin, this.gridData[i * 2 + 1] = t, i++, this.gridData[i * 2] = e.xMax, this.gridData[i * 2 + 1] = t, i++;
+			if (r + 2 > E) return r;
+			this.gridData[r * 2] = e.xMin, this.gridData[r * 2 + 1] = t, r++, this.gridData[r * 2] = e.xMax, this.gridData[r * 2 + 1] = t, r++;
 		}
-		return i;
+		return r;
 	}
 	recordRenderMode(e) {
 		this.stats.renderMode === "none" ? this.stats.renderMode = e : this.stats.renderMode !== e && (this.stats.renderMode = "mixed");
 	}
-}, x = class {
+}, k = class {
 	xData;
 	yData;
 	constructor(e, t) {
@@ -934,6 +1227,6 @@ var b = class {
 	}
 };
 //#endregion
-export { p as AxisController, f as Camera2D, b as Chart, n as MinMaxPyramid, i as RingBuffer, r as SeriesStore, x as StaticDataset };
+export { y as AxisController, v as Camera2D, O as Chart, n as MinMaxPyramid, i as RingBuffer, r as SeriesStore, k as StaticDataset };
 
 //# sourceMappingURL=index.js.map