@gedit/editor-2d 0.2.46 → 0.2.48

package/src/browser/playground/path-edit-layer.tsx

@@ -1,20 +1,59 @@
 import * as React from 'react';
-import { EditorStateConfigEntity, entity, Layer } from '@gedit/playground';
+import {
+  EditorState,
+  EditorStateConfigEntity,
+  entity,
+  Layer,
+  PathPointSelection,
+  PathSelectMode,
+  SelectorBoxConfigEntity,
+} from '@gedit/playground';
 import { DocumentEntity } from './entities/document-entity';
 import { domUtils } from '@gedit/utils/lib/browser';
 import { GameObjectBaseType } from '@gedit/render-engine';
-import {
-  Editor2dDocument,
-  Editor2dPathNode,
-} from '../model';
+import { Editor2dDocument, Editor2dPathNode } from '../model';
 import { PlaygroundContext2d } from './playground-context';
 import { SelectableTreeNode, TreeSelection } from '@gedit/tree';
-import { asVec, getLineWidth, PathChild } from '@gedit/canvas-draw';
-import { generateUuid } from '@gedit/utils';
-import { PointDefault, PointSchema } from './path-edit-layer-move-point';
-import { SvgPath } from './path-edit-layer-svg-path';
+import {
+  PathChild,
+  PATH_FUNC_TYPE,
+  toFixedValue,
+  PathSchema,
+} from '@gedit/canvas-draw';
+
+import {
+  deepClone,
+  Disposable,
+  generateUuid,
+  PositionSchema,
+} from '@gedit/utils';
+import {
+  PointSchema,
+  SvgPath,
+  getNewPoint,
+  setBezierMovePoint,
+  PointSelection,
+  updatePathNodeData,
+} from './path-edit';
 
-const EDIT_PATH_STATE = 'ADD_PATH';
+export interface PathEditLayerEventContextProps {
+  onPointMouseDown: (e: React.MouseEvent, p: PathChild) => void;
+  onClosePath: () => void;
+  onSceneAddEvent: (
+    event: keyof HTMLElementEventMap,
+    cb: (e: MouseEvent) => void,
+    toDispose?: boolean
+  ) => Disposable;
+  onBezierPointMouseDown: (
+    e: React.MouseEvent,
+    p: PathChild,
+    key: string
+  ) => void;
+  onPathAddPoint: (index: number, e: React.MouseEvent) => void;
+}
+export const PathEditLayerEventContext = React.createContext<PathEditLayerEventContextProps>(
+  {} as PathEditLayerEventContextProps
+);
 
 /**
  * 动态绘制层
@@ -23,16 +62,25 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
   node = domUtils.createDivWithClass('gedit-path-edit-layer');
   @entity(EditorStateConfigEntity)
   protected editorState: EditorStateConfigEntity;
+  @entity(SelectorBoxConfigEntity)
+  protected selectorConfig!: SelectorBoxConfigEntity;
   @entity(DocumentEntity) documentEntity: DocumentEntity;
-  protected hideMovePoint: boolean;
 
   currentPathNode?: Editor2dPathNode;
-  currentPointId?: string;
   startPos?: PathChild;
-  selectId?: string;
+  protected bezierStartPos?: {
+    x: number;
+    y: number;
+    key: 'left' | 'right';
+    path: PathChild;
+  };
+
+  get document(): Editor2dDocument | undefined {
+    return this.documentEntity.config.document;
+  }
 
   get isEnabled(): boolean {
-    return this.editorState.is(EDIT_PATH_STATE);
+    return this.editorState.is(EditorState.EDIT_PATH_STATE.id);
   }
 
   onZoom(scale: number): void {
@@ -41,11 +89,144 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
     });
   }
 
+  addDispose(disposable: Disposable[]): void {
+    this.toDispose.pushAll(disposable);
+  }
+
+  reNodeData(): void {
+    this.currentPathNode = undefined;
+    this.startPos = undefined;
+    this.pathPointSelection!.clearSelection();
+    this.pathPointSelection!.selectMode = PathSelectMode.ADD_PATH;
+  }
+  updateNodeData(): void {
+    const nodeData = updatePathNodeData(this.currentPathNode!);
+    this.document?.updateNode(this.currentPathNode!, nodeData, true);
+  }
+
+  // 选中的是第一个点
+  protected isOnePoint(point?: PathChild): boolean {
+    const { selection = [] } = this.pathPointSelection || {};
+    const { paths = [] } = this.currentPathNode?.path || {};
+    const firstPoint = paths[0];
+    return point
+      ? point.id === firstPoint.id
+      : selection.length === 1 && selection[0].pointId === firstPoint.id;
+  }
+
+  // 选中的是最后一点
+  protected isLastPoint(point?: PathChild): boolean {
+    const { selection = [] } = this.pathPointSelection || {};
+    const { paths = [] } = this.currentPathNode?.path || {};
+    const lastPoint = paths[paths.length - 1];
+    return point
+      ? point.id === lastPoint.id
+      : selection.length === 1 && selection[0].pointId === lastPoint.id;
+  }
+
+  protected getPointIsStartOrEnd(point?: PathChild): boolean {
+    const { selection = [] } = this.pathPointSelection || {};
+    const { paths = [] } = this.currentPathNode?.path || {};
+    if (point) {
+      return (
+        point.id === paths[0].id || point.id === paths[paths.length - 1].id
+      );
+    }
+    return !!(
+      // 不是第一个或最后一个
+      (
+        selection.length === 1 &&
+        (selection[0].pointId === paths[0].id ||
+          selection[0].pointId === paths[paths.length - 1].id)
+      )
+    );
+  }
+
   onReady(): void {
     this.toDispose.pushAll([
+      this.context.historyService.onHistoryBack(e => {
+        this.reNodeData();
+        this.pathPointSelection!.selectMode = PathSelectMode.ADD_PATH;
+        this.pathPointSelection!.clearSelection();
+        this.editorState.toDefaultState();
+      }),
+      this.editorState.onStateChange(() => {
+        /**
+         * 1. 不是路径编辑状态时，清空数据
+         * 2. 是路径编辑状态时
+         * - 1.有选中节点时，设置当前节点为选中节点；选中最后一个点
+         * -- 1. 闭合路程径时，切换到区域与贝赛尔点选择模式；
+         * -- 2. 非闭合路径时，切换编辑模式；
+         * - 2. 未选中时节点时, 设置编辑模式;
+         */
+        if (!this.isEnabled) {
+          this.reNodeData();
+        } else {
+          if (!this.pathPointSelection) {
+            return;
+          }
+          const selectNodes = this.document?.getSelectedNodes() || [];
+          if (
+            selectNodes.length &&
+            selectNodes[0].displayType === GameObjectBaseType.PATH
+          ) {
+            // 选中一个 path 路径时;
+            this.currentPathNode = selectNodes[0] as Editor2dPathNode;
+            const selectionNode = [
+              {
+                pointId: this.currentPathNode.path.paths[
+                  this.currentPathNode.path.paths.length - 1
+                ].id,
+              },
+            ];
+            this.currentPathNode.path.closed
+              ? this.pathPointSelection.enterSelectBezierMode(selectionNode)
+              : this.pathPointSelection.enterPathMode(selectionNode);
+          } else if (!selectNodes.length) {
+            // 未选中时，清空数据
+            this.pathPointSelection.selectMode = PathSelectMode.ADD_PATH;
+          }
+        }
+      }),
+      // 区域选择点模式
+      this.selectorConfig.onConfigChanged(() => {
+        if (!this.pathPointSelection) {
+          return;
+        }
+        if (this.pathPointSelection.selectMode !== PathSelectMode.ADD_PATH) {
+          const selectBound = this.selectorConfig.toRectangle(
+            this.config.finalScale
+          );
+          const { paths = [], closed } = this.currentPathNode?.path || {};
+          const pathSelects: PathPointSelection[] = [];
+          paths.forEach(p => {
+            const { x: $x, y: $y } = p;
+            const x = $x + this.currentPathNode!.position!.x;
+            const y = $y + this.currentPathNode!.position!.y;
+            const wh = (4 / this.config.finalScale) * 2;
+            if (
+              x >= selectBound.x && // 左
+              x + wh <= selectBound.x + selectBound.width && // 右
+              y >= selectBound.y && // 上
+              y + wh <= selectBound.y + selectBound.height // 下
+            ) {
+              pathSelects.push({
+                pointId: p.id,
+              });
+            }
+          });
+          this.pathPointSelection.selection = pathSelects;
+          // 闭合路径的,切到选择加贝赛点模式；
+          if (closed) {
+            this.pathPointSelection.selectMode = PathSelectMode.SELECT_BEZIER;
+          }
+          // this.pathPointSelection.enterSelectMode(pathSelects);
+        }
+      }),
       // 退出路径编辑
-      this.editorState.onCancel(EDIT_PATH_STATE, () => {
-        if (!this.currentPathNode) {
+      /* this.editorState.onCancel(EDIT_PATH_STATE, () => {
+        console.log('sdfsd');
+        /* if (!this.currentPathNode) {
           return;
         }
         // 如果只有一个点代表绘制不成功，则删除
@@ -55,51 +236,143 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
             this.currentPathNode.path.paths.length <= 1)
         ) {
           this.document?.delNode(this.currentPathNode);
-        } */
-        this.selectId = undefined;
-        this.currentPathNode = undefined;
-      }),
-      this.listenPlaygroundEvent(
-        'mousedown',
-        (e: MouseEvent) => {
-          // 当前编辑模式为路径编辑
-          if (this.editorState.is(EDIT_PATH_STATE)) {
-            this.startPos = this.getPosFromMouseEvent(e);
-            this.startPos.id = generateUuid();
-            this.currentPointId = this.startPos.id;
-            this.drawPath(this.startPos);
-          }
-        },
-        10
-      ),
-      this.listenPlaygroundEvent('mousemove', (e: MouseEvent) => {
-        if (this.startPos) {
-          const pos = this.getPosFromMouseEvent(e);
-          const x1 = this.startPos.x * 2 - pos.x;
-          const y1 = this.startPos.y * 2 - pos.y;
-          this.startPos.x2 = pos.x;
-          this.startPos.y2 = pos.y;
-          this.startPos.x1 = x1;
-          this.startPos.y1 = y1;
-          this.document?.updateNode(this.currentPathNode!, {}, true);
         }
-      }),
-      this.listenPlaygroundEvent('mouseup', (e: MouseEvent) => {
-        this.startPos = undefined;
+        this.reNodeData();
+      }), */
+      // 画布新增点点击事件;
+      this.listenPlaygroundEvent('mousedown', (event: MouseEvent) => {
+        // 只在左键点击时绘制
+        if (event.buttons !== 1) {
+          return;
+        }
+        this.startDrag(event.clientX, event.clientY, {
+          onDragStart: e => {
+            // 当前编辑模式为路径编辑
+            if (this.editorState.is(EditorState.EDIT_PATH_STATE.id)) {
+              const { selectMode } = this.pathPointSelection || {};
+              /**
+               * 拦截画布点击事件，不处理绘制；
+               * 1. 闭合路径时；
+               * 2. 带区域选择模式时；
+               * 3. 多点选择时;
+               */
+              if (
+                // 判断当前 select 是否 path 路径
+                (this.currentPathNode && this.currentPathNode.path.closed) ||
+                selectMode !== PathSelectMode.ADD_PATH ||
+                (this.pathPointSelection?.selection &&
+                  this.pathPointSelection.selection.length > 1)
+              ) {
+                return;
+              }
+              const { position = { x: 0, y: 0 } } = this.currentPathNode || {};
+              this.startPos = {
+                x: toFixedValue(
+                  e.endPos.x / (this.config?.finalScale || 1) - position.x,
+                  4
+                ),
+                y: toFixedValue(
+                  e.endPos.y / (this.config?.finalScale || 1) - position.y,
+                  4
+                ),
+              }; // this.getPosFromMouseEvent(e);
+              this.startPos.id = generateUuid();
+              this.startPos.type = PATH_FUNC_TYPE.STRAIGHT;
+              this.initPath(this.startPos);
+              this.pathPointSelection!.enterPathMode([
+                {
+                  pointId: this.startPos.id,
+                },
+              ]);
+            }
+          },
+          onDrag: e => {
+            if (!this.startPos) {
+              return;
+            }
+            // const pos = this.getPosFromMouseEvent(e);
+            const { position = { x: 0, y: 0 }, path } =
+              this.currentPathNode || {};
+            const x = e.endPos.x / (this.config?.finalScale || 1) - position.x;
+            const y = e.endPos.y / (this.config?.finalScale || 1) - position.y;
+            const pathNode = path?.paths.find(
+              c => c.id === this.startPos?.id
+            );
+            // 生成贝赛尔点；
+            if (
+              pathNode &&
+              Math.max(
+                Math.abs(x - this.startPos.x),
+                Math.abs(y - this.startPos.y)
+              ) >= 5
+            ) {
+              const x1 = pathNode.x * 2 - x;
+              const y1 = pathNode.y * 2 - y;
+              const reverse = this.isOnePoint();
+              pathNode.x2 = toFixedValue(reverse ? x1 : x, 4);
+              pathNode.y2 = toFixedValue(reverse ? y1 : y, 4);
+              pathNode.x1 = toFixedValue(reverse ? x : x1, 4);
+              pathNode.y1 = toFixedValue(reverse ? y : y1, 4);
+              pathNode.type = PATH_FUNC_TYPE.EQUAL;
+              // console.log(this.startPos, path?.paths);
+              this.updateNodeData();
+            }
+          },
+          onDragEnd: () => {
+            this.startPos = undefined;
+          },
+        });
       }),
       // 图层发生变化时退出模式
       this.selectionService?.onSelectionChanged(e => {
-        if (this.editorState.is(EDIT_PATH_STATE)) {
+        const { isEnabled, pathPointSelection } = this;
+        if (isEnabled) {
+          if (!pathPointSelection) {
+            return;
+          }
+          // 选中的是 path 路径时
           const selectNodes = this.document?.getSelectedNodes() || [];
+          if (
+            selectNodes.length === 1 &&
+            selectNodes[0].displayType === GameObjectBaseType.PATH
+          ) {
+            // 选中一个 path 路径
+            if (
+              !this.currentPathNode ||
+              selectNodes[0].id !== this.currentPathNode.id
+            ) {
+              // 选中的不是当前的 path 路径， 切换 currentPathNode;
+              this.currentPathNode = selectNodes[0] as Editor2dPathNode;
+              const selectionNode = [
+                {
+                  pointId: this.currentPathNode.path.paths[
+                    this.currentPathNode.path.paths.length - 1
+                  ].id,
+                },
+              ];
+              // 切换时先选中最后一个点
+              this.currentPathNode.path.closed
+                ? pathPointSelection.enterSelectBezierMode(selectionNode)
+                : pathPointSelection.enterPathMode(selectionNode);
+            }
+            return;
+          }
           if (
             selectNodes.length &&
             (selectNodes[0].displayType !== GameObjectBaseType.PATH ||
               selectNodes.length !== 1)
           ) {
+            // 选中多个或者选中的不是 path 路径，退出路径编辑，切换到默认模式；
             this.editorState.toDefaultState();
+            return;
           }
         }
+        this.reNodeData();
       })!,
+      // path point 选择变化;
+      this.pathPointSelection!.onSelectionChanged(e => {
+        this.draw();
+      }),
     ]);
   }
 
@@ -107,164 +380,240 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
    * 创建路径
    * @param pos - 当前鼠标点击的位置
    */
-  drawPath(pos: PointSchema): void {
-    if (!this.document) return;
-    // 判断当前 select 是否 path 路径
-    const selectedNodes = this.document?.getSelectedNodes() || [];
-    if (selectedNodes.length === 1 && selectedNodes[0].displayType === 'path') {
-      this.currentPathNode = selectedNodes[0] as Editor2dPathNode;
+  initPath(pos: PointSchema): void {
+    if (!this.document) {
+      return;
     }
-    // 创建一个空的路径节点，用于存储数据
+    // 没有选中节点，点击画布时，创建一个新节点；
     if (!this.currentPathNode) {
       this.currentPathNode = this.document.createDisplayNode<Editor2dPathNode>(
-        GameObjectBaseType.PATH
+        GameObjectBaseType.PATH,
+        undefined,
+        { x: 0, y: 0 }
       );
       this.currentPathNode.selected = true;
+      this.context.selection.clearSelection();
       this.context.selection.addSelection({
         node: this.currentPathNode as Readonly<SelectableTreeNode>,
         type: TreeSelection.SelectionType.TOGGLE,
       });
     }
-    this.selectId = this.currentPathNode.id;
-    this.currentPathNode.path.paths.push(pos);
-    this.document.updateNode(this.currentPathNode, {}, true);
-    /* this.document.updateNode(
-      this.currentPathNode,
-      {
-        path: {
-          ...this.currentPathNode.path,
-          paths: (this.currentPathNode.path.paths || []).concat(pos),
-        },
-      },
-      true
-    ); */
-  }
+    this.currentPathNode.path.paths = this.currentPathNode.path.paths || []; // array 会被复用，复制一个，保证不会被修改
+    if (this.isOnePoint() && this.currentPathNode.path.paths.length > 1) {
+      // 第一帧
+      this.currentPathNode.path.paths.unshift(pos);
+    } else {
+      this.currentPathNode.path.paths.push(pos);
+    }
 
-  get document(): Editor2dDocument | undefined {
-    return this.documentEntity.config.document;
+    // 创建时坐标是 0, 需要换线更新坐标；
+    setTimeout(() => {
+      this.updateNodeData();
+    });
   }
 
-  protected onBezierPointMouseDown(e: React.MouseEvent, p: PathChild, key: string): void {
-    e.preventDefault();
-    e.stopPropagation();
+  protected onBezierPointMove(pos: PointSchema): void {
+    const { key, path: p } = this.bezierStartPos!;
+    const { path = { paths: [] } } = this.currentPathNode || {};
+    const pathNode = path.paths.find(c => c.id === p.id);
+    if (!pathNode || !this.currentPathNode) {
+      return;
+    }
+    setBezierMovePoint(pathNode, key, pos);
+    this.updateNodeData();
   }
-
-  protected onPointMouseDown(
+  protected onBezierPointMouseDown(
     e: React.MouseEvent,
-    node: Editor2dPathNode,
-    p: PathChild
+    p: PathChild,
+    key: 'left' | 'right'
   ): void {
-    const document = this.document!;
+    if (e.buttons !== 1) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    const pos = this.getPosFromMouseEvent(e);
+    this.bezierStartPos = {
+      x: pos.x,
+      y: pos.y,
+      key,
+      path: p,
+    };
+    this.pathPointSelection!.enterSelectBezierMode([
+      {
+        pointId: p.id,
+        bezierKey: key,
+      },
+    ]);
     this.startDrag(e.clientX, e.clientY, {
-      // 拖动
-      onDrag(dragEvent): void {
-        const pos = dragEvent.endPos;
-        const x = pos.x / (this.config?.finalScale || 1);
-        const y = pos.y / (this.config?.finalScale || 1);
-        if (typeof p.x1 === 'number') {
-          p.x1 = p.x1 - p.x + x;
-        }
-        if (typeof p.x2 === 'number') {
-          p.x2 = p.x2 - p.x + x;
+      onDrag: e => {
+        if (this.bezierStartPos) {
+          const { position = { x: 0, y: 0 } } = this.currentPathNode || {};
+          const x = e.endPos.x / (this.config?.finalScale || 1) - position.x;
+          const y = e.endPos.y / (this.config?.finalScale || 1) - position.y;
+          this.onBezierPointMove({ x, y });
         }
-        if (typeof p.y1 === 'number') {
-          p.y1 = p.y1 - p.y + y;
-        }
-        if (typeof p.y2 === 'number') {
-          p.y2 = p.y2 - p.y + y;
-        }
-        p.x = x;
-        p.y = y;
-
-        document.updateNode(node, {}, true);
+      },
+      onDragEnd: () => {
+        this.bezierStartPos = undefined;
       },
     });
-    this.currentPointId = p.id;
-    e.preventDefault();
-    e.stopPropagation();
-  }
-
-  protected onHideMovePoint(): void {
-    this.hideMovePoint = true;
     this.draw();
   }
-  protected onShowMovePoint(): void {
-    this.hideMovePoint = false;
-    this.draw();
+
+  // 注册 playground 事件
+  protected onSceneAddEvent(
+    e: keyof HTMLElementEventMap,
+    cb: (e: MouseEvent) => void,
+    toDispose?: boolean
+  ): Disposable {
+    const event = this.listenPlaygroundEvent(e, cb);
+    if (toDispose) {
+      this.toDispose.push(event);
+    }
+    return event;
   }
 
-  protected getBezierPoint(node?: Editor2dPathNode): JSX.Element[] {
-    if (!node) {
-      return [];
+  protected onPointMouseDown(
+    e: React.MouseEvent,
+    currentPoint: PathChild
+  ): void {
+    if (e.buttons !== 1) {
+      return;
     }
-    const { paths } = node.path;
-    const children: JSX.Element[] = [];
-    const points: PathChild[] = [];
-    // 在最后点
-    if (!this.currentPointId) {
-      points.push(paths[paths.length - 1]);
-    } else {
-      const index = paths.findIndex(c => c.id === this.currentPointId);
-      points.push(...paths.filter((_, i) => i >= index - 1 && i <= index + 1));
+    // 如果在 selection 里拖动所有点, 没有则切换当前 selection 里的点
+    const { pathPointSelection } = this;
+    if (!pathPointSelection) {
+      return;
     }
-    points.forEach((p, i) => {
-      if ('x1' in p && 'y1' in p) {
-        children.push(
-          <div
-            key={`x1-line_${i}`}
-            className="gedit-path-edit-layer-point-bezier-line"
-            style={{
-              width: getLineWidth({ x: p.x1 || 0, y: p.y1 || 0 }, p),
-              transform: `translate(${p.x}px, ${p.y}px) rotate(${
-                (asVec({ x: p.x1 || 0, y: p.y1 || 0 }, p).ang / Math.PI) * 180
-              }deg)`,
-            }}
-          />,
-          <div
-            key={`x1_${i}`}
-            className="gedit-path-edit-layer-point-bezier"
-            style={{
-              transform: `translate(${p.x1}px, ${p.y1}px) scale(${
-                1 / this.config.finalScale
-              })`,
-            }}
-            onMouseDown={e => {
-              this.onBezierPointMouseDown(e, p, '1');
-            }}
-            onMouseEnter={this.onHideMovePoint.bind(this)}
-            onMouseLeave={this.onShowMovePoint.bind(this)}
-          />
-        );
+    let selection = pathPointSelection?.selection || [];
+    const node = this.currentPathNode as Editor2dPathNode;
+    const selectionNode = [
+      {
+        pointId: currentPoint.id,
+      },
+    ];
+    /**
+     * 1. 选中一个点时；更新 selection;
+     * - 1. 选中的是第一个点或最后一个点时，切换到编辑模式；
+     * - 2. 选中的是中间点时，切换到区域选择加贝赛尔点模式；
+     * - 3. 关闭路径时，切换到区域选择加贝赛尔点模式；
+     * 2. 选中多个点时；
+     * - 1. 在选择器里时，不更新 selection，切换到区域选择加贝赛尔点模式；
+     * - 2. 不在选择器里时, 更新 selection;
+     * -- 1. 选中的是第一个点或最后一个点时，切换到编辑模式；
+     * --- 1. 闭合路径时，切换到区域选择加贝赛尔点模式；
+     * --- 2. 非闭合路径时，切换到编辑模式；
+     * -- 2. 选中的是中间点时，切换到区域选择加贝赛尔点模式；
+     */
+    const isStartOrEnd = this.getPointIsStartOrEnd(currentPoint);
+    if (selection.length === 1) {
+      if (isStartOrEnd && !node.path.closed) {
+        pathPointSelection!.enterPathMode(selectionNode);
+      } else {
+        pathPointSelection!.enterSelectBezierMode(selectionNode);
       }
-      if ('x2' in p && 'y2' in p) {
-        children.push(
-          <div
-            key={`x2-line_${i}`}
-            className="gedit-path-edit-layer-point-bezier-line"
-            style={{
-              width: getLineWidth({ x: p.x2 || 0, y: p.y2 || 0 }, p),
-              transform: `translate(${p.x}px, ${p.y}px) rotate(${
-                (asVec({ x: p.x2 || 0, y: p.y2 || 0 }, p).ang / Math.PI) * 180
-              }deg)`,
-            }}
-          />,
-          <div
-            key={`x2_${i}`}
-            className="gedit-path-edit-layer-point-bezier"
-            style={{
-              transform: `translate(${p.x2}px, ${p.y2}px) scale(${
-                1 / this.config.finalScale
-              })`,
-            }}
-            onMouseEnter={this.onHideMovePoint.bind(this)}
-            onMouseLeave={this.onShowMovePoint.bind(this)}
-          />
-        );
+    } else {
+      const inSelection = selection.some(c => c.pointId === currentPoint.id);
+      if (inSelection) {
+        pathPointSelection.selectMode = PathSelectMode.SELECT_BEZIER;
+      } else {
+        if ((isStartOrEnd && node.path.closed) || !isStartOrEnd) {
+          pathPointSelection.enterSelectBezierMode(selectionNode);
+        } else {
+          pathPointSelection.enterPathMode(selectionNode);
+        }
       }
+    }
+    this.config.finalScale;
+    const startNodeClone = deepClone(node.path.paths);
+
+    this.startDrag(e.clientX, e.clientY, {
+      // 拖动
+      onDrag: dragEvent => {
+        selection = pathPointSelection?.selection || [];
+        const { position = { x: 0, y: 0 } } = node;
+        const selectionNodes = selection
+          .map(s => node.path.paths.find(p => p.id === s.pointId))
+          .filter(c => c) as PathChild[];
+        const delta = selectionNodes.map(c => {
+          const point = node.path.paths.find(p => p.id === c.id)!;
+          const current = node.path.paths.find(p => p.id === currentPoint.id)!;
+          if (point.id === currentPoint.id) {
+            return { x: 0, y: 0 };
+          }
+          return {
+            x: point.x - current.x,
+            y: point.y - current.y,
+          };
+        });
+        const startNode = selectionNodes.map((s: PathChild) =>
+          startNodeClone.find((c: PathChild) => c.id === s.id)
+        );
+        const x =
+          dragEvent.endPos.x / (this.config?.finalScale || 1) - position.x;
+        const y =
+          dragEvent.endPos.y / (this.config?.finalScale || 1) - position.y;
+        selectionNodes.forEach((p: PathChild, i) => {
+          const start = startNode[i];
+          const d = delta[i];
+          const deltaX = x - start.x + d.x;
+          const deltaY = y - start.y + d.y;
+          if (typeof p.x1 === 'number') {
+            p.x1 = toFixedValue(start.x1 + deltaX, 4);
+          }
+          if (typeof p.x2 === 'number') {
+            p.x2 = toFixedValue(start.x2 + deltaX, 4);
+          }
+          if (typeof p.y1 === 'number') {
+            p.y1 = toFixedValue(start.y1 + deltaY, 4);
+          }
+          if (typeof p.y2 === 'number') {
+            p.y2 = toFixedValue(start.y2 + deltaY, 4);
+          }
+          p.x = toFixedValue(x + d.x, 4);
+          p.y = toFixedValue(y + d.y, 4);
+        });
+        this.updateNodeData();
+      },
     });
-    return children;
-  }
 
+    this.draw();
+  }
+  protected onPathAddPoint(i: number, e: React.MouseEvent): void {
+    if (!this.currentPathNode || !this.document) {
+      return;
+    }
+    const { path, position } = this.currentPathNode;
+    const { paths = [] } = path;
+    const p = this.getPosFromMouseEvent(e);
+    const pos = {
+      x: p.x - position!.x,
+      y: p.y - position!.y,
+    };
+    const point = paths[i];
+    const nextPoint = paths[i + 1] ? paths[i + 1] : paths[0];
+    const newPoint = getNewPoint(point, nextPoint, pos);
+    paths.splice(i + 1, 0, newPoint);
+    this.pathPointSelection!.enterPathMode([
+      {
+        pointId: newPoint.id,
+      },
+    ]);
+    this.updateNodeData();
+  }
+  protected onClosePath(): void {
+    if (!this.currentPathNode) {
+      return;
+    }
+    this.currentPathNode.path.closed = true;
+    this.pathPointSelection!.enterSelectBezierMode([
+      {
+        pointId: this.currentPathNode.path.paths[0].id,
+      },
+    ]);
+    this.updateNodeData();
+  }
   draw(): JSX.Element {
     const selectNodes = this.document?.getSelectedNodes() || [];
     if (
@@ -276,55 +625,53 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
       // this.editorState.toDefaultState();
       return <></>;
     }
-    const node: Editor2dPathNode | undefined = selectNodes[0] as
-      | Editor2dPathNode
-      | undefined;
-
-    const allPoints: JSX.Element[] = [];
-    // 只管当前点相邻的两个点的 bezier;
-    const bezierPoint: JSX.Element[] = this.getBezierPoint(node);
-
-    const { paths = [] } = node ? node.path : {};
-    paths.forEach((p, i) => {
-      allPoints.push(
-        <div
-          className="gedit-path-edit-layer-point"
-          key={`${node?.id}.${i}`}
-          style={{
-            transform: `translate(${p.x}px, ${p.y}px) scale(${
-              1 / this.config.finalScale
-            })`,
-          }}
-          onMouseDown={e => {
-            this.onPointMouseDown(e, node!, p);
-          }}
-          onMouseEnter={this.onHideMovePoint.bind(this)}
-          onMouseLeave={this.onShowMovePoint.bind(this)}
-        />
-      );
+    const {
+      path = {} as PathSchema,
+      position = { x: 0, y: 0 } as PositionSchema,
+    } = this.currentPathNode || ({} as Editor2dPathNode);
+    const { paths: p = [], closed = false } = path;
+    const paths = [...p].map(c => {
+      const item = {
+        ...c,
+        x: c.x + position.x,
+        y: c.y + position.y,
+      };
+      if (typeof c.x1 === 'number') {
+        item.x1 = c.x1 + position.x;
+      }
+      if (typeof c.x2 === 'number') {
+        item.x2 = c.x2 + position.x;
+      }
+      if (typeof c.y1 === 'number') {
+        item.y1 = c.y1 + position.y;
+      }
+      if (typeof c.y2 === 'number') {
+        item.y2 = c.y2 + position.y;
+      }
+      return item;
     });
     return (
-      <>
-        {!this.hideMovePoint && (
-          <PointDefault
-            getPosFromMouseEvent={this.getPosFromMouseEvent.bind(this)}
-            paths={paths}
-            scale={this.config.finalScale}
-          />
-        )}
+      <PathEditLayerEventContext.Provider
+        value={{
+          onPointMouseDown: this.onPointMouseDown.bind(this),
+          onSceneAddEvent: this.onSceneAddEvent.bind(this),
+          onBezierPointMouseDown: this.onBezierPointMouseDown.bind(this),
+          onClosePath: this.onClosePath.bind(this),
+          onPathAddPoint: this.onPathAddPoint.bind(this),
+        }}
+      >
         <SvgPath
+          getPosFromMouseEvent={this.getPosFromMouseEvent.bind(this)}
           width={this.config.config.pageBounds?.width || 300}
           height={this.config.config.pageBounds?.height || 300}
           paths={paths}
+          closed={closed}
+          selection={this.pathPointSelection?.selection as PointSelection[]}
+          selectMode={this.pathPointSelection?.selectMode}
+          getPointIsStartOrEnd={this.getPointIsStartOrEnd.bind(this)}
           scale={this.config.finalScale}
-          pathProps={{
-            onMouseEnter: this.onHideMovePoint.bind(this),
-            onMouseLeave: this.onShowMovePoint.bind(this),
-          }}
         />
-        {allPoints}
-        {bezierPoint}
-      </>
+      </PathEditLayerEventContext.Provider>
     );
   }
 }