fix: 修复free面板的一些bug

demoV2/Layouter/LinkList.js

@@ -18,7 +18,7 @@ SV.registerLayouter('LinkList', {
             element: { 
                 default: {
                     type: 'link-list-node',
-                    label: '[data]',
+                    label: '[id]',
                     size: [60, 30],
                     style: {
                         stroke: '#333',

demoV2/demo2.html

@@ -91,7 +91,7 @@
             "LinkStack0": {
                 "data": [
                     { id: 6, next: 7 },
-                    { id: 7, next: 8 },
+                    { id: 7, next: 8, freed: true },
                     { id: 8, external: 'h', data: '66' }
                 ],
                 "layouter": "LinkList"
@@ -100,7 +100,7 @@
             "LinkStack0": {
                 "data": [
                     { id: 6, next: 7 },
-                    { id: 7, next: 8 },
+                    { id: 7, next: 8, freed: true },
                     { id: 8, freed: true, external: 'h' }
                 ],
                 "layouter": "LinkList"

src/View/container/container.ts

@@ -7,6 +7,7 @@ import { g6Behavior, Renderer } from "../renderer";
 
 
 
+
 export class Container {
     protected engine: Engine;
     protected DOMContainer: HTMLElement; // 可视化视图容器

src/View/container/freed.ts

@@ -1,3 +1,6 @@
+import { BoundingRect } from "../../Common/boundingRect";
+import { Group } from "../../Common/group";
+import { Model } from "../../Model/modelData";
 import { Container } from "./container";
 
 /**
@@ -5,6 +8,35 @@ import { Container } from "./container";
  */
 export class FreedContainer extends Container {
 
+    /**
+     * 将释放区的节点位置移到容器中央
+     * @param freedModels 
+     */
+    fitCenter(freedModels: Model[]) {
+        freedModels.forEach(item => {
+            item.G6Item = item.shadowG6Item;
+        });
+
+        let width = this.getG6Instance().getWidth(),
+            height = this.getG6Instance().getHeight(),
+            group = new Group();
+
+        group.add(...freedModels);
+        
+        let viewBound: BoundingRect = group.getBound(),
+            centerX = width / 2, centerY = height / 2,
+            boundCenterX = viewBound.x + viewBound.width / 2,
+            boundCenterY = viewBound.y + viewBound.height / 2,
+            dx = centerX - boundCenterX,
+            dy = centerY - boundCenterY;
+
+        group.translate(dx, dy);
+
+        freedModels.forEach(item => {
+            item.G6Item = item.renderG6Item;
+        });
+    }
+
     protected initBehaviors(): string[] {
         return [];
     }

src/View/viewManager.ts

@@ -12,15 +12,17 @@ import { Util } from "../Common/util";
 import { EventBus } from "../Common/eventBus";
 
 
+
 export class ViewManager {
     private engine: Engine;
     private layouter: Layouter;
     private mainContainer: Container;
-    private freedContainer: Container;
-    private leakContainer: Container;
+    private freedContainer: FreedContainer;
+    private leakContainer: LeakContainer;
 
     private prevLayoutGroupTable: LayoutGroupTable;
     private prevModelList: Model[];
+    private prevFreedElements: Element[];
 
     private shadowG6Instance;
 
@@ -29,6 +31,7 @@ export class ViewManager {
         this.layouter = new Layouter(engine);
         this.mainContainer = new MainContainer(engine, DOMContainer, { tooltip: true });
         this.prevLayoutGroupTable = new Map();
+        this.prevFreedElements = [];
         this.prevModelList = [];
 
         const options: EngineOptions = this.engine.engineOptions;
@@ -64,7 +67,7 @@ export class ViewManager {
      * @param prevLayoutGroup 
      */
     private handleFreedLabel(freedElement: Element[], prevLayoutGroup: LayoutGroup) {
-        if(prevLayoutGroup === undefined) {
+        if (prevLayoutGroup === undefined) {
             return;
         }
 
@@ -91,14 +94,24 @@ export class ViewManager {
             removeModels: Model[] = [];
 
         layoutGroupTable.forEach((group, key) => {
-            let targetElements: Element[] = group.element.filter(item => item.freed);
+            let targetElements: Element[] = group.element.filter(item => item.freed),
+                newFreedNode = null;
+
+            // 找出最新的freed节点（防止上一次的freed节点被遗留在该次渲染，此时会出现大于一个freed节点）
+            targetElements.forEach(item => {
+                if (this.prevFreedElements.find(prevEle => prevEle.id === item.id) === undefined) {
+                    newFreedNode = item;
+                }
+            });
 
             if (targetElements.length) {
                 freedGroupName = key;
-                freedElements = targetElements;
+                freedElements = [newFreedNode];
             }
         });
 
+
+
         freedGroup = layoutGroupTable.get(freedGroupName);
 
         freedElements.forEach(fItem => {
@@ -119,6 +132,7 @@ export class ViewManager {
         });
 
         this.handleFreedLabel(freedElements, prevLayoutGroupTable.get(freedGroupName));
+        this.prevFreedElements = freedElements;
 
         return [...freedElements, ...freedMarkers];
     }
@@ -223,7 +237,7 @@ export class ViewManager {
 
         let modelList = Util.convertGroupTable2ModelList(layoutGroupTable),
             leakModelList = [],
-            freedList = [];
+            freedModelList = [];
 
         this.build(modelList);
 
@@ -235,24 +249,21 @@ export class ViewManager {
         // 进行布局（设置model的x，y）
         this.layouter.layoutAll(this.mainContainer, layoutGroupTable);
 
-        freedList = this.getFreedModelList(this.prevLayoutGroupTable, layoutGroupTable);
+        freedModelList = this.getFreedModelList(this.prevLayoutGroupTable, layoutGroupTable);
 
-        if (this.freedContainer && freedList.length) {
-            EventBus.emit('onFreed', freedList);
-            this.freedContainer.render(freedList);
+        if (this.freedContainer && freedModelList.length) {
+            this.freedContainer.fitCenter(freedModelList);
+            this.freedContainer.render(freedModelList); 
+            EventBus.emit('onFreed', freedModelList);
         }
 
         // 从新获取一次，因为第一次获取没有把freed节点筛选出去
         modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
         this.mainContainer.render(modelList);
 
-        if (this.leakContainer) {
-            this.mainContainer.afterRemoveModels(() => {});
+        if (this.leakContainer && leakModelList.length) {
             this.leakContainer.render(leakModelList);
-
-            if (leakModelList.length) {
-                EventBus.emit('onLeak', leakModelList);
-            }
+            EventBus.emit('onLeak', leakModelList);
         }
 
         this.prevLayoutGroupTable = layoutGroupTable;