@lvl99dotcom/paintcanvas 0.0.0-stage → 0.2.0

package/dist/lib/selection/Lasso/index.d.ts

@@ -0,0 +1,70 @@
+import type { Point } from "../../classes/Viewport";
+import type { MaskShape } from "../Selection";
+import { type MaskMode } from "../geometry";
+/** The lasso tools */
+export type LassoKind = "rectangle" | "circle" | "polygon" | "freeform";
+/** Modifier keys held during a lasso action */
+export interface LassoKeys {
+    shiftKey: boolean;
+    altKey: boolean;
+}
+/** What a finished lasso action does to the mask */
+export type LassoResult = {
+    shape: MaskShape;
+    mode: MaskMode;
+} | {
+    deselect: true;
+} | undefined;
+/**
+ * Lasso tool behaviour, independent of the screen: builds rectangle, circle, polygon and freeform mask shapes from pointer input.
+ *
+ * - The keys held when a shape starts choose the mode: Shift adds, Alt subtracts, otherwise it replaces.
+ * - Rectangle/circle: drag; Shift while dragging keeps sides equal. A click without dragging deselects (in replace mode).
+ * - Polygon: click to add nodes; Shift snaps the next line to 45°; clicking near the first node, double-clicking or `close()` finishes it.
+ * - Freeform: drag; releasing finishes it.
+ * - `cancel()` (Escape) abandons the shape in progress.
+ *
+ * @example
+ * lasso.down("rectangle", { x: 10, y: 10 }, keys, false);
+ * lasso.move({ x: 50, y: 30 }, keys);
+ * const result = lasso.up({ x: 50, y: 30 }); // { shape: { type: "rect", ... }, mode: "replace" }
+ */
+export default class Lasso extends EventTarget {
+    private drawing?;
+    /** Whether a shape is in progress */
+    get active(): boolean;
+    /** The shape in progress, for drawing its outline: rectangles/ellipses, or the polygon/freeform path including the pointer */
+    get preview(): MaskShape | undefined;
+    /** Polygon nodes placed so far (for drawing handles) */
+    get nodes(): readonly Point[];
+    /**
+     * Pointer pressed.
+     *
+     * @param nearFirstNode - whether the pointer is within closing distance of the polygon's first node (on screen)
+     */
+    down(kind: LassoKind, point: Point, keys: LassoKeys, nearFirstNode: boolean): LassoResult;
+    /**
+     * Pointer moved (with or without the button held).
+     */
+    move(point: Point, keys: LassoKeys): void;
+    /**
+     * Pointer released: finishes rectangle, circle and freeform shapes. Polygons continue until closed.
+     */
+    up(point: Point, keys?: LassoKeys): LassoResult;
+    /**
+     * Finish a polygon or freeform shape (double-click, Enter, or clicking the first node). Shapes with fewer than three points are abandoned.
+     */
+    close(): LassoResult;
+    /**
+     * Abandon the shape in progress (Escape).
+     */
+    cancel(): void;
+    /**
+     * Turn a finished rectangle or circle into a shape, or undefined if it has no size.
+     */
+    private shapeFrom;
+    /**
+     * Dispatch a `change` event (so the outline in progress redraws).
+     */
+    private notify;
+}

package/dist/lib/selection/Lasso/index.js

@@ -0,0 +1,156 @@
+import { isNear, maskModeFor, rectFromCorners, snapAngle } from "../geometry/index.js";
+// src/lib/selection/Lasso/index.ts
+/** Smallest freeform distance between recorded points, in canvas pixels */
+var FREEFORM_STEP = 1;
+/**
+* Lasso tool behaviour, independent of the screen: builds rectangle, circle, polygon and freeform mask shapes from pointer input.
+*
+* - The keys held when a shape starts choose the mode: Shift adds, Alt subtracts, otherwise it replaces.
+* - Rectangle/circle: drag; Shift while dragging keeps sides equal. A click without dragging deselects (in replace mode).
+* - Polygon: click to add nodes; Shift snaps the next line to 45°; clicking near the first node, double-clicking or `close()` finishes it.
+* - Freeform: drag; releasing finishes it.
+* - `cancel()` (Escape) abandons the shape in progress.
+*
+* @example
+* lasso.down("rectangle", { x: 10, y: 10 }, keys, false);
+* lasso.move({ x: 50, y: 30 }, keys);
+* const result = lasso.up({ x: 50, y: 30 }); // { shape: { type: "rect", ... }, mode: "replace" }
+*/
+var Lasso = class extends EventTarget {
+	drawing;
+	/** Whether a shape is in progress */
+	get active() {
+		return this.drawing !== void 0;
+	}
+	/** The shape in progress, for drawing its outline: rectangles/ellipses, or the polygon/freeform path including the pointer */
+	get preview() {
+		const d = this.drawing;
+		if (!d) return void 0;
+		switch (d.kind) {
+			case "rectangle": return {
+				type: "rect",
+				rect: rectFromCorners(d.start, d.current, d.constrain)
+			};
+			case "circle": return {
+				type: "ellipse",
+				rect: rectFromCorners(d.start, d.current, d.constrain)
+			};
+			case "polygon": return {
+				type: "polygon",
+				points: [...d.points, d.current]
+			};
+			default: return {
+				type: "polygon",
+				points: d.points
+			};
+		}
+	}
+	/** Polygon nodes placed so far (for drawing handles) */
+	get nodes() {
+		return this.drawing?.kind === "polygon" ? this.drawing.points : [];
+	}
+	/**
+	* Pointer pressed.
+	*
+	* @param nearFirstNode - whether the pointer is within closing distance of the polygon's first node (on screen)
+	*/
+	down(kind, point, keys, nearFirstNode) {
+		const d = this.drawing;
+		if (d?.kind === "polygon" && kind === "polygon") {
+			if (nearFirstNode && d.points.length >= 3) return this.close();
+			d.points.push(d.current);
+			this.notify();
+			return;
+		}
+		this.drawing = {
+			kind,
+			mode: maskModeFor(keys),
+			start: point,
+			points: [point],
+			current: point,
+			constrain: false
+		};
+		this.notify();
+	}
+	/**
+	* Pointer moved (with or without the button held).
+	*/
+	move(point, keys) {
+		const d = this.drawing;
+		if (!d) return;
+		if (d.kind === "polygon") d.current = keys.shiftKey ? snapAngle(d.points.at(-1), point) : point;
+		else {
+			d.current = point;
+			d.constrain = keys.shiftKey;
+			const last = d.points.at(-1);
+			if (d.kind === "freeform" && !isNear(last, point, FREEFORM_STEP)) d.points.push(point);
+		}
+		this.notify();
+	}
+	/**
+	* Pointer released: finishes rectangle, circle and freeform shapes. Polygons continue until closed.
+	*/
+	up(point, keys = {
+		shiftKey: false,
+		altKey: false
+	}) {
+		const d = this.drawing;
+		if (!d || d.kind === "polygon") return void 0;
+		this.move(point, keys);
+		if (d.kind === "freeform") return this.close();
+		this.drawing = void 0;
+		this.notify();
+		const shape = this.shapeFrom(d);
+		if (shape) return {
+			shape,
+			mode: d.mode
+		};
+		return d.mode === "replace" ? { deselect: true } : void 0;
+	}
+	/**
+	* Finish a polygon or freeform shape (double-click, Enter, or clicking the first node). Shapes with fewer than three points are abandoned.
+	*/
+	close() {
+		const d = this.drawing;
+		if (!d) return void 0;
+		this.drawing = void 0;
+		this.notify();
+		const points = d.points.filter((p, i) => i === 0 || !isNear(p, d.points[i - 1], .5));
+		return points.length >= 3 ? {
+			shape: {
+				type: "polygon",
+				points
+			},
+			mode: d.mode
+		} : void 0;
+	}
+	/**
+	* Abandon the shape in progress (Escape).
+	*/
+	cancel() {
+		if (!this.drawing) return;
+		this.drawing = void 0;
+		this.notify();
+	}
+	/**
+	* Turn a finished rectangle or circle into a shape, or undefined if it has no size.
+	*/
+	shapeFrom(d) {
+		const rect = rectFromCorners(d.start, d.current, d.constrain);
+		if (rect.width < 1 || rect.height < 1) return void 0;
+		return d.kind === "circle" ? {
+			type: "ellipse",
+			rect
+		} : {
+			type: "rect",
+			rect
+		};
+	}
+	/**
+	* Dispatch a `change` event (so the outline in progress redraws).
+	*/
+	notify() {
+		this.dispatchEvent(new Event("change"));
+	}
+};
+export { Lasso as default };

package/dist/lib/selection/Selection/index.d.ts

@@ -0,0 +1,86 @@
+import type Layer from "../../classes/Layer";
+import type { Point, Rect } from "../../classes/Viewport";
+import { type CanvasFactory } from "../../classes/Layer";
+import { type OutlineLoop } from "../../rendering/outline";
+import type { MaskMode } from "../geometry";
+/** A shape drawn with a lasso tool, in canvas pixels */
+export type MaskShape = {
+    type: "rect";
+    rect: Rect;
+} | {
+    type: "ellipse";
+    rect: Rect;
+} | {
+    type: "polygon";
+    points: Point[];
+};
+/**
+ * Bounding box of a shape.
+ */
+export declare const shapeBounds: (shape: MaskShape) => Rect;
+/**
+ * The current mask: a canvas-sized greyscale area (stored as alpha) that limits where drawing applies. Only ever local.
+ *
+ * Shapes and layer alpha replace, add to or subtract from it. After each change the mask is measured once to find whether it is
+ * empty and to trace its outline (for the animated "crawling ants").
+ *
+ * Dispatches a `change` event whenever the mask changes.
+ *
+ * @example
+ * selection.apply({ type: "rect", rect: { x: 10, y: 10, width: 100, height: 50 } }, "replace");
+ * selection.active; // true
+ * selection.outline; // closed loops in canvas pixels
+ */
+export default class Selection extends EventTarget {
+    /** Canvas width in pixels */
+    readonly width: number;
+    /** Canvas height in pixels */
+    readonly height: number;
+    /** Whether a non-empty mask exists */
+    active: boolean;
+    /** Outline of the mask as closed loops in canvas pixels */
+    outline: OutlineLoop[];
+    private readonly createCanvas;
+    private maskCanvas?;
+    /** Area that may contain masked pixels */
+    private bounds?;
+    constructor(width: number, height: number, createCanvas?: CanvasFactory);
+    /** The mask canvas (alpha = mask value) while a mask is active, for limiting drawing */
+    get mask(): OffscreenCanvas | undefined;
+    /** The mask canvas's drawing context (creating the canvas on first use) */
+    private get context();
+    /**
+     * Replace, add to or subtract from the mask with a lasso shape.
+     */
+    apply(shape: MaskShape, mode: MaskMode): void;
+    /**
+     * Move part of the mask along with transformed pixels: removes the piece from where it was and draws it at its new place.
+     *
+     * @param draw - draws the piece in its new place (e.g. `drawTransformed`)
+     */
+    moveArea(piece: OffscreenCanvas, from: Rect, to: Rect, draw: (ctx: OffscreenCanvasRenderingContext2D) => void): void;
+    /**
+     * Mask the whole canvas ("cmd + a").
+     */
+    selectAll(): void;
+    /**
+     * Invert the mask: masked parts become unmasked and the rest becomes masked. Without a mask, everything is masked.
+     */
+    invert(): void;
+    /**
+     * Mask a layer's visible pixels, following their alpha (Cmd/Ctrl + click a layer's name).
+     */
+    fromAlpha(layer: Layer, mode?: MaskMode): void;
+    /**
+     * Remove the mask ("cmd + d").
+     */
+    clear(): void;
+    /**
+     * Draw onto the mask with a mode's operation, then re-measure it.
+     */
+    private draw;
+    /**
+     * Check whether the mask has any pixels and trace its outline, within its bounds.
+     */
+    private measure;
+}

package/dist/lib/selection/Selection/index.js

@@ -0,0 +1,228 @@
+import { createOffscreenCanvas } from "../../classes/Layer/index.js";
+import { chainSegments, traceOutline } from "../../rendering/outline/index.js";
+// src/lib/selection/Selection/index.ts
+/** Canvas composite operation for each mask mode */
+var OPERATIONS = {
+	replace: "source-over",
+	add: "source-over",
+	subtract: "destination-out"
+};
+/**
+* Bounding box of a shape.
+*/
+var shapeBounds = (shape) => {
+	if (shape.type !== "polygon") return shape.rect;
+	const xs = shape.points.map((p) => p.x);
+	const ys = shape.points.map((p) => p.y);
+	const x = Math.min(...xs);
+	const y = Math.min(...ys);
+	return {
+		x,
+		y,
+		width: Math.max(...xs) - x,
+		height: Math.max(...ys) - y
+	};
+};
+/**
+* The current mask: a canvas-sized greyscale area (stored as alpha) that limits where drawing applies. Only ever local.
+*
+* Shapes and layer alpha replace, add to or subtract from it. After each change the mask is measured once to find whether it is
+* empty and to trace its outline (for the animated "crawling ants").
+*
+* Dispatches a `change` event whenever the mask changes.
+*
+* @example
+* selection.apply({ type: "rect", rect: { x: 10, y: 10, width: 100, height: 50 } }, "replace");
+* selection.active; // true
+* selection.outline; // closed loops in canvas pixels
+*/
+var Selection = class extends EventTarget {
+	/** Canvas width in pixels */
+	width;
+	/** Canvas height in pixels */
+	height;
+	/** Whether a non-empty mask exists */
+	active = false;
+	/** Outline of the mask as closed loops in canvas pixels */
+	outline = [];
+	createCanvas;
+	maskCanvas;
+	/** Area that may contain masked pixels */
+	bounds;
+	constructor(width, height, createCanvas = createOffscreenCanvas) {
+		super();
+		this.width = width;
+		this.height = height;
+		this.createCanvas = createCanvas;
+	}
+	/** The mask canvas (alpha = mask value) while a mask is active, for limiting drawing */
+	get mask() {
+		return this.active ? this.maskCanvas : void 0;
+	}
+	/** The mask canvas's drawing context (creating the canvas on first use) */
+	get context() {
+		this.maskCanvas ??= this.createCanvas(this.width, this.height);
+		return this.maskCanvas.getContext("2d");
+	}
+	/**
+	* Replace, add to or subtract from the mask with a lasso shape.
+	*/
+	apply(shape, mode) {
+		this.draw(mode, shapeBounds(shape), (ctx) => {
+			ctx.beginPath();
+			if (shape.type === "rect") ctx.rect(shape.rect.x, shape.rect.y, shape.rect.width, shape.rect.height);
+			else if (shape.type === "ellipse") {
+				const { x, y, width, height } = shape.rect;
+				ctx.ellipse(x + width / 2, y + height / 2, width / 2, height / 2, 0, 0, Math.PI * 2);
+			} else {
+				shape.points.forEach(({ x, y }, i) => i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y));
+				ctx.closePath();
+			}
+			ctx.fill();
+		});
+	}
+	/**
+	* Move part of the mask along with transformed pixels: removes the piece from where it was and draws it at its new place.
+	*
+	* @param draw - draws the piece in its new place (e.g. `drawTransformed`)
+	*/
+	moveArea(piece, from, to, draw) {
+		if (!this.active) return;
+		const ctx = this.context;
+		ctx.save();
+		ctx.globalCompositeOperation = "destination-out";
+		ctx.drawImage(piece, from.x, from.y);
+		ctx.globalCompositeOperation = "source-over";
+		draw(ctx);
+		ctx.restore();
+		this.bounds = unionRect(this.bounds, to);
+		this.measure();
+		this.dispatchEvent(new Event("change"));
+	}
+	/**
+	* Mask the whole canvas ("cmd + a").
+	*/
+	selectAll() {
+		this.apply({
+			type: "rect",
+			rect: {
+				x: 0,
+				y: 0,
+				width: this.width,
+				height: this.height
+			}
+		}, "replace");
+	}
+	/**
+	* Invert the mask: masked parts become unmasked and the rest becomes masked. Without a mask, everything is masked.
+	*/
+	invert() {
+		if (!this.active) {
+			this.selectAll();
+			return;
+		}
+		const ctx = this.context;
+		ctx.save();
+		ctx.globalCompositeOperation = "xor";
+		ctx.fillStyle = "#000000";
+		ctx.fillRect(0, 0, this.width, this.height);
+		ctx.restore();
+		this.bounds = {
+			x: 0,
+			y: 0,
+			width: this.width,
+			height: this.height
+		};
+		this.measure();
+		this.dispatchEvent(new Event("change"));
+	}
+	/**
+	* Mask a layer's visible pixels, following their alpha (Cmd/Ctrl + click a layer's name).
+	*/
+	fromAlpha(layer, mode = "replace") {
+		this.draw(mode, {
+			x: 0,
+			y: 0,
+			width: this.width,
+			height: this.height
+		}, (ctx) => {
+			ctx.drawImage(layer.canvas, 0, 0);
+		});
+	}
+	/**
+	* Remove the mask ("cmd + d").
+	*/
+	clear() {
+		if (this.maskCanvas) this.context.clearRect(0, 0, this.width, this.height);
+		this.active = false;
+		this.outline = [];
+		this.bounds = void 0;
+		this.dispatchEvent(new Event("change"));
+	}
+	/**
+	* Draw onto the mask with a mode's operation, then re-measure it.
+	*/
+	draw(mode, area, paint) {
+		if (mode === "subtract" && !this.active) return;
+		const ctx = this.context;
+		if (mode === "replace") ctx.clearRect(0, 0, this.width, this.height);
+		ctx.save();
+		ctx.globalCompositeOperation = OPERATIONS[mode];
+		ctx.fillStyle = "#000000";
+		paint(ctx);
+		ctx.restore();
+		if (mode !== "subtract") this.bounds = mode === "replace" || !this.bounds ? area : unionRect(this.bounds, area);
+		this.measure();
+		this.dispatchEvent(new Event("change"));
+	}
+	/**
+	* Check whether the mask has any pixels and trace its outline, within its bounds.
+	*/
+	measure() {
+		const area = this.bounds && clipToCanvas(this.bounds, this.width, this.height);
+		if (!area) {
+			this.active = false;
+			this.outline = [];
+			return;
+		}
+		const pixels = this.context.getImageData(area.x, area.y, area.width, area.height).data;
+		const alpha = new Uint8ClampedArray(area.width * area.height);
+		let any = false;
+		for (let i = 0; i < alpha.length; i++) {
+			const value = pixels[i * 4 + 3];
+			alpha[i] = value;
+			if (value) any = true;
+		}
+		this.active = any;
+		this.outline = any ? chainSegments(traceOutline(alpha, area.width, area.height, { normalise: false })).map((loop) => loop.map((value, i) => value + (i % 2 === 0 ? area.x : area.y))) : [];
+	}
+};
+/**
+* Smallest rectangle containing both rectangles.
+*/
+var unionRect = (a, b) => {
+	const x = Math.min(a.x, b.x);
+	const y = Math.min(a.y, b.y);
+	return {
+		x,
+		y,
+		width: Math.max(a.x + a.width, b.x + b.width) - x,
+		height: Math.max(a.y + a.height, b.y + b.height) - y
+	};
+};
+/**
+* Snap a rectangle outwards to whole pixels (with a 1 px margin for anti-aliasing) and clip it to the canvas.
+*/
+var clipToCanvas = (rect, width, height) => {
+	const x = Math.max(0, Math.floor(rect.x) - 1);
+	const y = Math.max(0, Math.floor(rect.y) - 1);
+	const right = Math.min(width, Math.ceil(rect.x + rect.width) + 1);
+	const bottom = Math.min(height, Math.ceil(rect.y + rect.height) + 1);
+	return right > x && bottom > y ? {
+		x,
+		y,
+		width: right - x,
+		height: bottom - y
+	} : void 0;
+};
+export { Selection as default, shapeBounds };

package/dist/lib/selection/geometry/index.d.ts

@@ -0,0 +1,37 @@
+import type { Point, Rect } from "../../classes/Viewport";
+/** How a new shape combines with the existing mask */
+export type MaskMode = "replace" | "add" | "subtract";
+/** Distance (screen pixels) within which clicking the first polygon node closes the polygon */
+export declare const CLOSE_DISTANCE = 8;
+/**
+ * Choose how a new shape combines with the mask from the keys held when it starts: Shift adds, Alt subtracts, otherwise it replaces.
+ *
+ * @example
+ * maskModeFor({ shiftKey: true, altKey: false }); // "add"
+ */
+export declare const maskModeFor: ({ shiftKey, altKey, }: {
+    shiftKey: boolean;
+    altKey: boolean;
+}) => MaskMode;
+/**
+ * Rectangle between two corner points, whichever way it was dragged. With `square`, the shorter side grows to match the longer one,
+ * keeping the drag direction.
+ *
+ * @example
+ * rectFromCorners({ x: 10, y: 10 }, { x: 0, y: 4 }); // { x: 0, y: 4, width: 10, height: 6 }
+ */
+export declare const rectFromCorners: (start: Point, end: Point, square?: boolean) => Rect;
+/**
+ * Snap a point so the line from `from` runs at a multiple of 45°, keeping the line's length along that direction.
+ *
+ * @example
+ * snapAngle({ x: 0, y: 0 }, { x: 10, y: 1 }); // { x: 10, y: 0 }
+ */
+export declare const snapAngle: (from: Point, to: Point) => Point;
+/**
+ * Check whether two points are within a distance of each other.
+ *
+ * @example
+ * isNear({ x: 0, y: 0 }, { x: 3, y: 4 }, 5); // true
+ */
+export declare const isNear: (a: Point, b: Point, distance: number) => boolean;

package/dist/lib/selection/geometry/index.js

@@ -0,0 +1,57 @@
+// src/lib/selection/geometry/index.ts
+/** Distance (screen pixels) within which clicking the first polygon node closes the polygon */
+var CLOSE_DISTANCE = 8;
+/**
+* Choose how a new shape combines with the mask from the keys held when it starts: Shift adds, Alt subtracts, otherwise it replaces.
+*
+* @example
+* maskModeFor({ shiftKey: true, altKey: false }); // "add"
+*/
+var maskModeFor = ({ shiftKey, altKey }) => altKey ? "subtract" : shiftKey ? "add" : "replace";
+/**
+* Rectangle between two corner points, whichever way it was dragged. With `square`, the shorter side grows to match the longer one,
+* keeping the drag direction.
+*
+* @example
+* rectFromCorners({ x: 10, y: 10 }, { x: 0, y: 4 }); // { x: 0, y: 4, width: 10, height: 6 }
+*/
+var rectFromCorners = (start, end, square = false) => {
+	let dx = end.x - start.x;
+	let dy = end.y - start.y;
+	if (square) {
+		const size = Math.max(Math.abs(dx), Math.abs(dy));
+		dx = Math.sign(dx || 1) * size;
+		dy = Math.sign(dy || 1) * size;
+	}
+	return {
+		x: Math.min(start.x, start.x + dx),
+		y: Math.min(start.y, start.y + dy),
+		width: Math.abs(dx),
+		height: Math.abs(dy)
+	};
+};
+/**
+* Snap a point so the line from `from` runs at a multiple of 45°, keeping the line's length along that direction.
+*
+* @example
+* snapAngle({ x: 0, y: 0 }, { x: 10, y: 1 }); // { x: 10, y: 0 }
+*/
+var snapAngle = (from, to) => {
+	const dx = to.x - from.x;
+	const dy = to.y - from.y;
+	const length = Math.hypot(dx, dy);
+	const angle = Math.round(Math.atan2(dy, dx) / (Math.PI / 4)) * (Math.PI / 4);
+	const round = (value) => Math.round(value * 1e9) / 1e9;
+	return {
+		x: round(from.x + Math.cos(angle) * length),
+		y: round(from.y + Math.sin(angle) * length)
+	};
+};
+/**
+* Check whether two points are within a distance of each other.
+*
+* @example
+* isNear({ x: 0, y: 0 }, { x: 3, y: 4 }, 5); // true
+*/
+var isNear = (a, b, distance) => Math.hypot(a.x - b.x, a.y - b.y) <= distance;
+export { CLOSE_DISTANCE, isNear, maskModeFor, rectFromCorners, snapAngle };

package/dist/lib/storage/index.d.ts

@@ -0,0 +1,63 @@
+import type { LayerConfig } from "../classes/Layer";
+/** Version of a saved drawing's shape, so drawings saved by other versions can be recognised */
+export declare const SAVED_DRAWING_VERSION = 1;
+/** Name of the IndexedDB database `IndexedDbLayerStore` keeps drawings in */
+export declare const DATABASE_NAME = "paintcanvas";
+/** A saved layer's settings (its pixels are kept separately, as a PNG) */
+export type SavedLayer = Required<LayerConfig>;
+/** A saved drawing: its size, its layers (top first) without their pixels, and the selected layer */
+export interface SavedDrawing {
+    /** The shape's version (see `SAVED_DRAWING_VERSION`) */
+    version: number;
+    width: number;
+    height: number;
+    layers: SavedLayer[];
+    /** ID of the selected layer */
+    activeLayer: string;
+}
+/** A saved drawing with each layer's pixels as a PNG, by layer ID */
+export interface SavedDrawingWithImages {
+    drawing: SavedDrawing;
+    images: Map<string, Blob>;
+}
+/** Where a drawing's layers are kept (see `IndexedDbLayerStore`) */
+export interface LayerStoreLike {
+    /** The drawing's name. Windows using the same name share the drawing, so only one draws at a time. */
+    readonly name: string;
+    /** The saved drawing, or undefined if none was saved */
+    load(): Promise<SavedDrawingWithImages | undefined>;
+    /**
+     * Save the drawing and the images of the layers that changed (by layer ID). Images of layers no longer in the
+     * drawing are deleted.
+     */
+    save(drawing: SavedDrawing, images: ReadonlyMap<string, Blob>): Promise<void>;
+    /** Delete the saved drawing */
+    clear(): Promise<void>;
+}
+/**
+ * Keeps drawings in the browser's IndexedDB database (`DATABASE_NAME`), each under its own name: the drawing in one
+ * record, and each layer's pixels as a PNG in its own record, so saving rewrites only the layers that changed.
+ *
+ * @example
+ * const canvas = new PaintCanvas({ layerStore: new IndexedDbLayerStore("my-drawing") });
+ */
+export default class IndexedDbLayerStore implements LayerStoreLike {
+    readonly name: string;
+    private readonly factory;
+    private database?;
+    /**
+     * @param name - the drawing's name
+     * @param factory - the IndexedDB to use (the browser's by default)
+     */
+    constructor(name: string, factory?: IDBFactory);
+    load(): Promise<SavedDrawingWithImages | undefined>;
+    save(drawing: SavedDrawing, images: ReadonlyMap<string, Blob>): Promise<void>;
+    clear(): Promise<void>;
+    /**
+     * Open the database (once), creating its object stores the first time. If it can't be opened, the next call tries
+     * again.
+     */
+    private open;
+    /** The keys of this drawing's layer images: `[name, layerId]` (arrays sort after strings) */
+    private imageKeys;
+}