feat: add container to multiple text elements (#6428)

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Chinmay Mhatre 2023-04-07 19:20:36 +05:30 committed by GitHub
parent d61b3cf83d
commit 68692b9d4c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -23,6 +23,7 @@ import {
ExcalidrawTextElement, ExcalidrawTextElement,
} from "../element/types"; } from "../element/types";
import { getSelectedElements } from "../scene"; import { getSelectedElements } from "../scene";
import { AppState } from "../types";
import { getFontString } from "../utils"; import { getFontString } from "../utils";
import { register } from "./register"; import { register } from "./register";
@ -185,16 +186,19 @@ export const actionCreateContainerFromText = register({
trackEvent: { category: "element" }, trackEvent: { category: "element" },
predicate: (elements, appState) => { predicate: (elements, appState) => {
const selectedElements = getSelectedElements(elements, appState); const selectedElements = getSelectedElements(elements, appState);
return selectedElements.length === 1 && isTextElement(selectedElements[0]); const areTextElements = selectedElements.every((el) => isTextElement(el));
return selectedElements.length > 0 && areTextElements;
}, },
perform: (elements, appState) => { perform: (elements, appState) => {
const selectedElements = getSelectedElements( const selectedElements = getSelectedElements(
getNonDeletedElements(elements), getNonDeletedElements(elements),
appState, appState,
); );
const updatedElements = elements.slice(); let updatedElements: readonly ExcalidrawElement[] = elements.slice();
if (selectedElements.length === 1 && isTextElement(selectedElements[0])) { const containerIds: AppState["selectedElementIds"] = {};
const textElement = selectedElements[0];
for (const textElement of selectedElements) {
if (isTextElement(textElement)) {
const container = newElement({ const container = newElement({
type: "rectangle", type: "rectangle",
backgroundColor: appState.currentItemBackgroundColor, backgroundColor: appState.currentItemBackgroundColor,
@ -255,37 +259,37 @@ export const actionCreateContainerFromText = register({
} }
if (startBinding || endBinding) { if (startBinding || endBinding) {
mutateElement(ele, { startBinding, endBinding }); mutateElement(ele, { startBinding, endBinding }, false);
} }
}); });
} }
mutateElement(textElement, { mutateElement(
textElement,
{
containerId: container.id, containerId: container.id,
verticalAlign: VERTICAL_ALIGN.MIDDLE, verticalAlign: VERTICAL_ALIGN.MIDDLE,
boundElements: null, boundElements: null,
}); },
false,
);
redrawTextBoundingBox(textElement, container); redrawTextBoundingBox(textElement, container);
return { updatedElements = pushContainerBelowText(
elements: pushContainerBelowText( [...updatedElements, container],
[...elements, container],
container, container,
textElement, textElement,
), );
appState: { containerIds[container.id] = true;
...appState,
selectedElementIds: {
[container.id]: true,
[textElement.id]: false,
},
},
commitToHistory: true,
};
} }
}
return { return {
elements: updatedElements, elements: updatedElements,
appState, appState: {
...appState,
selectedElementIds: containerIds,
},
commitToHistory: true, commitToHistory: true,
}; };
}, },