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