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

fix: 修改了节点下标文本的底层实现

Browse Source
This commit is contained in:
黎智洲
2021-12-14 19:13:26 +08:00
parent 6a0139eaeb
commit e1a69b5e91
18 changed files with 14563 additions and 495 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/View/layoutProvider.ts
+64 -14
View File
@@ -5,11 +5,9 @@ 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';
import { LayoutOptions, MarkerOption, ViewOptions } from '../options';
import { SVAddressLabel, SVFreedLabel, SVIndexLabel, SVMarker } from '../Model/SVNodeAppendage';
import { AddressLabelOption, IndexLabelOption, LayoutOptions, MarkerOption, ViewOptions } from '../options';
import { ViewContainer } from './viewContainer';
@@ -111,7 +109,7 @@ export class LayoutProvider {
*/
private layoutFreedLabel(freedLabels: SVFreedLabel[]) {
freedLabels.forEach(item => {
const freedNodeBound = item.node.getBound();
const freedNodeBound = item.target.getBound();
item.set({
x: freedNodeBound.x + freedNodeBound.width / 2,
@@ -121,18 +119,64 @@ export class LayoutProvider {
});
}
/**
*
* @param indexLabels
* @param indexLabelOptions
*/
private layoutIndexLabel(indexLabels: SVIndexLabel[], indexLabelOptions: { [key: string]: IndexLabelOption }) {
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
};
},
right: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => {
return {
x: nodeBound.x + nodeBound.width + offset,
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
};
},
left: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => {
return {
x: nodeBound.x - labelBound.width - 2 * offset,
y: nodeBound.y + nodeBound.height / 2
};
}
};
indexLabels.forEach(item => {
const options: IndexLabelOption = indexLabelOptions[item.sourceType],
nodeBound = item.target.getBound(),
labelBound = item.getBound(),
offset = options.offset ?? 20,
position = options.position ?? 'bottom';
const pos = indexLabelPositionMap[position](nodeBound, labelBound, offset);
item.set(pos);
});
}
/**
* 布局泄漏区节点上面的address label
* @param leakAddress
*/
private layoutLeakAddress(leakAddress: SVLeakAddress[]) {
private layoutAddressLabel(leakAddress: SVAddressLabel[], addressLabelOption: AddressLabelOption) {
const offset = addressLabelOption.offset || 16;
leakAddress.forEach(item => {
const nodeBound = item.node.getBound();
const nodeBound = item.target.getBound();
item.set({
x: nodeBound.x + nodeBound.width / 2,
y: nodeBound.y - 16,
size: [nodeBound.width, 0]
y: nodeBound.y - offset
});
});
}
@@ -146,22 +190,28 @@ export class LayoutProvider {
const modelGroupList: Group[] = [];
layoutGroupTable.forEach(group => {
const options: LayoutOptions = group.options.layout,
modelList: SVModel[] = group.modelList,
const modelList: SVModel[] = group.modelList,
modelGroup: Group = new Group();
const layoutOptions: LayoutOptions = group.options.layout;
modelList.forEach(item => {
modelGroup.add(item);
});
group.layoutCreator.layout(group.node, options); // 布局节点
group.layoutCreator.layout(group.node, layoutOptions); // 布局节点
modelGroupList.push(modelGroup);
});
layoutGroupTable.forEach(group => {
const markerOptions = group.options.marker || {},
indexLabelOptions = group.options.indexLabel || {},
addressLabelOption = group.options.addressLabel || {};
this.layoutIndexLabel(group.indexLabel, indexLabelOptions);
this.layoutFreedLabel(group.freedLabel);
this.layoutLeakAddress(group.leakAddress);
this.layoutMarker(group.marker, group.options.marker); // 布局外部指针
this.layoutAddressLabel(group.addressLabel, addressLabelOption);
this.layoutMarker(group.marker, markerOptions); // 布局外部指针
});
return modelGroupList;
src/View/reconcile.ts
+31 -31
View File
@@ -2,9 +2,9 @@ import { EventBus } from "../Common/eventBus";
import { Util } from "../Common/util";
import { Engine } from "../engine";
import { SVLink } from "../Model/SVLink";
import { SVMarker } from "../Model/SVMarker";
import { SVModel } from "../Model/SVModel";
import { SVLeakAddress, SVNode } from "../Model/SVNode";
import { SVNode } from "../Model/SVNode";
import { SVAddressLabel, SVMarker, SVNodeAppendage } from "../Model/SVNodeAppendage";
import { Animations } from "./animation";
import { Renderer } from "./renderer";
@@ -58,7 +58,7 @@ export class Reconcile {
appendModels.forEach(item => {
let removeIndex = accumulateLeakModels.findIndex(leakModel => item.id === leakModel.id);
if(removeIndex > -1) {
if (removeIndex > -1) {
accumulateLeakModels.splice(removeIndex, 1);
}
});
@@ -83,20 +83,10 @@ export class Reconcile {
item.leaked = true;
leakModels.push(item);
if (item.marker) {
item.marker.leaked = true;
leakModels.push(item.marker);
}
if(item.freedLabel) {
item.marker.leaked = true;
leakModels.push(item.freedLabel);
}
if(item.leakAddress) {
item.leakAddress.leaked = true;
leakModels.push(item.leakAddress);
}
item.appendages.forEach(appendage => {
appendage.leaked = true;
leakModels.push(appendage);
});
}
});
@@ -184,13 +174,13 @@ export class Reconcile {
* @param modelList
* @returns
*/
private getFreedModels(prevModelList: SVModel[], modelList: SVModel[]): SVNode[] {
private getFreedModels(prevModelList: SVModel[], modelList: SVModel[]): SVNode[] {
const freedNodes = modelList.filter(item => item instanceof SVNode && item.freed) as SVNode[];
freedNodes.forEach(item => {
const prev = prevModelList.find(prevModel => item.id === prevModel.id);
if(prev) {
if (prev) {
item.set('label', prev.get('label'));
}
});
@@ -205,10 +195,10 @@ export class Reconcile {
* @param continuousModels
*/
private handleContinuousModels(continuousModels: SVModel[]) {
for(let i = 0; i < continuousModels.length; i++) {
for (let i = 0; i < continuousModels.length; i++) {
let model = continuousModels[i];
if(model instanceof SVNode) {
if (model instanceof SVNode) {
const group = model.G6Item.getContainer();
group.attr({ opacity: 1 });
}
@@ -223,9 +213,19 @@ export class Reconcile {
let { duration, timingFunction } = this.engine.animationOptions;
appendModels.forEach(item => {
if(item instanceof SVLeakAddress) {
const leakAddressG6Group = item.G6Item.getContainer();
leakAddressG6Group.attr({ opacity: 0 });
if (item instanceof SVNodeAppendage) {
// 先不显示泄漏区节点上面的地址文本
if (item instanceof SVAddressLabel) {
// 先将透明度改为0，隐藏掉
const AddressLabelG6Group = item.G6Item.getContainer();
AddressLabelG6Group.attr({ opacity: 0 });
}
else {
Animations.FADE_IN(item.G6Item, {
duration,
timingFunction
});
}
}
else {
Animations.APPEND(item.G6Item, {
@@ -262,7 +262,7 @@ export class Reconcile {
let { duration, timingFunction } = this.engine.animationOptions;
leakModels.forEach(item => {
if(item instanceof SVLeakAddress) {
if (item instanceof SVAddressLabel) {
Animations.FADE_IN(item.G6Item, {
duration,
timingFunction
@@ -279,7 +279,7 @@ export class Reconcile {
*/
private handleAccumulateLeakModels(accumulateModels: SVModel[]) {
accumulateModels.forEach(item => {
if(item.generalStyle) {
if (item.generalStyle) {
item.set('style', { ...item.generalStyle });
}
});
@@ -292,7 +292,7 @@ export class Reconcile {
*/
private handleFreedModels(freedModes: SVNode[]) {
const { duration, timingFunction } = this.engine.animationOptions,
alpha = 0.4;
alpha = 0.4;
freedModes.forEach(item => {
const nodeGroup = item.G6Item.getContainer();
@@ -318,7 +318,7 @@ export class Reconcile {
* @param models
*/
private handleChangeModels(models: SVModel[]) {
if(models.length === 0) {
if (models.length === 0) {
models = this.prevChangeModels;
}
@@ -329,7 +329,7 @@ export class Reconcile {
}
models.forEach(item => {
if(item.generalStyle === undefined) {
if (item.generalStyle === undefined) {
item.generalStyle = Util.objectClone(item.G6ModelProps.style);
}
@@ -410,7 +410,7 @@ export class Reconcile {
this.handleLeakModels(LEAKED);
this.handleRemoveModels(REMOVE);
if(this.isFirstPatch) {
if (this.isFirstPatch) {
this.isFirstPatch = false;
}
}
src/View/viewContainer.ts
+10 -1
View File
@@ -10,6 +10,7 @@ import { InitDragCanvasWithLeak } from "../BehaviorHelper/dragCanvasWithLeak";
import { EventBus } from "../Common/eventBus";
import { InitZoomCanvasWithLeak } from "../BehaviorHelper/zoomCanvasWithLeak";
import { Group } from "../Common/group";
import { Graph } from "_@antv_g6-pc@0.5.0@@antv/g6-pc";
@@ -80,10 +81,18 @@ export class ViewContainer {
/**
* 获取 g6 实例
*/
getG6Instance() {
getG6Instance(): Graph {
return this.renderer.getG6Instance();
}
/**
* 获取泄漏区里面的元素
* @returns
*/
getAccumulateLeakModels(): SVModel[] {
return this.accumulateLeakModels;
}
/**
* 刷新视图
*/