@lvl99dotcom/paintcanvas 0.0.0-stage → 0.2.0

package/dist/lib/brushes/presets/sketching/index.js

@@ -0,0 +1,107 @@
+import { BUILT_IN_AUTHOR } from "../../authors/index.js";
+import { SmoothingType } from "../../types/index.js";
+// src/lib/brushes/presets/sketching/index.ts
+/** Settings shared by the sketching presets */
+var DEFAULT_CONFIG = {
+	version: "1.0.0",
+	author: BUILT_IN_AUTHOR,
+	group: "Sketching"
+};
+/** Thin pencil that gets wider and darker with pen pressure */
+var pencil = {
+	...DEFAULT_CONFIG,
+	id: "pencil",
+	name: "Pencil 4px (pressure)",
+	width: 4,
+	height: 4,
+	constrainProportions: true,
+	alpha: .9,
+	spacing: 1,
+	sampleRate: 10,
+	smoothingType: SmoothingType.BezierCubic,
+	widthConfig: {
+		usePressure: true,
+		minPressure: .3,
+		maxPressure: 1
+	}
+};
+/** Ink pen with strong pressure taper */
+var inkPen = {
+	...DEFAULT_CONFIG,
+	id: "inkPen",
+	name: "Ink pen 10px (pressure)",
+	width: 10,
+	height: 10,
+	constrainProportions: true,
+	spacing: 1,
+	sampleRate: 10,
+	smoothingType: SmoothingType.BezierCubic,
+	widthConfig: {
+		usePressure: true,
+		minPressure: .1,
+		maxPressure: 1
+	}
+};
+/** Scattered dots of varying size, for texture */
+var stipple = {
+	...DEFAULT_CONFIG,
+	id: "stipple",
+	name: "Stipple 8px",
+	width: 8,
+	height: 8,
+	constrainProportions: true,
+	spacing: 14,
+	sampleRate: 10,
+	smoothingType: SmoothingType.Linear,
+	widthConfig: {
+		useRandomise: true,
+		minRandomise: .3,
+		maxRandomise: 1
+	},
+	offsetXConfig: {
+		useRandomise: true,
+		minRandomise: 0,
+		maxRandomise: 1
+	},
+	offsetYConfig: {
+		useRandomise: true,
+		minRandomise: 0,
+		maxRandomise: 1
+	}
+};
+/** Flat angled nib; with a pen, the angle follows the pen's tilt */
+var calligraphy = {
+	...DEFAULT_CONFIG,
+	id: "calligraphy",
+	name: "Calligraphy 24px (tilt)",
+	width: 24,
+	height: 5,
+	constrainProportions: true,
+	rotation: 45,
+	spacing: 1,
+	sampleRate: 10,
+	smoothingType: SmoothingType.BezierCubic,
+	rotationConfig: { useTilt: true }
+};
+/** Semi-transparent marker: overlapping parts of one stroke stay even, separate strokes build up */
+var marker = {
+	...DEFAULT_CONFIG,
+	id: "marker",
+	name: "Marker 30px 40%",
+	width: 30,
+	height: 30,
+	constrainProportions: true,
+	alpha: .4,
+	spacing: 2,
+	sampleRate: 10,
+	smoothingType: SmoothingType.BezierQuad
+};
+/** Presets for sketching and for testing how drawing feels */
+var sketching = {
+	pencil,
+	inkPen,
+	stipple,
+	calligraphy,
+	marker
+};
+export { calligraphy, sketching as default, sketching, inkPen, marker, pencil, stipple };

package/dist/lib/brushes/presets/square/index.d.ts

@@ -0,0 +1,7 @@
+import type { BrushConfig, BrushesConfig } from "../../types";
+/** Hard square brushes, snapped to the pixel grid */
+export declare const square: BrushesConfig;
+declare const _default: {
+    [x: string]: BrushConfig;
+};
+export default _default;

package/dist/lib/brushes/presets/square/index.js

@@ -0,0 +1,22 @@
+import { BUILT_IN_AUTHOR } from "../../authors/index.js";
+import { sizedPresets } from "../sized/index.js";
+import square_default$1 from "./square.js";
+/** Hard square brushes, snapped to the pixel grid */
+var square = sizedPresets("square", "Square", [
+	1,
+	5,
+	10,
+	20,
+	30,
+	40,
+	50
+], {
+	version: "1.0.0",
+	author: BUILT_IN_AUTHOR,
+	constrainProportions: true,
+	image: square_default$1,
+	sampleRate: 50,
+	snapToPixelGrid: true
+}, (size) => ({ spacing: Math.max(1, Math.round(size / 10)) }));
+var square_default = { ...square };
+export { square_default as default, square };

package/dist/lib/brushes/presets/square/square.js

@@ -0,0 +1,3 @@
+// src/lib/brushes/presets/square/square.png?inline
+var square_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAQAAADa613fAAAAa0lEQVR42u3PQREAAAjDsN38ewYVfLi0CtLMj5sngYCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgNy1qlZkZS7/ScAAAAAASUVORK5CYII=";
+export { square_default as default };

package/dist/lib/brushes/shapeImage/index.d.ts

@@ -0,0 +1,40 @@
+import { type CanvasFactory } from "../../classes/Layer";
+/** Largest brush shape file, in bytes */
+export declare const MAX_SHAPE_FILE_BYTES: number;
+/** Largest brush shape width or height, in pixels; larger images are shrunk */
+export declare const MAX_SHAPE_SIZE = 512;
+/** Messages shown when a brush shape can't be used */
+export declare const SHAPE_ERRORS: {
+    readonly type: "Brush shapes must be PNG images";
+    readonly size: "Brush shape images can be up to 2 MB";
+    readonly decode: "Couldn't read the brush shape image";
+    readonly noImage: "There is no PNG image to paste";
+};
+/** A brush shape image can't be used, with a message for the user */
+export declare class ShapeImageError extends Error {
+}
+/** A brush shape ready to use in a preset */
+export interface ShapeImage {
+    /** PNG data URL */
+    image: string;
+    width: number;
+    height: number;
+}
+/** What reading a shape needs (replaceable for tests) */
+export interface ShapeImageDependencies {
+    decode?: (blob: Blob) => Promise<ImageBitmap>;
+    createCanvas?: CanvasFactory;
+}
+/**
+ * Turn a PNG file into a brush shape: at most 2 MB, shrunk to at most 512 pixels on its longest side, as a PNG data
+ * URL. Its alpha is used as is. Throws a `ShapeImageError` if it can't be used.
+ *
+ * @example
+ * const shape = await readShapeImage(input.files[0]); // { image: "data:image/png;base64,…", width: 120, height: 80 }
+ */
+export declare const readShapeImage: (blob: Blob, { decode, createCanvas, }?: ShapeImageDependencies) => Promise<ShapeImage>;
+/**
+ * Read a brush shape from a PNG image on the clipboard. Throws a `ShapeImageError` if there is none or it can't be
+ * used.
+ */
+export declare const readClipboardShape: (clipboard?: Pick<Clipboard, "read">, deps?: ShapeImageDependencies) => Promise<ShapeImage>;

package/dist/lib/brushes/shapeImage/index.js

@@ -0,0 +1,61 @@
+import { bytesToBase64 } from "../../image/index.js";
+import { createOffscreenCanvas } from "../../classes/Layer/index.js";
+// src/lib/brushes/shapeImage/index.ts
+/** Largest brush shape file, in bytes */
+var MAX_SHAPE_FILE_BYTES = 2097152;
+/** Largest brush shape width or height, in pixels; larger images are shrunk */
+var MAX_SHAPE_SIZE = 512;
+/** Messages shown when a brush shape can't be used */
+var SHAPE_ERRORS = {
+	type: "Brush shapes must be PNG images",
+	size: "Brush shape images can be up to 2 MB",
+	decode: "Couldn't read the brush shape image",
+	noImage: "There is no PNG image to paste"
+};
+/** A brush shape image can't be used, with a message for the user */
+var ShapeImageError = class extends Error {};
+/**
+* Turn a PNG file into a brush shape: at most 2 MB, shrunk to at most 512 pixels on its longest side, as a PNG data
+* URL. Its alpha is used as is. Throws a `ShapeImageError` if it can't be used.
+*
+* @example
+* const shape = await readShapeImage(input.files[0]); // { image: "data:image/png;base64,…", width: 120, height: 80 }
+*/
+var readShapeImage = async (blob, { decode = (file) => createImageBitmap(file), createCanvas = createOffscreenCanvas } = {}) => {
+	if (blob.type !== "image/png") throw new ShapeImageError(SHAPE_ERRORS.type);
+	if (blob.size > 2097152) throw new ShapeImageError(SHAPE_ERRORS.size);
+	let bitmap;
+	try {
+		bitmap = await decode(blob);
+	} catch {
+		throw new ShapeImageError(SHAPE_ERRORS.decode);
+	}
+	const scale = Math.min(1, 512 / Math.max(bitmap.width, bitmap.height));
+	const width = Math.max(1, Math.round(bitmap.width * scale));
+	const height = Math.max(1, Math.round(bitmap.height * scale));
+	const canvas = createCanvas(width, height);
+	canvas.getContext("2d").drawImage(bitmap, 0, 0, width, height);
+	const png = await canvas.convertToBlob({ type: "image/png" });
+	const bytes = new Uint8Array(await png.arrayBuffer());
+	return {
+		image: `data:image/png;base64,${bytesToBase64(bytes)}`,
+		width,
+		height
+	};
+};
+/**
+* Read a brush shape from a PNG image on the clipboard. Throws a `ShapeImageError` if there is none or it can't be
+* used.
+*/
+var readClipboardShape = async (clipboard = navigator.clipboard, deps = {}) => {
+	let items;
+	try {
+		items = await clipboard.read();
+	} catch {
+		throw new ShapeImageError(SHAPE_ERRORS.noImage);
+	}
+	const item = items.find((entry) => entry.types.includes("image/png"));
+	if (!item) throw new ShapeImageError(SHAPE_ERRORS.noImage);
+	return readShapeImage(await item.getType("image/png"), deps);
+};
+export { MAX_SHAPE_FILE_BYTES, MAX_SHAPE_SIZE, SHAPE_ERRORS, ShapeImageError, readClipboardShape, readShapeImage };

package/dist/lib/brushes/types/index.d.ts

@@ -0,0 +1,243 @@
+export interface AssetAuthorDetails {
+    /** Author's name */
+    name: string;
+    /** Author's handle or username, which tells their presets apart from others with the same name */
+    handle?: string;
+    /** Author's email */
+    email?: string;
+    /** Author's website */
+    website?: string;
+}
+export type AssetAuthor = string | AssetAuthorDetails;
+/** Which colour settings a brush varies */
+export declare enum ColourMode {
+    HSL = 0,
+    RGB = 1
+}
+/** How the line between a stroke's recorded points is drawn */
+export declare enum SmoothingType {
+    /** Same as Linear (kept for older presets) */
+    None = 0,
+    /** Straight lines between points */
+    Linear = 1,
+    /** Quadratic curves through the midpoints between points (smooth, no lag) */
+    BezierQuad = 2,
+    /** Cubic curves whose handles follow the direction of movement before and after each point (smoothest; lags one point) */
+    BezierCubic = 3
+}
+/**
+ * Controls how a brush parameter varies for each stamp along a stroke. All ranges are fractions from 0 to 1.
+ *
+ * Each enabled source produces a factor:
+ *
+ * - Randomise: `minRandomise + (maxRandomise - minRandomise) * Math.random()`
+ * - Pressure: `minPressure + (maxPressure - minPressure) * pressure` (pressure 0–1 from the pen)
+ * - Tilt: `minTilt + (maxTilt - minTilt) * tilt` (tilt 0 = pen upright, 1 = pen flat)
+ *
+ * The factors are multiplied together and applied according to the kind of parameter:
+ *
+ * - Scale parameters (width, height, alpha, saturation, lightness, red, green, blue): `value * factor`
+ * - Angle parameters (rotation, hue): `value + factor * 360` degrees. For rotation, tilt instead sets the
+ *   angle from the direction the pen leans (like a calligraphy nib).
+ * - Offset parameters (offsetX, offsetY): `value ± factor * brush size`, in a random direction (scatter)
+ *
+ * @example
+ * // Width varies randomly between 50% and 100% and follows pen pressure from 20% to 100%
+ * const widthConfig: BrushParamConfig = {
+ *   useRandomise: true, minRandomise: 0.5, maxRandomise: 1,
+ *   usePressure: true, minPressure: 0.2, maxPressure: 1,
+ * };
+ */
+export interface BrushParamConfig {
+    /**
+     * Vary the parameter randomly for each stamp, between `minRandomise` and `maxRandomise`
+     * @default false
+     */
+    useRandomise?: boolean;
+    /**
+     * Lowest random factor (0–1)
+     * @default 1
+     */
+    minRandomise?: number;
+    /**
+     * Highest random factor (0–1)
+     * @default 1
+     */
+    maxRandomise?: number;
+    /**
+     * Vary the parameter with pen pressure, when the device provides it
+     * @default false
+     */
+    usePressure?: boolean;
+    /**
+     * Factor at the lightest pressure (0–1)
+     * @default 0
+     */
+    minPressure?: number;
+    /**
+     * Factor at full pressure (0–1)
+     * @default 1
+     */
+    maxPressure?: number;
+    /**
+     * Vary the parameter with pen tilt, when the device provides it
+     * @default false
+     */
+    useTilt?: boolean;
+    /**
+     * Factor when the pen is upright (0–1)
+     * @default 0
+     */
+    minTilt?: number;
+    /**
+     * Factor when the pen is flat (0–1)
+     * @default 1
+     */
+    maxTilt?: number;
+}
+export interface BrushConfig {
+    /** Unique ID */
+    id: string;
+    /** Brush name */
+    name?: string;
+    /** The family the preset belongs to (presets of the same group are listed together, e.g. "Round") */
+    group?: string;
+    /** Brush version */
+    version?: string;
+    /** Brush author */
+    author?: AssetAuthor;
+    /**
+     * Brush shape: an image whose alpha values define the shape (its colours are ignored).
+     * A data URL string, or raw image file bytes. Defaults to a hard round shape.
+     */
+    image?: string | Uint8Array;
+    /**
+     * Brush colour mode affects how colour settings are applied.
+     * @default ColourMode.HSL
+     */
+    colourMode?: ColourMode;
+    /**
+     * Initial colour hue value (0–359)
+     * @default 0
+     */
+    hue?: string | number;
+    /** How hue varies per stamp (angle: adds up to 360°; see {@link BrushParamConfig}) */
+    hueConfig?: BrushParamConfig;
+    /**
+     * Initial colour saturation value (0–100)
+     * @default 100
+     */
+    saturation?: string | number;
+    /** How saturation varies per stamp (scale; see {@link BrushParamConfig}) */
+    saturationConfig?: BrushParamConfig;
+    /**
+     * Initial colour lightness value (0–100)
+     * @default 50
+     */
+    lightness?: string | number;
+    /** How lightness varies per stamp (scale; see {@link BrushParamConfig}) */
+    lightnessConfig?: BrushParamConfig;
+    /**
+     * Initial colour red value (0–255)
+     * @default 0
+     */
+    red?: string | number;
+    /** How red varies per stamp (scale; see {@link BrushParamConfig}) */
+    redConfig?: BrushParamConfig;
+    /**
+     * Initial colour green value (0–255)
+     * @default 0
+     */
+    green?: string | number;
+    /** How green varies per stamp (scale; see {@link BrushParamConfig}) */
+    greenConfig?: BrushParamConfig;
+    /**
+     * Initial colour blue value (0–255)
+     * @default 0
+     */
+    blue?: string | number;
+    /** How blue varies per stamp (scale; see {@link BrushParamConfig}) */
+    blueConfig?: BrushParamConfig;
+    /**
+     * Initial alpha value (0–1)
+     * @default 1
+     */
+    alpha?: number;
+    /** How alpha varies per stamp (scale; see {@link BrushParamConfig}) */
+    alphaConfig?: BrushParamConfig;
+    /**
+     * Default width in pixels (the user can change it from 1 to 256)
+     * @default 1
+     */
+    width?: number;
+    /** How width varies per stamp (scale; see {@link BrushParamConfig}) */
+    widthConfig?: BrushParamConfig;
+    /**
+     * Default height in pixels (the user can change it from 1 to 256)
+     * @default 1
+     */
+    height?: number;
+    /** How height varies per stamp (scale; see {@link BrushParamConfig}) */
+    heightConfig?: BrushParamConfig;
+    /** Keep the width-to-height ratio when the size changes */
+    constrainProportions?: boolean;
+    /**
+     * Rotation in degrees
+     * @default 0
+     */
+    rotation?: number;
+    /** How rotation varies per stamp (angle: adds up to 360°; tilt sets the angle from the pen's lean direction; see {@link BrushParamConfig}) */
+    rotationConfig?: BrushParamConfig;
+    /**
+     * Horizontal offset of each stamp from the pointer, in pixels
+     * @default 0
+     */
+    offsetX?: number;
+    /** How offsetX varies per stamp (offset: scatters up to the factor × brush width either way; see {@link BrushParamConfig}) */
+    offsetXConfig?: BrushParamConfig;
+    /**
+     * Vertical offset of each stamp from the pointer, in pixels
+     * @default 0
+     */
+    offsetY?: number;
+    /** How offsetY varies per stamp (offset: scatters up to the factor × brush height either way; see {@link BrushParamConfig}) */
+    offsetYConfig?: BrushParamConfig;
+    /**
+     * How often (in milliseconds, 5–400) a new point is recorded while the pointer moves. Higher values record fewer points.
+     * No points are recorded while the pointer is still.
+     * @default 10
+     */
+    sampleRate?: number;
+    /**
+     * How the line between recorded points is drawn
+     * @default SmoothingType.Linear
+     */
+    smoothingType?: SmoothingType;
+    /**
+     * Distance in pixels (0–200) between stamps of the brush shape along the line. 0 stamps at every pixel.
+     * @default 5
+     */
+    spacing?: number;
+    /**
+     * Draw each stamp on whole pixels: its size is rounded to whole pixels and its top-left corner is rounded down
+     * (`Math.floor`), so it never covers part of a pixel. Rotation other than a multiple of 90° still leaves the grid.
+     * @default false
+     */
+    snapToPixelGrid?: boolean;
+}
+export type BrushesConfig = Record<string, BrushConfig>;
+export interface BrushStrokePoint {
+    /** The X coordinate of the brush stroke point */
+    x: number;
+    /** The Y coordinate of the brush stroke point */
+    y: number;
+    /** The rotation (in radians) of the brush stroke point */
+    rotation?: number;
+    /** The pressure (0–1) of the brush stroke point, from `PointerEvent.pressure` */
+    pressure?: number;
+    /** The pen tilt (-90–90 degrees) along the X axis, from `PointerEvent.tiltX` */
+    tiltX?: number;
+    /** The pen tilt (-90–90 degrees) along the Y axis, from `PointerEvent.tiltY` */
+    tiltY?: number;
+}
+export type BrushStroke = BrushStrokePoint[];

package/dist/lib/brushes/types/index.js

@@ -0,0 +1,20 @@
+// src/lib/brushes/types/index.ts
+/** Which colour settings a brush varies */
+var ColourMode = /* @__PURE__ */ function(ColourMode) {
+	ColourMode[ColourMode["HSL"] = 0] = "HSL";
+	ColourMode[ColourMode["RGB"] = 1] = "RGB";
+	return ColourMode;
+}({});
+/** How the line between a stroke's recorded points is drawn */
+var SmoothingType = /* @__PURE__ */ function(SmoothingType) {
+	/** Same as Linear (kept for older presets) */
+	SmoothingType[SmoothingType["None"] = 0] = "None";
+	/** Straight lines between points */
+	SmoothingType[SmoothingType["Linear"] = 1] = "Linear";
+	/** Quadratic curves through the midpoints between points (smooth, no lag) */
+	SmoothingType[SmoothingType["BezierQuad"] = 2] = "BezierQuad";
+	/** Cubic curves whose handles follow the direction of movement before and after each point (smoothest; lags one point) */
+	SmoothingType[SmoothingType["BezierCubic"] = 3] = "BezierCubic";
+	return SmoothingType;
+}({});
+export { ColourMode, SmoothingType };

package/dist/lib/classes/BackgroundWork/index.d.ts

@@ -0,0 +1,55 @@
+import type StrokeLog from "../StrokeLog";
+/** How long drawing must pause after a stroke before background work runs (milliseconds) */
+export declare const DRAWING_PAUSE_MS = 300;
+/** Longest background work waits while drawing continues (milliseconds); it still only runs between strokes */
+export declare const MAX_WAIT_MS = 1000;
+/**
+ * Holds slow work that isn't urgent (syncing the drawing, redrawing the canvas map and layer thumbnails, saving) until
+ * drawing pauses, so it doesn't keep the page busy while the user is drawing or about to draw the next stroke.
+ *
+ * Work never runs during a stroke. Between strokes, it runs once `DRAWING_PAUSE_MS` has passed since the last stroke
+ * ended, or once it has waited `MAX_WAIT_MS` (so a long run of strokes doesn't hold it up forever).
+ * When nobody is drawing, it runs straight away (during `run`); work due when a stroke ends runs just after it. Work
+ * asked for again under the same name before it runs replaces the earlier request (keeping its place in the wait). With
+ * a stroke log, how long each piece of work took is logged.
+ *
+ * @example
+ * const work = new BackgroundWork(app.strokeLog);
+ * work.strokeStarted();
+ * work.run("map", () => map.drawThumbnail()); // waits
+ * work.strokeEnded(); // the map is redrawn 300ms later, unless another stroke starts first
+ */
+export default class BackgroundWork {
+    /** Current time in milliseconds (replaceable for tests) */
+    now: () => number;
+    private readonly log?;
+    private readonly tasks;
+    private drawing;
+    /** When the last stroke ended */
+    private lastStroke;
+    private timer?;
+    constructor(log?: StrokeLog);
+    /** Names of the work waiting to run */
+    get pending(): readonly string[];
+    /**
+     * Run some work once drawing pauses (see the class description).
+     */
+    run(name: string, run: () => unknown): void;
+    /**
+     * Forget work that hasn't run yet.
+     */
+    cancel(name: string): void;
+    /** A stroke started: hold all work until it ends */
+    strokeStarted(): void;
+    /** A stroke ended (or was cancelled): run the work once drawing pauses */
+    strokeEnded(): void;
+    /**
+     * Run the waiting work now if it's due (and `now` allows), or set a timer for when it will be (unless drawing).
+     */
+    private plan;
+    /**
+     * Run all waiting work, logging how long each took. If any throws, the rest still runs, then the first error is
+     * thrown.
+     */
+    private flush;
+}

package/dist/lib/classes/BackgroundWork/index.js

@@ -0,0 +1,97 @@
+// src/lib/classes/BackgroundWork/index.ts
+/** How long drawing must pause after a stroke before background work runs (milliseconds) */
+var DRAWING_PAUSE_MS = 300;
+/** Longest background work waits while drawing continues (milliseconds); it still only runs between strokes */
+var MAX_WAIT_MS = 1e3;
+/**
+* Holds slow work that isn't urgent (syncing the drawing, redrawing the canvas map and layer thumbnails, saving) until
+* drawing pauses, so it doesn't keep the page busy while the user is drawing or about to draw the next stroke.
+*
+* Work never runs during a stroke. Between strokes, it runs once `DRAWING_PAUSE_MS` has passed since the last stroke
+* ended, or once it has waited `MAX_WAIT_MS` (so a long run of strokes doesn't hold it up forever).
+* When nobody is drawing, it runs straight away (during `run`); work due when a stroke ends runs just after it. Work
+* asked for again under the same name before it runs replaces the earlier request (keeping its place in the wait). With
+* a stroke log, how long each piece of work took is logged.
+*
+* @example
+* const work = new BackgroundWork(app.strokeLog);
+* work.strokeStarted();
+* work.run("map", () => map.drawThumbnail()); // waits
+* work.strokeEnded(); // the map is redrawn 300ms later, unless another stroke starts first
+*/
+var BackgroundWork = class {
+	/** Current time in milliseconds (replaceable for tests) */
+	now = () => performance.now();
+	log;
+	tasks = /* @__PURE__ */ new Map();
+	drawing = false;
+	/** When the last stroke ended */
+	lastStroke = -Infinity;
+	timer;
+	constructor(log) {
+		this.log = log;
+	}
+	/** Names of the work waiting to run */
+	get pending() {
+		return [...this.tasks.keys()];
+	}
+	/**
+	* Run some work once drawing pauses (see the class description).
+	*/
+	run(name, run) {
+		const since = this.tasks.get(name)?.since ?? this.now();
+		this.tasks.set(name, {
+			run,
+			since
+		});
+		this.plan();
+	}
+	/**
+	* Forget work that hasn't run yet.
+	*/
+	cancel(name) {
+		this.tasks.delete(name);
+		this.plan();
+	}
+	/** A stroke started: hold all work until it ends */
+	strokeStarted() {
+		this.drawing = true;
+		this.plan();
+	}
+	/** A stroke ended (or was cancelled): run the work once drawing pauses */
+	strokeEnded() {
+		this.drawing = false;
+		this.lastStroke = this.now();
+		this.plan(false);
+	}
+	/**
+	* Run the waiting work now if it's due (and `now` allows), or set a timer for when it will be (unless drawing).
+	*/
+	plan(now = true) {
+		clearTimeout(this.timer);
+		this.timer = void 0;
+		if (this.drawing || this.tasks.size === 0) return;
+		const oldest = Math.min(...[...this.tasks.values()].map((t) => t.since));
+		const wait = Math.min(this.lastStroke + 300, oldest + MAX_WAIT_MS) - this.now();
+		if (wait <= 0 && now) this.flush();
+		else this.timer = setTimeout(() => this.flush(), Math.max(0, wait));
+	}
+	/**
+	* Run all waiting work, logging how long each took. If any throws, the rest still runs, then the first error is
+	* thrown.
+	*/
+	flush() {
+		this.timer = void 0;
+		const tasks = [...this.tasks];
+		this.tasks.clear();
+		const errors = [];
+		for (const [name, { run }] of tasks) try {
+			if (this.log) this.log.measure(name, run);
+			else run();
+		} catch (error) {
+			errors.push(error);
+		}
+		if (errors.length > 0) throw errors[0];
+	}
+};
+export { DRAWING_PAUSE_MS, MAX_WAIT_MS, BackgroundWork as default };