support export canvas to clipboard (#232)

src/components/panels/PanelExport.tsx

@@ -1,17 +1,35 @@
 import React from "react";
 import { EditableText } from "../EditableText";
 import { Panel } from "../Panel";
+import { ExportType } from "../../scene/types";
+
+import "./panelExport.scss";
 
 interface PanelExportProps {
   projectName: string;
   onProjectNameChange: (name: string) => void;
-  onExportAsPNG: React.MouseEventHandler;
+  onExportCanvas: (type: ExportType) => void;
   exportBackground: boolean;
   onExportBackgroundChange: (val: boolean) => void;
   onSaveScene: React.MouseEventHandler;
   onLoadScene: React.MouseEventHandler;
 }
 
+// fa-clipboard
+const ClipboardIcon = () => (
+  <svg viewBox="0 0 384 512">
+    <path
+      fill="currentColor"
+      d="M384 112v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h80c0-35.29 28.71-64 64-64s64 28.71 64 64h80c26.51 0 48 21.49 48 48zM192 40c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24m96 114v-20a6 6 0 0 0-6-6H102a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h180a6 6 0 0 0 6-6z"
+    ></path>
+  </svg>
+);
+
+const probablySupportsClipboard =
+  "toBlob" in HTMLCanvasElement.prototype &&
+  "write" in navigator.clipboard &&
+  "ClipboardItem" in window;
+
 export const PanelExport: React.FC<PanelExportProps> = ({
   projectName,
   exportBackground,
@@ -19,7 +37,7 @@ export const PanelExport: React.FC<PanelExportProps> = ({
   onExportBackgroundChange,
   onSaveScene,
   onLoadScene,
-  onExportAsPNG
+  onExportCanvas
 }) => {
   return (
     <Panel title="Export">
@@ -32,7 +50,23 @@ export const PanelExport: React.FC<PanelExportProps> = ({
           />
         )}
         <h5>Image</h5>
-        <button onClick={onExportAsPNG}>Export to png</button>
+        <div className="panelExport-imageButtons">
+          <button
+            className="panelExport-exportToPngButton"
+            onClick={() => onExportCanvas("png")}
+          >
+            Export to PNG
+          </button>
+          {probablySupportsClipboard && (
+            <button
+              className="panelExport-exportToClipboardButton"
+              onClick={() => onExportCanvas("clipboard")}
+              title="Copy to clipboard (experimental)"
+            >
+              <ClipboardIcon />
+            </button>
+          )}
+        </div>
         <label>
           <input
             type="checkbox"

src/components/panels/panelExport.scss

@@ -0,0 +1,16 @@
+.panelExport-imageButtons {
+  display: flex;
+}
+
+.panelExport-exportToPngButton {
+  flex: 1 1 auto;
+}
+
+.panelExport-exportToClipboardButton {
+  margin-left: 10px;
+  padding: 0 15px;
+
+  svg {
+    width: 15px;
+  }
+}