From 0946959f5c345c5edf8017fb18db43db10ee72b3 Mon Sep 17 00:00:00 2001
From: RoXoM <xyy94813@sina.com>
Date: Sat, 3 Jun 2023 15:47:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=BB=84=E4=BB=B6=20?=
 =?UTF-8?q?AMapMouseTool?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AMapMouseTool/AMapMouseTool.tsx           | 65 +++++++++++++++++++
 src/components/AMapMouseTool/index.ts         |  2 +
 src/components/AMapMouseTool/interface.ts     | 23 +++++++
 .../stories/AMapMouseTool.stories.tsx         | 63 ++++++++++++++++++
 src/index.ts                                  |  2 +
 5 files changed, 155 insertions(+)
 create mode 100644 src/components/AMapMouseTool/AMapMouseTool.tsx
 create mode 100644 src/components/AMapMouseTool/index.ts
 create mode 100644 src/components/AMapMouseTool/interface.ts
 create mode 100644 src/components/AMapMouseTool/stories/AMapMouseTool.stories.tsx

diff --git a/src/components/AMapMouseTool/AMapMouseTool.tsx b/src/components/AMapMouseTool/AMapMouseTool.tsx
new file mode 100644
index 0000000..8ef20fc
--- /dev/null
+++ b/src/components/AMapMouseTool/AMapMouseTool.tsx
@@ -0,0 +1,65 @@
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  useImperativeHandle,
+} from 'react';
+
+import useAMap from '../../hooks/useAMap';
+import useAMapEventBinder from '../../hooks/useAMapEventBinder';
+
+import type { AMapMouseToolProps } from './interface';
+
+/**
+ *
+ * Origin Docs See:
+ * https://lbs.amap.com/api/javascript-api/reference/plugin#AMap.MouseTool
+ *
+ */
+const AMapMouseTool = forwardRef<AMap.MouseTool, AMapMouseToolProps>(
+  ({
+    type, options, onCompleted,
+  }, ref) => {
+    const { __AMAP__: AMap, map } = useAMap();
+    const [curInstance, setInstance] = useState<AMap.MouseTool | null>(null);
+
+    useEffect(() => {
+      if (!AMap || !map) return;
+
+      const init = () => {
+        const instance = new AMap.MouseTool(map);
+        setInstance(instance);
+      };
+
+      if (AMap.MouseTool) {
+        init();
+      } else {
+        AMap.plugin(['AMap.MouseTool'], init);
+      }
+    }, [AMap, map]);
+
+    useImperativeHandle(ref, () => curInstance!, [curInstance]);
+
+    useAMapEventBinder(curInstance, 'draw', onCompleted);
+
+    useEffect(() => {
+      let clearEffect;
+      if (!curInstance) return clearEffect;
+
+      clearEffect = () => curInstance.close(false);
+
+      curInstance[type]((options ?? {}) as { [k: string]: any });
+
+      return clearEffect;
+    }, [curInstance, options, type]);
+
+    return null;
+  },
+);
+
+AMapMouseTool.defaultProps = {
+  options: {},
+  onCompleted: undefined,
+};
+
+export default AMapMouseTool;
diff --git a/src/components/AMapMouseTool/index.ts b/src/components/AMapMouseTool/index.ts
new file mode 100644
index 0000000..b161c54
--- /dev/null
+++ b/src/components/AMapMouseTool/index.ts
@@ -0,0 +1,2 @@
+export * from './interface';
+export { default } from './AMapMouseTool';
diff --git a/src/components/AMapMouseTool/interface.ts b/src/components/AMapMouseTool/interface.ts
new file mode 100644
index 0000000..8961745
--- /dev/null
+++ b/src/components/AMapMouseTool/interface.ts
@@ -0,0 +1,23 @@
+export type AMapMouseToolProps = {
+  type:
+  | 'marker'
+  | 'circle'
+  | 'rectangle'
+  | 'polyline'
+  | 'polygon'
+  | 'measureArea'
+  | 'rule'
+  | 'rectZoomIn'
+  | 'rectZoomOut';
+  options?:
+  | AMap.MarkerOptions
+  | AMap.PolylineOptions
+  | AMap.PolygonOptions
+  | AMap.RectangleOptions
+  | AMap.CircleOptions
+  | AMap.PolylineOptions
+  | AMap.PolygonOptions
+  | AMap.PolygonOptions
+  | AMap.PolygonOptions;
+  onCompleted?: (e: any) => void;
+};
diff --git a/src/components/AMapMouseTool/stories/AMapMouseTool.stories.tsx b/src/components/AMapMouseTool/stories/AMapMouseTool.stories.tsx
new file mode 100644
index 0000000..a3a5587
--- /dev/null
+++ b/src/components/AMapMouseTool/stories/AMapMouseTool.stories.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { actions } from '@storybook/addon-actions';
+
+import { AMapMouseTool, AMapMouseToolProps } from 'index';
+import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
+
+const eventHandler = actions('onCompleted');
+
+export default {
+  title: 'Components/Tools/AMapMouseTool',
+  decorators: [withAMapContainer],
+  args: {
+    type: 'polygon',
+    options: {
+      strokeColor: 'red',
+      strokeWeight: 4,
+    },
+    onCompleted: eventHandler.onCompleted,
+  },
+  argTypes: {
+    type: {
+      description: '工具类型',
+      type: { required: true, summary: 'string ' },
+      control: {
+        type: 'select',
+        options: [
+          'marker',
+          'circle',
+          'rectangle',
+          'polyline',
+          'polygon',
+          'measureArea',
+          'rule',
+          'rectZoomIn',
+          'rectZoomOut',
+        ],
+      },
+    },
+    options: {
+      description: '额外参数',
+      type: { summary: 'object' },
+    },
+    onCompleted: {
+      description: '鼠标工具绘制覆盖物结束时触发此事件，obj对象为绘制出来的覆盖物对象',
+      type: { summary: '(event: AMap.Event<"draw">) => void' },
+    },
+  },
+} as Meta;
+
+const Template: Story<AMapMouseToolProps> = (args) => (
+  <AMapMouseTool {...args} />
+);
+
+export const CommonUse = Template.bind({});
+CommonUse.args = {
+  type: 'polygon',
+  options: {
+    strokeColor: 'red',
+    strokeWeight: 4,
+  },
+  onCompleted: eventHandler.onCompleted,
+};
diff --git a/src/index.ts b/src/index.ts
index 80fa247..c0c0d49 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -17,3 +17,5 @@ export {
   AMapGeoJSONGetOverlayCallback,
   AMapGeoJSONProps,
 } from './components/AMapGeoJSON';
+
+export { default as AMapMouseTool, AMapMouseToolProps } from './components/AMapMouseTool';