diff --git a/packages/core/src/tools/tool_drag_canvas.ts b/packages/core/src/tools/tool_drag_canvas.ts
index 3220ab6a..716f9da2 100644
--- a/packages/core/src/tools/tool_drag_canvas.ts
+++ b/packages/core/src/tools/tool_drag_canvas.ts
@@ -13,24 +13,24 @@ export class DragCanvasTool implements ITool {
   cursor: ICursor = 'grab';
 
   constructor(private editor: Editor) {}
-  active() {
+  onActive() {
     this.editor.canvasDragger.disableDragBySpace();
     this.editor.canvasDragger.active();
   }
-  inactive() {
+  onInactive() {
     this.editor.canvasDragger.inactive();
     this.editor.canvasDragger.enableDragBySpace();
   }
   moveExcludeDrag() {
     // noop
   }
-  start() {
+  onStart() {
     // noop
   }
-  drag() {
+  onDrag() {
     // noop
   }
-  end() {
+  onEnd() {
     // noop
   }
   afterEnd() {
diff --git a/packages/core/src/tools/tool_draw_graph.ts b/packages/core/src/tools/tool_draw_graph.ts
index 99ff0a52..7554caf3 100644
--- a/packages/core/src/tools/tool_draw_graph.ts
+++ b/packages/core/src/tools/tool_draw_graph.ts
@@ -36,7 +36,7 @@ export abstract class DrawGraphTool implements ITool {
   private unbindEvent: () => void = noop;
 
   constructor(protected editor: Editor) {}
-  active() {
+  onActive() {
     const editor = this.editor;
     const hotkeysManager = editor.hostEventManager;
     const updateRect = () => {
@@ -82,14 +82,14 @@ export abstract class DrawGraphTool implements ITool {
       hotkeysManager.off('spaceToggle', handleSpaceToggle);
     };
   }
-  inactive() {
+  onInactive() {
     this.unbindEvent();
   }
   moveExcludeDrag() {
     // do nothing;
   }
 
-  start(e: PointerEvent) {
+  onStart(e: PointerEvent) {
     this.startPoint = this.editor.getSceneCursorXY(
       e,
       this.editor.setting.get('snapToPixelGrid'),
@@ -100,7 +100,7 @@ export abstract class DrawGraphTool implements ITool {
     this.lastDragPointWhenSpaceDown = null;
   }
 
-  drag(e: PointerEvent) {
+  onDrag(e: PointerEvent) {
     this.editor.hostEventManager.disableDelete();
     this.editor.hostEventManager.disableContextmenu();
     if (this.editor.hostEventManager.isDraggingCanvasBySpace) {
@@ -214,7 +214,7 @@ export abstract class DrawGraphTool implements ITool {
     sceneGraph.render();
   }
 
-  end(e: PointerEvent) {
+  onEnd(e: PointerEvent) {
     if (this.editor.hostEventManager.isDraggingCanvasBySpace) {
       return;
     }
diff --git a/packages/core/src/tools/tool_draw_path.ts b/packages/core/src/tools/tool_draw_path.ts
index 6011140f..99abd034 100644
--- a/packages/core/src/tools/tool_draw_path.ts
+++ b/packages/core/src/tools/tool_draw_path.ts
@@ -27,13 +27,13 @@ export class DrawPathTool implements ITool {
   private currCursorScenePoint: IPoint | null = null;
 
   constructor(private editor: Editor) {}
-  active() {
+  onActive() {
     if (this.editor.pathEditor.getActive()) {
       this.path = this.editor.pathEditor.getPath()!;
       this.pathIdx = this.path.pathData.length;
     }
   }
-  inactive() {
+  onInactive() {
     this.editor.commandManager.batchCommandEnd();
 
     this.editor.pathEditor.updateControlHandles();
@@ -58,7 +58,7 @@ export class DrawPathTool implements ITool {
     }
   }
 
-  start(e: PointerEvent) {
+  onStart(e: PointerEvent) {
     const point = this.editor.getSceneCursorXY(e);
     const pathEditor = this.editor.pathEditor;
     if (this.editor.setting.get('snapToPixelGrid')) {
@@ -147,7 +147,7 @@ export class DrawPathTool implements ITool {
     this.editor.render();
   }
 
-  drag(e: PointerEvent) {
+  onDrag(e: PointerEvent) {
     if (!this.startPoint) {
       console.warn('startPoint is null, check start()');
       return;
@@ -174,7 +174,7 @@ export class DrawPathTool implements ITool {
     this.editor.render();
   }
 
-  end() {
+  onEnd() {
     this.editor.commandManager.pushCommand(
       new SetGraphsAttrsCmd(
         'Update Path Data',
diff --git a/packages/core/src/tools/tool_draw_text.ts b/packages/core/src/tools/tool_draw_text.ts
index f6c08cc1..25a2bf13 100644
--- a/packages/core/src/tools/tool_draw_text.ts
+++ b/packages/core/src/tools/tool_draw_text.ts
@@ -13,23 +13,23 @@ export class DrawTextTool implements ITool {
   cursor: ICursor = 'crosshair';
 
   constructor(private editor: Editor) {}
-  active() {
+  onActive() {
     // noop
   }
-  inactive() {
+  onInactive() {
     // noop
   }
   moveExcludeDrag() {
     // do nothing
   }
-  start() {
+  onStart() {
     // do nothing
   }
-  drag() {
+  onDrag() {
     // do nothing
   }
 
-  end(e: PointerEvent) {
+  onEnd(e: PointerEvent) {
     const { x, y } = this.editor.getCursorXY(e);
 
     // 让一个 input 元素出现在光标位置，然后输入内容回车。
diff --git a/packages/core/src/tools/tool_manager.ts b/packages/core/src/tools/tool_manager.ts
index 2618bad4..4ce6997c 100644
--- a/packages/core/src/tools/tool_manager.ts
+++ b/packages/core/src/tools/tool_manager.ts
@@ -135,7 +135,7 @@ export class ToolManager {
           throw new Error('there is no active tool');
         }
         startPos = { x: e.clientX, y: e.clientY };
-        this.currentTool.start(e);
+        this.currentTool.onStart(e);
       });
     };
     const handleMove = (e: PointerEvent) => {
@@ -158,7 +158,7 @@ export class ToolManager {
         if (this._isDragging) {
           this.enableSwitchTool = false;
           this.editor.canvasDragger.disableDragBySpace();
-          this.currentTool.drag(e);
+          this.currentTool.onDrag(e);
         }
       } else {
         const isOutsideCanvas = this.editor.canvasElement !== e.target;
@@ -178,7 +178,7 @@ export class ToolManager {
       if (isPressing) {
         this.editor.canvasDragger.enableDragBySpace();
         isPressing = false;
-        this.currentTool.end(e, this._isDragging);
+        this.currentTool.onEnd(e, this._isDragging);
         this.currentTool.afterEnd(e);
       }
 
@@ -231,9 +231,9 @@ export class ToolManager {
     }
     const currentTool = (this.currentTool = new currentToolCtor(this.editor));
 
-    prevTool && prevTool.inactive();
+    prevTool && prevTool.onInactive();
     this.setCursorWhenActive();
-    currentTool.active();
+    currentTool.onActive();
     this.eventEmitter.emit('switchTool', currentTool.type);
   }
   on<K extends keyof Events>(eventName: K, handler: Events[K]) {
@@ -243,7 +243,7 @@ export class ToolManager {
     this.eventEmitter.off(eventName, handler);
   }
   destroy() {
-    this.currentTool?.inactive();
+    this.currentTool?.onInactive();
   }
   setCursorWhenActive() {
     if (this.currentTool) {
diff --git a/packages/core/src/tools/tool_path_select/tool_path_select.ts b/packages/core/src/tools/tool_path_select/tool_path_select.ts
index e612e53f..efc45e28 100644
--- a/packages/core/src/tools/tool_path_select/tool_path_select.ts
+++ b/packages/core/src/tools/tool_path_select/tool_path_select.ts
@@ -22,13 +22,13 @@ export class PathSelectTool implements ITool {
   private indexInfo: Readonly<ISelectedIdxInfo> | null = null;
 
   constructor(private editor: Editor) {}
-  active() {
+  onActive() {
     console.log('路径选择工具');
   }
-  inactive() {
+  onInactive() {
     // noop
   }
-  start(e: PointerEvent) {
+  onStart(e: PointerEvent) {
     const startPoint = this.editor.getSceneCursorXY(e);
 
     const control =
@@ -54,7 +54,7 @@ export class PathSelectTool implements ITool {
       }
     }
   }
-  drag(e: PointerEvent) {
+  onDrag(e: PointerEvent) {
     const point = this.editor.getSceneCursorXY(e);
     if (this.startPoint) {
       const path = this.editor.pathEditor.getPath()!;
@@ -68,7 +68,7 @@ export class PathSelectTool implements ITool {
       }
     }
   }
-  end() {
+  onEnd() {
     const path = this.editor.pathEditor.getPath()!;
     this.editor.commandManager.pushCommand(
       new SetGraphsAttrsCmd(
diff --git a/packages/core/src/tools/tool_select/tool_select.ts b/packages/core/src/tools/tool_select/tool_select.ts
index f7a90f28..0e17d0da 100644
--- a/packages/core/src/tools/tool_select/tool_select.ts
+++ b/packages/core/src/tools/tool_select/tool_select.ts
@@ -56,14 +56,14 @@ export class SelectTool implements ITool {
     // TODO: resetHoverItem after drag canvas end
   };
 
-  active() {
+  onActive() {
     this.editor.selectedElements.on(
       'hoverItemChange',
       this.handleHoverItemChange,
     );
     this.editor.hostEventManager.on('spaceToggle', this.handleSpaceToggle);
   }
-  inactive() {
+  onInactive() {
     this.editor.selectedElements.off(
       'hoverItemChange',
       this.handleHoverItemChange,
@@ -101,7 +101,7 @@ export class SelectTool implements ITool {
     }
   }, 20);
 
-  start(e: PointerEvent) {
+  onStart(e: PointerEvent) {
     this.currStrategy = null;
     this.topHitElementWhenStart = null;
     this.isDragHappened = false;
@@ -167,13 +167,13 @@ export class SelectTool implements ITool {
     }
 
     if (this.currStrategy) {
-      this.currStrategy.active();
-      this.currStrategy.start(e);
+      this.currStrategy.onActive();
+      this.currStrategy.onStart(e);
     } else {
       throw new Error('没有根据判断选择策略，代码有问题');
     }
   }
-  drag(e: PointerEvent) {
+  onDrag(e: PointerEvent) {
     this.isDragHappened = true;
 
     if (this.editor.hostEventManager.isDraggingCanvasBySpace) {
@@ -181,12 +181,12 @@ export class SelectTool implements ITool {
     }
 
     if (this.currStrategy) {
-      this.currStrategy.drag(e);
+      this.currStrategy.onDrag(e);
     } else {
       throw new Error('没有根据判断选择策略，代码有问题');
     }
   }
-  end(e: PointerEvent, isDragHappened: boolean) {
+  onEnd(e: PointerEvent, isDragHappened: boolean) {
     this.editor.controlHandleManager.showCustomHandles();
 
     if (this.editor.hostEventManager.isDraggingCanvasBySpace) {
@@ -200,8 +200,8 @@ export class SelectTool implements ITool {
 
     const currStrategy = this.currStrategy;
     if (currStrategy) {
-      currStrategy.end(e, isDragHappened);
-      currStrategy.inactive();
+      currStrategy.onEnd(e, isDragHappened);
+      currStrategy.onInactive();
     } else {
       throw new Error('没有根据判断选择策略，代码有问题');
     }
diff --git a/packages/core/src/tools/tool_select/tool_select_move.ts b/packages/core/src/tools/tool_select/tool_select_move.ts
index cbcbb792..8c12517b 100644
--- a/packages/core/src/tools/tool_select/tool_select_move.ts
+++ b/packages/core/src/tools/tool_select/tool_select_move.ts
@@ -21,7 +21,7 @@ export class SelectMoveTool implements IBaseTool {
   unbindEvents = noop;
 
   constructor(private editor: Editor) {}
-  active() {
+  onActive() {
     const hotkeysManager = this.editor.hostEventManager;
     const moveWhenToggleShift = () => {
       if (this.dragPoint) {
@@ -33,10 +33,10 @@ export class SelectMoveTool implements IBaseTool {
       hotkeysManager.off('shiftToggle', moveWhenToggleShift);
     };
   }
-  inactive() {
+  onInactive() {
     this.unbindEvents();
   }
-  start(e: PointerEvent) {
+  onStart(e: PointerEvent) {
     this.editor.controlHandleManager.hideCustomHandles();
 
     this.startPoint = this.editor.getSceneCursorXY(e);
@@ -61,7 +61,7 @@ export class SelectMoveTool implements IBaseTool {
 
     this.editor.refLine.cacheXYToBbox();
   }
-  drag(e: PointerEvent) {
+  onDrag(e: PointerEvent) {
     this.dragPoint = this.editor.getCursorXY(e);
     this.move();
   }
@@ -119,7 +119,7 @@ export class SelectMoveTool implements IBaseTool {
 
     this.editor.sceneGraph.render();
   }
-  end(e: PointerEvent, isDragHappened: boolean) {
+  onEnd(e: PointerEvent, isDragHappened: boolean) {
     const selectedItems = this.editor.selectedElements.getItems({
       excludeLocked: true,
     });
diff --git a/packages/core/src/tools/tool_select/tool_select_resize.ts b/packages/core/src/tools/tool_select/tool_select_resize.ts
index f0e6c1e5..5219a04b 100644
--- a/packages/core/src/tools/tool_select/tool_select_resize.ts
+++ b/packages/core/src/tools/tool_select/tool_select_resize.ts
@@ -24,7 +24,7 @@ export class SelectResizeTool implements IBaseTool {
 
   constructor(private editor: Editor) {}
 
-  active() {
+  onActive() {
     const handler = () => {
       this.resize();
     };
@@ -36,11 +36,11 @@ export class SelectResizeTool implements IBaseTool {
       this.editor.hostEventManager.off('altToggle', handler);
     };
   }
-  inactive() {
+  onInactive() {
     this.unbind();
     this.unbind = noop;
   }
-  start(e: PointerEvent) {
+  onStart(e: PointerEvent) {
     this.startPoint = this.editor.getSceneCursorXY(e);
     const handleInfo = this.editor.controlHandleManager.getHandleInfoByPoint(
       this.startPoint,
@@ -71,7 +71,7 @@ export class SelectResizeTool implements IBaseTool {
     }
     this.handleName = handleInfo.handleName;
   }
-  drag(e: PointerEvent) {
+  onDrag(e: PointerEvent) {
     this.editor.commandManager.disableRedoUndo();
     this.editor.hostEventManager.disableDelete();
 
@@ -143,7 +143,7 @@ export class SelectResizeTool implements IBaseTool {
 
     this.editor.sceneGraph.render();
   }
-  end(_e: PointerEvent, isDragHappened: boolean) {
+  onEnd(_e: PointerEvent, isDragHappened: boolean) {
     if (this.editor.selectedElements.size() === 0 || !isDragHappened) {
       return;
     }
diff --git a/packages/core/src/tools/tool_select/tool_select_rotation.ts b/packages/core/src/tools/tool_select/tool_select_rotation.ts
index e04efc06..25a906e6 100644
--- a/packages/core/src/tools/tool_select/tool_select_rotation.ts
+++ b/packages/core/src/tools/tool_select/tool_select_rotation.ts
@@ -36,13 +36,13 @@ export class SelectRotationTool implements IBaseTool {
 
   constructor(private editor: Editor) {}
 
-  active() {
+  onActive() {
     this.editor.hostEventManager.on('shiftToggle', this.shiftPressHandler);
   }
-  inactive() {
+  onInactive() {
     this.editor.hostEventManager.off('shiftToggle', this.shiftPressHandler);
   }
-  start(e: PointerEvent) {
+  onStart(e: PointerEvent) {
     this.lastPoint = null;
     this.dRotation = 0;
     this.selectedBoxCenter = null;
@@ -69,7 +69,7 @@ export class SelectRotationTool implements IBaseTool {
     );
     this.startBboxRotation = this.editor.selectedElements.getRotation();
   }
-  drag(e: PointerEvent) {
+  onDrag(e: PointerEvent) {
     this.lastPoint = this.editor.getSceneCursorXY(e);
     this.rotateSelectedElements();
   }
@@ -123,7 +123,7 @@ export class SelectRotationTool implements IBaseTool {
     }
     this.editor.sceneGraph.render();
   }
-  end() {
+  onEnd() {
     const selectedElements = this.editor.selectedElements.getItems();
     const commandDesc = 'Rotate Elements';
     if (this.dRotation !== 0) {
diff --git a/packages/core/src/tools/tool_select/tool_select_selection.ts b/packages/core/src/tools/tool_select/tool_select_selection.ts
index 22eb5615..b85d0837 100644
--- a/packages/core/src/tools/tool_select/tool_select_selection.ts
+++ b/packages/core/src/tools/tool_select/tool_select_selection.ts
@@ -14,13 +14,13 @@ export class DrawSelectionBox implements IBaseTool {
   private startSelectedGraphs: Graph[] = [];
 
   constructor(private editor: Editor) {}
-  active() {
+  onActive() {
     // noop
   }
-  inactive() {
+  onInactive() {
     // noop
   }
-  start(e: PointerEvent) {
+  onStart(e: PointerEvent) {
     this.isShiftPressingWhenStart = false;
 
     if (this.editor.hostEventManager.isShiftPressing) {
@@ -36,7 +36,7 @@ export class DrawSelectionBox implements IBaseTool {
     this.editor.sceneGraph.render();
     this.editor.sceneGraph.setSelection(this.lastPoint);
   }
-  drag(e: PointerEvent) {
+  onDrag(e: PointerEvent) {
     const point = this.editor.getSceneCursorXY(e);
 
     const box = getRectByTwoPoint(this.lastPoint, point);
@@ -53,7 +53,7 @@ export class DrawSelectionBox implements IBaseTool {
 
     this.editor.sceneGraph.render();
   }
-  end() {
+  onEnd() {
     // noop
   }
   afterEnd() {
diff --git a/packages/core/src/tools/type.ts b/packages/core/src/tools/type.ts
index 4e11a686..89394106 100644
--- a/packages/core/src/tools/type.ts
+++ b/packages/core/src/tools/type.ts
@@ -9,18 +9,18 @@ export interface ITool extends IBaseTool {
 }
 
 export interface IBaseTool {
-  active: () => void;
-  inactive: () => void;
+  onActive: () => void;
+  onInactive: () => void;
   // moveExcludeDrag: (event: PointerEvent) => void;
-  start: (event: PointerEvent) => void;
-  drag: (event: PointerEvent) => void;
+  onStart: (event: PointerEvent) => void;
+  onDrag: (event: PointerEvent) => void;
   /**
    * end (after drag)
    * @param event
    * @param isDragHappened is drag happened
    * @returns
    */
-  end: (event: PointerEvent, isDragHappened: boolean) => void;
+  onEnd: (event: PointerEvent, isDragHappened: boolean) => void;
   /** init state when finish a drag loop */
   afterEnd: (event: PointerEvent) => void;
   onCommandChange?: () => void;