@gedit/editor-2d 0.3.14 → 0.3.17

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

@@ -13,10 +13,51 @@ import { DocumentEntity } from './entities/document-entity';
 import { domUtils } from '@gedit/utils/lib/browser';
 import { GameObjectBaseType } from '@gedit/render-engine';
 import { TreeSelection } from '@gedit/tree';
-import { PATH_FUNC_TYPE, toFixedValue, } from '@gedit/canvas-draw';
+import { asVec, PATH_FUNC_TYPE, toFixedValue, } from '@gedit/canvas-draw';
 import { deepClone, DisposableCollection, generateUuid, } from '@gedit/utils';
-import { SvgPath, getNewPoint, setBezierMovePoint, updatePathNodeData, inverseTransformToData, transformToData, } from './path-edit';
+import { SvgPath, getNewPoint, setBezierMovePoint, updatePathNodeData, inverseTransformToData, transformToData, shiftAngleArray, } from './path-edit';
+import { isOSX } from '@gedit/application-common';
+import { getParallelPositionByPoint } from '../utils/bezier.path.utils';
 export const PathEditLayerEventContext = React.createContext({});
+export var Editor2dPathKeyCommands;
+(function (Editor2dPathKeyCommands) {
+    const EDITOR2D_PATH_CATEGORY = 'Editor2dPath';
+    Editor2dPathKeyCommands.TAB_PATH = {
+        id: 'editor2d.path.tab',
+        category: EDITOR2D_PATH_CATEGORY,
+        label: '下一个点',
+    };
+    // export const SHOW_ALL_BEZIER: Command = {
+    //   id: 'editor2d.path.showAllBezier',
+    //   category: EDITOR2D_PATH_CATEGORY,
+    //   label: '显示全部贝塞尔点',
+    // };
+    Editor2dPathKeyCommands.SELECT_All = {
+        id: 'editor2d.path.selectAll',
+        category: EDITOR2D_PATH_CATEGORY,
+        label: '选择全部',
+    };
+    Editor2dPathKeyCommands.BEZIER_STRAIGHT = {
+        id: 'editor2d.path.bezierStraight',
+        category: EDITOR2D_PATH_CATEGORY,
+        label: '无贝塞尔',
+    };
+    Editor2dPathKeyCommands.BEZIER_EQUAL = {
+        id: 'editor2d.path.bezierEqual',
+        category: EDITOR2D_PATH_CATEGORY,
+        label: '左右相等',
+    };
+    Editor2dPathKeyCommands.BEZIER_BREAK = {
+        id: 'editor2d.path.bezierBreak',
+        category: EDITOR2D_PATH_CATEGORY,
+        label: '左右断开',
+    };
+    Editor2dPathKeyCommands.BEZIER_UNEQUAL = {
+        id: 'editor2d.path.bezierUnequal',
+        category: EDITOR2D_PATH_CATEGORY,
+        label: '左右不相等',
+    };
+})(Editor2dPathKeyCommands || (Editor2dPathKeyCommands = {}));
 /**
  * 动态绘制层
  */
@@ -25,9 +66,25 @@ export class PathEditLayer extends Layer {
         super(...arguments);
         this.node = domUtils.createDivWithClass('gedit-path-edit-layer');
         this.id = 'pathEditLayer';
+        // 显示全部贝塞尔点
+        this.altKey = false;
+        // 按住 shit 键
+        this.shiftKey = false;
+        // 按住 ctrl 或 ⌘ 键；
+        this.ctrlKey = false;
+        this._historyIndex = 0;
+        this.noHistory = false;
         // 访录当前图层在 timeline 里的监听事件
         this.layerDisposeMap = new Map();
     }
+    get historyIndex() {
+        const h = this._historyIndex;
+        this._historyIndex++;
+        return h;
+    }
+    set historyIndex(h) {
+        this._historyIndex = h;
+    }
     get document() {
         return this.documentEntity.config.document;
     }
@@ -44,13 +101,14 @@ export class PathEditLayer extends Layer {
     }
     reNodeData() {
         var _a;
+        this.clearHistory();
         this.currentPathNode = undefined;
         this.startPos = undefined;
         this.pathPointSelection.clearSelection();
         this.pathPointSelection.selectMode = PathSelectMode.ADD_PATH;
         (_a = this.docDispose) === null || _a === void 0 ? void 0 : _a.dispose();
     }
-    updateNodeData() {
+    updateNodeData(noHistory) {
         var _a;
         if (!this.currentPathNode) {
             return;
@@ -59,7 +117,68 @@ export class PathEditLayer extends Layer {
         // console.log('updateNodeData', nodeData);
         // 直接更新数据，，动画 updateAnimationNode 里会把数据删了；
         this.currentPathNode.path = nodeData.path;
+        this.currentPathNode.selected = true;
         (_a = this.document) === null || _a === void 0 ? void 0 : _a.updateNode(this.currentPathNode, nodeData, true);
+        this.addHistoryData(noHistory);
+    }
+    reloadNodeData(content) {
+        var _a;
+        if (!this.currentPathNode || !this.pathPointSelection) {
+            return;
+        }
+        const path = JSON.parse(content);
+        this.currentPathNode.path = path;
+        (_a = this.document) === null || _a === void 0 ? void 0 : _a.updateNode(this.currentPathNode, { path }, true);
+        this.pathPointSelection.selection = path.paths[path.paths.length - 1]
+            ? [{ pointId: path.paths[path.paths.length - 1].id }]
+            : [];
+        if (!path.paths.length) {
+            this.pathPointSelection.enterPathMode([]);
+        }
+        this.draw();
+    }
+    clearHistory() {
+        if (this.historyUri) {
+            this.context.historyService.clearHistory(this.historyUri);
+            this.historyUri = undefined;
+            this.context.historyService.switchHistory(this.context.document.uri);
+        }
+        this.historyIndex = 0;
+    }
+    addHistoryData(noHistory) {
+        var _a;
+        const nodePath = (_a = this.currentPathNode) === null || _a === void 0 ? void 0 : _a.path;
+        if (!nodePath || noHistory || !this.historyUri) {
+            return;
+        }
+        const index = this.historyIndex;
+        this.context.historyService.add(this.historyUri, {
+            key: index,
+            data: {
+                content: JSON.stringify(nodePath),
+                resource: {
+                    reload: (content) => {
+                        this.reloadNodeData(content);
+                    },
+                    resource: {
+                        uri: this.historyUri,
+                    },
+                },
+            },
+        });
+    }
+    createHistory() {
+        var _a, _b;
+        if (!this.currentPathNode) {
+            return;
+        }
+        this.historyUri = `${this.context.document.uri}?${(_a = this.currentPathNode) === null || _a === void 0 ? void 0 : _a.id}`;
+        if (this.context.historyService.currentUri !== this.historyUri) {
+            this.context.historyService.switchHistory(this.historyUri);
+            if (!((_b = this.context.historyService.getHistoryNavigator(this.historyUri)) === null || _b === void 0 ? void 0 : _b.length)) {
+                this.addHistoryData();
+            }
+        }
     }
     // updateNodePathData(): void {
     // if (!this.currentPathNode) {
@@ -164,17 +283,196 @@ export class PathEditLayer extends Layer {
             this.layerDisposeMap.set(this.currentPathNode.id, currentDispose);
         }
     }
+    updateCurrentPointBezierType(type) {
+        if (!this.currentPathNode || !this.pathPointSelection) {
+            return;
+        }
+        const { selection = [] } = this.pathPointSelection;
+        selection.forEach(item => {
+            const path = this.currentPathNode.path;
+            const point = path.paths.find(c => c.id === item.pointId);
+            if (point) {
+                point.type = type;
+                switch (type) {
+                    case PATH_FUNC_TYPE.STRAIGHT:
+                        delete point.x1;
+                        delete point.y1;
+                        delete point.x2;
+                        delete point.y2;
+                        break;
+                    case PATH_FUNC_TYPE.EQUAL:
+                    case PATH_FUNC_TYPE.UNEQUAL:
+                    case PATH_FUNC_TYPE.BREAK: {
+                        const inP1 = 'x1' in point && 'y1' in point;
+                        const inP2 = 'x2' in point && 'y2' in point;
+                        if (type === PATH_FUNC_TYPE.BREAK && inP1 && inP2) {
+                            break;
+                        }
+                        const index = path.paths.findIndex(c => c.id === point.id);
+                        const prevPoint = path.paths[index - 1] || path.paths[path.paths.length - 1];
+                        const nextPoint = path.paths[index + 1] || path.paths[0];
+                        // 计算平衡线；
+                        // 点线长度计算两个点的长的距一半；
+                        const { p1, p2 /* isReverse */ } = getParallelPositionByPoint(prevPoint, nextPoint, point);
+                        if (type === PATH_FUNC_TYPE.BREAK) {
+                            if (inP1 && !inP2) {
+                                point.x2 = p2.x;
+                                point.y2 = p2.y;
+                            }
+                            else if (inP2 && !inP1) {
+                                point.x1 = p1.x;
+                                point.y1 = p1.y;
+                            }
+                        }
+                        point.x1 = p1.x;
+                        point.y1 = p1.y;
+                        point.x2 = p2.x;
+                        point.y2 = p2.y;
+                        break;
+                    }
+                    default:
+                        break;
+                }
+            }
+        });
+        this.updateNodeData();
+    }
+    registerKeybindings() {
+        const ctrlKey = !isOSX ? 'control' : 'meta';
+        return [
+            // alt shift 之类在 keybindings 里面不能单个做快捷键
+            this.listenGlobalEvent('keydown', e => {
+                // alt 显示全部贝赛尔点
+                if (this.isEnabled && e.key.toLowerCase() === 'alt') {
+                    this.altKey = true;
+                    this.draw();
+                }
+                if (this.isEnabled && e.key.toLowerCase() === 'shift') {
+                    this.shiftKey = true;
+                    this.draw();
+                }
+                if (this.isEnabled && e.key.toLowerCase() === ctrlKey) {
+                    this.ctrlKey = true;
+                    this.draw();
+                }
+            }),
+            this.listenGlobalEvent('keyup', (e) => {
+                if (this.isEnabled && e.key.toLowerCase() === 'alt') {
+                    this.altKey = false;
+                    this.draw();
+                }
+                if (this.isEnabled && e.key.toLowerCase() === 'shift') {
+                    this.shiftKey = false;
+                    this.draw();
+                }
+                if (this.isEnabled && e.key.toLowerCase() === ctrlKey) {
+                    this.ctrlKey = false;
+                    this.draw();
+                }
+            }),
+            // tab 切换点
+            this.commands.registerCommand(Editor2dPathKeyCommands.TAB_PATH, {
+                execute: () => {
+                    var _a, _b, _c;
+                    const currentPoint = (_b = (_a = this.pathPointSelection.selection) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.pointId;
+                    const { paths = [] } = ((_c = this.currentPathNode) === null || _c === void 0 ? void 0 : _c.path) || {};
+                    const index = currentPoint
+                        ? paths.findIndex(c => c.id === currentPoint)
+                        : -1;
+                    let nextPoint;
+                    if (index === -1) {
+                        nextPoint = paths[0];
+                    }
+                    else {
+                        nextPoint = paths[index + 1] || paths[0];
+                    }
+                    this.selectionChange(nextPoint);
+                },
+                isEnabled: () => !!this.isEnabled,
+            }),
+            this.keybindings.registerKeybindings({
+                command: Editor2dPathKeyCommands.TAB_PATH.id,
+                keybinding: 'tab',
+                when: 'editor2dWidgetFocus',
+            }),
+            // all 全选
+            this.commands.registerCommand(Editor2dPathKeyCommands.SELECT_All, {
+                execute: () => {
+                    if (!this.currentPathNode || !this.pathPointSelection) {
+                        return;
+                    }
+                    const { paths = [] } = this.currentPathNode.path;
+                    const selection = paths.map(c => ({
+                        pointId: c.id,
+                    }));
+                    this.pathPointSelection.enterSelectBezierMode(selection);
+                },
+                isEnabled: () => !!this.isEnabled,
+            }),
+            this.keybindings.registerKeybindings({
+                command: Editor2dPathKeyCommands.SELECT_All.id,
+                keybinding: isOSX ? 'cmd+a' : 'ctrl+a',
+                when: 'editor2dWidgetFocus',
+            }),
+            // 贝赛尔点
+            this.commands.registerCommand(Editor2dPathKeyCommands.BEZIER_STRAIGHT, {
+                execute: () => {
+                    this.updateCurrentPointBezierType(PATH_FUNC_TYPE.STRAIGHT);
+                },
+                isEnabled: () => !!this.isEnabled,
+            }),
+            this.keybindings.registerKeybindings({
+                command: Editor2dPathKeyCommands.BEZIER_STRAIGHT.id,
+                keybinding: '1',
+                when: 'editor2dWidgetFocus',
+            }),
+            this.commands.registerCommand(Editor2dPathKeyCommands.BEZIER_EQUAL, {
+                execute: () => {
+                    this.updateCurrentPointBezierType(PATH_FUNC_TYPE.EQUAL);
+                },
+                isEnabled: () => !!this.isEnabled,
+            }),
+            this.keybindings.registerKeybindings({
+                command: Editor2dPathKeyCommands.BEZIER_EQUAL.id,
+                keybinding: '2',
+                when: 'editor2dWidgetFocus',
+            }),
+            this.commands.registerCommand(Editor2dPathKeyCommands.BEZIER_BREAK, {
+                execute: () => {
+                    this.updateCurrentPointBezierType(PATH_FUNC_TYPE.BREAK);
+                },
+                isEnabled: () => !!this.isEnabled,
+            }),
+            this.keybindings.registerKeybindings({
+                command: Editor2dPathKeyCommands.BEZIER_BREAK.id,
+                keybinding: '3',
+                when: 'editor2dWidgetFocus',
+            }),
+            this.commands.registerCommand(Editor2dPathKeyCommands.BEZIER_UNEQUAL, {
+                execute: () => {
+                    this.updateCurrentPointBezierType(PATH_FUNC_TYPE.UNEQUAL);
+                },
+                isEnabled: () => !!this.isEnabled,
+            }),
+            this.keybindings.registerKeybindings({
+                command: Editor2dPathKeyCommands.BEZIER_UNEQUAL.id,
+                keybinding: '4',
+                when: 'editor2dWidgetFocus',
+            }),
+        ];
+    }
     onReady() {
         var _a;
         this.addDispose([
-            this.context.historyService.onHistoryBack(e => {
-                this.reNodeData();
-                this.pathPointSelection.selectMode = PathSelectMode.ADD_PATH;
-                this.pathPointSelection.clearSelection();
-                this.editorState.toDefaultState();
-            }),
+            ...this.registerKeybindings(),
+            // this.context.historyService.onHistoryBack(e => {
+            // this.reNodeData();
+            // this.pathPointSelection!.selectMode = PathSelectMode.ADD_PATH;
+            // this.pathPointSelection!.clearSelection();
+            // this.editorState.toDefaultState();
+            // }),
             this.editorState.onStateChange(e => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
                 /**
                  * 1. 不是路径编辑状态时，清空数据
                  * 2. 是路径编辑状态时
@@ -196,6 +494,7 @@ export class PathEditLayer extends Layer {
                     if (selectNodes.length && pathSelectsNodes.length) {
                         // 选中一个 path 路径时;
                         this.currentPathNode = deepClone(pathSelectsNodes[0]);
+                        this.createHistory();
                         if (this.currentPathNode.useAnimationId &&
                             ((_c = (_b = this.document) === null || _b === void 0 ? void 0 : _b.timelineService) === null || _c === void 0 ? void 0 : _c.currentTimelineData) &&
                             this.document.timelineService.currentTimelineData.id ===
@@ -203,32 +502,34 @@ export class PathEditLayer extends Layer {
                             this.updateTimelineCurrentFrameDataToCurrentNode();
                             this.onRegisterTimelineEvent();
                         }
-                        const selectionNode = [
-                            {
-                                pointId: this.currentPathNode.path.paths[this.currentPathNode.path.paths.length - 1].id,
-                            },
-                        ];
+                        const selectionNode = ((_d = this.currentPathNode.path.paths[this.currentPathNode.path.paths.length - 1]) === null || _d === void 0 ? void 0 : _d.id)
+                            ? [
+                                {
+                                    pointId: this.currentPathNode.path.paths[this.currentPathNode.path.paths.length - 1].id,
+                                },
+                            ]
+                            : [];
                         this.currentPathNode.path.closed
                             ? this.pathPointSelection.enterSelectBezierMode(selectionNode)
                             : this.pathPointSelection.enterPathMode(selectionNode);
                         // 如果中心点不同，更新数据;
-                        if ((((_d = this.currentPathNode.origin) === null || _d === void 0 ? void 0 : _d.x) ||
-                            ((_e = this.currentPathNode.origin) === null || _e === void 0 ? void 0 : _e.y)) &&
+                        if ((((_e = this.currentPathNode.origin) === null || _e === void 0 ? void 0 : _e.x) ||
+                            ((_f = this.currentPathNode.origin) === null || _f === void 0 ? void 0 : _f.y)) &&
                             !this.currentPathNode.path.originChangeBeforeSize) {
                             // 初始 origin 是照这个宽度算的；计算偏差使用；
                             this.currentPathNode.path.originChangeBeforeSize = {
-                                width: ((_f = this.currentPathNode.size) === null || _f === void 0 ? void 0 : _f.width) || 0,
-                                height: ((_g = this.currentPathNode.size) === null || _g === void 0 ? void 0 : _g.height) || 0,
+                                width: ((_g = this.currentPathNode.size) === null || _g === void 0 ? void 0 : _g.width) || 0,
+                                height: ((_h = this.currentPathNode.size) === null || _h === void 0 ? void 0 : _h.height) || 0,
                             };
-                            (_h = this.document) === null || _h === void 0 ? void 0 : _h.updateNode(this.currentPathNode, this.currentPathNode, true);
+                            (_j = this.document) === null || _j === void 0 ? void 0 : _j.updateNode(this.currentPathNode, this.currentPathNode, true);
                         }
-                        else if (!((_j = this.currentPathNode.origin) === null || _j === void 0 ? void 0 : _j.x) &&
-                            !((_k = this.currentPathNode.origin) === null || _k === void 0 ? void 0 : _k.y) &&
+                        else if (!((_k = this.currentPathNode.origin) === null || _k === void 0 ? void 0 : _k.x) &&
+                            !((_l = this.currentPathNode.origin) === null || _l === void 0 ? void 0 : _l.y) &&
                             this.currentPathNode.path.originChangeBeforeSize) {
                             delete this.currentPathNode.path.originChangeBeforeSize;
-                            (_l = this.document) === null || _l === void 0 ? void 0 : _l.updateNode(this.currentPathNode, this.currentPathNode, true);
+                            (_m = this.document) === null || _m === void 0 ? void 0 : _m.updateNode(this.currentPathNode, this.currentPathNode, true);
                         }
-                        this.docDispose = (_m = this.document) === null || _m === void 0 ? void 0 : _m.onContentChanged(c => {
+                        this.docDispose = (_o = this.document) === null || _o === void 0 ? void 0 : _o.onContentChanged(c => {
                             var _a, _b, _c, _d;
                             const newNode = (_a = c.nodes) === null || _a === void 0 ? void 0 : _a.find(c => { var _a; return c.id === ((_a = this.currentPathNode) === null || _a === void 0 ? void 0 : _a.id); });
                             if (newNode &&
@@ -262,23 +563,13 @@ export class PathEditLayer extends Layer {
                     const selectBound = this.selectorConfig.toRectangle(this.config.finalScale);
                     const { paths = [], closed } = ((_a = this.currentPathNode) === null || _a === void 0 ? void 0 : _a.path) || {};
                     const pathSelects = [];
-                    const { position = { x: 0, y: 1 }, scale = { x: 1, y: 1 }, rotation = 0, } = this.currentPathNode;
-                    const offset = this.getBoundsOffset();
-                    const center = {
-                        x: -offset.x,
-                        y: -offset.y,
-                    };
                     paths.forEach(p => {
-                        const { x: $x, y: $y } = p;
-                        let x = $x;
-                        let y = $y;
-                        const r = transformToData({ x, y }, { scale, rotation }, center);
-                        x = r.x + position.x;
-                        y = r.y + position.y;
-                        const wh = (4 / this.config.finalScale) * 2;
-                        if (x >= selectBound.x && // 左
+                        const { x, y } = this.pathPosToCanvasPos(p);
+                        // 半径
+                        const wh = 4 * this.config.finalScale;
+                        if (x - wh >= selectBound.x && // 左
                             x + wh <= selectBound.x + selectBound.width && // 右
-                            y >= selectBound.y && // 上
+                            y - wh >= selectBound.y && // 上
                             y + wh <= selectBound.y + selectBound.height // 下
                         ) {
                             pathSelects.push({
@@ -310,60 +601,91 @@ export class PathEditLayer extends Layer {
               }
               this.reNodeData();
             }), */
+            // 拦掉画布点击事件，失焦再次点击时会触发 widget 的点击事件, 会聚焦到 widget 上
+            this.listenPlaygroundEvent('click', (event) => {
+                if (this.isEnabled) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.createHistory();
+                }
+            }),
             // 画布新增点点击事件;
             this.listenPlaygroundEvent('mousedown', (event) => {
                 // 只在左键点击时绘制
-                if (event.buttons !== 1) {
+                if (event.buttons !== 1 || !this.isEnabled) {
                     return;
                 }
+                event.preventDefault();
+                event.stopPropagation();
                 this.startDrag(event.clientX, event.clientY, {
                     onDragStart: e => {
-                        var _a, _b, _c;
-                        // 当前编辑模式为路径编辑
-                        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 ||
-                                (((_a = this.pathPointSelection) === null || _a === void 0 ? void 0 : _a.selection) &&
-                                    this.pathPointSelection.selection.length > 1)) {
-                                return;
+                        var _a, _b, _c, _d, _e, _f;
+                        const { selectMode, selection } = this.pathPointSelection || {};
+                        /**
+                         * 拦截画布点击事件，不处理绘制；
+                         * 1. 闭合路径时；
+                         * 2. 带区域选择模式时；
+                         * 3. 多点选择时;
+                         */
+                        if (
+                        // 判断当前 select 是否 path 路径
+                        (this.currentPathNode && this.currentPathNode.path.closed) ||
+                            selectMode !== PathSelectMode.ADD_PATH ||
+                            (selection && selection.length > 1)) {
+                            return;
+                        }
+                        let { x, y } = this.canvasPosToPathPos({
+                            x: e.endPos.x / (((_a = this.config) === null || _a === void 0 ? void 0 : _a.finalScale) || 1),
+                            y: e.endPos.y / (((_b = this.config) === null || _b === void 0 ? void 0 : _b.finalScale) || 1),
+                        });
+                        if (selection) {
+                            const selectionPoint = selection[0];
+                            const index = (_d = (_c = this.currentPathNode) === null || _c === void 0 ? void 0 : _c.path.paths.findIndex(c => c.id === selectionPoint.pointId)) !== null && _d !== void 0 ? _d : -1;
+                            const node = (_e = this.currentPathNode) === null || _e === void 0 ? void 0 : _e.path.paths[index];
+                            if (node) {
+                                // 按住 ctrl 加点时；
+                                if (this.ctrlKey && node.type !== PATH_FUNC_TYPE.STRAIGHT) {
+                                    const isReverse = index === 0;
+                                    if (isReverse) {
+                                        node.x1 = node.x;
+                                        node.y1 = node.y;
+                                    }
+                                    else {
+                                        node.x2 = node.x;
+                                        node.y2 = node.y;
+                                    }
+                                }
+                                // 按住 shift 时，生成固定角度的点；
+                                if (this.shiftKey) {
+                                    const arc = asVec(node, { x, y });
+                                    let angle = (arc.ang / Math.PI) * 180;
+                                    angle = angle < 0 ? 360 + angle : angle;
+                                    const angleIndex = shiftAngleArray.findIndex(a => a > angle);
+                                    const prevAngle = (_f = shiftAngleArray[angleIndex - 1]) !== null && _f !== void 0 ? _f : shiftAngleArray[shiftAngleArray.length - 1];
+                                    const nextAngle = shiftAngleArray[angleIndex];
+                                    const convertAngle = Math.abs(angle - prevAngle) > Math.abs(nextAngle - angle)
+                                        ? nextAngle
+                                        : prevAngle;
+                                    // 取转换角度后的坐标值
+                                    const rad = (convertAngle / 180) * Math.PI;
+                                    x = Math.cos(rad) * arc.len + node.x;
+                                    y = Math.sin(rad) * arc.len + node.y;
+                                }
                             }
-                            const { position = { x: 0, y: 0 }, scale = { x: 1, y: 1 }, rotation = 0, } = this.currentPathNode || {};
-                            const offset = this.getBoundsOffset();
-                            let x = e.endPos.x / (((_b = this.config) === null || _b === void 0 ? void 0 : _b.finalScale) || 1) -
-                                position.x -
-                                offset.x;
-                            let y = e.endPos.y / (((_c = this.config) === null || _c === void 0 ? void 0 : _c.finalScale) || 1) -
-                                position.y -
-                                offset.y;
-                            const center = {
-                                x: -offset.x,
-                                y: -offset.y,
-                            };
-                            const { x: rx, y: ry } = inverseTransformToData({ x, y }, { scale, rotation }, center);
-                            x = rx;
-                            y = ry;
-                            this.startPos = {
-                                x,
-                                y,
-                            };
-                            this.startPos.id = generateUuid();
-                            this.startPos.type = PATH_FUNC_TYPE.STRAIGHT;
-                            this.addPath(this.startPos);
-                            this.pathPointSelection.enterPathMode([
-                                {
-                                    pointId: this.startPos.id,
-                                },
-                            ]);
                         }
+                        this.startPos = {
+                            x,
+                            y,
+                        };
+                        this.startPos.id = generateUuid();
+                        this.startPos.type = PATH_FUNC_TYPE.STRAIGHT;
+                        this.addPath(this.startPos);
+                        this.pathPointSelection.enterPathMode([
+                            {
+                                pointId: this.startPos.id,
+                            },
+                        ]);
+                        this.updateNodeData(true);
                     },
                     onDrag: e => {
                         var _a, _b;
@@ -371,51 +693,60 @@ export class PathEditLayer extends Layer {
                             return;
                         }
                         // const pos = this.getPosFromMouseEvent(e);
-                        const { path, position = { x: 0, y: 0 }, scale = { x: 1, y: 1 }, rotation = 0, } = this.currentPathNode || {};
-                        const offset = this.getBoundsOffset();
-                        let x = e.endPos.x / (((_a = this.config) === null || _a === void 0 ? void 0 : _a.finalScale) || 1) -
-                            position.x -
-                            offset.x;
-                        let y = e.endPos.y / (((_b = this.config) === null || _b === void 0 ? void 0 : _b.finalScale) || 1) -
-                            position.y -
-                            offset.y;
-                        const center = {
-                            x: -offset.x,
-                            y: -offset.y,
-                        };
-                        const { x: rx, y: ry } = inverseTransformToData({ x, y }, { scale, rotation }, center);
-                        x = rx;
-                        y = ry;
+                        const { path } = this.currentPathNode || {};
+                        const eX = e.endPos.x / (((_a = this.config) === null || _a === void 0 ? void 0 : _a.finalScale) || 1);
+                        const eY = e.endPos.y / (((_b = this.config) === null || _b === void 0 ? void 0 : _b.finalScale) || 1);
+                        let { x, y } = this.canvasPosToPathPos({ x: eX, y: eY });
                         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;
+                            let x1 = pathNode.x * 2 - x;
+                            let y1 = pathNode.y * 2 - y;
                             const reverse = this.isOnePoint();
+                            if (this.shiftKey) {
+                                // 计算原点到当前点的角度
+                                const a = Math.abs(x - this.startPos.x);
+                                const b = Math.abs(y - this.startPos.y);
+                                const max = Math.max(a, b);
+                                if (max === a) {
+                                    y = this.startPos.y;
+                                    y1 = this.startPos.y;
+                                }
+                                else {
+                                    x = this.startPos.x;
+                                    x1 = this.startPos.x;
+                                }
+                            }
                             pathNode.x2 = toFixedValue(reverse ? x1 : x, 2);
                             pathNode.y2 = toFixedValue(reverse ? y1 : y, 2);
                             pathNode.x1 = toFixedValue(reverse ? x : x1, 2);
                             pathNode.y1 = toFixedValue(reverse ? y : y1, 2);
                             pathNode.type = PATH_FUNC_TYPE.EQUAL;
                             // console.log(this.startPos, path?.paths);
-                            this.updateNodeData();
+                            this.updateNodeData(true);
                         }
                     },
                     onDragEnd: () => {
                         this.startPos = undefined;
+                        this.updateNodeData();
                     },
                 });
             }),
             this.listenPlaygroundEvent('dblclick', (e) => {
                 var _a;
+                if (!this.isEnabled) {
+                    return;
+                }
+                e.preventDefault();
+                e.stopPropagation();
                 // 双击画布时，关闭路径
                 // 1. 在路径编辑状态时，不处理；
                 // 2. 选中的是 path 路径时，不处理，新增点；
                 // 3. 选中点时，不处理；
                 // 4. 右键时，不处理；
                 // 5. 不是路径编辑状态时，不处理；
-                const isExit = this.editorState.is(EditorState.EDIT_PATH_STATE.id) &&
+                const isExit = this.isEnabled &&
                     this.pathPointSelection.selectMode === PathSelectMode.SELECT_BEZIER;
                 if (isExit) {
                     const playgroundLayer = this.pipelineLayers.find(c => c.id === 'playgroundLayer');
@@ -438,6 +769,8 @@ export class PathEditLayer extends Layer {
                         // 选中一个 path 路径
                         if (!this.currentPathNode ||
                             selectNodes[0].id !== this.currentPathNode.id) {
+                            // 清空上个 path 的 history
+                            this.clearHistory();
                             // 选中的不是当前的 path 路径， 切换 currentPathNode;
                             this.currentPathNode = selectNodes[0];
                             if (this.currentPathNode.useAnimationId &&
@@ -456,6 +789,7 @@ export class PathEditLayer extends Layer {
                             this.currentPathNode.path.closed
                                 ? pathPointSelection.enterSelectBezierMode(selectionNode)
                                 : pathPointSelection.enterPathMode(selectionNode);
+                            this.createHistory();
                             // this.updateNodePathData();
                         }
                         return;
@@ -510,13 +844,18 @@ export class PathEditLayer extends Layer {
         if (!this.currentPathNode) {
             this.currentPathNode = this.document.createDisplayNode(GameObjectBaseType.PATH, undefined, { x: 0, y: 0 });
             this.currentPathNode.selected = true;
+            this.currentPathNode.path.paths = [];
             this.context.selection.clearSelection();
-            this.context.selection.addSelection({
-                node: this.currentPathNode,
-                type: TreeSelection.SelectionType.TOGGLE,
+            setTimeout(() => {
+                this.context.selection.addSelection({
+                    node: this.currentPathNode,
+                    type: TreeSelection.SelectionType.TOGGLE,
+                });
             });
         }
-        this.currentPathNode.path.paths = this.currentPathNode.path.paths || []; // array 会被复用，复制一个，保证不会被修改
+        // 把空数组先插入历史；
+        this.createHistory();
+        // this.currentPathNode.path.paths = this.currentPathNode.path.paths || []; // array 会被复用，复制一个，保证不会被修改
         if (this.isOnePoint() && this.currentPathNode.path.paths.length > 1) {
             // 第一帧
             this.currentPathNode.path.paths.unshift(pos);
@@ -529,16 +868,6 @@ export class PathEditLayer extends Layer {
         //   this.updateNodeData();
         // });
     }
-    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;
-        }
-        setBezierMovePoint(pathNode, key, pos);
-        this.updateNodeData();
-    }
     onBezierPointMouseDown(e, p, key) {
         if (e.buttons !== 1) {
             return;
@@ -546,9 +875,10 @@ export class PathEditLayer extends Layer {
         e.preventDefault();
         e.stopPropagation();
         const pos = this.getPosFromMouseEvent(e);
+        const { x: startX, y: startY } = this.canvasPosToPathPos(pos);
         this.bezierStartPos = {
-            x: pos.x,
-            y: pos.y,
+            x: startX,
+            y: startY,
             key,
             path: p,
         };
@@ -562,18 +892,20 @@ export class PathEditLayer extends Layer {
             onDrag: e => {
                 var _a, _b;
                 if (this.bezierStartPos) {
-                    const { position = { x: 0, y: 0 }, scale = { x: 1, y: 1 }, rotation = 0, } = this.currentPathNode || {};
-                    const offset = this.getBoundsOffset();
-                    let x = e.endPos.x / (((_a = this.config) === null || _a === void 0 ? void 0 : _a.finalScale) || 1) - position.x - offset.x;
-                    let y = e.endPos.y / (((_b = this.config) === null || _b === void 0 ? void 0 : _b.finalScale) || 1) - position.y - offset.y;
-                    const center = {
-                        x: -offset.x,
-                        y: -offset.y,
-                    };
-                    const { x: currentX, y: currentY } = inverseTransformToData({ x, y }, { scale, rotation }, center);
-                    x = currentX;
-                    y = currentY;
-                    this.onBezierPointMove({ x, y });
+                    const { path = { paths: [] } } = this.currentPathNode || {};
+                    const { x, y } = this.canvasPosToPathPos({
+                        x: e.endPos.x / (((_a = this.config) === null || _a === void 0 ? void 0 : _a.finalScale) || 1),
+                        y: e.endPos.y / (((_b = this.config) === null || _b === void 0 ? void 0 : _b.finalScale) || 1),
+                    });
+                    const pathNode = path.paths.find(c => c.id === p.id);
+                    if (!pathNode) {
+                        return;
+                    }
+                    setBezierMovePoint(pathNode, key, { x, y }, this.bezierStartPos, {
+                        shiftKey: this.shiftKey,
+                        ctrlKey: this.ctrlKey,
+                    });
+                    this.updateNodeData(true);
                 }
             },
             onDragEnd: () => {
@@ -590,6 +922,7 @@ export class PathEditLayer extends Layer {
                         ]);
                     }
                 }
+                this.updateNodeData();
             },
         });
         this.draw();
@@ -602,16 +935,13 @@ export class PathEditLayer extends Layer {
         }
         return event;
     }
-    onPointMouseDown(e, currentPoint) {
-        if (e.buttons !== 1) {
-            return;
-        }
+    selectionChange(currentPoint) {
         // 如果在 selection 里拖动所有点, 没有则切换当前 selection 里的点
         const { pathPointSelection } = this;
         if (!pathPointSelection) {
             return;
         }
-        let selection = (pathPointSelection === null || pathPointSelection === void 0 ? void 0 : pathPointSelection.selection) || [];
+        const selection = (pathPointSelection === null || pathPointSelection === void 0 ? void 0 : pathPointSelection.selection) || [];
         const node = this.currentPathNode;
         const selectionNode = [
             {
@@ -654,12 +984,20 @@ export class PathEditLayer extends Layer {
                 }
             }
         }
+    }
+    onPointMouseDown(e, currentPoint) {
+        if (e.buttons !== 1) {
+            return;
+        }
+        this.selectionChange(currentPoint);
+        const node = this.currentPathNode;
         const startNodeClone = 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 { pathPointSelection } = this;
+                const selection = (pathPointSelection === null || pathPointSelection === void 0 ? void 0 : pathPointSelection.selection) || [];
                 const selectionNodes = selection
                     .map(s => node.path.paths.find(p => p.id === s.pointId))
                     .filter(c => c);
@@ -675,70 +1013,92 @@ export class PathEditLayer extends Layer {
                     };
                 });
                 const startNode = selectionNodes.map((s) => startNodeClone.find((c) => c.id === s.id));
-                const { position = { x: 0, y: 0 }, scale = { x: 1, y: 1 }, rotation = 0, } = this.currentPathNode || {};
-                const offset = this.getBoundsOffset();
-                let x = dragEvent.endPos.x / (((_a = this.config) === null || _a === void 0 ? void 0 : _a.finalScale) || 1) -
-                    position.x -
-                    offset.x;
-                let y = dragEvent.endPos.y / (((_b = this.config) === null || _b === void 0 ? void 0 : _b.finalScale) || 1) -
-                    position.y -
-                    offset.y;
-                const center = {
-                    x: -offset.x,
-                    y: -offset.y,
-                };
-                const { x: currentX, y: currentY } = inverseTransformToData({ x, y }, { scale, rotation }, center);
-                x = currentX;
-                y = currentY;
+                const { x, y } = this.canvasPosToPathPos({
+                    x: dragEvent.endPos.x / (((_a = this.config) === null || _a === void 0 ? void 0 : _a.finalScale) || 1),
+                    y: dragEvent.endPos.y / (((_b = this.config) === null || _b === void 0 ? void 0 : _b.finalScale) || 1),
+                });
                 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;
+                    const max = Math.max(Math.abs(deltaX), Math.abs(deltaY));
+                    const isX = max === Math.abs(deltaX);
+                    const isY = max === Math.abs(deltaY);
+                    const noX = this.shiftKey && !isX;
+                    const noY = this.shiftKey && !isY;
                     if (typeof p.x1 === 'number') {
-                        p.x1 = toFixedValue(start.x1 + deltaX, 2);
+                        p.x1 = noX ? start.x1 : toFixedValue(start.x1 + deltaX, 2);
                     }
                     if (typeof p.x2 === 'number') {
-                        p.x2 = toFixedValue(start.x2 + deltaX, 2);
+                        p.x2 = noX ? start.x2 : toFixedValue(start.x2 + deltaX, 2);
                     }
                     if (typeof p.y1 === 'number') {
-                        p.y1 = toFixedValue(start.y1 + deltaY, 2);
+                        p.y1 = noY ? start.y1 : toFixedValue(start.y1 + deltaY, 2);
                     }
                     if (typeof p.y2 === 'number') {
-                        p.y2 = toFixedValue(start.y2 + deltaY, 2);
+                        p.y2 = noY ? start.y2 : toFixedValue(start.y2 + deltaY, 2);
                     }
-                    p.x = toFixedValue(x + d.x, 2);
-                    p.y = toFixedValue(y + d.y, 2);
+                    p.x = noX ? start.x : toFixedValue(x + d.x, 2);
+                    p.y = noY ? start.y : toFixedValue(y + d.y, 2);
                 });
+                this.updateNodeData(true);
+            },
+            onDragEnd: () => {
                 this.updateNodeData();
             },
         });
         this.draw();
     }
-    onPathAddPoint(i, e) {
-        if (!this.currentPathNode || !this.document) {
-            return;
-        }
-        const { path, position = { x: 0, y: 0 }, scale = { x: 1, y: 1 }, rotation = 0, } = this.currentPathNode || {};
-        const { paths = [] } = path;
-        const p = this.getPosFromMouseEvent(e);
+    // 画布坐标转换成 path 坐标；
+    canvasPosToPathPos(p) {
+        const { position = { x: 0, y: 0 }, scale = { x: 1, y: 1 }, rotation = 0 } = this.currentPathNode || {};
         const offset = this.getBoundsOffset();
-        let x = p.x - position.x - offset.x;
-        let y = p.y - position.y - offset.y;
         const center = {
             x: -offset.x,
             y: -offset.y,
         };
+        let x = p.x - position.x - offset.x;
+        let y = p.y - position.y - offset.y;
         const { x: currentX, y: currentY } = inverseTransformToData({ x, y }, { scale, rotation }, center);
         x = currentX;
         y = currentY;
-        const pos = {
+        return {
             x,
             y,
         };
+    }
+    pathPosToCanvasPos(c) {
+        const { position = { x: 0, y: 0 }, scale = { x: 1, y: 1 }, rotation = 0 } = this.currentPathNode || {};
+        const offset = this.getBoundsOffset();
+        const center = {
+            x: -offset.x,
+            y: -offset.y,
+        };
+        const { x, y } = transformToData({ x: c.x, y: c.y }, { scale, rotation }, center);
+        return {
+            x: x + position.x + offset.x,
+            y: y + position.y + offset.y,
+        };
+    }
+    getPathMousePos(e) {
+        var _a, _b;
+        const p = this.getPosFromMouseEvent({
+            clientX: (_a = e.clientX) !== null && _a !== void 0 ? _a : 0,
+            clientY: (_b = e.clientY) !== null && _b !== void 0 ? _b : 0,
+        });
+        return this.canvasPosToPathPos(p);
+    }
+    onPathAddPoint(i, e) {
+        if (!this.currentPathNode || !this.document) {
+            return;
+        }
+        const { path } = this.currentPathNode || {};
+        const { paths = [] } = path;
+        const pos = this.getPathMousePos(e);
         const point = paths[i];
         const nextPoint = paths[i + 1] ? paths[i + 1] : paths[0];
-        const newPoint = getNewPoint(point, nextPoint, pos);
+        const newPoint = getNewPoint(point, nextPoint, pos, this.shiftKey);
         paths.splice(i + 1, 0, newPoint);
         this.pathPointSelection.enterPathMode([
             {
@@ -778,7 +1138,7 @@ export class PathEditLayer extends Layer {
             y: -offset.y,
         };
         const paths = [...p].map(c => {
-            const item = Object.assign(Object.assign({}, c), { x: c.x, y: c.y });
+            const item = Object.assign({}, c);
             const { x, y } = transformToData({ x: c.x, y: c.y }, { scale, rotation }, center);
             item.x = x + position.x + offset.x;
             item.y = y + position.y + offset.y;
@@ -800,8 +1160,10 @@ export class PathEditLayer extends Layer {
                 onBezierPointMouseDown: this.onBezierPointMouseDown.bind(this),
                 onClosePath: this.onClosePath.bind(this),
                 onPathAddPoint: this.onPathAddPoint.bind(this),
+                isShiftKey: this.shiftKey,
+                isCtrlKey: this.ctrlKey,
             } },
-            React.createElement(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, getPosFromMouseEvent: this.getPosFromMouseEvent.bind(this), node: this.currentPathNode, paths: paths, 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 })));
+            React.createElement(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, getPosFromMouseEvent: this.getPosFromMouseEvent.bind(this), node: this.currentPathNode, showAllBezier: this.altKey, paths: paths, 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), onUpdateNodeData: this.updateNodeData.bind(this), scale: this.config.finalScale, getPathMousePos: this.getPathMousePos.bind(this), pathPosToCanvasPos: this.pathPosToCanvasPos.bind(this) })));
     }
 }
 __decorate([