uplot-webgpu 0.1.0

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "uplot-webgpu",
+  "version": "0.1.0",
+  "description": "Dummy tinybuild app, for building. Replace description before publishing.",
+  "main": "./dist/uPlot.js",
+  "module": "./dist/uPlot.esm.js",
+  "types": "./dist/uPlot.d.ts",
+  "type": "module",
+  "scripts": {
+    "start": "tinybuild",
+    "build": "tinybuild build",
+    "serve": "tinybuild serve",
+    "init": "node tinybuild/init.js",
+    "concurrent": "concurrently \"npm run python\" \"npm start\"",
+    "dev": "npm run pip && npm i --save-dev concurrently && npm i --save-dev nodemon && npm run concurrent",
+    "startdev": "nodemon --exec \"node tinybuild.js\" -e ejs,js,ts,jsx,tsx,css,html,jpg,png,scss,txt,csv",
+    "python": "python python/server.py",
+    "pip": "pip install quart && pip install websockets",
+    "pwa": "npm i workbox-cli && workbox generateSW node_server/pwa/workbox-config.js && npm run build && npm start",
+    "electron": "electron ./electron",
+    "android": "npx cap open android",
+    "ios": "npx cap open ios",
+    "tauri": "tauri",
+    "parity": "node scripts/parity_check.mjs",
+    "dropin": "node scripts/dropin_check.mjs",
+    "size:audit": "node scripts/size_audit.mjs"
+  },
+  "author": "",
+  "license": "",
+  "keywords": [
+    "esbuild"
+  ],
+  "devDependencies": {
+    "@webgpu/types": "~0.1.70"
+  },
+  "nodemonConfig": {
+    "env": {
+      "NODEMON": true
+    },
+    "ignore": [
+      "dist/",
+      ".temp/"
+    ]
+  },
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./uPlot": {
+      "types": "./uPlot.d.ts",
+      "import": "./uPlot.js",
+      "default": "./uPlot.js"
+    },
+    "./webgpu": {
+      "types": "./webgpu/WebGPURenderer.d.ts",
+      "import": "./webgpu/WebGPURenderer.js",
+      "default": "./webgpu/WebGPURenderer.js"
+    },
+    "./webgpu/WebGPURenderer": {
+      "types": "./webgpu/WebGPURenderer.d.ts",
+      "import": "./webgpu/WebGPURenderer.js",
+      "default": "./webgpu/WebGPURenderer.js"
+    },
+    "./webgpu/GPUPath": {
+      "types": "./webgpu/GPUPath.d.ts",
+      "import": "./webgpu/GPUPath.js",
+      "default": "./webgpu/GPUPath.js"
+    },
+    "./core": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./full": {
+      "types": "./index.full.d.ts",
+      "import": "./index.full.js",
+      "default": "./index.full.js"
+    },
+    "./bench": {
+      "types": "./index.bench.d.ts",
+      "import": "./index.bench.js",
+      "default": "./index.bench.js"
+    },
+    "./renderer": {
+      "types": "./index.renderer.d.ts",
+      "import": "./index.renderer.js",
+      "default": "./index.renderer.js"
+    },
+    "./canvas2d-reference": {
+      "types": "./old/uPlot.canvas2d.d.ts",
+      "import": "./old/uPlot.canvas2d.js",
+      "default": "./old/uPlot.canvas2d.js"
+    },
+    "./smoke": {
+      "import": "./webgpu/smokeTest.js",
+      "default": "./webgpu/smokeTest.js"
+    },
+    "./uPlot.css": {
+      "import": "./uPlot.css",
+      "default": "./uPlot.css"
+    },
+    "./webgpu/exporters": {
+      "types": "./webgpu/exporters.d.ts",
+      "import": "./webgpu/exporters.js",
+      "default": "./webgpu/exporters.js"
+    }
+  }
+}

package/paths/bars.js

@@ -0,0 +1,253 @@
+import { GPUPath } from '../scripts/webgpu/GPUPath.js';
+import { abs, floor, min, max, inf, ifNull, EMPTY_OBJ, fnOrSelf, clamp, retArg0, EMPTY_ARR } from '../scripts/utils/utils.js';
+import { orient, rectV, rectH } from './utils.js';
+
+function findColWidth(dataX, dataY, valToPosX, scaleX, xDim, xOff, colWid = inf) {
+	if (dataX.length > 1) {
+		// prior index with non-undefined y data
+		let prevIdx = null;
+
+		// scan full dataset for smallest adjacent delta
+		// will not work properly for non-linear x scales, since does not do expensive valToPosX calcs till end
+		for (let i = 0, minDelta = Infinity; i < dataX.length; i++) {
+			if (dataY[i] !== undefined) {
+				if (prevIdx != null) {
+					let delta = abs(dataX[i] - dataX[prevIdx]);
+
+					if (delta < minDelta) {
+						minDelta = delta;
+						colWid = abs(valToPosX(dataX[i], scaleX, xDim, xOff) - valToPosX(dataX[prevIdx], scaleX, xDim, xOff));
+					}
+				}
+
+				prevIdx = i;
+			}
+		}
+	}
+
+	return colWid;
+}
+
+export function bars(opts) {
+	opts = opts || EMPTY_OBJ;
+	const size = ifNull(opts.size, [0.6, inf, 1]);
+	const align = opts.align || 0;
+	const _extraGap = (opts.gap || 0);
+
+	let ro = opts.radius;
+
+	ro =
+		// [valueRadius, baselineRadius]
+		ro == null ? [0, 0] :
+		typeof ro == 'number' ? [ro, 0] : ro;
+
+	const radiusFn = fnOrSelf(ro);
+
+	const gapFactor = 1 - size[0];
+	const _maxWidth  = ifNull(size[1], inf);
+	const _minWidth  = ifNull(size[2], 1);
+
+	const disp = ifNull(opts.disp, EMPTY_OBJ);
+	const _each = ifNull(opts.each, _ => {});
+
+	const { fill: dispFills, stroke: dispStrokes } = disp;
+
+	return (u, seriesIdx, idx0, idx1) => {
+		let { pxRatio } = u;
+
+		return orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim) => {
+			let pxRound = series.pxRound;
+			let _align = align;
+
+			let extraGap = _extraGap * pxRatio;
+			let maxWidth = _maxWidth * pxRatio;
+			let minWidth = _minWidth * pxRatio;
+
+			let valRadius, baseRadius;
+
+			if (scaleX.ori == 0)
+				[valRadius, baseRadius] = radiusFn(u, seriesIdx);
+			else
+				[baseRadius, valRadius] = radiusFn(u, seriesIdx);
+
+			const _dirX = scaleX.dir * (scaleX.ori == 0 ? 1 : -1);
+		//	const _dirY = scaleY.dir * (scaleY.ori == 1 ? 1 : -1);
+
+			let rect = scaleX.ori == 0 ? rectH : rectV;
+
+			let each = scaleX.ori == 0 ? _each : (u, seriesIdx, i, top, lft, hgt, wid) => {
+				_each(u, seriesIdx, i, lft, top, wid, hgt);
+			};
+
+			// band where this series is the "from" edge
+			let band = ifNull(u.bands, EMPTY_ARR).find(b => b.series[0] == seriesIdx);
+
+			let fillDir = band != null ? band.dir : 0;
+			let fillTo = series.fillTo(u, seriesIdx, series.min, series.max, fillDir);
+			let fillToY = pxRound(valToPosY(fillTo, scaleY, yDim, yOff))
+
+			// barWid is to center of stroke
+			let xShift, barWid, fullGap, colWid = xDim;
+
+			let strokeWidth = pxRound(series.width * pxRatio);
+
+			let multiPath = false;
+
+			let fillColors = null;
+			let fillPaths = null;
+			let strokeColors = null;
+			let strokePaths = null;
+
+			if (dispFills != null && (strokeWidth == 0 || dispStrokes != null)) {
+				multiPath = true;
+
+				fillColors = dispFills.values(u, seriesIdx, idx0, idx1);
+				fillPaths = new Map();
+				(new Set(fillColors)).forEach(color => {
+					if (color != null)
+						fillPaths.set(color, new GPUPath());
+				});
+
+				if (strokeWidth > 0) {
+					strokeColors = dispStrokes.values(u, seriesIdx, idx0, idx1);
+					strokePaths = new Map();
+					(new Set(strokeColors)).forEach(color => {
+						if (color != null)
+							strokePaths.set(color, new GPUPath());
+					});
+				}
+			}
+
+			let { x0, size } = disp;
+
+			if (x0 != null && size != null) {
+				_align = 1;
+				dataX = x0.values(u, seriesIdx, idx0, idx1);
+
+				if (x0.unit == 2)
+					dataX = dataX.map(pct => u.posToVal(xOff + pct * xDim, scaleX.key, true));
+
+				// assumes uniform sizes, for now
+				let sizes = size.values(u, seriesIdx, idx0, idx1);
+
+				if (size.unit == 2)
+					barWid = sizes[0] * xDim;
+				else
+					barWid = valToPosX(sizes[0], scaleX, xDim, xOff) - valToPosX(0, scaleX, xDim, xOff); // assumes linear scale (delta from 0)
+
+				colWid = findColWidth(dataX, dataY, valToPosX, scaleX, xDim, xOff, colWid);
+
+				let gapWid = colWid - barWid;
+				fullGap = gapWid + extraGap;
+			}
+			else {
+				colWid = findColWidth(dataX, dataY, valToPosX, scaleX, xDim, xOff, colWid);
+
+				let gapWid = colWid * gapFactor;
+
+				fullGap = gapWid + extraGap;
+				barWid = colWid - fullGap;
+			}
+
+			if (fullGap < 1)
+				fullGap = 0;
+
+			if (strokeWidth >= barWid / 2)
+				strokeWidth = 0;
+
+			// for small gaps, disable pixel snapping since gap inconsistencies become noticible and annoying
+			if (fullGap < 5)
+				pxRound = retArg0;
+
+			let insetStroke = fullGap > 0;
+
+			let rawBarWid = colWid - fullGap - (insetStroke ? strokeWidth : 0);
+
+			barWid = pxRound(clamp(rawBarWid, minWidth, maxWidth));
+
+			xShift = (_align == 0 ? barWid / 2 : _align == _dirX ? 0 : barWid) - _align * _dirX * ((_align == 0 ? extraGap / 2 : 0) + (insetStroke ? strokeWidth / 2 : 0));
+
+
+			const _paths = {stroke: null, fill: null, clip: null, band: null, gaps: null, flags: 0};  // disp, geom
+
+			const stroke = multiPath ? null : new GPUPath();
+
+			let dataY0 = null;
+
+			if (band != null)
+				dataY0 = u.data[band.series[1]];
+			else {
+				let { y0, y1 } = disp;
+
+				if (y0 != null && y1 != null) {
+					dataY = y1.values(u, seriesIdx, idx0, idx1);
+					dataY0 = y0.values(u, seriesIdx, idx0, idx1);
+				}
+			}
+
+			let radVal = valRadius * barWid;
+			let radBase = baseRadius * barWid;
+
+			for (let i = _dirX == 1 ? idx0 : idx1; i >= idx0 && i <= idx1; i += _dirX) {
+				let yVal = dataY[i];
+
+				if (yVal == null)
+					continue;
+
+				if (dataY0 != null) {
+					let yVal0 = dataY0[i] ?? 0;
+
+					if (yVal - yVal0 == 0)
+						continue;
+
+					fillToY = valToPosY(yVal0, scaleY, yDim, yOff);
+				}
+
+				let xVal = scaleX.distr != 2 || disp != null ? dataX[i] : i;
+
+				// TODO: all xPos can be pre-computed once for all series in aligned set
+				let xPos = valToPosX(xVal, scaleX, xDim, xOff);
+				let yPos = valToPosY(ifNull(yVal, fillTo), scaleY, yDim, yOff);
+
+				let lft = pxRound(xPos - xShift);
+				let btm = pxRound(max(yPos, fillToY));
+				let top = pxRound(min(yPos, fillToY));
+				// this includes the stroke
+				let barHgt = btm - top;
+
+				if (yVal != null && yVal != fillTo) {
+					let rv = yVal < 0 ? radBase : radVal;
+					let rb = yVal < 0 ? radVal : radBase;
+
+					if (multiPath) {
+						if (strokeWidth > 0 && strokeColors[i] != null)
+							rect(strokePaths.get(strokeColors[i]), lft, top + floor(strokeWidth / 2), barWid, max(0, barHgt - strokeWidth), rv, rb);
+
+						if (fillColors[i] != null)
+							rect(fillPaths.get(fillColors[i]), lft, top + floor(strokeWidth / 2), barWid, max(0, barHgt - strokeWidth), rv, rb);
+					}
+					else
+						rect(stroke, lft, top + floor(strokeWidth / 2), barWid, max(0, barHgt - strokeWidth), rv, rb);
+
+					each(u, seriesIdx, i,
+						lft    - strokeWidth / 2,
+						top,
+						barWid + strokeWidth,
+						barHgt,
+					);
+				}
+			}
+
+			if (strokeWidth > 0)
+				_paths.stroke = multiPath ? strokePaths : stroke;
+			else if (!multiPath) {
+				_paths._fill = series.width == 0 ? series._fill : series._stroke ?? series._fill;
+				_paths.width = 0;
+			}
+
+			_paths.fill = multiPath ? fillPaths : stroke;
+
+			return _paths;
+		});
+	};
+}

package/paths/catmullRomCentrip.js

@@ -0,0 +1,126 @@
+import { GPUPath } from '../scripts/webgpu/GPUPath.js';
+import { pow, sqrt } from '../scripts/utils/utils.js';
+import { splineInterp } from "./spline.js";
+
+export function catmullRomCentrip(opts) {
+	return splineInterp(catmullRomFitting, opts);
+}
+
+// adapted from https://gist.github.com/nicholaswmin/c2661eb11cad5671d816 (MIT)
+/**
+ * Interpolates a Catmull-Rom Spline through a series of x/y points
+ * Converts the CR Spline to Cubic Beziers for use with SVG items
+ *
+ * If 'alpha' is 0.5 then the 'Centripetal' variant is used
+ * If 'alpha' is 1 then the 'Chordal' variant is used
+ *
+ */
+function catmullRomFitting(xCoords, yCoords, moveTo, lineTo, bezierCurveTo, pxRound) {
+	const alpha = 0.5;
+
+	const path = new GPUPath();
+
+	const dataLen = xCoords.length;
+
+	let p0x,
+		p0y,
+		p1x,
+		p1y,
+		p2x,
+		p2y,
+		p3x,
+		p3y,
+		bp1x,
+		bp1y,
+		bp2x,
+		bp2y,
+		d1,
+		d2,
+		d3,
+		A,
+		B,
+		N,
+		M,
+		d3powA,
+		d2powA,
+		d3pow2A,
+		d2pow2A,
+		d1pow2A,
+		d1powA;
+
+	moveTo(path, pxRound(xCoords[0]), pxRound(yCoords[0]));
+
+	for (let i = 0; i < dataLen - 1; i++) {
+		let p0i = i == 0 ? 0 : i - 1;
+
+		p0x = xCoords[p0i];
+		p0y = yCoords[p0i];
+
+		p1x = xCoords[i];
+		p1y = yCoords[i];
+
+		p2x = xCoords[i + 1];
+		p2y = yCoords[i + 1];
+
+		if (i + 2 < dataLen) {
+			p3x = xCoords[i + 2];
+			p3y = yCoords[i + 2];
+		} else {
+			p3x = p2x;
+			p3y = p2y;
+		}
+
+		d1 = sqrt(pow(p0x - p1x, 2) + pow(p0y - p1y, 2));
+		d2 = sqrt(pow(p1x - p2x, 2) + pow(p1y - p2y, 2));
+		d3 = sqrt(pow(p2x - p3x, 2) + pow(p2y - p3y, 2));
+
+		// Catmull-Rom to Cubic Bezier conversion matrix
+
+		// A = 2d1^2a + 3d1^a * d2^a + d3^2a
+		// B = 2d3^2a + 3d3^a * d2^a + d2^2a
+
+		// [   0			 1			0		  0		  ]
+		// [   -d2^2a /N	 A/N		  d1^2a /N   0		  ]
+		// [   0			 d3^2a /M	 B/M		-d2^2a /M  ]
+		// [   0			 0			1		  0		  ]
+
+		d3powA  = pow(d3, alpha);
+		d3pow2A = pow(d3, alpha * 2);
+		d2powA  = pow(d2, alpha);
+		d2pow2A = pow(d2, alpha * 2);
+		d1powA  = pow(d1, alpha);
+		d1pow2A = pow(d1, alpha * 2);
+
+		A = 2 * d1pow2A + 3 * d1powA * d2powA + d2pow2A;
+		B = 2 * d3pow2A + 3 * d3powA * d2powA + d2pow2A;
+		N = 3 * d1powA * (d1powA + d2powA);
+
+		if (N > 0)
+			N = 1 / N;
+
+		M = 3 * d3powA * (d3powA + d2powA);
+
+		if (M > 0)
+			M = 1 / M;
+
+		bp1x = (-d2pow2A * p0x + A * p1x + d1pow2A * p2x) * N;
+		bp1y = (-d2pow2A * p0y + A * p1y + d1pow2A * p2y) * N;
+
+		bp2x = (d3pow2A * p1x + B * p2x - d2pow2A * p3x) * M;
+		bp2y = (d3pow2A * p1y + B * p2y - d2pow2A * p3y) * M;
+
+		if (bp1x == 0 && bp1y == 0) {
+			bp1x = p1x;
+			bp1y = p1y;
+		}
+
+		if (bp2x == 0 && bp2y == 0) {
+			bp2x = p2x;
+			bp2y = p2y;
+		}
+
+		bezierCurveTo(path, bp1x, bp1y, bp2x, bp2y, p2x, p2y);
+	}
+
+	return path;
+}

package/paths/linear.js

@@ -0,0 +1,171 @@
+import { GPUPath } from '../scripts/webgpu/GPUPath.js';
+import { nonNullIdxs, ifNull } from '../scripts/utils/utils.js';
+import { orient, clipGaps, lineToH, lineToV, clipBandLine, BAND_CLIP_FILL, bandFillClipDirs, findGaps } from './utils.js';
+
+function _drawAcc(lineTo) {
+	return (stroke, accX, minY, maxY, inY, outY) => {
+		if (minY != maxY) {
+			if (inY != minY && outY != minY)
+				lineTo(stroke, accX, minY);
+			if (inY != maxY && outY != maxY)
+				lineTo(stroke, accX, maxY);
+
+			lineTo(stroke, accX, outY);
+		}
+	};
+}
+
+const drawAccH = _drawAcc(lineToH);
+const drawAccV = _drawAcc(lineToV);
+
+export function linear(opts) {
+	return (u, seriesIdx, idx0, idx1) => {
+		return orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim) => {
+			[idx0, idx1] = nonNullIdxs(dataY, idx0, idx1);
+
+			let pxRound = series.pxRound;
+
+			let alignGaps = opts?.alignGaps ?? series.alignGaps ?? 0;
+
+			let pixelForX = val => pxRound(valToPosX(val, scaleX, xDim, xOff));
+			let pixelForY = val => pxRound(valToPosY(val, scaleY, yDim, yOff));
+
+			let lineTo, drawAcc;
+
+			if (scaleX.ori == 0) {
+				lineTo = lineToH;
+				drawAcc = drawAccH;
+			}
+			else {
+				lineTo = lineToV;
+				drawAcc = drawAccV;
+			}
+
+			const dir = scaleX.dir * (scaleX.ori == 0 ? 1 : -1);
+
+			const _paths = {stroke: new GPUPath(), fill: null, clip: null, band: null, gaps: null, flags: BAND_CLIP_FILL};
+			const stroke = _paths.stroke;
+
+			let hasGap = false;
+
+			// decimate when number of points >= 4x available pixels
+			const decimate = idx1 - idx0 >= xDim * 4;
+
+			if (decimate) {
+				let xForPixel = pos => u.posToVal(pos, scaleX.key, true);
+
+				let minY = null,
+					maxY = null,
+					inY, outY, drawnAtX;
+
+				let accX = pixelForX(dataX[dir == 1 ? idx0 : idx1]);
+
+				let idx0px = pixelForX(dataX[idx0]);
+				let idx1px = pixelForX(dataX[idx1]);
+
+				// tracks limit of current x bucket to avoid having to get x pixel for every x value
+				let nextAccXVal = xForPixel(dir == 1 ? idx0px + 1 : idx1px - 1);
+
+				for (let i = dir == 1 ? idx0 : idx1; i >= idx0 && i <= idx1; i += dir) {
+					let xVal = dataX[i];
+					let reuseAccX = dir == 1 ? (xVal < nextAccXVal) : (xVal > nextAccXVal);
+					let x = reuseAccX ? accX :  pixelForX(xVal);
+
+					let yVal = dataY[i];
+
+					if (x == accX) {
+						if (yVal != null) {
+							outY = yVal;
+
+							if (minY == null) {
+								lineTo(stroke, x, pixelForY(outY));
+								inY = minY = maxY = outY;
+							} else {
+								if (outY < minY)
+									minY = outY;
+								else if (outY > maxY)
+									maxY = outY;
+							}
+						}
+						else {
+							if (yVal === null)
+								hasGap = true;
+						}
+					}
+					else {
+						if (minY != null)
+							drawAcc(stroke, accX, pixelForY(minY), pixelForY(maxY), pixelForY(inY), pixelForY(outY));
+
+						if (yVal != null) {
+							outY = yVal;
+							lineTo(stroke, x, pixelForY(outY));
+							minY = maxY = inY = outY;
+						}
+						else {
+							minY = maxY = null;
+
+							if (yVal === null)
+								hasGap = true;
+						}
+
+						accX = x;
+						nextAccXVal = xForPixel(accX + dir);
+					}
+				}
+
+				if (minY != null && minY != maxY && drawnAtX != accX)
+					drawAcc(stroke, accX, pixelForY(minY), pixelForY(maxY), pixelForY(inY), pixelForY(outY));
+			}
+			else {
+				for (let i = dir == 1 ? idx0 : idx1; i >= idx0 && i <= idx1; i += dir) {
+					let yVal = dataY[i];
+
+					if (yVal === null)
+						hasGap = true;
+					else if (yVal != null)
+						lineTo(stroke, pixelForX(dataX[i]), pixelForY(yVal));
+				}
+			}
+
+			let [ bandFillDir, bandClipDir ] = bandFillClipDirs(u, seriesIdx);
+
+			if (series.fill != null || bandFillDir != 0) {
+				let fill = _paths.fill = new GPUPath(stroke);
+
+				let fillToVal = series.fillTo(u, seriesIdx, series.min, series.max, bandFillDir);
+				let fillToY = pixelForY(fillToVal);
+
+				let frX = pixelForX(dataX[idx0]);
+				let toX = pixelForX(dataX[idx1]);
+
+				if (dir == -1)
+					[toX, frX] = [frX, toX];
+
+				lineTo(fill, toX, fillToY);
+				lineTo(fill, frX, fillToY);
+			}
+
+			if (!series.spanGaps) { // skip in mode: 2?
+			//	console.time('gaps');
+				let gaps = hasGap ? findGaps(dataX, dataY, idx0, idx1, dir, pixelForX, alignGaps) : [];
+
+			//	console.timeEnd('gaps');
+
+			//	console.log('gaps', JSON.stringify(gaps));
+
+				_paths.gaps = gaps = series.gaps(u, seriesIdx, idx0, idx1, gaps);
+
+				_paths.clip = clipGaps(gaps, scaleX.ori, xOff, yOff, xDim, yDim);
+			}
+
+			if (bandClipDir != 0) {
+				_paths.band = bandClipDir == 2 ? [
+					clipBandLine(u, seriesIdx, idx0, idx1, stroke, -1),
+					clipBandLine(u, seriesIdx, idx0, idx1, stroke,  1),
+				] : clipBandLine(u, seriesIdx, idx0, idx1, stroke, bandClipDir);
+			}
+
+			return _paths;
+		});
+	};
+}