fix: set height correctly when text properties updated while editing in container until first submit (#4469)

* fix: set height correctly when text properties updated while editing in container

* rename PADDING to BOUND_TEXT_PADDING
This commit is contained in:
Aakansha Doshi 2021-12-23 17:02:35 +05:30 committed by GitHub
parent bf2bca221e
commit ef62390841
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 62 additions and 31 deletions

View file

@ -6,7 +6,7 @@ import {
} from "../utils";
import Scene from "../scene/Scene";
import { isBoundToContainer, isTextElement } from "./typeChecks";
import { CLASSES, PADDING } from "../constants";
import { CLASSES, BOUND_TEXT_PADDING } from "../constants";
import {
ExcalidrawBindableElement,
ExcalidrawElement,
@ -129,8 +129,11 @@ export const textWysiwyg = ({
approxLineHeight = isTextElement(updatedElement)
? getApproxLineHeight(getFontString(updatedElement))
: 0;
if (updatedElement.height > currentContainer.height - PADDING * 2) {
const nextHeight = updatedElement.height + PADDING * 2;
if (
updatedElement.height >
currentContainer.height - BOUND_TEXT_PADDING * 2
) {
const nextHeight = updatedElement.height + BOUND_TEXT_PADDING * 2;
originalContainerHeight = nextHeight;
mutateElement(container, { height: nextHeight });
container = { ...container, height: nextHeight };
@ -141,12 +144,12 @@ export const textWysiwyg = ({
if (!originalContainerHeight) {
originalContainerHeight = container.height;
}
maxWidth = container.width - PADDING * 2;
maxHeight = container.height - PADDING * 2;
maxWidth = container.width - BOUND_TEXT_PADDING * 2;
maxHeight = container.height - BOUND_TEXT_PADDING * 2;
width = maxWidth;
// The coordinates of text box set a distance of
// 30px to preserve padding
coordX = container.x + PADDING;
coordX = container.x + BOUND_TEXT_PADDING;
// autogrow container height if text exceeds
if (height > maxHeight) {
const diff = Math.min(height - maxHeight, approxLineHeight);
@ -465,7 +468,7 @@ export const textWysiwyg = ({
height: editorHeight,
width: Number(editable.style.width.slice(0, -2)),
// preserve padding
x: container.x + PADDING,
x: container.x + BOUND_TEXT_PADDING,
});
const boundTextElementId = getBoundTextElementId(container);
if (!boundTextElementId || boundTextElementId !== element.id) {