feat: Custom actions and shortcuts

This commit is contained in:
Daniel J. Geiger 2023-01-06 13:34:39 -06:00
parent 0f11f7da15
commit 8e5d376b49
14 changed files with 452 additions and 98 deletions

View file

@ -36,10 +36,12 @@ export const SelectedShapeActions = ({
appState,
elements,
renderAction,
getCustomActions,
}: {
appState: AppState;
elements: readonly ExcalidrawElement[];
renderAction: ActionManager["renderAction"];
getCustomActions: ActionManager["getCustomActions"];
}) => {
const targetElements = getTargetElements(
getNonDeletedElements(elements),
@ -92,6 +94,15 @@ export const SelectedShapeActions = ({
{showChangeBackgroundIcons && (
<div>{renderAction("changeBackgroundColor")}</div>
)}
{getCustomActions().map((action) => {
if (
action.panelComponentPredicate &&
action.panelComponentPredicate(targetElements, appState)
) {
return renderAction(action.name);
}
return null;
})}
{showFillIcons && renderAction("changeFillStyle")}
{(hasStrokeWidth(appState.activeTool.type) ||
@ -209,12 +220,14 @@ export const ShapesSwitcher = ({
setAppState,
onImageAction,
appState,
onContextMenu,
}: {
canvas: HTMLCanvasElement | null;
activeTool: AppState["activeTool"];
setAppState: React.Component<any, AppState>["setState"];
onImageAction: (data: { pointerType: PointerType | null }) => void;
appState: AppState;
onContextMenu?: (event: React.MouseEvent, source: string) => void;
}) => (
<>
{SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {
@ -264,6 +277,9 @@ export const ShapesSwitcher = ({
onImageAction({ pointerType });
}
}}
onContextMenu={(event, source) => {
onContextMenu && onContextMenu(event, source);
}}
/>
);
})}