fix: 修复泄漏区布局问题

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 test
+dist

demoV2/Layouter/BinaryTree.js

@@ -129,7 +129,6 @@ SV.registerLayout('BinaryTree', {
      */
     layout(elements, layoutOptions) {
         let root = elements[0];
-        let visited = new Group();
         this.layoutItem(root, null, -1, layoutOptions);
     }
 });

src/View/layoutProvider.ts

@@ -10,7 +10,6 @@ import { SVAddressLabel, SVFreedLabel, SVIndexLabel, SVMarker } from '../Model/S
 import { AddressLabelOption, IndexLabelOption, LayoutOptions, MarkerOption, ViewOptions } from '../options';
 import { ViewContainer } from './viewContainer';
 
-
 export class LayoutProvider {
 	private engine: Engine;
 	private viewOptions: ViewOptions;
@@ -22,7 +21,6 @@ export class LayoutProvider {
 		this.viewContainer = viewContainer;
 	}
 
-
 	/**
 	 * 布局前处理
 	 * @param layoutGroupTable
@@ -70,19 +68,22 @@ export class LayoutProvider {
 			let target = item.target,
 				targetBound: BoundingRect = target.getBound(),
 				g6AnchorPosition = item.target.shadowG6Item.getAnchorPoints()[anchor] as IPoint,
-                center: [number, number] = [targetBound.x + targetBound.width / 2, targetBound.y + targetBound.height / 2],
+				center: [number, number] = [
+					targetBound.x + targetBound.width / 2,
+					targetBound.y + targetBound.height / 2,
+				],
 				markerPosition: [number, number],
 				markerEndPosition: [number, number];
 
 			let anchorPosition: [number, number] = [g6AnchorPosition.x, g6AnchorPosition.y];
 
 			let anchorVector = Vector.subtract(anchorPosition, center),
-                angle = 0, len = Vector.length(anchorVector) + offset;
+				angle = 0,
+				len = Vector.length(anchorVector) + offset;
 
 			if (anchorVector[0] === 0) {
 				angle = anchorVector[1] > 0 ? -Math.PI : 0;
-            }
-            else {
+			} else {
 				angle = Math.sign(anchorVector[0]) * (Math.PI / 2 - Math.atan(anchorVector[1] / anchorVector[0]));
 			}
 
@@ -98,7 +99,7 @@ export class LayoutProvider {
 				x: markerPosition[0],
 				y: markerPosition[1],
 				rotation: angle,
-                markerEndPosition
+				markerEndPosition,
 			});
 		});
 	}
@@ -114,7 +115,7 @@ export class LayoutProvider {
 			item.set({
 				x: freedNodeBound.x + freedNodeBound.width / 2,
 				y: freedNodeBound.y + freedNodeBound.height * 1.5,
-                size: [freedNodeBound.width, 0]
+				size: [freedNodeBound.width, 0],
 			});
 		});
 	}
@@ -125,31 +126,37 @@ export class LayoutProvider {
 	 * @param indexLabelOptions
 	 */
 	private layoutIndexLabel(indexLabels: SVIndexLabel[], indexLabelOptions: { [key: string]: IndexLabelOption }) {
-        const indexLabelPositionMap: { [key: string]: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => { x: number, y: number } } = {
+		const indexLabelPositionMap: {
+			[key: string]: (
+				nodeBound: BoundingRect,
+				labelBound: BoundingRect,
+				offset: number
+			) => { x: number; y: number };
+		} = {
 			top: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => {
 				return {
 					x: nodeBound.x + nodeBound.width / 2,
-                    y: nodeBound.y - offset
+					y: nodeBound.y - offset,
 				};
 			},
 			right: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => {
 				return {
 					x: nodeBound.x + nodeBound.width + offset,
-                    y: nodeBound.y + nodeBound.height / 2
+					y: nodeBound.y + nodeBound.height / 2,
 				};
 			},
 			bottom: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => {
 				return {
 					x: nodeBound.x + nodeBound.width / 2,
-                    y: nodeBound.y + nodeBound.height + offset
+					y: nodeBound.y + nodeBound.height + offset,
 				};
 			},
 			left: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => {
 				return {
 					x: nodeBound.x - labelBound.width - offset,
-                    y: nodeBound.y + nodeBound.height / 2
+					y: nodeBound.y + nodeBound.height / 2,
 				};
-            }
+			},
 		};
 
 		indexLabels.forEach(item => {
@@ -176,12 +183,11 @@ export class LayoutProvider {
 
 			item.set({
 				x: nodeBound.x + nodeBound.width / 2,
-                y: nodeBound.y - offset
+				y: nodeBound.y - offset,
 			});
 		});
 	}
 
-
 	/**
 	 * 对每个组内部的model进行布局
 	 * @param layoutGroupTable
@@ -235,13 +241,13 @@ export class LayoutProvider {
 		leakModels.forEach(item => {
 			item.set({
 				x: item.layoutX,
-                y: item.layoutY
+				y: item.layoutY,
 			});
 		});
 
-        const globalLeakGroupBound: BoundingRect = accumulateLeakModels.length ?
-            Bound.union(...accumulateLeakModels.map(item => item.getBound())) :
-            { x: 0, y: leakAreaY, width: 0, height: 0 };
+		const globalLeakGroupBound: BoundingRect = accumulateLeakModels.length
+			? Bound.union(...accumulateLeakModels.map(item => item.getBound()))
+			: { x: 0, y: leakAreaY, width: 0, height: 0 };
 
 		const layoutGroups = Util.groupBy(leakModels, 'group');
 		Object.keys(layoutGroups).forEach(key => {
@@ -280,8 +286,7 @@ export class LayoutProvider {
 
 			if (prevBound) {
 				dx = prevBound.x + prevBound.width - bound.x;
-            }
-            else {
+			} else {
 				dx = bound.x;
 			}
 
@@ -295,7 +300,6 @@ export class LayoutProvider {
 		return wrapperGroup;
 	}
 
-
 	/**
 	 * 将视图调整至画布中心
 	 * @param models
@@ -304,24 +308,27 @@ export class LayoutProvider {
 	private fitCenter(group: Group) {
 		let width = this.viewContainer.getG6Instance().getWidth(),
 			height = this.viewContainer.getG6Instance().getHeight(),
+			viewBound: BoundingRect = group.getBound(),
 			leakAreaHeight = this.engine.viewOptions.leakAreaHeight;
 
-        if (this.viewContainer.hasLeak) {
-            height = height - leakAreaHeight;
-        }
+		const centerX = width / 2,
+			centerY = height / 2,
+			boundCenterX = viewBound.x + viewBound.width / 2;
 
-        const 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,
+		let dx = centerX - boundCenterX,
+			dy = 0;
+
+		if (this.viewContainer.hasLeak) {
+			const boundBottomY = viewBound.y + viewBound.height;
+			dy = height - leakAreaHeight - 100 - boundBottomY;
+		} else {
+			const boundCenterY = viewBound.y + viewBound.height / 2;
 			dy = centerY - boundCenterY;
+		}
 
 		group.translate(dx, dy);
 	}
 
-
-
 	/**
 	 * 布局
 	 * @param layoutGroupTable

src/View/viewContainer.ts

@@ -140,7 +140,7 @@ export class ViewContainer {
      * @param models 
      * @param layoutFn 
      */
-    render(layoutGroupTable: LayoutGroupTable) {
+    render(layoutGroupTable: LayoutGroupTable, a: boolean) {
         const modelList = Util.convertGroupTable2ModelList(layoutGroupTable),
             diffResult = this.reconcile.diff(this.layoutGroupTable, this.prevModelList, modelList, this.accumulateLeakModels),
             renderModelList = [

src/engine.ts

@@ -67,7 +67,7 @@ export class Engine {
         const layoutGroupTable = this.modelConstructor.construct(source);
 
         // 2 渲染（使用g6进行渲染）
-        this.viewContainer.render(layoutGroupTable);
+        this.viewContainer.render(layoutGroupTable, source.enterFunction as boolean);
     }
 
 

src/sources.ts

@@ -16,6 +16,7 @@ export interface SourceNode {
 
 
 export type Sources = {
+    enterFunction: any;
     [key: string]: { 
         data: SourceNode[]; 
         layouter: string;