fix: 修复freed面板的一些bug

demoV2/Layouter/GeneralizedList.js

@@ -105,6 +105,8 @@ SV.registerLayouter('GeneralizedList', {
                 }
             },
             link: {
+                loopSub: {},
+                loopNext: {},
                 sub: {
                     type: 'line',
                     sourceAnchor: 2,

demoV2/Layouter/LinkList.js

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

demoV2/Layouter/Stack.js

@@ -32,18 +32,27 @@ SV.registerLayouter('Stack', {
                     }
                 }
             },
-            pointer: {
+            marker: {
                 external: {
+                    type: 'pointer',
                     anchor: 1,
                     style: {
                         fill: '#f08a5d'
                     }
                 },
                 bottomExternal: {
+                    type: 'pointer',
                     anchor: 2,
                     style: {
                         fill: '#f08a5d'
                     }
+                },
+                cursor: {
+                    type: 'cursor',
+                    anchor: 1,
+                    style: {
+                        fill: '#f08a5d'
+                    }
                 }
             },
             layout: {

demoV2/demo2.html

@@ -80,92 +80,30 @@
 
         let cur = SV(document.getElementById('container'), {
             freedContainer: document.getElementById('freed'),
-            leakContainer: document.getElementById('leak')
+            leakContainer: document.getElementById('leak'),
+            view: {
+                groupPadding: 40,
+            },
         });
 
 
         let data = [{
-            "LinkQueue": {
+            "LinkStack0": {
                 "data": [
-                    {
+                    { id: 6, next: 7 },
-                        "type": "head",
+                    { id: 7, next: 8 },
-                        "name": "Qptr",
+                    { id: 8, external: 'h', data: '66' }
-                        "id": "0x616eb0",
-                        "label": "front",
-                        "front": "node#0x616ed0",
-                        "external": [
-                            "lq"
-                        ]
-                    },
-                    {
-                        "type": "head",
-                        "name": "Qptr",
-                        "id": "0x616eb1",
-                        "label": "rear",
-                        "rear": "node#0x616ed0",
-                        "external": null
-                    },
-                    {
-                        "type": "node",
-                        "id": "0x616ed0",
-                        "data": "",
-                        "next": null,
-                        "root": true
-                    },
-                    {
-                        "type": "node",
-                        "id": "0x616ef0",
-                        "data": "D",
-                        "next": null,
-                        "root": true,
-                        "external": [
-                            "p"
-                        ]
-                    }
                 ],
-                "layouter": "LinkQueue"
+                "layouter": "LinkList"
             }
-        },{
+        }, {
-            "LinkQueue": {
+            "LinkStack0": {
                 "data": [
-                    {
+                    { id: 6, next: 7 },
-                        "type": "head",
+                    { id: 7, next: 8 },
-                        "name": "Qptr",
+                    { id: 8, freed: true, external: 'h' }
-                        "id": "0x616eb0",
-                        "label": "front",
-                        "front": "node#0x616ed0",
-                        "external": [
-                            "lq"
-                        ]
-                    },
-                    {
-                        "type": "head",
-                        "name": "Qptr",
-                        "id": "0x616eb1",
-                        "label": "rear",
-                        "rear": "node#0x616ed0",
-                        "external": null
-                    },
-                    {
-                        "type": "node",
-                        "id": "0x616ed0",
-                        "data": "",
-                        "next": null,
-                        "root": true
-                    },
-                    {
-                        "type": "node",
-                        "id": "0x616ef0",
-                        "data": "",
-                        "next": null,
-                        "root": true,
-                        "external": [
-                            "p"
-                        ],
-                        "freed": true
-                    }
                 ],
-                "layouter": "LinkQueue"
+                "layouter": "LinkList"
             }
         }];
 

src/Model/modelConstructor.ts

@@ -7,6 +7,7 @@ import { Element, Link, Marker, Model } from "./modelData";
 
 
 export type LayoutGroup = { 
+    name: string;
     element: Element[];
     link: Link[];
     marker: Marker[];
@@ -64,9 +65,10 @@ export class ModelConstructor {
                   markerOptions = options.marker || { };
                 
             elementList = this.constructElements(elementOptions, name, sourceData, layouterName);
-            markerList = this.constructMarkers(markerOptions, elementList);
+            markerList = this.constructMarkers(name, markerOptions, elementList);
             
             layoutGroupTable.set(name, {
+                name,
                 element: elementList,
                 link: [],
                 marker: markerList,
@@ -186,7 +188,7 @@ export class ModelConstructor {
      * @param elements
      * @returns 
      */
-    private constructMarkers(markerOptions: { [key: string]: MarkerOption }, elements: Element[]): Marker[] {
+    private constructMarkers(groupName: string, markerOptions: { [key: string]: MarkerOption }, elements: Element[]): Marker[] {
         let markerList: Marker[] = [],
             markerNames = Object.keys(markerOptions);
 
@@ -198,7 +200,7 @@ export class ModelConstructor {
                 // 若没有指针字段的结点则跳过
                 if(!markerData) continue;
 
-                let id = name + '.' + (Array.isArray(markerData)? markerData.join('-'): markerData),
+                let id = `${groupName}.${name}.${Array.isArray(markerData)? markerData.join('-'): markerData}`,
                     marker = this.createMarker(id, name, markerData, element, markerOptions[name]);
 
                 markerList.push(marker);

src/View/container/freed.ts

@@ -3,9 +3,9 @@ import { Container } from "./container";
 /**
  * 释放区可视化视图
  */
- export class FreedContainer extends Container { 
+export class FreedContainer extends Container {
 
-     protected initBehaviors(): string[] {
+    protected initBehaviors(): string[] {
         return [];
     }
 };

src/View/layouter.ts

@@ -38,9 +38,9 @@ export class Layouter {
     private layoutMarker(markers: Marker[], markerOptions: { [key: string]: MarkerOption }) {
         markers.forEach(item => {
             const options: MarkerOption = markerOptions[item.getType()],
-                  offset = options.offset ?? 8,
+                offset = options.offset ?? 8,
-                  anchor = item.anchor ?? 0,
+                anchor = item.anchor ?? 0,
-                  labelOffset = options.labelOffset ?? 2;
+                labelOffset = options.labelOffset ?? 2;
 
             let target = item.target,
                 targetBound: BoundingRect = target.getBound(),
@@ -54,15 +54,15 @@ export class Layouter {
             let anchorVector = Vector.subtract(anchorPosition, center),
                 angle = 0, len = Vector.length(anchorVector) + offset;
 
-            if(anchorVector[0] === 0) {
+            if (anchorVector[0] === 0) {
-                angle = anchorVector[1] > 0? -Math.PI: 0;
+                angle = anchorVector[1] > 0 ? -Math.PI : 0;
             }
             else {
                 angle = Math.sign(anchorVector[0]) * (Math.PI / 2 - Math.atan(anchorVector[1] / anchorVector[0]));
             }
 
             const markerHeight = item.get('size')[1],
-                  labelRadius = item.getLabelSizeRadius() / 2;
+                labelRadius = item.getLabelSizeRadius() / 2;
 
             anchorVector = Vector.normalize(anchorVector);
             markerPosition = Vector.location(center, anchorVector, len);
@@ -105,8 +105,8 @@ export class Layouter {
 
         layoutGroupTable.forEach(group => {
             const options: LayoutOptions = group.options.layout,
-                  modelList: Model[] = group.modelList,
+                modelList: Model[] = group.modelList,
-                  modelGroup: Group = new Group();
+                modelGroup: Group = new Group();
 
             modelList.forEach(item => {
                 modelGroup.add(item);
@@ -139,18 +139,18 @@ export class Layouter {
             dx = 0, dy = 0;
 
         // 左往右布局
-        for(let i = 0; i < modelGroupList.length; i++) {
+        for (let i = 0; i < modelGroupList.length; i++) {
             group = modelGroupList[i],
-            bound = group.getPaddingBound(this.viewOptions.groupPadding);
+                bound = group.getPaddingBound(this.viewOptions.groupPadding);
 
-            if(prevBound) {
+            if (prevBound) {
                 dx = prevBound.x + prevBound.width - bound.x;
             }
             else {
                 dx = bound.x;
             }
 
-            if(bound.height > maxHeight) {
+            if (bound.height > maxHeight) {
                 maxHeight = bound.height;
             }
 
@@ -162,7 +162,7 @@ export class Layouter {
         }
 
         // 居中对齐布局
-        for(let i = 0; i < modelGroupList.length; i++) {
+        for (let i = 0; i < modelGroupList.length; i++) {
             group = modelGroupList[i];
             bound = boundList[i];
 
@@ -174,6 +174,47 @@ export class Layouter {
         return wrapperGroup;
     }
 
+    public layoutSingleMarker(marker: Marker, markerOptions: { [key: string]: MarkerOption }) {
+        const options: MarkerOption = markerOptions[marker.getType()],
+            offset = options.offset ?? 8,
+            anchor = marker.anchor ?? 0,
+            labelOffset = options.labelOffset ?? 2;
+
+        let target = marker.target,
+            targetBound: BoundingRect = target.getBound(),
+            anchorPosition = marker.target.G6Item.getAnchorPoints()[anchor],
+            center: [number, number] = [targetBound.x + targetBound.width / 2, targetBound.y + targetBound.height / 2],
+            markerPosition: [number, number],
+            markerEndPosition: [number, number];
+
+        anchorPosition = [anchorPosition.x, anchorPosition.y];
+
+        let anchorVector = Vector.subtract(anchorPosition, center),
+            angle = 0, len = Vector.length(anchorVector) + offset;
+
+        if (anchorVector[0] === 0) {
+            angle = anchorVector[1] > 0 ? -Math.PI : 0;
+        }
+        else {
+            angle = Math.sign(anchorVector[0]) * (Math.PI / 2 - Math.atan(anchorVector[1] / anchorVector[0]));
+        }
+
+        const markerHeight = marker.get('size')[1],
+            labelRadius = marker.getLabelSizeRadius() / 2;
+
+        anchorVector = Vector.normalize(anchorVector);
+        markerPosition = Vector.location(center, anchorVector, len);
+        markerEndPosition = Vector.location(center, anchorVector, markerHeight + len + labelRadius + labelOffset);
+        markerEndPosition = Vector.subtract(markerEndPosition, markerPosition);
+
+        marker.set({
+            x: markerPosition[0],
+            y: markerPosition[1],
+            rotation: angle,
+            markerEndPosition
+        });
+    }
+
     /**
      * 布局
      * @param container 

src/View/viewManager.ts

@@ -1,5 +1,5 @@
 import { Engine } from "../engine";
-import { Element, Link, Model } from "../Model/modelData";
+import { Element, Link, Marker, Model } from "../Model/modelData";
 import { EngineOptions } from "../options";
 import { Container } from "./container/container";
 import { SV } from '../StructV';
@@ -19,6 +19,7 @@ export class ViewManager {
     private freedContainer: Container;
     private leakContainer: Container;
 
+    private prevLayoutGroupTable: LayoutGroupTable;
     private prevModelList: Model[];
 
     private shadowG6Instance;
@@ -27,15 +28,16 @@ export class ViewManager {
         this.engine = engine;
         this.layouter = new Layouter(engine);
         this.mainContainer = new MainContainer(engine, DOMContainer, { tooltip: true });
+        this.prevLayoutGroupTable = new Map();
         this.prevModelList = [];
 
         const options: EngineOptions = this.engine.engineOptions;
 
-        if(options.freedContainer) {
+        if (options.freedContainer) {
             this.freedContainer = new FreedContainer(engine, options.freedContainer, { fitCenter: true, tooltip: true });
         }
 
-        if(options.leakContainer) {
+        if (options.leakContainer) {
             this.leakContainer = new LeakContainer(engine, options.leakContainer, { fitCenter: true, tooltip: false });
         }
 
@@ -50,35 +52,56 @@ export class ViewManager {
      */
     private build(modelList: Model[]) {
         modelList.forEach(item => {
-            const type = item instanceof Link? 'edge': 'node';
+            const type = item instanceof Link ? 'edge' : 'node';
             this.shadowG6Instance.addItem(type, item.cloneProps());
             item.shadowG6Item = this.shadowG6Instance.findById(item.id);
         });
     }
 
+    /**
+     * 
+     * @param freedElement 
+     * @param prevLayoutGroup 
+     */
+    private handleFreedLabel(freedElement: Element[], prevLayoutGroup: LayoutGroup) {
+        if(prevLayoutGroup === undefined) {
+            return;
+        }
+
+        const prevElementList: Element[] = prevLayoutGroup.element;
+
+        freedElement.map(item => {
+            let prevElement = prevElementList.find(el => el.id === item.id),
+                prevLabel = prevElement.get('label') ?? '';
+
+            item.set('label', prevLabel);
+        });
+    }
+
     /**
      * 获取被 free 的节点
      * @param layoutGroupTable 
      * @returns 
      */
-    private getFreedModelList(layoutGroupTable: LayoutGroupTable): Model[] {
+    private getFreedModelList(prevLayoutGroupTable: LayoutGroupTable, layoutGroupTable: LayoutGroupTable): Model[] {
-        let freedList: Model[] = [],
+        let freedElements: Element[] = [],
+            freedMarkers: Marker[] = [],
             freedGroup: LayoutGroup = null,
             freedGroupName: string = null,
             removeModels: Model[] = [];
 
         layoutGroupTable.forEach((group, key) => {
-            let freedElements: Element[] = group.element.filter(item => item.freed);
+            let targetElements: Element[] = group.element.filter(item => item.freed);
 
-            if(freedElements.length) {
+            if (targetElements.length) {
                 freedGroupName = key;
-                freedList = freedElements;
+                freedElements = targetElements;
             }
         });
 
         freedGroup = layoutGroupTable.get(freedGroupName);
 
-        freedList.forEach(fItem => {
+        freedElements.forEach(fItem => {
             removeModels.push(
                 ...Util.removeFromList(freedGroup.element, item => item.id === fItem.id),
                 ...Util.removeFromList(freedGroup.link, item => item.element.id === fItem.id || item.target.id === fItem.id),
@@ -90,7 +113,14 @@ export class ViewManager {
             Util.removeFromList(freedGroup.modelList, item => item.id === model.id);
         });
 
-        return freedList;
+        freedElements.map(item => {
+            const markers = Object.keys(item.markers).map(name => item.markers[name]);
+            freedMarkers.push(...markers);
+        });
+
+        this.handleFreedLabel(freedElements, prevLayoutGroupTable.get(freedGroupName));
+
+        return [...freedElements, ...freedMarkers];
     }
 
     /**
@@ -101,10 +131,10 @@ export class ViewManager {
      */
     private getLeakModelList(prevModelList: Model[], modelList: Model[]): Model[] {
         const leakModelList: Model[] = prevModelList.filter(item => !modelList.find(n => n.id === item.id)),
-              elements: Element[] = <Element[]>leakModelList.filter(item => item instanceof Element && item.freed === false),
+            elements: Element[] = <Element[]>leakModelList.filter(item => item instanceof Element && item.freed === false),
-              links: Link[] = <Link[]>leakModelList.filter(item => item instanceof Link),
+            links: Link[] = <Link[]>leakModelList.filter(item => item instanceof Link),
-              elementIds: string[] = [],
+            elementIds: string[] = [],
-              res: Model[] = [];
+            res: Model[] = [];
 
         elements.forEach(item => {
             elementIds.push(item.id);
@@ -114,7 +144,7 @@ export class ViewManager {
             });
         });
 
-        for(let i = 0; i < links.length; i++) {
+        for (let i = 0; i < links.length; i++) {
             let sourceId = links[i].element.id,
                 targetId = links[i].target.id;
 
@@ -122,7 +152,7 @@ export class ViewManager {
                 stroke: '#333'
             });
 
-            if(elementIds.find(item => item === sourceId) === undefined || elementIds.find(item => item === targetId) === undefined) {
+            if (elementIds.find(item => item === sourceId) === undefined || elementIds.find(item => item === targetId) === undefined) {
                 links.splice(i, 1);
                 i--;
             }
@@ -169,15 +199,15 @@ export class ViewManager {
      * @param height 
      */
     resize(containerName: string, width: number, height: number) {
-        if(containerName === 'main') {
+        if (containerName === 'main') {
             this.mainContainer.getG6Instance().changeSize(width, height);
         }
 
-        if(containerName === 'freed') {
+        if (containerName === 'freed') {
             this.freedContainer.getG6Instance().changeSize(width, height);
         }
 
-        if(containerName === 'leak') {
+        if (containerName === 'leak') {
             this.leakContainer.getG6Instance().changeSize(width, height);
         }
 
@@ -191,42 +221,41 @@ export class ViewManager {
     renderAll(layoutGroupTable: LayoutGroupTable) {
         this.shadowG6Instance.clear();
 
-        let modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
+        let modelList = Util.convertGroupTable2ModelList(layoutGroupTable),
+            leakModelList = [],
+            freedList = [];
 
         this.build(modelList);
 
-        let freedList = this.getFreedModelList(layoutGroupTable),
+        if (this.leakContainer) {
-            leakModelList  = null;
-        
-        if(this.leakContainer) {
             leakModelList = this.getLeakModelList(this.prevModelList, modelList);
             this.build(leakModelList);
         }
 
-        if(this.freedContainer && freedList.length) {
-            EventBus.emit('onFreed', freedList);
-            this.freedContainer.render(freedList);
-        }
-
         // 进行布局（设置model的x，y）
         this.layouter.layoutAll(this.mainContainer, layoutGroupTable);
 
+        freedList = this.getFreedModelList(this.prevLayoutGroupTable, layoutGroupTable);
+
+        if (this.freedContainer && freedList.length) {
+            EventBus.emit('onFreed', freedList);
+            this.freedContainer.render(freedList);
+        }
+
         // 从新获取一次，因为第一次获取没有把freed节点筛选出去
         modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
         this.mainContainer.render(modelList);
 
-        if(this.leakContainer) {
+        if (this.leakContainer) {
-            this.mainContainer.afterRemoveModels(() => {
+            this.mainContainer.afterRemoveModels(() => {});
-                
-            });
-
             this.leakContainer.render(leakModelList);
 
-                if(leakModelList.length) {
+            if (leakModelList.length) {
-                    EventBus.emit('onLeak', leakModelList);
+                EventBus.emit('onLeak', leakModelList);
-                }
+            }
         }
 
+        this.prevLayoutGroupTable = layoutGroupTable;
         this.prevModelList = modelList;
     }