github.com/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-02-18 13:29:36 +01:00
Code Releases Wiki Activity

perf: cache approx line height in textwysiwg (#4651)

Browse Source
This commit is contained in:
Aakansha Doshi 2022-01-25 17:01:12 +05:30 committed by GitHub
parent c009e03c8e
commit abff780983
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/element/textElement.ts
View File

@ -205,8 +205,14 @@ export const measureText = (
}; };
const DUMMY_TEXT = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toLocaleUpperCase(); const DUMMY_TEXT = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toLocaleUpperCase();
const cacheApproxLineHeight: { [key: FontString]: number } = {};
export const getApproxLineHeight = (font: FontString) => { export const getApproxLineHeight = (font: FontString) => {
return measureText(DUMMY_TEXT, font, null).height; if (cacheApproxLineHeight[font]) {
return cacheApproxLineHeight[font];
}
cacheApproxLineHeight[font] = measureText(DUMMY_TEXT, font, null).height;
return cacheApproxLineHeight[font];
}; };
let canvas: HTMLCanvasElement | undefined; let canvas: HTMLCanvasElement | undefined;

16
src/element/textWysiwyg.tsx
View File

@ -102,10 +102,12 @@ export const textWysiwyg = ({
return false; return false;
}; };
let originalContainerHeight: number; let originalContainerHeight: number;
let approxLineHeight = getApproxLineHeight(getFontString(element));
const updateWysiwygStyle = () => { const updateWysiwygStyle = () => {
const updatedElement = Scene.getScene(element)?.getElement(id); const updatedElement = Scene.getScene(element)?.getElement(
id,
) as ExcalidrawTextElement;
const approxLineHeight = getApproxLineHeight(getFontString(updatedElement));
if (updatedElement && isTextElement(updatedElement)) { if (updatedElement && isTextElement(updatedElement)) {
let coordX = updatedElement.x; let coordX = updatedElement.x;
let coordY = updatedElement.y; let coordY = updatedElement.y;
@ -128,8 +130,6 @@ export const textWysiwyg = ({
height = editorHeight; height = editorHeight;
} }
if (propertiesUpdated) { if (propertiesUpdated) {
approxLineHeight = getApproxLineHeight(getFontString(updatedElement));
originalContainerHeight = container.height; originalContainerHeight = container.height;
// update height of the editor after properties updated // update height of the editor after properties updated
@ -268,10 +268,14 @@ export const textWysiwyg = ({
if (onChange) { if (onChange) {
editable.oninput = () => { editable.oninput = () => {
const updatedElement = Scene.getScene(element)?.getElement(
id,
) as ExcalidrawTextElement;
const font = getFontString(updatedElement);
// using scrollHeight here since we need to calculate // using scrollHeight here since we need to calculate
// number of lines so cannot use editable.style.height // number of lines so cannot use editable.style.height
// as that gets updated below // as that gets updated below
const lines = editable.scrollHeight / approxLineHeight; const lines = editable.scrollHeight / getApproxLineHeight(font);
// auto increase height only when lines > 1 so its // auto increase height only when lines > 1 so its
// measured correctly and vertically alignes for // measured correctly and vertically alignes for
// first line as well as setting height to "auto" // first line as well as setting height to "auto"
@ -283,7 +287,7 @@ export const textWysiwyg = ({
const container = getContainerElement(element); const container = getContainerElement(element);
const actualLineCount = wrapText( const actualLineCount = wrapText(
editable.value, editable.value,
getFontString(element), font,
container!.width, container!.width,
).split("\n").length; ).split("\n").length;