diff --git a/src/components/panels/PanelExport.tsx b/src/components/panels/PanelExport.tsx index 81bee94c..8b924033 100644 --- a/src/components/panels/PanelExport.tsx +++ b/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 = () => ( + + + +); + +const probablySupportsClipboard = + "toBlob" in HTMLCanvasElement.prototype && + "write" in navigator.clipboard && + "ClipboardItem" in window; + export const PanelExport: React.FC = ({ projectName, exportBackground, @@ -19,7 +37,7 @@ export const PanelExport: React.FC = ({ onExportBackgroundChange, onSaveScene, onLoadScene, - onExportAsPNG + onExportCanvas }) => { return ( @@ -32,7 +50,23 @@ export const PanelExport: React.FC = ({ /> )}
Image
- +
+ + {probablySupportsClipboard && ( + + )} +