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

fix: use canvas height when editing bound text

Browse Source
This commit is contained in:
Aakansha Doshi 2023-02-27 14:19:56 +05:30
parent 0e95e2b386
commit 60deddb0e2
2 changed files with 21 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/element/textElement.ts
View File

@ -226,7 +226,7 @@ export const handleBindTextResize = (
} }
}; };
const computeBoundTextPosition = ( export const computeBoundTextPosition = (
container: ExcalidrawElement, container: ExcalidrawElement,
boundTextElement: ExcalidrawTextElementWithContainer, boundTextElement: ExcalidrawTextElementWithContainer,
) => { ) => {
@ -236,6 +236,12 @@ const computeBoundTextPosition = (
let x; let x;
let y; let y;
if (isArrowElement(container)) {
return LinearElementEditor.getBoundTextElementPosition(
container,
boundTextElement,
);
}
if (boundTextElement.verticalAlign === VERTICAL_ALIGN.TOP) { if (boundTextElement.verticalAlign === VERTICAL_ALIGN.TOP) {
y = containerCoords.y; y = containerCoords.y;
} else if (boundTextElement.verticalAlign === VERTICAL_ALIGN.BOTTOM) { } else if (boundTextElement.verticalAlign === VERTICAL_ALIGN.BOTTOM) {

41
src/element/textWysiwyg.tsx
View File

@ -11,7 +11,7 @@ import {
isBoundToContainer, isBoundToContainer,
isTextElement, isTextElement,
} from "./typeChecks"; } from "./typeChecks";
import { CLASSES, isFirefox, isSafari, VERTICAL_ALIGN } from "../constants"; import { CLASSES, isFirefox, isSafari } from "../constants";
import { import {
ExcalidrawElement, ExcalidrawElement,
ExcalidrawLinearElement, ExcalidrawLinearElement,
@ -24,7 +24,6 @@ import { mutateElement } from "./mutateElement";
import { import {
getApproxLineHeight, getApproxLineHeight,
getBoundTextElementId, getBoundTextElementId,
getContainerCoords,
getContainerDims, getContainerDims,
getContainerElement, getContainerElement,
getTextElementAngle, getTextElementAngle,
@ -35,6 +34,8 @@ import {
wrapText, wrapText,
getMaxContainerHeight, getMaxContainerHeight,
getMaxContainerWidth, getMaxContainerWidth,
computeBoundTextPosition,
getTextHeight,
} from "./textElement"; } from "./textElement";
import { import {
actionDecreaseFontSize, actionDecreaseFontSize,
@ -180,15 +181,11 @@ export const textWysiwyg = ({
editable, editable,
); );
const containerDims = getContainerDims(container); const containerDims = getContainerDims(container);
// using editor.style.height to get the accurate height of text editor
const editorHeight = Number(editable.style.height.slice(0, -2)); textElementHeight = getTextHeight(
if (editorHeight > 0) { updatedTextElement.text,
textElementHeight = editorHeight; getFontString(updatedTextElement),
} );
if (propertiesUpdated) {
// update height of the editor after properties updated
textElementHeight = updatedTextElement.height;
}
let originalContainerData; let originalContainerData;
if (propertiesUpdated) { if (propertiesUpdated) {
@ -229,22 +226,12 @@ export const textWysiwyg = ({
approxLineHeight, approxLineHeight,
); );
mutateElement(container, { height: containerDims.height - diff }); mutateElement(container, { height: containerDims.height - diff });
} } else {
// Start pushing text upward until a diff of 30px (padding) const { y } = computeBoundTextPosition(
// is reached container,
else { updatedTextElement as ExcalidrawTextElementWithContainer,
const containerCoords = getContainerCoords(container); );
coordY = y;
// vertically center align the text
if (verticalAlign === VERTICAL_ALIGN.MIDDLE) {
if (!isArrowElement(container)) {
coordY =
containerCoords.y + maxHeight / 2 - textElementHeight / 2;
}
}
if (verticalAlign === VERTICAL_ALIGN.BOTTOM) {
coordY = containerCoords.y + (maxHeight - textElementHeight);
}
} }
} }
const [viewportX, viewportY] = getViewportCoords(coordX, coordY); const [viewportX, viewportY] = getViewportCoords(coordX, coordY);