feat(DrawingManager): support events. (#321)

uiwjs · Dec 1, 2023 · b9b6d37 · b9b6d37
1 parent aa84b63
commit b9b6d37
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 20 deletions.
diff --git a/packages/drawing-manager/README.md b/packages/drawing-manager/README.md
@@ -45,6 +45,9 @@ const Example = () => {
           polylineOptions={styleOptions}
           polygonOptions={styleOptions}
           rectangleOptions={styleOptions}
+          onCircleComplete={(overlay) => {
+            console.log("overlay", overlay)
+          }}
         />
       </Map>
     </>
@@ -146,6 +149,17 @@ export default Demo;
 | scale | 工具栏的缩放比例,默认为1 | Number | - |
 | drawingModes | 工具栏上可以选择出现的绘制模式 | Array | - |
 
+## 事件
+
+| 参数 | 说明 | ----- |
+| ----- | ----- | ----- |
+onCircleComplete | 绘制圆完成后，派发的事件接口 | `(overlay: BMap.Circle) => void;` |
+onMarkerComplete | 绘制点完成后，派发的事件接口 | `(overlay: BMap.Marker) => void;` |
+onOverlayComplete | 鼠标绘制完成后，派发总事件的接口 | `(e: any) => void;` |
+onPolygonComplete | 绘制多边形完成后，派发的事件接口 | `(overlay: BMap.Polygon) => void;` |
+onPolylineComplete | 绘制线完成后，派发的事件接口 | `(overlay: BMap.Polyline) => void;` |
+onRectangleComplete | 绘制矩形完成后，派发的事件接口 | `(overlay: BMap.Polygon) => void;` |
+
 ### 官方文档
 
 - demo: https://lbsyun.baidu.com/jsdemo.htm#f0_7

diff --git a/packages/drawing-manager/src/index.tsx b/packages/drawing-manager/src/index.tsx
@@ -3,7 +3,10 @@ import { MapChildProps } from '@uiw/react-baidu-map-map';
 import { useDrawingManager } from './useDrawingManager';
 
 export * from './useDrawingManager';
-export interface DrawingManagerProps extends BMap.DrawingManagerOptions, MapChildProps {}
+export interface DrawingManagerProps
+  extends BMapLib.DrawingManagerOptions,
+    BMapLib.DrawingManagerEvents,
+    MapChildProps {}
 
 export default React.forwardRef<DrawingManagerProps & { drawingManager?: BMapLib.DrawingManager }, DrawingManagerProps>(
   (props, ref) => {

diff --git a/packages/drawing-manager/src/useDrawingManager.tsx b/packages/drawing-manager/src/useDrawingManager.tsx
@@ -1,6 +1,6 @@
 import { useState, useMemo } from 'react';
 import { useMapContext } from '@uiw/react-baidu-map-map';
-import { requireScript, requireCss } from '@uiw/react-baidu-map-utils';
+import { requireScript, requireCss, useEventProperties } from '@uiw/react-baidu-map-utils';
 import { DrawingManagerProps } from '.';
 
 export interface UseDrawingManager extends DrawingManagerProps {}
@@ -35,7 +35,7 @@ export function useDrawingManager(props = {} as UseDrawingManager) {
     polylineOptions,
     polygonOptions,
     rectangleOptions,
-  } as BMap.DrawingManagerOptions;
+  } as BMapLib.DrawingManagerOptions;
 
   useMemo(() => {
     // 如果第一次加载，会执行下面的
@@ -78,6 +78,15 @@ export function useDrawingManager(props = {} as UseDrawingManager) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [map, loadMapLib, bMapLib, drawingManager]);
 
+  useEventProperties<BMapLib.DrawingManager, UseDrawingManager>(drawingManager!, props, [
+    'CircleComplete',
+    'MarkerComplete',
+    'OverlayComplete',
+    'PolygonComplete',
+    'PolylineComplete',
+    'RectangleComplete',
+  ]);
+
   return {
     drawingManager,
     setDrawingManager,

diff --git a/packages/types/src/bmaplib.d.ts b/packages/types/src/bmaplib.d.ts
@@ -4,7 +4,21 @@ declare global {
   }
 }
 
-declare namespace BMap {
+declare namespace BMapLib {
+  type Callback = (...args: any[]) => void;
+
+  type Callback<T> = (e: any, overlay: T) => void;
+
+  /**
+   * 弧线
+   */
+  class CurveLine {
+    constructor(points: BMap.Point[], opts?: CurveLineOptions);
+  }
+  interface CurveLineOptions extends BMap.PolylineOptions {}
+  interface CurveLine extends BMap.Polyline {}
+  interface CurveLineEvents extends BMap.PolylineEvents {}
+
   interface DrawingManagerOptions {
     /**
      * 是否开启绘制模式
@@ -41,23 +55,38 @@ declare namespace BMap {
     scale?: number;
     drawingModes?: BMap.DrawingType[];
   }
-}
-
-declare namespace BMapLib {
-  type Callback = (...args: any[]) => void;
-
-  type Callback<T> = (e: any, overlay: T) => void;
-
-  /**
-   * 弧线
-   */
-  class CurveLine {
-    constructor(points: BMap.Point[], opts?: CurveLineOptions);
+  interface DrawingManagerEvents {
+    /**
+     * 绘制圆完成后，派发的事件接口
+     * @param {BMap.Circle} overlay
+     */
+    onCircleComplete?: (overlay: BMap.Circle) => void;
+    /**
+     * 绘制点完成后，派发的事件接口
+     * @param {BMap.Marker} overlay
+     */
+    onMarkerComplete?: (overlay: BMap.Marker) => void;
+    /**
+     * {Event Object} 鼠标绘制完成后，派发总事件的接口
+     * @param e
+     */
+    onOverlayComplete?: (e: any) => void;
+    /**
+     * 绘制多边形完成后，派发的事件接口
+     * @param {BMap.Polygon} overlay
+     */
+    onPolygonComplete?: (overlay: BMap.Polygon) => void;
+    /**
+     * 绘制线完成后，派发的事件接口
+     * @param {BMap.Polyline} overlay
+     */
+    onPolylineComplete?: (overlay: BMap.Polyline) => void;
+    /**
+     * 绘制矩形完成后，派发的事件接口
+     * @param {BMap.Polygon} overlay
+     */
+    onRectangleComplete?: (overlay: BMap.Polygon) => void;
   }
-  interface CurveLineOptions extends BMap.PolylineOptions {}
-  interface CurveLine extends BMap.Polyline {}
-  interface CurveLineEvents extends BMap.PolylineEvents {}
-
   /**
    * 鼠标绘制管理
    */