@gedit/editor-2d 0.3.13 → 0.3.16

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

@@ -16,7 +16,48 @@ import { TreeSelection } from '@gedit/tree';
 import { 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 { 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 &&
@@ -310,60 +611,68 @@ 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;
-                            }
-                            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,
-                                },
-                            ]);
+                        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;
                         }
+                        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.updateNodeData(true);
                     },
                     onDrag: e => {
                         var _a, _b;
@@ -399,23 +708,29 @@ export class PathEditLayer extends Layer {
                             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 +753,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 +773,7 @@ export class PathEditLayer extends Layer {
                             this.currentPathNode.path.closed
                                 ? pathPointSelection.enterSelectBezierMode(selectionNode)
                                 : pathPointSelection.enterPathMode(selectionNode);
+                            this.createHistory();
                             // this.updateNodePathData();
                         }
                         return;
@@ -510,13 +828,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 +852,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;
@@ -562,7 +875,7 @@ 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 { position = { x: 0, y: 0 }, scale = { x: 1, y: 1 }, rotation = 0, path = { paths: [] }, } = 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;
@@ -573,7 +886,12 @@ export class PathEditLayer extends Layer {
                     const { x: currentX, y: currentY } = inverseTransformToData({ x, y }, { scale, rotation }, center);
                     x = currentX;
                     y = currentY;
-                    this.onBezierPointMove({ x, y });
+                    const pathNode = path.paths.find(c => c.id === p.id);
+                    if (!pathNode) {
+                        return;
+                    }
+                    setBezierMovePoint(pathNode, key, { x, y }, { shiftKey: this.shiftKey, ctrlKey: this.ctrlKey });
+                    this.updateNodeData(true);
                 }
             },
             onDragEnd: () => {
@@ -590,6 +908,7 @@ export class PathEditLayer extends Layer {
                         ]);
                     }
                 }
+                this.updateNodeData();
             },
         });
         this.draw();
@@ -602,16 +921,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 +970,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);
@@ -695,50 +1019,83 @@ export class PathEditLayer extends Layer {
                     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 +1135,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 +1157,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([