@lvl99dotcom/paintcanvas 0.5.0 → 0.6.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,6 +25,8 @@ export interface AppSettings {
         foreground: string;
         background: string;
     };
+    /** The user's own profile graphs */
+    profiles?: ProfileGraph[];
     /** The theme and language */
     ui?: Partial<UiSettingsData>;
 }
@@ -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;

package/dist/lib/settings/schema.js

@@ -1,5 +1,6 @@
 import { LOCALE_PATTERN, 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,