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

Merge branch 'branch_cjc4' into 'main'

Browse Source 
Branch cjc4

See merge request phenomLi/StructV2!23
This commit is contained in:
chen jiancheng 2022-07-18 09:12:59 +00:00
commit 584b8eedf5
9 changed files with 297 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
copyDist2Anyview.js
View File

@ -1,6 +1,6 @@
const fs = require('fs'); const fs = require('fs');
const sourcePath = 'D:\\个人项目\\StructV2\\dist\\sv.js'; const sourcePath = 'E:\\研究生\\StructV2\\dist\\sv.js';
const targetPath = 'D:\\个人项目\\froend_student\\src\\pages\\student\\assets\\js\\sv.js' const targetPath = 'E:\\研究生\\froend_student\\src\\pages\\student\\assets\\js\\sv.js'
function COPY(from, to) { function COPY(from, to) {

58
demo/Layouter/AdjoinMatrixGraph.js
View File

@ -1,5 +1,4 @@
const isNeighbor = function(itemA, itemB) {
const isNeighbor = function (itemA, itemB) {
let neighborA = itemA.neighbor, let neighborA = itemA.neighbor,
neighborB = itemB.neighbor; neighborB = itemB.neighbor;
@ -21,33 +20,33 @@ const isNeighbor = function (itemA, itemB) {
SV.registerLayout('AdjoinMatrixGraph', { SV.registerLayout('AdjoinMatrixGraph', {
sourcesPreprocess(sources) { sourcesPreprocess(sources) {
let dataLength = sources.length; // let dataLength = sources.length;
let matrixNodeLength = dataLength * dataLength; // let matrixNodeLength = dataLength * dataLength;
let matrixNodes = []; // let matrixNodes = [];
let i, j; // let i, j;
for (i = 0; i < matrixNodeLength; i++) { // for (i = 0; i < matrixNodeLength; i++) {
matrixNodes.push({ // matrixNodes.push({
id: `mn-${i}`, // id: `mn-${i}`,
type: 'matrixNode', // type: 'matrixNode',
indexTop: i < dataLength ? sources[i].id : undefined, // indexTop: i < dataLength ? sources[i].id : undefined,
indexLeft: i % dataLength === 0? sources[i / dataLength].id : undefined, // indexLeft: i % dataLength === 0? sources[i / dataLength].id : undefined,
data: 0 // data: 0
}); // });
} // }
for (i = 0; i < dataLength; i++) { // for (i = 0; i < dataLength; i++) {
for (j = 0; j < dataLength; j++) { // for (j = 0; j < dataLength; j++) {
let itemI = sources[i], // let itemI = sources[i],
itemJ = sources[j]; // itemJ = sources[j];
if (itemI.id !== itemJ.id && isNeighbor(itemI, itemJ)) { // if (itemI.id !== itemJ.id && isNeighbor(itemI, itemJ)) {
matrixNodes[i * dataLength + j].data = 1; // matrixNodes[i * dataLength + j].data = 1;
} // }
} // }
} // }
sources.push(...matrixNodes); // sources.push(...matrixNodes);
return sources; return sources;
}, },
@ -106,7 +105,7 @@ SV.registerLayout('AdjoinMatrixGraph', {
i; i;
const matrixY = -radius, const matrixY = -radius,
matrixX = interval; matrixX = interval;
for (i = 0; i < nodeLength; i++) { for (i = 0; i < nodeLength; i++) {
let [x, y] = Vector.rotation(-intervalAngle * i, [0, -radius]); let [x, y] = Vector.rotation(-intervalAngle * i, [0, -radius]);
@ -116,12 +115,9 @@ SV.registerLayout('AdjoinMatrixGraph', {
for (i = 0; i < matrixNodeLength; i++) { for (i = 0; i < matrixNodeLength; i++) {
let x = matrixX + (i % nodeLength) * matrixNodeSize; let x = matrixX + (i % nodeLength) * matrixNodeSize;
y = matrixY + Math.floor(i / nodeLength) * matrixNodeSize; y = matrixY + Math.floor(i / nodeLength) * matrixNodeSize;
matrixNodes[i].set({ x, y }); matrixNodes[i].set({ x, y });
} }
} }
}); });

175
demo/Layouter/AdjoinTableGraph.js
View File

@ -1,95 +1,93 @@
SV.registerLayout('AdjoinTableGraph', { SV.registerLayout('AdjoinTableGraph', {
sourcesPreprocess(sources, options) { sourcesPreprocess(sources, options, group) {
let dataLength = sources.length;
let tableHeadNodes = [];
let nodeMap = {};
let i;
// let dataLength = sources.length;
// let tableHeadNodes = [];
// let nodeMap = {};
// let i;
for (i = 0; i < dataLength; i++) {
let graphNode = sources[i];
tableHeadNodes.push({ // for (i = 0; i < dataLength; i++) {
id: `table-head-node-${i}`, // let graphNode = sources[i];
type: 'tableHeadNode',
data: graphNode.id
});
nodeMap[graphNode.id] = { // tableHeadNodes.push({
node: graphNode, // id: `table-head-node-${i}`,
order: i, // type: 'tableHeadNode',
neighbor: [] // data: graphNode.id
}; // });
}
Object.keys(nodeMap).map(key => { // nodeMap[graphNode.id] = {
let nodeData = nodeMap[key], // node: graphNode,
neighbor = nodeData.node.neighbor; // order: i,
// neighbor: []
// };
// }
if (neighbor === undefined) { // Object.keys(nodeMap).map(key => {
return; // let nodeData = nodeMap[key],
} // neighbor = nodeData.node.neighbor;
neighbor.forEach((item, index) => { // if (neighbor === undefined) {
let targetNodeData = nodeMap[item]; // return;
// }
nodeData.neighbor.push({ // neighbor.forEach((item, index) => {
id: `${key}-table-node-${item}`, // let targetNodeData = nodeMap[item];
type: 'tableNode',
data: item.toString(),
order: targetNodeData.order
});
targetNodeData.neighbor.push({ // nodeData.neighbor.push({
id: `${item}-table-node-${key}`, // id: `${key}-table-node-${item}`,
type: 'tableNode', // type: 'tableNode',
data: key.toString(), // data: item.toString(),
order: nodeData.order // order: targetNodeData.order
}); // });
});
Object.keys(nodeMap).map(key => { // targetNodeData.neighbor.push({
let nodeData = nodeMap[key], // id: `${item}-table-node-${key}`,
neighbor = nodeData.neighbor; // type: 'tableNode',
// data: key.toString(),
// order: nodeData.order
// });
// });
if (neighbor === undefined) { // Object.keys(nodeMap).map(key => {
return; // let nodeData = nodeMap[key],
} // neighbor = nodeData.neighbor;
neighbor.sort((n1, n2) => { // if (neighbor === undefined) {
return n1.order - n2.order; // return;
}); // }
for(let i = 0; i < neighbor.length; i++) { // neighbor.sort((n1, n2) => {
if(neighbor[i + 1]) { // return n1.order - n2.order;
neighbor[i].next = `tableNode#${neighbor[i + 1].id}`; // });
}
}
});
tableHeadNodes.forEach(item => { // for (let i = 0; i < neighbor.length; i++) {
let nodeData = nodeMap[item.data], // if (neighbor[i + 1]) {
neighbor = nodeData.neighbor; // neighbor[i].next = `tableNode#${neighbor[i + 1].id}`;
// }
// }
// });
if(neighbor.length) { // tableHeadNodes.forEach(item => {
item.headNext = `tableNode#${neighbor[0].id}`; // let nodeData = nodeMap[item.data],
} // neighbor = nodeData.neighbor;
});
});
sources.push(...tableHeadNodes); // if (neighbor.length) {
Object.keys(nodeMap).map(key => { // item.headNext = `tableNode#${neighbor[0].id}`;
let nodeData = nodeMap[key], // }
neighbor = nodeData.neighbor; // });
// });
sources.push(...neighbor);
});
return sources; // sources.push(...tableHeadNodes);
// Object.keys(nodeMap).map(key => {
// let nodeData = nodeMap[key],
// neighbor = nodeData.neighbor;
// sources.push(...neighbor);
// });
// return sources;
}, },
defineOptions() { defineOptions() {
@ -129,17 +127,17 @@ SV.registerLayout('AdjoinTableGraph', {
stroke: '#333' stroke: '#333'
} }
}, },
headNext: { headNext: {
sourceAnchor: 1, sourceAnchor: 1,
targetAnchor: 6, targetAnchor: 6,
style: { style: {
stroke: '#333', stroke: '#333',
endArrow: { endArrow: {
path: G6.Arrow.triangle(8, 6, 0), path: G6.Arrow.triangle(8, 6, 0),
fill: '#333' fill: '#333'
}, },
startArrow: { startArrow: {
path: G6.Arrow.circle(2, -1), path: G6.Arrow.circle(2, -1),
fill: '#333' fill: '#333'
} }
} }
@ -150,11 +148,11 @@ SV.registerLayout('AdjoinTableGraph', {
style: { style: {
stroke: '#333', stroke: '#333',
endArrow: { endArrow: {
path: G6.Arrow.triangle(8, 6, 0), path: G6.Arrow.triangle(8, 6, 0),
fill: '#333' fill: '#333'
}, },
startArrow: { startArrow: {
path: G6.Arrow.circle(2, -1), path: G6.Arrow.circle(2, -1),
fill: '#333' fill: '#333'
} }
} }
@ -177,22 +175,22 @@ SV.registerLayout('AdjoinTableGraph', {
* @param node * @param node
* @param parent * @param parent
*/ */
layoutItem(node, prev, layoutOptions) { layoutItem(node, prev, layoutOptions) {
if(!node) { if (!node) {
return null; return null;
} }
let width = node.get('size')[0]; let width = node.get('size')[0];
if(prev) { if (prev) {
node.set('y', prev.get('y')); node.set('y', prev.get('y'));
node.set('x', prev.get('x') + layoutOptions.xInterval + width); node.set('x', prev.get('x') + layoutOptions.xInterval + width);
} }
if(node.next) { if (node.next) {
this.layoutItem(node.next, node, layoutOptions); this.layoutItem(node.next, node, layoutOptions);
} }
}, },
layout(elements, layoutOptions) { layout(elements, layoutOptions) {
let nodes = elements.filter(item => item.type === 'default'), let nodes = elements.filter(item => item.type === 'default'),
@ -209,9 +207,9 @@ SV.registerLayout('AdjoinTableGraph', {
} }
const tableY = -radius, const tableY = -radius,
tableX = radius + 20; tableX = radius + 20;
for(i = 0; i < tableHeadNode.length; i++) { for (i = 0; i < tableHeadNode.length; i++) {
let node = tableHeadNode[i], let node = tableHeadNode[i],
height = node.get('size')[1]; height = node.get('size')[1];
@ -220,7 +218,7 @@ SV.registerLayout('AdjoinTableGraph', {
y: tableY + node.get('y') + i * height y: tableY + node.get('y') + i * height
}); });
if(node.headNext) { if (node.headNext) {
let y = node.get('y') + height - node.headNext.get('size')[1], let y = node.get('y') + height - node.headNext.get('size')[1],
x = tableX + layoutOptions.xInterval * 2.5; x = tableX + layoutOptions.xInterval * 2.5;
@ -230,7 +228,4 @@ SV.registerLayout('AdjoinTableGraph', {
} }
} }
}); });

146
demo/Layouter/DirectedAdjoinMatrixGraph.js Normal file
View File

@ -0,0 +1,146 @@
const isNeighborDAM = function(itemA, itemB) {
let neighborA = itemA.neighbor,
neighborB = itemB.neighbor;
if (neighborA === undefined && neighborB === undefined) {
return false;
}
if (neighborA && neighborA.includes(itemB.id)) {
return true;
}
return false;
}
SV.registerLayout('DirectedAdjoinMatrixGraph', {
sourcesPreprocess(sources) {
let dataLength = sources.length;
let matrixNodeLength = dataLength * dataLength;
let matrixNodes = [];
let i, j;
for (i = 0; i < matrixNodeLength; i++) {
matrixNodes.push({
id: `mn-${i}`,
type: 'matrixNode',
indexTop: i < dataLength ? sources[i].data : undefined,
indexLeft: i % dataLength === 0 ? sources[i / dataLength].data : undefined,
data: 0
});
}
for (i = 0; i < dataLength; i++) {
for (j = 0; j < dataLength; j++) {
let itemI = sources[i],
itemJ = sources[j];
if (itemI.id !== itemJ.id && isNeighborDAM(itemI, itemJ)) {
matrixNodes[i * dataLength + j].data = 1;
}
}
}
sources.push(...matrixNodes);
return sources;
},
defineOptions() {
return {
node: {
default: {
type: 'circle',
size: 40,
label: '[data]',
style: {
fill: '#95e1d3',
stroke: '#333',
cursor: 'pointer',
backgroundFill: '#ddd'
},
labelOptions: {
style: { fontSize: 16 }
}
},
matrixNode: {
type: 'array-node',
size: [40, 40],
label: '[data]',
style: {
fill: '#95e1d3',
stroke: '#333',
cursor: 'pointer',
backgroundFill: '#ddd'
},
labelOptions: {
style: { fontSize: 16 }
}
}
},
link: {
neighbor: {
type: 'line',
style: {
endArrow: 'default',
lineAppendWidth: 10,
lineWidth: 1.6,
stroke: '#333',
}
}
},
indexLabel: {
indexTop: {
position: 'top',
style: {
fill: '#bbb'
}
},
indexLeft: {
position: 'left',
style: {
fill: '#bbb'
}
}
},
addressLabel: {
style: {
fill: '#999'
}
},
layout: {
radius: 150,
interval: 250
},
behavior: {
dragNode: ['default']
}
};
},
layout(elements, layoutOptions) {
let nodes = elements.filter(item => item.type === 'default'),
matrixNodes = elements.filter(item => item.type === 'matrixNode'),
nodeLength = nodes.length,
matrixNodeLength = matrixNodes.length,
{ interval, radius } = layoutOptions,
intervalAngle = 2 * Math.PI / nodes.length,
matrixNodeSize = matrixNodes[0].get('size')[0],
i;
const matrixY = -radius,
matrixX = interval;
for (i = 0; i < nodeLength; i++) {
let [x, y] = Vector.rotation(-intervalAngle * i, [0, -radius]);
nodes[i].set({ x, y });
}
for (i = 0; i < matrixNodeLength; i++) {
let x = matrixX + (i % nodeLength) * matrixNodeSize,
y = matrixY + Math.floor(i / nodeLength) * matrixNodeSize;
matrixNodes[i].set({ x, y });
}
}
});

1
src/Model/SVLink.ts
View File

@ -66,6 +66,7 @@ export class SVLink extends SVModel {
style: Util.objectClone<Style>(options.style), style: Util.objectClone<Style>(options.style),
labelCfg, labelCfg,
curveOffset: options.curveOffset, curveOffset: options.curveOffset,
loopCfg: options.loopCfg,
}; };
} }

17
src/Model/modelConstructor.ts
View File

@ -1,3 +1,4 @@
import { Graph } from '@antv/g6';
import { Group } from '../Common/group'; import { Group } from '../Common/group';
import { Util } from '../Common/util'; import { Util } from '../Common/util';
import { Engine } from '../engine'; import { Engine } from '../engine';
@ -67,13 +68,15 @@ export class ModelConstructor {
return; return;
} }
const options: LayoutGroupOptions = layoutCreator.defineOptions(sourceGroup.data), const options: LayoutGroupOptions = layoutCreator.defineOptions(sourceGroup.data),
sourceData = layoutCreator.sourcesPreprocess(sourceGroup.data, options), sourceData = layoutCreator.sourcesPreprocess(sourceGroup.data, options, group),
nodeOptions = options.node || options['element'] || {}, nodeOptions = options.node || options['element'] || {},
markerOptions = options.marker || {}, markerOptions = options.marker || {},
indexLabelOptions = options.indexLabel || {}, indexLabelOptions = options.indexLabel || {},
addressLabelOption = options.addressLabel || {}; addressLabelOption = options.addressLabel || {};
nodeList = this.constructNodes(group, layout, nodeOptions, sourceData); nodeList = this.constructNodes(group, layout, nodeOptions, sourceData);
appendageList.push(...this.constructMarkers(group, layout, markerOptions, nodeList)); appendageList.push(...this.constructMarkers(group, layout, markerOptions, nodeList));
appendageList.push(...this.constructIndexLabel(group, layout, indexLabelOptions, nodeList)); appendageList.push(...this.constructIndexLabel(group, layout, indexLabelOptions, nodeList));
@ -230,7 +233,7 @@ export class ModelConstructor {
// 若没有指针字段的结点则跳过 // 若没有指针字段的结点则跳过
if (value === undefined || value === null) continue; if (value === undefined || value === null) continue;
let id = `${group}[${name}(${value})]`, let id = `${group}[${name}(${value}-${node.id})]`,
indexLabel = new SVIndexLabel( indexLabel = new SVIndexLabel(
id, id,
name, name,
@ -378,7 +381,13 @@ export class ModelConstructor {
index: number, index: number,
options: LinkOption options: LinkOption
): SVLink { ): SVLink {
let id = `${linkName}{${node.id}-${target.id}}#${index}`; let id;
// 如果数据结构是图，则不需要index来区分是哪条边
if (layout.indexOf('Graph') !== -1) {
id = `${linkName}{${node.id}-${target.id}}`;
} else {
id = `${linkName}{${node.id}-${target.id}}#${index}`;
}
return new SVLink(id, linkName, group, layout, node, target, index, options); return new SVLink(id, linkName, group, layout, node, target, index, options);
} }

20
src/View/viewContainer.ts
View File

@ -28,6 +28,10 @@ export class ViewContainer {
private prevModelList: SVModel[]; private prevModelList: SVModel[];
private accumulateLeakModels: SVModel[]; private accumulateLeakModels: SVModel[];
private preIsFirstDebug: boolean[]; //存储以前的handleUpdate
private stackAddress: number //指向preHandleUpdate的栈地址
private preCount: number; //点击上一步的次数
public hasLeak: boolean; public hasLeak: boolean;
public leakAreaY: number; public leakAreaY: number;
public lastLeakAreaTranslateY: number; public lastLeakAreaTranslateY: number;
@ -48,6 +52,9 @@ export class ViewContainer {
this.brushSelectedModels = []; this.brushSelectedModels = [];
this.clickSelectNode = null; this.clickSelectNode = null;
this.lastLeakAreaTranslateY = 0; this.lastLeakAreaTranslateY = 0;
this.preIsFirstDebug = [];
this.preCount = 0;
this.stackAddress = 0;
const g6Instance = this.renderer.getG6Instance(), const g6Instance = this.renderer.getG6Instance(),
leakAreaHeight = this.engine.viewOptions.leakAreaHeight, leakAreaHeight = this.engine.viewOptions.leakAreaHeight,
@ -191,10 +198,21 @@ export class ViewContainer {
this.setPrevUpdateId([]) this.setPrevUpdateId([])
return; return;
} }
// 判断是否需要进行泄漏区的比较 // 判断是否需要进行泄漏区的比较
let isDiffLeak = handleUpdate?.isEnterFunction || handleUpdate?.hasTriggerLastStep; let isDiffLeak = handleUpdate?.isEnterFunction || handleUpdate?.hasTriggerLastStep;
// if (!handleUpdate?.hasTriggerLastStep) {
// this.preCount++;
// } else {
// this.preCount--;
// }
// //preCount用来判断是否是第一次进入调试，因为刚开始调试后点击下一步再点上一步，后端给回的isFirstDebug = false，因改为true
// if (this.preCount === 1 || this.preCount === 2) {
// console.log(this.preCount);
// handleUpdate.isFirstDebug = true;
// }
const diffResult = this.reconcile.diff( const diffResult = this.reconcile.diff(
this.layoutGroupTable, this.layoutGroupTable,
this.prevModelList, this.prevModelList,

2
src/engine.ts
View File

@ -87,6 +87,8 @@ export class Engine {
layoutGroupTable = this.modelConstructor.construct(source); layoutGroupTable = this.modelConstructor.construct(source);
} }
// 2 渲染（使用g6进行渲染） // 2 渲染（使用g6进行渲染）
this.viewContainer.render(layoutGroupTable, isSameSources, handleUpdate); this.viewContainer.render(layoutGroupTable, isSameSources, handleUpdate);
} }

3
src/options.ts
View File

@ -65,6 +65,7 @@ export interface LinkOption extends ModelOption {
label: string; label: string;
curveOffset: number; curveOffset: number;
labelOptions: LinkLabelOption; labelOptions: LinkLabelOption;
loopCfg: Object;
} }
@ -130,7 +131,7 @@ export interface EngineOptions {
export interface LayoutCreator { export interface LayoutCreator {
defineOptions(sourceData: SourceNode[]): LayoutGroupOptions; defineOptions(sourceData: SourceNode[]): LayoutGroupOptions;
sourcesPreprocess?(sourceData: SourceNode[], options: LayoutGroupOptions): SourceNode[]; sourcesPreprocess?(sourceData: SourceNode[], options: LayoutGroupOptions, group: string): SourceNode[];
defineLeakRule?(models: SVNode[]): SVNode[]; defineLeakRule?(models: SVNode[]): SVNode[];
layout(nodes: SVNode[], layoutOptions: LayoutOptions); layout(nodes: SVNode[], layoutOptions: LayoutOptions);
[key: string]: any; [key: string]: any;