diff --git a/docs/shortcuts.md b/docs/shortcuts.md index 19894b1f..4e7647a0 100644 --- a/docs/shortcuts.md +++ b/docs/shortcuts.md @@ -22,17 +22,18 @@ ### Editor -| Function | Mac | Other | -| -------------- | :--: | :----------------: | -| Copy | ⌘C | `Ctrl + C` | -| Paste | ⌘V | `Ctrl + V` | -| Copy styles | ⇧⌘V | `Ctrl + Shift + V` | -| Paste styles | ⇧⌘C | `Ctrl + Shift + C` | -| Delete | ⌫ | `Del` | -| Send to back | ⌥⌘\[ | `Ctrl + Shift + [` | -| Bring to front | ⌥⌘\] | `Ctrl + Shift + ]` | -| Send backwards | ⌘\[ | `Ctrl + [` | -| Bring forward | ⌘\] | `Ctrl + ]` | +| Function | Mac | Other | +| ------------------------ | :--: | :----------------: | +| Copy | ⌘C | `Ctrl + C` | +| Paste | ⌘V | `Ctrl + V` | +| Copy to clipboard as PNG | ⇧⌥C | `Alt + Shift + C` | +| Copy styles | ⇧⌘V | `Ctrl + Shift + V` | +| Paste styles | ⇧⌘C | `Ctrl + Shift + C` | +| Delete | ⌫ | `Del` | +| Send to back | ⌥⌘\[ | `Ctrl + Shift + [` | +| Bring to front | ⌥⌘\] | `Ctrl + Shift + ]` | +| Send backwards | ⌘\[ | `Ctrl + [` | +| Bring forward | ⌘\] | `Ctrl + ]` | ### View diff --git a/src/components/App.tsx b/src/components/App.tsx index a8eaae76..11e6e6fb 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -38,6 +38,7 @@ import { loadFromBlob, SOCKET_SERVER, SocketUpdateDataSource, + exportCanvas, } from "../data"; import { restore } from "../data/restore"; @@ -72,7 +73,11 @@ import { ActionResult } from "../actions/types"; import { getDefaultAppState } from "../appState"; import { t, getLanguage } from "../i18n"; -import { copyToAppClipboard, getClipboardContent } from "../clipboard"; +import { + copyToAppClipboard, + getClipboardContent, + probablySupportsClipboardBlob, +} from "../clipboard"; import { normalizeScroll } from "../scene"; import { getCenter, getDistance } from "../gesture"; import { createUndoAction, createRedoAction } from "../actions/actionHistory"; @@ -582,6 +587,12 @@ export class App extends React.Component { return; } + if (event.code === "KeyC" && event.altKey && event.shiftKey) { + this.copyToClipboardAsPng(); + event.preventDefault(); + return; + } + if (this.actionManager.handleKeyDown(event)) { return; } @@ -643,6 +654,17 @@ export class App extends React.Component { copyToAppClipboard(elements, this.state); }; + private copyToClipboardAsPng = () => { + const selectedElements = getSelectedElements(elements, this.state); + exportCanvas( + "clipboard", + selectedElements.length ? selectedElements : elements, + this.state, + this.canvas!, + this.state, + ); + }; + private pasteFromClipboard = async (event: ClipboardEvent | null) => { // #686 const target = document.activeElement; @@ -817,6 +839,11 @@ export class App extends React.Component { label: t("labels.paste"), action: () => this.pasteFromClipboard(null), }, + probablySupportsClipboardBlob && + elements.length > 0 && { + label: t("labels.copyAsPng"), + action: this.copyToClipboardAsPng, + }, ...this.actionManager.getContextMenuItems(action => this.canvasOnlyActions.includes(action.name), ), @@ -841,6 +868,10 @@ export class App extends React.Component { label: t("labels.paste"), action: () => this.pasteFromClipboard(null), }, + probablySupportsClipboardBlob && { + label: t("labels.copyAsPng"), + action: this.copyToClipboardAsPng, + }, ...this.actionManager.getContextMenuItems( action => !this.canvasOnlyActions.includes(action.name), ), diff --git a/src/locales/en.json b/src/locales/en.json index 6005df63..5fcb6e9c 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -3,6 +3,7 @@ "paste": "Paste", "selectAll": "Select All", "copy": "Copy", + "copyAsPng": "Copy to clipboard as PNG", "bringForward": "Bring Forward", "sendToBack": "Send To Back", "bringToFront": "Bring To Front", diff --git a/src/locales/no.json b/src/locales/no.json index 66c995a2..44061e61 100644 --- a/src/locales/no.json +++ b/src/locales/no.json @@ -3,6 +3,7 @@ "paste": "Lim inn", "selectAll": "Velg alt", "copy": "Kopier", + "copyAsPng": "Kopier til PNG", "bringForward": "Flytt framover", "sendToBack": "Flytt bakover", "bringToFront": "Flytt forrest",