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

* 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>

docs/shortcuts.md

@@ -23,9 +23,10 @@
 ### Editor
 
 | 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`        |

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<any, AppState> {
       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<any, AppState> {
     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<any, AppState> {
                       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<any, AppState> {
                     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),
                   ),

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",

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",