chenxiaopei/StructV2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 大量bug修复

Browse Source
This commit is contained in:
黎智洲
2021-12-09 16:59:44 +08:00
parent 0809d1fd53
commit 0291c74523
26 changed files with 14338 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/View/layoutProvider.ts
+46 -28
View File
@@ -1,9 +1,11 @@
import { IPoint } from '@antv/g6-core';
import { Bound, BoundingRect } from '../Common/boundingRect';
import { Group } from '../Common/group';
import { Util } from '../Common/util';
import { Vector } from '../Common/vector';
import { Engine } from '../engine';
import { LayoutGroupTable } from '../Model/modelConstructor';
import { SVLink } from '../Model/SVLink';
import { SVMarker } from '../Model/SVMarker';
import { SVModel } from '../Model/SVModel';
import { SVFreedLabel, SVLeakAddress, SVNode } from '../Model/SVNode';
@@ -24,17 +26,37 @@ export class LayoutProvider {
/**
* 初始化布局参数
* @param nodes
* @param markers
* 布局前处理
* @param layoutGroupTable
*/
private initLayoutValue(nodes: SVNode[], markers: SVMarker[]) {
[...nodes, ...markers].forEach(item => {
private preLayoutProcess(layoutGroupTable: LayoutGroupTable) {
const modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
modelList.forEach(item => {
item.preLayout = true;
item.set('rotation', item.get('rotation'));
item.set({ x: 0, y: 0 });
});
}
/**
* 布局后处理
* @param layoutGroupTable
*/
private postLayoutProcess(layoutGroupTable: LayoutGroupTable) {
const modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
modelList.forEach(item => {
item.preLayout = false;
// 用两个变量保存节点布局完成后的坐标，因为拖拽节点会改变节点的x，y坐标
// 然后当节点移动到泄漏区的时候，不应该保持节点被拖拽后的状态，应该恢复到布局完成后的状态，不然就会很奇怪
item.layoutX = item.get('x');
item.layoutY = item.get('y');
});
}
/**
* 布局外部指针
* @param marker
@@ -132,7 +154,6 @@ export class LayoutProvider {
modelGroup.add(item);
});
this.initLayoutValue(group.node, group.marker); // 初始化布局参数
group.layoutCreator.layout(group.node, options); // 布局节点
modelGroupList.push(modelGroup);
});
@@ -154,10 +175,17 @@ export class LayoutProvider {
private layoutLeakModels(leakModels: SVModel[], accumulateLeakModels: SVModel[]) {
const group: Group = new Group(),
containerHeight = this.viewContainer.getG6Instance().getHeight(),
leakAreaHeightRatio = this.engine.viewOptions.leakAreaHeight,
leakAreaY = containerHeight * (1 - leakAreaHeightRatio),
leakAreaHeight = this.engine.viewOptions.leakAreaHeight,
leakAreaY = containerHeight - leakAreaHeight,
xOffset = 50;
leakModels.forEach(item => {
item.set({
x: item.layoutX,
y: item.layoutY
});
});
group.add(...leakModels);
const currentLeakGroupBound: BoundingRect = group.getBound(),
globalLeakGroupBound: BoundingRect = accumulateLeakModels.length ?
@@ -181,8 +209,7 @@ export class LayoutProvider {
prevBound: BoundingRect,
bound: BoundingRect,
boundList: BoundingRect[] = [],
maxHeight: number = -Infinity,
dx = 0, dy = 0;
dx = 0;
// 左往右布局
for (let i = 0; i < modelGroupList.length; i++) {
@@ -196,10 +223,6 @@ export class LayoutProvider {
dx = bound.x;
}
if (bound.height > maxHeight) {
maxHeight = bound.height;
}
group.translate(dx, 0);
Bound.translate(bound, dx, 0);
boundList.push(bound);
@@ -207,16 +230,6 @@ export class LayoutProvider {
prevBound = bound;
}
// 居中对齐布局
for (let i = 0; i < modelGroupList.length; i++) {
group = modelGroupList[i];
bound = boundList[i];
dy = maxHeight / 2 - bound.height / 2;
group.translate(0, dy);
Bound.translate(bound, 0, dy);
}
return wrapperGroup;
}
@@ -229,10 +242,10 @@ export class LayoutProvider {
private fitCenter(group: Group) {
let width = this.viewContainer.getG6Instance().getWidth(),
height = this.viewContainer.getG6Instance().getHeight(),
leakAreaHeightRatio = this.engine.viewOptions.leakAreaHeight;
leakAreaHeight = this.engine.viewOptions.leakAreaHeight;
if (this.viewContainer.hasLeak) {
height = height * (1 - leakAreaHeightRatio);
height = height - leakAreaHeight;
}
const viewBound: BoundingRect = group.getBound(),
@@ -245,6 +258,8 @@ export class LayoutProvider {
group.translate(dx, dy);
}
/**
* 布局
* @param layoutGroupTable
@@ -252,13 +267,16 @@ export class LayoutProvider {
* @param hasLeak
*/
public layoutAll(layoutGroupTable: LayoutGroupTable, accumulateLeakModels: SVModel[], leakModels: SVModel[]) {
this.preLayoutProcess(layoutGroupTable);
const modelGroupList: Group[] = this.layoutModels(layoutGroupTable);
const globalGroup: Group = this.layoutGroups(modelGroupList);
const generalGroup: Group = this.layoutGroups(modelGroupList);
if (leakModels.length) {
this.layoutLeakModels(leakModels, accumulateLeakModels);
}
this.fitCenter(globalGroup);
this.fitCenter(generalGroup);
this.postLayoutProcess(layoutGroupTable);
}
}
src/View/reconcile.ts
+4 -2
View File
@@ -91,8 +91,10 @@ export class Reconcile {
leakModels.push(item.freedLabel);
}
item.leakAddress.leaked = true;
leakModels.push(item.leakAddress);
if(item.leakAddress) {
item.leakAddress.leaked = true;
leakModels.push(item.leakAddress);
}
}
});
src/View/renderer.ts
+24 -5
View File
@@ -1,9 +1,8 @@
import { Engine } from '../engine';
import { SVModel } from '../Model/SVModel';
import { Util } from '../Common/util';
import G6 from '@antv/g6';
import { Tooltip, Graph, GraphData } from '@antv/g6';
import { InitViewBehaviors } from '../BehaviorHelper/initViewBehaviors';
import { Graph, GraphData, IGroup } from '@antv/g6-pc';
@@ -28,7 +27,7 @@ export class Renderer {
duration: number = this.engine.animationOptions.duration,
timingFunction: string = this.engine.animationOptions.timingFunction;
const tooltip = new G6.Tooltip({
const tooltip = new Tooltip({
offsetX: 10,
offsetY: 20,
shouldBegin(event) {
@@ -38,12 +37,12 @@ export class Renderer {
itemTypes: ['node']
});
this.shadowG6Instance = new G6.Graph({
this.shadowG6Instance = new Graph({
container: DOMContainer.cloneNode() as HTMLElement
});
// 初始化g6实例
this.g6Instance = new G6.Graph({
this.g6Instance = new Graph({
container: DOMContainer,
width: DOMContainer.offsetWidth,
height: DOMContainer.offsetHeight,
@@ -97,6 +96,7 @@ export class Renderer {
this.shadowG6Instance.read(g6Data);
renderModelList.forEach(item => {
item.shadowG6Item = this.shadowG6Instance.findById(item.id);
item.shadowG6Instance = this.shadowG6Instance;
});
}
@@ -111,6 +111,7 @@ export class Renderer {
this.g6Instance.changeData(renderData);
renderModelList.forEach(item => {
item.g6Instance = this.g6Instance;
item.G6Item = this.g6Instance.findById(item.id);
item.G6Item['SVModel'] = item;
});
@@ -132,6 +133,24 @@ export class Renderer {
return this.g6Instance;
}
/**
*
*/
public refresh() {
this.g6Instance.refresh();
this.shadowG6Instance.refresh();
}
/**
*
* @param width
* @param height
*/
public changeSize(width: number, height: number) {
this.g6Instance.changeSize(width, height);
this.shadowG6Instance.changeSize(width, height);
}
/**
* 销毁
*/
src/View/viewContainer.ts
+16 -11
View File
@@ -8,6 +8,7 @@ import { Reconcile } from "./reconcile";
import { FixNodeMarkerDrag } from "../BehaviorHelper/fixNodeMarkerDrag";
import { InitDragCanvasWithLeak } from "../BehaviorHelper/dragCanvasWithLeak";
import { EventBus } from "../Common/eventBus";
import { InitZoomCanvasWithLeak } from "../BehaviorHelper/zoomCanvasWithLeak";
import { Group } from "../Common/group";
@@ -40,14 +41,14 @@ export class ViewContainer {
height = this.getG6Instance().getHeight(),
{ drag, zoom } = this.engine.interactionOptions;
this.leakAreaY = height * (1 - leakAreaHeight);
this.leakAreaY = height - leakAreaHeight;
if (drag) {
InitDragCanvasWithLeak(this);
}
if (zoom) {
// InitZoomCanvas(g6Instance, g6GeneralGroup);
// InitZoomCanvasWithLeak(this);
}
FixNodeMarkerDrag(g6Instance);
@@ -61,6 +62,7 @@ export class ViewContainer {
*/
reLayout() {
this.layoutProvider.layoutAll(this.prevLayoutGroupTable, [], this.accumulateLeakModels);
this.getG6Instance().refresh();
}
@@ -84,17 +86,20 @@ export class ViewContainer {
* @param height
*/
resize(width: number, height: number) {
this.renderer.getG6Instance().changeSize(width, height);
const g6Instance = this.getG6Instance(),
prevContainerHeight = g6Instance.getHeight(),
globalGroup: Group = new Group();
const containerHeight = this.getG6Instance().getHeight(),
leakAreaHeight = this.engine.viewOptions.leakAreaHeight,
targetY = containerHeight * (1 - leakAreaHeight);
globalGroup.add(...this.prevModelList, ...this.accumulateLeakModels);
this.renderer.changeSize(width, height);
const accumulateLeakGroup = new Group();
accumulateLeakGroup.add(...this.accumulateLeakModels);
accumulateLeakGroup.translate(0, targetY - this.leakAreaY);
this.leakAreaY = targetY;
const containerHeight = g6Instance.getHeight(),
dy = containerHeight - prevContainerHeight;
globalGroup.translate(0, dy);
this.renderer.refresh();
this.leakAreaY += dy;
EventBus.emit('onLeakAreaUpdate', {
leakAreaY: this.leakAreaY,
hasLeak: this.hasLeak
@@ -131,7 +136,7 @@ export class ViewContainer {
hasLeak: this.hasLeak
});
}
this.renderer.build(renderModelList); // 首先在离屏canvas渲染先
this.layoutProvider.layoutAll(layoutGroupTable, this.accumulateLeakModels, diffResult.LEAKED); // 进行布局（设置model的x，y，样式等）