github.com
/
excalidraw
mirror of https://github.com/excalidraw/excalidraw.git
1
0
Fork 0
Code Releases Wiki Activity

fix: Apply correct translation when text editor overflows when zoom not 100% (#3225) 

* fix: Apply correct translation when zoom not 100%

* fix

* fix

* Update src/element/textWysiwyg.tsx

Co-authored-by: David Luzar <luzar.david@gmail.com>
This commit is contained in:
Aakansha Doshi 2021-03-12 02:38:50 +05:30 committed by GitHub
parent 6252b22b42
commit 3780a155f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/element/textWysiwyg.tsx
View File

@ -21,14 +21,18 @@ const getTransform = (
height: number,
angle: number,
appState: AppState,
maxWidth: number,
) => {
const { zoom, offsetTop, offsetLeft } = appState;
const degree = (180 * angle) / Math.PI;
// offsets must be multiplied by 2 to account for the division by 2 of
// the whole expression afterwards
return `translate(${((width - offsetLeft * 2) * (zoom.value - 1)) / 2}px, ${
((height - offsetTop * 2) * (zoom.value - 1)) / 2
}px) scale(${zoom.value}) rotate(${degree}deg)`;
let translateX = ((width - offsetLeft * 2) * (zoom.value - 1)) / 2;
const translateY = ((height - offsetTop * 2) * (zoom.value - 1)) / 2;
if (width > maxWidth && zoom.value !== 1) {
translateX = (maxWidth / 2) * (zoom.value - 1);
}
return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`;
};
export const textWysiwyg = ({
@ -61,6 +65,15 @@ export const textWysiwyg = ({
const lines = updatedElement.text.replace(/\r\n?/g, "\n").split("\n");
const lineHeight = updatedElement.height / lines.length;
const maxWidth =
(appState.offsetLeft + appState.width - viewportX - 8) /
appState.zoom.value -
// margin-right of parent if any
Number(
getComputedStyle(
document.querySelector(".excalidraw")!.parentNode as Element,
).marginRight.slice(0, -2),
);
Object.assign(editable.style, {
font: getFontString(updatedElement),
@ -75,24 +88,13 @@ export const textWysiwyg = ({
updatedElement.height,
angle,
appState,
maxWidth,
),
textAlign,
color: updatedElement.strokeColor,
opacity: updatedElement.opacity / 100,
filter: "var(--appearance-filter)",
maxWidth: `${
appState.offsetLeft +
appState.width -
viewportX -
// margin-right of parent if any
Number(
getComputedStyle(
document.querySelector(".excalidraw")!.parentNode as Element,
).marginRight.slice(0, -2),
) -
// padding of layer ui footer
8
}px`,
maxWidth: `${maxWidth}px`,
});
}
};