清楚所有覆盖物功能

3 years ago · 2d561fa990
12 changed files with 68 additions and 10 deletions
--- a/index.html
+++ b/index.html
@ -4,7 +4,7 @@
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <title>Fine-GeoJSONEditor, 好用的在线GeoJSON编辑工具</title>
 </head>
 <body>
  <div id="app"></div>
--- a/src/editor/Menu/Edit.tsx
+++ b/src/editor/Menu/Edit.tsx
@ -0,0 +1,21 @@
+import { editorAction } from "@store";
+import MenuGroup from "./MenuGroup";
+
+const EditMenu = () => {
+  return (
+    <MenuGroup
+      {...{
+        name: "编辑",
+        items: [
+          {
+            name: "清空覆盖物",
+            onClick: editorAction.clearOverlays,
+            hotkey: "Ctrl+Alt+C",
+          },
+        ],
+      }}
+    />
+  );
+};
+
+export default EditMenu;
--- a/src/editor/Menu/index.tsx
+++ b/src/editor/Menu/index.tsx
@ -1,4 +1,5 @@
 import FileMenu from "./File";
+import EditMenu from "./Edit";

 import "./style.less";

@ -6,6 +7,7 @@ const Menu = () => {
  return (
    <>
      <FileMenu />
+      <EditMenu />
    </>
  );
 };
--- a/src/editor/Menu/style.less
+++ b/src/editor/Menu/style.less
@ -1,5 +1,6 @@
 .menu-title {
  cursor: pointer;
+  margin-right: 12px;
 }
 .menu-item {
  width: 240px;
--- a/src/editor/Plot/index.less
+++ b/src/editor/Plot/index.less
@ -1,8 +1,8 @@
 .map-stage {
  position: absolute;
  width: 100%;
-  height: calc(100% - 40px);
-  top: 40px;
+  height: 100%; //calc(100% - 40px);
+  // top: 40px;
  left: 0;
  z-index: 0;
 }
@ -14,7 +14,7 @@
  border-bottom: 1px solid #ccc;
 }
 .tools-area {
-  margin-top: 40px;
+  // margin-top: 40px;
  padding: 20px;
  position: relative;
  z-index: 10;
--- a/src/editor/Plot/index.tsx
+++ b/src/editor/Plot/index.tsx
@ -23,7 +23,7 @@ const Plot = () => {
  return (
    <>
      <div className="map-stage" ref={mapStageRef}></div>
-      <div className="tools-properties"></div>
+      {/* <div className="tools-properties"></div> */}
      <div className="tools-area">
        <Tools />
      </div>
--- a/src/map/MapEditor.ts
+++ b/src/map/MapEditor.ts
@ -143,6 +143,7 @@ export class MapEditor extends Emitter implements IMapEditor {
      this.map.remove(this.overlayMap[id].target);
    }
    this.overlayMap = {};
+    this.selectedIds = [];
  }

  createOverlay(type: OverlayTypes) {
--- a/src/map/type.ts
+++ b/src/map/type.ts
@ -8,6 +8,7 @@ export interface IMapEditor {
  importGeoJSON(geojson: GeoJSON.FeatureCollection): void;
  selectOverlays(ids?: string[]): void;
  deleteOverlays(): void;
+  clearOverlays(): void;
 }

 export interface IOverlay {
--- a/src/store/actions/StoreAction.ts
+++ b/src/store/actions/StoreAction.ts
@ -7,9 +7,15 @@ export enum ActionTypes {
  SelectOverlay = "selectOverlay",
  DeleteOverlays = "deleteOverlays",
  ReplaceState = "replaceState",
+  ClearOverlays = "clearOverlays",
 }

-export const StoreAction = {
+type ActionCreator = (payload?: any) => {
+  type: ActionTypes;
+  payload?: any;
+};
+
+export const StoreAction: Record<ActionTypes, ActionCreator> = {
  createOverlay(type: OverlayTypes) {
    return {
      type: ActionTypes.CreateOverlay,
@ -40,4 +46,9 @@ export const StoreAction = {
      payload: state,
    };
  },
+  clearOverlays() {
+    return {
+      type: ActionTypes.ClearOverlays,
+    };
+  },
 };
--- a/src/store/actions/index.ts
+++ b/src/store/actions/index.ts
@ -106,8 +106,14 @@ export class EditorAction {
  saveTemp() {
    //
  }
-  clearEditor() {
-    //
+  clearOverlays() {
+    Modal.confirm({
+      title: "确定移除所有覆盖物吗?",
+      onOk: () => {
+        this.mapEditor?.clearOverlays();
+        this.dispatch(StoreAction.clearOverlays());
+      },
+    });
  }
  openGeoJSON() {
    //
@ -137,6 +143,7 @@ export class EditorAction {
    this.createPolyline = this.createPolyline.bind(this);
    this.createCircle = this.createCircle.bind(this);
    this.deleteOverlays = this.deleteOverlays.bind(this);
+    this.clearOverlays = this.clearOverlays.bind(this);
  }

  private _registerHotkeys() {
@ -149,7 +156,11 @@ export class EditorAction {
    });
    registerHotkey("s", { callback: this.saveTemp, alt: true });
    // 清空
-    registerHotkey("c", { callback: this.clearEditor, alt: true });
+    registerHotkey("c", {
+      callback: this.clearOverlays,
+      alt: true,
+      ctrl: true,
+    });
    //
    registerHotkey("o", { callback: this.openGeoJSON, alt: true });
    registerHotkey("o", {
--- a/src/store/reducers/index.ts
+++ b/src/store/reducers/index.ts
@ -2,7 +2,12 @@ import produce from "immer";
 import { IEditorState } from "../type";
 import { initState } from "../initState";
 import { ActionTypes } from "../actions";
-import { createOverlay, finishEditOverlay, deleteOverlays } from "./map";
+import {
+  createOverlay,
+  finishEditOverlay,
+  deleteOverlays,
+  clearOverlays,
+} from "./map";

 export type Action = {
  type: ActionTypes;
@ -17,6 +22,7 @@ const actionReducers: Record<ActionTypes, ActionReducer> = {
  [ActionTypes.SelectOverlay]: selectOverlay,
  [ActionTypes.DeleteOverlays]: deleteOverlays,
  [ActionTypes.ReplaceState]: replaceState,
+  [ActionTypes.ClearOverlays]: clearOverlays,
 };

 function replaceState(state = initState, payload: IEditorState) {
--- a/src/store/reducers/map/index.ts
+++ b/src/store/reducers/map/index.ts
@ -11,6 +11,10 @@ export function createOverlay(state = initState, payload: OverlayTypes) {
  });
 }

+export function clearOverlays(state = initState) {
+  return initState;
+}
+
 export function deleteOverlays(state = initState, payload: any) {
  const { selectedIds } = state;
  const [id] = selectedIds!;