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

fix: update height correctly when updating text properties in binded text (#4459)

Browse Source 
* fix: update height correctly when updating text properties in binded text

* read height from editor style so its accurate

* fix
This commit is contained in:
Aakansha Doshi 2021-12-22 12:08:51 +05:30 committed by GitHub
parent c1c37a6ee7
commit 55b7a7d554
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/element/textWysiwyg.tsx
View File

@ -109,16 +109,19 @@ export const textWysiwyg = ({
let maxHeight = updatedElement.height;
let width = updatedElement.width;
const height =
editable.scrollHeight === 0
? updatedElement.height
: editable.scrollHeight;
// Set to element height by default since thats
// what is going to be used for unbounded text
let height = updatedElement.height;
if (container && updatedElement.containerId) {
const propertiesUpdated = textPropertiesUpdated(
updatedElement,
editable,
);
// using editor.style.height to get the accurate height of text editor
const editorHeight = Number(editable.style.height.slice(0, -2));
if (editorHeight > 0) {
height = editorHeight;
}
if (propertiesUpdated) {
const currentContainer = Scene.getScene(updatedElement)?.getElement(
updatedElement.containerId,
@ -132,7 +135,8 @@ export const textWysiwyg = ({
mutateElement(container, { height: nextHeight });
container = { ...container, height: nextHeight };
}
editable.style.height = `${updatedElement.height}px`;
// update height of the editor after properties updated
height = updatedElement.height;
}
if (!originalContainerHeight) {
originalContainerHeight = container.height;
@ -143,36 +147,28 @@ export const textWysiwyg = ({
// The coordinates of text box set a distance of
// 30px to preserve padding
coordX = container.x + PADDING;
// autogrow container height if text exceeds
if (editable.scrollHeight > maxHeight) {
const diff = Math.min(
editable.scrollHeight - maxHeight,
approxLineHeight,
);
if (height > maxHeight) {
const diff = Math.min(height - maxHeight, approxLineHeight);
mutateElement(container, { height: container.height + diff });
return;
} else if (
// autoshrink container height until original container height
// is reached when text is removed
container.height > originalContainerHeight &&
editable.scrollHeight < maxHeight
height < maxHeight
) {
const diff = Math.min(
maxHeight - editable.scrollHeight,
approxLineHeight,
);
const diff = Math.min(maxHeight - height, approxLineHeight);
mutateElement(container, { height: container.height - diff });
}
// Start pushing text upward until a diff of 30px (padding)
// is reached
else {
const lines = editable.scrollHeight / approxLineHeight;
const lines = height / approxLineHeight;
if (lines > 1 || propertiesUpdated) {
// vertically center align the text
coordY =
container.y + container.height / 2 - editable.scrollHeight / 2;
coordY = container.y + container.height / 2 - height / 2;
}
}
}