feat：新增当泄漏区出现节点时的事件

src/Common/eventBus.ts

@@ -0,0 +1,38 @@
+
+
+export interface EventBusInterface {
+    events: { [key: string]: Function[] };
+    on(eventName: string, callback: Function): void;
+    emit(eventName: string, payload?: any): void;
+}
+
+
+export const EventBus: EventBusInterface = {
+    events: { },
+
+    /**
+     * 绑定事件
+     * @param eventName 
+     * @param callback 
+     */
+    on(eventName: string, callback: Function) {
+        if(EventBus.events[eventName] === undefined) {
+            EventBus.events[eventName] = [];
+        }
+
+        EventBus.events[eventName].push(callback);
+    },
+
+    /**
+     * 
+     * @param eventName 
+     * @param payload 
+     */
+    emit(eventName: string, payload?: any) {
+        if(EventBus.events[eventName] === undefined) {
+            return;
+        }
+
+        EventBus.events[eventName].map(item => item(payload));
+    }
+};

src/View/animation.ts

@@ -2,6 +2,13 @@ import { Model } from "../Model/modelData";
 import { SV } from "../StructV";
 
 
+export type animationConfig = {
+    duration: number;
+    timingFunction: string;
+    payload?: any;
+    callback?: Function;
+}
+
 
 /**
  * 动画表
@@ -11,19 +18,17 @@ export const Animations = {
     /**
      * 添加节点 / 边时的动画效果
      * @param model 
-     * @param duration 
+     * @param animationConfig
-     * @param timingFunction 
-     * @param callback 
      */
-    animate_append(model: Model, duration: number, timingFunction: string, callback: Function = null) {
+    animate_append(model: Model, animationConfig: animationConfig) {
         const G6Item = model.G6Item,
               type = G6Item.getType(),
               group = G6Item.getContainer(),
               Mat3 = SV.Mat3,
               animateCfg = {
-                  duration: duration,
+                  duration: animationConfig.duration,
-                  easing: timingFunction,
+                  easing: animationConfig.timingFunction,
-                  callback
+                  callback: animationConfig.callback
               };
 
         if(type === 'node') {
@@ -49,19 +54,17 @@ export const Animations = {
     /**
      * 移除节点 / 边时的动画效果
      * @param model 
-     * @param duration 
+     * @param animationConfig
-     * @param timingFunction 
-     * @param callback 
      */
-     animate_remove(model: Model, duration: number, timingFunction: string, callback: Function = null) {
+    animate_remove(model: Model, animationConfig: animationConfig) {
         const G6Item = model.G6Item,
               type = G6Item.getType(),
               group = G6Item.getContainer(),
               Mat3 = SV.Mat3,
               animateCfg = {
-                  duration: duration,
+                  duration: animationConfig.duration,
-                  easing: timingFunction,
+                  easing: animationConfig.timingFunction,
-                  callback
+                  callback: animationConfig.callback
               };
 
         if(type === 'node') {
@@ -77,6 +80,28 @@ export const Animations = {
 
             line.animate({ lineDash: [0, length], opacity: 0 }, animateCfg);
         }
+    },
+
+    /**
+     * 移动节点 / 边的动画
+     * @param model 
+     * @param animationConfig 
+     */
+    animate_moveTo(model: Model, animationConfig: animationConfig) {
+        const G6Item = model.G6Item,
+              group = G6Item.getContainer(),
+              Mat3 = SV.Mat3,
+              target = animationConfig.payload,
+              animateCfg = {
+                  duration: animationConfig.duration,
+                  easing: animationConfig.timingFunction,
+                  callback: animationConfig.callback
+              };
+              
+        let matrix = Mat3.clone(group.getMatrix());
+
+        Mat3.translate(matrix, matrix, [target.x, target.y]);
+        group.animate({ opacity: 0, matrix }, animateCfg);
     }
     
 };

src/View/container/container.ts

@@ -112,12 +112,16 @@ export class Container {
         let counter = 0;
 
         appendModels.forEach(item => {
-            Animations.animate_append(item, this.animationsOptions.duration, this.animationsOptions.timingFunction, () => {
+            Animations.animate_append(item, {
+                duration: this.animationsOptions.duration,
+                timingFunction: this.animationsOptions.timingFunction,
+                callback: () => {
                     counter++;
     
                     if(counter === appendModels.length) {
                         this.afterAppendModelsCallbacks.map(item => item(appendModels));
                     }
+                }
             });
         });
     }
@@ -130,7 +134,10 @@ export class Container {
         let counter = 0;
 
         removeModels.forEach(item => {
-            Animations.animate_remove(item, this.animationsOptions.duration, this.animationsOptions.timingFunction, () => {
+            Animations.animate_remove(item, { 
+                duration: this.animationsOptions.duration,
+                timingFunction: this.animationsOptions.timingFunction,
+                callback: () => {
                     this.renderer.removeModel(item);
                     item.renderG6Item = item.G6Item = null;
     
@@ -139,6 +146,7 @@ export class Container {
                     if(counter === removeModels.length) {
                         this.afterRemoveModelsCallbacks.map(item => item(removeModels));
                     }
+                }
             });
         });
     }

src/View/container/leak.ts

@@ -3,4 +3,6 @@ import { Container } from "./container";
 /**
  * 泄漏区可视化视图
  */
-export class LeakContainer extends Container { };
+export class LeakContainer extends Container {
+
+};

src/View/container/main.ts

@@ -152,6 +152,8 @@ import { Container } from "./container";
         });
     }
 
+    protected 
+
     protected handleChangeModels(models: Model[]) {
         const changeHighlightColor: string = this.interactionOptions.changeHighlight;
 

src/View/viewManager.ts

@@ -9,6 +9,7 @@ import { LeakContainer } from "./container/leak";
 import { Layouter } from "./layouter";
 import { LayoutGroup, LayoutGroupTable } from "../Model/modelConstructor";
 import { Util } from "../Common/util";
+import { EventBus } from "../Common/eventBus";
 
 
 export class ViewManager {
@@ -226,6 +227,7 @@ export class ViewManager {
         }
 
         if(this.freedContainer) {
+            EventBus.emit('onFreed', freedList);
             this.freedContainer.render(freedList);
         }
 
@@ -237,6 +239,7 @@ export class ViewManager {
 
         if(this.leakContainer && this.prevLayoutGroupTable) {
             this.mainContainer.afterRemoveModels(() => {
+                EventBus.emit('onLeak', leakLayoutGroupTable);
                 this.leakContainer.render(Util.convertGroupTable2ModelList(leakLayoutGroupTable));
             });
         }

src/engine.ts

@@ -4,6 +4,7 @@ import { ModelConstructor } from "./Model/modelConstructor";
 import { AnimationOptions, EngineOptions, InteractionOptions, LayoutGroupOptions, ViewOptions } from "./options";
 import { ViewManager } from "./View/viewManager";
 import { SV } from "./StructV";
+import { EventBus } from "./Common/eventBus";
 
 
 export class Engine { 
@@ -190,6 +191,15 @@ export class Engine {
      * @param callback 
      */
     public on(eventName: string, callback: Function) {
+        if(typeof callback !== 'function') {
+            return;
+        }
+
+        if(eventName === 'onFreed' || eventName === 'onLeak') {
+            EventBus.on(eventName, callback);
+            return;
+        }
+
         this.viewManager.getG6Instance().on(eventName, callback);
     }