feat: add container to multiple text elements (#6428)
Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
parent
d61b3cf83d
commit
68692b9d4c
@ -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,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user