feat: 增加图形变化事件

Author: Yan Heng

packages/core/src/services/selector.ts

@@ -71,6 +71,11 @@ export class Selector extends Service {
     });
     this.optionLayer.add(this.rubberRect);
 
+    this.transformer.on<'transformstart'>('transformstart', this.onTransformStart);
+    this.transformer.on<'transformend'>('transformend', this.onTransformEnd);
+    this.transformer.on<'dragstart'>('dragstart', this.onDragStart);
+    this.transformer.on<'dragend'>('dragend', this.onDragEnd);
+
     this.app.on('mouse:down', this.onMouseDown);
     this.app.on('mouse:move', this.onMouseMove);
     this.app.on('mouse:up', this.onMouseUp);
@@ -117,6 +122,22 @@ export class Selector extends Service {
     return this.selected.has(child._id);
   }
 
+  private onTransformStart = (): void => {
+    this.app.emit('shape:transform:start', { object: [...this.selected.values()] });
+  };
+
+  private onTransformEnd = (): void => {
+    this.app.emit('shape:transform:end', { object: [...this.selected.values()] });
+  };
+
+  private onDragStart = (): void => {
+    this.app.emit('shape:transform:start', { object: [...this.selected.values()] });
+  };
+
+  private onDragEnd = (): void => {
+    this.app.emit('shape:transform:end', { object: [...this.selected.values()] });
+  };
+
   private onMouseDown = ({ event }: EventArgs['mouse:down']): void => {
     if (!this.enable) {
       return;
@@ -178,6 +199,10 @@ export class Selector extends Service {
   };
 
   public dispose(): void {
+    this.transformer.off('transformstart', this.onTransformStart);
+    this.transformer.off('transformend', this.onTransformEnd);
+    this.transformer.off('dragstart', this.onDragStart);
+    this.transformer.off('dragend', this.onDragEnd);
     this.app.off('mouse:down', this.onMouseDown);
     this.app.off('mouse:move', this.onMouseMove);
     this.app.off('mouse:up', this.onMouseUp);

packages/core/src/types.ts

@@ -3,6 +3,7 @@ import Konva from 'konva';
 import App from './app';
 
 export type KonvaMouseEvent = Konva.KonvaEventObject<MouseEvent>;
+export type KonvaDragEvent = Konva.KonvaEventObject<DragEvent>;
 export type Shape = Konva.Shape;
 export type ChildType = Konva.Group | Konva.Shape;
 
@@ -56,6 +57,12 @@ export interface EventArgs {
   'shape:removed': {
     object: ChildType[];
   };
+  'shape:transform:start': {
+    object: ChildType[];
+  };
+  'shape:transform:end': {
+    object: ChildType[];
+  };
   'mouse:down': {
     event: KonvaMouseEvent;
   };