Create a new diagram

src/components/ControlPanel.jsx

@@ -11,6 +11,7 @@ import {
   IconRedo,
   IconRowsStroked,
   IconEdit,
+  IconPlus,
 } from "@douyinfe/semi-icons";
 import { Link } from "react-router-dom";
 import icon from "../assets/icon_dark_64.png";
@@ -71,6 +72,7 @@ export default function ControlPanel({ diagramId, setDiagramId }) {
     RENAME: 4,
     OPEN: 5,
     SAVEAS: 6,
+    NEW: 7,
   };
   const STATUS = {
     NONE: 0,
@@ -84,6 +86,7 @@ export default function ControlPanel({ diagramId, setDiagramId }) {
   const [prevTitle, setPrevTitle] = useState(title);
   const [saveAsTitle, setSaveAsTitle] = useState(title);
   const [selectedDiagramId, setSelectedDiagramId] = useState(0);
+  const [selectedTemplateId, setSelectedTemplateId] = useState(-1);
   const [showEditName, setShowEditName] = useState(false);
   const [exportData, setExportData] = useState({
     data: null,
@@ -713,11 +716,15 @@ export default function ControlPanel({ diagramId, setDiagramId }) {
         Toast.error("Oops! Couldn't load diagram.");
       });
   };
+  const createNewDiagram = (id) => {
+    localStorage.setItem("args", `${id}`);
+    window.open("/editor", "_blank");
+  };
 
   const menu = {
     File: {
       New: {
-        function: () => {},
+        function: () => setVisible(MODAL.NEW),
       },
       "New window": {
         function: () => {},
@@ -1114,6 +1121,8 @@ export default function ControlPanel({ diagramId, setDiagramId }) {
         return "Open diagram";
       case MODAL.SAVEAS:
         return "Save as";
+      case MODAL.NEW:
+        return "New diagram";
       default:
         return "";
     }
@@ -1132,6 +1141,8 @@ export default function ControlPanel({ diagramId, setDiagramId }) {
         return "Open";
       case MODAL.SAVEAS:
         return "Save as";
+      case MODAL.NEW:
+        return "Create";
       default:
         return "Confirm";
     }
@@ -1166,6 +1177,10 @@ export default function ControlPanel({ diagramId, setDiagramId }) {
         loadDiagram(selectedDiagramId);
         setVisible(MODAL.NONE);
         return;
+      case MODAL.RENAME:
+        setPrevTitle(title);
+        setVisible(MODAL.NONE);
+        return;
       case MODAL.SAVEAS:
         db.diagrams.add({
           name: saveAsTitle,
@@ -1178,6 +1193,10 @@ export default function ControlPanel({ diagramId, setDiagramId }) {
         });
         setVisible(MODAL.NONE);
         return;
+      case MODAL.NEW:
+        setVisible(MODAL.NONE);
+        createNewDiagram(selectedTemplateId);
+        return;
       default:
         setVisible(MODAL.NONE);
         return;
@@ -1291,11 +1310,46 @@ export default function ControlPanel({ diagramId, setDiagramId }) {
     );
   };
 
+  const newModalBody = () => (
+    <div className="h-[360px] grid grid-cols-3 gap-2 overflow-auto px-1">
+      <div>
+        <div
+          className={`h-[180px] w-full bg-blue-400 bg-opacity-30 flex justify-center items-center rounded hover:bg-opacity-40 hover:border-2 hover:border-dashed ${
+            settings.mode === "light"
+              ? "hover:border-blue-500"
+              : "hover:border-white"
+          } ${selectedTemplateId === 0 && "border-2 border-blue-500"}`}
+          onClick={() => setSelectedTemplateId(0)}
+        >
+          <IconPlus style={{ color: "#fff" }} size="extra-large" />
+        </div>
+        <div className="text-center mt-1">Blank</div>
+      </div>
+      {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
+        <div key={i}>
+          <div
+            className={`h-[180px] w-full bg-blue-400 bg-opacity-30 flex justify-center items-center rounded hover:bg-opacity-40 hover:border-2 hover:border-dashed ${
+              settings.mode === "light"
+                ? "hover:border-blue-500"
+                : "hover:border-white"
+            } ${selectedTemplateId === i && "border-2 border-blue-500"}`}
+            onClick={() => setSelectedTemplateId(i)}
+          >
+            +
+          </div>
+          <div className="text-center mt-1">Template {i}</div>
+        </div>
+      ))}
+    </div>
+  );
+
   const getModalBody = () => {
-    if (visible === MODAL.IMPORT) {
+    switch (visible) {
+      case MODAL.IMPORT:
         return importModalBody();
-    }
-    if (visible === MODAL.RENAME) {
+      case MODAL.NEW:
+        return newModalBody();
+      case MODAL.RENAME:
         return (
           <Input
             placeholder="Diagram name"
@@ -1303,17 +1357,7 @@ export default function ControlPanel({ diagramId, setDiagramId }) {
             onChange={(v) => setTitle(v)}
           />
         );
-    }
-    if (visible === MODAL.SAVEAS) {
-      return (
-        <Input
-          placeholder="Diagram name"
-          value={saveAsTitle}
-          onChange={(v) => setSaveAsTitle(v)}
-        />
-      );
-    }
-    if (visible === MODAL.OPEN) {
+      case MODAL.OPEN:
         return (
           <div>
             {diagrams.length === 0 ? (
@@ -1379,7 +1423,16 @@ export default function ControlPanel({ diagramId, setDiagramId }) {
             )}
           </div>
         );
-    }
+      case MODAL.SAVEAS:
+        return (
+          <Input
+            placeholder="Diagram name"
+            value={saveAsTitle}
+            onChange={(v) => setSaveAsTitle(v)}
+          />
+        );
+      case MODAL.CODE:
+      case MODAL.IMG:
         if (exportData.data !== "" || exportData.data) {
           return (
             <>
@@ -1413,6 +1466,9 @@ export default function ControlPanel({ diagramId, setDiagramId }) {
             </div>
           );
         }
+      default:
+        return <></>;
+    }
   };
 
   return (

src/index.js

@@ -8,11 +8,11 @@ import en_US from "@douyinfe/semi-ui/lib/es/locale/source/en_US";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <React.StrictMode>
+  // <React.StrictMode>
     <LocaleProvider locale={en_US}>
       <App />
     </LocaleProvider>
-  </React.StrictMode>
+  // </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/pages/editor.jsx

@@ -480,7 +480,13 @@ export default function Editor(props) {
         });
     };
 
+    const args = localStorage.getItem("args");
+    if (!args || args === "-1") {
       loadLatestDiagram();
+    } else {
+      console.log("Loading template with id", args);
+      localStorage.setItem("args", "-1");
+    }
 
     socket.connect();