mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
Add duplicate button for mobile view (#1146)
* Add a icon for dulplication * Add PanelComponent for duplication * Add duplicate button for mobile * Add styles for layout action buttons * Add a translation for 'Actions' * Show left action buttons only for desktop * Add duplicate button at the bottom of mobile It is provided depending on whether or not it is `multiElement` to maintain space between buttons.
This commit is contained in:
parent
e9f80d7c31
commit
86d0da5204
6 changed files with 49 additions and 7 deletions
49
src/actions/actionDuplicateSelection.tsx
Normal file
49
src/actions/actionDuplicateSelection.tsx
Normal file
|
@ -0,0 +1,49 @@
|
|||
import React from "react";
|
||||
import { KEYS } from "../keys";
|
||||
import { register } from "./register";
|
||||
import { ExcalidrawElement } from "../element/types";
|
||||
import { duplicateElement } from "../element";
|
||||
import { isSomeElementSelected } from "../scene";
|
||||
import { ToolButton } from "../components/ToolButton";
|
||||
import { clone } from "../components/icons";
|
||||
import { t } from "../i18n";
|
||||
import { getShortcutKey } from "../utils";
|
||||
|
||||
export const actionDuplicateSelection = register({
|
||||
name: "duplicateSelection",
|
||||
perform: (elements, appState) => {
|
||||
return {
|
||||
appState,
|
||||
elements: elements.reduce(
|
||||
(acc: Array<ExcalidrawElement>, element: ExcalidrawElement) => {
|
||||
if (appState.selectedElementIds[element.id]) {
|
||||
const newElement = duplicateElement(element, {
|
||||
x: element.x + 10,
|
||||
y: element.y + 10,
|
||||
});
|
||||
appState.selectedElementIds[newElement.id] = true;
|
||||
delete appState.selectedElementIds[element.id];
|
||||
return acc.concat([element, newElement]);
|
||||
}
|
||||
return acc.concat(element);
|
||||
},
|
||||
[],
|
||||
),
|
||||
commitToHistory: true,
|
||||
};
|
||||
},
|
||||
contextItemLabel: "labels.duplicateSelection",
|
||||
keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === "d",
|
||||
PanelComponent: ({ elements, appState, updateData }) => (
|
||||
<ToolButton
|
||||
type="button"
|
||||
icon={clone}
|
||||
title={`${t("labels.duplicateSelection")} ${getShortcutKey(
|
||||
"CtrlOrCmd+D",
|
||||
)}`}
|
||||
aria-label={t("labels.duplicateSelection")}
|
||||
onClick={() => updateData(null)}
|
||||
visible={isSomeElementSelected(elements, appState)}
|
||||
/>
|
||||
),
|
||||
});
|
Loading…
Add table
Add a link
Reference in a new issue