@lvl99dotcom/paintcanvas 0.4.0 → 0.6.0

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

@@ -1,5 +1,17 @@
 import { type default as PaintCanvas } from "../PaintCanvas";
 import { type ShortcutAction } from "../../utils/shortcuts";
+/**
+ * How long (milliseconds) the paste shortcut waits for the browser's `paste` event (which carries other apps' images)
+ * before pasting the image data copied here
+ */
+export declare const PASTE_EVENT_WAIT_MS = 50;
+/**
+ * The first image in a paste's clipboard data (e.g. copied in another app), if any.
+ *
+ * @example
+ * pastedImage(event.clipboardData); // File of type "image/png", or undefined
+ */
+export declare const pastedImage: (data: DataTransfer | null) => File | undefined;
 /** Event dispatched on the window for shortcut actions handled elsewhere (e.g. saving) */
 export declare const SHORTCUT_EVENT = "pc-shortcut";
 /**
@@ -9,7 +21,10 @@ export declare const SHORTCUT_EVENT = "pc-shortcut";
  *
  * Tool selection, brush/eraser size and opacity, interface visibility, select all/invert/deselect, undo/redo,
  * cut/copy/paste, deleting the masked image data (Delete or Backspace), fills, swapping colours, zooming, layer opacity
- * and finishing or cancelling a lasso shape are handled here; other actions (and Escape/Enter for later features)
+ * and finishing or cancelling a lasso shape are handled here. Pasting (the shortcut, or the browser's own paste, e.g. from
+ * its Edit menu) pastes the image data copied here, unless the window has lost focus since it was copied and the
+ * clipboard has an image (e.g. copied in another app): that image is pasted instead (see `PaintCanvas.pasteImage`).
+ * Other actions other actions (and Escape/Enter for later features)
  * dispatch an `pc-shortcut` event with the action as `detail`. Holding the hold-to-pan key (Space by default) pans
  * temporarily; releasing it returns to the selected tool.
  *
@@ -24,8 +39,15 @@ export default class KeyboardShortcuts {
     private heldKey?;
     private readonly onKeyDown;
     private readonly onKeyUp;
+    /** Turns pasted image files into images (replaceable for tests) */
+    private readonly decodeImage;
+    /** `app.copyCount` when the window last lost focus: copies since then were made here */
+    private copiesBeforeBlur;
+    /** Pastes the image data copied here if the browser doesn't fire `paste` soon after the shortcut */
+    private pasteTimer?;
     private readonly onBlur;
-    constructor(app: PaintCanvas);
+    private readonly onPaste;
+    constructor(app: PaintCanvas, decodeImage?: (blob: Blob) => Promise<ImageBitmap>);
     /**
      * Start listening for key presses on a target (usually `window`).
      */
@@ -38,6 +60,13 @@ export default class KeyboardShortcuts {
      * Run the shortcut for a key press, if any. Returns the action run.
      */
     handle(event: KeyboardEvent): ShortcutAction | undefined;
+    /**
+     * Paste from the browser's `paste` event: the image data copied here if it was copied since the window last lost
+     * focus (or the clipboard has no image), otherwise the clipboard's image. Ignored in text fields and open dialogs.
+     */
+    handlePaste(event: ClipboardEvent): Promise<void>;
+    /** Stop waiting for the browser's `paste` event */
+    private cancelPasteTimer;
     /**
      * Return to the selected tool when the hold-to-pan key is released (whatever modifiers are held by then).
      */

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

@@ -7,6 +7,18 @@ import { comboFromEvent, isTypingTarget, sameCombo } from "../../utils/shortcuts
 * Escape is left to close it.
 */
 var inOpenDialog = (path) => path.some((target) => target instanceof HTMLDialogElement && target.open);
+/**
+* How long (milliseconds) the paste shortcut waits for the browser's `paste` event (which carries other apps' images)
+* before pasting the image data copied here
+*/
+var PASTE_EVENT_WAIT_MS = 50;
+/**
+* The first image in a paste's clipboard data (e.g. copied in another app), if any.
+*
+* @example
+* pastedImage(event.clipboardData); // File of type "image/png", or undefined
+*/
+var pastedImage = (data) => [...data?.files ?? []].find((file) => file.type.startsWith("image/"));
 /** Event dispatched on the window for shortcut actions handled elsewhere (e.g. saving) */
 var SHORTCUT_EVENT = "pc-shortcut";
 /**
@@ -16,7 +28,10 @@ var SHORTCUT_EVENT = "pc-shortcut";
 *
 * Tool selection, brush/eraser size and opacity, interface visibility, select all/invert/deselect, undo/redo,
 * cut/copy/paste, deleting the masked image data (Delete or Backspace), fills, swapping colours, zooming, layer opacity
-* and finishing or cancelling a lasso shape are handled here; other actions (and Escape/Enter for later features)
+* and finishing or cancelling a lasso shape are handled here. Pasting (the shortcut, or the browser's own paste, e.g. from
+* its Edit menu) pastes the image data copied here, unless the window has lost focus since it was copied and the
+* clipboard has an image (e.g. copied in another app): that image is pasted instead (see `PaintCanvas.pasteImage`).
+* Other actions other actions (and Escape/Enter for later features)
 * dispatch an `pc-shortcut` event with the action as `detail`. Holding the hold-to-pan key (Space by default) pans
 * temporarily; releasing it returns to the selected tool.
 *
@@ -31,9 +46,20 @@ var KeyboardShortcuts = class {
 	heldKey;
 	onKeyDown = (event) => this.handle(event);
 	onKeyUp = (event) => this.handleKeyUp(event);
-	onBlur = () => this.release();
-	constructor(app) {
+	/** Turns pasted image files into images (replaceable for tests) */
+	decodeImage;
+	/** `app.copyCount` when the window last lost focus: copies since then were made here */
+	copiesBeforeBlur = 0;
+	/** Pastes the image data copied here if the browser doesn't fire `paste` soon after the shortcut */
+	pasteTimer;
+	onBlur = () => {
+		this.release();
+		this.copiesBeforeBlur = this.app.copyCount;
+	};
+	onPaste = (event) => void this.handlePaste(event);
+	constructor(app, decodeImage = (blob) => createImageBitmap(blob)) {
 		this.app = app;
+		this.decodeImage = decodeImage;
 	}
 	/**
 	* Start listening for key presses on a target (usually `window`).
@@ -44,6 +70,7 @@ var KeyboardShortcuts = class {
 		target.addEventListener("keydown", this.onKeyDown);
 		target.addEventListener("keyup", this.onKeyUp);
 		target.addEventListener("blur", this.onBlur);
+		target.addEventListener("paste", this.onPaste);
 	}
 	/**
 	* Stop listening for key presses.
@@ -52,7 +79,9 @@ var KeyboardShortcuts = class {
 		this.target?.removeEventListener("keydown", this.onKeyDown);
 		this.target?.removeEventListener("keyup", this.onKeyUp);
 		this.target?.removeEventListener("blur", this.onBlur);
+		this.target?.removeEventListener("paste", this.onPaste);
 		this.target = null;
+		this.cancelPasteTimer();
 	}
 	/**
 	* Run the shortcut for a key press, if any. Returns the action run.
@@ -71,11 +100,44 @@ var KeyboardShortcuts = class {
 		}
 		const action = shortcuts.find((shortcut) => sameCombo(shortcut, combo))?.action;
 		if (!action) return void 0;
+		if (action.type === "paste") {
+			this.cancelPasteTimer();
+			this.pasteTimer = setTimeout(() => {
+				this.pasteTimer = void 0;
+				this.app.paste();
+			}, 50);
+			return action;
+		}
 		event.preventDefault();
 		this.run(action);
 		return action;
 	}
 	/**
+	* Paste from the browser's `paste` event: the image data copied here if it was copied since the window last lost
+	* focus (or the clipboard has no image), otherwise the clipboard's image. Ignored in text fields and open dialogs.
+	*/
+	async handlePaste(event) {
+		const path = event.composedPath();
+		if (isTypingTarget(path[0] ?? event.target) || inOpenDialog(path)) return;
+		this.cancelPasteTimer();
+		event.preventDefault();
+		const app = this.app;
+		const image = pastedImage(event.clipboardData);
+		const copiedHere = app.copyCount > this.copiesBeforeBlur;
+		if (!image || copiedHere && app.hasClipboard) {
+			app.paste();
+			return;
+		}
+		try {
+			app.pasteImage(await this.decodeImage(image));
+		} catch {}
+	}
+	/** Stop waiting for the browser's `paste` event */
+	cancelPasteTimer() {
+		clearTimeout(this.pasteTimer);
+		this.pasteTimer = void 0;
+	}
+	/**
 	* Return to the selected tool when the hold-to-pan key is released (whatever modifiers are held by then).
 	*/
 	handleKeyUp(event) {
@@ -197,4 +259,4 @@ var KeyboardShortcuts = class {
 		(this.target ?? this.app).dispatchEvent(new CustomEvent(SHORTCUT_EVENT, { detail: action }));
 	}
 };
-export { SHORTCUT_EVENT, KeyboardShortcuts as default };
+export { PASTE_EVENT_WAIT_MS, SHORTCUT_EVENT, KeyboardShortcuts as default, pastedImage };

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

@@ -29,6 +29,16 @@ export type CanvasFactory = (width: number, height: number) => OffscreenCanvas;
  * Create an `OffscreenCanvas` of the given size.
  */
 export declare const createOffscreenCanvas: CanvasFactory;
+/**
+ * Create an `OffscreenCanvas` whose pixels are kept in regular memory rather than on the GPU (its 2D context is made
+ * with `willReadFrequently`). Reading its pixels, encoding it and copying it are then plain memory copies, which on
+ * phones avoids long stalls waiting for the GPU (up to 15 seconds were seen on an iPhone), at the cost of drawing on
+ * the CPU. PaintCanvas makes its canvases this way by default.
+ *
+ * @example
+ * const canvas = createMemoryCanvas(2000, 2000);
+ */
+export declare const createMemoryCanvas: CanvasFactory;
 /**
  * Clamp an opacity value to 0–1.
  *

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

@@ -16,6 +16,20 @@ var MAX_LAYER_NAME_LENGTH = 64;
 */
 var createOffscreenCanvas = (width, height) => new OffscreenCanvas(width, height);
 /**
+* Create an `OffscreenCanvas` whose pixels are kept in regular memory rather than on the GPU (its 2D context is made
+* with `willReadFrequently`). Reading its pixels, encoding it and copying it are then plain memory copies, which on
+* phones avoids long stalls waiting for the GPU (up to 15 seconds were seen on an iPhone), at the cost of drawing on
+* the CPU. PaintCanvas makes its canvases this way by default.
+*
+* @example
+* const canvas = createMemoryCanvas(2000, 2000);
+*/
+var createMemoryCanvas = (width, height) => {
+	const canvas = new OffscreenCanvas(width, height);
+	canvas.getContext("2d", { willReadFrequently: true });
+	return canvas;
+};
+/**
 * Clamp an opacity value to 0–1.
 *
 * @example
@@ -108,4 +122,4 @@ var Layer = class {
 		};
 	}
 };
-export { BlendMode, MAX_LAYER_NAME_LENGTH, clampOpacity, createOffscreenCanvas, Layer as default };
+export { BlendMode, MAX_LAYER_NAME_LENGTH, clampOpacity, createMemoryCanvas, createOffscreenCanvas, Layer as default };

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

@@ -34,7 +34,7 @@ export interface AutosaveOptions {
     locks?: LockManager | null;
     /** Tells when the page is hidden or shown again (the page's document by default) */
     document?: Pick<Document, "visibilityState" | "addEventListener" | "removeEventListener"> | null;
-    /** Turns a layer's canvas into a PNG (replaceable for tests) */
+    /** Turns a layer's canvas into a PNG (in a background worker by default; replaceable for tests) */
     encode?: (canvas: OffscreenCanvas) => Promise<Blob>;
     /** Turns a saved PNG into an image to draw (replaceable for tests) */
     decode?: (image: Blob) => Promise<CanvasImageSource>;
@@ -44,8 +44,8 @@ export interface AutosaveOptions {
 /**
  * Keeps a canvas's layers in a store, so the drawing survives reloading the page: restores the saved drawing when it
  * starts, then saves soon after the layers change (once drawing pauses), and straight away when the page is hidden.
- * Only layers whose pixels changed are encoded and saved again; a quick fingerprint of each layer's pixels tells
- * which.
+ * Only layers whose pixels changed are encoded and saved again: the layers' change counts tell which (see
+ * `LayerStack.pixelVersion`), without reading their pixels, which is slow on phones.
  *
  * Only one window draws on a drawing at a time: the first to start has it, and others wait in the `elsewhere` state
  * (the UI blocks drawing there). When the page is shown again it tries again, and `takeOver` takes the drawing from
@@ -74,14 +74,10 @@ export default class LayerAutosave extends EventTarget {
     private readonly delayMs;
     /** The layers being watched for changes */
     private watched?;
-    /** Fingerprints of each layer's pixels as last saved, by layer ID */
-    private prints;
+    /** Each layer as last saved, by layer ID: the layer itself and its change count (see `LayerStack.pixelVersion`) */
+    private saved;
     /** Size in bytes of each layer's image as last saved or restored, by layer ID */
     private sizes;
-    /** Layers whose pixels changed since the last save */
-    private changed;
-    /** Whether any layer may have changed since the last save (not only those in `changed`) */
-    private checkAll;
     private timer?;
     /** The save being written, if any */
     private saving?;
@@ -133,11 +129,13 @@ export default class LayerAutosave extends EventTarget {
      */
     private restore;
     /**
-     * Remember each layer's pixels as saved (just restored).
+     * Remember each layer as saved (just restored).
      */
     private remember;
+    /** A layer and its change count, to tell later whether it changed */
+    private record;
     /**
-     * Save the drawing, encoding only the layers whose pixels changed since they were last saved.
+     * Save the drawing, encoding only the layers whose pixels changed since they were last saved (or that are new).
      */
     private write;
     /**
@@ -145,10 +143,6 @@ export default class LayerAutosave extends EventTarget {
      * changed.
      */
     private rememberSizes;
-    /**
-     * A fingerprint of a layer's pixels.
-     */
-    private fingerprint;
     /**
      * Save once the layers have stopped changing for a moment and drawing pauses.
      */

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

@@ -1,4 +1,4 @@
-import { pixelFingerprint } from "../../image/index.js";
+import PngEncoder from "../PngEncoder/index.js";
 import "../../storage/index.js";
 // src/lib/classes/LayerAutosave/index.ts
 /** How long to wait after the layers change before saving, so quick changes are saved together (milliseconds) */
@@ -18,12 +18,14 @@ var AutosaveState = {
 	/** Not saving any more (see `stop`) */
 	Stopped: "stopped"
 };
+/** Encodes layers as PNGs in a background worker, shared by every autosave on the page (made on first use) */
+var sharedEncoder;
 /**
-* Encode a canvas as a PNG.
+* Encode a canvas as a PNG, in a background worker where one can be used, so saving doesn't freeze the page.
 */
 var encodePng = (canvas) => {
-	canvas.getContext("2d");
-	return canvas.convertToBlob({ type: "image/png" });
+	sharedEncoder ??= new PngEncoder();
+	return sharedEncoder.encode(canvas);
 };
 /**
 * Whether a saved drawing has the expected shape and an image for each layer.
@@ -32,8 +34,8 @@ var isComplete = (drawing, images) => drawing.version === 1 && drawing.layers.le
 /**
 * Keeps a canvas's layers in a store, so the drawing survives reloading the page: restores the saved drawing when it
 * starts, then saves soon after the layers change (once drawing pauses), and straight away when the page is hidden.
-* Only layers whose pixels changed are encoded and saved again; a quick fingerprint of each layer's pixels tells
-* which.
+* Only layers whose pixels changed are encoded and saved again: the layers' change counts tell which (see
+* `LayerStack.pixelVersion`), without reading their pixels, which is slow on phones.
 *
 * Only one window draws on a drawing at a time: the first to start has it, and others wait in the `elsewhere` state
 * (the UI blocks drawing there). When the page is shown again it tries again, and `takeOver` takes the drawing from
@@ -62,14 +64,10 @@ var LayerAutosave = class extends EventTarget {
 	delayMs;
 	/** The layers being watched for changes */
 	watched;
-	/** Fingerprints of each layer's pixels as last saved, by layer ID */
-	prints = /* @__PURE__ */ new Map();
+	/** Each layer as last saved, by layer ID: the layer itself and its change count (see `LayerStack.pixelVersion`) */
+	saved = /* @__PURE__ */ new Map();
 	/** Size in bytes of each layer's image as last saved or restored, by layer ID */
 	sizes = /* @__PURE__ */ new Map();
-	/** Layers whose pixels changed since the last save */
-	changed = /* @__PURE__ */ new Set();
-	/** Whether any layer may have changed since the last save (not only those in `changed`) */
-	checkAll = false;
 	timer;
 	/** The save being written, if any */
 	saving;
@@ -77,12 +75,7 @@ var LayerAutosave = class extends EventTarget {
 	again = false;
 	/** Lets go of the drawing's lock, while held */
 	release;
-	onLayersChange = () => {
-		const id = this.watched?.changedLayerId;
-		if (id) this.changed.add(id);
-		else this.checkAll = true;
-		this.schedule();
-	};
+	onLayersChange = () => this.schedule();
 	onCanvasChange = () => {
 		if (this.canvas.layers === this.watched) return;
 		this.watch();
@@ -202,7 +195,7 @@ var LayerAutosave = class extends EventTarget {
 			return;
 		}
 		if (this.currentState !== AutosaveState.Starting) return;
-		this.prints = /* @__PURE__ */ new Map();
+		this.saved = /* @__PURE__ */ new Map();
 		this.watch();
 		if (restored) this.remember();
 		this.setState(AutosaveState.Ready);
@@ -222,29 +215,32 @@ var LayerAutosave = class extends EventTarget {
 		return true;
 	}
 	/**
-	* Remember each layer's pixels as saved (just restored).
+	* Remember each layer as saved (just restored).
 	*/
 	remember() {
-		for (const layer of this.canvas.layers.layers) this.prints.set(layer.id, this.fingerprint(layer.id));
-		this.changed.clear();
-		this.checkAll = false;
+		const stack = this.canvas.layers;
+		for (const layer of stack.layers) this.saved.set(layer.id, this.record(layer));
+	}
+	/** A layer and its change count, to tell later whether it changed */
+	record(layer) {
+		return {
+			layer,
+			version: this.canvas.layers.pixelVersion(layer.id)
+		};
 	}
 	/**
-	* Save the drawing, encoding only the layers whose pixels changed since they were last saved.
+	* Save the drawing, encoding only the layers whose pixels changed since they were last saved (or that are new).
 	*/
 	async write() {
 		const stack = this.canvas.layers;
-		const { checkAll, changed } = this;
-		this.checkAll = false;
-		this.changed = /* @__PURE__ */ new Set();
-		const prints = /* @__PURE__ */ new Map();
+		const encoded = /* @__PURE__ */ new Map();
 		try {
 			const encoding = [];
 			for (const layer of stack.layers) {
-				if (!!this.prints.has(layer.id) && !checkAll && !changed.has(layer.id)) continue;
-				const print = this.fingerprint(layer.id);
-				if (print === this.prints.get(layer.id)) continue;
-				prints.set(layer.id, print);
+				const record = this.record(layer);
+				const saved = this.saved.get(layer.id);
+				if (saved?.layer === layer && saved.version === record.version) continue;
+				encoded.set(layer.id, record);
 				encoding.push(this.encode(layer.canvas).then((image) => [layer.id, image]));
 			}
 			const drawing = {
@@ -258,13 +254,11 @@ var LayerAutosave = class extends EventTarget {
 			if (this.currentState !== AutosaveState.Ready) return;
 			await this.store.save(drawing, images);
 			const kept = new Set(drawing.layers.map((layer) => layer.id));
-			for (const id of this.prints.keys()) if (!kept.has(id)) this.prints.delete(id);
-			for (const [id, print] of prints) this.prints.set(id, print);
+			for (const id of this.saved.keys()) if (!kept.has(id)) this.saved.delete(id);
+			for (const [id, record] of encoded) this.saved.set(id, record);
 			this.error = void 0;
 			this.rememberSizes(kept, images);
 		} catch (error) {
-			for (const id of [...changed, ...prints.keys()]) this.changed.add(id);
-			this.checkAll ||= checkAll;
 			this.fail(error);
 		}
 	}
@@ -279,13 +273,6 @@ var LayerAutosave = class extends EventTarget {
 		if (this.storedBytes !== before) this.dispatchEvent(new Event("change"));
 	}
 	/**
-	* A fingerprint of a layer's pixels.
-	*/
-	fingerprint(id) {
-		const layer = this.canvas.layers.get(id);
-		return pixelFingerprint(layer.context.getImageData(0, 0, layer.width, layer.height).data);
-	}
-	/**
 	* Save once the layers have stopped changing for a moment and drawing pauses.
 	*/
 	schedule() {

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

@@ -29,6 +29,8 @@ export default class LayerStack extends EventTarget {
     /** The layer the change being announced is about, when only its pixels changed (see `changedLayerId`) */
     private onlyChanged?;
     private readonly createCanvas;
+    /** How many times each layer's image data has been changed through the stack (see `pixelVersion`) */
+    private readonly versions;
     /** Most layers the stack can have */
     readonly maxLayers: number;
     constructor(width: number, height: number, createCanvas?: CanvasFactory, maxLayers?: number);
@@ -71,6 +73,17 @@ export default class LayerStack extends EventTarget {
      * `markChanged`, e.g. a brush stroke); undefined when anything may have changed.
      */
     get changedLayerId(): string | undefined;
+    /**
+     * How many times a layer's image data has been changed through the stack (`markChanged`, `changeImage`, `clear`,
+     * merging into it, and undoing or redoing those), to tell whether it changed since some point without reading its
+     * pixels (which is slow on phones). A new layer starts at 0.
+     *
+     * @example
+     * const before = stack.pixelVersion(id);
+     * stack.markChanged(id);
+     * stack.pixelVersion(id) > before; // true
+     */
+    pixelVersion(id: string): number;
     /**
      * Tell listeners a layer's image data changed (e.g. after a brush stroke), so thumbnails and the map redraw.
      */
@@ -150,6 +163,8 @@ export default class LayerStack extends EventTarget {
      * An undoable change of image data: undo and redo both swap the stored pixels with the layer's, then select the layer.
      */
     private imageEntry;
+    /** Count a change to a layer's image data */
+    private touch;
     /**
      * Create a layer with the stack's size and canvas factory.
      */

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

@@ -31,6 +31,8 @@ var LayerStack = class extends EventTarget {
 	/** The layer the change being announced is about, when only its pixels changed (see `changedLayerId`) */
 	onlyChanged;
 	createCanvas;
+	/** How many times each layer's image data has been changed through the stack (see `pixelVersion`) */
+	versions = /* @__PURE__ */ new WeakMap();
 	/** Most layers the stack can have */
 	maxLayers;
 	constructor(width, height, createCanvas = createOffscreenCanvas, maxLayers = 5) {
@@ -130,10 +132,23 @@ var LayerStack = class extends EventTarget {
 		return this.onlyChanged;
 	}
 	/**
+	* How many times a layer's image data has been changed through the stack (`markChanged`, `changeImage`, `clear`,
+	* merging into it, and undoing or redoing those), to tell whether it changed since some point without reading its
+	* pixels (which is slow on phones). A new layer starts at 0.
+	*
+	* @example
+	* const before = stack.pixelVersion(id);
+	* stack.markChanged(id);
+	* stack.pixelVersion(id) > before; // true
+	*/
+	pixelVersion(id) {
+		return this.versions.get(this.get(id)) ?? 0;
+	}
+	/**
 	* Tell listeners a layer's image data changed (e.g. after a brush stroke), so thumbnails and the map redraw.
 	*/
 	markChanged(id) {
-		this.get(id);
+		this.touch(this.get(id));
 		this.onlyChanged = id;
 		try {
 			this.notify();
@@ -150,6 +165,7 @@ var LayerStack = class extends EventTarget {
 		const area = contentBounds(data, this.width, this.height);
 		if (area) this.recordImage(id, area);
 		layer.clear();
+		this.touch(layer);
 		this.notify();
 	}
 	/**
@@ -174,7 +190,9 @@ var LayerStack = class extends EventTarget {
 	*/
 	changeImage(id, area, change) {
 		this.recordImage(id, area);
-		change(this.get(id).context);
+		const layer = this.get(id);
+		change(layer.context);
+		this.touch(layer);
 		this.notify();
 	}
 	/**
@@ -209,6 +227,7 @@ var LayerStack = class extends EventTarget {
 				ctx.globalCompositeOperation = layer.blendMode;
 				ctx.drawImage(layer.canvas, x, y, width, height, x, y, width, height);
 				ctx.restore();
+				this.touch(below);
 			}
 			this.items = this.items.filter((l) => l !== layer);
 			this.activeId = below.id;
@@ -332,6 +351,7 @@ var LayerStack = class extends EventTarget {
 			ctx.clearRect(area.x, area.y, area.width, area.height);
 			ctx.drawImage(stored, area.x, area.y);
 			stored = current;
+			this.touch(layer);
 			this.select(id);
 		};
 		return {
@@ -339,6 +359,10 @@ var LayerStack = class extends EventTarget {
 			redo: swap
 		};
 	}
+	/** Count a change to a layer's image data */
+	touch(layer) {
+		this.versions.set(layer, this.pixelVersion(layer.id) + 1);
+	}
 	/**
 	* Create a layer with the stack's size and canvas factory.
 	*/