foss/excalidraw
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix offset in editor

Browse Source
This commit is contained in:
Aakansha Doshi 2023-06-07 15:27:39 +05:30
parent 65e849804d
commit faec098e30
3 changed files with 38 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/element/textElement.ts
View File

@ -977,3 +977,22 @@ export const getDefaultLineHeight = (fontFamily: FontFamilyValues) => {
}
return DEFAULT_LINE_HEIGHT[DEFAULT_FONT_FAMILY];
};
export const getSpacesOffsetForLine = (
element: ExcalidrawTextElement,
line: string,
font: FontString,
) => {
const container = getContainerElement(element);
const trailingSpacesWidth =
getLineWidth(line, font) - getLineWidth(line.trimEnd(), font);
const maxWidth = container ? getBoundTextMaxWidth(container) : element.width;
const availableWidth = maxWidth - getLineWidth(line.trimEnd(), font);
let spacesOffset = 0;
if (element.textAlign === TEXT_ALIGN.CENTER) {
spacesOffset = -Math.min(trailingSpacesWidth / 2, availableWidth / 2);
} else if (element.textAlign === TEXT_ALIGN.RIGHT) {
spacesOffset = -Math.min(availableWidth, trailingSpacesWidth);
}
return spacesOffset;
};

15
src/element/textWysiwyg.tsx
View File

@ -11,7 +11,7 @@ import {
isBoundToContainer,
isTextElement,
} from "./typeChecks";
import { CLASSES, isSafari } from "../constants";
import { CLASSES, TEXT_ALIGN, isSafari } from "../constants";
import {
ExcalidrawElement,
ExcalidrawLinearElement,
@ -196,6 +196,8 @@ export const textWysiwyg = ({
}
maxWidth = getBoundTextMaxWidth(container);
textElementWidth = Math.min(textElementWidth, maxWidth);
maxHeight = getBoundTextMaxHeight(
container,
updatedTextElement as ExcalidrawTextElementWithContainer,
@ -230,7 +232,16 @@ export const textWysiwyg = ({
coordY = y;
}
}
const [viewportX, viewportY] = getViewportCoords(coordX, coordY);
let spacesOffset = 0;
if (updatedTextElement.textAlign === TEXT_ALIGN.CENTER) {
spacesOffset = Math.max(0, updatedTextElement.width / 2 - maxWidth / 2);
} else if (updatedTextElement.textAlign === TEXT_ALIGN.RIGHT) {
spacesOffset = Math.max(0, updatedTextElement.width - maxWidth);
}
const [viewportX, viewportY] = getViewportCoords(
coordX + spacesOffset,
coordY,
);
const initialSelectionStart = editable.selectionStart;
const initialSelectionEnd = editable.selectionEnd;
const initialLength = editable.value.length;

22
src/renderer/renderElement.ts
View File

@ -48,6 +48,7 @@ import {
getBoundTextMaxHeight,
getBoundTextMaxWidth,
getLineWidth,
getSpacesOffsetForLine,
} from "../element/textElement";
import { LinearElementEditor } from "../element/linearElementEditor";
@ -338,27 +339,14 @@ const drawElementOnCanvas = (
element.fontSize,
element.lineHeight,
);
const container = getContainerElement(element);
const verticalOffset = element.height - element.baseline;
for (let index = 0; index < lines.length; index++) {
const trailingSpacesWidth =
getLineWidth(lines[index], font) -
getLineWidth(lines[index].trimEnd(), font);
const maxWidth = container
? getBoundTextMaxWidth(container)
: element.width;
const availableWidth =
maxWidth - getLineWidth(lines[index].trimEnd(), font);
let spacesOffset = 0;
if (element.textAlign === TEXT_ALIGN.CENTER) {
spacesOffset = -Math.min(
trailingSpacesWidth / 2,
availableWidth / 2,
const spacesOffset = getSpacesOffsetForLine(
element,
lines[index],
font,
);
} else if (element.textAlign === TEXT_ALIGN.RIGHT) {
spacesOffset = -Math.min(availableWidth, trailingSpacesWidth);
}
context.fillText(
lines[index].trimEnd(),
horizontalOffset + spacesOffset,