初始化事件系统

package.json

@@ -8,6 +8,7 @@
     "lint": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,less,md}\""
   },
   "dependencies": {
+    "@finevis/emitter": "^1.0.4",
     "antd": "^4.16.13",
     "immer": "^9.0.7",
     "less": "^4.1.2",

src/editor/Plot/index.tsx

@@ -3,7 +3,9 @@ import { useEffect, useRef, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { MapEditor } from "@map";
 import { editorAction, IEditorState } from "@store";
+
 import Tools from "./Tools";
+import { registerMapEventHooks } from "./mapHooks";
 
 import "./index.less";
 
@@ -18,16 +20,17 @@ const Plot = () => {
 
   const [mapEditor, setMapEditor] = useState<MapEditor | null>(null);
 
-  // !mapEditor &&
   useEffect(() => {
     if (mapEditor == null) {
       const editor = new MapEditor(mapStageRef.current!);
+      (window as any).mapEditor = editor;
       setMapEditor(editor);
+      registerMapEventHooks(editor, dispatch);
       editor.init().then(() => {
         editor.update(mapState);
       });
     }
-  }, [mapEditor, mapState]);
+  });
   mapEditor?.update(mapState);
 
   return (

src/editor/Plot/mapHooks.ts

@@ -0,0 +1,8 @@
+import { Dispatch } from "react";
+import { editorAction, IEditorState } from "@store";
+import { MapEditor } from "@map";
+
+// 注册地图的事件钩子
+export function registerMapEventHooks(map: MapEditor, dispatch: Dispatch<any>) {
+  //
+}

src/map/editors/BaseLayerEditor.ts

@@ -12,4 +12,9 @@ export abstract class BaseLayerEditor<T extends AMap.BaseEditor> {
     this.editor.setTarget(null);
     this.editor.open();
   }
+
+  finish() {
+    // const target = this.editor.getT
+    this.editor.setTarget(null);
+  }
 }

src/map/index.ts

@@ -1,13 +1,18 @@
-import "@amap/amap-jsapi-types";
+import Emitter from "@finevis/emitter";
 import "../types";
 import { IMapState } from "@store";
 import { RectangleEditor } from "./editors";
 
-export class MapEditor {
+import "@amap/amap-jsapi-types";
+import { registerHotkey } from "../utils/hotkeys";
+import { EventTypes } from "../types/enum";
+
+export class MapEditor extends Emitter {
   dom: HTMLDivElement;
   private _map: AMap.Map | undefined;
   private rectangleEditor: RectangleEditor | undefined;
   constructor(dom: HTMLDivElement) {
+    super();
     this.dom = dom;
   }
 
@@ -29,6 +34,8 @@ export class MapEditor {
     });
     this._map = new AMap.Map(this.dom);
     this.initEditors();
+    // Space的key是空字符串, 这就离谱.
+    registerHotkey(" ", { callback: this.finishCreateOverlay.bind(this) });
   }
 
   update(state: IMapState) {
@@ -37,6 +44,11 @@ export class MapEditor {
     }
   }
 
+  finishCreateOverlay() {
+    this.rectangleEditor?.finish();
+    this.emit(EventTypes.FinishCreateOverlay);
+  }
+
   initEditors() {
     const { map } = this;
     this.rectangleEditor = new RectangleEditor(map);

src/types/enum.ts

@@ -0,0 +1,3 @@
+export enum EventTypes {
+  FinishCreateOverlay = "finishCreateOverlay",
+}

src/utils/hotkeys.ts

@@ -0,0 +1,34 @@
+export type HotkeyConfig = {
+  ctrl?: boolean;
+  alt?: boolean;
+  shift?: boolean;
+  callback: () => void;
+};
+
+const Hotkeys: Record<string, HotkeyConfig[]> = {};
+
+export const registerHotkey = (key: string, config: HotkeyConfig) => {
+  Hotkeys[key] = Hotkeys[key] || [];
+  Hotkeys[key].push(config);
+};
+
+window.onkeydown = function (e) {
+  const { key } = e;
+  const listeners = Hotkeys[key];
+
+  if (listeners == null || listeners.length === 0) return;
+  e.stopPropagation();
+  e.preventDefault();
+
+  // 异或操作.
+  const xor = (a: boolean, b: boolean) => a !== b;
+
+  listeners.forEach((config) => {
+    const { callback, shift = false, ctrl = false, alt = false } = config;
+    if (xor(ctrl, e.ctrlKey)) return;
+    if (xor(shift, e.shiftKey)) return;
+    if (xor(alt, e.altKey)) return;
+
+    callback();
+  });
+};

src/utils/index.ts

@@ -0,0 +1 @@
+export * from "./hotkeys";

tsconfig.json

@@ -20,6 +20,7 @@
       "@editor": ["./src/editor"],
       "@map": ["./src/map"],
       "@types": ["./src/types"],
+      "@utils": ["./src/utils"],
     }
   },
   "include": ["./src"]

vite.config.js

@@ -12,6 +12,7 @@ export default defineConfig({
       "@map": path.resolve(__dirname, "src/map"),
       "@app": path.resolve(__dirname, "src/app"),
       "@types": path.resolve(__dirname, "src/types"),
+      "@utils": path.resolve(__dirname, "src/utils"),
     },
   },
   server: {

yarn.lock

@@ -1308,6 +1308,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@finevis/emitter@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.npmmirror.com/@finevis/emitter/download/@finevis/emitter-1.0.4.tgz#a127b66470437378dc92a6d7f34b7f272f0e9fea"
+  integrity sha1-oSe2ZHBDc3jckqbX80t/Jy8On+o=
+
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.2"
   resolved "https://registry.npmmirror.com/@humanwhocodes/config-array/download/@humanwhocodes/config-array-0.9.2.tgz#68be55c737023009dfc5fe245d51181bb6476914"