diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx index 1e748a324..5173b29cd 100644 --- a/src/element/textWysiwyg.tsx +++ b/src/element/textWysiwyg.tsx @@ -21,18 +21,14 @@ 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 - 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)`; + return `translate(${((width - offsetLeft * 2) * (zoom.value - 1)) / 2}px, ${ + ((height - offsetTop * 2) * (zoom.value - 1)) / 2 + }px) scale(${zoom.value}) rotate(${degree}deg)`; }; export const textWysiwyg = ({ @@ -65,15 +61,6 @@ 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), @@ -88,13 +75,11 @@ export const textWysiwyg = ({ updatedElement.height, angle, appState, - maxWidth, ), textAlign, color: updatedElement.strokeColor, opacity: updatedElement.opacity / 100, filter: "var(--appearance-filter)", - maxWidth: `${maxWidth}px`, }); } }; @@ -108,7 +93,7 @@ export const textWysiwyg = ({ editable.wrap = "off"; Object.assign(editable.style, { - position: "absolute", + position: "fixed", display: "inline-block", minHeight: "1em", backfaceVisibility: "hidden",