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