@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/services/elk-layout/elkGraph.js

@@ -0,0 +1,184 @@
+import { query } from "../../erd-editor-schema/dist/query/index.js";
+import { getTableRect, unionRect } from "../../konva/scene/metrics.js";
+import { getTableGroupId, padRect } from "../../utils/tableGroup.js";
+import { getContentRect } from "../../konva/scene/contentBounds.js";
+import { keepsTableGroups, usesCoordinateHints } from "./elkLayoutOptions.js";
+//#region src/services/elk-layout/elkGraph.ts
+var EMPTY_RECT = {
+	x: 0,
+	y: 0,
+	width: 0,
+	height: 0
+};
+var NO_ROW = -1;
+var UNRELATED_GROUP_ID = "elk-unrelated-group";
+var COMPONENT_ID_PREFIX = "elk-component-";
+function rowOf(columnIds, endpointColumnIds) {
+	if (!columnIds) return NO_ROW;
+	const rows = endpointColumnIds.map((columnId) => columnIds.indexOf(columnId)).filter((row) => row !== NO_ROW);
+	return rows.length ? Math.min(...rows) : NO_ROW;
+}
+function toHints(nodes, rects) {
+	if (!nodes.length) return;
+	const scale = nodes.reduce((total, node) => total + node.width, 0) / nodes.length;
+	if (scale <= 0) return;
+	const minX = Math.min(...rects.map(({ x }) => x));
+	const minY = Math.min(...rects.map(({ y }) => y));
+	nodes.forEach((node, index) => {
+		node.x = (rects[index].x - minX) / scale;
+		node.y = (rects[index].y - minY) / scale;
+	});
+}
+function createElkLayoutRequest(state, placement, { tableIds, source = "document", groupUnrelated } = {}) {
+	const { doc, collections } = state;
+	const tables = query(collections).collection("tableEntities").selectByIds(tableIds ?? doc.tableIds);
+	const relationships = query(collections).collection("relationshipEntities").selectByIds(doc.relationshipIds);
+	const rects = tables.map((table) => getTableRect(state, table, source));
+	const nodes = tables.map((table, index) => ({
+		id: table.id,
+		width: rects[index].width,
+		height: rects[index].height
+	}));
+	const nodeIdSet = new Set(nodes.map((node) => node.id));
+	const rowsByTable = new Map(tables.map((table) => [table.id, table.columnIds]));
+	const edgeIdSet = /* @__PURE__ */ new Set();
+	const edges = [];
+	relationships.forEach(({ start, end }) => {
+		if (start.tableId === end.tableId) return;
+		if (!nodeIdSet.has(start.tableId) || !nodeIdSet.has(end.tableId)) return;
+		const edgeId = `${start.tableId}-${end.tableId}`;
+		if (edgeIdSet.has(edgeId)) return;
+		edgeIdSet.add(edgeId);
+		edges.push({
+			source: start.tableId,
+			target: end.tableId,
+			sourceRow: rowOf(rowsByTable.get(start.tableId), start.columnIds),
+			targetRow: rowOf(rowsByTable.get(end.tableId), end.columnIds)
+		});
+	});
+	if (usesCoordinateHints(placement)) toHints(nodes, rects);
+	const grouped = keepsTableGroups(placement) ? withTableGroups(state, tables, nodes, edges) : nodes;
+	return {
+		placement,
+		nodes: groupUnrelated ? withUnrelatedGroup(grouped, edges) : grouped,
+		edges
+	};
+}
+function connectedParts(ids, pairs) {
+	const parents = new Map(ids.map((id) => [id, id]));
+	const find = (id) => {
+		const parent = parents.get(id);
+		if (parent === id) return id;
+		const root = find(parent);
+		parents.set(id, root);
+		return root;
+	};
+	pairs.forEach(([a, b]) => parents.set(find(a), find(b)));
+	return find;
+}
+function withTableGroups(state, tables, nodes, edges) {
+	const groupIds = new Map(tables.map((table) => [table.id, getTableGroupId(state, table)]));
+	const groups = /* @__PURE__ */ new Map();
+	const blocks = [];
+	nodes.forEach((node) => {
+		const groupId = groupIds.get(node.id);
+		const group = groupId ? groups.get(groupId) : void 0;
+		if (!groupId) blocks.push(node);
+		else if (group) group.children.push(node);
+		else {
+			const created = {
+				id: groupId,
+				width: 0,
+				height: 0,
+				kind: "tableGroup",
+				children: [node]
+			};
+			groups.set(groupId, created);
+			blocks.push(created);
+		}
+	});
+	if (!groups.size) return nodes;
+	const blockOf = (tableId) => groupIds.get(tableId) || tableId;
+	const links = edges.map(({ source, target }) => [blockOf(source), blockOf(target)]).filter(([a, b]) => a !== b);
+	const partOf = connectedParts(blocks.map((block) => block.id), links);
+	const crossing = new Set(links.filter(([a, b]) => groups.has(a) || groups.has(b)).map(([a]) => partOf(a)));
+	const components = /* @__PURE__ */ new Map();
+	return blocks.flatMap((block) => {
+		const part = partOf(block.id);
+		if (!crossing.has(part)) return [block];
+		const component = components.get(part);
+		if (component) {
+			component.children.push(block);
+			return [];
+		}
+		const created = {
+			id: `${COMPONENT_ID_PREFIX}${components.size}`,
+			width: 0,
+			height: 0,
+			kind: "component",
+			children: [block]
+		};
+		components.set(part, created);
+		return [created];
+	});
+}
+function withUnrelatedGroup(nodes, edges) {
+	const related = new Set(edges.flatMap((edge) => [edge.source, edge.target]));
+	const unrelated = new Set(nodes.filter((node) => !node.children && !related.has(node.id)));
+	if (!unrelated.size) return nodes;
+	return [...nodes.filter((node) => !unrelated.has(node)), {
+		id: UNRELATED_GROUP_ID,
+		width: 0,
+		height: 0,
+		children: [...unrelated]
+	}];
+}
+function flattenElkNodes(nodes) {
+	return nodes.flatMap((node) => node.children?.length ? flattenElkNodes(node.children) : [node]);
+}
+function layoutRects(nodes, pointById) {
+	return nodes.flatMap((node) => {
+		if (!node.children?.length) {
+			const point = pointById.get(node.id);
+			return point ? [{
+				x: point.x,
+				y: point.y,
+				width: node.width,
+				height: node.height
+			}] : [];
+		}
+		const inner = layoutRects(node.children, pointById);
+		return node.kind === "tableGroup" && inner.length ? [...inner, padRect(inner.reduce(unionRect))] : inner;
+	});
+}
+function boundsOfLayout(nodes, points) {
+	const rects = layoutRects(nodes, new Map(points.map((point) => [point.id, point])));
+	if (!rects.length) return null;
+	return {
+		minX: Math.min(...rects.map(({ x }) => x)),
+		minY: Math.min(...rects.map(({ y }) => y)),
+		maxX: Math.max(...rects.map(({ x, width }) => x + width)),
+		maxY: Math.max(...rects.map(({ y, height }) => y + height))
+	};
+}
+function toTablePoints(state, { nodes }, points) {
+	const bounds = boundsOfLayout(nodes, points);
+	if (!bounds) return [];
+	const content = getContentRect(state) ?? EMPTY_RECT;
+	return offsetBy(nodes, points, content.x + content.width / 2 - (bounds.minX + bounds.maxX) / 2, content.y + content.height / 2 - (bounds.minY + bounds.maxY) / 2);
+}
+function toViewPoints({ nodes }, points) {
+	const bounds = boundsOfLayout(nodes, points);
+	if (!bounds) return [];
+	return offsetBy(nodes, points, -bounds.minX, -bounds.minY);
+}
+function offsetBy(nodes, points, offsetX, offsetY) {
+	const placed = new Set(flattenElkNodes(nodes).map((node) => node.id));
+	return points.filter(({ id }) => placed.has(id)).map(({ id, x, y }) => ({
+		id,
+		x: x + offsetX,
+		y: y + offsetY
+	}));
+}
+//#endregion
+export { createElkLayoutRequest, flattenElkNodes, toTablePoints, toViewPoints };

package/dist/services/elk-layout/elkLayoutOptions.js

@@ -0,0 +1,52 @@
+import { TablePlacement } from "../../constants/tablePlacement.js";
+//#region src/services/elk-layout/elkLayoutOptions.ts
+function isElkPlacement(placement) {
+	return placement !== TablePlacement.force;
+}
+function usesCoordinateHints(placement) {
+	return placement === TablePlacement.viewLayered;
+}
+function keepsTableGroups(placement) {
+	return placement !== TablePlacement.viewLayered;
+}
+var NODE_SPACING = 80;
+var LAYER_SPACING = 160;
+var COMPONENT_SPACING = 160;
+var VIEW_LAYERED = {
+	"elk.algorithm": "layered",
+	"elk.layered.spacing.baseValue": "40",
+	"elk.spacing.componentComponent": "80",
+	"elk.layered.spacing.edgeNodeBetweenLayers": "120",
+	"elk.layered.considerModelOrder.strategy": "PREFER_EDGES",
+	"elk.layered.crossingMinimization.forceNodeModelOrder": "true",
+	"elk.layered.mergeEdges": "true",
+	"elk.layered.nodePlacement.strategy": "INTERACTIVE",
+	"elk.layered.layering.strategy": "INTERACTIVE"
+};
+var COMMON = {
+	"elk.spacing.nodeNode": `${NODE_SPACING}`,
+	"elk.separateConnectedComponents": "true",
+	"elk.spacing.componentComponent": `${COMPONENT_SPACING}`
+};
+var layered = (direction) => ({
+	...COMMON,
+	"elk.algorithm": "layered",
+	"elk.direction": direction,
+	"elk.layered.spacing.nodeNodeBetweenLayers": `${LAYER_SPACING}`,
+	"elk.layered.cycleBreaking.strategy": "DEPTH_FIRST"
+});
+function elkLayoutOptions(placement) {
+	switch (placement) {
+		case TablePlacement.layeredHorizontal: return layered("RIGHT");
+		case TablePlacement.layeredVertical: return layered("DOWN");
+		case TablePlacement.flow: return {
+			...layered("RIGHT"),
+			"elk.layered.nodePlacement.strategy": "SIMPLE",
+			"elk.layered.spacing.edgeNodeBetweenLayers": `${NODE_SPACING}`
+		};
+		case TablePlacement.viewLayered: return { ...VIEW_LAYERED };
+	}
+}
+[...new Set(Object.values(TablePlacement).filter(isElkPlacement).map((placement) => elkLayoutOptions(placement)["elk.algorithm"]))];
+//#endregion
+export { elkLayoutOptions, isElkPlacement, keepsTableGroups, usesCoordinateHints };

package/dist/services/elk-layout/index.js

@@ -0,0 +1,45 @@
+import { withTimeout } from "../../utils/promise.js";
+import { spawnElkLayoutWorker } from "../../workers/elkLayout.spawn.js";
+import { isElkPlacement } from "./elkLayoutOptions.js";
+import { createElkLayoutRequest, toTablePoints, toViewPoints } from "./elkGraph.js";
+import * as Comlink from "comlink";
+//#region src/services/elk-layout/index.ts
+var WORKER_NAME = `@dineug/erd-editor-elk-layout-worker?v5.0.0`;
+var HANDSHAKE_MS = 3e4;
+var LAYOUT_MS = 6e4;
+var SLOW_LAYOUT_MS = 6e3;
+var connection = null;
+function connectSharedWorker() {
+	if (connection) return connection;
+	connection = (async () => {
+		if (typeof SharedWorker === "undefined") throw new Error("[elk-layout] this host runs no shared worker");
+		const worker = spawnElkLayoutWorker(WORKER_NAME);
+		const failed = new Promise((_, reject) => {
+			worker.onerror = () => reject(/* @__PURE__ */ new Error("[elk-layout] the shared worker failed to start"));
+		});
+		failed.catch(() => {});
+		const remote = Comlink.wrap(worker.port);
+		try {
+			await withTimeout(Promise.race([remote.ready(), failed]), HANDSHAKE_MS, "[elk-layout] the worker did not answer");
+			return remote;
+		} catch (error) {
+			worker.port.close();
+			throw error;
+		}
+	})();
+	connection.catch(() => {
+		connection = null;
+	});
+	return connection;
+}
+async function createElkLayout(request, onSlow) {
+	const slow = onSlow ? setTimeout(onSlow, SLOW_LAYOUT_MS) : null;
+	try {
+		const remote = await connectSharedWorker();
+		return await withTimeout(remote.layout(request), LAYOUT_MS, "[elk-layout] the layout did not come back");
+	} finally {
+		slow !== null && clearTimeout(slow);
+	}
+}
+//#endregion
+export { SLOW_LAYOUT_MS, createElkLayout, createElkLayoutRequest, isElkPlacement, toTablePoints, toViewPoints };

package/dist/services/export-png/ExportScene.js

@@ -0,0 +1,30 @@
+import { query } from "../../erd-editor-schema/dist/query/index.js";
+import { Show } from "../../constants/schema.js";
+import { repeat } from "../../r-html/dist/render/directives/node/repeat.js";
+import { bHas } from "../../utils/bit.js";
+import { isMemoShown } from "../../utils/memo.js";
+import { isTableGroupShown } from "../../utils/tableGroup.js";
+import { useAppContext } from "../../components/appContext.js";
+import { konva } from "../../r-html-konva/dist/host.js";
+import { useThemeContext } from "../../components/themeContext.js";
+import Memo from "../../components/erd/canvas/memo/Memo.js";
+import RelationshipGroup from "../../components/erd/canvas/relationship-group/RelationshipGroup.js";
+import Table from "../../components/erd/canvas/table/Table.js";
+import TableGroups from "../../components/erd/canvas/table-group/TableGroups.js";
+import { stackTablesAndMemos, stackedKey } from "../../konva/scene/stacking.js";
+//#region src/services/export-png/ExportScene.tsx
+var ExportScene = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const themeRef = useThemeContext(ctx);
+	return () => {
+		const { store } = app.value;
+		const { box, scale } = props;
+		const { settings: { show }, doc: { tableIds, memoIds, relationshipIds }, collections } = store.state;
+		const theme = themeRef.value;
+		const stack = stackTablesAndMemos(query(collections).collection("tableEntities").selectByIds(tableIds), isMemoShown(store.state) ? query(collections).collection("memoEntities").selectByIds(memoIds) : []);
+		const relationships = query(collections).collection("relationshipEntities").selectByIds(relationshipIds);
+		return konva`<k-layer name="export-scene" listening=${false} x=${-box.x * scale} y=${-box.y * scale} scaleX=${scale} scaleY=${scale}><k-rect name="export-background" x=${box.x} y=${box.y} width=${box.width} height=${box.height} fill=${theme.canvasBackground} />${isTableGroupShown(store.state) ? konva`<${TableGroups} />` : null}${bHas(show, Show.relationship) ? konva`<${RelationshipGroup} .relationships=${relationships} />` : null}${repeat(stack, stackedKey, (item) => item.kind === "table" ? konva`<${Table} .table=${item.entity} .checkMarks=${false} />` : konva`<${Memo} .memo=${item.entity} />`)}</k-layer>`;
+	};
+};
+//#endregion
+export { ExportScene as default };

package/dist/services/export-png/documentScene.js

@@ -0,0 +1,45 @@
+import { changeZoomLevelAction, toNameViewModeAction } from "../../engine/modules/settings/atom.actions.js";
+import { initialLoadJsonAction$ } from "../../engine/modules/editor/generator.actions.js";
+import { appDestroy, createAppContext } from "../../components/appContext.js";
+import { whenDrawn } from "../../r-html-konva/dist/batchDraw.js";
+import { konva } from "../../r-html-konva/dist/host.js";
+import { createI18n } from "../../i18n/translate.js";
+import { delay } from "../../utils/promise.js";
+import { renderScene } from "../../konva/scene/renderScene.js";
+import { getExportRect, getExportScale, getStageSize } from "./exportBox.js";
+import ExportScene from "./ExportScene.js";
+import { isNumber } from "es-toolkit";
+//#region src/services/export-png/documentScene.tsx
+var SETTLE_MS = 32;
+async function renderDocumentScene({ doc, theme, toWidth, maxSide, i18n, nameViewMode }) {
+	const app = createAppContext({ toWidth }, { devtools: false });
+	app.store.dispatchSync(initialLoadJsonAction$(doc));
+	app.store.dispatchSync(changeZoomLevelAction({ value: 1 }));
+	if (nameViewMode) app.store.dispatchSync(toNameViewModeAction(app.store.state, nameViewMode, true));
+	await delay(SETTLE_MS);
+	const box = getExportRect(app.store.state);
+	const fitted = getExportScale(box);
+	const scale = isNumber(maxSide) ? Math.min(fitted, maxSide / Math.max(box.width, box.height)) : fitted;
+	const stageSize = getStageSize(box, scale);
+	const rendered = renderScene({
+		app,
+		container: document.createElement("div"),
+		scene: konva`<${ExportScene} .box=${box} .scale=${scale} />`,
+		width: stageSize.width,
+		height: stageSize.height,
+		theme,
+		i18n: i18n && createI18n(i18n.locale, i18n.messages)
+	});
+	await whenDrawn();
+	return {
+		stage: rendered.stage,
+		box,
+		scale,
+		destroy: () => {
+			rendered.destroy();
+			appDestroy(app);
+		}
+	};
+}
+//#endregion
+export { renderDocumentScene };

package/dist/services/export-png/exportBox.js

@@ -0,0 +1,63 @@
+import { query } from "../../erd-editor-schema/dist/query/index.js";
+import { Show } from "../../constants/schema.js";
+import { bHas } from "../../utils/bit.js";
+import { getRouteBBox } from "../../utils/draw-relationship/index.js";
+import { unionRect } from "../../konva/scene/metrics.js";
+import { getContentRect } from "../../konva/scene/contentBounds.js";
+import { CANVAS_AREA_MAX, CANVAS_SIDE_MAX, fitPixelRatio } from "./pixelRatio.js";
+function inflate({ x, y, width, height }, padding) {
+	return {
+		x: x - padding,
+		y: y - padding,
+		width: width + padding * 2,
+		height: height + padding * 2
+	};
+}
+function getExportRect(state) {
+	const { settings: { show }, doc: { relationshipIds }, collections } = state;
+	let box = getContentRect(state);
+	if (bHas(show, Show.relationship)) {
+		const relationships = query(collections).collection("relationshipEntities").selectByIds(relationshipIds);
+		for (const relationship of relationships) {
+			const route = getRouteBBox(relationship);
+			box = box ? unionRect(box, route) : route;
+		}
+	}
+	return inflate(box ?? {
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	}, 80);
+}
+function getExportScale({ width, height }) {
+	const side = Math.max(width, height);
+	const area = width * height;
+	if (side <= 0 || area <= 0) return 1;
+	return Math.min(1, CANVAS_SIDE_MAX / side, Math.sqrt(CANVAS_AREA_MAX / area));
+}
+function getStageSize(box, scale) {
+	return {
+		width: Math.max(box.width * scale, 1),
+		height: Math.max(box.height * scale, 1)
+	};
+}
+function getExportSize(box, pixelRatio) {
+	const scale = getExportScale({
+		x: 0,
+		y: 0,
+		...box
+	});
+	const stage = getStageSize(box, scale);
+	const ratio = fitPixelRatio(pixelRatio, stage.width, stage.height);
+	const asked = 1 * pixelRatio;
+	return {
+		width: Math.floor(stage.width * ratio),
+		height: Math.floor(stage.height * ratio),
+		askedWidth: Math.floor(box.width * asked),
+		askedHeight: Math.floor(box.height * asked),
+		reduced: scale * ratio < asked
+	};
+}
+//#endregion
+export { getExportRect, getExportScale, getExportSize, getStageSize };

package/dist/services/export-png/exportTheme.js

@@ -0,0 +1,16 @@
+import { Appearance, createTheme } from "../../themes/radix-ui-theme.js";
+//#region src/services/export-png/exportTheme.ts
+var TRANSPARENT_BACKGROUND = "rgba(0,0,0,0)";
+function createExportTheme({ sceneTheme, themeOptions: { grayColor, accentColor }, isDarkMode, darkMode, background }) {
+	const theme = darkMode === isDarkMode ? { ...sceneTheme } : createTheme({
+		grayColor,
+		accentColor,
+		appearance: darkMode ? Appearance.dark : Appearance.light
+	});
+	return background ? theme : {
+		...theme,
+		canvasBackground: TRANSPARENT_BACKGROUND
+	};
+}
+//#endregion
+export { TRANSPARENT_BACKGROUND, createExportTheme };

package/dist/services/export-png/index.js

@@ -0,0 +1,139 @@
+import { withTimeout } from "../../utils/promise.js";
+import { spawnExportPngWorker } from "../../workers/exportPng.spawn.js";
+import { renderDocumentPng } from "./renderPng.js";
+import { renderDocumentSvg } from "./renderSvg.js";
+import { measureFontProbe } from "./textWidth.js";
+import * as Comlink from "comlink";
+//#region src/services/export-png/index.ts
+var DEFAULT_PIXEL_RATIO = 1;
+var WORKER_NAME = `@dineug/erd-editor-export-png-worker?v5.0.0`;
+var HANDSHAKE_MS = 1e4;
+var connection = null;
+function connectSharedWorker() {
+	if (connection) return connection;
+	connection = (async () => {
+		let worker;
+		try {
+			worker = spawnExportPngWorker(WORKER_NAME);
+		} catch (error) {
+			console.warn("[export-png] this host built no shared worker", error);
+			return null;
+		}
+		worker.onerror = () => {
+			connection = null;
+		};
+		const remote = Comlink.wrap(worker.port);
+		try {
+			await withTimeout(remote.probeFontWidths(), HANDSHAKE_MS, "[export-png] the worker did not answer");
+			return remote;
+		} catch (error) {
+			console.warn("[export-png] the shared worker did not start", error);
+			worker.port.close();
+			return null;
+		}
+	})();
+	return connection;
+}
+var copyLocale = (i18n) => i18n && {
+	locale: i18n.locale,
+	messages: i18n.messages
+};
+function report({ blob, width, height, reduction }, realm, { onResolutionReduced, onProgress }) {
+	if (reduction) onResolutionReduced?.(reduction);
+	onProgress?.({
+		phase: "finished",
+		realm,
+		width,
+		height
+	});
+	return blob;
+}
+async function drawInRealm({ inWorker, onMain }, toWidth, onProgress) {
+	await document.fonts?.ready;
+	if (typeof SharedWorker !== "undefined") {
+		onProgress?.({
+			phase: "started",
+			realm: "worker"
+		});
+		const remote = await connectSharedWorker();
+		if (remote) try {
+			return {
+				result: await inWorker(remote, measureFontProbe(toWidth)),
+				realm: "worker"
+			};
+		} catch (error) {
+			console.warn("[export-png] the worker handed the export back", error);
+		}
+	}
+	onProgress?.({
+		phase: "started",
+		realm: "main"
+	});
+	return {
+		result: await onMain(),
+		realm: "main"
+	};
+}
+function renderInRealm(request, toWidth, onProgress) {
+	return drawInRealm({
+		inWorker: (remote, fontProbe) => remote.render({
+			...request,
+			fontProbe
+		}),
+		onMain: () => renderDocumentPng({
+			...request,
+			toWidth
+		})
+	}, toWidth, onProgress);
+}
+async function createDocumentPng({ doc, theme, toWidth, pixelRatio = DEFAULT_PIXEL_RATIO, i18n, nameViewMode, onResolutionReduced, onProgress }) {
+	const { result, realm } = await renderInRealm({
+		doc,
+		theme: { ...theme },
+		pixelRatio,
+		i18n: copyLocale(i18n),
+		nameViewMode
+	}, toWidth, onProgress);
+	return report(result, realm, {
+		onResolutionReduced,
+		onProgress
+	});
+}
+async function createDocumentPreview({ doc, theme, toWidth, maxSide, i18n, nameViewMode }) {
+	const { result } = await renderInRealm({
+		doc,
+		theme: { ...theme },
+		pixelRatio: DEFAULT_PIXEL_RATIO,
+		maxSide,
+		i18n: copyLocale(i18n),
+		nameViewMode
+	}, toWidth);
+	return {
+		blob: result.blob,
+		width: result.width,
+		height: result.height,
+		documentWidth: result.documentWidth,
+		documentHeight: result.documentHeight
+	};
+}
+async function createDocumentSvg({ doc, theme, toWidth, i18n, nameViewMode }) {
+	const request = {
+		doc,
+		theme: { ...theme },
+		i18n: copyLocale(i18n),
+		nameViewMode
+	};
+	const { result } = await drawInRealm({
+		inWorker: (remote, fontProbe) => remote.renderSvg({
+			...request,
+			fontProbe
+		}),
+		onMain: () => renderDocumentSvg({
+			...request,
+			toWidth
+		})
+	}, toWidth);
+	return result;
+}
+//#endregion
+export { createDocumentPng, createDocumentPreview, createDocumentSvg };

package/dist/services/export-png/pixelRatio.js

@@ -0,0 +1,12 @@
+//#region src/services/export-png/pixelRatio.ts
+var CANVAS_AREA_MAX = 268435456;
+var CANVAS_SIDE_MAX = 32767;
+var CANVAS_AREA_ROOT = Math.sqrt(CANVAS_AREA_MAX);
+function fitPixelRatio(pixelRatio, width, height) {
+	const side = Math.max(width, height);
+	const area = width * height;
+	if (side <= 0 || area <= 0) return pixelRatio;
+	return Math.min(pixelRatio, CANVAS_SIDE_MAX / side, CANVAS_AREA_ROOT / Math.sqrt(area));
+}
+//#endregion
+export { CANVAS_AREA_MAX, CANVAS_SIDE_MAX, fitPixelRatio };

package/dist/services/export-png/renderPng.js

@@ -0,0 +1,52 @@
+import { fitPixelRatio } from "./pixelRatio.js";
+import { getExportSize } from "./exportBox.js";
+import { renderDocumentScene } from "./documentScene.js";
+//#region src/services/export-png/renderPng.ts
+function toPngBlob(canvas) {
+	if ("convertToBlob" in canvas) return canvas.convertToBlob({ type: "image/png" });
+	return new Promise((resolve, reject) => {
+		canvas.toBlob((blob) => {
+			blob ? resolve(blob) : reject(/* @__PURE__ */ new Error("[export-png] the canvas encoded no png"));
+		}, "image/png");
+	});
+}
+async function renderDocumentPng({ doc, theme, pixelRatio, maxSide, i18n, nameViewMode, toWidth }) {
+	const scene = await renderDocumentScene({
+		doc,
+		theme,
+		toWidth,
+		maxSide,
+		i18n,
+		nameViewMode
+	});
+	try {
+		const ratio = fitPixelRatio(pixelRatio, scene.stage.width(), scene.stage.height());
+		const canvas = scene.stage.toCanvas({ pixelRatio: ratio });
+		const blob = await toPngBlob(canvas);
+		const { width, height } = canvas;
+		const drawn = scene.scale * ratio;
+		const asked = 1 * pixelRatio;
+		let reduction = null;
+		if (drawn < asked) {
+			const { askedWidth, askedHeight } = getExportSize(scene.box, pixelRatio);
+			reduction = {
+				askedWidth,
+				askedHeight,
+				width,
+				height
+			};
+		}
+		return {
+			blob,
+			width,
+			height,
+			documentWidth: scene.box.width,
+			documentHeight: scene.box.height,
+			reduction
+		};
+	} finally {
+		scene.destroy();
+	}
+}
+//#endregion
+export { renderDocumentPng };

package/dist/services/export-png/renderSvg.js

@@ -0,0 +1,24 @@
+import { renderDocumentScene } from "./documentScene.js";
+import { toSceneSvg } from "./sceneSvg.js";
+//#region src/services/export-png/renderSvg.ts
+var STAGE_MAX_SIDE = 256;
+async function renderDocumentSvg({ doc, theme, i18n, nameViewMode, toWidth }) {
+	const scene = await renderDocumentScene({
+		doc,
+		theme,
+		toWidth,
+		maxSide: STAGE_MAX_SIDE,
+		i18n,
+		nameViewMode
+	});
+	try {
+		return toSceneSvg(scene.stage, {
+			box: scene.box,
+			scale: scene.scale
+		});
+	} finally {
+		scene.destroy();
+	}
+}
+//#endregion
+export { renderDocumentSvg };