|
|
|
@ -11,7 +11,7 @@ import {
|
|
|
|
|
isBoundToContainer,
|
|
|
|
|
isTextElement,
|
|
|
|
|
} from "./typeChecks";
|
|
|
|
|
import { CLASSES, isSafari, VERTICAL_ALIGN } from "../constants";
|
|
|
|
|
import { CLASSES, isSafari } from "../constants";
|
|
|
|
|
import {
|
|
|
|
|
ExcalidrawElement,
|
|
|
|
|
ExcalidrawLinearElement,
|
|
|
|
@ -23,12 +23,10 @@ import { AppState } from "../types";
|
|
|
|
|
import { mutateElement } from "./mutateElement";
|
|
|
|
|
import {
|
|
|
|
|
getBoundTextElementId,
|
|
|
|
|
getContainerCoords,
|
|
|
|
|
getContainerDims,
|
|
|
|
|
getContainerElement,
|
|
|
|
|
getTextElementAngle,
|
|
|
|
|
getTextWidth,
|
|
|
|
|
measureText,
|
|
|
|
|
normalizeText,
|
|
|
|
|
redrawTextBoundingBox,
|
|
|
|
|
wrapText,
|
|
|
|
@ -36,6 +34,7 @@ import {
|
|
|
|
|
getBoundTextMaxWidth,
|
|
|
|
|
computeContainerDimensionForBoundText,
|
|
|
|
|
detectLineHeight,
|
|
|
|
|
computeBoundTextPosition,
|
|
|
|
|
} from "./textElement";
|
|
|
|
|
import {
|
|
|
|
|
actionDecreaseFontSize,
|
|
|
|
@ -162,7 +161,7 @@ export const textWysiwyg = ({
|
|
|
|
|
let textElementWidth = updatedTextElement.width;
|
|
|
|
|
// Set to element height by default since that's
|
|
|
|
|
// what is going to be used for unbounded text
|
|
|
|
|
let textElementHeight = updatedTextElement.height;
|
|
|
|
|
const textElementHeight = updatedTextElement.height;
|
|
|
|
|
|
|
|
|
|
if (container && updatedTextElement.containerId) {
|
|
|
|
|
if (isArrowElement(container)) {
|
|
|
|
@ -179,15 +178,6 @@ export const textWysiwyg = ({
|
|
|
|
|
editable,
|
|
|
|
|
);
|
|
|
|
|
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));
|
|
|
|
|
if (editorHeight > 0) {
|
|
|
|
|
textElementHeight = editorHeight;
|
|
|
|
|
}
|
|
|
|
|
if (propertiesUpdated) {
|
|
|
|
|
// update height of the editor after properties updated
|
|
|
|
|
textElementHeight = updatedTextElement.height;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let originalContainerData;
|
|
|
|
|
if (propertiesUpdated) {
|
|
|
|
@ -232,22 +222,12 @@ export const textWysiwyg = ({
|
|
|
|
|
container.type,
|
|
|
|
|
);
|
|
|
|
|
mutateElement(container, { height: targetContainerHeight });
|
|
|
|
|
}
|
|
|
|
|
// Start pushing text upward until a diff of 30px (padding)
|
|
|
|
|
// is reached
|
|
|
|
|
else {
|
|
|
|
|
const containerCoords = getContainerCoords(container);
|
|
|
|
|
|
|
|
|
|
// 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);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
const { y } = computeBoundTextPosition(
|
|
|
|
|
container,
|
|
|
|
|
updatedTextElement as ExcalidrawTextElementWithContainer,
|
|
|
|
|
);
|
|
|
|
|
coordY = y;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const [viewportX, viewportY] = getViewportCoords(coordX, coordY);
|
|
|
|
@ -388,25 +368,6 @@ export const textWysiwyg = ({
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
editable.oninput = () => {
|
|
|
|
|
const updatedTextElement = Scene.getScene(element)?.getElement(
|
|
|
|
|
id,
|
|
|
|
|
) as ExcalidrawTextElement;
|
|
|
|
|
const font = getFontString(updatedTextElement);
|
|
|
|
|
if (isBoundToContainer(element)) {
|
|
|
|
|
const container = getContainerElement(element);
|
|
|
|
|
const wrappedText = wrapText(
|
|
|
|
|
normalizeText(editable.value),
|
|
|
|
|
font,
|
|
|
|
|
getBoundTextMaxWidth(container!),
|
|
|
|
|
);
|
|
|
|
|
const { width, height } = measureText(
|
|
|
|
|
wrappedText,
|
|
|
|
|
font,
|
|
|
|
|
updatedTextElement.lineHeight,
|
|
|
|
|
);
|
|
|
|
|
editable.style.width = `${width}px`;
|
|
|
|
|
editable.style.height = `${height}px`;
|
|
|
|
|
}
|
|
|
|
|
onChange(normalizeText(editable.value));
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|