feat: 新增删除节点能力 (#90)

* feat: 1.新增右键单击节点进行删除结点操作

* fix: 1.修复调用 enable 方法之后，光标未变成绘制态的问题

* docs: 1.文档修正：顶点 => 节点

* feat: 1.升级版本号

Co-authored-by: yanxiong <oujinhui.ojh@antgroup.com>

docs/docs/event.md

@@ -3,18 +3,19 @@ title: 事件
 hide: true
 ---
 
-| 事件名                                 | 说明                                                   | 类型                                                                      |
-| -------------------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------- |
-| DrawEvent.Init | 'init'           | Draw 初始化完成的事件                                  | `function(drawer: Draw)`                                                  |
-| DrawEvent.Destroy | 'destroy'     | Draw 完成销毁的事件                                    | `function(drawer: Draw)`                                                  |
-| DrawEvent.Enable | 'enable'       | 启用绘制的事件                                         | `function(drawer: Draw)`                                                  |
-| DrawEvent.Disable | 'disable'     | 禁用绘制的事件                                         | `function(drawer: Draw)`                                                  |
-| DrawEvent.Clear | 'clear'         | 清空数据的事件                                         | `function(drawer: Draw)`                                                  |
-| DrawEvent.AddNode | 'addNode'     | 添加结点                                               | `(newNode: Feature,editFeature: Feature, featureList: Feature[]) => void` |
-| DrawEvent.Add | 'add'             | 新增的事件                                             | `function(newFeature: Feature, featureList: Feature[])`                   |
-| DrawEvent.Edit | 'edit'           | 编辑(位移或顶点发生变更)的事件                         | `function(editFeature: Feature, featureList: Feature[])`                  |
-| DrawEvent.Remove | 'remove'       | 删除的事件                                             | `function(deleteFeature: Feature, featureList: Feature[])`                |
-| DrawEvent.DragStart | 'dragStart' | 开始拖拽的事件                                         | `function(dragFeature: Feature, featureList: Feature[])`                  |
-| DrawEvent.Dragging | 'dragging'   | 拖拽中的事件                                           | `function(dragFeature: Feature, featureList: Feature[])`                  |
-| DrawEvent.DragEnd | 'dragEnd'     | 拖拽结束的事件                                         | `function(dragFeature: Feature, featureList: Feature[])`                  |
-| DrawEvent.Change | 'change'       | 绘制数据发生变更后的事件（包含以上绘制数据变动的事件） | `function(featureList: Feature[])`                                        |
+| 事件名                                   | 说明                                                   | 类型                                                                         |
+| ---------------------------------------- | ------------------------------------------------------ | ---------------------------------------------------------------------------- |
+| DrawEvent.Init | 'init'             | Draw 初始化完成的事件                                  | `function(drawer: Draw)`                                                     |
+| DrawEvent.Destroy | 'destroy'       | Draw 完成销毁的事件                                    | `function(drawer: Draw)`                                                     |
+| DrawEvent.Enable | 'enable'         | 启用绘制的事件                                         | `function(drawer: Draw)`                                                     |
+| DrawEvent.Disable | 'disable'       | 禁用绘制的事件                                         | `function(drawer: Draw)`                                                     |
+| DrawEvent.Clear | 'clear'           | 清空数据的事件                                         | `function(drawer: Draw)`                                                     |
+| DrawEvent.AddNode | 'addNode'       | 添加结点                                               | `(newNode: Feature,editFeature: Feature, featureList: Feature[]) => void`    |
+| DrawEvent.RemoveNode | 'removeNode' | 删除结点                                               | `(removeNode: Feature,editFeature: Feature, featureList: Feature[]) => void` |
+| DrawEvent.Add | 'add'               | 新增的事件                                             | `function(newFeature: Feature, featureList: Feature[])`                      |
+| DrawEvent.Edit | 'edit'             | 编辑(位移或节点发生变更)的事件                         | `function(editFeature: Feature, featureList: Feature[])`                     |
+| DrawEvent.Remove | 'remove'         | 删除的事件                                             | `function(deleteFeature: Feature, featureList: Feature[])`                   |
+| DrawEvent.DragStart | 'dragStart'   | 开始拖拽的事件                                         | `function(dragFeature: Feature, featureList: Feature[])`                     |
+| DrawEvent.Dragging | 'dragging'     | 拖拽中的事件                                           | `function(dragFeature: Feature, featureList: Feature[])`                     |
+| DrawEvent.DragEnd | 'dragEnd'       | 拖拽结束的事件                                         | `function(dragFeature: Feature, featureList: Feature[])`                     |
+| DrawEvent.Change | 'change'         | 绘制数据发生变更后的事件（包含以上绘制数据变动的事件） | `function(featureList: Feature[])`                                           |

docs/docs/pointEvent.md

@@ -11,7 +11,7 @@ hide: true
 | DrawEvent.Disable | 'disable'     | 禁用绘制的事件                                         | `function(drawer: Draw)`                                   |
 | DrawEvent.Clear | 'clear'         | 清空数据的事件                                         | `function(drawer: Draw)`                                   |
 | DrawEvent.Add | 'add'             | 新增的事件                                             | `function(newFeature: Feature, featureList: Feature[])`    |
-| DrawEvent.Edit | 'edit'           | 编辑(位移或顶点发生变更)的事件                         | `function(editFeature: Feature, featureList: Feature[])`   |
+| DrawEvent.Edit | 'edit'           | 编辑(位移或节点发生变更)的事件                         | `function(editFeature: Feature, featureList: Feature[])`   |
 | DrawEvent.Remove | 'remove'       | 删除的事件                                             | `function(deleteFeature: Feature, featureList: Feature[])` |
 | DrawEvent.DragStart | 'dragStart' | 开始拖拽的事件                                         | `function(dragFeature: Feature, featureList: Feature[])`   |
 | DrawEvent.Dragging | 'dragging'   | 拖拽中的事件                                           | `function(dragFeature: Feature, featureList: Feature[])`   |

docs/docs/super/keyboard.md

@@ -1,5 +1,5 @@
 ---
-title: 快捷键
+title: 快捷操作
 order: 4
 group:
   title: 高级
@@ -17,6 +17,10 @@ group:
 
 用户可以选择关闭部分快捷键功能，或者自定义快捷键的按键。
 
+除此之外，`L7Draw` 还提供了一些通过鼠标触发的快捷操作：
+
+- ⭕ 删除结点：删除当前节点，仅支持在 `DrawLine` 和 `DrawPolygon` 中使用，默认在 `鼠标右键单击节点` 时触发。
+
 ## 示例
 
 ```tsx | pure

docs/docs/super/style.md

@@ -67,7 +67,7 @@ const drawer = new DrawPoint(scene, {
 - [point](#point)：结点，即作为 `DrawPoint` 中点的样式，也作为其他几类 Draw 中结点的样式。
 - [line](#line)：实线，即作为 `DrawLine` 中线的样式，也作为其他几类面 Draw 中边框的样式。
 - [polygon](#polygon)：多边形/面。
-- [midPoint](#midpoint)：线段中点，点击即可新增顶点。
+- [midPoint](#midpoint)：线段中点，点击即可新增节点。
 - [dashLine](#dashline)：虚线，一般在绘制过程中呈现。
 - [text](#text)：文本，一般用于表示距离和面积文案。
 

docs/example/line/event.tsx

@@ -43,6 +43,11 @@ const Demo: React.FC = () => {
         console.log('addNode', node, editLine, lineList);
       });
 
+      // 监听添加结点的事件
+      drawer.on(DrawEvent.RemoveNode, (node, editLine, lineList) => {
+        console.log('removeNode', node, editLine, lineList);
+      });
+
       // LineString数据发生变更时触发，等价于同时监听add和edit事件
       drawer.on(DrawEvent.Change, (lineList) => {
         console.log('change', lineList);

docs/example/polygon/event.tsx

@@ -43,6 +43,11 @@ const Demo: React.FC = () => {
         console.log('addNode', node, editPoint, polygonList);
       });
 
+      // 监听添加结点的事件
+      drawer.on(DrawEvent.RemoveNode, (node, editLine, lineList) => {
+        console.log('removeNode', node, editLine, lineList);
+      });
+
       // Polygon数据发生变更时触发，等价于同时监听add和edit事件
       drawer.on(DrawEvent.Change, (polygonList) => {
         console.log('change', polygonList);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-draw",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "A drawing package for L7",
   "license": "MIT",
   "scripts": {

src/constant/event.ts

@@ -15,6 +15,7 @@ export enum DrawEvent {
   Dragging = 'dragging',
   DragEnd = 'dragEnd',
   AddNode = 'addNode',
+  RemoveNode = 'removeNode',
 }
 
 /**
@@ -37,6 +38,7 @@ export enum RenderEvent {
   Dragging = 'dragging',
   Dragend = 'dragend',
   DblClick = 'dblClick',
+  Contextmenu = 'contextmenu',
 }
 
 /**

src/drawer/line-drawer.ts

@@ -75,6 +75,14 @@ export class LineDrawer extends LineMode<ILineDrawerOptions> {
     return ['line', 'dashLine', 'midPoint', 'point', 'text'];
   }
 
+  bindPointRenderEvent() {
+    super.bindPointRenderEvent();
+    this.pointRender?.on(
+      RenderEvent.Contextmenu,
+      this.onPointContextMenu.bind(this),
+    );
+  }
+
   drawLineFinish = () => {
     const drawLine = this.drawLine;
     const nodes = drawLine?.properties.nodes ?? [];
@@ -112,6 +120,44 @@ export class LineDrawer extends LineMode<ILineDrawerOptions> {
     }
   }
 
+  removeNode(node: Feature | string, feature: Feature | string) {
+    const targetFeature = this.getTargetFeature(feature) as
+      | ILineFeature
+      | undefined;
+    const targetNode = this.getTargetFeature(
+      node,
+      targetFeature?.properties.nodes ?? [],
+    );
+    if (targetFeature && targetNode) {
+      const nodes = targetFeature?.properties.nodes ?? [];
+      if (nodes.length < 3) {
+        return;
+      }
+      this.syncLineNodes(
+        targetFeature,
+        nodes.filter((node) => !isSameFeature(targetNode, node)),
+      );
+      this.emit(
+        DrawEvent.RemoveNode,
+        targetNode,
+        targetFeature,
+        this.getLineData(),
+      );
+      this.emit(DrawEvent.Edit, targetFeature, this.getLineData());
+    }
+  }
+
+  onPointContextMenu(e: ILayerMouseEvent<IPointFeature>) {
+    const editLine = this.editLine;
+    const deleteNode = e.feature!;
+    const nodes = editLine?.properties.nodes ?? [];
+    if (!editLine || nodes.length < 3) {
+      return;
+    }
+    this.removeNode(deleteNode, editLine);
+    return deleteNode;
+  }
+
   onPointCreate(e: ILayerMouseEvent) {
     if (!this.addable) {
       return;
@@ -222,6 +268,18 @@ export class LineDrawer extends LineMode<ILineDrawerOptions> {
     );
   }
 
+  enablePointRenderAction() {
+    super.enablePointRenderAction();
+    if (this.options.editable) {
+      this.pointRender?.enableContextMenu();
+    }
+  }
+
+  disablePointRenderAction() {
+    super.disablePointRenderAction();
+    this.pointRender?.disableContextMenu();
+  }
+
   bindEnableEvent(): void {
     super.bindEnableEvent();
     this.enableSceneRenderAction();

src/drawer/polygon-drawer.ts

@@ -241,4 +241,65 @@ export class PolygonDrawer extends PolygonMode<IPolygonDrawerOptions> {
     this.setDashLineData(dashLineData);
     this.setTextData(this.getAllTexts());
   }
+
+  removeNode(node: Feature | string, feature: Feature | string) {
+    const targetFeature = this.getTargetFeature(feature) as
+      | IPolygonFeature
+      | undefined;
+    const targetNode = this.getTargetFeature(
+      node,
+      targetFeature?.properties.nodes ?? [],
+    );
+    if (targetFeature && targetNode) {
+      const nodes = targetFeature?.properties.nodes ?? [];
+      if (nodes.length < 4) {
+        return;
+      }
+      this.syncPolygonNodes(
+        targetFeature,
+        nodes.filter((node) => !isSameFeature(targetNode, node)),
+      );
+      this.emit(
+        DrawEvent.RemoveNode,
+        targetNode,
+        targetFeature,
+        this.getLineData(),
+      );
+      this.emit(DrawEvent.Edit, targetFeature, this.getPolygonData());
+    }
+  }
+
+  onPointContextMenu(e: ILayerMouseEvent<IPointFeature>) {
+    const editPolygon = this.editPolygon;
+    let deleteNode = e.feature!;
+    const nodes = editPolygon?.properties.nodes ?? [];
+    if (!editPolygon || nodes.length < 4) {
+      return;
+    }
+    if (!nodes.find((node) => isSameFeature(node, deleteNode))) {
+      deleteNode = nodes[0];
+    }
+    this.removeNode(deleteNode, editPolygon);
+    return deleteNode;
+  }
+
+  bindPointRenderEvent() {
+    super.bindPointRenderEvent();
+    this.pointRender?.on(
+      RenderEvent.Contextmenu,
+      this.onPointContextMenu.bind(this),
+    );
+  }
+
+  enablePointRenderAction() {
+    super.enablePointRenderAction();
+    if (this.options.editable) {
+      this.pointRender?.enableContextMenu();
+    }
+  }
+
+  disablePointRenderAction() {
+    super.disablePointRenderAction();
+    this.pointRender?.disableContextMenu();
+  }
 }

src/mode/base-mode.ts

@@ -233,19 +233,19 @@ export abstract class BaseMode<
     this.on(DrawEvent.Remove, this.emitChangeEvent);
     this.on(DrawEvent.Clear, this.emitChangeEvent);
     this.on(DrawEvent.AddNode, this.saveHistory);
+    this.on(DrawEvent.RemoveNode, this.emitChangeEvent);
   }
 
   /**
    * 监听通用事件
    */
   bindEnableEvent() {
+    this.unbindKeyboardEvent();
     this.scene.setMapStatus({
       doubleClickZoom: false,
     });
-    this.scene.off(SceneEvent.Mousemove, this.saveMouseLngLat);
     this.scene.on(SceneEvent.Mousemove, this.saveMouseLngLat);
 
-    this.unbindKeyboardEvent();
     this.bindKeyboardEvent();
   }
 
@@ -334,10 +334,12 @@ export abstract class BaseMode<
   }
 
   // 传入 Feature 或者 id 获取当前数据中的目标 Feature
-  getTargetFeature(target: Feature | string | null | undefined) {
+  getTargetFeature(
+    target: Feature | string | null | undefined,
+    data = this.getData(),
+  ) {
     let targetFeature: IBaseFeature | null = null;
     if (target) {
-      const data = this.getData();
       targetFeature =
         data.find(
           (feature) =>
@@ -473,11 +475,11 @@ export abstract class BaseMode<
    */
   enable(allowCreate = true) {
     this.allowCreate = allowCreate;
-    this.setHelper(this.addable ? 'draw' : null);
-    this.resetCursor();
+    this.addCount = 0;
     this.enabled = true;
     this.bindEnableEvent();
-    this.addCount = 0;
+    this.resetCursor();
+    this.setHelper(this.addable ? 'draw' : null);
     setTimeout(() => {
       this.emit(DrawEvent.Enable, this);
     }, 0);

src/mode/line-mode.ts

@@ -251,6 +251,9 @@ export abstract class LineMode<
         return feature;
       });
     });
+    if (isSameFeature(this.editLine, line)) {
+      this.setMidPointData(this.getMidPointsByLine(line));
+    }
     this.setPointData(line.properties.nodes);
     this.setTextData(this.getAllTexts());
     return line;

src/mode/polygon-mode.ts

@@ -285,16 +285,24 @@ export abstract class PolygonMode<
         return feature;
       });
     });
-    if (!isDraw) {
-      const lineNodes = line.properties.nodes;
-      const firstNode = first(lineNodes)!;
-      const lastNode = last(lineNodes)!;
+    if (!isSameFeature(this.drawPolygon, polygon)) {
+      const oldLineNodes = line.properties.nodes;
+      const newLineNodes = [...nodes];
+      const firstNode = first(newLineNodes)!;
+      if (oldLineNodes.length === nodes.length) {
+        newLineNodes.push(createPointFeature(firstNode.geometry.coordinates));
+      } else {
+        newLineNodes.push(last(oldLineNodes)!);
+      }
+      const lastNode = last(newLineNodes)!;
       if (
         !isEqual(firstNode.geometry.coordinates, lastNode.geometry.coordinates)
       ) {
-        lineNodes.push(createPointFeature(firstNode.geometry.coordinates));
-        this.syncLineNodes(line, lineNodes);
+        lastNode.geometry.coordinates = cloneDeep(
+          firstNode.geometry.coordinates,
+        );
       }
+      this.syncLineNodes(line, newLineNodes);
     }
     return polygon;
   }

src/render/point-render.ts

@@ -79,6 +79,10 @@ export class PointRender extends LayerRender<IPointFeature, IPointStyle> {
     this.emit(RenderEvent.Click, e);
   };
 
+  onContextmenu = (e: ILayerMouseEvent) => {
+    this.emit(RenderEvent.Contextmenu, e);
+  };
+
   enableCreate() {
     this.disableCreate();
     this.layers[0].on(LayerEvent.UnClick, this.onCreate);
@@ -122,4 +126,13 @@ export class PointRender extends LayerRender<IPointFeature, IPointStyle> {
   disableClick() {
     this.layers[0].off(LayerEvent.Click, this.onClick);
   }
+
+  enableContextMenu() {
+    this.disableContextMenu();
+    this.layers[0].on(LayerEvent.Contextmenu, this.onContextmenu);
+  }
+
+  disableContextMenu() {
+    this.layers[0].off(LayerEvent.Contextmenu, this.onContextmenu);
+  }
 }