diff --git a/package.json b/package.json index 0c6d5ee..8d53b21 100644 --- a/package.json +++ b/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", diff --git a/src/editor/Plot/index.tsx b/src/editor/Plot/index.tsx index 88126c3..d454032 100644 --- a/src/editor/Plot/index.tsx +++ b/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(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 ( diff --git a/src/editor/Plot/mapHooks.ts b/src/editor/Plot/mapHooks.ts new file mode 100644 index 0000000..277a030 --- /dev/null +++ b/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) { + // +} diff --git a/src/map/editors/BaseLayerEditor.ts b/src/map/editors/BaseLayerEditor.ts index 42d1083..86b01a0 100644 --- a/src/map/editors/BaseLayerEditor.ts +++ b/src/map/editors/BaseLayerEditor.ts @@ -12,4 +12,9 @@ export abstract class BaseLayerEditor { this.editor.setTarget(null); this.editor.open(); } + + finish() { + // const target = this.editor.getT + this.editor.setTarget(null); + } } diff --git a/src/map/index.ts b/src/map/index.ts index d05f16b..fc25c7b 100644 --- a/src/map/index.ts +++ b/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); diff --git a/src/types/enum.ts b/src/types/enum.ts new file mode 100644 index 0000000..8844e37 --- /dev/null +++ b/src/types/enum.ts @@ -0,0 +1,3 @@ +export enum EventTypes { + FinishCreateOverlay = "finishCreateOverlay", +} diff --git a/src/utils/hotkeys.ts b/src/utils/hotkeys.ts new file mode 100644 index 0000000..36e8c7a --- /dev/null +++ b/src/utils/hotkeys.ts @@ -0,0 +1,34 @@ +export type HotkeyConfig = { + ctrl?: boolean; + alt?: boolean; + shift?: boolean; + callback: () => void; +}; + +const Hotkeys: Record = {}; + +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(); + }); +}; diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 0000000..68e29d3 --- /dev/null +++ b/src/utils/index.ts @@ -0,0 +1 @@ +export * from "./hotkeys"; diff --git a/tsconfig.json b/tsconfig.json index 8822758..48bfc70 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -20,6 +20,7 @@ "@editor": ["./src/editor"], "@map": ["./src/map"], "@types": ["./src/types"], + "@utils": ["./src/utils"], } }, "include": ["./src"] diff --git a/vite.config.js b/vite.config.js index 2153bbc..79f9d8e 100644 --- a/vite.config.js +++ b/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: { diff --git a/yarn.lock b/yarn.lock index 3cb2235..faf6c8f 100644 --- a/yarn.lock +++ b/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"