@simple-mark/canvas 0.3.3 → 0.3.5

package/index.d.ts

@@ -46,23 +46,40 @@ interface TextRun {
   lineFont: string;
   fontSize: number;
   color: string;
-  /** Behind this text only (inline code). */
+  /** Behind this text only (inline code); neighbouring runs with the same one share a box. */
   background?: string;
+  /** Corner radius of that box. */
+  radius?: number;
   strike?: boolean;
   underline?: boolean;
   /** Draw character by character on a grid of this column width (tables), wide ones in two columns. */
   column?: number;
 }
-/** A line's full-width background or bar (code blocks, table rows, quotes). */
+/** A line's full-width background, bar or lines (code blocks, table rows, quotes, headings, rules). */
 interface LineDecoration {
   top: number;
   height: number;
   background?: string;
+  /** Corner radii of the background: top (first line of a code block) and bottom (last line). */
+  radius?: {
+    top: number;
+    bottom: number;
+  };
   /** A bar along the left edge: its color and width. */
   bar?: {
     color: string;
     width: number;
   };
+  /** A line along the bottom edge (under h1, h2). */
+  border?: {
+    color: string;
+    width: number;
+  };
+  /** A line across the middle (horizontal rules). */
+  rule?: {
+    color: string;
+    width: number;
+  };
 }
 interface ImageBox {
   kind: 'image';

package/index.js

@@ -1,13 +1,11 @@
-import { charWidth, defaultTheme, markdownParser, markdownStyles, previewBlocks, resolveLineLook, resolveLook } from "@simple-mark/model";
+import { STROKES, charWidth, defaultTheme, markdownParser, markdownStyles, previewBlocks, resolveLineLook, resolveLook } from "@simple-mark/model";
 //#region packages/canvas/src/layout.ts
 /** Editor sizes in em, so a canvas text at any font size looks like the editor at 15px. */
 const EM = {
 	previewTop: 4 / 15,
 	previewBottom: 8 / 15,
 	imageMaxHeight: 320 / 15,
-	imageGap: 8 / 15,
-	quoteBar: 3 / 15,
-	quoteIndent: 12 / 15
+	imageGap: 8 / 15
 };
 const ERROR_COLOR = "#cf222e";
 /** Characters a line may break between, like CJK in the browser (no spaces needed). */
@@ -54,11 +52,19 @@ function layoutMarkdown(source, options) {
 		}
 		return lo;
 	};
-	const lineBlocks = lineStarts.map(() => /* @__PURE__ */ new Set());
+	const lineBlocks = lineStarts.map(() => ({
+		styles: /* @__PURE__ */ new Set(),
+		first: /* @__PURE__ */ new Set(),
+		last: /* @__PURE__ */ new Set()
+	}));
 	for (const block of blocks) {
 		let end = block.to;
 		if (end > block.from && isLineStart.has(end)) end--;
-		for (let n = lineOf(block.from); n <= lineOf(end); n++) lineBlocks[n].add(block.style);
+		const first = lineOf(block.from);
+		const last = lineOf(end);
+		for (let n = first; n <= last; n++) lineBlocks[n].styles.add(block.style);
+		lineBlocks[first].first.add(block.style);
+		lineBlocks[last].last.add(block.style);
 	}
 	const previews = /* @__PURE__ */ new Map();
 	for (const preview of previewBlocks(tree, text)) {
@@ -79,12 +85,12 @@ function layoutMarkdown(source, options) {
 	for (let n = 0; n < lineStarts.length; n++) {
 		const from = lineStarts[n];
 		const to = lineEndOf(n);
-		const styles = [...lineBlocks[n]];
-		const lineLook = resolveLineLook(styles, theme);
+		const styles = [...lineBlocks[n].styles];
+		const lineLook = resolveLineLook(styles, theme, lineBlocks[n]);
 		const scale = lineLook.fontScale ?? 1;
 		const lineHeight = style.lineHeight * style.fontSize * scale;
 		const textTop = (lineHeight - style.fontSize * scale) / 2;
-		const indent = lineLook.borderLeft ? EM.quoteIndent * style.fontSize : 0;
+		const indent = (lineLook.indent ?? 0) * style.fontSize;
 		const lineFont = fontOf(resolveLook(styles, [], theme), style, theme, scale);
 		const table = styles.includes("table");
 		const available = wrapWidth - indent;
@@ -158,7 +164,7 @@ function layoutMarkdown(source, options) {
 			visual.at(-1).push(piece);
 			x += piece.width;
 		}
-		for (const row of visual) {
+		for (const [r, row] of visual.entries()) {
 			const first = runs.length;
 			let rx = indent;
 			for (const piece of row) {
@@ -181,6 +187,7 @@ function layoutMarkdown(source, options) {
 						fontSize: style.fontSize * scale,
 						color: look.color ?? style.color,
 						...look.background ? { background: look.background } : {},
+						...look.background && look.radius ? { radius: look.radius * style.fontSize * scale } : {},
 						...look.strike ? { strike: true } : {},
 						...look.underline ? { underline: true } : {},
 						...table ? { column: measure("0", font) } : {}
@@ -195,13 +202,28 @@ function layoutMarkdown(source, options) {
 				rx
 			]);
 			maxWidth = Math.max(maxWidth, rx);
-			if (lineLook.lineBackground || lineLook.borderLeft) lines.push({
+			const radiusTop = r === 0 ? (lineLook.radiusTop ?? 0) * style.fontSize : 0;
+			const radiusBottom = r === visual.length - 1 ? (lineLook.radiusBottom ?? 0) * style.fontSize : 0;
+			const border = r === visual.length - 1 ? lineLook.borderBottom : void 0;
+			if (lineLook.lineBackground || lineLook.borderLeft || border || lineLook.rule) lines.push({
 				top: y,
 				height: lineHeight,
 				...lineLook.lineBackground ? { background: lineLook.lineBackground } : {},
+				...lineLook.lineBackground && (radiusTop || radiusBottom) ? { radius: {
+					top: radiusTop,
+					bottom: radiusBottom
+				} } : {},
 				...lineLook.borderLeft ? { bar: {
 					color: lineLook.borderLeft,
-					width: EM.quoteBar * style.fontSize
+					width: STROKES.bar * style.fontSize
+				} } : {},
+				...border ? { border: {
+					color: border,
+					width: STROKES.border * style.fontSize
+				} } : {},
+				...lineLook.rule ? { rule: {
+					color: lineLook.rule,
+					width: STROKES.rule * style.fontSize
 				} } : {}
 			});
 			y += lineHeight;
@@ -381,27 +403,67 @@ function baseline(ctx, run) {
 		alphabetic: true
 	};
 }
+/** A filled rectangle with rounded corners (top-left, top-right, bottom-right, bottom-left). */
+function fillBox(ctx, x, y, width, height, radius) {
+	const radii = typeof radius === "number" ? [
+		radius,
+		radius,
+		radius,
+		radius
+	] : radius;
+	if (!radii.some((r) => r > 0) || !ctx.roundRect) {
+		ctx.fillRect(x, y, width, height);
+		return;
+	}
+	ctx.beginPath();
+	ctx.roundRect(x, y, width, height, radii.map((r) => Math.min(r, width / 2, height / 2)));
+	ctx.fill();
+}
 function paintMarkdown(ctx, layout, sources = {}, color = "#1f2328") {
 	ctx.save();
 	ctx.textAlign = "left";
 	for (const line of layout.lines) {
 		if (line.background) {
 			ctx.fillStyle = line.background;
-			ctx.fillRect(0, line.top, layout.width, line.height);
+			fillBox(ctx, 0, line.top, layout.width, line.height, line.radius ? [
+				line.radius.top,
+				line.radius.top,
+				line.radius.bottom,
+				line.radius.bottom
+			] : 0);
+		}
+		if (line.rule) {
+			ctx.fillStyle = line.rule.color;
+			ctx.fillRect(0, line.top + (line.height - line.rule.width) / 2, layout.width, line.rule.width);
 		}
 		if (line.bar) {
 			ctx.fillStyle = line.bar.color;
 			ctx.fillRect(0, line.top, line.bar.width, line.height);
 		}
+		if (line.border) {
+			ctx.fillStyle = line.border.color;
+			ctx.fillRect(0, line.top + line.height - line.border.width, layout.width, line.border.width);
+		}
+	}
+	for (let i = 0; i < layout.runs.length;) {
+		const run = layout.runs[i];
+		let end = run.x + run.width;
+		let j = i + 1;
+		if (run.background) {
+			for (; j < layout.runs.length; j++) {
+				const next = layout.runs[j];
+				if (next.background !== run.background || next.top !== run.top || Math.abs(next.x - end) > .5) break;
+				end = next.x + next.width;
+			}
+			ctx.fillStyle = run.background;
+			fillBox(ctx, run.x, run.textTop - run.fontSize * .1, end - run.x, run.fontSize * 1.2, run.radius ?? 0);
+		}
+		i = j;
 	}
 	for (const run of layout.runs) {
 		const { y, alphabetic } = baseline(ctx, run);
 		ctx.font = run.font;
 		ctx.textBaseline = alphabetic ? "alphabetic" : "top";
-		if (run.background) {
-			ctx.fillStyle = run.background;
-			ctx.fillRect(run.x, run.textTop - run.fontSize * .1, run.width, run.fontSize * 1.2);
-		}
 		ctx.fillStyle = run.color;
 		if (run.column) {
 			let x = run.x;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-mark/canvas",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "Draws Markdown on a <canvas> without hiding its syntax: layout (no DOM) and Canvas 2D painting.",
   "license": "MIT",
   "type": "module",
@@ -23,7 +23,7 @@
     }
   },
   "dependencies": {
-    "@simple-mark/math": "^0.3.3",
-    "@simple-mark/model": "^0.3.3"
+    "@simple-mark/math": "^0.3.5",
+    "@simple-mark/model": "^0.3.5"
   }
 }