diff options
Diffstat (limited to 'public/bluebey-studio/src/caption.js')
| -rw-r--r-- | public/bluebey-studio/src/caption.js | 1321 |
1 files changed, 0 insertions, 1321 deletions
diff --git a/public/bluebey-studio/src/caption.js b/public/bluebey-studio/src/caption.js deleted file mode 100644 index 71759ea..0000000 --- a/public/bluebey-studio/src/caption.js +++ /dev/null @@ -1,1321 +0,0 @@ -import { - captionFontStack, - hasGlyphs, - layoutText, - textToPathData, -} from './textOutlines.js'; - -/** - * The speech bubble that sits next to the character. - * - * The same caption is drawn three times: into the 2D canvas that is overlaid on - * the 3D view, into the canvas that gets composited into an exported PNG, and - * into the vector SVG export. Drawing a shape three times by hand is how a - * preview starts to disagree with the file it produced, so the outline is built - * exactly once, here, as a short list of path commands. `drawCaption` replays - * that list through a 2D context and `captionToSvg` prints the same list as SVG - * path data, which is what keeps the two renderers together. - * - * The module never measures or wraps text itself: `textOutlines.js` owns line - * breaking and glyph outlines. This file only decides how large the bubble has - * to be for the block it is handed, padding included, and guarantees that block - * fits inside. - * - * It is pure in the same sense as `trace.js`: no DOM, no globals and no - * asynchronous work, so the tests can drive it in Node with a stub context. - */ - -/** Defaults mirroring the `caption` slice of `presets.js`. */ -const DEFAULT_FONT_SIZE = 34; -const DEFAULT_LINE_HEIGHT = 1.42; -const DEFAULT_PADDING = 18; -const DEFAULT_RADIUS = 24; -const DEFAULT_BORDER_WIDTH = 4; -const DEFAULT_MAX_WIDTH = 0.36; -const DEFAULT_TEXT_COLOR = '#3f2b52'; -const DEFAULT_BUBBLE_COLOR = '#ffffff'; -const DEFAULT_BORDER_COLOR = '#55386e'; - -/** Advance widths used before the vendored font has loaded, as a fraction of em. */ -const FALLBACK_WIDE_EM = 1; -const FALLBACK_NARROW_EM = 0.55; - -/** - * Vertical metrics of the fallback stack, as a fraction of the font size. - * - * A typical Japanese family sits close to these numbers, so the baseline of the - * pre-load preview barely moves when the real font arrives. - */ -const FALLBACK_ASCENT = 0.88; -const FALLBACK_DESCENT = 0.12; - -/** Control-point distance that turns a corner into a quarter circle. */ -const KAPPA = 0.5522847498307936; - -/** Code-point ranges that deserve a full em in the fallback measurement. */ -const WIDE_RANGES = [ - [0x1100, 0x11ff], [0x2e80, 0x30ff], [0x3130, 0x318f], [0x3400, 0x4dbf], - [0x4e00, 0x9fff], [0xac00, 0xd7ff], [0xf900, 0xfaff], [0xff00, 0xffef], -]; - -/** - * Punctuation that may hang past the bottom of a vertical column. - * - * Japanese line breaking (禁則処理) forbids starting a line with a closing - * mark, so when one of these would land at the top of a new column it is kept - * on the previous column and drawn past that column's last cell instead. - */ -const HANGING_PUNCTUATION = new Set(['、', '。', ',', '.', '，', '．']); - -/** Small kana, which sit toward the upper-right of their cell when stacked. */ -const SMALL_KANA = 'ぁぃぅぇぉっゃゅょゎァィゥェォッャュョヮ'; - -/** - * Characters that may not open a column (行頭禁則). - * - * A closing mark such as `、` simply hangs off the previous column; `ー`, small - * kana and closing brackets are kept company by handing the preceding - * character over to the next column as well, so a column never starts with - * something that has nothing to attach to. - */ -const COLUMN_START_FORBIDDEN = new Set([ - '」', '』', '）', '〕', '】', '〉', '》', '”', '’', '・', 'ー', - ...SMALL_KANA, - ...HANGING_PUNCTUATION, -]); - -/** Characters that may not close a column (行末禁則). */ -const COLUMN_END_FORBIDDEN = new Set(['「', '『', '（', '〔', '【', '〈', '《', '“', '‘']); - -/** - * Per-character offset for vertical (縦書き) text, in em. - * - * A column draws one glyph per cell, so a few characters need a nudge to read - * the way a Japanese typesetter would place them: the prolonged sound mark - * becomes an upright tick, small kana tuck into the upper-right, and the - * brackets lean toward the ends of the span they enclose. Everything else - * stays dead-centre. Sharing this table is what keeps the canvas and the SVG - * export in step. - */ -const VERTICAL_OFFSETS = new Map(); -for (const ch of SMALL_KANA) VERTICAL_OFFSETS.set(ch, { dx: 0.12, dy: -0.12 }); -// 縦書きの句読点は、横書きの左下ではなく、字枠の右上に置く。 -for (const ch of HANGING_PUNCTUATION) VERTICAL_OFFSETS.set(ch, { dx: 0.68, dy: -0.55 }); - -/** - * Characters drawn turned a quarter turn when stacked, so they read the way - * 縦書き sets them: the prolonged sound mark `ー` becomes an upright bar, and the - * brackets `「」『』［］（）` turn so they open down the column. - */ -const VERTICAL_ROTATED = new Set(['ー', '～', '〜', '―']); -const VERTICAL_BRACKETS = new Set([ - '「', '」', '『', '』', '（', '）', '［', '］', '【', '】', '〔', '〕', '〈', '〉', '《', '》', -]); - -/** - * How far a rotated glyph is nudged down inside its cell, in em. The rotated `ー` - * is centred otherwise, which leaves it hugging the character above it; the - * brackets stay centred. - */ -const VERTICAL_ROTATED_DROP = 0.14; - -/** - * The downward nudge (em) for a glyph that is turned a quarter turn in 縦書き, or - * `null` when the glyph is drawn the ordinary way. - */ -function verticalRotation(ch) { - if (VERTICAL_ROTATED.has(ch)) return VERTICAL_ROTATED_DROP; - if (VERTICAL_BRACKETS.has(ch)) return 0; - return null; -} - -/** Offset used for the characters that need no special placement. */ -const NO_OFFSET = Object.freeze({ dx: 0, dy: 0 }); - -/** - * The `ctx.font` string for a caption. - * - * Canvas wants size, weight and family in one string, and the size has to carry - * the export scale because the same caption is drawn at 1x for the preview and - * at 2x or more into a PNG. `loaded` is the app's answer to "is the vendored - * subset ready?": until it is, the vendored family is dropped from the stack so - * the preview does not ask for a font that is still downloading. - * - * @param {object} caption the `caption` slice of the state - * @param {number} [scale=1] - * @param {boolean} [loaded=false] - * @returns {string} - */ -export function fontSpec(caption, scale = 1, loaded = false) { - const state = caption ?? {}; - const size = resolveFontSize(state, positiveScale(scale)); - const weight = state.bold ? 'bold ' : ''; - return `${weight}${formatNumber(size, 3)}px ${fontFamilyStack(state, loaded)}`; -} - -/** - * Resolve a caption to pixel geometry at the output size. - * - * `x`/`y` are fractions of the image and land on the bubble's top-left corner; - * `maxWidth` is a fraction of the image width and caps the text column. The box - * is always the bubble itself, padding included and the tail excluded, and it - * always fits inside the image: padding gives way first, then the position is - * clamped (leaving room for the tail), and only a block larger than the image - * is clipped. Every returned number is finite, even for an empty caption or a - * zero-sized image. - * - * `font` is an opentype font from `textOutlines.js`. Without it the text is - * wrapped by a rough character count, so the preview still shows a bubble while - * the font is loading. - * - * @param {object} caption - * @param {object} [options] - * @param {number} [options.width=0] - * @param {number} [options.height=0] - * @param {number} [options.scale=1] - * @param {import('opentype.js').Font|null} [options.font=null] - * @returns {{ - * box: {x: number, y: number, w: number, h: number}, - * lines: Array<{text: string, width: number}>, - * fontSize: number, lineHeight: number, padding: number, scale: number, - * usedOutlines: boolean, - * }} - */ -export function layoutCaption(caption, { width, height, scale = 1, font = null } = {}) { - const state = caption ?? {}; - const resolvedScale = positiveScale(scale); - const outWidth = toNonNegative(width, 0); - const outHeight = toNonNegative(height, 0); - - const fontSize = resolveFontSize(state, resolvedScale); - const lineHeight = toPositive(state.lineHeight, DEFAULT_LINE_HEIGHT); - const requested = toNonNegative(state.padding, DEFAULT_PADDING) * resolvedScale; - const text = typeof state.text === 'string' ? state.text : ''; - - const vertical = state.vertical === true; - const block = vertical - ? layoutVertical(text, { - fontSize, - lineHeight, - maxHeight: resolveColumn(state, outHeight, requested), - }) - : layoutBlock(font, text, { - fontSize, - maxWidth: resolveColumn(state, outWidth, requested), - lineHeight, - align: alignOf(state), - }); - - // Padding gives way before the bubble does, so a caption that cannot fit with - // its usual breathing room still fits inside the image. - const padding = Math.max( - 0, - Math.min(requested, (outWidth - block.width) / 2, (outHeight - block.height) / 2), - ); - const w = Math.min(block.width + 2 * padding, outWidth); - const h = Math.min(block.height + 2 * padding, outHeight); - - // The tail sticks out of the box, so the box has to keep that much clear of - // the edge it points at. - const tail = tailOf(state); - const tailLength = tail === 'none' ? 0 : Math.max(0, Math.min(fontSize * 0.9, h * 0.5)); - const roomX = Math.max(0, outWidth - w); - const roomY = Math.max(0, outHeight - h); - - // Which way the tail leaves the box, as a direction where each axis is -1, - // 0 or 1. A diagonal tail needs room on *both* axes, so the clearance is - // driven by the direction rather than by which name the tail has. - const dir = tailDirection(tail); - let lowX = 0; - let highX = roomX; - if (dir.x < 0) lowX = Math.min(tailLength, roomX); - else if (dir.x > 0) highX = Math.max(0, roomX - tailLength); - - let lowY = 0; - let highY = roomY; - if (dir.y < 0) lowY = Math.min(tailLength, roomY); - else if (dir.y > 0) highY = Math.max(0, roomY - tailLength); - - const box = { - x: clamp(toFinite(state.x, 0) * outWidth, lowX, highX), - y: clamp(toFinite(state.y, 0) * outHeight, lowY, highY), - w, - h, - }; - - return { - box, - lines: block.lines, - fontSize, - lineHeight, - padding, - scale: resolvedScale, - vertical, - usedOutlines: Boolean(font), - }; -} - -/** - * Lay the bubble down in a 2D context, ready to be filled and stroked. - * - * The tail is part of the same path as the bubble, so the border runs along it - * and joins the outline cleanly instead of meeting it at a seam. The caller - * owns the colours; this only traces the shape. - * - * @param {CanvasRenderingContext2D} ctx - * @param {{x: number, y: number, w: number, h: number}} box bubble box, tail excluded - * @param {object} caption - * @param {number} [scale=1] - * @returns {boolean} `true` when there was a shape to trace - */ -export function bubblePath(ctx, box, caption, scale = 1) { - const commands = bubbleCommands(box, caption ?? {}, positiveScale(scale)); - applyCommands(ctx, commands); - return commands.length > 0; -} - -/** - * Draw a caption: bubble first, then the text line by line. - * - * The 2D canvas is overlaid exactly on the 3D view for the preview and is - * composited into the PNG on export, which is why the very same function runs - * in both places: what the user sees is what the file contains. - * - * The bubble box comes back even when the caption is switched off, so the app - * can show a placeholder and hit-test a drag without a second layout. - * - * @param {CanvasRenderingContext2D} ctx - * @param {object} caption - * @param {object} [options] - * @param {number} [options.width=0] - * @param {number} [options.height=0] - * @param {number} [options.scale=1] - * @param {import('opentype.js').Font|null} [options.font=null] - * @returns {{x: number, y: number, w: number, h: number}} - */ -export function drawCaption(ctx, caption, { width, height, scale = 1, font = null } = {}) { - const state = caption ?? {}; - const layout = layoutCaption(state, { width, height, scale, font }); - const { box } = layout; - if (!state.enabled || !ctx) return box; - - ctx.save(); - - const commands = bubbleCommands(box, state, layout.scale); - if (commands.length > 0) { - applyCommands(ctx, commands); - ctx.fillStyle = colorOf(state.bubbleColor, DEFAULT_BUBBLE_COLOR); - ctx.fill(); - - const borderWidth = toNonNegative(state.borderWidth, DEFAULT_BORDER_WIDTH) * layout.scale; - if (borderWidth > 0) { - ctx.strokeStyle = colorOf(state.borderColor, DEFAULT_BORDER_COLOR); - ctx.lineWidth = borderWidth; - ctx.lineJoin = 'round'; - ctx.lineCap = 'round'; - // A whisper is the rounded bubble with a broken outline. - if (bubbleOf(state) === 'whisper' && typeof ctx.setLineDash === 'function') { - ctx.setLineDash([borderWidth * 3, borderWidth * 2]); - } - ctx.stroke(); - } - } - - if (layout.lines.length > 0) drawText(ctx, layout, state, font); - - ctx.restore(); - return box; -} - -/** - * The caption as an SVG fragment, plus whether the text is outlined. - * - * Text becomes glyph outlines whenever the font covers it, because a `<text>` - * element is redrawn with whatever font the viewer happens to have and a - * caption that reflows is worse than one that cannot be selected. When a glyph - * is missing the whole caption falls back to `<text>` and `usedOutlines` is - * `false`, which is the caller's signal to warn that the file now depends on - * the viewer's fonts. - * - * The bubble and its tail are one `<path>`, traced from the same command list - * the canvas uses. `enabled` is not consulted: the export path only runs for an - * enabled caption, and drawing whatever is handed over keeps this usable for a - * thumbnail. - * - * @param {object} caption - * @param {object} [options] - * @param {number} [options.width=0] - * @param {number} [options.height=0] - * @param {number} [options.scale=1] - * @param {import('opentype.js').Font|null} [options.font=null] - * @param {number} [options.round=2] decimal places in the output - * @returns {{svg: string, usedOutlines: boolean}} - */ -export function captionToSvg(caption, { width, height, scale = 1, font = null, round = 2 } = {}) { - const state = caption ?? {}; - const places = Math.max(0, Math.min(8, Math.floor(Number.isFinite(round) ? round : 2))); - const layout = layoutCaption(state, { width, height, scale, font }); - const { box, lines, fontSize, lineHeight, padding } = layout; - const outWidth = toNonNegative(width, 0); - const outHeight = toNonNegative(height, 0); - const text = typeof state.text === 'string' ? state.text : ''; - - let usedOutlines = Boolean(font) && text.trim() !== '' && hasGlyphs(font, text); - // Vertical text falls back to `<text>`: the outline path lays glyphs out - // horizontally, and a column of glyphs reads fine as live text. - if (layout.vertical) usedOutlines = false; - - const parts = [ - '<svg xmlns="http://www.w3.org/2000/svg"' - + ` width="${formatNumber(outWidth, places)}"` - + ` height="${formatNumber(outHeight, places)}"` - + ` viewBox="0 0 ${formatNumber(outWidth, places)} ${formatNumber(outHeight, places)}">`, - ]; - - const bubble = commandsToPathData(bubbleCommands(box, state, layout.scale), places); - if (bubble) { - const fill = escapeAttribute(colorOf(state.bubbleColor, DEFAULT_BUBBLE_COLOR)); - const borderWidth = toNonNegative(state.borderWidth, DEFAULT_BORDER_WIDTH) * layout.scale; - const stroke = borderWidth > 0 - ? ` stroke="${escapeAttribute(colorOf(state.borderColor, DEFAULT_BORDER_COLOR))}"` - + ` stroke-width="${formatNumber(borderWidth, places)}" stroke-linejoin="round"` - + (bubbleOf(state) === 'whisper' - ? ` stroke-dasharray="${formatNumber(borderWidth * 3, places)} ${formatNumber(borderWidth * 2, places)}"` - : '') - : ''; - parts.push(`<path d="${bubble}" fill="${fill}"${stroke}/>`); - } - - if (lines.length > 0) { - const textColor = colorOf(state.textColor, DEFAULT_TEXT_COLOR); - let outlined = ''; - if (usedOutlines) { - // `textToPathData` re-applies the alignment against the widest line, so - // the block it needs is the one `layoutText` measured. - outlined = textToPathData(font, { - lines, - width: blockWidthOf(lines), - height: lines.length * fontSize * lineHeight, - lineHeight, - fontSize, - align: alignOf(state), - }, { x: box.x + padding, y: box.y + padding, round: places }); - usedOutlines = outlined !== ''; - } - if (usedOutlines) { - parts.push(`<path d="${outlined}" fill="${escapeAttribute(textColor)}"/>`); - } else { - parts.push(liveText(state, layout, font, textColor, places)); - } - } - - parts.push('</svg>'); - return { svg: parts.join('\n') + '\n', usedOutlines }; -} - -// --- text -------------------------------------------------------------------- - -/** Draw every line at its own baseline, shifted sideways by the alignment. */ -function drawText(ctx, layout, state, font) { - const { box, lines, fontSize, lineHeight, padding, scale } = layout; - const metrics = baselineMetrics(font, fontSize); - const step = fontSize * lineHeight; - const halfLeading = (step - (metrics.ascent + metrics.descent)) / 2; - const blockWidth = blockWidthOf(lines); - const left = box.x + padding; - const top = box.y + padding; - const align = alignOf(state); - - ctx.font = fontSpec(state, scale, Boolean(font)); - ctx.fillStyle = colorOf(state.textColor, DEFAULT_TEXT_COLOR); - ctx.textAlign = 'left'; - ctx.textBaseline = 'alphabetic'; - - if (layout.vertical) { - // Columns run right to left; each glyph sits in its own cell. `ー` and its - // like are turned a quarter turn so they read as vertical strokes. - for (let i = 0; i < lines.length; i++) { - const chars = [...lines[i].text]; - const x = left + (lines.length - 1 - i) * step; - for (let j = 0; j < chars.length; j++) { - const ch = chars[j]; - const drop = verticalRotation(ch); - if (drop !== null) { - ctx.save(); - ctx.translate(x + fontSize / 2, top + j * fontSize + fontSize / 2 + drop * fontSize); - ctx.rotate(Math.PI / 2); - ctx.textAlign = 'center'; - ctx.textBaseline = 'middle'; - ctx.fillText(ch, 0, 0); - ctx.restore(); - continue; - } - const offset = verticalOffsetOf(ch); - const y = top + j * fontSize + metrics.ascent + offset.dy * fontSize; - ctx.fillText(ch, x + offset.dx * fontSize, y); - } - } - return; - } - - for (let i = 0; i < lines.length; i++) { - const line = lines[i]; - const x = left + alignOffset(align, blockWidth, line.width); - const y = top + i * step + halfLeading + metrics.ascent; - ctx.fillText(line.text, x, y); - } -} - -/** - * The `<text>` fallback. - * - * The family comes from the font stack alone, not from `fontSpec`: size and - * weight have attributes of their own, and a `font-family` that carried them - * would be ignored by every viewer. - */ -function liveText(state, layout, font, fill, places) { - const { box, lines, fontSize, lineHeight, padding } = layout; - const blockWidth = blockWidthOf(lines); - const align = alignOf(state); - const left = box.x + padding; - const anchor = align === 'center' ? 'middle' : align === 'right' ? 'end' : 'start'; - const x = align === 'center' - ? left + blockWidth / 2 - : align === 'right' - ? left + blockWidth - : left; - - const metrics = baselineMetrics(font, fontSize); - const step = fontSize * lineHeight; - const halfLeading = (step - (metrics.ascent + metrics.descent)) / 2; - const top = box.y + padding; - - if (layout.vertical) { - // The stacked glyphs share one left-anchored <text>. The rotated ones (`ー`) - // get a <text> of their own, centred on the cell and turned a quarter turn. - const base = [ - `font-family="${escapeAttribute(fontFamilyStack(state, Boolean(font)))}"`, - `font-size="${formatNumber(fontSize, places)}"`, - state.bold ? 'font-weight="bold"' : '', - `fill="${escapeAttribute(fill)}"`, - ].filter(Boolean).join(' '); - const tspans = []; - const rotated = []; - for (let i = 0; i < lines.length; i++) { - const chars = [...lines[i].text]; - const x = left + (lines.length - 1 - i) * step; - for (let j = 0; j < chars.length; j++) { - const ch = chars[j]; - const drop = verticalRotation(ch); - if (drop !== null) { - const cx = x + fontSize / 2; - const cy = top + j * fontSize + fontSize / 2 + drop * fontSize; - rotated.push(`<text ${base} text-anchor="middle" dy="0.36em"` - + ` transform="rotate(90 ${formatNumber(cx, places)} ${formatNumber(cy, places)})"` - + ` x="${formatNumber(cx, places)}" y="${formatNumber(cy, places)}">${escapeText(ch)}</text>`); - continue; - } - const offset = verticalOffsetOf(ch); - const y = top + j * fontSize + metrics.ascent + offset.dy * fontSize; - tspans.push(`<tspan x="${formatNumber(x + offset.dx * fontSize, places)}" y="${formatNumber(y, places)}">${escapeText(ch)}</tspan>`); - } - } - const main = tspans.length ? `<text ${base} text-anchor="start">${tspans.join('')}</text>` : ''; - return `${main}${rotated.join('')}`; - } - - const attributes = [ - `font-family="${escapeAttribute(fontFamilyStack(state, Boolean(font)))}"`, - `font-size="${formatNumber(fontSize, places)}"`, - state.bold ? 'font-weight="bold"' : '', - `fill="${escapeAttribute(fill)}"`, - `text-anchor="${anchor}"`, - ].filter(Boolean).join(' '); - - const tspans = lines.map((line, i) => { - const y = top + i * step + halfLeading + metrics.ascent; - return `<tspan x="${formatNumber(x, places)}" y="${formatNumber(y, places)}">` - + `${escapeText(line.text)}</tspan>`; - }).join(''); - - return `<text ${attributes}>${tspans}</text>`; -} - -/** - * Wrap text without a font, from a character count. - * - * The preview has to show something while the vendored font downloads, and this - * is a deliberately crude stand-in: wide (CJK) characters count as one em and - * everything else as half an em. Once `layoutText` can run its metrics replace - * these numbers, so the rough version only ever decides a preview, never a file. - */ -function wrapByCount(text, { fontSize, maxWidth, lineHeight }) { - const limit = Number.isFinite(maxWidth) && maxWidth > 0 ? maxWidth : Infinity; - const lines = []; - - for (const paragraph of String(text).split(/\r\n|\r|\n/)) { - let current = ''; - for (const ch of paragraph) { - const candidate = current + ch; - if (current.trimEnd() !== '' && measureFallback(candidate, fontSize) > limit) { - lines.push(current.trimEnd()); - current = /\s/.test(ch) ? '' : ch; // the break swallows the space - } else { - current = candidate; - } - } - lines.push(current.trimEnd()); - } - - const measured = lines.map((line) => ({ text: line, width: measureFallback(line, fontSize) })); - let width = 0; - for (const line of measured) width = Math.max(width, line.width); - return { lines: measured, width, height: measured.length * fontSize * lineHeight }; -} - -/** Wrap with `layoutText`, or with the character count when there is no font. */ -function layoutBlock(font, text, options) { - if (text === '') return { lines: [], width: 0, height: 0 }; - if (font) { - const layout = layoutText(font, text, options); - return { lines: layout.lines, width: layout.width, height: layout.height }; - } - return wrapByCount(text, options); -} - -/** - * Offset of one character inside its vertical cell, in em. - * - * Shared by `drawText` and `liveText` so a glyph that needs a nudge lands in - * the same place on screen and in the export. - */ -function verticalOffsetOf(ch) { - return VERTICAL_OFFSETS.get(ch) ?? NO_OFFSET; -} - -/** - * Vertical (縦書き) layout: each paragraph becomes one column, characters stacked - * top to bottom, columns running right to left. A paragraph longer than the - * available height is split into more columns. - * - * Closing punctuation hangs: when `、` or `。` (or `,`/`.`) would fall at the top - * of a new column, it stays on the previous one and is drawn just below that - * column's last cell instead. Such a hanging character does not count toward - * the column's length, so it never makes the block a cell taller or adds a - * column of its own. `lines[i].hang` reports how many characters on that line - * are hanging. - * - * The other 禁則 cases are repaired too: ー, small kana and closing brackets are - * kept off the top of a column by handing the preceding character down with - * them (追い出し), and an opening bracket is never left at the bottom of one. - */ -function layoutVertical(text, { fontSize, lineHeight, maxHeight }) { - const limit = Number.isFinite(maxHeight) && maxHeight > 0 - ? Math.max(1, Math.floor(maxHeight / fontSize)) - : Infinity; - const columns = []; - for (const paragraph of String(text).split(/\r\n|\r|\n/)) { - const chars = [...paragraph]; - if (chars.length === 0) { - columns.push({ text: '', count: 0 }); - continue; - } - let i = 0; - while (i < chars.length) { - // Fill the column cell by cell, then repair its two ends for 禁則処理. - const cells = []; - const hanging = []; - while (i < chars.length && cells.length < limit) { - cells.push(chars[i]); - i += 1; - } - // 行末禁則: an opening bracket may not close a column, so hand it over to - // the next one (it will open that column instead). - while (cells.length > 1 && COLUMN_END_FORBIDDEN.has(cells[cells.length - 1])) { - cells.pop(); - i -= 1; - } - // 行頭禁則 (追い出し): ー, small kana and closing brackets may not open a - // column; move the preceding character down to keep them company. - if (i < chars.length && cells.length > 1 - && COLUMN_START_FORBIDDEN.has(chars[i]) && !HANGING_PUNCTUATION.has(chars[i])) { - cells.pop(); - i -= 1; - } - // 行頭禁則 (ぶら下げ): a closing mark that would open the next column - // stays on this one, drawn just below its last cell. - while (i < chars.length && HANGING_PUNCTUATION.has(chars[i])) { - hanging.push(chars[i]); - i += 1; - } - columns.push({ text: cells.join('') + hanging.join(''), count: cells.length }); - } - } - const longest = columns.reduce((max, column) => Math.max(max, column.count), 0); - return { - lines: columns.map((column) => ({ - text: column.text, - width: fontSize, - hang: [...column.text].length - column.count, - })), - // The block is exactly as wide as the columns that are drawn: `step` apart, - // each cell one em wide (not one whole `step`, which would leave a leading - // of dead space on the right and push the text off-centre). - width: columns.length === 0 - ? 0 - : (columns.length - 1) * fontSize * lineHeight + fontSize, - height: longest * fontSize, - vertical: true, - }; -} - -/** Text column in pixels: a fraction of the image, never wider than the image. */ -function resolveColumn(state, outWidth, padding) { - const fraction = toNonNegative(state.maxWidth, DEFAULT_MAX_WIDTH); - if (!(fraction > 0)) return 0; // 0 means "do not wrap", as in `layoutText` - return Math.min(fraction * outWidth, Math.max(0, outWidth - 2 * padding)); -} - -/** Ascent above and descent below the baseline, in pixels. */ -function baselineMetrics(font, fontSize) { - const unitsPerEm = font?.unitsPerEm; - if (Number.isFinite(font?.ascender) && Number.isFinite(font?.descender) && unitsPerEm > 0) { - return { - ascent: (font.ascender * fontSize) / unitsPerEm, - descent: (-font.descender * fontSize) / unitsPerEm, - }; - } - return { ascent: fontSize * FALLBACK_ASCENT, descent: fontSize * FALLBACK_DESCENT }; -} - -/** Widest line of the block, which is the width the alignment works against. */ -function blockWidthOf(lines) { - let width = 0; - for (const line of lines) width = Math.max(width, toFinite(line?.width, 0)); - return width; -} - -/** Sideways shift of one line inside the block. */ -function alignOffset(align, blockWidth, lineWidth) { - const slack = Math.max(0, blockWidth - lineWidth); - if (align === 'center') return slack / 2; - if (align === 'right') return slack; - return 0; -} - -/** Width of a string by character count, in pixels. */ -function measureFallback(text, fontSize) { - let width = 0; - for (const ch of String(text ?? '')) { - width += isWideChar(ch) ? fontSize * FALLBACK_WIDE_EM : fontSize * FALLBACK_NARROW_EM; - } - return width; -} - -/** Characters that usually take a full em in a Japanese font. */ -function isWideChar(ch) { - const code = ch.codePointAt(0); - for (const [start, end] of WIDE_RANGES) { - if (code >= start && code <= end) return true; - } - return false; -} - -// --- geometry ---------------------------------------------------------------- - -/** - * The bubble outline as path commands. - * - * Both renderers go through here, which is the point: the canvas preview, the - * PNG and the SVG are three views of one geometry rather than three - * implementations of it. - * - * @returns {Array<object>} empty when there is nothing to draw - */ -function bubbleCommands(box, state, scale) { - const shape = bubbleOf(state); - const rect = { - x: toFinite(box?.x, 0), - y: toFinite(box?.y, 0), - w: toNonNegative(box?.w, 0), - h: toNonNegative(box?.h, 0), - }; - if (shape === 'none' || !(rect.w > 0) || !(rect.h > 0)) return []; - - if (shape === 'think') return thinkCommands(rect, state, scale); - - const radius = toNonNegative(state.radius, DEFAULT_RADIUS) * scale; - const edges = shape === 'shout' - ? shoutEdges(rect, scale) - : shape === 'rect' - ? rectEdges(rect) - : roundEdges(rect, radius); - - return edgesToCommands(withTail(edges, rect, state, scale)); -} - -/** Clockwise rectangle, starting at the top-left corner. */ -function rectEdges(box) { - const { x, y, w, h } = box; - const tl = { x, y }; - const tr = { x: x + w, y }; - const br = { x: x + w, y: y + h }; - const bl = { x, y: y + h }; - return [ - lineEdge(tl, tr), - lineEdge(tr, br), - lineEdge(br, bl), - lineEdge(bl, tl), - ]; -} - -/** - * Rounded rectangle as straight sides plus quarter-circle corners. - * - * Keeping the sides straight (rather than approximating the whole outline with - * a polyline) is what lets the tail attach to a real straight edge; the radius - * is clamped so the corners can never cross each other. - */ -function roundEdges(box, radius) { - const { x, y, w, h } = box; - const r = clamp(radius, 0, Math.min(w, h) / 2); - if (!(r > 0.5)) return rectEdges(box); - - const k = r * KAPPA; - const p = (px, py) => ({ x: px, y: py }); - const corner = (from, c1, c2, to) => cubicEdge(p(...from), p(...c1), p(...c2), p(...to)); - return [ - lineEdge(p(x + r, y), p(x + w - r, y)), - corner([x + w - r, y], [x + w - r + k, y], [x + w, y + r - k], [x + w, y + r]), - lineEdge(p(x + w, y + r), p(x + w, y + h - r)), - corner([x + w, y + h - r], [x + w, y + h - r + k], [x + w - r + k, y + h], [x + w - r, y + h]), - lineEdge(p(x + w - r, y + h), p(x + r, y + h)), - corner([x + r, y + h], [x + r - k, y + h], [x, y + h - r + k], [x, y + h - r]), - lineEdge(p(x, y + h - r), p(x, y + r)), - corner([x, y + r], [x, y + r - k], [x + r - k, y], [x + r, y]), - ]; -} - -/** - * Star-burst: a rectangle whose four sides zig-zag outwards. - * - * The tooth depth and pitch are fractions of the bubble, so a big "shout" and a - * small one have the same number of spikes instead of the big one looking like - * a saw. - */ -function shoutEdges(box, scale) { - const { x, y, w, h } = box; - const amp = Math.min(w, h) * 0.07; - const pitch = Math.max(scale, Math.min(w, h) * 0.22); - const corners = [{ x, y }, { x: x + w, y }, { x: x + w, y: y + h }, { x, y: y + h }]; - const normals = [{ x: 0, y: -1 }, { x: 1, y: 0 }, { x: 0, y: 1 }, { x: -1, y: 0 }]; - - const points = []; - for (let side = 0; side < 4; side++) { - const a = corners[side]; - const b = corners[(side + 1) % 4]; - const normal = normals[side]; - const length = Math.hypot(b.x - a.x, b.y - a.y); - const teeth = Math.max(2, Math.round(length / pitch)); - points.push(a); - for (let i = 0; i < teeth; i++) { - if (i > 0) points.push(lerp(a, b, i / teeth)); - const out = lerp(a, b, (i + 0.5) / teeth); - points.push({ x: out.x + normal.x * amp, y: out.y + normal.y * amp }); - } - } - - return points.map((from, i) => lineEdge(from, points[(i + 1) % points.length])); -} - -/** - * Cloud outline for a thought bubble, plus how far its scallops bulge out. - * - * The four sides of the box are replaced by a ring of outward scallops: a - * rounded rectangle is sampled evenly by arc length and each pair of samples is - * joined by a half-ellipse bulging away from the centre. - */ -function thinkEdges(box, scale) { - const { x, y, w, h } = box; - const cx = x + w / 2; - const cy = y + h / 2; - const ring = roundedRectRing(box, Math.min(w, h) * 0.28); - const perimeter = ringLength(ring); - // Fluffier: more scallops, each bulging further, so it reads as a soft cloud. - const pitch = Math.max(scale * 6, Math.min(w, h) * 0.30); - const count = Math.max(6, Math.round(perimeter / pitch)); - const points = sampleRing(ring, count); - const amp = Math.min((perimeter / count) * 0.55, Math.min(w, h) * 0.26); - - const edges = []; - let outer = amp; - for (let i = 0; i < points.length; i++) { - const a = points[i]; - const b = points[(i + 1) % points.length]; - const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }; - // Bulge perpendicular to the edge, not away from the centre: on a wide box - // the centre direction points sideways along the top and bottom edges, which - // is what tilted those scallops. The sign is flipped so it always faces out, - // which makes every edge scallop the same way the left and right ones do. - const dx = b.x - a.x; - const dy = b.y - a.y; - const length = Math.hypot(dx, dy) || 1; - let nx = -dy / length; - let ny = dx / length; - if (nx * (mid.x - cx) + ny * (mid.y - cy) < 0) { - nx = -nx; - ny = -ny; - } - // A small, *deterministic* wobble so the scallops are not all identical - the - // even size read as too regular. Same index, same bubble, every render. - const scallopAmp = amp * (0.72 + 0.56 * scallopJitter(i)); - if (scallopAmp > outer) outer = scallopAmp; - edges.push(scallopEdge(a, b, { x: nx, y: ny }, scallopAmp)); - } - return { edges, amp: outer }; -} - -/** A closed cloud, followed by the tail: two or three shrinking puffs. */ -function thinkCommands(box, state, scale) { - const cloud = thinkEdges(box, scale); - const commands = edgesToCommands(cloud.edges); - for (const puff of thoughtTrail(box, state, scale, cloud.amp)) { - commands.push(...circleCommands(puff.x, puff.y, puff.r)); - } - return commands; -} - -/** - * The circles that trail away from a thought bubble instead of a pointed tail. - * - * They start just outside the cloud (`outer`) and shrink as they go, ending - * inside the room `layoutCaption` reserves for the tail. - */ -function thoughtTrail(box, state, scale, outer) { - const tail = tailOf(state); - if (tail === 'none') return []; - const dir = tailDirection(tail); - const diagonal = dir.x !== 0 && dir.y !== 0; - const nx = dir.x * (diagonal ? Math.SQRT1_2 : 1); - const ny = dir.y * (diagonal ? Math.SQRT1_2 : 1); - const anchor = { - x: dir.x < 0 ? box.x : dir.x > 0 ? box.x + box.w : box.x + box.w / 2, - y: dir.y < 0 ? box.y : dir.y > 0 ? box.y + box.h : box.y + box.h / 2, - }; - // Sized from the font, not the leftover room, so the puffs stay visible at any - // bubble size; they start just outside the cloud (`outer`) and shrink away. - const unit = resolveFontSize(state, scale); - // 80% of the first cut, which read a touch large. - const r1 = unit * 0.48; - const r2 = unit * 0.34; - const r3 = unit * 0.21; - const gap = unit * 0.5; - const d1 = outer + r1; - const d2 = d1 + r1 + gap; - const d3 = d2 + r2 + gap; - return [ - { x: anchor.x + nx * d1, y: anchor.y + ny * d1, r: r1 }, - { x: anchor.x + nx * d2, y: anchor.y + ny * d2, r: r2 }, - { x: anchor.x + nx * d3, y: anchor.y + ny * d3, r: r3 }, - ]; -} - -/** One outward scallop: a half-ellipse from `from` to `to` bulging along `normal`. */ -function scallopEdge(from, to, normal, amp) { - const k = (4 / 3) * amp; - return cubicEdge( - from, - { x: from.x + normal.x * k, y: from.y + normal.y * k }, - { x: to.x + normal.x * k, y: to.y + normal.y * k }, - to, - ); -} - -/** - * A small deterministic wobble in 0..1 for the i-th scallop of a cloud. - * - * It is derived from the index alone, so a bubble draws its scallops exactly - * the same in the live preview, a screenshot, and the SVG export. - */ -function scallopJitter(i) { - const x = Math.sin((i + 1) * 12.9898) * 43758.5453; - return x - Math.floor(x); -} - -/** A circle as `M`/`C`/`Z` commands, so it can join the bubble's one path. */ -function circleCommands(cx, cy, r) { - const k = r * KAPPA; - return [ - { type: 'M', x: cx + r, y: cy }, - { type: 'C', x1: cx + r, y1: cy + k, x2: cx + k, y2: cy + r, x: cx, y: cy + r }, - { type: 'C', x1: cx - k, y1: cy + r, x2: cx - r, y2: cy + k, x: cx - r, y: cy }, - { type: 'C', x1: cx - r, y1: cy - k, x2: cx - k, y2: cy - r, x: cx, y: cy - r }, - { type: 'C', x1: cx + k, y1: cy - r, x2: cx + r, y2: cy - k, x: cx + r, y: cy }, - { type: 'Z' }, - ]; -} - -/** Points around a rounded rectangle, clockwise from the top-left arc. */ -function roundedRectRing(box, radius) { - const { x, y, w, h } = box; - const r = clamp(radius, 0, Math.min(w, h) / 2); - const points = []; - const arc = (cx, cy, from, to) => { - const steps = 6; - for (let i = 1; i <= steps; i++) { - const t = from + (to - from) * (i / steps); - points.push({ x: cx + Math.cos(t) * r, y: cy + Math.sin(t) * r }); - } - }; - - points.push({ x: x + r, y }); - points.push({ x: x + w - r, y }); - arc(x + w - r, y + r, -Math.PI / 2, 0); - points.push({ x: x + w, y: y + h - r }); - arc(x + w - r, y + h - r, 0, Math.PI / 2); - points.push({ x: x + r, y: y + h }); - arc(x + r, y + h - r, Math.PI / 2, Math.PI); - points.push({ x, y: y + r }); - arc(x + r, y + r, Math.PI, Math.PI * 1.5); - return points; -} - -/** Total length of a closed polyline's perimeter. */ -function ringLength(points) { - let total = 0; - for (let i = 0; i < points.length; i++) { - total += distance(points[i], points[(i + 1) % points.length]); - } - return total; -} - -/** `count` points spaced evenly by arc length around a closed polyline. */ -function sampleRing(points, count) { - const n = points.length; - const total = ringLength(points); - if (!(total > 0) || !(count > 0)) return []; - const out = []; - let seg = 0; - let start = 0; - let length = n > 1 ? distance(points[0], points[1 % n]) : 0; - for (let i = 0; i < count; i++) { - const target = (total * i) / count; - while (seg < n - 1 && start + length < target) { - start += length; - seg += 1; - length = distance(points[seg], points[(seg + 1) % n]); - } - const t = length > 0 ? clamp((target - start) / length, 0, 1) : 0; - out.push(lerp(points[seg], points[(seg + 1) % n], t)); - } - return out; -} - -/** - * Replace part of the edge the tail points at with a spike. - * - * The spike is inserted *into* the outline, not appended to it: the two sides - * of the tail and the bubble become one continuous border. The straight edge - * nearest the tail's anchor is used, which for every shape except the shout is - * the obvious side and for the shout is the nearest zig-zag segment. - */ -function withTail(edges, box, state, scale) { - const tail = tailOf(state); - if (tail === 'none' || edges.length === 0) return edges; - - const tailLength = Math.min(resolveFontSize(state, scale) * 0.9, Math.min(box.w, box.h) * 0.5); - if (!(tailLength > 0)) return edges; - - const dir = tailDirection(tail); - // A diagonal tail leaves from a corner; an axis-aligned one leaves from the - // middle of the side it points at. - const anchor = { - x: dir.x < 0 ? box.x : dir.x > 0 ? box.x + box.w : box.x + box.w / 2, - y: dir.y < 0 ? box.y : dir.y > 0 ? box.y + box.h : box.y + box.h / 2, - }; - const diagonal = dir.x !== 0 && dir.y !== 0; - const normal = { - x: dir.x * (diagonal ? Math.SQRT1_2 : 1), - y: dir.y * (diagonal ? Math.SQRT1_2 : 1), - }; - - const index = nearestEdge(edges, anchor, box, tail); - if (index < 0) return edges; - - const edge = edges[index]; - const length = distance(edge.from, edge.to); - const base = Math.min(tailLength * 0.7, length * 0.45); - if (!(base > 0) || !(length > 0)) return edges; - - // The spike sits at the point of the edge nearest the anchor - the middle for - // a side, the corner for a diagonal - kept far enough in that both feet land - // on the edge itself. - const t = clamp(projectionT(edge, anchor), base / length, 1 - base / length); - const middle = lerp(edge.from, edge.to, t); - // A diagonal spike advances `tailLength` on *each* axis, so it reaches as far - // as a side tail does and reads as a proper corner. - const reach = tailLength * (diagonal ? Math.SQRT2 : 1); - const tip = { x: middle.x + normal.x * reach, y: middle.y + normal.y * reach }; - const leftFoot = lerp(edge.from, edge.to, t - base / length); - const rightFoot = lerp(edge.from, edge.to, t + base / length); - const replacement = [ - lineEdge(edge.from, leftFoot), - lineEdge(leftFoot, tip), - lineEdge(tip, rightFoot), - lineEdge(rightFoot, edge.to), - ]; - return edges.slice(0, index).concat(replacement, edges.slice(index + 1)); -} - -/** Index of the straight edge closest to the tail's anchor, or `-1`. */ -function nearestEdge(edges, anchor, box, tail) { - let best = -1; - let bestDistance = Infinity; - for (let i = 0; i < edges.length; i++) { - const edge = edges[i]; - if (edge.kind !== 'line') continue; - const middle = { x: (edge.from.x + edge.to.x) / 2, y: (edge.from.y + edge.to.y) / 2 }; - if (!onSide(middle, box, tail)) continue; - const d = distance(middle, anchor); - if (d < bestDistance) { - bestDistance = d; - best = i; - } - } - return best; -} - -/** Is `point` on the side of the box the tail points at? */ -function onSide(point, box, tail) { - const dir = tailDirection(tail); - const midX = box.x + box.w * 0.5; - const midY = box.y + box.h * 0.5; - if (dir.x < 0 && point.x > midX) return false; - if (dir.x > 0 && point.x < midX) return false; - if (dir.y < 0 && point.y > midY) return false; - if (dir.y > 0 && point.y < midY) return false; - return true; -} - -/** How far along `edge` (0..1) the point nearest `point` falls. */ -function projectionT(edge, point) { - const dx = edge.to.x - edge.from.x; - const dy = edge.to.y - edge.from.y; - const lengthSq = dx * dx + dy * dy; - if (!(lengthSq > 0)) return 0.5; - return ((point.x - edge.from.x) * dx + (point.y - edge.from.y) * dy) / lengthSq; -} - -/** One straight edge of a closed outline. */ -function lineEdge(from, to) { - return { kind: 'line', from, to }; -} - -/** One cubic edge of a closed outline. */ -function cubicEdge(from, c1, c2, to) { - return { kind: 'cubic', from, c1, c2, to }; -} - -/** Walk the edges into `M`/`L`/`C`/`Z` commands. */ -function edgesToCommands(edges) { - if (edges.length === 0) return []; - const commands = [{ type: 'M', x: edges[0].from.x, y: edges[0].from.y }]; - for (const edge of edges) { - if (edge.kind === 'line') { - commands.push({ type: 'L', x: edge.to.x, y: edge.to.y }); - } else { - commands.push({ - type: 'C', - x1: edge.c1.x, y1: edge.c1.y, - x2: edge.c2.x, y2: edge.c2.y, - x: edge.to.x, y: edge.to.y, - }); - } - } - commands.push({ type: 'Z' }); - return commands; -} - -/** Replay commands into a 2D context. */ -function applyCommands(ctx, commands) { - ctx.beginPath(); - for (const command of commands) { - if (command.type === 'M') ctx.moveTo(command.x, command.y); - else if (command.type === 'L') ctx.lineTo(command.x, command.y); - else if (command.type === 'C') { - ctx.bezierCurveTo(command.x1, command.y1, command.x2, command.y2, command.x, command.y); - } else if (command.type === 'Z') { - ctx.closePath(); - } - } -} - -/** Print commands as SVG path data. */ -function commandsToPathData(commands, places) { - const parts = []; - for (const command of commands) { - if (command.type === 'M') { - parts.push(`M${formatNumber(command.x, places)} ${formatNumber(command.y, places)}`); - } else if (command.type === 'L') { - parts.push(`L${formatNumber(command.x, places)} ${formatNumber(command.y, places)}`); - } else if (command.type === 'C') { - parts.push( - `C${formatNumber(command.x1, places)} ${formatNumber(command.y1, places)}` - + ` ${formatNumber(command.x2, places)} ${formatNumber(command.y2, places)}` - + ` ${formatNumber(command.x, places)} ${formatNumber(command.y, places)}`, - ); - } else if (command.type === 'Z') { - parts.push('Z'); - } - } - return parts.join(' '); -} - -// --- shared helpers ---------------------------------------------------------- - -/** The family list for a caption, or the system-only list before the font loads. */ -function fontFamilyStack(caption, loaded) { - const stack = captionFontStack(); - if (loaded && caption?.font !== 'system') return stack; - return dropLeadingFamily(stack); -} - -/** `captionFontStack()` minus its first family, for a plain system fallback. */ -function dropLeadingFamily(stack) { - let quote = null; - for (let i = 0; i < stack.length; i++) { - const ch = stack[i]; - if (quote) { - if (ch === '\\') i++; - else if (ch === quote) quote = null; - } else if (ch === "'" || ch === '"') { - quote = ch; - } else if (ch === ',') { - const rest = stack.slice(i + 1).trim(); - return rest === '' ? 'sans-serif' : rest; - } - } - return 'sans-serif'; -} - -/** Font size in output pixels, always positive and finite. */ -function resolveFontSize(caption, scale) { - const base = toPositive(caption?.fontSize, DEFAULT_FONT_SIZE); - return toPositive(base * positiveScale(scale), DEFAULT_FONT_SIZE); -} - -function bubbleOf(caption) { - const value = caption?.bubble; - if (value === 'round' || value === 'rect' || value === 'shout' - || value === 'whisper' || value === 'think' || value === 'none') return value; - return 'round'; -} - -function tailOf(caption) { - const value = caption?.tail; - return TAIL_VALUES.has(value) ? value : 'left'; -} - -const TAIL_VALUES = new Set([ - 'left', 'right', 'top', 'bottom', - 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', - 'none', -]); - -/** - * Which way a tail leaves the box, as a direction where each axis is -1, 0 or - * 1 (0 for `none` or anything unknown). A diagonal tail carries a sign on both - * axes, so `bottomLeft` is `{ x: -1, y: 1 }`. - */ -function tailDirection(tail) { - switch (tail) { - case 'left': return { x: -1, y: 0 }; - case 'right': return { x: 1, y: 0 }; - case 'top': return { x: 0, y: -1 }; - case 'bottom': return { x: 0, y: 1 }; - case 'topLeft': return { x: -1, y: -1 }; - case 'topRight': return { x: 1, y: -1 }; - case 'bottomLeft': return { x: -1, y: 1 }; - case 'bottomRight': return { x: 1, y: 1 }; - default: return { x: 0, y: 0 }; - } -} - -function alignOf(caption) { - const value = caption?.align; - return value === 'center' || value === 'right' ? value : 'left'; -} - -function colorOf(value, fallback) { - return typeof value === 'string' && value !== '' ? value : fallback; -} - -/** Scale is a multiplier: anything that is not a positive number means 1. */ -function positiveScale(value) { - return Number.isFinite(value) && value > 0 ? value : 1; -} - -function toFinite(value, fallback) { - return Number.isFinite(value) ? value : fallback; -} - -function toPositive(value, fallback) { - return Number.isFinite(value) && value > 0 ? value : fallback; -} - -function toNonNegative(value, fallback) { - return Number.isFinite(value) && value >= 0 ? value : fallback; -} - -function clamp(value, low, high) { - if (high < low) return low; - return Math.min(Math.max(value, low), high); -} - -/** Decimal string for both `ctx.font` and SVG, never `NaN` and never `-0`. */ -function formatNumber(value, places = 2) { - if (!Number.isFinite(value)) return '0'; - const decimals = Number.isFinite(places) ? Math.max(0, Math.min(8, Math.floor(places))) : 2; - const factor = Math.pow(10, decimals); - const rounded = Math.round(value * factor) / factor; - return Object.is(rounded, -0) ? '0' : String(rounded); -} - -/** - * Escape character data. - * - * Quotes are escaped too even though element content allows them: the caption - * is user text, and the extra entities cost nothing next to never emitting a - * document a stricter parser could object to. - */ -function escapeText(value) { - return String(value ?? '') - .replace(/&/g, '&') - .replace(/</g, '<') - .replace(/>/g, '>') - .replace(/"/g, '"') - .replace(/'/g, '''); -} - -/** - * Escape an attribute value. - * - * Only the double quote matters inside a double-quoted attribute, so single - * quotes survive and a family stack such as `'Hiragino Maru Gothic ProN', - * sans-serif` stays readable in the file. - */ -function escapeAttribute(value) { - return String(value ?? '') - .replace(/&/g, '&') - .replace(/</g, '<') - .replace(/>/g, '>') - .replace(/"/g, '"'); -} - -function distance(a, b) { - return Math.hypot(b.x - a.x, b.y - a.y); -} - -function lerp(a, b, t) { - return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t }; -} |