use DOM height only for safari to fix LS

pull/6427/merge
Aakansha Doshi 2 years ago
parent f21a6b587a
commit d75889238d

@ -289,10 +289,13 @@ export const measureText = (
.map((x) => x || " ")
.join("\n");
const fontSize = parseFloat(font);
const height = getTextHeight(text, fontSize, lineHeight);
let height = getTextHeight(text, fontSize, lineHeight);
const width = getTextWidth(text, font);
const { baseline } = getDOMMetrics(text, font, lineHeight);
return { width, height, baseline };
const domMetrics = getDOMMetrics(text, font, lineHeight);
if (isSafari) {
height = domMetrics.height;
}
return { width, height, baseline: domMetrics.baseline };
};
export const getDOMMetrics = (
@ -313,7 +316,6 @@ export const getDOMMetrics = (
}
container.style.lineHeight = String(lineHeight);
const canvasHeight = getTextHeight(text, parseFloat(font), lineHeight);
container.innerText = text;
@ -326,23 +328,9 @@ export const getDOMMetrics = (
span.style.width = "1px";
span.style.height = "1px";
container.appendChild(span);
let baseline = span.offsetTop + span.offsetHeight;
const baseline = span.offsetTop + span.offsetHeight;
const height = container.offsetHeight;
if (isSafari) {
// In Safari sometimes DOM height could be less than canvas height due to
// which text could go out of the bounding box hence shifting the baseline
// to make sure text is rendered correctly
if (canvasHeight > height) {
baseline += canvasHeight - height;
}
// In Safari sometimes DOM height could be more than canvas height due to
// which text could go out of the bounding box hence shifting the baseline
// to make sure text is rendered correctly
if (height > canvasHeight) {
baseline -= height - canvasHeight;
}
}
document.body.removeChild(container);
return { baseline, height };
};

@ -35,8 +35,6 @@ import {
getMaxContainerHeight,
getMaxContainerWidth,
computeContainerDimensionForBoundText,
getDOMMetrics,
splitIntoLines,
} from "./textElement";
import {
actionDecreaseFontSize,
@ -46,6 +44,7 @@ import { actionZoomIn, actionZoomOut } from "../actions/actionCanvas";
import App from "../components/App";
import { LinearElementEditor } from "./linearElementEditor";
import { parseClipboard } from "../clipboard";
import { splitIntoLines } from "./textElement";
const getTransform = (
width: number,
@ -273,16 +272,13 @@ export const textWysiwyg = ({
} else {
textElementWidth += 0.5;
}
const { height: domHeight } = getDOMMetrics(
updatedTextElement.text,
getFontString(updatedTextElement),
updatedTextElement.lineHeight,
);
let lineHeight = element.lineHeight;
if (isSafari && domHeight > textElementHeight) {
lineHeight = (Math.floor(element.lineHeight * element.fontSize) /
element.fontSize) as ExcalidrawTextElement["lineHeight"];
if (isSafari) {
//@ts-ignore
lineHeight = `${
element.height / splitIntoLines(element.text).length
}px`;
}
// Make sure text editor height doesn't go beyond viewport

@ -34,6 +34,7 @@ import { AppState, BinaryFiles, Zoom } from "../types";
import { getDefaultAppState } from "../appState";
import {
BOUND_TEXT_PADDING,
isSafari,
MAX_DECIMALS_FOR_SVG_EXPORT,
MIME_TYPES,
SVG_NS,
@ -285,10 +286,13 @@ const drawElementOnCanvas = (
: element.textAlign === "right"
? element.width
: 0;
const lineHeightPx = getLineHeightInPx(
let lineHeightPx = getLineHeightInPx(
element.fontSize,
element.lineHeight,
);
if (isSafari) {
lineHeightPx = element.height / lines.length;
}
const verticalOffset = element.height - element.baseline;
for (let index = 0; index < lines.length; index++) {
context.fillText(

Loading…
Cancel
Save