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) => (
-                                        <Dropdown.Item key={e}>
-                                          <div>{e}</div>
-                                        </Dropdown.Item>
-                                      ))}
+                                      {menu[category][item].children.map(
+                                        (e, i) => (
+                                          <Dropdown.Item key={i}>
+                                            <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>
   );