113 lines
6.8 KiB
TypeScript
113 lines
6.8 KiB
TypeScript
import { CANVAS_ACCEPT } from "./canvas-v2.ts";
|
|
import { decodeCanvas, type CanvasDocument } from "./canvas.ts";
|
|
|
|
export type CanvasSnapshot = { version: number; document: CanvasDocument };
|
|
export type CanvasRequest = <T>(path: string, options?: RequestInit) => Promise<T>;
|
|
export type SyncState = { status: "saved" | "saving" | "error"; version: number; error?: string };
|
|
export function canvasPath(workspace: string, board: string) {
|
|
return `workspaces/${encodeURIComponent(workspace)}/materials/${encodeURIComponent(board)}/canvas`;
|
|
}
|
|
export function canvasPayload(document: CanvasDocument) {
|
|
const clean = decodeCanvas(JSON.stringify(document));
|
|
return { ...clean, nodes: clean.nodes.map(({ id, type, position, width, height, data }) => ({ id, type, position, ...(width !== undefined ? { width, height } : {}), data })) };
|
|
}
|
|
export function canvasFingerprint(document: CanvasDocument, includeViewport = true) {
|
|
const { viewport, ...content } = canvasPayload(document);
|
|
return JSON.stringify(includeViewport ? { ...content, viewport } : content, (_key, value) => value && typeof value === "object" && !Array.isArray(value) ? Object.fromEntries(Object.entries(value).sort(([a], [b]) => a.localeCompare(b))) : value);
|
|
}
|
|
export function canvasChanges(before: CanvasDocument, after: CanvasDocument) {
|
|
const a = canvasPayload(before), b = canvasPayload(after);
|
|
const changed = (left: unknown, right: unknown) => JSON.stringify(left) !== JSON.stringify(right);
|
|
return {
|
|
viewport: changed(a.viewport, b.viewport),
|
|
nodes: b.nodes.flatMap((node) => {
|
|
const prior = a.nodes.find((item) => item.id === node.id);
|
|
if (!prior) return [{ id: node.id, fields: ["added"] }];
|
|
const fields = ["position", "width", "height"].filter((key) => changed(prior[key as keyof typeof prior], node[key as keyof typeof node]));
|
|
for (const key of new Set([...Object.keys(prior.data), ...Object.keys(node.data)])) if (changed((prior.data as Record<string, unknown>)[key], (node.data as Record<string, unknown>)[key])) fields.push("data." + key);
|
|
return fields.length ? [{ id: node.id, fields }] : [];
|
|
}),
|
|
removed_nodes: a.nodes.filter((node) => !b.nodes.some((item) => item.id === node.id)).map((node) => node.id),
|
|
edges: changed(a.edges, b.edges),
|
|
};
|
|
}
|
|
export function decodeSnapshot(value: CanvasSnapshot): CanvasSnapshot {
|
|
if (!Number.isSafeInteger(value?.version) || value.version < 1) throw new Error("invalid_canvas_snapshot");
|
|
return { version: value.version, document: decodeCanvas(JSON.stringify(value.document)) };
|
|
}
|
|
|
|
/** One writer per board. Coalesce pending snapshots; stop on any rejected write. */
|
|
export class CanvasSync {
|
|
version: number;
|
|
saved: string;
|
|
private savedContent: string;
|
|
error = "";
|
|
document: CanvasDocument;
|
|
private pending: CanvasDocument | null = null;
|
|
private running: Promise<void> | null = null;
|
|
private request: CanvasRequest;
|
|
private path: string;
|
|
private notify: (state: SyncState) => void;
|
|
constructor(request: CanvasRequest, path: string, initial: CanvasSnapshot, notify: (state: SyncState) => void) {
|
|
this.request = request; this.path = path; this.version = initial.version;
|
|
this.saved = canvasFingerprint(initial.document); this.savedContent = canvasFingerprint(initial.document, false); this.notify = notify;
|
|
this.document = initial.document;
|
|
}
|
|
needsSave(document: CanvasDocument) { return canvasFingerprint(document, false) !== this.savedContent; }
|
|
enqueue(document: CanvasDocument): Promise<void> {
|
|
this.pending = document;
|
|
if (this.error) return Promise.resolve();
|
|
if (!this.running) this.running = Promise.resolve().then(() => this.drain()).finally(() => { this.running = null; if (this.pending && !this.error) void this.enqueue(this.pending); });
|
|
return this.running;
|
|
}
|
|
retry() { this.error = ""; return this.pending ? this.enqueue(this.pending) : Promise.resolve(); }
|
|
async settled() { await this.running; }
|
|
adopt(snapshot: CanvasSnapshot) {
|
|
if (this.running) throw new Error("canvas_busy");
|
|
this.pending = null; this.error = ""; this.version = snapshot.version; this.document = snapshot.document;
|
|
this.saved = canvasFingerprint(snapshot.document); this.savedContent = canvasFingerprint(snapshot.document, false); this.notify({ status: "saved", version: this.version });
|
|
}
|
|
private async drain() {
|
|
while (this.pending) {
|
|
const document = this.pending; this.pending = null;
|
|
this.notify({ status: "saving", version: this.version });
|
|
try {
|
|
const fingerprint = canvasFingerprint(document);
|
|
if (!this.needsSave(document)) { this.notify({ status: "saved", version: this.version }); continue; }
|
|
if (process.env.NODE_ENV === "development") console.info("[canvas-dirty]", JSON.stringify({ resource: this.path, ...canvasChanges(this.document, document) }));
|
|
const body = JSON.stringify({ document: canvasPayload(document) });
|
|
if (new TextEncoder().encode(body).length > 5 * 1024 * 1024) throw new Error("canvas_too_large");
|
|
const result = await this.request<{ version: number }>(this.path, { method: "PATCH", headers: { Accept: CANVAS_ACCEPT, "If-Match": `"${this.version}"` }, body });
|
|
if (!Number.isSafeInteger(result?.version) || result.version !== this.version + 1) throw new Error("invalid_canvas_snapshot");
|
|
this.version = result.version; this.saved = fingerprint; this.savedContent = canvasFingerprint(document, false);
|
|
this.document = document;
|
|
this.notify({ status: "saved", version: this.version });
|
|
} catch (error) {
|
|
this.pending ||= document;
|
|
this.error = error instanceof Error ? error.message : "request_failed";
|
|
this.notify({ status: "error", version: this.version, error: this.error });
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export function readLocalRecovery(storage: Pick<Storage, "getItem">, key: string, snapshot?: CanvasSnapshot): CanvasDocument | null {
|
|
const record = storage.getItem(key + ":recovery");
|
|
if (record) {
|
|
const value = JSON.parse(record);
|
|
const doc = decodeCanvas(JSON.stringify(value.document));
|
|
if (!snapshot || (value.dirty && canvasFingerprint(doc, false) !== canvasFingerprint(snapshot.document, false))) return doc;
|
|
return null;
|
|
}
|
|
const legacy = storage.getItem(key);
|
|
if (!legacy) return null;
|
|
const doc = decodeCanvas(legacy);
|
|
return !snapshot || canvasFingerprint(doc, false) !== canvasFingerprint(snapshot.document, false) ? doc : null;
|
|
}
|
|
export function canRestoreCanvasDraft(draft: CanvasDocument, remote: CanvasDocument) {
|
|
if (draft.schema_version < remote.schema_version) return false;
|
|
const relations = (document: CanvasDocument) => document.nodes.filter((node) => node.data.subgraph).map((node) => ({ id: node.id, subgraph: node.data.subgraph, ports: node.data.ports || [] })).sort((a, b) => a.id.localeCompare(b.id));
|
|
return JSON.stringify(relations(draft)) === JSON.stringify(relations(remote));
|
|
}
|