@kadal/deck 0.0.0-stage → 0.1.0

package/dist/sketch/render.js

@@ -0,0 +1,198 @@
+import { COLOR_MAP } from "./palette.js";
+//#region src/sketch/render.ts
+const LINK = "https://sketch.deck/#";
+const cache = /* @__PURE__ */ new Map();
+const scenes = /* @__PURE__ */ new Map();
+/** Excalidraw's font ids → the family names its faces register under. */
+const FAMILY = {
+	1: "Virgil",
+	2: "Helvetica",
+	3: "Cascadia",
+	5: "Excalifont",
+	6: "Nunito",
+	7: "Lilita One",
+	8: "Comic Shanns",
+	9: "Liberation Sans"
+};
+let modulePromise = null;
+/** Where the fonts are: `<deck base>/excalidraw/`, absolute so the package resolves it plainly. */
+function assetPath() {
+	const base = import.meta.env?.BASE_URL ?? "/";
+	return new URL(`${base.replace(/\/?$/, "/")}excalidraw/`, window.location.href).toString();
+}
+function loadExcalidraw() {
+	if (!modulePromise) {
+		window.EXCALIDRAW_ASSET_PATH = assetPath();
+		modulePromise = import("@excalidraw/excalidraw");
+	}
+	return modulePromise;
+}
+/** A stable key for an input, so re-mounts and the canvas find the same render. */
+function hashInput(input) {
+	const text = input.kind === "sketch" ? JSON.stringify(input.elements) : input.kind === "file" ? JSON.stringify(input.data.elements) : input.kind === "url" ? input.src : `${input.source}|${input.fontSize ?? ""}`;
+	let h = 2166136261;
+	for (let i = 0; i < text.length; i++) {
+		h ^= text.charCodeAt(i);
+		h = Math.imul(h, 16777619);
+	}
+	return `${input.kind}-${(h >>> 0).toString(36)}`;
+}
+/** The elements behind a rendered sketch, for the interactive canvas. */
+function getScene(key) {
+	return scenes.get(key) ?? null;
+}
+function renderSketch(input, key = hashInput(input)) {
+	let p = cache.get(key);
+	if (!p) {
+		p = render(input, key).catch((e) => {
+			cache.delete(key);
+			throw e;
+		});
+		cache.set(key, p);
+	}
+	return p;
+}
+/**
+* Register and load the fonts these ids name, for the characters the sketch uses, so text
+* measured before export is measured in the real face. Only the canvas export path loads fonts
+* into `document.fonts` (the SVG path inlines them instead), so a one-pixel canvas export of a
+* probe carrying every character does the registration; Excalidraw caches what it has loaded.
+*/
+async function ensureFonts(ex, ids, sample) {
+	const families = [...new Set(ids.length ? ids : [5])];
+	const chars = [...new Set(sample.replace(/\s+/g, ""))].join("") || "Ag";
+	const probes = ex.convertToExcalidrawElements(families.map((fontFamily, i) => ({
+		type: "text",
+		x: i * 10,
+		y: 0,
+		text: chars,
+		fontFamily
+	})));
+	await ex.exportToCanvas({
+		elements: probes,
+		files: null,
+		appState: { exportBackground: false },
+		getDimensions: () => ({
+			width: 4,
+			height: 4
+		})
+	});
+	await document.fonts.ready;
+}
+/** True when every family is registered in `document.fonts`, so the SVG can lean on the page. */
+function registered(ids) {
+	const have = new Set([...document.fonts].map((f) => f.family.replace(/^"|"$/g, "")));
+	return (ids.length ? ids : [5]).every((id) => have.has(FAMILY[id] ?? ""));
+}
+const textOf = (elements) => elements.flatMap((e) => [typeof e.text === "string" ? e.text : "", typeof e.label?.text === "string" ? e.label.text ?? "" : ""]).join("");
+async function elementsFor(ex, input) {
+	if (input.kind === "sketch") {
+		await ensureFonts(ex, input.fonts, textOf(input.elements));
+		return {
+			elements: ex.convertToExcalidrawElements(input.elements, { regenerateIds: false }),
+			files: {},
+			regions: input.regions,
+			fonts: input.fonts
+		};
+	}
+	if (input.kind === "mermaid") {
+		const { parseMermaidToExcalidraw } = await import("@excalidraw/mermaid-to-excalidraw");
+		await ensureFonts(ex, [5], input.source);
+		const out = await parseMermaidToExcalidraw(input.source, { themeVariables: { fontSize: `${input.fontSize ?? 20}px` } });
+		return {
+			elements: ex.convertToExcalidrawElements(out.elements),
+			files: out.files ?? {},
+			regions: {},
+			fonts: [5]
+		};
+	}
+	const data = input.kind === "file" ? input.data : await fetch(input.src).then((r) => {
+		if (!r.ok) throw new Error(`sketch: ${input.src} answered ${r.status}`);
+		return r.json();
+	});
+	const fonts = data.elements.filter((e) => e.type === "text").map((e) => Number(e.fontFamily ?? 5));
+	await ensureFonts(ex, fonts, textOf(data.elements));
+	const elements = ex.restoreElements(data.elements, null, {
+		refreshDimensions: true,
+		repairBindings: true
+	});
+	const regions = {};
+	for (const e of elements) {
+		const names = [];
+		if (typeof e.frameId === "string") names.push(e.frameId);
+		if (Array.isArray(e.groupIds)) names.push(...e.groupIds);
+		if (names.length) regions[e.id] = names;
+	}
+	for (const e of elements) if (e.type === "frame" && typeof e.name === "string") {
+		regions[e.id] = [e.id];
+		for (const [id, rs] of Object.entries(regions)) if (rs.includes(e.id) && !rs.includes(e.name)) regions[id] = [...rs, e.name];
+	}
+	return {
+		elements,
+		files: data.files ?? {},
+		regions,
+		fonts
+	};
+}
+async function render(input, key) {
+	const ex = await loadExcalidraw();
+	const { elements, files, regions, fonts } = await elementsFor(ex, input);
+	const regionOf = (e) => {
+		const own = regions[e.id];
+		if (own) return own;
+		return (typeof e.containerId === "string" ? regions[e.containerId] : void 0) ?? [];
+	};
+	for (const e of elements) e.link = `${LINK}${e.id}`;
+	const svg = await ex.exportToSvg({
+		elements,
+		files,
+		appState: {
+			exportBackground: false,
+			exportWithDarkMode: false,
+			exportEmbedScene: false,
+			viewBackgroundColor: "transparent"
+		},
+		exportPadding: 12,
+		...registered(fonts) ? { skipInliningFonts: true } : {}
+	});
+	const byId = new Map(elements.map((e) => [e.id, e]));
+	for (const a of [...svg.querySelectorAll("a")]) {
+		const href = a.getAttribute("href") ?? "";
+		if (!href.startsWith(LINK)) continue;
+		const id = href.slice(21);
+		const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+		g.setAttribute("class", "sk-el");
+		g.setAttribute("data-id", id);
+		const el = byId.get(id);
+		const rs = el ? regionOf(el) : [];
+		if (rs.length) g.setAttribute("data-region", rs.join("|"));
+		while (a.firstChild) g.appendChild(a.firstChild);
+		a.replaceWith(g);
+	}
+	for (const node of svg.querySelectorAll("[stroke], [fill]")) for (const attr of ["stroke", "fill"]) {
+		const v = node.getAttribute(attr)?.toLowerCase();
+		if (!v) continue;
+		const css = COLOR_MAP.get(v);
+		if (css) node.style.setProperty(attr, css);
+	}
+	svg.removeAttribute("xmlns:xlink");
+	svg.setAttribute("class", "deck-sketch-svg");
+	svg.setAttribute("role", "img");
+	const width = Number(svg.getAttribute("width") ?? 0);
+	const height = Number(svg.getAttribute("height") ?? 0);
+	scenes.set(key, {
+		elements: elements.map((e) => ({
+			...e,
+			link: null
+		})),
+		files
+	});
+	return {
+		key,
+		svg: svg.outerHTML,
+		width,
+		height
+	};
+}
+//#endregion
+export { getScene, hashInput, loadExcalidraw, renderSketch };