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, height: number,
angle: number, angle: number,
appState: AppState, appState: AppState,
maxWidth: number,
) => { ) => {
const { zoom, offsetTop, offsetLeft } = appState; const { zoom, offsetTop, offsetLeft } = appState;
const degree = (180 * angle) / Math.PI; const degree = (180 * angle) / Math.PI;
// offsets must be multiplied by 2 to account for the division by 2 of // offsets must be multiplied by 2 to account for the division by 2 of
// the whole expression afterwards // the whole expression afterwards
return `translate(${((width - offsetLeft * 2) * (zoom.value - 1)) / 2}px, ${ let translateX = ((width - offsetLeft * 2) * (zoom.value - 1)) / 2;
((height - offsetTop * 2) * (zoom.value - 1)) / 2 const translateY = ((height - offsetTop * 2) * (zoom.value - 1)) / 2;
}px) scale(${zoom.value}) rotate(${degree}deg)`; 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 = ({ export const textWysiwyg = ({
@ -61,6 +65,15 @@ export const textWysiwyg = ({
const lines = updatedElement.text.replace(/\r\n?/g, "\n").split("\n"); const lines = updatedElement.text.replace(/\r\n?/g, "\n").split("\n");
const lineHeight = updatedElement.height / lines.length; 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, { Object.assign(editable.style, {
font: getFontString(updatedElement), font: getFontString(updatedElement),
@ -75,24 +88,13 @@ export const textWysiwyg = ({
updatedElement.height, updatedElement.height,
angle, angle,
appState, appState,
maxWidth,
), ),
textAlign, textAlign,
color: updatedElement.strokeColor, color: updatedElement.strokeColor,
opacity: updatedElement.opacity / 100, opacity: updatedElement.opacity / 100,
filter: "var(--appearance-filter)", filter: "var(--appearance-filter)",
maxWidth: `${ maxWidth: `${maxWidth}px`,
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`,
}); });
} }
}; };