Clear diagram, copy as image

src/components/control_panel.jsx

@@ -34,6 +34,7 @@ import {
   enterFullscreen,
   exitFullscreen,
   ddbDiagramIsValid,
+  dataURItoBlob,
 } from "../utils";
 import {
   AreaContext,
@@ -246,6 +247,15 @@ export default function ControlPanel(props) {
         children: [],
         function: () => {},
       },
+      Clear: {
+        children: [],
+        function: () => {
+          setTables([]);
+          setRelationships([]);
+          setAreas([]);
+          setNotes([]);
+        },
+      },
       Cut: {
         children: [],
         function: () => {},
@@ -254,14 +264,26 @@ export default function ControlPanel(props) {
         children: [],
         function: () => {},
       },
-      "Copy as image": {
-        children: [],
-        function: () => {},
-      },
       Paste: {
         children: [],
         function: () => {},
       },
+      "Copy as image": {
+        children: [],
+        function: () => {
+          toPng(document.getElementById("canvas")).then(function (dataUrl) {
+            const blob = dataURItoBlob(dataUrl);
+            navigator.clipboard
+              .write([new ClipboardItem({ "image/png": blob })])
+              .then(() => {
+                Toast.success("Copied to clipboard.");
+              })
+              .catch((error) => {
+                Toast.error("Could not copy to clipboard.");
+              });
+          });
+        },
+      },
       Delete: {
         children: [],
         function: () => {},

src/components/editor_panel.jsx

@@ -60,7 +60,7 @@ const EditorPanel = (props) => {
   return (
     <div className="flex h-full">
       <div
-        className="flex flex-col h-full relative"
+        className="flex flex-col h-full relative border-r border-gray-200"
         style={{ width: `${props.width}px` }}
       >
         <div className="h-full flex-1 overflow-y-auto">

src/pages/editor.jsx

@@ -21,7 +21,7 @@ export default function Editor(props) {
   const [areas, setAreas] = useState([]);
   const [notes, setNotes] = useState([]);
   const [resize, setResize] = useState(false);
-  const [width, setWidth] = useState(320);
+  const [width, setWidth] = useState(340);
   const [selectedTable, setSelectedTable] = useState("");
   const [tab, setTab] = useState(Tab.tables);
   const [layout, setLayout] = useState({
@@ -46,7 +46,7 @@ export default function Editor(props) {
   const dragHandler = (e) => {
     if (!resize) return;
     const w = e.clientX;
-    if (w > 320) setWidth(w);
+    if (w > 340) setWidth(w);
   };
 
   useEffect(() => {
@@ -61,7 +61,7 @@ export default function Editor(props) {
         <AreaContext.Provider value={{ areas, setAreas }}>
           <NoteContext.Provider value={{ notes, setNotes }}>
             <TabContext.Provider value={{ tab, setTab }}>
-              <SettingsContext.Provider value={{settings, setSettings}}>
+              <SettingsContext.Provider value={{ settings, setSettings }}>
                 <div className="h-[100vh] overflow-hidden">
                   <ControlPanel />
                   <div

src/utils/index.js

@@ -34,9 +34,23 @@ const ddbDiagramIsValid = (obj) => {
   return new Validator().validate(obj, ddbSchema).valid;
 };
 
+function dataURItoBlob(dataUrl) {
+  const byteString = atob(dataUrl.split(",")[1]);
+  const mimeString = dataUrl.split(",")[0].split(":")[1].split(";")[0];
+  const arrayBuffer = new ArrayBuffer(byteString.length);
+  const intArray = new Uint8Array(arrayBuffer);
+
+  for (let i = 0; i < byteString.length; i++) {
+    intArray[i] = byteString.charCodeAt(i);
+  }
+
+  return new Blob([intArray], { type: mimeString });
+}
+
 export {
   enterFullscreen,
   exitFullscreen,
   jsonDiagramIsValid,
   ddbDiagramIsValid,
+  dataURItoBlob,
 };