mirror of https://github.com/grafana/grafana
Leon Sorokin
3 months ago
parent
c72530350e
commit
d99b9313aa
@ -1,257 +0,0 @@ |
||||
// A vendored and heavily optimized modification of canvas-hypertxt:
|
||||
// https://github.com/glideapps/canvas-hypertxt/blob/main/src/multi-line.ts
|
||||
// TODO: instance per font style to avoid extra map
|
||||
|
||||
// font -> avg pixels per char
|
||||
const metrics: Map<string, { count: number; size: number }> = new Map(); |
||||
|
||||
const hyperMaps: Map<string, Record<string, number>> = new Map(); |
||||
|
||||
type BreakCallback = (str: string) => readonly number[]; |
||||
|
||||
export function backProp( |
||||
text: string, |
||||
realWidth: number, |
||||
keyMap: Record<string, number>, |
||||
temperature: number, |
||||
avgSize: number |
||||
) { |
||||
let guessWidth = 0; |
||||
const contribMap: Record<string, number> = {}; |
||||
for (let i = 0; i < text.length; i++) { |
||||
const char = text[i]; |
||||
const v = keyMap[char] ?? avgSize; |
||||
guessWidth += v; |
||||
contribMap[char] = (contribMap[char] ?? 0) + 1; |
||||
} |
||||
|
||||
const diff = realWidth - guessWidth; |
||||
|
||||
for (const key of Object.keys(contribMap)) { |
||||
const numContribution = contribMap[key]; |
||||
const contribWidth = keyMap[key] ?? avgSize; |
||||
const contribAmount = (contribWidth * numContribution) / guessWidth; |
||||
const adjustment = (diff * contribAmount * temperature) / numContribution; |
||||
const newVal = contribWidth + adjustment; |
||||
keyMap[key] = newVal; |
||||
} |
||||
} |
||||
|
||||
const CHARS = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890,.-+=?'; |
||||
|
||||
function makeHyperMap(ctx: CanvasRenderingContext2D, avgSize: number): Record<string, number> { |
||||
const result: Record<string, number> = {}; |
||||
let total = 0; |
||||
|
||||
for (let i = 0; i < CHARS.length; i++) { |
||||
const c = CHARS[i]; |
||||
const w = ctx.measureText(c).width; |
||||
result[c] = w; |
||||
total += w; |
||||
} |
||||
|
||||
const avg = total / CHARS.length; |
||||
|
||||
// Artisnal hand-tuned constants that have no real meaning other than they make it work better for most fonts
|
||||
// These don't really need to be accurate, we are going to be adjusting the weights. It just converges faster
|
||||
// if they start somewhere close.
|
||||
const damper = 3; |
||||
const scaler = (avgSize / avg + damper) / (damper + 1); |
||||
|
||||
for (const key in result) { |
||||
result[key] = (result[key] ?? avg) * scaler; |
||||
} |
||||
return result; |
||||
} |
||||
|
||||
function measureText(ctx: CanvasRenderingContext2D, text: string, fontStyle: string, hyperMode: boolean): number { |
||||
const current = metrics.get(fontStyle); |
||||
|
||||
if (hyperMode && current !== undefined && current.count > 20_000) { |
||||
let hyperMap = hyperMaps.get(fontStyle); |
||||
if (hyperMap === undefined) { |
||||
hyperMap = makeHyperMap(ctx, current.size); |
||||
hyperMaps.set(fontStyle, hyperMap); |
||||
} |
||||
|
||||
if (current.count > 500_000) { |
||||
let final = 0; |
||||
for (let i = 0; i < text.length; i++) { |
||||
final += hyperMap[text[i]] ?? current.size; |
||||
} |
||||
return final * 1.01; //safety margin
|
||||
} |
||||
|
||||
const result = ctx.measureText(text); |
||||
backProp(text, result.width, hyperMap, Math.max(0.05, 1 - current.count / 200_000), current.size); |
||||
metrics.set(fontStyle, { |
||||
count: current.count + text.length, |
||||
size: current.size, |
||||
}); |
||||
return result.width; |
||||
} |
||||
|
||||
const result = ctx.measureText(text); |
||||
|
||||
const avg = result.width / text.length; |
||||
|
||||
// we've collected enough data
|
||||
if ((current?.count ?? 0) > 20_000) { |
||||
return result.width; |
||||
} |
||||
|
||||
if (current === undefined) { |
||||
metrics.set(fontStyle, { |
||||
count: text.length, |
||||
size: avg, |
||||
}); |
||||
} else { |
||||
const diff = avg - current.size; |
||||
const contribution = text.length / (current.count + text.length); |
||||
const newVal = current.size + diff * contribution; |
||||
metrics.set(fontStyle, { |
||||
count: current.count + text.length, |
||||
size: newVal, |
||||
}); |
||||
} |
||||
|
||||
return result.width; |
||||
} |
||||
|
||||
function getSplitPoint( |
||||
ctx: CanvasRenderingContext2D, |
||||
text: string, |
||||
width: number, |
||||
fontStyle: string, |
||||
totalWidth: number, |
||||
measuredChars: number, |
||||
hyperMode: boolean, |
||||
getBreakOpportunities?: BreakCallback |
||||
): number { |
||||
if (text.length <= 1) { |
||||
return text.length; |
||||
} |
||||
|
||||
// this should never happen, but we are protecting anyway
|
||||
if (totalWidth < width) { |
||||
return -1; |
||||
} |
||||
|
||||
let guess = Math.floor((width / totalWidth) * measuredChars); |
||||
let guessWidth = measureText(ctx, text.slice(0, Math.max(0, guess)), fontStyle, hyperMode); |
||||
|
||||
const oppos = getBreakOpportunities?.(text); |
||||
|
||||
if (guessWidth === width) { |
||||
// NAILED IT
|
||||
} else if (guessWidth < width) { |
||||
while (guessWidth < width) { |
||||
guess++; |
||||
guessWidth = measureText(ctx, text.slice(0, Math.max(0, guess)), fontStyle, hyperMode); |
||||
} |
||||
guess--; |
||||
} else { |
||||
// we only need to check for spaces as we go back
|
||||
while (guessWidth > width) { |
||||
const lastSpace = oppos !== undefined ? 0 : text.lastIndexOf(' ', guess - 1); |
||||
if (lastSpace > 0) { |
||||
guess = lastSpace; |
||||
} else { |
||||
guess--; |
||||
} |
||||
guessWidth = measureText(ctx, text.slice(0, Math.max(0, guess)), fontStyle, hyperMode); |
||||
} |
||||
} |
||||
|
||||
if (text[guess] !== ' ') { |
||||
let greedyBreak = 0; |
||||
if (oppos === undefined) { |
||||
greedyBreak = text.lastIndexOf(' ', guess); |
||||
} else { |
||||
for (const o of oppos) { |
||||
if (o > guess) { |
||||
break; |
||||
} |
||||
greedyBreak = o; |
||||
} |
||||
} |
||||
if (greedyBreak > 0) { |
||||
guess = greedyBreak; |
||||
} |
||||
} |
||||
|
||||
return guess; |
||||
} |
||||
|
||||
export function countMultiLines( |
||||
ctx: CanvasRenderingContext2D, |
||||
value: string, |
||||
fontStyle: string, |
||||
width: number, |
||||
hyperWrappingAllowed: boolean, |
||||
getBreakOpportunities?: BreakCallback |
||||
) { |
||||
if (width <= 0) { |
||||
// dont render 0 width stuff
|
||||
return 1; |
||||
} |
||||
|
||||
if (value.indexOf('\n') !== -1) { |
||||
let result = 0; |
||||
|
||||
value.split('\n').forEach((value) => { |
||||
result += countLines(ctx, value, fontStyle, width, hyperWrappingAllowed, getBreakOpportunities); |
||||
}); |
||||
return result; |
||||
} else { |
||||
return countLines(ctx, value, fontStyle, width, hyperWrappingAllowed, getBreakOpportunities); |
||||
} |
||||
} |
||||
|
||||
// Algorithm improved from https://github.com/geongeorge/Canvas-Txt/blob/master/src/index.js
|
||||
function countLines( |
||||
ctx: CanvasRenderingContext2D, |
||||
line: string, |
||||
fontStyle: string, |
||||
width: number, |
||||
hyperWrappingAllowed: boolean, |
||||
getBreakOpportunities?: BreakCallback |
||||
): number { |
||||
let result = 0; |
||||
|
||||
const fontMetrics = metrics.get(fontStyle); |
||||
const safeLineGuess = fontMetrics === undefined ? line.length : (width / fontMetrics.size) * 1.5; |
||||
const hyperMode = hyperWrappingAllowed && fontMetrics !== undefined && fontMetrics.count > 20_000; |
||||
|
||||
let textWidth = measureText(ctx, line.slice(0, Math.max(0, safeLineGuess)), fontStyle, hyperMode); |
||||
let measuredChars = Math.min(line.length, safeLineGuess); |
||||
if (textWidth <= width) { |
||||
// line fits, just push it
|
||||
result++; |
||||
} else { |
||||
while (textWidth > width) { |
||||
const splitPoint = getSplitPoint( |
||||
ctx, |
||||
line, |
||||
width, |
||||
fontStyle, |
||||
textWidth, |
||||
measuredChars, |
||||
hyperMode, |
||||
getBreakOpportunities |
||||
); |
||||
const subLine = line.slice(0, Math.max(0, splitPoint)); |
||||
|
||||
line = line.slice(subLine.length); |
||||
result++; |
||||
textWidth = measureText(ctx, line.slice(0, Math.max(0, safeLineGuess)), fontStyle, hyperMode); |
||||
measuredChars = Math.min(line.length, safeLineGuess); |
||||
} |
||||
|
||||
if (textWidth > 0) { |
||||
result++; |
||||
} |
||||
} |
||||
|
||||
return result; |
||||
} |
||||
@ -0,0 +1,118 @@ |
||||
// BREAKS
|
||||
const D = '-'.charCodeAt(0); |
||||
// const N = "\n".charCodeAt(0);
|
||||
// const R = "\r".charCodeAt(0);
|
||||
const S = ' '.charCodeAt(0); |
||||
// const T = "\t".charCodeAt(0);
|
||||
|
||||
const SYMBS = `\`~!@#$%^&*()_+-=[]\\{}|;':",./<>?`; |
||||
const NUMS = '1234567890'; |
||||
const UPPER = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; |
||||
const LOWER = 'abcdefghijklmnopqrstuvwxyz'; |
||||
const CHARS = `${UPPER}${LOWER}${NUMS}${SYMBS}`; |
||||
|
||||
// TODO: customize above via opts
|
||||
// TODO: respect explicit breaks
|
||||
// TODO: instead of ctx, pass in font, letterSpacing, wordSpacing
|
||||
export function uWrap(ctx: CanvasRenderingContext2D) { |
||||
// TODO: wordSpacing
|
||||
const letterSpacing = parseFloat(ctx.letterSpacing); |
||||
|
||||
// single-char widths in isolation
|
||||
const WIDTHS: Record<number, number> = {}; |
||||
|
||||
for (let i = 0; i < CHARS.length; i++) { |
||||
WIDTHS[CHARS.charCodeAt(i)] = ctx.measureText(CHARS[i]).width + letterSpacing; |
||||
} |
||||
|
||||
// build kerning/spacing LUT of upper+lower, upper+sym, upper+upper pairs. (this includes letterSpacing)
|
||||
const PAIRS: Record<number, Record<number, number>> = {}; |
||||
|
||||
for (let i = 0; i < UPPER.length; i++) { |
||||
let uc = UPPER.charCodeAt(i); |
||||
PAIRS[uc] = {}; |
||||
|
||||
for (let j = 0; j < CHARS.length; j++) { |
||||
let ch = CHARS.charCodeAt(j); |
||||
let wid = ctx.measureText(`${UPPER[i]}${CHARS[j]}`).width - WIDTHS[ch] - letterSpacing; |
||||
PAIRS[uc][ch] = wid; |
||||
} |
||||
} |
||||
|
||||
type EachLine = (idx0: number, idx1: number) => void; |
||||
|
||||
const eachLine: EachLine = () => {}; |
||||
|
||||
function each(text: string, width: number, cb: EachLine = eachLine) { |
||||
let headIdx = 0; |
||||
let headEnd = 0; |
||||
let headWid = 0; |
||||
|
||||
let tailIdx = -1; // wrap candidate
|
||||
let tailWid = 0; |
||||
|
||||
let inWS = false; |
||||
|
||||
for (let i = 0; i < text.length; i++) { |
||||
let c = text.charCodeAt(i); |
||||
|
||||
let w = 0; |
||||
|
||||
if (c in PAIRS) { |
||||
let n = text.charCodeAt(i + 1); |
||||
|
||||
if (n in PAIRS[c]) { |
||||
w = PAIRS[c][n]; |
||||
} |
||||
} |
||||
|
||||
if (w === 0) { |
||||
w = WIDTHS[c] ?? (WIDTHS[c] = ctx.measureText(text[i]).width); |
||||
} |
||||
|
||||
if (c === S) { |
||||
// || c === T || c === N || c === R
|
||||
// set possible wrap point
|
||||
if (text.charCodeAt(i + 1) !== c) { |
||||
tailIdx = i + 1; |
||||
tailWid = 0; |
||||
} |
||||
|
||||
if (!inWS && headWid > 0) { |
||||
headWid += w; |
||||
headEnd = i; |
||||
} |
||||
|
||||
inWS = true; |
||||
} else { |
||||
if (headWid + w > width) { |
||||
cb(headIdx, headEnd); |
||||
|
||||
headWid = tailWid + w; |
||||
headIdx = headEnd = tailIdx; |
||||
tailWid = 0; |
||||
tailIdx = -1; |
||||
} else { |
||||
if (c === D) { |
||||
// set possible wrap point
|
||||
if (text.charCodeAt(i + 1) !== c) { |
||||
tailIdx = headEnd = i + 1; |
||||
tailWid = 0; |
||||
} |
||||
} |
||||
|
||||
headWid += w; |
||||
tailWid += w; |
||||
} |
||||
|
||||
inWS = false; |
||||
} |
||||
} |
||||
|
||||
cb(headIdx, text.length - 1); |
||||
} |
||||
|
||||
return { |
||||
each, |
||||
}; |
||||
} |
||||
Loading…
Reference in new issue