sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adjust font baseline on resize (#1820)

Browse Source 
* adjust font baseline on resize

* simplify font scaling on resize

* fix: resizing text to avoid glitchy behavior

* make text resizing deterministic

* no TEXT_WIDTH_PADDING hack

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Daishi Kato 2020-07-09 22:22:10 +09:00 committed by GitHub
parent 5d7020cce6
commit 6cc6e13892
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/element/resizeElements.ts
View File

@ -207,45 +207,26 @@ const rescalePointsInElement = (
} }
: {}; : {};
// This is not computationally ideal, but can't be helped. const MIN_FONT_SIZE = 1;
const measureFontSizeFromWH = ( const measureFontSizeFromWH = (
element: NonDeleted<ExcalidrawTextElement>, element: NonDeleted<ExcalidrawTextElement>,
nextWidth: number, nextWidth: number,
nextHeight: number, nextHeight: number,
): { size: number; baseline: number } | null => { ): { size: number; baseline: number } | null => {
let scale = Math.min(nextWidth / element.width, nextHeight / element.height); // We only use width to scale font on resize
let nextFontSize = element.fontSize * scale; const nextFontSize = element.fontSize * (nextWidth / element.width);
let metrics = measureText( if (nextFontSize < MIN_FONT_SIZE) {
return null;
}
const metrics = measureText(
element.text, element.text,
getFontString({ fontSize: nextFontSize, fontFamily: element.fontFamily }), getFontString({ fontSize: nextFontSize, fontFamily: element.fontFamily }),
); );
if (metrics.width - nextWidth < 1 && metrics.height - nextHeight < 1) { return {
return { size: nextFontSize, baseline: metrics.baseline }; size: nextFontSize,
} baseline: metrics.baseline + (nextHeight - metrics.height),
// second measurement };
scale = Math.min(
Math.min(nextWidth, metrics.width) / element.width,
Math.min(nextHeight, metrics.height) / element.height,
);
nextFontSize = element.fontSize * scale;
metrics = measureText(
element.text,
getFontString({ fontSize: nextFontSize, fontFamily: element.fontFamily }),
);
if (metrics.width - nextWidth < 1 && metrics.height - nextHeight < 1) {
return { size: nextFontSize, baseline: metrics.baseline };
}
// third measurement
scale *= 0.99; // just heuristics
nextFontSize = element.fontSize * scale;
metrics = measureText(
element.text,
getFontString({ fontSize: nextFontSize, fontFamily: element.fontFamily }),
);
if (metrics.width - nextWidth < 1 && metrics.height - nextHeight < 1) {
return { size: nextFontSize, baseline: metrics.baseline };
}
return null;
}; };
const getSidesForResizeHandle = ( const getSidesForResizeHandle = (