@lvl99dotcom/paintcanvas 0.0.0-stage → 0.2.0

package/dist/lib/storage/index.js

@@ -0,0 +1,114 @@
+// src/lib/storage/index.ts
+/** Version of a saved drawing's shape, so drawings saved by other versions can be recognised */
+var SAVED_DRAWING_VERSION = 1;
+/** Name of the IndexedDB database `IndexedDbLayerStore` keeps drawings in */
+var DATABASE_NAME = "paintcanvas";
+/** Version of the database's object stores */
+var DATABASE_VERSION = 1;
+/** Object store of saved drawings, by name */
+var DRAWINGS = "drawings";
+/** Object store of layer images (PNG blobs), by drawing name and layer ID */
+var IMAGES = "images";
+/**
+* Wait for an IndexedDB request's result.
+*/
+var result = (request) => new Promise((resolve, reject) => {
+	request.onsuccess = () => resolve(request.result);
+	request.onerror = () => reject(request.error);
+});
+/**
+* Wait for an IndexedDB transaction to finish, failing if it's aborted.
+*/
+var completed = (transaction) => new Promise((resolve, reject) => {
+	transaction.oncomplete = () => resolve();
+	transaction.onabort = () => reject(transaction.error ?? /* @__PURE__ */ new Error("Transaction aborted"));
+});
+/**
+* The layer ID in a layer image's key (`[name, layerId]`).
+*/
+var layerIdOf = (key) => key[1];
+/**
+* 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") });
+*/
+var IndexedDbLayerStore = class {
+	name;
+	factory;
+	database;
+	/**
+	* @param name - the drawing's name
+	* @param factory - the IndexedDB to use (the browser's by default)
+	*/
+	constructor(name, factory = indexedDB) {
+		this.name = name;
+		this.factory = factory;
+	}
+	async load() {
+		const transaction = (await this.open()).transaction([DRAWINGS, IMAGES], "readonly");
+		const images = transaction.objectStore(IMAGES);
+		const [drawing, keys, blobs] = await Promise.all([
+			result(transaction.objectStore(DRAWINGS).get(this.name)),
+			result(images.getAllKeys(this.imageKeys())),
+			result(images.getAll(this.imageKeys()))
+		]);
+		if (!drawing) return void 0;
+		return {
+			drawing,
+			images: new Map(keys.map((key, i) => [layerIdOf(key), blobs[i]]))
+		};
+	}
+	async save(drawing, images) {
+		const transaction = (await this.open()).transaction([DRAWINGS, IMAGES], "readwrite");
+		const done = completed(transaction);
+		const store = transaction.objectStore(IMAGES);
+		transaction.objectStore(DRAWINGS).put(drawing, this.name);
+		for (const [id, image] of images) store.put(image, [this.name, id]);
+		const kept = new Set(drawing.layers.map((layer) => layer.id));
+		const keys = store.getAllKeys(this.imageKeys());
+		keys.onsuccess = () => {
+			for (const key of keys.result) if (!kept.has(layerIdOf(key))) store.delete(key);
+		};
+		await done;
+	}
+	async clear() {
+		const transaction = (await this.open()).transaction([DRAWINGS, IMAGES], "readwrite");
+		const done = completed(transaction);
+		transaction.objectStore(DRAWINGS).delete(this.name);
+		transaction.objectStore(IMAGES).delete(this.imageKeys());
+		await done;
+	}
+	/**
+	* Open the database (once), creating its object stores the first time. If it can't be opened, the next call tries
+	* again.
+	*/
+	open() {
+		this.database ??= new Promise((resolve, reject) => {
+			const request = this.factory.open(DATABASE_NAME, DATABASE_VERSION);
+			request.onupgradeneeded = () => {
+				request.result.createObjectStore(DRAWINGS);
+				request.result.createObjectStore(IMAGES);
+			};
+			request.onsuccess = () => {
+				const database = request.result;
+				database.onversionchange = () => {
+					database.close();
+					this.database = void 0;
+				};
+				resolve(database);
+			};
+			request.onerror = () => {
+				this.database = void 0;
+				reject(request.error);
+			};
+		});
+		return this.database;
+	}
+	/** The keys of this drawing's layer images: `[name, layerId]` (arrays sort after strings) */
+	imageKeys() {
+		return IDBKeyRange.bound([this.name], [this.name, []]);
+	}
+};
+export { DATABASE_NAME, SAVED_DRAWING_VERSION, IndexedDbLayerStore as default };

package/dist/lib/transform/Transformer/index.d.ts

@@ -0,0 +1,124 @@
+import type Layer from "../../classes/Layer";
+import type { Rect } from "../../classes/Viewport";
+import { type CanvasFactory } from "../../classes/Layer";
+import type { LayerOverride } from "../../rendering/compositing";
+import { type TransformBox } from "../geometry";
+/** The drawing operations needed to draw transformed pixels */
+type TransformContext = Pick<OffscreenCanvasRenderingContext2D, "save" | "restore" | "translate" | "rotate" | "scale" | "drawImage" | "imageSmoothingEnabled" | "imageSmoothingQuality">;
+/**
+ * Draw an image into a transform box (position, size, rotation and flips), smoothing the pixels.
+ */
+export declare const drawTransformed: (ctx: TransformContext, image: CanvasImageSource, box: TransformBox) => void;
+/**
+ * Bounding box of the visible pixels (alpha above 0), optionally only where a mask is also above 0.
+ *
+ * @param rgba - image data, 4 bytes per pixel
+ * @param maskRgba - mask image data (alpha = mask value), same size
+ *
+ * @example
+ * contentBounds(imageData.data, 100, 100); // { x: 10, y: 20, width: 30, height: 5 }
+ */
+export declare const contentBounds: (rgba: ArrayLike<number>, width: number, height: number, maskRgba?: ArrayLike<number>) => Rect | undefined;
+/**
+ * Copy an area of an image into a new canvas the size of the area.
+ *
+ * @example
+ * copyArea(createOffscreenCanvas, layer.canvas, { x: 10, y: 10, width: 50, height: 20 }); // a 50×20 canvas
+ */
+export declare const copyArea: (createCanvas: CanvasFactory, image: CanvasImageSource, area: Rect) => OffscreenCanvas;
+/**
+ * Cut a copied area down to a mask: only the parts where the mask piece (the same area of the mask) is above 0 are kept,
+ * partly where it is partly.
+ */
+export declare const applyMask: (image: OffscreenCanvas, maskPiece: OffscreenCanvas) => void;
+/**
+ * Moves, scales and rotates a layer's pixels (or only the masked part).
+ *
+ * `prepare` finds the area to transform and shows its box. The first change lifts the pixels off the layer, and `preview` then shows the
+ * layer with them transformed. `commit` writes them back transformed; `cancel` puts the original pixels back.
+ *
+ * `float` shows pasted pixels over a layer instead, ready to transform; `commit` writes them into the layer and `cancel` discards them.
+ *
+ * Dispatches a `change` event whenever the box or preview changes.
+ *
+ * @example
+ * transformer.prepare(layer, selection.mask);
+ * transformer.setBox(moveBox(transformer.box, 20, 0, false));
+ * transformer.commit(); // or transformer.cancel()
+ */
+export default class Transformer extends EventTarget {
+    /** Canvas width in pixels */
+    readonly width: number;
+    /** Canvas height in pixels */
+    readonly height: number;
+    /** Layer being transformed */
+    layer?: Layer;
+    /** Area of the original pixels */
+    source?: Rect;
+    /** Where the pixels are placed now */
+    box?: TransformBox;
+    private mask?;
+    private lifted?;
+    private workingCanvas?;
+    private readonly createCanvas;
+    constructor(width: number, height: number, createCanvas?: CanvasFactory);
+    /** Whether there is something to transform (its box is shown) */
+    get active(): boolean;
+    /** Whether pixels have been lifted and changed (or pasted) but not yet committed */
+    get pending(): boolean;
+    /** Whether the pending pixels were pasted (rather than lifted off the layer) */
+    get pasting(): boolean;
+    /** Width ÷ height of the original area, kept when scaling proportionally */
+    get aspect(): number;
+    /** The layer with the lifted pixels transformed, to draw in its place; undefined until something changes */
+    get preview(): LayerOverride | undefined;
+    /**
+     * Find what to transform on a layer: all its visible pixels, or only those inside the mask. Shows nothing if there are none.
+     */
+    prepare(layer: Layer, mask?: OffscreenCanvas): void;
+    /**
+     * Show pasted pixels over a layer, in an area, ready to transform. They are only written into the layer on `commit`.
+     */
+    float(layer: Layer, image: OffscreenCanvas, area: Rect): void;
+    /**
+     * Place the pixels in a new box, lifting them off the layer first if needed.
+     */
+    setBox(box: TransformBox): void;
+    /**
+     * Write the transformed pixels into the layer. Returns the mask piece and source area so the mask can be moved too, and the
+     * changed area with a copy of its pixels from before the transform (for undo), or undefined if nothing changed. Afterwards
+     * the transformer is empty; call `prepare` again to keep transforming.
+     */
+    commit(): {
+        maskPiece?: OffscreenCanvas;
+        source: Rect;
+        box: TransformBox;
+        area: Rect;
+        before: OffscreenCanvas;
+    } | undefined;
+    /**
+     * Put the original pixels back and return the box to where it started (Escape). Pasted pixels are discarded.
+     */
+    cancel(): void;
+    /**
+     * Forget the current transform without changing the layer.
+     */
+    reset(): void;
+    /**
+     * Copy the pixels to transform off the layer, leaving a hole where they were.
+     */
+    private lift;
+    /**
+     * A copy of the layer's pixels within an area as they were before any pixels were lifted off it.
+     */
+    private original;
+    /**
+     * Redraw the preview: the layer (with the hole) plus the lifted pixels in their box.
+     */
+    private renderPreview;
+    /**
+     * Dispatch a `change` event.
+     */
+    private notify;
+}
+export {};

package/dist/lib/transform/Transformer/index.js

@@ -0,0 +1,286 @@
+import { createOffscreenCanvas } from "../../classes/Layer/index.js";
+import { clipRect, unionRect } from "../../brushes/StrokeEngine/index.js";
+import { boxBounds, boxFromRect } from "../geometry/index.js";
+// src/lib/transform/Transformer/index.ts
+/**
+* Draw an image into a transform box (position, size, rotation and flips), smoothing the pixels.
+*/
+var drawTransformed = (ctx, image, box) => {
+	ctx.save();
+	ctx.imageSmoothingEnabled = true;
+	ctx.imageSmoothingQuality = "high";
+	ctx.translate(box.cx, box.cy);
+	if (box.rotation) ctx.rotate(box.rotation * Math.PI / 180);
+	ctx.scale(box.width < 0 ? -1 : 1, box.height < 0 ? -1 : 1);
+	const width = Math.abs(box.width);
+	const height = Math.abs(box.height);
+	ctx.drawImage(image, -width / 2, -height / 2, width, height);
+	ctx.restore();
+};
+/**
+* Bounding box of the visible pixels (alpha above 0), optionally only where a mask is also above 0.
+*
+* @param rgba - image data, 4 bytes per pixel
+* @param maskRgba - mask image data (alpha = mask value), same size
+*
+* @example
+* contentBounds(imageData.data, 100, 100); // { x: 10, y: 20, width: 30, height: 5 }
+*/
+var contentBounds = (rgba, width, height, maskRgba) => {
+	let left = width;
+	let top = height;
+	let right = -1;
+	let bottom = -1;
+	for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
+		const alpha = (y * width + x) * 4 + 3;
+		if (!rgba[alpha] || maskRgba && !maskRgba[alpha]) continue;
+		if (x < left) left = x;
+		if (x > right) right = x;
+		if (y < top) top = y;
+		if (y > bottom) bottom = y;
+	}
+	return right < 0 ? void 0 : {
+		x: left,
+		y: top,
+		width: right - left + 1,
+		height: bottom - top + 1
+	};
+};
+/**
+* Copy an area of an image into a new canvas the size of the area.
+*
+* @example
+* copyArea(createOffscreenCanvas, layer.canvas, { x: 10, y: 10, width: 50, height: 20 }); // a 50×20 canvas
+*/
+var copyArea = (createCanvas, image, area) => {
+	const { x, y, width, height } = area;
+	const canvas = createCanvas(width, height);
+	canvas.getContext("2d").drawImage(image, x, y, width, height, 0, 0, width, height);
+	return canvas;
+};
+/**
+* Cut a copied area down to a mask: only the parts where the mask piece (the same area of the mask) is above 0 are kept,
+* partly where it is partly.
+*/
+var applyMask = (image, maskPiece) => {
+	const ctx = image.getContext("2d");
+	ctx.globalCompositeOperation = "destination-in";
+	ctx.drawImage(maskPiece, 0, 0);
+	ctx.globalCompositeOperation = "source-over";
+};
+/**
+* Moves, scales and rotates a layer's pixels (or only the masked part).
+*
+* `prepare` finds the area to transform and shows its box. The first change lifts the pixels off the layer, and `preview` then shows the
+* layer with them transformed. `commit` writes them back transformed; `cancel` puts the original pixels back.
+*
+* `float` shows pasted pixels over a layer instead, ready to transform; `commit` writes them into the layer and `cancel` discards them.
+*
+* Dispatches a `change` event whenever the box or preview changes.
+*
+* @example
+* transformer.prepare(layer, selection.mask);
+* transformer.setBox(moveBox(transformer.box, 20, 0, false));
+* transformer.commit(); // or transformer.cancel()
+*/
+var Transformer = class extends EventTarget {
+	/** Canvas width in pixels */
+	width;
+	/** Canvas height in pixels */
+	height;
+	/** Layer being transformed */
+	layer;
+	/** Area of the original pixels */
+	source;
+	/** Where the pixels are placed now */
+	box;
+	mask;
+	lifted;
+	workingCanvas;
+	createCanvas;
+	constructor(width, height, createCanvas = createOffscreenCanvas) {
+		super();
+		this.width = width;
+		this.height = height;
+		this.createCanvas = createCanvas;
+	}
+	/** Whether there is something to transform (its box is shown) */
+	get active() {
+		return this.box !== void 0;
+	}
+	/** Whether pixels have been lifted and changed (or pasted) but not yet committed */
+	get pending() {
+		return this.lifted !== void 0;
+	}
+	/** Whether the pending pixels were pasted (rather than lifted off the layer) */
+	get pasting() {
+		return this.lifted !== void 0 && this.lifted.backup === void 0;
+	}
+	/** Width ÷ height of the original area, kept when scaling proportionally */
+	get aspect() {
+		return this.source ? this.source.width / this.source.height : 1;
+	}
+	/** The layer with the lifted pixels transformed, to draw in its place; undefined until something changes */
+	get preview() {
+		return this.layer && this.lifted && this.workingCanvas ? {
+			layer: this.layer,
+			image: this.workingCanvas
+		} : void 0;
+	}
+	/**
+	* Find what to transform on a layer: all its visible pixels, or only those inside the mask. Shows nothing if there are none.
+	*/
+	prepare(layer, mask) {
+		this.reset();
+		const rgba = layer.context.getImageData(0, 0, layer.width, layer.height).data;
+		const maskRgba = mask?.getContext("2d")?.getImageData(0, 0, layer.width, layer.height).data;
+		const source = contentBounds(rgba, layer.width, layer.height, maskRgba);
+		if (source) {
+			this.layer = layer;
+			this.mask = mask;
+			this.source = source;
+			this.box = boxFromRect(source);
+		}
+		this.notify();
+	}
+	/**
+	* Show pasted pixels over a layer, in an area, ready to transform. They are only written into the layer on `commit`.
+	*/
+	float(layer, image, area) {
+		this.reset();
+		this.layer = layer;
+		this.source = area;
+		this.box = boxFromRect(area);
+		this.lifted = { floating: image };
+		this.renderPreview();
+		this.notify();
+	}
+	/**
+	* Place the pixels in a new box, lifting them off the layer first if needed.
+	*/
+	setBox(box) {
+		if (!this.layer || !this.source) return;
+		this.lifted ??= this.lift(this.layer, this.source);
+		this.box = box;
+		this.renderPreview();
+		this.notify();
+	}
+	/**
+	* Write the transformed pixels into the layer. Returns the mask piece and source area so the mask can be moved too, and the
+	* changed area with a copy of its pixels from before the transform (for undo), or undefined if nothing changed. Afterwards
+	* the transformer is empty; call `prepare` again to keep transforming.
+	*/
+	commit() {
+		const { layer, lifted, source, box } = this;
+		if (!layer || !lifted || !source || !box) {
+			this.reset();
+			return;
+		}
+		const area = clipRect(lifted.backup ? unionRect(source, boxBounds(box)) : boxBounds(box), this.width, this.height);
+		if (!area) {
+			this.reset();
+			this.notify();
+			return;
+		}
+		const before = this.original(layer, lifted, source, area);
+		drawTransformed(layer.context, lifted.floating, box);
+		this.reset();
+		this.notify();
+		return {
+			maskPiece: lifted.maskPiece,
+			source,
+			box,
+			area,
+			before
+		};
+	}
+	/**
+	* Put the original pixels back and return the box to where it started (Escape). Pasted pixels are discarded.
+	*/
+	cancel() {
+		const { layer, lifted, source } = this;
+		if (this.pasting) {
+			this.reset();
+			this.notify();
+			return;
+		}
+		if (layer && lifted?.backup && source) {
+			const ctx = layer.context;
+			ctx.clearRect(source.x, source.y, source.width, source.height);
+			ctx.drawImage(lifted.backup, source.x, source.y);
+			this.lifted = void 0;
+			this.box = boxFromRect(source);
+			this.notify();
+		}
+	}
+	/**
+	* Forget the current transform without changing the layer.
+	*/
+	reset() {
+		this.layer = void 0;
+		this.mask = void 0;
+		this.source = void 0;
+		this.box = void 0;
+		this.lifted = void 0;
+	}
+	/**
+	* Copy the pixels to transform off the layer, leaving a hole where they were.
+	*/
+	lift(layer, source) {
+		const { x, y, width, height } = source;
+		const copy = (image) => copyArea(this.createCanvas, image, source);
+		const backup = copy(layer.canvas);
+		const floating = copy(layer.canvas);
+		const ctx = layer.context;
+		if (this.mask) {
+			const maskPiece = copy(this.mask);
+			applyMask(floating, maskPiece);
+			ctx.save();
+			ctx.globalCompositeOperation = "destination-out";
+			ctx.drawImage(maskPiece, x, y);
+			ctx.restore();
+			return {
+				floating,
+				backup,
+				maskPiece
+			};
+		}
+		ctx.clearRect(x, y, width, height);
+		return {
+			floating,
+			backup
+		};
+	}
+	/**
+	* A copy of the layer's pixels within an area as they were before any pixels were lifted off it.
+	*/
+	original(layer, lifted, source, area) {
+		const canvas = copyArea(this.createCanvas, layer.canvas, area);
+		if (lifted.backup) {
+			const ctx = canvas.getContext("2d");
+			const x = source.x - area.x;
+			const y = source.y - area.y;
+			ctx.clearRect(x, y, source.width, source.height);
+			ctx.drawImage(lifted.backup, x, y);
+		}
+		return canvas;
+	}
+	/**
+	* Redraw the preview: the layer (with the hole) plus the lifted pixels in their box.
+	*/
+	renderPreview() {
+		const { layer, lifted, box } = this;
+		this.workingCanvas ??= this.createCanvas(this.width, this.height);
+		const ctx = this.workingCanvas.getContext("2d");
+		ctx.clearRect(0, 0, this.width, this.height);
+		ctx.drawImage(layer.canvas, 0, 0);
+		drawTransformed(ctx, lifted.floating, box);
+	}
+	/**
+	* Dispatch a `change` event.
+	*/
+	notify() {
+		this.dispatchEvent(new Event("change"));
+	}
+};
+export { applyMask, contentBounds, copyArea, Transformer as default, drawTransformed };

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

@@ -0,0 +1,95 @@
+import type { Point, Rect } from "../../classes/Viewport";
+/**
+ * Where and how transformed pixels are placed: the centre, size and rotation of the box they are drawn in.
+ * Width and height are negative when the box has been flipped by dragging a handle past the opposite side.
+ */
+export interface TransformBox {
+    cx: number;
+    cy: number;
+    width: number;
+    height: number;
+    /** Rotation in degrees, clockwise */
+    rotation: number;
+}
+/** A handle position relative to the box centre: -1, 0 or 1 along each axis (0, 0 is the centre) */
+export interface Handle {
+    hx: -1 | 0 | 1;
+    hy: -1 | 0 | 1;
+}
+/** The 8 move & scale handles: corners and edge centres */
+export declare const SCALE_HANDLES: readonly Handle[];
+/** Distance (screen pixels) of the rotate handle beyond the top-centre handle */
+export declare const ROTATE_HANDLE_DISTANCE = 24;
+/** Degrees per rotation step when Shift is held */
+export declare const ROTATION_STEP = 45;
+/**
+ * The box that exactly covers a rectangle, unrotated.
+ *
+ * @example
+ * boxFromRect({ x: 0, y: 0, width: 10, height: 20 }); // { cx: 5, cy: 10, width: 10, height: 20, rotation: 0 }
+ */
+export declare const boxFromRect: ({ x, y, width, height }: Rect) => TransformBox;
+/**
+ * Where a handle is on the canvas.
+ */
+export declare const handlePosition: (box: TransformBox, { hx, hy }: Handle) => Point;
+/**
+ * The box's four corners in drawing order (top-left, top-right, bottom-right, bottom-left), for drawing its outline.
+ */
+export declare const boxCorners: (box: TransformBox) => Point[];
+/**
+ * Where the rotate handle is, in screen units: `distance` beyond the top-centre handle, away from the box's centre, so it
+ * turns with the box. Returns the handle and the top-centre handle (`anchor`) it is joined to by a line.
+ *
+ * @param toScreen - converts canvas points to screen points
+ *
+ * @example
+ * rotateHandle({ cx: 50, cy: 50, width: 40, height: 20, rotation: 0 }); // { anchor: { x: 50, y: 40 }, handle: { x: 50, y: 16 } }
+ */
+export declare const rotateHandle: (box: TransformBox, toScreen?: (p: Point) => Point, distance?: number) => {
+    anchor: Point;
+    handle: Point;
+};
+/**
+ * Find the handle under a point, if any. Points and radius are in the same units (usually screen pixels).
+ *
+ * @param toScreen - converts canvas points to the point's units
+ */
+export declare const handleAt: (box: TransformBox, handles: readonly Handle[], point: Point, radius: number, toScreen?: (p: Point) => Point) => Handle | undefined;
+/**
+ * Check whether a canvas point is inside the (possibly rotated) box.
+ */
+export declare const isInsideBox: (box: TransformBox, point: Point) => boolean;
+/**
+ * Move the box by a distance. With `constrain` (Shift), it only moves along the axis it has moved furthest on.
+ *
+ * @param start - the box when the drag started
+ */
+export declare const moveBox: (start: TransformBox, dx: number, dy: number, constrain: boolean) => TransformBox;
+/**
+ * Scale the box by dragging a handle to a point, keeping the opposite side (or corner) fixed. Works on rotated boxes.
+ * With `proportional` (Shift), the box keeps the original's proportions; edge handles then scale the other axis around its centre.
+ *
+ * @param start - the box when the drag started
+ * @param aspect - original width ÷ height, kept when proportional
+ */
+export declare const scaleBox: (start: TransformBox, handle: Handle, point: Point, proportional: boolean, aspect: number) => TransformBox;
+/**
+ * Rotate the box around its centre by how far the pointer has turned around it since the drag started.
+ * With `snap` (Shift), the rotation is a multiple of 45°.
+ *
+ * @param start - the box when the drag started
+ * @param from - pointer position when the drag started
+ */
+export declare const rotateBox: (start: TransformBox, from: Point, to: Point, snap: boolean) => TransformBox;
+/**
+ * CSS resize cursor for a handle, taking the box's rotation into account.
+ *
+ * @example
+ * resizeCursor({ hx: 1, hy: 0 }, 0); // "ew-resize"
+ */
+export declare const resizeCursor: ({ hx, hy }: Handle, rotation: number) => string;
+/**
+ * Smallest unrotated rectangle containing the box (e.g. the area the transformed pixels now cover).
+ */
+export declare const boxBounds: (box: TransformBox) => Rect;