文件菜单选项绑定事件

src/editor/Menu/File.tsx

@@ -1,15 +1,16 @@
+import { globalController } from "@store";
 import MenuGroup from "./MenuGroup";
 
 const FileMenu = () => {
-  const openGeoJSON = () => {};
   return (
     <MenuGroup
       {...{
         name: "文件",
         items: [
-          { name: "新建", onClick: openGeoJSON },
-          { name: "打开", onClick: openGeoJSON },
-          { name: "另存为", onClick: openGeoJSON },
+          { name: "打开GeoJSON", onClick: globalController.openGeoJSON },
+          { name: "打开工程", onClick: globalController.openProject },
+          { name: "保存GeoJSON", onClick: globalController.saveGeoJSON },
+          { name: "保存工程", onClick: globalController.saveProject },
         ],
       }}
     />

src/editor/Menu/MenuGroup.tsx

@@ -14,7 +14,9 @@ const MenuGroup = (props: MenuConfig) => {
   const menu = (
     <Menu>
       {props.items.map((item, index) => (
-        <Menu.Item key={index}>{item.name}</Menu.Item>
+        <Menu.Item key={index} onClick={item.onClick}>
+          {item.name}
+        </Menu.Item>
       ))}
     </Menu>
   );

src/editor/Plot/Tools/index.tsx

@@ -1,7 +1,7 @@
 import { Tooltip } from "antd";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import classnames from "classnames";
-import { EditorAction, OverlayNamePrefixs, mapStateSelector } from "@store";
+import { globalController, OverlayNamePrefixs, mapStateSelector } from "@store";
 import { OverlayTypes } from "@types";
 
 type IconWithTipProps = {
@@ -36,14 +36,13 @@ type OverlayToolProps = {
 };
 
 const OverlayTool = (props: OverlayToolProps) => {
-  const dispatch = useDispatch();
   const { type } = props;
   const text = OverlayNamePrefixs[type];
 
   const { overlayType } = useSelector(mapStateSelector);
   const selected = type === overlayType;
 
-  const onClick = () => dispatch(EditorAction.createOverlay(type));
+  const onClick = () => globalController.createOverlay(type);
   return <IconWithTip {...{ text, onClick, type, selected }} />;
 };
 

src/store/GlobalController.ts

@@ -55,19 +55,19 @@ export class GlobelController implements IGlobalController {
     //
   }
   createRectangle() {
-    this._createOverlay(OverlayTypes.Rectangle);
+    this.createOverlay(OverlayTypes.Rectangle);
   }
   createPolygon() {
-    this._createOverlay(OverlayTypes.Polygon);
+    this.createOverlay(OverlayTypes.Polygon);
   }
   createPolyline() {
-    this._createOverlay(OverlayTypes.Polyline);
+    this.createOverlay(OverlayTypes.Polyline);
   }
   createCircle() {
-    this._createOverlay(OverlayTypes.Circle);
+    this.createOverlay(OverlayTypes.Circle);
   }
 
-  private _createOverlay(type: OverlayTypes) {
+  createOverlay(type: OverlayTypes) {
     this._store.dispatch(EditorAction.createOverlay(type));
   }