smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
Download patch file Download diff file Expand all files Collapse all files

16
src/element/textWysiwyg.tsx
View file

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