diff --git a/index.html b/index.html index a9f505a..b74017c 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Document + Fine-GeoJSONEditor, 好用的在线GeoJSON编辑工具
diff --git a/src/editor/Menu/Edit.tsx b/src/editor/Menu/Edit.tsx new file mode 100644 index 0000000..50ba4ac --- /dev/null +++ b/src/editor/Menu/Edit.tsx @@ -0,0 +1,21 @@ +import { editorAction } from "@store"; +import MenuGroup from "./MenuGroup"; + +const EditMenu = () => { + return ( + + ); +}; + +export default EditMenu; diff --git a/src/editor/Menu/index.tsx b/src/editor/Menu/index.tsx index 673dde1..fecfc00 100644 --- 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 ( <> + ); }; diff --git a/src/editor/Menu/style.less b/src/editor/Menu/style.less index 931d24c..7a7c4d8 100644 --- 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; diff --git a/src/editor/Plot/index.less b/src/editor/Plot/index.less index 8e81732..83e5ae8 100644 --- 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; diff --git a/src/editor/Plot/index.tsx b/src/editor/Plot/index.tsx index e8e9195..793bc8c 100644 --- a/src/editor/Plot/index.tsx +++ b/src/editor/Plot/index.tsx @@ -23,7 +23,7 @@ const Plot = () => { return ( <>
-
+ {/*
*/}
diff --git a/src/map/MapEditor.ts b/src/map/MapEditor.ts index c3d79c8..b78e45c 100644 --- 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) { diff --git a/src/map/type.ts b/src/map/type.ts index c498a6d..84c4654 100644 --- 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 { diff --git a/src/store/actions/StoreAction.ts b/src/store/actions/StoreAction.ts index c3180b3..bb2e13d 100644 --- 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 = { createOverlay(type: OverlayTypes) { return { type: ActionTypes.CreateOverlay, @@ -40,4 +46,9 @@ export const StoreAction = { payload: state, }; }, + clearOverlays() { + return { + type: ActionTypes.ClearOverlays, + }; + }, }; diff --git a/src/store/actions/index.ts b/src/store/actions/index.ts index 605e2f3..6988871 100644 --- 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", { diff --git a/src/store/reducers/index.ts b/src/store/reducers/index.ts index f2c2175..491655e 100644 --- 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.SelectOverlay]: selectOverlay, [ActionTypes.DeleteOverlays]: deleteOverlays, [ActionTypes.ReplaceState]: replaceState, + [ActionTypes.ClearOverlays]: clearOverlays, }; function replaceState(state = initState, payload: IEditorState) { diff --git a/src/store/reducers/map/index.ts b/src/store/reducers/map/index.ts index f1d8011..d576cb4 100644 --- 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!;