mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
Fixes text jumping on creation (#266)
* Fixes text jumping on creation * Do not remove node on ESC * Fixed typo
This commit is contained in:
parent
2122a9cf9f
commit
37934c0f8b
5 changed files with 52 additions and 23 deletions
27
src/utils.ts
27
src/utils.ts
|
@ -23,3 +23,30 @@ export function isInputLike(
|
|||
target instanceof HTMLSelectElement
|
||||
);
|
||||
}
|
||||
|
||||
// https://github.com/grassator/canvas-text-editor/blob/master/lib/FontMetrics.js
|
||||
export function measureText(text: string, font: string) {
|
||||
const line = document.createElement("div");
|
||||
const body = document.body;
|
||||
line.style.position = "absolute";
|
||||
line.style.whiteSpace = "nowrap";
|
||||
line.style.font = font;
|
||||
body.appendChild(line);
|
||||
// Now we can measure width and height of the letter
|
||||
line.innerHTML = text;
|
||||
const width = line.offsetWidth;
|
||||
const height = line.offsetHeight;
|
||||
// Now creating 1px sized item that will be aligned to baseline
|
||||
// to calculate baseline shift
|
||||
const span = document.createElement("span");
|
||||
span.style.display = "inline-block";
|
||||
span.style.overflow = "hidden";
|
||||
span.style.width = "1px";
|
||||
span.style.height = "1px";
|
||||
line.appendChild(span);
|
||||
// Baseline is important for positioning text on canvas
|
||||
const baseline = span.offsetTop + span.offsetHeight;
|
||||
document.body.removeChild(line);
|
||||
|
||||
return { width, height, baseline };
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue