@gedit/editor-2d 0.3.13 → 0.3.16

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

@@ -39,6 +39,10 @@ import {
   transformToData,
 } from './path-edit';
 
+import { Command } from '@gedit/command';
+import { isOSX } from '@gedit/application-common';
+import { getParallelPositionByPoint } from '../utils/bezier.path.utils';
+
 export interface PathEditLayerEventContextProps {
   onPointMouseDown: (e: React.MouseEvent, p: PathChild) => void;
   onClosePath: () => void;
@@ -53,11 +57,52 @@ export interface PathEditLayerEventContextProps {
     key: string
   ) => void;
   onPathAddPoint: (index: number, e: React.MouseEvent) => void;
+  isShiftKey?: boolean;
+  isCtrlKey?: boolean;
 }
 export const PathEditLayerEventContext = React.createContext<PathEditLayerEventContextProps>(
   {} as PathEditLayerEventContextProps
 );
 
+export namespace Editor2dPathKeyCommands {
+  const EDITOR2D_PATH_CATEGORY = 'Editor2dPath';
+  export const TAB_PATH: Command = {
+    id: 'editor2d.path.tab',
+    category: EDITOR2D_PATH_CATEGORY,
+    label: '下一个点',
+  };
+  // export const SHOW_ALL_BEZIER: Command = {
+  //   id: 'editor2d.path.showAllBezier',
+  //   category: EDITOR2D_PATH_CATEGORY,
+  //   label: '显示全部贝塞尔点',
+  // };
+  export const SELECT_All: Command = {
+    id: 'editor2d.path.selectAll',
+    category: EDITOR2D_PATH_CATEGORY,
+    label: '选择全部',
+  };
+  export const BEZIER_STRAIGHT: Command = {
+    id: 'editor2d.path.bezierStraight',
+    category: EDITOR2D_PATH_CATEGORY,
+    label: '无贝塞尔',
+  };
+  export const BEZIER_EQUAL: Command = {
+    id: 'editor2d.path.bezierEqual',
+    category: EDITOR2D_PATH_CATEGORY,
+    label: '左右相等',
+  };
+  export const BEZIER_BREAK: Command = {
+    id: 'editor2d.path.bezierBreak',
+    category: EDITOR2D_PATH_CATEGORY,
+    label: '左右断开',
+  };
+  export const BEZIER_UNEQUAL: Command = {
+    id: 'editor2d.path.bezierUnequal',
+    category: EDITOR2D_PATH_CATEGORY,
+    label: '左右不相等',
+  };
+}
+
 /**
  * 动态绘制层
  */
@@ -75,6 +120,34 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
   currentPathNode?: Editor2dPathNode;
   startPos?: PathChild;
 
+  // 显示全部贝塞尔点
+  protected altKey = false;
+
+  // 按住 shit 键
+  protected shiftKey = false;
+
+  // 按住 ctrl 或 ⌘ 键；
+  protected ctrlKey = false;
+
+  // 历史记录
+  // protected history:
+
+  protected historyUri?: string;
+
+  protected _historyIndex = 0;
+
+  protected noHistory = false;
+
+  get historyIndex(): number {
+    const h = this._historyIndex;
+    this._historyIndex++;
+    return h;
+  }
+
+  set historyIndex(h: number) {
+    this._historyIndex = h;
+  }
+
   // 访录当前图层在 timeline 里的监听事件
   layerDisposeMap = new Map<string, Disposable>();
   protected bezierStartPos?: {
@@ -105,13 +178,14 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
   }
 
   reNodeData(): void {
+    this.clearHistory();
     this.currentPathNode = undefined;
     this.startPos = undefined;
     this.pathPointSelection!.clearSelection();
     this.pathPointSelection!.selectMode = PathSelectMode.ADD_PATH;
     this.docDispose?.dispose();
   }
-  updateNodeData(): void {
+  updateNodeData(noHistory?: boolean): void {
     if (!this.currentPathNode) {
       return;
     }
@@ -119,7 +193,69 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
     // console.log('updateNodeData', nodeData);
     // 直接更新数据，，动画 updateAnimationNode 里会把数据删了；
     this.currentPathNode.path = nodeData.path;
+    this.currentPathNode.selected = true;
     this.document?.updateNode(this.currentPathNode, nodeData, true);
+    this.addHistoryData(noHistory);
+  }
+  reloadNodeData(content: string): void {
+    if (!this.currentPathNode || !this.pathPointSelection) {
+      return;
+    }
+    const path = JSON.parse(content) as PathSchema;
+    this.currentPathNode.path = path;
+    this.document?.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(): void {
+    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?: boolean): void {
+    const nodePath = this.currentPathNode?.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: string) => {
+            this.reloadNodeData(content);
+          },
+          resource: {
+            uri: this.historyUri,
+          },
+        },
+      },
+    });
+  }
+  createHistory(): void {
+    if (!this.currentPathNode) {
+      return;
+    }
+    this.historyUri = `${this.context.document.uri}?${this.currentPathNode?.id}`;
+    if (this.context.historyService.currentUri !== this.historyUri) {
+      this.context.historyService.switchHistory(this.historyUri);
+      if (
+        !this.context.historyService.getHistoryNavigator(this.historyUri)
+          ?.length
+      ) {
+        this.addHistoryData();
+      }
+    }
   }
   // updateNodePathData(): void {
   // if (!this.currentPathNode) {
@@ -237,14 +373,199 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
     }
   }
 
+  protected updateCurrentPointBezierType(type: PATH_FUNC_TYPE): void {
+    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();
+  }
+
+  protected registerKeybindings(): Disposable[] {
+    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: KeyboardEvent) => {
+        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: () => {
+          const currentPoint = this.pathPointSelection.selection?.[0]?.pointId;
+          const { paths = [] } = this.currentPathNode?.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(): void {
     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 => {
         /**
          * 1. 不是路径编辑状态时，清空数据
@@ -262,7 +583,6 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
             return;
           }
           const selectNodes = this.document?.getSelectedNodes() || [];
-
           const pathSelectsNodes = selectNodes.filter(
             c => c.displayType === GameObjectBaseType.PATH
           );
@@ -272,6 +592,7 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
             this.currentPathNode = deepClone(
               pathSelectsNodes[0]
             ) as Editor2dPathNode;
+            this.createHistory();
             if (
               this.currentPathNode.useAnimationId &&
               this.document?.timelineService?.currentTimelineData &&
@@ -282,13 +603,17 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
               this.onRegisterTimelineEvent();
             }
 
-            const selectionNode = [
-              {
-                pointId: this.currentPathNode.path.paths[
-                  this.currentPathNode.path.paths.length - 1
-                ].id,
-              },
-            ];
+            const selectionNode = this.currentPathNode.path.paths[
+              this.currentPathNode.path.paths.length - 1
+            ]?.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);
@@ -413,70 +738,78 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
         }
         this.reNodeData();
       }), */
+      // 拦掉画布点击事件，失焦再次点击时会触发 widget 的点击事件, 会聚焦到 widget 上
+      this.listenPlaygroundEvent('click', (event: MouseEvent) => {
+        if (this.isEnabled) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.createHistory();
+        }
+      }),
       // 画布新增点点击事件;
       this.listenPlaygroundEvent('mousedown', (event: MouseEvent) => {
         // 只在左键点击时绘制
-        if (event.buttons !== 1) {
+        if (event.buttons !== 1 || !this.isEnabled) {
           return;
         }
+        event.preventDefault();
+        event.stopPropagation();
         this.startDrag(event.clientX, event.clientY, {
           onDragStart: e => {
-            // 当前编辑模式为路径编辑
-            if (this.editorState.is(EditorState.EDIT_PATH_STATE.id)) {
-              const { selectMode } = this.pathPointSelection || {};
-              /**
-               * 拦截画布点击事件，不处理绘制；
-               * 1. 闭合路径时；
-               * 2. 带区域选择模式时；
-               * 3. 多点选择时;
-               */
-              if (
-                // 判断当前 select 是否 path 路径
-                (this.currentPathNode && this.currentPathNode.path.closed) ||
-                selectMode !== PathSelectMode.ADD_PATH ||
-                (this.pathPointSelection?.selection &&
-                  this.pathPointSelection.selection.length > 1)
-              ) {
-                return;
-              }
-              const {
-                position = { x: 0, y: 0 },
-                scale = { x: 1, y: 1 },
-                rotation = 0,
-              } = this.currentPathNode || {};
-              const offset = this.getBoundsOffset();
-              let x =
-                e.endPos.x / (this.config?.finalScale || 1) -
-                position.x -
-                offset.x;
-              let y =
-                e.endPos.y / (this.config?.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 ||
+              (this.pathPointSelection?.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 / (this.config?.finalScale || 1) -
+              position.x -
+              offset.x;
+            let y =
+              e.endPos.y / (this.config?.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 => {
             if (!this.startPos) {
@@ -530,15 +863,21 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
               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: MouseEvent) => {
+        if (!this.isEnabled) {
+          return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
         // 双击画布时，关闭路径
         // 1. 在路径编辑状态时，不处理；
         // 2. 选中的是 path 路径时，不处理，新增点；
@@ -546,7 +885,7 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
         // 4. 右键时，不处理；
         // 5. 不是路径编辑状态时，不处理；
         const isExit =
-          this.editorState.is(EditorState.EDIT_PATH_STATE.id) &&
+          this.isEnabled &&
           this.pathPointSelection.selectMode === PathSelectMode.SELECT_BEZIER;
         if (isExit) {
           const playgroundLayer = this.pipelineLayers.find(
@@ -574,6 +913,8 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
               !this.currentPathNode ||
               selectNodes[0].id !== this.currentPathNode.id
             ) {
+              // 清空上个 path 的 history
+              this.clearHistory();
               // 选中的不是当前的 path 路径， 切换 currentPathNode;
               this.currentPathNode = selectNodes[0] as Editor2dPathNode;
               if (
@@ -596,6 +937,7 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
               this.currentPathNode.path.closed
                 ? pathPointSelection.enterSelectBezierMode(selectionNode)
                 : pathPointSelection.enterPathMode(selectionNode);
+              this.createHistory();
               // this.updateNodePathData();
             }
             return;
@@ -663,13 +1005,18 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
         { x: 0, y: 0 }
       );
       this.currentPathNode.selected = true;
+      this.currentPathNode.path.paths = [];
       this.context.selection.clearSelection();
-      this.context.selection.addSelection({
-        node: this.currentPathNode as Readonly<SelectableTreeNode>,
-        type: TreeSelection.SelectionType.TOGGLE,
+      setTimeout(() => {
+        this.context.selection.addSelection({
+          node: this.currentPathNode as Readonly<SelectableTreeNode>,
+          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);
@@ -683,16 +1030,6 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
     // });
   }
 
-  protected onBezierPointMove(pos: PointSchema): void {
-    const { key, path: p } = this.bezierStartPos!;
-    const { path = { paths: [] } } = this.currentPathNode || {};
-    const pathNode = path.paths.find(c => c.id === p.id);
-    if (!pathNode || !this.currentPathNode) {
-      return;
-    }
-    setBezierMovePoint(pathNode, key, pos);
-    this.updateNodeData();
-  }
   protected onBezierPointMouseDown(
     e: React.MouseEvent,
     p: PathChild,
@@ -723,6 +1060,7 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
             position = { x: 0, y: 0 },
             scale = { x: 1, y: 1 },
             rotation = 0,
+            path = { paths: [] },
           } = this.currentPathNode || {};
           const offset = this.getBoundsOffset();
           let x =
@@ -740,7 +1078,17 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
           );
           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: () => {
@@ -756,6 +1104,7 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
             ]);
           }
         }
+        this.updateNodeData();
       },
     });
     this.draw();
@@ -774,19 +1123,13 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
     return event;
   }
 
-  protected onPointMouseDown(
-    e: React.MouseEvent,
-    currentPoint: PathChild
-  ): void {
-    if (e.buttons !== 1) {
-      return;
-    }
+  protected selectionChange(currentPoint: PathChild): void {
     // 如果在 selection 里拖动所有点, 没有则切换当前 selection 里的点
     const { pathPointSelection } = this;
     if (!pathPointSelection) {
       return;
     }
-    let selection = pathPointSelection?.selection || [];
+    const selection = pathPointSelection?.selection || [];
     const node = this.currentPathNode as Editor2dPathNode;
     const selectionNode = [
       {
@@ -825,12 +1168,26 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
         }
       }
     }
+  }
+
+  protected onPointMouseDown(
+    e: React.MouseEvent,
+    currentPoint: PathChild
+  ): void {
+    if (e.buttons !== 1) {
+      return;
+    }
+
+    this.selectionChange(currentPoint);
+
+    const node = this.currentPathNode as Editor2dPathNode;
     const startNodeClone = deepClone(node.path.paths);
 
     this.startDrag(e.clientX, e.clientY, {
       // 拖动
       onDrag: dragEvent => {
-        selection = pathPointSelection?.selection || [];
+        const { pathPointSelection } = this;
+        const selection = pathPointSelection?.selection || [];
         const selectionNodes = selection
           .map(s => node.path.paths.find(p => p.id === s.pointId))
           .filter(c => c) as PathChild[];
@@ -880,47 +1237,50 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
           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();
   }
-  protected onPathAddPoint(i: number, e: React.MouseEvent): void {
-    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 坐标；
+  protected canvasPosToPathPos(p: {
+    x: number;
+    y: number;
+  }): { x: number; y: number } {
+    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 },
@@ -928,13 +1288,53 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
     );
     x = currentX;
     y = currentY;
-    const pos = {
+    return {
       x,
       y,
     };
+  }
+  protected pathPosToCanvasPos(c: {
+    x: number;
+    y: number;
+  }): {
+      x: number;
+      y: number;
+    } {
+    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,
+    };
+  }
+  protected getPathMousePos(e: React.MouseEvent): { x: number; y: number } {
+    const p = this.getPosFromMouseEvent({
+      clientX: e.clientX ?? 0,
+      clientY: e.clientY ?? 0,
+    });
+    return this.canvasPosToPathPos(p);
+  }
+  protected onPathAddPoint(i: number, e: React.MouseEvent): void {
+    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([
       {
@@ -987,8 +1387,6 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
     const paths = [...p].map(c => {
       const item = {
         ...c,
-        x: c.x,
-        y: c.y,
       };
 
       const { x, y } = transformToData(
@@ -1028,6 +1426,8 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
           onBezierPointMouseDown: this.onBezierPointMouseDown.bind(this),
           onClosePath: this.onClosePath.bind(this),
           onPathAddPoint: this.onPathAddPoint.bind(this),
+          isShiftKey: this.shiftKey,
+          isCtrlKey: this.ctrlKey,
         }}
       >
         <SvgPath
@@ -1035,11 +1435,15 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
           height={this.config.config.pageBounds?.height || 300}
           getPosFromMouseEvent={this.getPosFromMouseEvent.bind(this)}
           node={this.currentPathNode}
+          showAllBezier={this.altKey}
           paths={paths}
           selection={this.pathPointSelection?.selection as PathPointSelection[]}
           selectMode={this.pathPointSelection?.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)}
         />
       </PathEditLayerEventContext.Provider>
     );