corkine/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw synced 2025-07-25 13:58:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: create new text with width (#8038)

Browse Source 
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
This commit is contained in:
Ryan Di
2024-05-28 21:53:52 +08:00
committed by GitHub
parent 4eb9463f26
commit 860308eb27
13 changed files with 178 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
packages/excalidraw/components/App.tsx
View File

@ -330,6 +330,7 @@ import {
getContainerElement,
getDefaultLineHeight,
getLineHeightInPx,
getMinTextElementWidth,
isMeasureTextSupported,
isValidTextContainer,
measureText,
@ -1696,6 +1697,7 @@ class App extends React.Component<AppProps, AppState> {
canvas={this.interactiveCanvas}
elementsMap={elementsMap}
visibleElements={visibleElements}
allElementsMap={allElementsMap}
selectedElements={selectedElements}
sceneNonce={sceneNonce}
selectionNonce={
@ -4718,6 +4720,7 @@ class App extends React.Component<AppProps, AppState> {
sceneY,
insertAtParentCenter = true,
container,
autoEdit = true,
}: {
/** X position to insert text at */
sceneX: number;
@ -4726,6 +4729,7 @@ class App extends React.Component<AppProps, AppState> {
/** whether to attempt to insert at element center if applicable */
insertAtParentCenter?: boolean;
container?: ExcalidrawTextContainer | null;
autoEdit?: boolean;
}) => {
let shouldBindToContainer = false;
@ -4858,13 +4862,16 @@ class App extends React.Component<AppProps, AppState> {
}
}
this.setState({
editingElement: element,
});
this.handleTextWysiwyg(element, {
isExistingElement: !!existingTextElement,
});
if (autoEdit || existingTextElement || container) {
this.handleTextWysiwyg(element, {
isExistingElement: !!existingTextElement,
});
} else {
this.setState({
draggingElement: element,
multiElement: null,
});
}
};
private handleCanvasDoubleClick = (
@ -5899,7 +5906,6 @@ class App extends React.Component<AppProps, AppState> {
if (this.state.activeTool.type === "text") {
this.handleTextOnPointerDown(event, pointerDownState);
return;
} else if (
this.state.activeTool.type === "arrow" ||
this.state.activeTool.type === "line"
@ -6020,6 +6026,7 @@ class App extends React.Component<AppProps, AppState> {
);
const clicklength =
event.timeStamp - (this.lastPointerDownEvent?.timeStamp ?? 0);
if (this.device.editor.isMobile && clicklength < 300) {
const hitElement = this.getElementAtPosition(
scenePointer.x,
@ -6693,6 +6700,7 @@ class App extends React.Component<AppProps, AppState> {
sceneY,
insertAtParentCenter: !event.altKey,
container,
autoEdit: false,
});
resetCursor(this.interactiveCanvas);
@ -8043,6 +8051,28 @@ class App extends React.Component<AppProps, AppState> {
return;
}
if (isTextElement(draggingElement)) {
const minWidth = getMinTextElementWidth(
getFontString({
fontSize: draggingElement.fontSize,
fontFamily: draggingElement.fontFamily,
}),
draggingElement.lineHeight,
);
if (draggingElement.width < minWidth) {
mutateElement(draggingElement, {
autoResize: true,
});
}
this.resetCursor();
this.handleTextWysiwyg(draggingElement, {
isExistingElement: true,
});
}
if (
activeTool.type !== "selection" &&
draggingElement &&
@ -9410,6 +9440,7 @@ class App extends React.Component<AppProps, AppState> {
distance(pointerDownState.origin.y, pointerCoords.y),
shouldMaintainAspectRatio(event),
shouldResizeFromCenter(event),
this.state.zoom.value,
);
} else {
let [gridX, gridY] = getGridPoint(
@ -9467,6 +9498,7 @@ class App extends React.Component<AppProps, AppState> {
? !shouldMaintainAspectRatio(event)
: shouldMaintainAspectRatio(event),
shouldResizeFromCenter(event),
this.state.zoom.value,
aspectRatio,
this.state.originSnapOffset,
);