github-forks
/
success
mirror of https://github.com/excalidraw/excalidraw.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: improve text weappin inside ellipse

Browse Source
aakansha-improve-text-wrap-ellipse
Aakansha Doshi 3 years ago
parent 933c6a2237
commit 873bab69e0
4 changed files with 86 additions and 29 deletions
Show Stats Download Patch File Download Diff File

1
src/components/App.tsx
Unescape Escape View File

@ -2399,7 +2399,6 @@ class App extends React.Component<AppProps, AppState> {
);
}
}
const element = existingTextElement
? existingTextElement
: newTextElement({

30
src/element/newElement.ts
Unescape Escape View File

@ -21,7 +21,12 @@ import { AppState } from "../types";
import { getElementAbsoluteCoords } from ".";
import { adjustXYWithRotation } from "../math";
import { getResizedElementAbsoluteCoords } from "./bounds";
import { getContainerElement, measureText, wrapText } from "./textElement";
import {
getContainerElement,
getContainerDims,
measureText,
wrapText,
} from "./textElement";
import { BOUND_TEXT_PADDING, VERTICAL_ALIGN } from "../constants";
type ElementConstructorOpts = MarkOptional<
@ -164,7 +169,9 @@ const getAdjustedDimensions = (
let maxWidth = null;
const container = getContainerElement(element);
if (container) {
maxWidth = container.width - BOUND_TEXT_PADDING * 2;
const containerDims = getContainerDims(container);
maxWidth = containerDims.width - BOUND_TEXT_PADDING * 2;
}
const {
width: nextWidth,
@ -224,16 +231,21 @@ const getAdjustedDimensions = (
// make sure container dimensions are set properly when
// text editor overflows beyond viewport dimensions
if (container) {
let height = container.height;
let width = container.width;
const containerDims = getContainerDims(container);
let { width, height } = containerDims;
if (nextHeight > height - BOUND_TEXT_PADDING * 2) {
height = nextHeight + BOUND_TEXT_PADDING * 2;
}
if (nextWidth > width - BOUND_TEXT_PADDING * 2) {
width = nextWidth + BOUND_TEXT_PADDING * 2;
}
if (height !== container.height || width !== container.width) {
mutateElement(container, { height, width });
if (height !== containerDims.height || width !== containerDims.height) {
const diffHeight = height - containerDims.height;
const diffWidth = width - containerDims.width;
mutateElement(container, {
height: container.height + diffHeight,
width: container.width + diffWidth,
});
}
}
return {
@ -259,7 +271,11 @@ export const updateTextElement = (
): ExcalidrawTextElement => {
const container = getContainerElement(element);
if (container) {
text = wrapText(text, getFontString(element), container.width);
text = wrapText(
text,
getFontString(element),
getContainerDims(container).width,
);
}
const dimensions = getAdjustedDimensions(element, text);
return newElementWith(element, {

59
src/element/textElement.ts
Unescape Escape View File

@ -16,16 +16,20 @@ export const redrawTextBoundingBox = (
element: ExcalidrawTextElement,
container: ExcalidrawElement | null,
) => {
const maxWidth = container
? container.width - BOUND_TEXT_PADDING * 2
let containerDims;
if (container) {
containerDims = getContainerDims(container);
}
const maxWidth = containerDims
? containerDims.width - BOUND_TEXT_PADDING * 2
: undefined;
let text = element.text;
if (container) {
if (containerDims) {
text = wrapText(
element.originalText,
getFontString(element),
container.width,
containerDims.width,
);
}
const metrics = measureText(
@ -37,18 +41,24 @@ export const redrawTextBoundingBox = (
let coordX = element.x;
// Resize container and vertically center align the text
if (container) {
let nextHeight = container.height;
coordX = container.x + BOUND_TEXT_PADDING;
const containerDims = getContainerDims(container);
const containerCoords = getBoundTextContainerCoords(container);
let nextHeight = containerDims.height;
coordX = containerCoords.x + BOUND_TEXT_PADDING;
if (element.verticalAlign === VERTICAL_ALIGN.TOP) {
coordY = container.y + BOUND_TEXT_PADDING;
coordY = containerCoords.y + BOUND_TEXT_PADDING;
} else if (element.verticalAlign === VERTICAL_ALIGN.BOTTOM) {
coordY =
container.y + container.height - metrics.height - BOUND_TEXT_PADDING;
containerCoords.y +
containerDims.height -
metrics.height -
BOUND_TEXT_PADDING;
} else {
coordY = container.y + container.height / 2 - metrics.height / 2;
if (metrics.height > container.height - BOUND_TEXT_PADDING * 2) {
coordY =
containerCoords.y + containerDims.height / 2 - metrics.height / 2;
if (metrics.height > containerDims.height - BOUND_TEXT_PADDING * 2) {
nextHeight = metrics.height + BOUND_TEXT_PADDING * 2;
coordY = container.y + nextHeight / 2 - metrics.height / 2;
coordY = containerCoords.y + nextHeight / 2 - metrics.height / 2;
}
}
mutateElement(container, { height: nextHeight });
@ -121,7 +131,7 @@ export const handleBindTextResize = (
text = wrapText(
textElement.originalText,
getFontString(textElement),
element.width,
getContainerDims(element).width,
);
}
@ -474,3 +484,28 @@ export const getContainerElement = (
}
return null;
};
export const getContainerDims = (element: ExcalidrawElement) => {
if (element.type === "ellipse") {
return {
width: Math.round((element.width / 2) * Math.sqrt(2)),
height: Math.round((element.height / 2) * Math.sqrt(2)),
};
}
return { width: element.width, height: element.height };
};
export const getBoundTextContainerCoords = (container: ExcalidrawElement) => {
if (container.type === "ellipse") {
const offsetX = (container.width / 2) * (1 - Math.sqrt(2) / 2);
const offsetY = (container.height / 2) * (1 - Math.sqrt(2) / 2);
return {
x: container.x + offsetX,
y: container.y + offsetY,
};
}
return {
x: container.x,
y: container.y,
};
};

25
src/element/textWysiwyg.tsx
Unescape Escape View File

@ -19,7 +19,9 @@ import {
getApproxLineHeight,
getBoundTextElementId,
getContainerElement,
getContainerDims,
wrapText,
getBoundTextContainerCoords,
} from "./textElement";
import {
actionDecreaseFontSize,
@ -126,26 +128,28 @@ export const textWysiwyg = ({
updatedElement,
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) {
height = editorHeight;
}
if (propertiesUpdated) {
originalContainerHeight = container.height;
originalContainerHeight = containerDims.height;
// update height of the editor after properties updated
height = updatedElement.height;
}
if (!originalContainerHeight) {
originalContainerHeight = container.height;
originalContainerHeight = containerDims.height;
}
maxWidth = container.width - BOUND_TEXT_PADDING * 2;
maxHeight = container.height - BOUND_TEXT_PADDING * 2;
maxWidth = containerDims.width - BOUND_TEXT_PADDING * 2;
maxHeight = containerDims.height - BOUND_TEXT_PADDING * 2;
width = maxWidth;
const boundTextCoords = getBoundTextContainerCoords(container);
// The coordinates of text box set a distance of
// 5px to preserve padding
coordX = container.x + BOUND_TEXT_PADDING;
coordX = boundTextCoords.x + BOUND_TEXT_PADDING;
// autogrow container height if text exceeds
if (height > maxHeight) {
const diff = Math.min(height - maxHeight, approxLineHeight);
@ -154,7 +158,7 @@ export const textWysiwyg = ({
} else if (
// autoshrink container height until original container height
// is reached when text is removed
container.height > originalContainerHeight &&
containerDims.height > originalContainerHeight &&
height < maxHeight
) {
const diff = Math.min(maxHeight - height, approxLineHeight);
@ -165,11 +169,14 @@ export const textWysiwyg = ({
else {
// vertically center align the text
if (verticalAlign === VERTICAL_ALIGN.MIDDLE) {
coordY = container.y + container.height / 2 - height / 2;
coordY = boundTextCoords.y + containerDims.height / 2 - height / 2;
}
if (verticalAlign === VERTICAL_ALIGN.BOTTOM) {
coordY =
container.y + container.height - height - BOUND_TEXT_PADDING;
boundTextCoords.y +
containerDims.height -
height -
BOUND_TEXT_PADDING;
}
}
}
@ -303,7 +310,7 @@ export const textWysiwyg = ({
const actualLineCount = wrapText(
editable.value,
font,
container!.width,
getContainerDims(container!).width,
).split("\n").length;
// This is browser behaviour when setting height to "auto"
// It sets the height needed for 2 lines even if actual

Write Preview
Loading…
Cancel
Save