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

fix: vertically align single line when deleting text in bounded container (#4460)

Browse Source
This commit is contained in:
Aakansha Doshi 2021-12-22 15:32:21 +05:30 committed by GitHub
parent 55b7a7d554
commit 25e54e5999
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/element/textWysiwyg.tsx
View File

@ -164,12 +164,8 @@ export const textWysiwyg = ({
// 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 = height / approxLineHeight; // vertically center align the text
coordY = container.y + container.height / 2 - height / 2;
if (lines > 1 || propertiesUpdated) {
// vertically center align the text
coordY = container.y + container.height / 2 - height / 2;
}
} }
} }
const [viewportX, viewportY] = getViewportCoords(coordX, coordY); const [viewportX, viewportY] = getViewportCoords(coordX, coordY);
@ -269,13 +265,37 @@ export const textWysiwyg = ({
if (onChange) { if (onChange) {
editable.oninput = () => { editable.oninput = () => {
// 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 / approxLineHeight;
// 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"
// doubles the height as soon as user starts typing // doubles the height as soon as user starts typing
if (isBoundToContainer(element) && lines > 1) { if (isBoundToContainer(element) && lines > 1) {
editable.style.height = "auto"; let height = "auto";
if (lines === 2) {
const container = Scene.getScene(element)!.getElement(
element.containerId,
);
const actualLineCount = wrapText(
editable.value,
getFontString(element),
container!.width,
).split("\n").length;
// This is browser behaviour when setting height to "auto"
// It sets the height needed for 2 lines even if actual
// line count is 1 as mentioned above as well
// hence reducing the height by half if actual line count is 1
// so single line aligns vertically when deleting
if (actualLineCount === 1) {
height = `${editable.scrollHeight / 2}px`;
}
}
editable.style.height = height;
editable.style.height = `${editable.scrollHeight}px`; editable.style.height = `${editable.scrollHeight}px`;
} }
onChange(normalizeText(editable.value)); onChange(normalizeText(editable.value));