@markmap/canvas 0.0.0-stage → 1.0.0-next.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Gerald
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,5 @@
-# Temporary Holding Version
+# @markmap/canvas
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Canvas backend for Markmap.
+
+See the [Markmap README](https://github.com/markmap/markmap#readme) for how the packages fit together.

package/dist/backend.d.ts

@@ -0,0 +1,38 @@
+import type { Primitive } from '@markmap/core';
+import type { ViewBackend, ViewTransform } from '@markmap/view';
+export interface CanvasBackendOptions {
+    /** See `ViewBackend.themeSelector`. */
+    themeSelector?: string;
+}
+/**
+ * Shows a map in a `<canvas>`, for much larger maps than SVG can animate smoothly. Pass
+ * it to `Markmap`: `new Markmap(new CanvasBackend(canvas))`. Size the canvas with CSS.
+ *
+ * Unlike SVG, a canvas has no accessibility tree and its text cannot be selected.
+ */
+export declare class CanvasBackend implements ViewBackend {
+    readonly element: HTMLCanvasElement;
+    readonly themeSelector?: string;
+    private ctx;
+    private style;
+    private primitives;
+    private transform;
+    private images;
+    private env;
+    private frame?;
+    private resizeObserver?;
+    private darkQuery?;
+    constructor(canvas: HTMLCanvasElement, { themeSelector }?: CanvasBackendOptions);
+    draw(primitives: Primitive[]): void;
+    setTransform(transform: ViewTransform): void;
+    setCSS(css: string): void;
+    private schedule;
+    /** Draw now. Changes are otherwise drawn on the next animation frame, at most once. */
+    paint(): void;
+    /**
+     * Match the bitmap to the element's size and the screen's pixel density. Returns the
+     * device pixel ratio, or 0 when the element has no size.
+     */
+    private fitToElement;
+    destroy(): void;
+}

package/dist/draw.d.ts

@@ -0,0 +1,41 @@
+import type { Primitive, Rect } from '@markmap/core';
+import { type TokenLookup } from '@markmap/render';
+import type { LoadedImage } from './images';
+export interface DrawEnv {
+    /** Values for the `var(--mm-…)` paints in primitives. */
+    tokens: TokenLookup;
+    /**
+     * Find an image by its source: `undefined` while it is not ready, which leaves it out
+     * so the caller can draw again, and `null` if it failed, which draws its fallback.
+     * See {@link ImageCache}.
+     */
+    image?: (src: string) => LoadedImage | null | undefined;
+    /** Parse SVG path data. Defaults to the global `Path2D`; Node has none. */
+    createPath?: (d: string) => Path2D;
+    /**
+     * Families to add to every font, as CSS. Browsers find a font for any character by
+     * themselves, but Node's canvas only looks through the families it is told about.
+     */
+    fontFallback?: string;
+    /** Report something that cannot be drawn. Defaults to warning once per message. */
+    warn?: (message: string) => void;
+    /**
+     * What is on screen. Top-level groups outside it are skipped, and what is too small to
+     * read is sketched. Leave it out to draw everything in full, as for exports.
+     */
+    view?: DrawView;
+}
+export interface DrawView {
+    /** The visible area, in the coordinates of the primitives. */
+    rect: Rect;
+    /** Screen pixels per unit of those coordinates. */
+    scale: number;
+}
+/**
+ * Draw primitives on a 2D context, in whatever coordinates the context is set to. Needs
+ * no DOM, so it also runs in workers and in Node.
+ *
+ * Group opacity multiplies down to each primitive instead of fading the group as one
+ * layer, so overlapping children of a fading group show through each other.
+ */
+export declare function drawPrimitives(ctx: CanvasRenderingContext2D, primitives: readonly Primitive[], env: DrawEnv): void;

package/dist/export-D0aKjidm.js

@@ -0,0 +1,292 @@
+import { fontToCss, resolvePaint, themeTokens } from "@markmap/render";
+import { expandRect } from "@markmap/core";
+// src/draw.ts
+var warned = /* @__PURE__ */ new Set();
+function warnOnce(message) {
+	if (warned.has(message)) return;
+	warned.add(message);
+	console.warn(message);
+}
+/** Text without a usable paint is black, as in SVG. */
+var DEFAULT_TEXT_FILL = "#000";
+/** Below this font size on screen, in px, text is drawn as bars. */
+var MIN_TEXT_SIZE = 3;
+/** Below this size on screen, in px, images are drawn as plain boxes. */
+var MIN_IMAGE_SIZE = 6;
+/** How strongly bars and boxes stand in for what they replace. */
+var SKETCH_ALPHA = .4;
+var SKETCH_IMAGE_FILL = "#888";
+/** Parsed paths, kept with their primitives: redrawing the same frame reuses them. */
+var parsedPaths = /* @__PURE__ */ new WeakMap();
+var overlaps = (a, b) => a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;
+/** Width of a run, estimated if the layout did not record it. */
+var runWidth = (run) => run.width ?? run.text.length * run.font.size * .5;
+/**
+* Draw primitives on a 2D context, in whatever coordinates the context is set to. Needs
+* no DOM, so it also runs in workers and in Node.
+*
+* Group opacity multiplies down to each primitive instead of fading the group as one
+* layer, so overlapping children of a fading group show through each other.
+*/
+function drawPrimitives(ctx, primitives, env) {
+	const { view } = env;
+	const scale = view?.scale;
+	const warn = env.warn ?? warnOnce;
+	const createPath = env.createPath ?? ((d) => new Path2D(d));
+	const paints = /* @__PURE__ */ new Map();
+	/** The context's font is costly to set and normalized when read, so track it here. */
+	let currentFont;
+	const paint = (value) => {
+		if (value == null || value === "none") return void 0;
+		if (!paints.has(value)) paints.set(value, resolvePaint(value, env.tokens));
+		return paints.get(value);
+	};
+	const finish = (p, fill, stroke) => {
+		const fillStyle = paint(p.fill);
+		if (fillStyle) {
+			ctx.fillStyle = fillStyle;
+			fill();
+		}
+		const strokeStyle = paint(p.stroke);
+		if (strokeStyle) {
+			ctx.strokeStyle = strokeStyle;
+			ctx.lineWidth = p.strokeWidth ?? 1;
+			stroke();
+		}
+	};
+	const pathOf = (p) => {
+		let path = parsedPaths.get(p);
+		if (!path) {
+			path = createPath(p.d);
+			parsedPaths.set(p, path);
+		}
+		return path;
+	};
+	/** Each run as a bar where its letters would be. */
+	const sketchText = (p) => {
+		const { globalAlpha } = ctx;
+		ctx.globalAlpha = globalAlpha * SKETCH_ALPHA;
+		for (const run of p.runs) {
+			const { size } = run.font;
+			ctx.fillStyle = paint(run.fill) ?? DEFAULT_TEXT_FILL;
+			ctx.fillRect(p.x + run.x, p.y + run.y - size * .7, runWidth(run), size * .8);
+		}
+		ctx.globalAlpha = globalAlpha;
+	};
+	const sketchImage = (p) => {
+		const { globalAlpha } = ctx;
+		ctx.globalAlpha = globalAlpha * SKETCH_ALPHA;
+		ctx.fillStyle = SKETCH_IMAGE_FILL;
+		ctx.fillRect(p.x, p.y, p.w, p.h);
+		ctx.globalAlpha = globalAlpha;
+	};
+	const drawText = (p) => {
+		if (scale && p.runs.every((run) => run.font.size * scale < MIN_TEXT_SIZE)) {
+			sketchText(p);
+			return;
+		}
+		for (const run of p.runs) {
+			const css = fontToCss(run.font);
+			const font = env.fontFallback ? `${css}, ${env.fontFallback}` : css;
+			if (font !== currentFont) {
+				ctx.font = font;
+				currentFont = font;
+			}
+			ctx.fillStyle = paint(run.fill) ?? DEFAULT_TEXT_FILL;
+			ctx.fillText(run.text, p.x + run.x, p.y + run.y);
+		}
+	};
+	const draw = (list, top = false) => {
+		for (const p of list) {
+			if (p.backends && !p.backends.includes("canvas")) continue;
+			switch (p.kind) {
+				case "group": {
+					if (top && p.bounds && view && !overlaps(p.bounds, view.rect)) break;
+					const isolated = p.transform || p.opacity != null || p.clip;
+					const outerFont = currentFont;
+					if (isolated) ctx.save();
+					if (p.transform) ctx.transform(...p.transform);
+					if (p.opacity != null) ctx.globalAlpha *= p.opacity;
+					if (p.clip) {
+						ctx.beginPath();
+						ctx.rect(p.clip.x, p.clip.y, p.clip.width, p.clip.height);
+						ctx.clip();
+					}
+					draw(p.children);
+					if (isolated) {
+						ctx.restore();
+						currentFont = outerFont;
+					}
+					break;
+				}
+				case "rect":
+					ctx.beginPath();
+					if (p.r) ctx.roundRect(p.x, p.y, p.w, p.h, p.r);
+					else ctx.rect(p.x, p.y, p.w, p.h);
+					finish(p, () => ctx.fill(), () => ctx.stroke());
+					break;
+				case "path": {
+					const path = pathOf(p);
+					finish(p, () => ctx.fill(path), () => ctx.stroke(path));
+					break;
+				}
+				case "text":
+					drawText(p);
+					break;
+				case "image": {
+					if (scale && Math.max(p.w, p.h) * scale < MIN_IMAGE_SIZE) {
+						sketchImage(p);
+						break;
+					}
+					const image = env.image?.(p.src);
+					if (image) {
+						const { x, y, w, h } = fitImage(p, image);
+						ctx.drawImage(image.source, x, y, w, h);
+					} else if (image === null && p.fallback) draw(p.fallback);
+					break;
+				}
+				case "custom":
+					if (p.canvas) {
+						ctx.save();
+						p.canvas(ctx);
+						ctx.restore();
+					} else warn("Skipped a custom primitive with no canvas drawing");
+					break;
+				case "overlay": warn("Skipped an overlay primitive: canvas does not draw them yet");
+			}
+		}
+	};
+	ctx.textAlign = "start";
+	ctx.textBaseline = "alphabetic";
+	draw(primitives, true);
+}
+/** The largest centered box with the image's aspect ratio, as SVG's `<image>` draws it. */
+function fitImage(box, { width, height }) {
+	if (!width || !height) return box;
+	const k = Math.min(box.w / width, box.h / height);
+	const w = width * k;
+	const h = height * k;
+	return {
+		x: box.x + (box.w - w) / 2,
+		y: box.y + (box.h - h) / 2,
+		w,
+		h
+	};
+}
+// src/images.ts
+function browserLoad(src, crossOrigin) {
+	return new Promise((resolve, reject) => {
+		const image = new Image();
+		if (crossOrigin) image.crossOrigin = crossOrigin;
+		image.addEventListener("load", () => resolve({
+			source: image,
+			width: image.naturalWidth,
+			height: image.naturalHeight
+		}));
+		image.addEventListener("error", () => reject(/* @__PURE__ */ new Error(`Could not load ${src}`)));
+		image.src = src;
+	});
+}
+/**
+* Images for {@link drawPrimitives}, which draws synchronously. Asking for an image
+* starts loading it, and gives `undefined` until it is ready. Failures are remembered as
+* `null`, so a broken image is not requested on every frame.
+*/
+var ImageCache = class {
+	images = /* @__PURE__ */ new Map();
+	loading = /* @__PURE__ */ new Map();
+	load;
+	onLoad;
+	constructor(options = {}) {
+		this.load = options.load ?? ((src) => browserLoad(src, options.crossOrigin));
+		this.onLoad = options.onLoad;
+	}
+	get(src) {
+		const image = this.images.get(src);
+		if (image === void 0) this.start(src);
+		return image;
+	}
+	/** Settles once all these images are loaded or have failed. */
+	async preload(sources) {
+		await Promise.all(Array.from(sources, (src) => this.start(src)));
+	}
+	start(src) {
+		let task = this.loading.get(src);
+		if (!task) {
+			task = this.load(src).then((loaded) => {
+				this.images.set(src, loaded);
+				this.onLoad?.();
+			}, () => {
+				this.images.set(src, null);
+				this.onLoad?.();
+			});
+			this.loading.set(src, task);
+		}
+		return task;
+	}
+};
+// src/export.ts
+var DEFAULT_MAX_SIZE = 16384;
+/** Pixel size of an export and how to place the drawing in it. */
+function exportLayout(result, options = {}) {
+	const { padding = 20, scale = 2, maxSize = DEFAULT_MAX_SIZE } = options;
+	const box = expandRect(result.bounds, padding);
+	const fitted = Math.min(scale, maxSize / Math.max(box.width, box.height));
+	return {
+		box,
+		scale: fitted,
+		width: Math.min(maxSize, Math.ceil(box.width * fitted)),
+		height: Math.min(maxSize, Math.ceil(box.height * fitted))
+	};
+}
+/** Sources of all images in `primitives`. */
+function imageSources(primitives) {
+	const sources = /* @__PURE__ */ new Set();
+	const visit = (list) => {
+		for (const p of list) {
+			if (p.backends && !p.backends.includes("canvas")) continue;
+			if (p.kind === "group") visit(p.children);
+			else if (p.kind === "image") sources.add(p.src);
+		}
+	};
+	visit(primitives);
+	return sources;
+}
+/** Draw a whole map in full on a context of the size from {@link exportLayout}. */
+function drawExport(ctx, result, options, env) {
+	const { box, scale, width, height } = exportLayout(result, options);
+	const tokens = themeTokens(result.theme, options.colorScheme);
+	const background = resolvePaint("var(--mm-bg)", tokens);
+	if (options.background !== false && background) {
+		ctx.fillStyle = background;
+		ctx.fillRect(0, 0, width, height);
+	}
+	ctx.setTransform(scale, 0, 0, scale, -box.x * scale, -box.y * scale);
+	drawPrimitives(ctx, result.primitives, {
+		...env,
+		tokens
+	});
+}
+/**
+* Export a map as a PNG, in the browser. Pass a finished result, such as `mm.result` or
+* what `renderTreeAsync` gives. Images load first; ones whose server does not allow
+* cross-origin use show their alt text, because they would make the canvas unreadable.
+*/
+async function toPNG(result, options = {}) {
+	const { width, height } = exportLayout(result, options);
+	const canvas = document.createElement("canvas");
+	canvas.width = width;
+	canvas.height = height;
+	const ctx = canvas.getContext("2d");
+	if (!ctx) throw new Error("Canvas 2D is not available");
+	const images = new ImageCache({ crossOrigin: "anonymous" });
+	await Promise.all([images.preload(imageSources(result.primitives)), document.fonts?.ready]);
+	drawExport(ctx, result, options, { image: (src) => images.get(src) });
+	return new Promise((resolve, reject) => {
+		canvas.toBlob((blob) => {
+			if (blob) resolve(blob);
+			else reject(/* @__PURE__ */ new Error(`Could not export a ${width}×${height} image`));
+		}, "image/png");
+	});
+}
+export { ImageCache as a, toPNG as i, exportLayout as n, drawPrimitives as o, imageSources as r, drawExport as t };

package/dist/export.d.ts

@@ -0,0 +1,35 @@
+import { type Primitive } from '@markmap/core';
+import { type RenderResult } from '@markmap/render';
+import { type DrawEnv } from './draw';
+export interface ImageExportOptions {
+    /** Pixels per layout px. Defaults to 2, which stays sharp on high-density screens. */
+    scale?: number;
+    /** Space around the drawing, in px. */
+    padding?: number;
+    /** Fill the background with `--mm-bg`. Otherwise it is transparent. */
+    background?: boolean;
+    /** Which tokens to use. Defaults to `light`. */
+    colorScheme?: 'light' | 'dark';
+    /**
+     * Largest width or height of the image, in pixels; `scale` is lowered to fit. Browsers
+     * refuse canvases past a limit, and the default is the largest most of them allow.
+     */
+    maxSize?: number;
+}
+/** Pixel size of an export and how to place the drawing in it. */
+export declare function exportLayout(result: RenderResult, options?: ImageExportOptions): {
+    box: import("@markmap/core").Rect;
+    scale: number;
+    width: number;
+    height: number;
+};
+/** Sources of all images in `primitives`. */
+export declare function imageSources(primitives: readonly Primitive[]): Set<string>;
+/** Draw a whole map in full on a context of the size from {@link exportLayout}. */
+export declare function drawExport(ctx: CanvasRenderingContext2D, result: RenderResult, options: ImageExportOptions, env: Omit<DrawEnv, 'tokens' | 'view'>): void;
+/**
+ * Export a map as a PNG, in the browser. Pass a finished result, such as `mm.result` or
+ * what `renderTreeAsync` gives. Images load first; ones whose server does not allow
+ * cross-origin use show their alt text, because they would make the canvas unreadable.
+ */
+export declare function toPNG(result: RenderResult, options?: ImageExportOptions): Promise<Blob>;

package/dist/images.d.ts

@@ -0,0 +1,33 @@
+/** An image ready to draw, with its natural size. */
+export interface LoadedImage {
+    source: CanvasImageSource;
+    width: number;
+    height: number;
+}
+export interface ImageCacheOptions {
+    /** Load an image. Defaults to `Image`, which needs a browser. */
+    load?: (src: string) => Promise<LoadedImage>;
+    /**
+     * CORS mode of the default loader. `anonymous` keeps the canvas readable, so it can
+     * be exported, and images from servers that do not allow it fail to load.
+     */
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    /** Called when an image is ready, so the caller can draw again. */
+    onLoad?: () => void;
+}
+/**
+ * Images for {@link drawPrimitives}, which draws synchronously. Asking for an image
+ * starts loading it, and gives `undefined` until it is ready. Failures are remembered as
+ * `null`, so a broken image is not requested on every frame.
+ */
+export declare class ImageCache {
+    private images;
+    private loading;
+    private load;
+    private onLoad?;
+    constructor(options?: ImageCacheOptions);
+    get(src: string): LoadedImage | null | undefined;
+    /** Settles once all these images are loaded or have failed. */
+    preload(sources: Iterable<string>): Promise<void>;
+    private start;
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './backend';
+export * from './draw';
+export * from './export';
+export * from './images';

package/dist/index.js

@@ -0,0 +1,122 @@
+import { a as ImageCache, i as toPNG, n as exportLayout, o as drawPrimitives, r as imageSources, t as drawExport } from "./export-D0aKjidm.js";
+// src/backend.ts
+/**
+* Shows a map in a `<canvas>`, for much larger maps than SVG can animate smoothly. Pass
+* it to `Markmap`: `new Markmap(new CanvasBackend(canvas))`. Size the canvas with CSS.
+*
+* Unlike SVG, a canvas has no accessibility tree and its text cannot be selected.
+*/
+var CanvasBackend = class {
+	element;
+	themeSelector;
+	ctx;
+	style;
+	primitives = [];
+	transform = {
+		k: 1,
+		x: 0,
+		y: 0
+	};
+	images = new ImageCache({ onLoad: () => this.schedule() });
+	env;
+	frame;
+	resizeObserver;
+	darkQuery;
+	constructor(canvas, { themeSelector } = {}) {
+		const ctx = canvas.getContext("2d");
+		if (!ctx) throw new Error("Canvas 2D is not available");
+		this.element = canvas;
+		this.themeSelector = themeSelector;
+		this.ctx = ctx;
+		const doc = canvas.ownerDocument;
+		this.style = doc.createElement("style");
+		const root = canvas.getRootNode();
+		(root.host ? root : doc.head).append(this.style);
+		const computed = doc.defaultView?.getComputedStyle(canvas);
+		this.env = {
+			tokens: (name) => computed?.getPropertyValue(`--${name}`),
+			image: (src) => this.images.get(src)
+		};
+		if (typeof ResizeObserver !== "undefined") {
+			this.resizeObserver = new ResizeObserver(() => this.paint());
+			this.resizeObserver.observe(canvas);
+		}
+		this.darkQuery = doc.defaultView?.matchMedia?.("(prefers-color-scheme: dark)");
+		this.darkQuery?.addEventListener("change", this.schedule);
+	}
+	draw(primitives) {
+		this.primitives = primitives;
+		this.schedule();
+	}
+	setTransform(transform) {
+		this.transform = transform;
+		this.schedule();
+	}
+	setCSS(css) {
+		this.style.textContent = css;
+		this.schedule();
+	}
+	schedule = () => {
+		if (this.frame != null) return;
+		const view = this.element.ownerDocument.defaultView;
+		this.frame = view?.requestAnimationFrame(() => {
+			this.frame = void 0;
+			this.paint();
+		});
+	};
+	/** Draw now. Changes are otherwise drawn on the next animation frame, at most once. */
+	paint() {
+		const { ctx, element } = this;
+		const ratio = this.fitToElement();
+		if (!ratio) return;
+		ctx.setTransform(1, 0, 0, 1, 0, 0);
+		ctx.clearRect(0, 0, element.width, element.height);
+		const { k, x, y } = this.transform;
+		ctx.setTransform(k * ratio, 0, 0, k * ratio, x * ratio, y * ratio);
+		drawPrimitives(ctx, this.primitives, {
+			...this.env,
+			view: {
+				rect: {
+					x: -x / k,
+					y: -y / k,
+					width: element.width / ratio / k,
+					height: element.height / ratio / k
+				},
+				scale: k
+			}
+		});
+	}
+	/**
+	* Match the bitmap to the element's size and the screen's pixel density. Returns the
+	* device pixel ratio, or 0 when the element has no size.
+	*/
+	fitToElement() {
+		const { element } = this;
+		const { width, height } = element.getBoundingClientRect();
+		if (!width || !height) return 0;
+		const ratio = element.ownerDocument.defaultView?.devicePixelRatio || 1;
+		const bitmapWidth = Math.round(width * ratio);
+		const bitmapHeight = Math.round(height * ratio);
+		if (element.width !== bitmapWidth || element.height !== bitmapHeight) {
+			element.width = bitmapWidth;
+			element.height = bitmapHeight;
+			const after = element.getBoundingClientRect();
+			if (after.width !== width || after.height !== height) {
+				element.style.width = `${width}px`;
+				element.style.height = `${height}px`;
+			}
+		}
+		return ratio;
+	}
+	destroy() {
+		const view = this.element.ownerDocument.defaultView;
+		if (this.frame != null) view?.cancelAnimationFrame(this.frame);
+		this.frame = void 0;
+		this.resizeObserver?.disconnect();
+		this.darkQuery?.removeEventListener("change", this.schedule);
+		this.style.remove();
+		this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+		this.ctx.clearRect(0, 0, this.element.width, this.element.height);
+	}
+};
+export { CanvasBackend, ImageCache, drawExport, drawPrimitives, exportLayout, imageSources, toPNG };

package/dist/node.d.ts

@@ -0,0 +1,45 @@
+import type { MarkmapNode, Measurer } from '@markmap/core';
+import { type RenderOptions, type RenderResult } from '@markmap/render';
+import { type ImageExportOptions } from './export';
+import { type LoadedImage } from './images';
+export interface NodeImageOptions {
+    /**
+     * Folder that images with relative paths are read from, usually the Markdown file's.
+     * Nothing outside it can be read. Without it, no local files are read: Markdown from
+     * someone else must not be able to pull files off this machine into an image.
+     */
+    baseDir?: string;
+    /** Return `true` to fetch a remote image. Without it, none are: they show their alt text. */
+    allow?: (url: string) => boolean;
+    /** Longest wait for a remote image, in ms. */
+    timeout?: number;
+}
+export interface NodeFont {
+    /** Path to a font file. */
+    path: string;
+    /** Family name to use it under. Defaults to the name in the file. */
+    family?: string;
+}
+export interface RenderPNGOptions extends Omit<RenderOptions, 'measurer' | 'folded'>, ImageExportOptions, NodeImageOptions {
+    /** Fonts to load before measuring. System fonts are available without this. */
+    fonts?: readonly NodeFont[];
+    /** Ids of folded nodes. */
+    folded?: ReadonlySet<string>;
+}
+/** The families in `wanted` that are installed, as a CSS list. */
+export declare function fontFallback(available?: Iterable<string>, wanted?: readonly string[]): string;
+/** Load an image the way {@link NodeImageOptions} permits. Rejects if it may not. */
+export declare function loadNodeImage(src: string, options?: NodeImageOptions): Promise<LoadedImage>;
+/**
+ * Export a finished result as a PNG, in Node. Measure with {@link createNodeMeasurer} so
+ * the text fits what was laid out. Most callers want {@link renderPNG} instead.
+ */
+export declare function toPNG(result: RenderResult, options?: ImageExportOptions & NodeImageOptions): Promise<Buffer>;
+/** Measures with the same text engine and fonts that draw the PNG. */
+export declare function createNodeMeasurer(): Measurer;
+/**
+ * Measure, lay out and export a tree as a PNG. Images load through the same rules for
+ * sizing and drawing, and each loads once. `plugins` works as for rendering; its image
+ * plugin, if any, is replaced by one that can load images here.
+ */
+export declare function renderPNG(root: MarkmapNode, options?: RenderPNGOptions): Promise<Buffer>;

package/dist/node.js

@@ -0,0 +1,119 @@
+import { a as ImageCache, n as exportLayout, r as imageSources, t as drawExport } from "./export-D0aKjidm.js";
+import { createCanvasMeasurer, createImageContent, defaultContentPlugins, renderTreeAsync } from "@markmap/render";
+import { readFile, realpath } from "node:fs/promises";
+import { isAbsolute, relative, resolve, sep } from "node:path";
+import { GlobalFonts, Path2D, createCanvas, loadImage } from "@napi-rs/canvas";
+// src/node.ts
+/**
+* Families with wide coverage on common systems, most useful first. Node's canvas does
+* not fall back to system fonts by itself, so characters these do not reach need `fonts`.
+*/
+var FALLBACK_FAMILIES = [
+	"PingFang SC",
+	"Hiragino Sans GB",
+	"Heiti SC",
+	"Hiragino Sans",
+	"Apple SD Gothic Neo",
+	"Apple Color Emoji",
+	"Microsoft YaHei",
+	"Yu Gothic",
+	"Malgun Gothic",
+	"Segoe UI Emoji",
+	"Noto Sans CJK SC",
+	"Noto Sans CJK JP",
+	"Noto Sans CJK KR",
+	"Source Han Sans SC",
+	"WenQuanYi Micro Hei",
+	"Noto Color Emoji"
+];
+/** The families in `wanted` that are installed, as a CSS list. */
+function fontFallback(available = GlobalFonts.families.map(({ family }) => family), wanted = FALLBACK_FAMILIES) {
+	const installed = new Set(available);
+	return wanted.filter((family) => installed.has(family)).map((family) => `"${family}"`).join(", ");
+}
+var DATA_URL = /^data:[^,]*;base64,/i;
+var REMOTE_URL = /^https?:/i;
+async function readLocal(src, baseDir) {
+	if (baseDir == null) throw new Error(`Not reading ${src}: no baseDir`);
+	const base = await realpath(baseDir);
+	const file = await realpath(resolve(base, decodeURI(src)));
+	const path = relative(base, file);
+	if (path === ".." || path.startsWith(`..${sep}`) || isAbsolute(path)) throw new Error(`Not reading ${src}: outside baseDir`);
+	return readFile(file);
+}
+async function fetchRemote(url, options) {
+	if (!options.allow?.(url)) throw new Error(`Not fetching ${url}`);
+	const response = await fetch(url, {
+		redirect: "error",
+		signal: AbortSignal.timeout(options.timeout ?? 1e4)
+	});
+	if (!response.ok) throw new Error(`Could not fetch ${url}: ${response.status}`);
+	return Buffer.from(await response.arrayBuffer());
+}
+/** Load an image the way {@link NodeImageOptions} permits. Rejects if it may not. */
+async function loadNodeImage(src, options = {}) {
+	let data;
+	if (DATA_URL.test(src)) data = Buffer.from(src.slice(src.indexOf(",") + 1), "base64");
+	else if (REMOTE_URL.test(src)) data = await fetchRemote(src, options);
+	else data = await readLocal(src, options.baseDir);
+	const image = await loadImage(data);
+	return {
+		source: image,
+		width: image.naturalWidth,
+		height: image.naturalHeight
+	};
+}
+/** Draw a finished result on a Node canvas. */
+async function encode(result, options, images) {
+	const { width, height } = exportLayout(result, options);
+	const canvas = createCanvas(width, height);
+	await images.preload(imageSources(result.primitives));
+	drawExport(canvas.getContext("2d"), result, options, {
+		image: (src) => images.get(src),
+		createPath: (d) => new Path2D(d),
+		fontFallback: fontFallback()
+	});
+	return canvas.encode("png");
+}
+/**
+* Export a finished result as a PNG, in Node. Measure with {@link createNodeMeasurer} so
+* the text fits what was laid out. Most callers want {@link renderPNG} instead.
+*/
+function toPNG(result, options = {}) {
+	return encode(result, options, new ImageCache({ load: (src) => loadNodeImage(src, options) }));
+}
+/** Measures with the same text engine and fonts that draw the PNG. */
+function createNodeMeasurer() {
+	const measurer = createCanvasMeasurer(createCanvas(1, 1).getContext("2d"));
+	const fallback = fontFallback();
+	return { measure(text, font) {
+		const family = fallback ? `${font.family}, ${fallback}` : font.family;
+		return measurer.measure(text, {
+			...font,
+			family
+		});
+	} };
+}
+/**
+* Measure, lay out and export a tree as a PNG. Images load through the same rules for
+* sizing and drawing, and each loads once. `plugins` works as for rendering; its image
+* plugin, if any, is replaced by one that can load images here.
+*/
+async function renderPNG(root, options = {}) {
+	for (const { path, family } of options.fonts ?? []) if (!GlobalFonts.registerFromPath(path, family)) throw new Error(`Could not load font ${path}`);
+	const images = new ImageCache({ load: (src) => loadNodeImage(src, options) });
+	const nodeImages = createImageContent({ async loadSize(src) {
+		await images.preload([src]);
+		const image = images.get(src);
+		if (!image) throw new Error(`Could not load ${src}`);
+		return image;
+	} });
+	const plugins = (options.plugins ?? defaultContentPlugins).map((plugin) => plugin.name === nodeImages.name ? nodeImages : plugin);
+	return encode(await renderTreeAsync(root, {
+		...options,
+		plugins,
+		measurer: createNodeMeasurer(),
+		folded: options.folded ?? /* @__PURE__ */ new Set()
+	}), options, images);
+}
+export { createNodeMeasurer, fontFallback, loadNodeImage, renderPNG, toPNG };

package/package.json

@@ -1,6 +1,58 @@
 {
   "name": "@markmap/canvas",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0-next.0",
+  "description": "Canvas backend for Markmap",
+  "homepage": "https://github.com/markmap/markmap#readme",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/markmap/markmap.git",
+    "directory": "packages/canvas"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./node": {
+      "types": "./dist/node.d.ts",
+      "import": "./dist/node.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@markmap/core": "1.0.0-next.0",
+    "@markmap/render": "1.0.0-next.0"
+  },
+  "devDependencies": {
+    "@markmap/parse": "1.0.0-next.0",
+    "@markmap/plugin-math": "1.0.0-next.0",
+    "@markmap/view": "1.0.0-next.0",
+    "@napi-rs/canvas": "^1.1.0",
+    "happy-dom": "^21.0.4"
+  },
+  "peerDependencies": {
+    "@markmap/view": "^1.0.0-next.0",
+    "@napi-rs/canvas": "^1.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@markmap/view": {
+      "optional": true
+    },
+    "@napi-rs/canvas": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "clean": "rm -rf dist tsconfig.tsbuildinfo",
+    "build:types": "tsc -b",
+    "build:js": "vite build"
+  }
 }