Add empty illustration

src/components/control_panel.jsx

@@ -19,7 +19,7 @@ import {
   Image,
   Modal,
 } from "@douyinfe/semi-ui";
-import { toPng, toJpeg } from "html-to-image";
+import { toPng, toJpeg, toSvg } from "html-to-image";
 import { saveAs } from "file-saver";
 
 export default function ControlPanel() {
@@ -65,7 +65,7 @@ export default function ControlPanel() {
       "Export as": {
         children: [
           {
-            ".png": () => {
+            PNG: () => {
               toPng(document.getElementById("canvas")).then(function (dataUrl) {
                 setDataUrl(dataUrl);
               });
@@ -74,7 +74,7 @@ export default function ControlPanel() {
             },
           },
           {
-            ".jpeg": () => {
+            JPEG: () => {
               toJpeg(document.getElementById("canvas"), { quality: 0.95 }).then(
                 function (dataUrl) {
                   setDataUrl(dataUrl);
@@ -84,9 +84,20 @@ export default function ControlPanel() {
               setExtension("jpeg");
             },
           },
-          { ".xml": () => {} },
-          { ".svg": () => {} },
-          { ".pdf": () => {} },
+          { XML: () => {} },
+          {
+            SVG: () => {
+              const filter = (node) => node.tagName !== "i";
+              toSvg(document.getElementById("canvas"), { filter: filter }).then(
+                function (dataUrl) {
+                  setDataUrl(dataUrl);
+                }
+              );
+              setVisible(true);
+              setExtension("svg");
+            },
+          },
+          { PDF: () => {} },
         ],
         function: () => {},
       },
@@ -374,7 +385,16 @@ export default function ControlPanel() {
             style={{ width: "180px" }}
             render={
               <Dropdown.Menu>
-                <Dropdown.Item icon={<IconCheckboxTick />}>
+                <Dropdown.Item
+                  icon={
+                    showToolBar ? (
+                      <IconCheckboxTick />
+                    ) : (
+                      <div className="px-2"></div>
+                    )
+                  }
+                  onClick={() => setShowToolBar((prev) => !prev)}
+                >
                   Header
                 </Dropdown.Item>
                 <Dropdown.Item icon={<IconCheckboxTick />}>

src/components/editor_panel.jsx

@@ -5,14 +5,12 @@ import { createTheme } from "@uiw/codemirror-themes";
 import { sql } from "@codemirror/lang-sql";
 import { tags as t } from "@lezer/highlight";
 import Shape from "./shape";
-import { toPng } from "html-to-image";
 import { Parser } from "node-sql-parser";
 import { Tabs } from "@douyinfe/semi-ui";
 import "react-resizable/css/styles.css";
 import TableOverview from "./table_overview";
 import ReferenceOverview from "./reference_overview";
 import { defaultTableTheme } from "../data/data";
-import { ImagePreview } from "@douyinfe/semi-ui";
 
 const myTheme = createTheme({
   dark: "light",
@@ -32,13 +30,6 @@ 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" },
@@ -169,24 +160,6 @@ const EditorPanel = (props) => {
         >
           parse
         </button>
-        <br />
-        <button
-          onClick={() => {
-            toPng(document.getElementById("canvas")).then(function (dataUrl) {
-              // window.saveAs(dataUrl, "canvas.png");
-              setDataUrl(dataUrl);
-            });
-            setVisible1(true);
-          }}
-        >
-          export img
-        </button>
-        <ImagePreview
-          src={dataUrl}
-          visible={visible1}
-          onVisibleChange={visibleChange1}
-        >
-        </ImagePreview>
       </div>
     </ResizableBox>
   );

src/components/table_overview.jsx

@@ -12,6 +12,7 @@ import {
   Select,
   AutoComplete,
   Toast,
+  Empty,
 } from "@douyinfe/semi-ui";
 import {
   IconMore,
@@ -22,6 +23,10 @@ import {
   IconPlus,
   IconSearch,
 } from "@douyinfe/semi-icons";
+import {
+  IllustrationNoContent,
+  IllustrationNoContentDark,
+} from "@douyinfe/semi-illustrations";
 
 export default function TableOverview(props) {
   const [indexActiveKey, setIndexActiveKey] = useState("");
@@ -141,7 +146,19 @@ export default function TableOverview(props) {
         onChange={(k) => setTableActiveKey(k)}
         accordion
       >
-        {props.tables.map((t, i) => (
+        {props.tables.length <= 0 ? (
+          <Empty
+            image={
+              <IllustrationNoContent style={{ width: 160, height: 160 }} />
+            }
+            darkModeImage={
+              <IllustrationNoContentDark style={{ width: 160, height: 160 }} />
+            }
+            title="No tables"
+            description="Start building your diagram!"
+          />
+        ) : (
+          props.tables.map((t, i) => (
             <div id={`${t.name}_scroll_id`} key={t.id}>
               <Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}>
                 {t.fields.map((f, j) => (
@@ -228,7 +245,10 @@ export default function TableOverview(props) {
                                   initValue={f.check}
                                 />
                                 <div className="flex justify-between items-center my-3">
-                                <label htmlFor="unique" className="font-medium">
+                                  <label
+                                    htmlFor="unique"
+                                    className="font-medium"
+                                  >
                                     Unique
                                   </label>
                                   <Checkbox
@@ -540,7 +560,8 @@ export default function TableOverview(props) {
                 </Row>
               </Collapse.Panel>
             </div>
-        ))}
+          ))
+        )}
       </Collapse>
     </>
   );