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

fix: 修复freed面板的一些bug

Browse Source
This commit is contained in:
黎智洲 2021-08-17 23:44:28 +08:00
parent 07358a4038
commit 374bff38ff
9 changed files with 168 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demoV2/Layouter/GeneralizedList.js
View File

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

2
demoV2/Layouter/LinkList.js
View File

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

11
demoV2/Layouter/Stack.js
View File

@ -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: {

92
demoV2/demo2.html
View File

@ -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": [
{
"type": "head",
"name": "Qptr",
"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"
]
}
{ id: 6, next: 7 },
{ id: 7, next: 8 },
{ id: 8, external: 'h', data: '66' }
],
"layouter": "LinkQueue"
"layouter": "LinkList"
}
},{
"LinkQueue": {
}, {
"LinkStack0": {
"data": [
{
"type": "head",
"name": "Qptr",
"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
}
{ id: 6, next: 7 },
{ id: 7, next: 8 },
{ id: 8, freed: true, external: 'h' }
],
"layouter": "LinkQueue"
"layouter": "LinkList"
}
}];

2
dist/sv.js vendored
View File

File diff suppressed because one or more lines are too long

8
src/Model/modelConstructor.ts
View File

@ -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);

4
src/View/container/freed.ts
View File

@ -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 [];
}
};

83
src/View/layouter.ts
View File

@ -9,7 +9,7 @@ import { Container } from './container/container';
export class Layouter {
private engine: Engine;
private engine: Engine;
private viewOptions: ViewOptions;
constructor(engine: Engine) {
@ -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,
anchor = item.anchor ?? 0,
labelOffset = options.labelOffset ?? 2;
offset = options.offset ?? 8,
anchor = item.anchor ?? 0,
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) {
angle = anchorVector[1] > 0? -Math.PI: 0;
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 = item.get('size')[1],
labelRadius = item.getLabelSizeRadius() / 2;
labelRadius = item.getLabelSizeRadius() / 2;
anchorVector = Vector.normalize(anchorVector);
markerPosition = Vector.location(center, anchorVector, len);
@ -76,7 +76,7 @@ export class Layouter {
markerEndPosition
});
});
}
}
/**
* 将视图调整至画布中心
@ -105,13 +105,13 @@ export class Layouter {
layoutGroupTable.forEach(group => {
const options: LayoutOptions = group.options.layout,
modelList: Model[] = group.modelList,
modelGroup: Group = new Group();
modelList: Model[] = group.modelList,
modelGroup: Group = new Group();
modelList.forEach(item => {
modelGroup.add(item);
});
this.initLayoutValue(group.element, group.marker); // 初始化布局参数
group.layouter.layout(group.element, options); // 布局节点
modelGroupList.push(modelGroup);
@ -132,25 +132,25 @@ export class Layouter {
private layoutGroups(container: Container, modelGroupList: Group[]): Group {
let wrapperGroup: Group = new Group(),
group: Group,
prevBound: BoundingRect,
prevBound: BoundingRect,
bound: BoundingRect,
boundList: BoundingRect[] = [],
maxHeight: number = -Infinity,
dx = 0, dy = 0;
// 左往右布局
for(let i = 0; i < modelGroupList.length; i++) {
group = modelGroupList[i],
bound = group.getPaddingBound(this.viewOptions.groupPadding);
if(prevBound) {
// 左往右布局
for (let i = 0; i < modelGroupList.length; i++) {
group = modelGroupList[i],
bound = group.getPaddingBound(this.viewOptions.groupPadding);
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

111
src/View/viewManager.ts
View File

@ -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[] {
let freedList: Model[] = [],
private getFreedModelList(prevLayoutGroupTable: LayoutGroupTable, layoutGroupTable: LayoutGroupTable): 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,20 +131,20 @@ 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),
links: Link[] = <Link[]>leakModelList.filter(item => item instanceof Link),
elementIds: string[] = [],
res: Model[] = [];
elements: Element[] = <Element[]>leakModelList.filter(item => item instanceof Element && item.freed === false),
links: Link[] = <Link[]>leakModelList.filter(item => item instanceof Link),
elementIds: string[] = [],
res: Model[] = [];
elements.forEach(item => {
elementIds.push(item.id);
item.set('style', {
fill: '#ccc'
});
});
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,18 +199,18 @@ 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,44 +221,43 @@ 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),
leakModelList = null;
if(this.leakContainer) {
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) {
this.mainContainer.afterRemoveModels(() => {
});
if (this.leakContainer) {
this.mainContainer.afterRemoveModels(() => {});
this.leakContainer.render(leakModelList);
if(leakModelList.length) {
EventBus.emit('onLeak', leakModelList);
}
if (leakModelList.length) {
EventBus.emit('onLeak', leakModelList);
}
}
this.prevLayoutGroupTable = layoutGroupTable;
this.prevModelList = modelList;
}
}
/**
* 销毁