uplot-webgpu 0.1.0 → 0.2.0

package/paths/ts/monotoneCubic.ts

@@ -0,0 +1,70 @@
+import { GPUPath } from '../../scripts/ts/webgpu/GPUPath.js';
+import { splineInterp } from "./spline.js";
+import type { SplinePathOptions, PathBuilder } from './types.js';
+
+export function monotoneCubic(opts: SplinePathOptions = {}): PathBuilder {
+	return splineInterp(_monotoneCubic, opts);
+}
+
+// Monotone Cubic Spline interpolation, adapted from the Chartist.js implementation:
+// https://github.com/gionkunz/chartist-js/blob/e7e78201bffe9609915e5e53cfafa29a5d6c49f9/src/scripts/interpolation.js#L240-L369
+function _monotoneCubic(xs, ys, moveTo, lineTo, bezierCurveTo, pxRound) {
+	const n = xs.length;
+
+	if (n < 2)
+		return null;
+
+	const path = new GPUPath();
+
+	moveTo(path, xs[0], ys[0]);
+
+	if (n == 2)
+		lineTo(path, xs[1], ys[1]);
+	else {
+		let ms  = Array(n),
+			ds  = Array(n - 1),
+			dys = Array(n - 1),
+			dxs = Array(n - 1);
+
+		// calc deltas and derivative
+		for (let i = 0; i < n - 1; i++) {
+			dys[i] = ys[i + 1] - ys[i];
+			dxs[i] = xs[i + 1] - xs[i];
+			ds[i]  = dys[i] / dxs[i];
+		}
+
+		// determine desired slope (m) at each point using Fritsch-Carlson method
+		// http://math.stackexchange.com/questions/45218/implementation-of-monotone-cubic-interpolation
+		ms[0] = ds[0];
+
+		for (let i = 1; i < n - 1; i++) {
+			if (ds[i] === 0 || ds[i - 1] === 0 || (ds[i - 1] > 0) !== (ds[i] > 0))
+				ms[i] = 0;
+			else {
+				ms[i] = 3 * (dxs[i - 1] + dxs[i]) / (
+					(2 * dxs[i] + dxs[i - 1]) / ds[i - 1] +
+					(dxs[i] + 2 * dxs[i - 1]) / ds[i]
+				);
+
+				if (!isFinite(ms[i]))
+					ms[i] = 0;
+			}
+		}
+
+		ms[n - 1] = ds[n - 2];
+
+		for (let i = 0; i < n - 1; i++) {
+			bezierCurveTo(
+				path,
+				xs[i] + dxs[i] / 3,
+				ys[i] + ms[i] * dxs[i] / 3,
+				xs[i + 1] - dxs[i] / 3,
+				ys[i + 1] - ms[i + 1] * dxs[i] / 3,
+				xs[i + 1],
+				ys[i + 1],
+			);
+		}
+	}
+
+	return path;
+}

package/paths/ts/points.ts

@@ -0,0 +1,70 @@
+import { GPUPath } from '../../scripts/ts/webgpu/GPUPath.js';
+import { orient, moveToH, moveToV, rectH, arcH, arcV, BAND_CLIP_FILL, BAND_CLIP_STROKE } from './utils.js';
+import { roundDec, PI } from '../../scripts/ts/utils/utils.js';
+import type { PathBuilder, PointPathOptions } from './types.js';
+
+// TODO: drawWrap(seriesIdx, drawPoints) (save, restore, translate, clip)
+export function points(opts: PointPathOptions = {}): PathBuilder {
+	return (u, seriesIdx, idx0, idx1, filtIdxs) => {
+	//	log("drawPoints()", arguments);
+		let { pxRatio } = u;
+
+		return orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim) => {
+			let { pxRound, points } = series;
+
+			let moveTo, arc;
+
+			if (scaleX.ori == 0) {
+				moveTo = moveToH;
+				arc = arcH;
+			}
+			else {
+				moveTo = moveToV;
+				arc = arcV;
+			}
+
+			const width = roundDec(points.width * pxRatio, 3);
+
+			let rad = (points.size - points.width) / 2 * pxRatio;
+			let dia = roundDec(rad * 2, 3);
+
+			let fill = new GPUPath();
+			let clip = new GPUPath();
+
+			let { left: lft, top: top, width: wid, height: hgt } = u.bbox;
+
+			rectH(clip,
+				lft - dia,
+				top - dia,
+				wid + dia * 2,
+				hgt + dia * 2,
+			);
+
+			const drawPoint = pi => {
+				if (dataY[pi] != null) {
+					let x = pxRound(valToPosX(dataX[pi], scaleX, xDim, xOff));
+					let y = pxRound(valToPosY(dataY[pi], scaleY, yDim, yOff));
+
+					moveTo(fill, x + rad, y);
+					arc(fill, x, y, rad, 0, PI * 2);
+				}
+			};
+
+			if (filtIdxs)
+				filtIdxs.forEach(drawPoint);
+			else {
+				for (let pi = idx0; pi <= idx1; pi++)
+					drawPoint(pi);
+			}
+
+			return {
+				stroke: width > 0 ? fill : null,
+				fill,
+				clip,
+				band: null,
+				gaps: null,
+				flags: BAND_CLIP_FILL | BAND_CLIP_STROKE,
+			};
+		});
+	};
+}

package/paths/ts/spline.ts

@@ -0,0 +1,105 @@
+import { GPUPath } from '../../scripts/ts/webgpu/GPUPath.js';
+import { ifNull, nonNullIdxs } from '../../scripts/ts/utils/utils.js';
+import { orient, clipGaps, moveToH, moveToV, lineToH, lineToV, bezierCurveToH, bezierCurveToV, clipBandLine, BAND_CLIP_FILL, bandFillClipDirs, findGaps } from './utils.js';
+import type { InterpolationFitter, PathBuilder, SplinePathOptions } from './types.js';
+
+export function splineInterp(interp: InterpolationFitter, opts: SplinePathOptions = {}): PathBuilder {
+	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 moveTo, bezierCurveTo, lineTo;
+
+			if (scaleX.ori == 0) {
+				moveTo = moveToH;
+				lineTo = lineToH;
+				bezierCurveTo = bezierCurveToH;
+			}
+			else {
+				moveTo = moveToV;
+				lineTo = lineToV;
+				bezierCurveTo = bezierCurveToV;
+			}
+
+			const dir = scaleX.dir * (scaleX.ori == 0 ? 1 : -1);
+
+			let firstXPos = pixelForX(dataX[dir == 1 ? idx0 : idx1]);
+			let prevXPos = firstXPos;
+
+			let xCoords = [];
+			let yCoords = [];
+
+			let hasGap = false;
+
+			for (let i = dir == 1 ? idx0 : idx1; i >= idx0 && i <= idx1; i += dir) {
+				let yVal = dataY[i];
+
+				if (yVal != null) {
+					let xVal = dataX[i];
+					let xPos = pixelForX(xVal);
+
+					xCoords.push(prevXPos = xPos);
+					yCoords.push(pixelForY(dataY[i]));
+				}
+				else if (yVal === null)
+					hasGap = true;
+			}
+
+			const _paths = {stroke: interp(xCoords, yCoords, moveTo, lineTo, bezierCurveTo, pxRound), fill: null, clip: null, band: null, gaps: null, flags: BAND_CLIP_FILL};
+			const stroke = _paths.stroke;
+
+			let [ bandFillDir, bandClipDir ] = bandFillClipDirs(u, seriesIdx);
+
+			if (series.fill != null || bandFillDir != 0) {
+				let fill = _paths.fill = new GPUPath(stroke);
+
+				let fillTo = series.fillTo(u, seriesIdx, series.min, series.max, bandFillDir);
+				let fillToY = pixelForY(fillTo);
+
+				lineTo(fill, prevXPos, fillToY);
+				lineTo(fill, firstXPos, fillToY);
+			}
+
+			if (!series.spanGaps) {
+			//	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;
+
+			//  if FEAT_PATHS: false in rollup.config.js
+			//	u.ctx.save();
+			//	u.ctx.beginPath();
+			//	u.ctx.rect(u.bbox.left, u.bbox.top, u.bbox.width, u.bbox.height);
+			//	u.ctx.clip();
+			//	u.ctx.strokeStyle = u.series[sidx].stroke;
+			//	u.ctx.stroke(stroke);
+			//	u.ctx.fillStyle = u.series[sidx].fill;
+			//	u.ctx.fill(fill);
+			//	u.ctx.restore();
+			//	return null;
+		});
+	};
+}

package/paths/ts/stepped.ts

@@ -0,0 +1,126 @@
+import { GPUPath } from '../../scripts/ts/webgpu/GPUPath.js';
+import { ifNull, nonNullIdxs } from '../../scripts/ts/utils/utils.js';
+import { orient, clipGaps, lineToH, lineToV, clipBandLine, BAND_CLIP_FILL, bandFillClipDirs, findGaps } from './utils.js';
+import type { PathBuilder, SteppedPathOptions } from './types.js';
+
+// BUG: align: -1 behaves like align: 1 when scale.dir: -1
+export function stepped(opts: SteppedPathOptions = {}): PathBuilder {
+	const align = ifNull(opts.align, 1);
+	// whether to draw ascenders/descenders at null/gap bondaries
+	const ascDesc = ifNull(opts.ascDesc, false);
+	const extend = ifNull(opts.extend, false);
+
+	return (u, seriesIdx, idx0, idx1) => {
+		let { pxRatio } = u;
+
+		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 { left, width } = u.bbox;
+
+			let pixelForX = val => pxRound(valToPosX(val, scaleX, xDim, xOff));
+			let pixelForY = val => pxRound(valToPosY(val, scaleY, yDim, yOff));
+
+			let lineTo = scaleX.ori == 0 ? lineToH : lineToV;
+
+			const _paths = {stroke: new GPUPath(), fill: null, clip: null, band: null, gaps: null, flags: BAND_CLIP_FILL};
+			const stroke = _paths.stroke;
+
+			const dir = scaleX.dir * (scaleX.ori == 0 ? 1 : -1);
+
+			let hasGap = false;
+
+			let prevYPos  = pixelForY(dataY[dir == 1 ? idx0 : idx1]);
+			let firstXPos = pixelForX(dataX[dir == 1 ? idx0 : idx1]);
+			let prevXPos = firstXPos;
+
+			let firstXPosExt = firstXPos;
+
+			if (extend && align == -1) {
+				firstXPosExt = left;
+				lineTo(stroke, firstXPosExt, prevYPos);
+			}
+
+			lineTo(stroke, firstXPos, prevYPos);
+
+			for (let i = dir == 1 ? idx0 : idx1; i >= idx0 && i <= idx1; i += dir) {
+				let yVal1 = dataY[i];
+
+				if (yVal1 == null) {
+					if (yVal1 === null)
+						hasGap = true;
+
+					continue;
+				}
+
+				let x1 = pixelForX(dataX[i]);
+				let y1 = pixelForY(yVal1);
+
+				if (align == 1)
+					lineTo(stroke, x1, prevYPos);
+				else
+					lineTo(stroke, prevXPos, y1);
+
+				lineTo(stroke, x1, y1);
+
+				prevYPos = y1;
+				prevXPos = x1;
+			}
+
+			let prevXPosExt = prevXPos;
+
+			if (extend && align == 1) {
+				prevXPosExt = left + width;
+				lineTo(stroke, prevXPosExt, prevYPos);
+			}
+
+			let [ bandFillDir, bandClipDir ] = bandFillClipDirs(u, seriesIdx);
+
+			if (series.fill != null || bandFillDir != 0) {
+				let fill = _paths.fill = new GPUPath(stroke);
+
+				let fillTo = series.fillTo(u, seriesIdx, series.min, series.max, bandFillDir);
+				let fillToY = pixelForY(fillTo);
+
+				lineTo(fill, prevXPosExt, fillToY);
+				lineTo(fill, firstXPosExt, fillToY);
+			}
+
+			if (!series.spanGaps) {
+			//	console.time('gaps');
+				let gaps = hasGap ? findGaps(dataX, dataY, idx0, idx1, dir, pixelForX, alignGaps) : [];
+
+			//	console.timeEnd('gaps');
+
+			//	console.log('gaps', JSON.stringify(gaps));
+
+				// expand/contract clips for ascenders/descenders
+				let halfStroke = (series.width * pxRatio) / 2;
+				let startsOffset = (ascDesc || align ==  1) ?  halfStroke : -halfStroke;
+				let endsOffset   = (ascDesc || align == -1) ? -halfStroke :  halfStroke;
+
+				gaps.forEach(g => {
+					g[0] += startsOffset;
+					g[1] += endsOffset;
+				});
+
+				_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;
+		});
+	};
+}

package/paths/ts/types.ts

@@ -0,0 +1,143 @@
+import type { GPUPath } from '../../scripts/ts/webgpu/GPUPath.js';
+
+export type PathValue = number | null | undefined;
+export type PathData = ArrayLike<PathValue>;
+export type PathXData = ArrayLike<number> & { map?: (callback: (value: number, index: number) => number) => number[] };
+export type PixelRound = (value: number) => number;
+export type ValueToPos = (value: number, scale: ScaleLike, dim: number, off: number) => number;
+export type Direction = -1 | 0 | 1 | 2;
+export type Orientation = 0 | 1;
+export type Gap = [from: number, to: number];
+export type GapList = Gap[];
+
+export interface ScaleLike {
+	key?: string;
+	ori: Orientation;
+	dir: -1 | 1;
+	distr?: number;
+	min?: number;
+	max?: number;
+	[k: string]: any;
+}
+
+export interface BandLike {
+	series: [number, number];
+	dir: -1 | 0 | 1;
+	[k: string]: any;
+}
+
+export interface SeriesLike {
+	scale?: string;
+	facets?: [{ scale: string }, { scale: string }];
+	pxRound: PixelRound;
+	width: number;
+	fill?: string | CanvasGradient | CanvasPattern | null;
+	_fill?: unknown;
+	_stroke?: unknown;
+	min?: number;
+	max?: number;
+	spanGaps?: boolean;
+	alignGaps?: number;
+	points?: any;
+	fillTo: (u: UPlotPathLike, seriesIdx: number, dataMin: number | undefined, dataMax: number | undefined, bandFillDir: number) => number;
+	gaps: (u: UPlotPathLike, seriesIdx: number, idx0: number, idx1: number, gaps: GapList) => GapList;
+	[k: string]: any;
+}
+
+export interface UPlotPathLike {
+	mode: number;
+	pxRatio: number;
+	_data: any;
+	data: any;
+	series: SeriesLike[];
+	scales: Record<string, ScaleLike>;
+	bbox: { left: number; top: number; width: number; height: number };
+	bands?: BandLike[];
+	valToPosH: ValueToPos;
+	valToPosV: ValueToPos;
+	posToVal: (pos: number, scaleKey: string, can?: boolean) => number;
+	[k: string]: any;
+}
+
+export type PathPrimitive = GPUPath;
+export type PathPrimitiveMap = Map<unknown, GPUPath>;
+export type ClipPath = GPUPath | null;
+export type BandClipPath = GPUPath | [GPUPath, GPUPath] | null;
+
+export interface PathBuildResult {
+	stroke: GPUPath | PathPrimitiveMap | null;
+	fill: GPUPath | PathPrimitiveMap | null;
+	clip: ClipPath;
+	band: BandClipPath;
+	gaps: GapList | null;
+	flags: number;
+	_fill?: unknown;
+	width?: number;
+	[k: string]: unknown;
+}
+
+export type PathBuilder = (u: UPlotPathLike, seriesIdx: number, idx0: number, idx1: number, filtIdxs?: number[] | null) => PathBuildResult | null;
+export type PathFactory<TOptions = unknown> = (opts?: TOptions) => PathBuilder;
+
+export interface BarPathOptions {
+	size?: [factor?: number, maxWidth?: number, minWidth?: number];
+	align?: -1 | 0 | 1;
+	gap?: number;
+	radius?: number | [valueRadius: number, baselineRadius: number] | ((u: UPlotPathLike, seriesIdx: number) => [number, number]);
+	disp?: any;
+	each?: (u: UPlotPathLike, seriesIdx: number, idx: number, left: number, top: number, width: number, height: number) => void;
+	[k: string]: unknown;
+}
+
+export interface LinearPathOptions {
+	alignGaps?: number;
+	[k: string]: unknown;
+}
+
+export interface SteppedPathOptions extends LinearPathOptions {
+	align?: -1 | 1;
+	ascDesc?: boolean;
+	extend?: boolean;
+}
+
+export interface PointPathOptions {
+	[k: string]: unknown;
+}
+
+export interface SplinePathOptions extends LinearPathOptions {
+	[k: string]: unknown;
+}
+
+export type MoveToFn = (path: GPUPath, x: number, y: number) => void;
+export type LineToFn = (path: GPUPath, x: number, y: number) => void;
+export type RectFn = (path: GPUPath, x: number, y: number, width: number, height: number, endRadius?: number, baseRadius?: number) => void;
+export type ArcFn = (path: GPUPath, x: number, y: number, radius: number, startAngle: number, endAngle: number) => void;
+export type BezierCurveToFn = (path: GPUPath, bp1x: number, bp1y: number, bp2x: number, bp2y: number, p2x: number, p2y: number) => void;
+
+export type OrientedPathCallback<T = unknown> = (
+	series: SeriesLike,
+	dataX: PathXData,
+	dataY: PathData,
+	scaleX: ScaleLike,
+	scaleY: ScaleLike,
+	valToPosX: ValueToPos,
+	valToPosY: ValueToPos,
+	xOff: number,
+	yOff: number,
+	xDim: number,
+	yDim: number,
+	moveTo: MoveToFn,
+	lineTo: LineToFn,
+	rect: RectFn,
+	arc: ArcFn,
+	bezierCurveTo: BezierCurveToFn,
+) => T;
+
+export type InterpolationFitter = (
+	xCoords: number[],
+	yCoords: number[],
+	moveTo: MoveToFn,
+	lineTo: LineToFn,
+	bezierCurveTo: BezierCurveToFn,
+	pxRound: PixelRound,
+) => GPUPath;