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 = { createOverlay(type: OverlayTypes) { @@ -33,4 +34,10 @@ export const EditorAction: Record = { 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.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) {