|
|
|
@ -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`,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|