From 439d90cce1ee7d5a5200fb0b65e6a21d22d094ea Mon Sep 17 00:00:00 2001
From: Cmen <1176967590@qq.com>
Date: Wed, 2 Mar 2022 22:09:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=88=A0=E9=99=A4=E8=A6=86?=
 =?UTF-8?q?=E7=9B=96=E7=89=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/editor/Catalog/style.less   | 12 ++++++------
 src/editor/Menu/style.less      |  8 ++++----
 src/map/index.ts                | 11 +++++++++++
 src/store/GlobalController.ts   | 23 ++++++++++++++++++++---
 src/store/actions.ts            |  9 ++++++++-
 src/store/reducers/index.ts     | 10 ++++++++--
 src/store/reducers/map/index.ts | 16 ++++++++++++++++
 src/store/utils/index.ts        |  1 +
 src/types/enum.ts               |  1 +
 src/utils/hotkeys.ts            |  1 +
 src/utils/index.ts              |  1 +
 11 files changed, 77 insertions(+), 16 deletions(-)
 create mode 100644 src/store/utils/index.ts

diff --git a/src/editor/Catalog/style.less b/src/editor/Catalog/style.less
index fbdbc2d..e16906b 100644
--- a/src/editor/Catalog/style.less
+++ b/src/editor/Catalog/style.less
@@ -1,19 +1,19 @@
-.ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header{
+.ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header {
   padding: 6px 8px;
   font-size: 12px;
   background-color: #f7fafc;
 }
-.ant-collapse-content > .ant-collapse-content-box{
+.ant-collapse-content > .ant-collapse-content-box {
   padding: 4px 12px;
   font-size: 12px;
 }
-.overlay-item{
+.overlay-item {
   margin-bottom: 4px;
   cursor: pointer;
-  &:hover{
+  &:hover {
     background-color: #e5e6e7;
   }
 }
-.overlay-item-selected{
+.overlay-item-selected {
   background-color: #e5e6e7;
-}
\ No newline at end of file
+}
diff --git a/src/editor/Menu/style.less b/src/editor/Menu/style.less
index 33cb258..931d24c 100644
--- a/src/editor/Menu/style.less
+++ b/src/editor/Menu/style.less
@@ -1,9 +1,9 @@
-.menu-title{
+.menu-title {
   cursor: pointer;
 }
-.menu-item{
+.menu-item {
   width: 240px;
 }
-.menu-item-hot-key{
+.menu-item-hot-key {
   float: right;
-}
\ No newline at end of file
+}
diff --git a/src/map/index.ts b/src/map/index.ts
index 0b18da2..658860d 100644
--- a/src/map/index.ts
+++ b/src/map/index.ts
@@ -84,6 +84,9 @@ export class MapEditor extends Emitter {
         break;
       case Command.SelectOverlay:
         this._selectOverlays(mapState.selectedIds);
+        break;
+      case Command.DeleteOverlays:
+        this._deleteOverlays();
     }
   }
 
@@ -119,6 +122,14 @@ export class MapEditor extends Emitter {
     });
   }
 
+  _deleteOverlays() {
+    if (this._selectedIds?.length === 0) return;
+    this._selectedIds.forEach((id) => {
+      const { target } = this.overlayMap[id];
+      this.map.remove(target);
+    });
+  }
+
   _finishEditOverlay() {
     if (this._currentOverlayEditor == null) return;
     const target = this._currentOverlayEditor.finish();
diff --git a/src/store/GlobalController.ts b/src/store/GlobalController.ts
index a32112f..9c7e103 100644
--- a/src/store/GlobalController.ts
+++ b/src/store/GlobalController.ts
@@ -1,9 +1,11 @@
+import { message, Popconfirm, Modal } from "antd";
+import { registerHotkey, downloadJSON } from "@utils";
+
 import { IStore } from "./type";
-import { registerHotkey } from "@utils";
-import { getGeoJSON } from "./utils/getGeoJSON";
+import { getGeoJSON } from "./utils";
 import { OverlayTypes } from "../types/enum";
 import { EditorAction } from "./actions";
-import { downloadJSON } from "../utils/download";
+
 interface IGlobalController {
   saveGeoJSON: () => void;
   saveProject: () => void;
@@ -16,6 +18,7 @@ interface IGlobalController {
   createPolygon: () => void;
   createPolyline: () => void;
   createCircle: () => void;
+  deleteOverlays: () => void;
 }
 
 // 全局控制器, 用以复用一些快捷方法.
@@ -72,12 +75,24 @@ export class GlobelController implements IGlobalController {
     this._store.dispatch(EditorAction.createOverlay(type));
   }
 
+  deleteOverlays() {
+    const { selectedIds } = this.mapState;
+    if (selectedIds?.length == 0) return;
+    Modal.confirm({
+      title: "确定删除覆盖物吗?",
+      onOk: () => {
+        this._store.dispatch(EditorAction.deleteOverlays());
+      },
+    });
+  }
+
   private _bindOperations() {
     this.saveGeoJSON = this.saveGeoJSON.bind(this);
     this.createRectangle = this.createRectangle.bind(this);
     this.createPolygon = this.createPolygon.bind(this);
     this.createPolyline = this.createPolyline.bind(this);
     this.createCircle = this.createCircle.bind(this);
+    this.deleteOverlays = this.deleteOverlays.bind(this);
   }
 
   private _registerHotkeys() {
@@ -98,6 +113,8 @@ export class GlobelController implements IGlobalController {
       alt: true,
       ctrl: true,
     });
+    registerHotkey("Delete", { callback: this.deleteOverlays });
+
     registerHotkey("p", { callback: this.showCommand, alt: true });
     registerHotkey("1", {
       callback: this.createRectangle,
diff --git a/src/store/actions.ts b/src/store/actions.ts
index 22d609e..6416828 100644
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -5,6 +5,7 @@ export enum ActionTypes {
   CreateOverlay = "createOverlay",
   FinishEditOverlay = "finishEditOverlay",
   SelectOverlay = "selectOverlay",
+  DeleteOverlays = "deleteOverlays",
 }
 
 export type CreatedOverlay = {
@@ -12,7 +13,7 @@ export type CreatedOverlay = {
   type: OverlayTypes;
 };
 
-type ActionCreator = (payload: any) => { type: ActionTypes; payload: any };
+type ActionCreator = (payload?: any) => { type: ActionTypes; payload: any };
 
 export const EditorAction: Record<ActionTypes, ActionCreator> = {
   createOverlay(type: OverlayTypes) {
@@ -33,4 +34,10 @@ export const EditorAction: Record<ActionTypes, ActionCreator> = {
       payload: id,
     };
   },
+  deleteOverlays() {
+    return {
+      type: ActionTypes.DeleteOverlays,
+      payload: null,
+    };
+  },
 };
diff --git a/src/store/reducers/index.ts b/src/store/reducers/index.ts
index 540b992..7207cec 100644
--- a/src/store/reducers/index.ts
+++ b/src/store/reducers/index.ts
@@ -1,7 +1,12 @@
+import { IEditorState } from "../type";
 import { initState } from "../initState";
 import { ActionTypes } from "../actions";
-import { createOverlay, finishEditOverlay, selectOverlay } from "./map";
-import { IEditorState } from "@store";
+import {
+  createOverlay,
+  finishEditOverlay,
+  selectOverlay,
+  deleteOverlays,
+} from "./map";
 
 export type Action = {
   type: ActionTypes;
@@ -14,6 +19,7 @@ const actionReducers: Record<ActionTypes, ActionReducer> = {
   [ActionTypes.CreateOverlay]: createOverlay,
   [ActionTypes.FinishEditOverlay]: finishEditOverlay,
   [ActionTypes.SelectOverlay]: selectOverlay,
+  [ActionTypes.DeleteOverlays]: deleteOverlays,
   // addRect: undefined
 };
 
diff --git a/src/store/reducers/map/index.ts b/src/store/reducers/map/index.ts
index d2378c6..fef3464 100644
--- a/src/store/reducers/map/index.ts
+++ b/src/store/reducers/map/index.ts
@@ -11,6 +11,22 @@ export function createOverlay(state = initState, payload: any) {
   });
 }
 
+export function deleteOverlays(state = initState, payload: any) {
+  const { selectedIds } = state.map;
+  const [id] = selectedIds!;
+  const filterFunc = (overlay: IOverlay) => overlay.id !== id;
+  return produce(state, (draft) => {
+    // draft.map.status = Status.CreateOverlay;
+    draft.map.command = Command.DeleteOverlays;
+    draft.map.rectangles = draft.map.rectangles.filter(filterFunc);
+    draft.map.polygons = draft.map.polygons.filter(filterFunc);
+    draft.map.polylines = draft.map.polylines.filter(filterFunc);
+    draft.map.circles = draft.map.circles.filter(filterFunc);
+    draft.map.selectedIds = [];
+    // draft.map.overlayType = payload as OverlayTypes;
+  });
+}
+
 export function finishEditOverlay(state = initState, payload: any) {
   return produce(state, (draft) => {
     const overlay = payload as IOverlay;
diff --git a/src/store/utils/index.ts b/src/store/utils/index.ts
new file mode 100644
index 0000000..3793b30
--- /dev/null
+++ b/src/store/utils/index.ts
@@ -0,0 +1 @@
+export * from "./getGeoJSON";
diff --git a/src/types/enum.ts b/src/types/enum.ts
index 0041df4..82afeb3 100644
--- a/src/types/enum.ts
+++ b/src/types/enum.ts
@@ -13,6 +13,7 @@ export enum OverlayTypes {
 export enum Command {
   CreateOverlay = "createOveraly",
   SelectOverlay = "selectOverlay",
+  DeleteOverlays = "deleteOverlays",
 }
 
 // 地图状态.
diff --git a/src/utils/hotkeys.ts b/src/utils/hotkeys.ts
index 36e8c7a..8e4c48d 100644
--- a/src/utils/hotkeys.ts
+++ b/src/utils/hotkeys.ts
@@ -15,6 +15,7 @@ export const registerHotkey = (key: string, config: HotkeyConfig) => {
 window.onkeydown = function (e) {
   const { key } = e;
   const listeners = Hotkeys[key];
+  // console.log(key);
 
   if (listeners == null || listeners.length === 0) return;
   e.stopPropagation();
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 912d418..34ea313 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,6 +1,7 @@
 import { OverlayTypes } from "@types";
 
 export * from "./hotkeys";
+export * from "./download";
 
 export function getOverlayPaths(target: AMap.MapOverlay, type: OverlayTypes) {
   if (type === OverlayTypes.Rectangle) {