functional navbar yey

src/components/canvas.jsx

@@ -241,8 +241,12 @@ export default function Canvas(props) {
           onMouseMove={handleMouseMove}
           onMouseDown={handleMouseDown}
           onMouseUp={handleMouseUp}
-          style={{ width: "100%", height: "100%", cursor: cursor, backgroundColor:"white" }}
+          style={{
-          
+            width: "100%",
+            height: "100%",
+            cursor: cursor,
+            backgroundColor: "white",
+          }}
         >
           <defs>
             <pattern
@@ -265,7 +269,7 @@ export default function Canvas(props) {
           </defs>
           <rect
             x="0"
-            y="0" 
+            y="0"
             width="100%"
             height="100%"
             fill="url(#pattern-circles)"

src/components/control_panel.jsx

@@ -42,7 +42,7 @@ export default function ControlPanel() {
                       render={
                         <Dropdown.Menu>
                           {Object.keys(menu[category]).map((item, index) => {
-                            if (menu[category][item].length > 0) {
+                            if (menu[category][item].children.length > 0) {
                               return (
                                 <Dropdown
                                   style={{ width: "120px" }}
@@ -50,11 +50,17 @@ export default function ControlPanel() {
                                   position={"rightTop"}
                                   render={
                                     <Dropdown.Menu>
-                                      {menu[category][item].map((e) => (
+                                      {menu[category][item].children.map(
-                                        <Dropdown.Item key={e}>
+                                        (e, i) => (
-                                          <div>{e}</div>
+                                          <Dropdown.Item key={i}>
-                                        </Dropdown.Item>
+                                            <button
-                                      ))}
+                                              onClick={Object.values(e)[0]}
+                                            >
+                                              {Object.keys(e)[0]}
+                                            </button>
+                                          </Dropdown.Item>
+                                        )
+                                      )}
                                     </Dropdown.Menu>
                                   }
                                 >
@@ -65,14 +71,22 @@ export default function ControlPanel() {
                                       alignItems: "center",
                                     }}
                                   >
-                                    <div>{item}</div>
+                                    <button
+                                      onClick={menu[category][item].function}
+                                    >
+                                      {item}
+                                    </button>
                                     <IconChevronRight />
                                   </Dropdown.Item>
                                 </Dropdown>
                               );
                             }
                             return (
-                              <Dropdown.Item key={index}>{item}</Dropdown.Item>
+                              <Dropdown.Item key={index}>
+                                <button onClick={menu[category][item].function}>
+                                  {item}
+                                </button>
+                              </Dropdown.Item>
                             );
                           })}
                         </Dropdown.Menu>

src/components/editor_panel.jsx

@@ -5,7 +5,7 @@ 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 { saveAs } from "file-saver";
 import { toPng } from "html-to-image";
 import { Parser } from "node-sql-parser";
 import { Tabs } from "@douyinfe/semi-ui";
@@ -13,6 +13,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";
 
 const myTheme = createTheme({
   dark: "light",
@@ -32,6 +33,13 @@ const EditorPanel = (props) => {
   const [tab, setTab] = useState("1");
   const map = useRef(new Map());
 
+  const [visible1, setVisible1] = useState(false);
+  const [dataUrl, setDataUrl] = useState("");
+
+  const visibleChange1 = (v) => {
+    setVisible1(v);
+  };
+
   const tabList = [
     { tab: "Tables", itemKey: "1" },
     { tab: "References", itemKey: "2" },
@@ -112,7 +120,7 @@ const EditorPanel = (props) => {
               type: "text/plain;charset=utf-8",
             });
 
-            saveAs(blob, "src.txt");
+            window.saveAs(blob, "src.txt");
           }}
         >
           export src
@@ -166,12 +174,29 @@ const EditorPanel = (props) => {
         <button
           onClick={() => {
             toPng(document.getElementById("canvas")).then(function (dataUrl) {
-              saveAs(dataUrl, "canvas.png");
+              // window.saveAs(dataUrl, "canvas.png");
+              setDataUrl(dataUrl);
             });
+            setVisible1(true);
           }}
         >
           export img
         </button>
+        <ImagePreview
+          src={dataUrl}
+          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,59 +1,191 @@
 const menu = {
   File: {
-    New: [],
+    New: {
-    "New window": [],
+      children: [],
-    Save: [],
+      function: () => console.log("New"),
-    "Save as": [],
+    },
-    Share: [],
+    "New window": {
-    Rename: [],
+      children: [],
-    Import: [],
+      function: () => {},
-    "Export as": [".png", ".jpg", ".pdf", ".xml"],
+    },
-    "Export source": ["MySQL", "PostgreSQL", "DBML"],
+    Save: {
-    Properties: [],
+      children: [],
-    Close: [],
+      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: [],
+    Undo: {
-    Redo: [],
+      children: [],
-    Cut: [],
+      function: () => {},
-    Copy: [],
+    },
-    "Copy as image": [],
+    Redo: {
-    Paste: [],
+      children: [],
-    Delete: [],
+      function: () => {},
-    "Edit table": [],
+    },
+    Cut: {
+      children: [],
+      function: () => {},
+    },
+    Copy: {
+      children: [],
+      function: () => {},
+    },
+    "Copy as image": {
+      children: [],
+      function: () => {},
+    },
+    Paste: {
+      children: [],
+      function: () => {},
+    },
+    Delete: {
+      children: [],
+      function: () => {},
+    },
+    "Edit table": {
+      children: [],
+      function: () => {},
+    },
   },
   View: {
-    Toolbar: [],
+    Toolbar: {
-    Grid: [],
+      children: [],
-    Sidebar: [],
+      function: () => {},
-    Editor: [],
+    },
-    "Strict mode": [],
+    Grid: {
-    "Reset view": [],
+      children: [],
-    "View schema": [],
+      function: () => {},
-    Theme: ["Light", "Dark"],
+    },
-    "Zoom in": [],
+    Sidebar: {
-    "Zoom out": [],
+      children: [],
-    Fullscreen: [],
+      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": [],
+    "New table": {
-    "New relationship": [],
+      children: [],
-    Note: [],
+      function: () => {},
-    Image: [],
+    },
-    Textbox: [],
+    "New relationship": {
-    Shape: ["Rhombus", "Rectangle"],
+      children: [],
+      function: () => {},
+    },
+    Note: {
+      children: [],
+      function: () => {},
+    },
+    Image: {
+      children: [],
+      function: () => {},
+    },
+    Textbox: {
+      children: [],
+      function: () => {},
+    },
+    Shape: {
+      children: [],
+      function: () => {},
+    },
   },
   Logs: {
-    "Open logs": [],
+    "Open logs": {
-    "Commit changes": [],
+      children: [],
-    "Revert changes": [],
+      function: () => {},
-    "View commits": [],
+    },
+    "Commit changes": {
+      children: [],
+      function: () => {},
+    },
+    "Revert changes": {
+      children: [],
+      function: () => {},
+    },
+    "View commits": {
+      children: [],
+      function: () => {},
+    },
   },
   Help: {
-    Shortcuts: [],
+    Shortcuts: {
-    "Ask us on discord": [],
+      children: [],
-    "Tweet us": [],
+      function: () => {},
-    "Found a bug": [],
+    },
+    "Ask us on discord": {
+      children: [],
+      function: () => {},
+    },
+    "Tweet us": {
+      children: [],
+      function: () => {},
+    },
+    "Found a bug": {
+      children: [],
+      function: () => {},
+    },
   },
 };
 
@@ -116,4 +248,12 @@ const Constraint = {
   setDefault: "Set default",
 };
 
-export { menu, bgBlue, sqlDataTypes, tableThemes, defaultTableTheme, Cardinality, Constraint };
+export {
+  menu,
+  bgBlue,
+  sqlDataTypes,
+  tableThemes,
+  defaultTableTheme,
+  Cardinality,
+  Constraint,
+};