feat: use local storage

src/App.css

@@ -1,3 +1,5 @@
+@import url('//at.alicdn.com/t/font_1280682_55ati5voq6k.css');
+
 .mindmap {
   width: 100vw;
   height: calc(100vh - 36px);

src/App.js

@@ -1,9 +1,9 @@
 import React from "react";
-import MindMap from "./component/MindMap";
+import Mindmap from "./component/mindmap";
 import "./App.css";
 
 function App() {
-  return <MindMap />;
+  return <Mindmap />;
 }
 
 export default App;

src/component/MindMap.js → src/component/mindmap.js

@@ -3,7 +3,7 @@ import { Diagram } from "@blink-mind/renderer-react";
 import RichTextEditorPlugin from "@blink-mind/plugin-rich-text-editor";
 import { JsonSerializerPlugin } from "@blink-mind/plugin-json-serializer";
 import { ThemeSelectorPlugin } from "@blink-mind/plugin-theme-selector";
-import { Toolbar } from "./Toolbar";
+import { Toolbar } from "./toolbar/toolbar";
 import { downloadFile, generateSimpleModel } from "../utils";
 import "@blink-mind/renderer-react/lib/main.css";
 import debug from "debug";
@@ -15,7 +15,7 @@ const plugins = [
   ThemeSelectorPlugin()
 ];
 
-export class MindMap extends React.Component {
+export class Mindmap extends React.Component {
   constructor(props) {
     super(props);
     this.initModel();
@@ -56,28 +56,6 @@ export class MindMap extends React.Component {
     input.click();
   };
 
-  onClickExportJson = e => {
-    const props = this.diagram.getDiagramProps();
-    const { controller } = props;
-
-    const json = controller.run("serializeModel", props);
-    const jsonStr = JSON.stringify(json);
-    const url = `data:text/plain,${encodeURIComponent(jsonStr)}`;
-    downloadFile(url, "example.json");
-    this.setState({ showDialog: false });
-  };
-
-  onClickSetTheme = themeKey => e => {
-    const props = this.diagram.getDiagramProps();
-    const { controller } = props;
-    controller.run("setTheme", { ...props, themeKey });
-  };
-
-  onClickSetLayout = layoutDir => e => {
-    const props = this.diagram.getDiagramProps();
-    const { controller } = props;
-    controller.run("setLayoutDir", { ...props, layoutDir });
-  };
 
   onClickUndo = e => {
     const props = this.diagram.getDiagramProps();
@@ -108,14 +86,12 @@ export class MindMap extends React.Component {
     const canUndo = controller.run("canUndo", props);
     const canRedo = controller.run("canRedo", props);
     const toolbarProps = {
-      onClickExportJson: this.onClickExportJson,
       onClickOpenFile: this.onClickOpenFile,
-      onClickChangeTheme: this.onClickSetTheme,
-      onClickSetLayout: this.onClickSetLayout,
       onClickUndo: this.onClickUndo,
       onClickRedo: this.onClickRedo,
       canUndo,
-      canRedo
+      canRedo,
+      ...props
     };
     return <Toolbar {...toolbarProps} />;
   }
@@ -138,4 +114,4 @@ export class MindMap extends React.Component {
   }
 }
 
-export default MindMap;
+export default Mindmap;

src/component/toolbar/toolbar-item-export.js

@@ -0,0 +1,28 @@
+import cx from "classnames";
+import { iconClassName } from "@blink-mind/renderer-react";
+import { Menu, MenuDivider, MenuItem, Popover } from "@blueprintjs/core";
+import React from "react";
+import {downloadFile} from "../../utils";
+
+export function ToolbarItemExport(props) {
+  const onClickExportJson = e => {
+    const { controller } = props;
+
+    const json = controller.run("serializeModel", props);
+    const jsonStr = JSON.stringify(json);
+    const url = `data:text/plain,${encodeURIComponent(jsonStr)}`;
+    downloadFile(url, "example.json");
+  };
+
+  return (
+    <div className={cx("bm-toolbar-item", iconClassName("export"))}>
+      <Popover enforceFocus={false}>
+        <div className="bm-toolbar-popover-target" />
+        <Menu>
+          <MenuItem text="JSON(.json)" onClick={onClickExportJson} />
+          <MenuDivider />
+        </Menu>
+      </Popover>
+    </div>
+  );
+}

src/component/toolbar/toolbar-item-layout.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { DiagramLayoutType } from "@blink-mind/core";
+import cx from "classnames";
+import { Icon, iconClassName } from "@blink-mind/renderer-react";
+import { Menu, MenuItem, Popover } from "@blueprintjs/core";
+
+export function ToolbarItemLayout(props) {
+  const layoutDirs = [
+    [
+      DiagramLayoutType.LEFT_AND_RIGHT,
+      "Left And Right",
+      "layout-left-and-right"
+    ],
+    [DiagramLayoutType.LEFT_TO_RIGHT, "Only Right", "layout-right"],
+    [DiagramLayoutType.RIGHT_TO_LEFT, "Only Left", "layout-left"]
+  ];
+
+  const onClickSetLayout = layoutDir => e => {
+    const { controller } = props;
+    controller.run("setLayoutDir", { ...props, layoutDir });
+  };
+
+  return (
+    <div
+      className={cx("bm-toolbar-item", iconClassName("layout-left-and-right"))}
+    >
+      <Popover enforceFocus={false}>
+        <div className="bm-toolbar-popover-target" />
+        <Menu>
+          {layoutDirs.map(dir => (
+            <MenuItem
+              key={dir[1]}
+              icon={Icon(dir[2])}
+              text={dir[1]}
+              onClick={onClickSetLayout(dir[0])}
+            />
+          ))}
+        </Menu>
+      </Popover>
+    </div>
+  );
+};

src/component/toolbar/toolbar-item-open.js

@@ -0,0 +1,4 @@
+
+export function ToolbarItemOpen(props) {
+
+}

src/component/toolbar/toolbar-item-saveas.js

@@ -0,0 +1,19 @@
+import cx from "classnames";
+import {iconClassName} from "@blink-mind/renderer-react";
+import {Menu, MenuDivider, MenuItem, Popover} from "@blueprintjs/core";
+import React from "react";
+
+export function ToolbarItemSaveAs(props) {
+  const { onClickExportJson } = props;
+  return (
+    <div className={cx("bm-toolbar-item", iconClassName("saveas"))}>
+      <Popover enforceFocus={false}>
+        <div className="bm-toolbar-popover-target" />
+        <Menu>
+          <MenuItem text="JSON(.json)" onClick={onClickExportJson} />
+          <MenuDivider />
+        </Menu>
+      </Popover>
+    </div>
+  );
+}

src/component/toolbar/toolbar-item-theme.js

@@ -0,0 +1,38 @@
+import defaultThemeImg from "../../images/default.jpg";
+import theme1Img from "../../images/theme1.jpg";
+import theme2Img from "../../images/theme2.jpg";
+import theme3Img from "../../images/theme3.jpg";
+import theme4Img from "../../images/theme4.jpg";
+import cx from "classnames";
+import { iconClassName } from "@blink-mind/renderer-react";
+import { Popover } from "@blueprintjs/core";
+import React from "react";
+
+export function ToolbarItemTheme(props) {
+  const onClickSetTheme = themeKey => e => {
+    const { controller } = props;
+    controller.run("setTheme", { ...props, themeKey });
+  };
+  const themes = [
+    ["default", defaultThemeImg],
+    ["theme1", theme1Img],
+    ["theme2", theme2Img],
+    ["theme3", theme3Img],
+    ["theme4", theme4Img]
+  ];
+
+  return (
+    <div className={cx("bm-toolbar-item", iconClassName("theme"))}>
+      <Popover enforceFocus={false}>
+        <div className="bm-toolbar-popover-target" />
+        <div className="bm-popover-theme">
+          {themes.map(theme => (
+            <div className="bm-theme-item" onClick={onClickSetTheme(theme[0])}>
+              <img className="bm-theme-img" src={theme[1]} alt={theme[0]} />
+            </div>
+          ))}
+        </div>
+      </Popover>
+    </div>
+  );
+}