fix(PolyEditor): fix PolyEditor editing issue.

uiwjs · Aug 30, 2023 · 2ae6558 · 2ae6558
1 parent a29e9b8
commit 2ae6558
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/packages/poly-editor/README.md b/packages/poly-editor/README.md
@@ -9,6 +9,9 @@ import { PolyEditor } from '@uiw/react-amap';
 import { PolyEditor } from '@uiw/react-amap-poly-editor';
 ```
 
+> **注意：** 官方文档已经没有这个 API 的文档了
+<!--rehype:style=background: rgb(255 0 0 / 40%);padding: 10px 15px;-->
+
 ### 基本用法
 
 注意，需要加载 `<APILoader plugin="AMap.PolyEditor">`，需要加载 `AMap.PolyEditor`<!--rehype:style=background: #ffe3da;color: #ff5722;--> 插件，如果点击进入当前页面，需要 `刷新`<!--rehype:style=background: #e91e63;color: #fff;--> 页面。
@@ -61,8 +64,10 @@ const Example = () => {
             <PolyEditor
               active={active}
               onEnd={(e) => {
-                console.log('onEnd:>>',e.target.getPath());
-                setPolygonPath(e.target.getPath())
+                if (e.target) {
+                  console.log('onEnd:>>',e.target?.getPath());
+                  setPolygonPath(e.target?.getPath())
+                }
               }}
               onAdjust={() => {
                 console.log('onAdjust:>>')
@@ -132,8 +137,10 @@ const Example = () => {
             <PolyEditor
               active={active}
                onEnd={(e) => {
-                console.log('onEnd:>>',e.target.getPath());
-                setPolylinePath(e.target.getPath())
+                if (e.target) {
+                  console.log('onEnd:>>',e.target.getPath());
+                  setPolylinePath(e.target.getPath())
+                }
               }}
               onAdjust={() => {
                 console.log('onAdjust:>>')

diff --git a/packages/poly-editor/package.json b/packages/poly-editor/package.json
@@ -22,6 +22,7 @@
     "amap",
     "editor",
     "polygon",
+    "polyline",
     "poly-editor",
     "map",
     "react",
@@ -37,6 +38,7 @@
   },
   "dependencies": {
     "@uiw/react-amap-map": "5.0.11",
+    "@uiw/react-amap-polyline": "5.0.11",
     "@uiw/react-amap-polygon": "5.0.11",
     "@uiw/react-amap-types": "5.0.11",
     "@uiw/react-amap-utils": "5.0.11"

diff --git a/packages/poly-editor/src/index.tsx b/packages/poly-editor/src/index.tsx
@@ -1,6 +1,8 @@
-import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react';
 import { useEventProperties } from '@uiw/react-amap-utils';
 import { useMapContext } from '@uiw/react-amap-map';
+import { PolylineContext } from '@uiw/react-amap-polyline';
+import { PolygonContext } from '@uiw/react-amap-polygon';
 
 export interface PolyEditorProps extends Partial<AMap.PolyEditor>, AMap.PolyEditorEvents {
   /** 是否开启编辑功能 */
@@ -9,7 +11,9 @@ export interface PolyEditorProps extends Partial<AMap.PolyEditor>, AMap.PolyEdit
 }
 
 export const PolyEditor = forwardRef<PolyEditorProps, PolyEditorProps>((props, ref) => {
-  const { active, polyElement } = props;
+  const polyline = useContext(PolylineContext);
+  const polygon = useContext(PolygonContext);
+  const { active, polyElement = polyline || polygon } = props;
   const { map } = useMapContext();
   const [visiable, setVisiable] = useState<boolean>(true);
   const [polyEditor, setPolyEditor] = useState<AMap.PolyEditor>();