@lvl99dotcom/paintcanvas 0.0.0-stage → 0.3.0

package/dist/lib/messages/PatchSender/index.js

@@ -0,0 +1,125 @@
+import { ImageEncoding, encodeRgbaDeflate } from "../../image/index.js";
+import { drawLayers } from "../../rendering/compositing/index.js";
+import { createPatchMessage } from "../index.js";
+// src/lib/messages/PatchSender/index.ts
+/** How long to wait after a change before sending, so quick changes go together */
+var PATCH_DELAY_MS = 200;
+/**
+* The smallest box containing every pixel that differs between two images of the same size (one 32-bit value per
+* pixel), or undefined if they are the same.
+*
+* @example
+* changedArea(before, after, 100, 100); // [10, 20, 31, 45]
+*/
+var changedArea = (before, after, width, height) => {
+	let x1 = width;
+	let y1 = height;
+	let x2 = -1;
+	let y2 = -1;
+	for (let y = 0; y < height; y++) {
+		const row = y * width;
+		for (let x = 0; x < width; x++) {
+			if (before[row + x] === after[row + x]) continue;
+			if (x < x1) x1 = x;
+			if (x > x2) x2 = x;
+			if (y < y1) y1 = y;
+			y2 = y;
+		}
+	}
+	return x2 < 0 ? void 0 : [
+		x1,
+		y1,
+		x2 + 1,
+		y2 + 1
+	];
+};
+/**
+* Copy a box of RGBA pixels out of a whole image.
+*
+* @example
+* cropRgba(imageData.data, imageData.width, [10, 10, 20, 20]); // 10 × 10 pixels
+*/
+var cropRgba = (rgba, width, [x1, y1, x2, y2]) => {
+	const rowBytes = (x2 - x1) * 4;
+	const cropped = new Uint8ClampedArray(rowBytes * (y2 - y1));
+	for (let y = y1; y < y2; y++) {
+		const start = (y * width + x1) * 4;
+		cropped.set(rgba.subarray(start, start + rowBytes), (y - y1) * rowBytes);
+	}
+	return cropped;
+};
+/**
+* Sends the user's drawing as patches. Shortly after any change (and once `whenIdle` runs it), it flattens the
+* user's own layers, compares the result with what it last sent, and sends only the area that changed. This covers every kind of change (strokes,
+* erasing, moving pixels, layer settings and order) without each tool reporting what it changed.
+*
+* @example
+* const sync = new PatchSender({ width, height, layers: () => canvas.layers.layers, send, createCanvas });
+* app.layers.addEventListener("change", () => sync.schedule());
+*/
+var PatchSender = class {
+	options;
+	canvas;
+	context;
+	/** The pixels last sent (all transparent to start with) */
+	sent;
+	timer;
+	/** Whether it has stopped (a sync waiting for `whenIdle` doesn't run) */
+	stopped = false;
+	/** The sync in progress, so syncs never overlap */
+	running = Promise.resolve();
+	constructor(options) {
+		this.options = options;
+		this.canvas = options.createCanvas(options.width, options.height);
+		this.context = this.canvas.getContext("2d", { willReadFrequently: true });
+		this.sent = new Uint8ClampedArray(options.width * options.height * 4);
+	}
+	/**
+	* Send the changes soon (changes within the delay go together), once `whenIdle` runs the sync.
+	*/
+	schedule() {
+		clearTimeout(this.timer);
+		this.timer = setTimeout(() => {
+			const run = () => this.stopped ? void 0 : this.sync().catch(() => void 0);
+			if (this.options.whenIdle) this.options.whenIdle(run);
+			else run();
+		}, this.options.delayMs ?? 200);
+	}
+	/**
+	* Send what changed since the last sync now. Resolves once sent; if sending fails, the changes go with the next sync.
+	*/
+	sync() {
+		clearTimeout(this.timer);
+		this.running = this.running.catch(() => void 0).then(() => this.sendChanges());
+		return this.running;
+	}
+	/** Flatten the layers and send the changed area, if any */
+	async sendChanges() {
+		const { width, height, send } = this.options;
+		this.context.clearRect(0, 0, width, height);
+		drawLayers(this.context, this.options.layers());
+		const current = this.context.getImageData(0, 0, width, height).data;
+		const area = changedArea(new Uint32Array(this.sent.buffer), new Uint32Array(current.buffer), width, height);
+		if (!area) return;
+		const data = await encodeRgbaDeflate(cropRgba(current, width, area), area);
+		await send(createPatchMessage(area, ImageEncoding.RgbaDeflate, data));
+		this.sent = current;
+	}
+	/**
+	* Count pixels as already sent (e.g. the user's earlier work, restored from a shared drawing's history), so they aren't
+	* sent again.
+	*/
+	markSent(area, rgba) {
+		const [x1, y1, x2, y2] = area;
+		const rowBytes = (x2 - x1) * 4;
+		for (let y = y1; y < y2; y++) this.sent.set(rgba.subarray((y - y1) * rowBytes, (y - y1 + 1) * rowBytes), (y * this.options.width + x1) * 4);
+	}
+	/**
+	* Stop any pending sync.
+	*/
+	stop() {
+		this.stopped = true;
+		clearTimeout(this.timer);
+	}
+};
+export { PATCH_DELAY_MS, changedArea, cropRgba, PatchSender as default };

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

@@ -0,0 +1,26 @@
+import type { BoundingBox, ImageEncoding } from "../image";
+import { type CanvasMessage, type PatchMessage } from "./schema";
+export * from "./schema";
+/** Result of checking a received message */
+export type MessageValidationResult = {
+    valid: true;
+    value: CanvasMessage;
+} | {
+    valid: false;
+    errors: string[];
+};
+/**
+ * Make a patch message.
+ *
+ * @example
+ * createPatchMessage([0, 0, 10, 10], ImageEncoding.RgbaDeflate, data);
+ */
+export declare const createPatchMessage: (coords: BoundingBox, encoding: ImageEncoding, data: string) => PatchMessage;
+/**
+ * Check a received (untrusted) drawing message: its protocol version, its kind, its schema, and that a patch's area
+ * isn't empty.
+ *
+ * @example
+ * validateCanvasMessage(JSON.parse(text)); // { valid: true, value: { protocol: 1, type: "patch", … } }
+ */
+export declare const validateCanvasMessage: (input: unknown) => MessageValidationResult;

package/dist/lib/messages/index.js

@@ -0,0 +1,59 @@
+import { formatErrors } from "../presets/index.js";
+import { validateHistoryMessage, validatePatchMessage, validateStrokeMessage } from "../validation/validators.generated.js";
+import { CanvasMessageType, MAX_MESSAGE_CANVAS_SIZE, MAX_PATCH_DATA_LENGTH, MAX_STROKE_POINTS, PROTOCOL_VERSION, historyMessageSchema, messageSchemas, patchMessageSchema, strokeMessageSchema, strokePresetSchema } from "./schema.js";
+// src/lib/messages/index.ts
+/**
+* Make a patch message.
+*
+* @example
+* createPatchMessage([0, 0, 10, 10], ImageEncoding.RgbaDeflate, data);
+*/
+var createPatchMessage = (coords, encoding, data) => ({
+	protocol: 1,
+	type: CanvasMessageType.Patch,
+	coords,
+	encoding,
+	data
+});
+/** The validator for each kind of message */
+var VALIDATORS = {
+	[CanvasMessageType.Patch]: validatePatchMessage,
+	[CanvasMessageType.Stroke]: validateStrokeMessage,
+	[CanvasMessageType.Undo]: validateHistoryMessage,
+	[CanvasMessageType.Redo]: validateHistoryMessage
+};
+/**
+* Check a received (untrusted) drawing message: its protocol version, its kind, its schema, and that a patch's area
+* isn't empty.
+*
+* @example
+* validateCanvasMessage(JSON.parse(text)); // { valid: true, value: { protocol: 1, type: "patch", … } }
+*/
+var validateCanvasMessage = (input) => {
+	const record = typeof input === "object" && input !== null ? input : {};
+	if (record.protocol !== 1) return {
+		valid: false,
+		errors: [`/protocol must be 1`]
+	};
+	const validate = Object.hasOwn(VALIDATORS, record.type) ? VALIDATORS[record.type] : void 0;
+	if (!validate) return {
+		valid: false,
+		errors: ["/type is not a drawing message"]
+	};
+	if (!validate(input)) return {
+		valid: false,
+		errors: formatErrors(validate.errors)
+	};
+	if (input.type === CanvasMessageType.Patch) {
+		const [x1, y1, x2, y2] = input.coords;
+		if (x2 <= x1 || y2 <= y1) return {
+			valid: false,
+			errors: ["/coords must not be empty"]
+		};
+	}
+	return {
+		valid: true,
+		value: input
+	};
+};
+export { CanvasMessageType, MAX_MESSAGE_CANVAS_SIZE, MAX_PATCH_DATA_LENGTH, MAX_STROKE_POINTS, PROTOCOL_VERSION, createPatchMessage, historyMessageSchema, messageSchemas, patchMessageSchema, strokeMessageSchema, strokePresetSchema, validateCanvasMessage };