export png

src/components/control_panel.jsx

@@ -1,5 +1,4 @@
 import { React, useState } from "react";
-import { menu } from "../data/data";
 import {
   IconCaretdown,
   IconChevronRight,
@@ -17,18 +16,241 @@ import {
   Divider,
   Dropdown,
   Form,
+  Image,
+  Modal,
 } from "@douyinfe/semi-ui";
+import { toPng } from "html-to-image";
+import { saveAs } from "file-saver";
 
 export default function ControlPanel() {
   const [showToolBar, setShowToolBar] = useState(true);
 
+  const [visible, setVisible] = useState(false);
+  const [dataUrl, setDataUrl] = useState("");
+  const [filename, setFilename] = useState(
+    `diagram_${new Date().toISOString()}`
+  );
+
+  const menu = {
+    File: {
+      New: {
+        children: [],
+        function: () => console.log("New"),
+      },
+      "New window": {
+        children: [],
+        function: () => {},
+      },
+      Save: {
+        children: [],
+        function: () => {},
+      },
+      "Save as": {
+        children: [],
+        function: () => {},
+      },
+      Share: {
+        children: [],
+        function: () => {},
+      },
+      Rename: {
+        children: [],
+        function: () => {},
+      },
+      Import: {
+        children: [],
+        function: () => {},
+      },
+      "Export as": {
+        children: [
+          {
+            ".png": () => {
+              toPng(document.getElementById("canvas")).then(function (dataUrl) {
+                setDataUrl(dataUrl);
+              });
+              setVisible(true);
+            },
+          },
+          { ".jpg": () => {} },
+          { ".xml": () => {} },
+          { ".svg": () => {} },
+          { ".xml": () => {} },
+        ],
+        function: () => {},
+      },
+      "Export source": {
+        children: [
+          { MySQL: () => {} },
+          { PostgreSQL: () => {} },
+          { DBML: () => {} },
+        ],
+        function: () => {},
+      },
+      Properties: {
+        children: [],
+        function: () => {},
+      },
+      Close: {
+        children: [],
+        function: () => {},
+      },
+    },
+    Edit: {
+      Undo: {
+        children: [],
+        function: () => {},
+      },
+      Redo: {
+        children: [],
+        function: () => {},
+      },
+      Cut: {
+        children: [],
+        function: () => {},
+      },
+      Copy: {
+        children: [],
+        function: () => {},
+      },
+      "Copy as image": {
+        children: [],
+        function: () => {},
+      },
+      Paste: {
+        children: [],
+        function: () => {},
+      },
+      Delete: {
+        children: [],
+        function: () => {},
+      },
+      "Edit table": {
+        children: [],
+        function: () => {},
+      },
+    },
+    View: {
+      Toolbar: {
+        children: [],
+        function: () => {},
+      },
+      Grid: {
+        children: [],
+        function: () => {},
+      },
+      Sidebar: {
+        children: [],
+        function: () => {},
+      },
+      Editor: {
+        children: [],
+        function: () => {},
+      },
+      "Strict mode": {
+        children: [],
+        function: () => {},
+      },
+      "Reset view": {
+        children: [],
+        function: () => {},
+      },
+      "View schema": {
+        children: [],
+        function: () => {},
+      },
+      Theme: {
+        children: [{ Light: () => {} }, { Dark: () => {} }],
+        function: () => {},
+      },
+      "Zoom in": {
+        children: [],
+        function: () => {},
+      },
+      "Zoom out": {
+        children: [],
+        function: () => {},
+      },
+      Fullscreen: {
+        children: [],
+        function: () => {},
+      },
+    },
+    Insert: {
+      "New table": {
+        children: [],
+        function: () => {},
+      },
+      "New relationship": {
+        children: [],
+        function: () => {},
+      },
+      Note: {
+        children: [],
+        function: () => {},
+      },
+      Image: {
+        children: [],
+        function: () => {},
+      },
+      Textbox: {
+        children: [],
+        function: () => {},
+      },
+      Shape: {
+        children: [],
+        function: () => {},
+      },
+    },
+    Logs: {
+      "Open logs": {
+        children: [],
+        function: () => {},
+      },
+      "Commit changes": {
+        children: [],
+        function: () => {},
+      },
+      "Revert changes": {
+        children: [],
+        function: () => {},
+      },
+      "View commits": {
+        children: [],
+        function: () => {},
+      },
+    },
+    Help: {
+      Shortcuts: {
+        children: [],
+        function: () => {},
+      },
+      "Ask us on discord": {
+        children: [],
+        function: () => {},
+      },
+      "Tweet us": {
+        children: [],
+        function: () => {},
+      },
+      "Found a bug": {
+        children: [],
+        function: () => {},
+      },
+    },
+  };
+
   return (
     <>
       {showToolBar && (
-        <nav className="flex justify-between pt-1 items-center">
+        <nav className="flex justify-between pt-1 items-center whitespace-nowrap">
           <div className="flex justify-start items-center text-slate-800">
             <Link to="/">
-              <img width={54} src={icon} alt="logo" className="ms-8" />
+              <img
+                width={54}
+                src={icon}
+                alt="logo"
+                className="ms-8 min-w-[54px]"
+              />
             </Link>
             <div className="ms-1 mt-1">
               <div className="text-xl ms-3">Project1 / Untitled</div>
@@ -52,12 +274,11 @@ export default function ControlPanel() {
                                     <Dropdown.Menu>
                                       {menu[category][item].children.map(
                                         (e, i) => (
-                                          <Dropdown.Item key={i}>
+                                          <Dropdown.Item
-                                            <button
+                                            key={i}
-                                              onClick={Object.values(e)[0]}
+                                            onClick={Object.values(e)[0]}
-                                            >
+                                          >
-                                              {Object.keys(e)[0]}
+                                            {Object.keys(e)[0]}
-                                            </button>
                                           </Dropdown.Item>
                                         )
                                       )}
@@ -70,22 +291,20 @@ export default function ControlPanel() {
                                       justifyContent: "space-between",
                                       alignItems: "center",
                                     }}
+                                    onClick={menu[category][item].function}
                                   >
-                                    <button
+                                    {item}
-                                      onClick={menu[category][item].function}
-                                    >
-                                      {item}
-                                    </button>
                                     <IconChevronRight />
                                   </Dropdown.Item>
                                 </Dropdown>
                               );
                             }
                             return (
-                              <Dropdown.Item key={index}>
+                              <Dropdown.Item
-                                <button onClick={menu[category][item].function}>
+                                key={index}
-                                  {item}
+                                onClick={menu[category][item].function}
-                                </button>
+                              >
+                                {item}
                               </Dropdown.Item>
                             );
                           })}
@@ -252,6 +471,35 @@ export default function ControlPanel() {
           {showToolBar ? <IconChevronUp /> : <IconChevronDown />}
         </button>
       </div>
+      <Modal
+        title="Export diagram"
+        visible={visible}
+        onOk={() => saveAs(dataUrl, `${filename}.png`)}
+        afterClose={() => setFilename(`diagram_${new Date().toISOString()}`)}
+        onCancel={() => setVisible(false)}
+        centered
+        closeOnEsc={true}
+        okText="Export"
+        cancelText="Cancel"
+        width={470}
+      >
+        <Image src={dataUrl} alt="Diagram" width={420}></Image>
+        <Form
+          labelPosition="left"
+          labelAlign="right"
+          onChange={(value) => {
+            console.log(value.values);
+            setFilename(value.values["filename"]);
+          }}
+        >
+          <Form.Input
+            field="filename"
+            label="Filename"
+            suffix={<div className="p-2">.png</div>}
+            initValue={filename}
+          />
+        </Form>
+      </Modal>
     </>
   );
 }

src/components/editor_panel.jsx

@@ -5,7 +5,6 @@ import { createTheme } from "@uiw/codemirror-themes";
 import { sql } from "@codemirror/lang-sql";
 import { tags as t } from "@lezer/highlight";
 import Shape from "./shape";
-// import { saveAs } from "file-saver";
 import { toPng } from "html-to-image";
 import { Parser } from "node-sql-parser";
 import { Tabs } from "@douyinfe/semi-ui";
@@ -13,7 +12,7 @@ import "react-resizable/css/styles.css";
 import TableOverview from "./table_overview";
 import ReferenceOverview from "./reference_overview";
 import { defaultTableTheme } from "../data/data";
-import { ImagePreview, Image } from "@douyinfe/semi-ui";
+import { ImagePreview } from "@douyinfe/semi-ui";
 
 const myTheme = createTheme({
   dark: "light",
@@ -187,15 +186,6 @@ const EditorPanel = (props) => {
           visible={visible1}
           onVisibleChange={visibleChange1}
         >
-          <div>
-            {visible1&&<Image
-              src={"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg"}
-              width={200}
-              alt={`lamp${1}`}
-              
-              style={{ marginRight: 5 }}
-            />}
-          </div>
         </ImagePreview>
       </div>
     </ResizableBox>

src/data/data.js

@@ -1,194 +1,3 @@
-const menu = {
-  File: {
-    New: {
-      children: [],
-      function: () => console.log("New"),
-    },
-    "New window": {
-      children: [],
-      function: () => {},
-    },
-    Save: {
-      children: [],
-      function: () => {},
-    },
-    "Save as": {
-      children: [],
-      function: () => {},
-    },
-    Share: {
-      children: [],
-      function: () => {},
-    },
-    Rename: {
-      children: [],
-      function: () => {},
-    },
-    Import: {
-      children: [],
-      function: () => {},
-    },
-    "Export as": {
-      children: [{".png": ()=>console.log("exporting png")}, {".jpg": ()=>{}}, {".xml": ()=>{}},{".svg": ()=>{}}, {".xml": ()=>{}}],
-      function: () => {},
-    },
-    "Export source": {
-      children: [{"MySQL": ()=>{}}, {"PostgreSQL": ()=>{}}, {"DBML": ()=>{}}],
-      function: () => {},
-    },
-    Properties: {
-      children: [],
-      function: () => {},
-    },
-    Close: {
-      children: [],
-      function: () => {},
-    },
-  },
-  Edit: {
-    Undo: {
-      children: [],
-      function: () => {},
-    },
-    Redo: {
-      children: [],
-      function: () => {},
-    },
-    Cut: {
-      children: [],
-      function: () => {},
-    },
-    Copy: {
-      children: [],
-      function: () => {},
-    },
-    "Copy as image": {
-      children: [],
-      function: () => {},
-    },
-    Paste: {
-      children: [],
-      function: () => {},
-    },
-    Delete: {
-      children: [],
-      function: () => {},
-    },
-    "Edit table": {
-      children: [],
-      function: () => {},
-    },
-  },
-  View: {
-    Toolbar: {
-      children: [],
-      function: () => {},
-    },
-    Grid: {
-      children: [],
-      function: () => {},
-    },
-    Sidebar: {
-      children: [],
-      function: () => {},
-    },
-    Editor: {
-      children: [],
-      function: () => {},
-    },
-    "Strict mode": {
-      children: [],
-      function: () => {},
-    },
-    "Reset view": {
-      children: [],
-      function: () => {},
-    },
-    "View schema": {
-      children: [],
-      function: () => {},
-    },
-    Theme: {
-      children: [{Light: ()=>{}}, {Dark: ()=>{}}],
-      function: ()=>{}
-    },
-    "Zoom in": {
-      children: [],
-      function: () => {},
-    },
-    "Zoom out": {
-      children: [],
-      function: () => {},
-    },
-    Fullscreen: {
-      children: [],
-      function: () => {},
-    },
-  },
-  Insert: {
-    "New table": {
-      children: [],
-      function: () => {},
-    },
-    "New relationship": {
-      children: [],
-      function: () => {},
-    },
-    Note: {
-      children: [],
-      function: () => {},
-    },
-    Image: {
-      children: [],
-      function: () => {},
-    },
-    Textbox: {
-      children: [],
-      function: () => {},
-    },
-    Shape: {
-      children: [],
-      function: () => {},
-    },
-  },
-  Logs: {
-    "Open logs": {
-      children: [],
-      function: () => {},
-    },
-    "Commit changes": {
-      children: [],
-      function: () => {},
-    },
-    "Revert changes": {
-      children: [],
-      function: () => {},
-    },
-    "View commits": {
-      children: [],
-      function: () => {},
-    },
-  },
-  Help: {
-    Shortcuts: {
-      children: [],
-      function: () => {},
-    },
-    "Ask us on discord": {
-      children: [],
-      function: () => {},
-    },
-    "Tweet us": {
-      children: [],
-      function: () => {},
-    },
-    "Found a bug": {
-      children: [],
-      function: () => {},
-    },
-  },
-};
-
 const sqlDataTypes = [
   "INT",
   "SMALLINT",
@@ -249,7 +58,6 @@ const Constraint = {
 };
 
 export {
-  menu,
   bgBlue,
   sqlDataTypes,
   tableThemes,