@gedit/editor-2d 0.2.46 → 0.2.47

package/lib/browser/playground/path-edit-layer.js

@@ -9,7 +9,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PathEditLayer = void 0;
+exports.PathEditLayer = exports.PathEditLayerEventContext = void 0;
 const React = require("react");
 const playground_1 = require("@gedit/playground");
 const document_entity_1 = require("./entities/document-entity");
@@ -18,9 +18,8 @@ const render_engine_1 = require("@gedit/render-engine");
 const tree_1 = require("@gedit/tree");
 const canvas_draw_1 = require("@gedit/canvas-draw");
 const utils_1 = require("@gedit/utils");
-const path_edit_layer_move_point_1 = require("./path-edit-layer-move-point");
-const path_edit_layer_svg_path_1 = require("./path-edit-layer-svg-path");
-const EDIT_PATH_STATE = 'ADD_PATH';
+const path_edit_1 = require("./path-edit");
+exports.PathEditLayerEventContext = React.createContext({});
 /**
  * 动态绘制层
  */
@@ -29,69 +28,272 @@ class PathEditLayer extends playground_1.Layer {
         super(...arguments);
         this.node = browser_1.domUtils.createDivWithClass('gedit-path-edit-layer');
     }
+    get document() {
+        return this.documentEntity.config.document;
+    }
     get isEnabled() {
-        return this.editorState.is(EDIT_PATH_STATE);
+        return this.editorState.is(playground_1.EditorState.EDIT_PATH_STATE.id);
     }
     onZoom(scale) {
         browser_1.domUtils.setStyle(this.node, {
             transform: `scale(${scale})`,
         });
     }
+    addDispose(disposable) {
+        this.toDispose.pushAll(disposable);
+    }
+    reNodeData() {
+        this.currentPathNode = undefined;
+        this.startPos = undefined;
+        this.pathPointSelection.clearSelection();
+        this.pathPointSelection.selectMode = playground_1.PathSelectMode.ADD_PATH;
+    }
+    updateNodeData() {
+        var _a;
+        const nodeData = (0, path_edit_1.updatePathNodeData)(this.currentPathNode);
+        (_a = this.document) === null || _a === void 0 ? void 0 : _a.updateNode(this.currentPathNode, nodeData, true);
+    }
+    // 选中的是第一个点
+    isOnePoint(point) {
+        var _a;
+        const { selection = [] } = this.pathPointSelection || {};
+        const { paths = [] } = ((_a = this.currentPathNode) === null || _a === void 0 ? void 0 : _a.path) || {};
+        const firstPoint = paths[0];
+        return point
+            ? point.id === firstPoint.id
+            : selection.length === 1 && selection[0].pointId === firstPoint.id;
+    }
+    // 选中的是最后一点
+    isLastPoint(point) {
+        var _a;
+        const { selection = [] } = this.pathPointSelection || {};
+        const { paths = [] } = ((_a = this.currentPathNode) === null || _a === void 0 ? void 0 : _a.path) || {};
+        const lastPoint = paths[paths.length - 1];
+        return point
+            ? point.id === lastPoint.id
+            : selection.length === 1 && selection[0].pointId === lastPoint.id;
+    }
+    getPointIsStartOrEnd(point) {
+        var _a;
+        const { selection = [] } = this.pathPointSelection || {};
+        const { paths = [] } = ((_a = this.currentPathNode) === null || _a === void 0 ? void 0 : _a.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() {
         var _a;
         this.toDispose.pushAll([
-            // 退出路径编辑
-            this.editorState.onCancel(EDIT_PATH_STATE, () => {
-                if (!this.currentPathNode) {
-                    return;
-                }
-                // 如果只有一个点代表绘制不成功，则删除
-                /*  if (
-                  !this.currentPathNode.path ||
-                  (this.currentPathNode.path &&
-                    this.currentPathNode.path.paths.length <= 1)
-                ) {
-                  this.document?.delNode(this.currentPathNode);
-                } */
-                this.selectId = undefined;
-                this.currentPathNode = undefined;
+            this.context.historyService.onHistoryBack(e => {
+                this.reNodeData();
+                this.pathPointSelection.selectMode = playground_1.PathSelectMode.ADD_PATH;
+                this.pathPointSelection.clearSelection();
+                this.editorState.toDefaultState();
             }),
-            this.listenPlaygroundEvent('mousedown', (e) => {
-                // 当前编辑模式为路径编辑
-                if (this.editorState.is(EDIT_PATH_STATE)) {
-                    this.startPos = this.getPosFromMouseEvent(e);
-                    this.startPos.id = (0, utils_1.generateUuid)();
-                    this.currentPointId = this.startPos.id;
-                    this.drawPath(this.startPos);
+            this.editorState.onStateChange(() => {
+                var _a;
+                /**
+                 * 1. 不是路径编辑状态时，清空数据
+                 * 2. 是路径编辑状态时
+                 * - 1.有选中节点时，设置当前节点为选中节点；选中最后一个点
+                 * -- 1. 闭合路程径时，切换到区域与贝赛尔点选择模式；
+                 * -- 2. 非闭合路径时，切换编辑模式；
+                 * - 2. 未选中时节点时, 设置编辑模式;
+                 */
+                if (!this.isEnabled) {
+                    this.reNodeData();
+                }
+                else {
+                    if (!this.pathPointSelection) {
+                        return;
+                    }
+                    const selectNodes = ((_a = this.document) === null || _a === void 0 ? void 0 : _a.getSelectedNodes()) || [];
+                    if (selectNodes.length &&
+                        selectNodes[0].displayType === render_engine_1.GameObjectBaseType.PATH) {
+                        // 选中一个 path 路径时;
+                        this.currentPathNode = selectNodes[0];
+                        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 = playground_1.PathSelectMode.ADD_PATH;
+                    }
                 }
-            }, 10),
-            this.listenPlaygroundEvent('mousemove', (e) => {
+            }),
+            // 区域选择点模式
+            this.selectorConfig.onConfigChanged(() => {
                 var _a;
-                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;
-                    (_a = this.document) === null || _a === void 0 ? void 0 : _a.updateNode(this.currentPathNode, {}, true);
+                if (!this.pathPointSelection) {
+                    return;
+                }
+                if (this.pathPointSelection.selectMode !== playground_1.PathSelectMode.ADD_PATH) {
+                    const selectBound = this.selectorConfig.toRectangle(this.config.finalScale);
+                    const { paths = [], closed } = ((_a = this.currentPathNode) === null || _a === void 0 ? void 0 : _a.path) || {};
+                    const pathSelects = [];
+                    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 = playground_1.PathSelectMode.SELECT_BEZIER;
+                    }
+                    // this.pathPointSelection.enterSelectMode(pathSelects);
                 }
             }),
-            this.listenPlaygroundEvent('mouseup', (e) => {
-                this.startPos = undefined;
+            // 退出路径编辑
+            /* this.editorState.onCancel(EDIT_PATH_STATE, () => {
+              console.log('sdfsd');
+              /* if (!this.currentPathNode) {
+                return;
+              }
+              // 如果只有一个点代表绘制不成功，则删除
+              /*  if (
+                !this.currentPathNode.path ||
+                (this.currentPathNode.path &&
+                  this.currentPathNode.path.paths.length <= 1)
+              ) {
+                this.document?.delNode(this.currentPathNode);
+              }
+              this.reNodeData();
+            }), */
+            // 画布新增点点击事件;
+            this.listenPlaygroundEvent('mousedown', (event) => {
+                // 只在左键点击时绘制
+                if (event.buttons !== 1) {
+                    return;
+                }
+                this.startDrag(event.clientX, event.clientY, {
+                    onDragStart: e => {
+                        var _a, _b, _c;
+                        // 当前编辑模式为路径编辑
+                        if (this.editorState.is(playground_1.EditorState.EDIT_PATH_STATE.id)) {
+                            const { selectMode } = this.pathPointSelection || {};
+                            /**
+                             * 拦截画布点击事件，不处理绘制；
+                             * 1. 闭合路径时；
+                             * 2. 带区域选择模式时；
+                             * 3. 多点选择时;
+                             */
+                            if (
+                            // 判断当前 select 是否 path 路径
+                            (this.currentPathNode && this.currentPathNode.path.closed) ||
+                                selectMode !== playground_1.PathSelectMode.ADD_PATH ||
+                                (((_a = this.pathPointSelection) === null || _a === void 0 ? void 0 : _a.selection) &&
+                                    this.pathPointSelection.selection.length > 1)) {
+                                return;
+                            }
+                            const { position = { x: 0, y: 0 } } = this.currentPathNode || {};
+                            this.startPos = {
+                                x: (0, canvas_draw_1.toFixedValue)(e.endPos.x / (((_b = this.config) === null || _b === void 0 ? void 0 : _b.finalScale) || 1) - position.x, 4),
+                                y: (0, canvas_draw_1.toFixedValue)(e.endPos.y / (((_c = this.config) === null || _c === void 0 ? void 0 : _c.finalScale) || 1) - position.y, 4),
+                            }; // this.getPosFromMouseEvent(e);
+                            this.startPos.id = (0, utils_1.generateUuid)();
+                            this.startPos.type = canvas_draw_1.PATH_FUNC_TYPE.STRAIGHT;
+                            this.initPath(this.startPos);
+                            this.pathPointSelection.enterPathMode([
+                                {
+                                    pointId: this.startPos.id,
+                                },
+                            ]);
+                        }
+                    },
+                    onDrag: e => {
+                        var _a, _b;
+                        if (!this.startPos) {
+                            return;
+                        }
+                        // const pos = this.getPosFromMouseEvent(e);
+                        const { position = { x: 0, y: 0 }, path } = this.currentPathNode || {};
+                        const x = e.endPos.x / (((_a = this.config) === null || _a === void 0 ? void 0 : _a.finalScale) || 1) - position.x;
+                        const y = e.endPos.y / (((_b = this.config) === null || _b === void 0 ? void 0 : _b.finalScale) || 1) - position.y;
+                        const pathNode = path === null || path === void 0 ? void 0 : path.paths.find(c => { var _a; return c.id === ((_a = this.startPos) === null || _a === void 0 ? void 0 : _a.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 = (0, canvas_draw_1.toFixedValue)(reverse ? x1 : x, 4);
+                            pathNode.y2 = (0, canvas_draw_1.toFixedValue)(reverse ? y1 : y, 4);
+                            pathNode.x1 = (0, canvas_draw_1.toFixedValue)(reverse ? x : x1, 4);
+                            pathNode.y1 = (0, canvas_draw_1.toFixedValue)(reverse ? y : y1, 4);
+                            pathNode.type = canvas_draw_1.PATH_FUNC_TYPE.EQUAL;
+                            // console.log(this.startPos, path?.paths);
+                            this.updateNodeData();
+                        }
+                    },
+                    onDragEnd: () => {
+                        this.startPos = undefined;
+                    },
+                });
             }),
             // 图层发生变化时退出模式
             (_a = this.selectionService) === null || _a === void 0 ? void 0 : _a.onSelectionChanged(e => {
                 var _a;
-                if (this.editorState.is(EDIT_PATH_STATE)) {
+                const { isEnabled, pathPointSelection } = this;
+                if (isEnabled) {
+                    if (!pathPointSelection) {
+                        return;
+                    }
+                    // 选中的是 path 路径时
                     const selectNodes = ((_a = this.document) === null || _a === void 0 ? void 0 : _a.getSelectedNodes()) || [];
+                    if (selectNodes.length === 1 &&
+                        selectNodes[0].displayType === render_engine_1.GameObjectBaseType.PATH) {
+                        // 选中一个 path 路径
+                        if (!this.currentPathNode ||
+                            selectNodes[0].id !== this.currentPathNode.id) {
+                            // 选中的不是当前的 path 路径， 切换 currentPathNode;
+                            this.currentPathNode = selectNodes[0];
+                            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 !== render_engine_1.GameObjectBaseType.PATH ||
                             selectNodes.length !== 1)) {
+                        // 选中多个或者选中的不是 path 路径，退出路径编辑，切换到默认模式；
                         this.editorState.toDefaultState();
+                        return;
                     }
                 }
+                this.reNodeData();
+            }),
+            // path point 选择变化;
+            this.pathPointSelection.onSelectionChanged(e => {
+                this.draw();
             }),
         ]);
     }
@@ -99,122 +301,224 @@ class PathEditLayer extends playground_1.Layer {
      * 创建路径
      * @param pos - 当前鼠标点击的位置
      */
-    drawPath(pos) {
-        var _a;
-        if (!this.document)
+    initPath(pos) {
+        if (!this.document) {
             return;
-        // 判断当前 select 是否 path 路径
-        const selectedNodes = ((_a = this.document) === null || _a === void 0 ? void 0 : _a.getSelectedNodes()) || [];
-        if (selectedNodes.length === 1 && selectedNodes[0].displayType === 'path') {
-            this.currentPathNode = selectedNodes[0];
         }
-        // 创建一个空的路径节点，用于存储数据
+        // 没有选中节点，点击画布时，创建一个新节点；
         if (!this.currentPathNode) {
-            this.currentPathNode = this.document.createDisplayNode(render_engine_1.GameObjectBaseType.PATH);
+            this.currentPathNode = this.document.createDisplayNode(render_engine_1.GameObjectBaseType.PATH, undefined, { x: 0, y: 0 });
             this.currentPathNode.selected = true;
+            this.context.selection.clearSelection();
             this.context.selection.addSelection({
                 node: this.currentPathNode,
                 type: tree_1.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);
+        }
+        // 创建时坐标是 0, 需要换线更新坐标；
+        setTimeout(() => {
+            this.updateNodeData();
+        });
     }
-    get document() {
-        return this.documentEntity.config.document;
+    onBezierPointMove(pos) {
+        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;
+        }
+        (0, path_edit_1.setBezierMovePoint)(pathNode, key, pos);
+        this.updateNodeData();
     }
     onBezierPointMouseDown(e, p, key) {
+        if (e.buttons !== 1) {
+            return;
+        }
         e.preventDefault();
         e.stopPropagation();
-    }
-    onPointMouseDown(e, node, p) {
-        const document = this.document;
+        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) {
+            onDrag: e => {
                 var _a, _b;
-                const pos = dragEvent.endPos;
-                const x = pos.x / (((_a = this.config) === null || _a === void 0 ? void 0 : _a.finalScale) || 1);
-                const y = pos.y / (((_b = this.config) === null || _b === void 0 ? void 0 : _b.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;
+                if (this.bezierStartPos) {
+                    const { position = { x: 0, y: 0 } } = this.currentPathNode || {};
+                    const x = e.endPos.x / (((_a = this.config) === null || _a === void 0 ? void 0 : _a.finalScale) || 1) - position.x;
+                    const y = e.endPos.y / (((_b = this.config) === null || _b === void 0 ? void 0 : _b.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();
-    }
-    onHideMovePoint() {
-        this.hideMovePoint = true;
         this.draw();
     }
-    onShowMovePoint() {
-        this.hideMovePoint = false;
-        this.draw();
+    // 注册 playground 事件
+    onSceneAddEvent(e, cb, toDispose) {
+        const event = this.listenPlaygroundEvent(e, cb);
+        if (toDispose) {
+            this.toDispose.push(event);
+        }
+        return event;
     }
-    getBezierPoint(node) {
-        if (!node) {
-            return [];
+    onPointMouseDown(e, currentPoint) {
+        if (e.buttons !== 1) {
+            return;
         }
-        const { paths } = node.path;
-        const children = [];
-        const points = [];
-        // 在最后点
-        if (!this.currentPointId) {
-            points.push(paths[paths.length - 1]);
+        // 如果在 selection 里拖动所有点, 没有则切换当前 selection 里的点
+        const { pathPointSelection } = this;
+        if (!pathPointSelection) {
+            return;
         }
-        else {
-            const index = paths.findIndex(c => c.id === this.currentPointId);
-            points.push(...paths.filter((_, i) => i >= index - 1 && i <= index + 1));
+        let selection = (pathPointSelection === null || pathPointSelection === void 0 ? void 0 : pathPointSelection.selection) || [];
+        const node = this.currentPathNode;
+        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);
+            }
         }
-        points.forEach((p, i) => {
-            if ('x1' in p && 'y1' in p) {
-                children.push(React.createElement("div", { key: `x1-line_${i}`, className: "gedit-path-edit-layer-point-bezier-line", style: {
-                        width: (0, canvas_draw_1.getLineWidth)({ x: p.x1 || 0, y: p.y1 || 0 }, p),
-                        transform: `translate(${p.x}px, ${p.y}px) rotate(${((0, canvas_draw_1.asVec)({ x: p.x1 || 0, y: p.y1 || 0 }, p).ang / Math.PI) * 180}deg)`,
-                    } }), React.createElement("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) }));
+        else {
+            const inSelection = selection.some(c => c.pointId === currentPoint.id);
+            if (inSelection) {
+                pathPointSelection.selectMode = playground_1.PathSelectMode.SELECT_BEZIER;
             }
-            if ('x2' in p && 'y2' in p) {
-                children.push(React.createElement("div", { key: `x2-line_${i}`, className: "gedit-path-edit-layer-point-bezier-line", style: {
-                        width: (0, canvas_draw_1.getLineWidth)({ x: p.x2 || 0, y: p.y2 || 0 }, p),
-                        transform: `translate(${p.x}px, ${p.y}px) rotate(${((0, canvas_draw_1.asVec)({ x: p.x2 || 0, y: p.y2 || 0 }, p).ang / Math.PI) * 180}deg)`,
-                    } }), React.createElement("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 {
+                if ((isStartOrEnd && node.path.closed) || !isStartOrEnd) {
+                    pathPointSelection.enterSelectBezierMode(selectionNode);
+                }
+                else {
+                    pathPointSelection.enterPathMode(selectionNode);
+                }
             }
+        }
+        this.config.finalScale;
+        const startNodeClone = (0, utils_1.deepClone)(node.path.paths);
+        this.startDrag(e.clientX, e.clientY, {
+            // 拖动
+            onDrag: dragEvent => {
+                var _a, _b;
+                selection = (pathPointSelection === null || pathPointSelection === void 0 ? void 0 : 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);
+                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) => startNodeClone.find((c) => c.id === s.id));
+                const x = dragEvent.endPos.x / (((_a = this.config) === null || _a === void 0 ? void 0 : _a.finalScale) || 1) - position.x;
+                const y = dragEvent.endPos.y / (((_b = this.config) === null || _b === void 0 ? void 0 : _b.finalScale) || 1) - position.y;
+                selectionNodes.forEach((p, 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 = (0, canvas_draw_1.toFixedValue)(start.x1 + deltaX, 4);
+                    }
+                    if (typeof p.x2 === 'number') {
+                        p.x2 = (0, canvas_draw_1.toFixedValue)(start.x2 + deltaX, 4);
+                    }
+                    if (typeof p.y1 === 'number') {
+                        p.y1 = (0, canvas_draw_1.toFixedValue)(start.y1 + deltaY, 4);
+                    }
+                    if (typeof p.y2 === 'number') {
+                        p.y2 = (0, canvas_draw_1.toFixedValue)(start.y2 + deltaY, 4);
+                    }
+                    p.x = (0, canvas_draw_1.toFixedValue)(x + d.x, 4);
+                    p.y = (0, canvas_draw_1.toFixedValue)(y + d.y, 4);
+                });
+                this.updateNodeData();
+            },
         });
-        return children;
+        this.draw();
+    }
+    onPathAddPoint(i, e) {
+        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 = (0, path_edit_1.getNewPoint)(point, nextPoint, pos);
+        paths.splice(i + 1, 0, newPoint);
+        this.pathPointSelection.enterPathMode([
+            {
+                pointId: newPoint.id,
+            },
+        ]);
+        this.updateNodeData();
+    }
+    onClosePath() {
+        if (!this.currentPathNode) {
+            return;
+        }
+        this.currentPathNode.path.closed = true;
+        this.pathPointSelection.enterSelectBezierMode([
+            {
+                pointId: this.currentPathNode.path.paths[0].id,
+            },
+        ]);
+        this.updateNodeData();
     }
     draw() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         const selectNodes = ((_a = this.document) === null || _a === void 0 ? void 0 : _a.getSelectedNodes()) || [];
         if (selectNodes.length > 1 ||
             (selectNodes[0] && selectNodes[0].displayType !== 'path') ||
@@ -223,32 +527,42 @@ class PathEditLayer extends playground_1.Layer {
             // this.editorState.toDefaultState();
             return React.createElement(React.Fragment, null);
         }
-        const node = selectNodes[0];
-        const allPoints = [];
-        // 只管当前点相邻的两个点的 bezier;
-        const bezierPoint = this.getBezierPoint(node);
-        const { paths = [] } = node ? node.path : {};
-        paths.forEach((p, i) => {
-            allPoints.push(React.createElement("div", { className: "gedit-path-edit-layer-point", key: `${node === null || node === void 0 ? void 0 : 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 = {}, position = { x: 0, y: 0 }, } = this.currentPathNode || {};
+        const { paths: p = [], closed = false } = path;
+        const paths = [...p].map(c => {
+            const item = Object.assign(Object.assign({}, 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 (React.createElement(React.Fragment, null,
-            !this.hideMovePoint && (React.createElement(path_edit_layer_move_point_1.PointDefault, { getPosFromMouseEvent: this.getPosFromMouseEvent.bind(this), paths: paths, scale: this.config.finalScale })),
-            React.createElement(path_edit_layer_svg_path_1.SvgPath, { width: ((_b = this.config.config.pageBounds) === null || _b === void 0 ? void 0 : _b.width) || 300, height: ((_c = this.config.config.pageBounds) === null || _c === void 0 ? void 0 : _c.height) || 300, paths: paths, scale: this.config.finalScale, pathProps: {
-                    onMouseEnter: this.onHideMovePoint.bind(this),
-                    onMouseLeave: this.onShowMovePoint.bind(this),
-                } }),
-            allPoints,
-            bezierPoint));
+        return (React.createElement(exports.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),
+            } },
+            React.createElement(path_edit_1.SvgPath, { getPosFromMouseEvent: this.getPosFromMouseEvent.bind(this), width: ((_b = this.config.config.pageBounds) === null || _b === void 0 ? void 0 : _b.width) || 300, height: ((_c = this.config.config.pageBounds) === null || _c === void 0 ? void 0 : _c.height) || 300, paths: paths, closed: closed, selection: (_d = this.pathPointSelection) === null || _d === void 0 ? void 0 : _d.selection, selectMode: (_e = this.pathPointSelection) === null || _e === void 0 ? void 0 : _e.selectMode, getPointIsStartOrEnd: this.getPointIsStartOrEnd.bind(this), scale: this.config.finalScale })));
     }
 }
 __decorate([
     (0, playground_1.entity)(playground_1.EditorStateConfigEntity),
     __metadata("design:type", playground_1.EditorStateConfigEntity)
 ], PathEditLayer.prototype, "editorState", void 0);
+__decorate([
+    (0, playground_1.entity)(playground_1.SelectorBoxConfigEntity),
+    __metadata("design:type", playground_1.SelectorBoxConfigEntity)
+], PathEditLayer.prototype, "selectorConfig", void 0);
 __decorate([
     (0, playground_1.entity)(document_entity_1.DocumentEntity),
     __metadata("design:type", document_entity_1.DocumentEntity)