@lvl99dotcom/paintcanvas 0.5.0 → 0.7.0

package/dist/lib/profiles/schema.d.ts

@@ -0,0 +1,73 @@
+/** Longest profile graph ID or name (characters) */
+export declare const MAX_PROFILE_TEXT_LENGTH = 100;
+/** Most profile graphs a user can keep */
+export declare const MAX_SAVED_PROFILES = 100;
+/** Schema of a profile graph's points, from left to right */
+export declare const profilePointsSchema: {
+    readonly type: "array";
+    readonly minItems: 2;
+    readonly maxItems: 32;
+    readonly items: {
+        readonly type: "object";
+        readonly additionalProperties: false;
+        readonly required: readonly ["x", "y", "i"];
+        readonly properties: {
+            readonly x: {
+                readonly type: "number";
+                readonly minimum: 0;
+                readonly maximum: 10;
+            };
+            readonly y: {
+                readonly type: "number";
+                readonly minimum: number;
+                readonly maximum: 0;
+            };
+            readonly i: {
+                readonly enum: ("linear" | "bezier-cubic")[];
+            };
+        };
+    };
+};
+/** Schema of a named profile graph */
+export declare const profileGraphSchema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly required: readonly ["id", "name", "points"];
+    readonly properties: {
+        readonly id: {
+            readonly type: "string";
+            readonly minLength: 1;
+            readonly maxLength: 100;
+        };
+        readonly name: {
+            readonly type: "string";
+            readonly minLength: 1;
+            readonly maxLength: 100;
+        };
+        readonly points: {
+            readonly type: "array";
+            readonly minItems: 2;
+            readonly maxItems: 32;
+            readonly items: {
+                readonly type: "object";
+                readonly additionalProperties: false;
+                readonly required: readonly ["x", "y", "i"];
+                readonly properties: {
+                    readonly x: {
+                        readonly type: "number";
+                        readonly minimum: 0;
+                        readonly maximum: 10;
+                    };
+                    readonly y: {
+                        readonly type: "number";
+                        readonly minimum: number;
+                        readonly maximum: 0;
+                    };
+                    readonly i: {
+                        readonly enum: ("linear" | "bezier-cubic")[];
+                    };
+                };
+            };
+        };
+    };
+};

package/dist/lib/profiles/schema.js

@@ -0,0 +1,53 @@
+import { Interpolation } from "./index.js";
+/** Schema of a profile graph's points, from left to right */
+var profilePointsSchema = {
+	type: "array",
+	minItems: 2,
+	maxItems: 32,
+	items: {
+		type: "object",
+		additionalProperties: false,
+		required: [
+			"x",
+			"y",
+			"i"
+		],
+		properties: {
+			x: {
+				type: "number",
+				minimum: 0,
+				maximum: 10
+			},
+			y: {
+				type: "number",
+				minimum: -10,
+				maximum: 0
+			},
+			i: { enum: Object.values(Interpolation) }
+		}
+	}
+};
+/** Schema of a named profile graph */
+var profileGraphSchema = {
+	type: "object",
+	additionalProperties: false,
+	required: [
+		"id",
+		"name",
+		"points"
+	],
+	properties: {
+		id: {
+			type: "string",
+			minLength: 1,
+			maxLength: 100
+		},
+		name: {
+			type: "string",
+			minLength: 1,
+			maxLength: 100
+		},
+		points: profilePointsSchema
+	}
+};
+export { profileGraphSchema, profilePointsSchema };

package/dist/lib/rendering/sample/index.d.ts

@@ -41,10 +41,21 @@ export declare const pixelRect: (a: {
     x: number;
     y: number;
 }, canvasWidth: number, canvasHeight: number) => PixelRect | undefined;
+/**
+ * Copy an area of a canvas onto a new canvas the size of the area, by reading its pixels. Reading only the area keeps
+ * this quick for GPU-backed canvases: drawing one onto another canvas can copy all of its pixels back from the GPU.
+ *
+ * @example
+ * copyPixels(layer.canvas, { x: 10, y: 10, width: 1, height: 1 }, createOffscreenCanvas); // a 1 × 1 canvas
+ */
+export declare const copyPixels: (source: OffscreenCanvas, area: PixelRect, createCanvas: CanvasFactory) => OffscreenCanvas;
 /**
  * Draw an area of the canvas as it's shown (the white background, then every layer mixed as shown) onto a new canvas,
  * scaled to fit `width` × `height`. Parts outside the canvas stay transparent.
  *
+ * Only the area of each layer is used: at full size, its pixels are read (see `copyPixels`); scaled down (e.g. a
+ * preview of a large area), that part of each layer is drawn scaled.
+ *
  * @example
  * flattenArea(app.drawables, app.createCanvas, app.width, app.height, { x: 10, y: 10, width: 10, height: 10 });
  */

package/dist/lib/rendering/sample/index.js

@@ -1,4 +1,5 @@
 import { rgbToHex } from "../../utils/colour/index.js";
+import { clipRect } from "../../brushes/StrokeEngine/index.js";
 import { CANVAS_BACKGROUND, drawLayers } from "../compositing/index.js";
 // src/lib/rendering/sample/index.ts
 /** How many canvas pixels across the sampling window enlarges */
@@ -59,26 +60,56 @@ var pixelRect = (a, b, canvasWidth, canvasHeight) => {
 	};
 };
 /**
+* Copy an area of a canvas onto a new canvas the size of the area, by reading its pixels. Reading only the area keeps
+* this quick for GPU-backed canvases: drawing one onto another canvas can copy all of its pixels back from the GPU.
+*
+* @example
+* copyPixels(layer.canvas, { x: 10, y: 10, width: 1, height: 1 }, createOffscreenCanvas); // a 1 × 1 canvas
+*/
+var copyPixels = (source, area, createCanvas) => {
+	const { x, y, width, height } = area;
+	const piece = createCanvas(width, height);
+	const pixels = source.getContext("2d").getImageData(x, y, width, height);
+	piece.getContext("2d").putImageData(pixels, 0, 0);
+	return piece;
+};
+/**
 * Draw an area of the canvas as it's shown (the white background, then every layer mixed as shown) onto a new canvas,
 * scaled to fit `width` × `height`. Parts outside the canvas stay transparent.
 *
+* Only the area of each layer is used: at full size, its pixels are read (see `copyPixels`); scaled down (e.g. a
+* preview of a large area), that part of each layer is drawn scaled.
+*
 * @example
 * flattenArea(app.drawables, app.createCanvas, app.width, app.height, { x: 10, y: 10, width: 10, height: 10 });
 */
 var flattenArea = (layers, createCanvas, canvasWidth, canvasHeight, area, width = area.width, height = area.height) => {
 	const canvas = createCanvas(width, height);
-	const ctx = canvas.getContext("2d", { willReadFrequently: true });
+	const source = clipRect(area, canvasWidth, canvasHeight);
+	if (!source) return canvas;
+	const ctx = canvas.getContext("2d");
 	const scaleX = width / area.width;
 	const scaleY = height / area.height;
+	const scaled = scaleX < 1 || scaleY < 1;
 	ctx.setTransform(scaleX, 0, 0, scaleY, -area.x * scaleX, -area.y * scaleY);
-	ctx.imageSmoothingEnabled = scaleX < 1 || scaleY < 1;
+	ctx.imageSmoothingEnabled = scaled;
 	ctx.fillStyle = CANVAS_BACKGROUND;
-	ctx.fillRect(0, 0, canvasWidth, canvasHeight);
-	drawLayers(ctx, layers);
+	ctx.fillRect(source.x, source.y, source.width, source.height);
+	if (scaled) {
+		drawLayers(ctx, layers, void 0, source);
+		return canvas;
+	}
+	ctx.translate(source.x, source.y);
+	drawLayers(ctx, layers.filter((layer) => layer.visible && layer.opacity > 0).map(({ visible, opacity, blendMode, canvas: image }) => ({
+		visible,
+		opacity,
+		blendMode,
+		canvas: copyPixels(image, source, createCanvas)
+	})));
 	return canvas;
 };
 /**
 * Read all of a canvas's pixels as RGBA.
 */
 var readPixels = (canvas) => canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height).data;
-export { PREVIEW_MAX_PIXELS, SAMPLE_PIXELS, SAMPLE_SCALE, averageColour, flattenArea, pixelRect, readPixels, toHex };
+export { PREVIEW_MAX_PIXELS, SAMPLE_PIXELS, SAMPLE_SCALE, averageColour, copyPixels, flattenArea, pixelRect, readPixels, toHex };

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

@@ -25,7 +25,8 @@ export type SettingsValidationResult = {
  */
 export declare const isValidSettings: (input: unknown) => SettingsValidationResult;
 /**
- * The app settings of a canvas: its input settings, keyboard shortcuts, colour palette, colours, theme and language.
+ * The app settings of a canvas: its input settings, keyboard shortcuts, colour palette, colours, profile graphs, theme
+ * and language.
  *
  * @example
  * collectSettings(canvas).palette; // ["#2c6bff", ...]

package/dist/lib/settings/index.js

@@ -23,7 +23,8 @@ var isValidSettings = (input) => validateSettings(input) ? {
 	errors: formatErrors(validateSettings.errors)
 };
 /**
-* The app settings of a canvas: its input settings, keyboard shortcuts, colour palette, colours, theme and language.
+* The app settings of a canvas: its input settings, keyboard shortcuts, colour palette, colours, profile graphs, theme
+* and language.
 *
 * @example
 * collectSettings(canvas).palette; // ["#2c6bff", ...]
@@ -33,6 +34,7 @@ var collectSettings = (app) => ({
 	shortcuts: structuredClone(app.shortcuts.bindings),
 	palette: [...app.palette.colours],
 	colours: { ...app.colours },
+	profiles: structuredClone([...app.profiles.graphs]),
 	ui: { ...app.ui.data }
 });
 /**
@@ -50,6 +52,7 @@ var applySettings = (app, settings) => {
 		app.setColour(settings.colours.foreground, "foreground");
 		app.setColour(settings.colours.background, "background");
 	}
+	if (settings.profiles) app.profiles.set(settings.profiles);
 	if (settings.ui) app.ui.update(settings.ui);
 };
 /**

package/dist/lib/settings/schema.d.ts

@@ -1,6 +1,7 @@
 import type { InputSettingsData } from "../classes/InputSettings";
 import { type UiSettingsData } from "../classes/UiSettings/index.ts";
 import type { KeyCombo } from "../utils/shortcuts";
+import type { ProfileGraph } from "../profiles/index.ts";
 /** The `format` of a settings file, unless the implementer names their own (see `PaintCanvasNames`) */
 export declare const SETTINGS_FILE_FORMAT = "paintcanvas-settings";
 /** Formats of settings files that are imported by default */
@@ -24,7 +25,9 @@ export interface AppSettings {
         foreground: string;
         background: string;
     };
-    /** The theme and language */
+    /** The user's own profile graphs */
+    profiles?: ProfileGraph[];
+    /** The theme, language and where canvases draw */
     ui?: Partial<UiSettingsData>;
 }
 /** A settings file: what users export and import */
@@ -129,6 +132,52 @@ export declare const settingsSchema: {
                 };
             };
         };
+        readonly profiles: {
+            readonly type: "array";
+            readonly maxItems: 100;
+            readonly items: {
+                readonly type: "object";
+                readonly additionalProperties: false;
+                readonly required: readonly ["id", "name", "points"];
+                readonly properties: {
+                    readonly id: {
+                        readonly type: "string";
+                        readonly minLength: 1;
+                        readonly maxLength: 100;
+                    };
+                    readonly name: {
+                        readonly type: "string";
+                        readonly minLength: 1;
+                        readonly maxLength: 100;
+                    };
+                    readonly points: {
+                        readonly type: "array";
+                        readonly minItems: 2;
+                        readonly maxItems: 32;
+                        readonly items: {
+                            readonly type: "object";
+                            readonly additionalProperties: false;
+                            readonly required: readonly ["x", "y", "i"];
+                            readonly properties: {
+                                readonly x: {
+                                    readonly type: "number";
+                                    readonly minimum: 0;
+                                    readonly maximum: 10;
+                                };
+                                readonly y: {
+                                    readonly type: "number";
+                                    readonly minimum: number;
+                                    readonly maximum: 0;
+                                };
+                                readonly i: {
+                                    readonly enum: ("linear" | "bezier-cubic")[];
+                                };
+                            };
+                        };
+                    };
+                };
+            };
+        };
         readonly ui: {
             readonly type: "object";
             readonly additionalProperties: false;
@@ -142,6 +191,9 @@ export declare const settingsSchema: {
                     readonly maxLength: 35;
                     readonly pattern: "^[A-Za-z0-9-]+$";
                 };
+                readonly rendering: {
+                    readonly enum: readonly ["cpu", "gpu"];
+                };
             };
         };
     };

package/dist/lib/settings/schema.js

@@ -1,5 +1,6 @@
-import { LOCALE_PATTERN, THEMES } from "../classes/UiSettings/index.js";
+import { LOCALE_PATTERN, RENDERINGS, THEMES } from "../classes/UiSettings/index.js";
 import { HEX_COLOUR_PATTERN, MAX_PALETTE_COLOURS, paletteFileSchema } from "../palette/schema.js";
+import { profileGraphSchema } from "../profiles/schema.js";
 // src/lib/settings/schema.ts
 /** The `format` of a settings file, unless the implementer names their own (see `PaintCanvasNames`) */
 var SETTINGS_FILE_FORMAT = "paintcanvas-settings";
@@ -78,6 +79,11 @@ var settingsSchema = {
 				background: hexColour
 			}
 		},
+		profiles: {
+			type: "array",
+			maxItems: 100,
+			items: profileGraphSchema
+		},
 		ui: {
 			type: "object",
 			additionalProperties: false,
@@ -88,7 +94,8 @@ var settingsSchema = {
 					minLength: 1,
 					maxLength: 35,
 					pattern: LOCALE_PATTERN
-				}
+				},
+				rendering: { enum: RENDERINGS }
 			}
 		}
 	}

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

@@ -1,5 +1,6 @@
 import type { LayerConfig } from "../classes/Layer";
 import type { AppSettings } from "../settings/schema";
+import { type Rendering } from "../classes/UiSettings";
 /** 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, and `IndexedDbSettingsStore` settings */
@@ -92,3 +93,28 @@ export declare class IndexedDbSettingsStore implements SettingsStoreLike {
     load(): Promise<unknown>;
     save(settings: AppSettings): Promise<void>;
 }
+/**
+ * The browser storage key that keeps the rendering chosen with the app settings of a name (see
+ * `loadRenderingChoice`).
+ *
+ * @example
+ * renderingChoiceKey("demo"); // "paintcanvas-rendering:demo"
+ */
+export declare const renderingChoiceKey: (name: string) => string;
+/**
+ * The rendering (`cpu` or `gpu`) last chosen with the app settings of a name, kept in `localStorage` so it can be read
+ * before the canvas is made (the app settings themselves load later, from IndexedDB). Undefined when none was kept, it
+ * isn't valid, or the storage can't be read (e.g. blocked by the browser).
+ *
+ * @example
+ * new PaintCanvas({ rendering: loadRenderingChoice("demo") });
+ */
+export declare const loadRenderingChoice: (name?: string, storage?: Pick<Storage, "getItem"> | undefined) => Rendering | undefined;
+/**
+ * Keep the rendering chosen with the app settings of a name, to be read with `loadRenderingChoice` when the canvas is
+ * next made. Does nothing if the storage can't be written.
+ *
+ * @example
+ * canvas.ui.addEventListener("change", () => saveRenderingChoice("demo", canvas.ui.data.rendering));
+ */
+export declare const saveRenderingChoice: (name: string, rendering: Rendering, storage?: Pick<Storage, "setItem"> | undefined) => void;

package/dist/lib/storage/index.js

@@ -1,3 +1,4 @@
+import { isRendering } from "../classes/UiSettings/index.js";
 // 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;
@@ -169,4 +170,40 @@ var IndexedDbSettingsStore = class {
 		await done;
 	}
 };
-export { DATABASE_NAME, DATABASE_VERSION, DEFAULT_SETTINGS_NAME, IndexedDbSettingsStore, SAVED_DRAWING_VERSION, IndexedDbLayerStore as default };
+/**
+* The browser storage key that keeps the rendering chosen with the app settings of a name (see
+* `loadRenderingChoice`).
+*
+* @example
+* renderingChoiceKey("demo"); // "paintcanvas-rendering:demo"
+*/
+var renderingChoiceKey = (name) => `${DATABASE_NAME}-rendering:${name}`;
+/**
+* The rendering (`cpu` or `gpu`) last chosen with the app settings of a name, kept in `localStorage` so it can be read
+* before the canvas is made (the app settings themselves load later, from IndexedDB). Undefined when none was kept, it
+* isn't valid, or the storage can't be read (e.g. blocked by the browser).
+*
+* @example
+* new PaintCanvas({ rendering: loadRenderingChoice("demo") });
+*/
+var loadRenderingChoice = (name = DEFAULT_SETTINGS_NAME, storage = globalThis.localStorage) => {
+	try {
+		const value = storage?.getItem(renderingChoiceKey(name));
+		return isRendering(value) ? value : void 0;
+	} catch {
+		return;
+	}
+};
+/**
+* Keep the rendering chosen with the app settings of a name, to be read with `loadRenderingChoice` when the canvas is
+* next made. Does nothing if the storage can't be written.
+*
+* @example
+* canvas.ui.addEventListener("change", () => saveRenderingChoice("demo", canvas.ui.data.rendering));
+*/
+var saveRenderingChoice = (name, rendering, storage = globalThis.localStorage) => {
+	try {
+		storage?.setItem(renderingChoiceKey(name), rendering);
+	} catch {}
+};
+export { DATABASE_NAME, DATABASE_VERSION, DEFAULT_SETTINGS_NAME, IndexedDbSettingsStore, SAVED_DRAWING_VERSION, IndexedDbLayerStore as default, loadRenderingChoice, renderingChoiceKey, saveRenderingChoice };