sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add copy to PNG option on context menu (#941)

Browse Source 
* Add copy to PNG option on context menu

* lint & refactor & fixes

* add keybinding

* swap keybinding

* fix docs

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Christian Alfoni 2020-03-14 22:53:18 +01:00 committed by GitHub
parent e19088f214
commit dbfc8bee57
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 46 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/shortcuts.md
View File

@ -22,17 +22,18 @@
### Editor ### Editor
| Function | Mac | Other | | Function | Mac | Other |
| -------------- | :--: | :----------------: | | ------------------------ | :--: | :----------------: |
| Copy | ⌘C | `Ctrl + C` | | Copy | ⌘C | `Ctrl + C` |
| Paste | ⌘V | `Ctrl + V` | | Paste | ⌘V | `Ctrl + V` |
| Copy styles | ⇧⌘V | `Ctrl + Shift + V` | | Copy to clipboard as PNG | ⇧⌥C | `Alt + Shift + C` |
| Paste styles | ⇧⌘C | `Ctrl + Shift + C` | | Copy styles | ⇧⌘V | `Ctrl + Shift + V` |
| Delete | ⌫ | `Del` | | Paste styles | ⇧⌘C | `Ctrl + Shift + C` |
| Send to back | ⌥⌘\[ | `Ctrl + Shift + [` | | Delete | ⌫ | `Del` |
| Bring to front | ⌥⌘\] | `Ctrl + Shift + ]` | | Send to back | ⌥⌘\[ | `Ctrl + Shift + [` |
| Send backwards | ⌘\[ | `Ctrl + [` | | Bring to front | ⌥⌘\] | `Ctrl + Shift + ]` |
| Bring forward | ⌘\] | `Ctrl + ]` | | Send backwards | ⌘\[ | `Ctrl + [` |
| Bring forward | ⌘\] | `Ctrl + ]` |
### View ### View

33
src/components/App.tsx
View File

@ -38,6 +38,7 @@ import {
loadFromBlob, loadFromBlob,
SOCKET_SERVER, SOCKET_SERVER,
SocketUpdateDataSource, SocketUpdateDataSource,
exportCanvas,
} from "../data"; } from "../data";
import { restore } from "../data/restore"; import { restore } from "../data/restore";
@ -72,7 +73,11 @@ import { ActionResult } from "../actions/types";
import { getDefaultAppState } from "../appState"; import { getDefaultAppState } from "../appState";
import { t, getLanguage } from "../i18n"; import { t, getLanguage } from "../i18n";
import { copyToAppClipboard, getClipboardContent } from "../clipboard"; import {
copyToAppClipboard,
getClipboardContent,
probablySupportsClipboardBlob,
} from "../clipboard";
import { normalizeScroll } from "../scene"; import { normalizeScroll } from "../scene";
import { getCenter, getDistance } from "../gesture"; import { getCenter, getDistance } from "../gesture";
import { createUndoAction, createRedoAction } from "../actions/actionHistory"; import { createUndoAction, createRedoAction } from "../actions/actionHistory";
@ -582,6 +587,12 @@ export class App extends React.Component<any, AppState> {
return; return;
} }
if (event.code === "KeyC" && event.altKey && event.shiftKey) {
this.copyToClipboardAsPng();
event.preventDefault();
return;
}
if (this.actionManager.handleKeyDown(event)) { if (this.actionManager.handleKeyDown(event)) {
return; return;
} }
@ -643,6 +654,17 @@ export class App extends React.Component<any, AppState> {
copyToAppClipboard(elements, this.state); 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) => { private pasteFromClipboard = async (event: ClipboardEvent | null) => {
// #686 // #686
const target = document.activeElement; const target = document.activeElement;
@ -817,6 +839,11 @@ export class App extends React.Component<any, AppState> {
label: t("labels.paste"), label: t("labels.paste"),
action: () => this.pasteFromClipboard(null), action: () => this.pasteFromClipboard(null),
}, },
probablySupportsClipboardBlob &&
elements.length > 0 && {
label: t("labels.copyAsPng"),
action: this.copyToClipboardAsPng,
},
...this.actionManager.getContextMenuItems(action => ...this.actionManager.getContextMenuItems(action =>
this.canvasOnlyActions.includes(action.name), this.canvasOnlyActions.includes(action.name),
), ),
@ -841,6 +868,10 @@ export class App extends React.Component<any, AppState> {
label: t("labels.paste"), label: t("labels.paste"),
action: () => this.pasteFromClipboard(null), action: () => this.pasteFromClipboard(null),
}, },
probablySupportsClipboardBlob && {
label: t("labels.copyAsPng"),
action: this.copyToClipboardAsPng,
},
...this.actionManager.getContextMenuItems( ...this.actionManager.getContextMenuItems(
action => !this.canvasOnlyActions.includes(action.name), action => !this.canvasOnlyActions.includes(action.name),
), ),

1
src/locales/en.json
View File

@ -3,6 +3,7 @@
"paste": "Paste", "paste": "Paste",
"selectAll": "Select All", "selectAll": "Select All",
"copy": "Copy", "copy": "Copy",
"copyAsPng": "Copy to clipboard as PNG",
"bringForward": "Bring Forward", "bringForward": "Bring Forward",
"sendToBack": "Send To Back", "sendToBack": "Send To Back",
"bringToFront": "Bring To Front", "bringToFront": "Bring To Front",

1
src/locales/no.json
View File

@ -3,6 +3,7 @@
"paste": "Lim inn", "paste": "Lim inn",
"selectAll": "Velg alt", "selectAll": "Velg alt",
"copy": "Kopier", "copy": "Kopier",
"copyAsPng": "Kopier til PNG",
"bringForward": "Flytt framover", "bringForward": "Flytt framover",
"sendToBack": "Flytt bakover", "sendToBack": "Flytt bakover",
"bringToFront": "Flytt forrest", "bringToFront": "Flytt forrest",