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 sourcePath = 'D:\\个人项目\\StructV2\\dist\\sv.js';
const targetPath = 'D:\\个人项目\\froend_student\\src\\pages\\student\\assets\\js\\sv.js'
const sourcePath = 'E:\\研究生\\StructV2\\dist\\sv.js';
const targetPath = 'E:\\研究生\\froend_student\\src\\pages\\student\\assets\\js\\sv.js'
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,
neighborB = itemB.neighbor;
@ -21,33 +20,33 @@ const isNeighbor = function (itemA, itemB) {
SV.registerLayout('AdjoinMatrixGraph', {
sourcesPreprocess(sources) {
let dataLength = sources.length;
let matrixNodeLength = dataLength * dataLength;
let matrixNodes = [];
let i, j;
// 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].id : undefined,
indexLeft: i % dataLength === 0? sources[i / dataLength].id : undefined,
data: 0
});
}
// for (i = 0; i < matrixNodeLength; i++) {
// matrixNodes.push({
// id: `mn-${i}`,
// type: 'matrixNode',
// indexTop: i < dataLength ? sources[i].id : undefined,
// indexLeft: i % dataLength === 0? sources[i / dataLength].id : undefined,
// data: 0
// });
// }
for (i = 0; i < dataLength; i++) {
for (j = 0; j < dataLength; j++) {
let itemI = sources[i],
itemJ = sources[j];
// for (i = 0; i < dataLength; i++) {
// for (j = 0; j < dataLength; j++) {
// let itemI = sources[i],
// itemJ = sources[j];
if (itemI.id !== itemJ.id && isNeighbor(itemI, itemJ)) {
matrixNodes[i * dataLength + j].data = 1;
}
}
}
// if (itemI.id !== itemJ.id && isNeighbor(itemI, itemJ)) {
// matrixNodes[i * dataLength + j].data = 1;
// }
// }
// }
sources.push(...matrixNodes);
// sources.push(...matrixNodes);
return sources;
},
@ -106,7 +105,7 @@ SV.registerLayout('AdjoinMatrixGraph', {
i;
const matrixY = -radius,
matrixX = interval;
matrixX = interval;
for (i = 0; i < nodeLength; i++) {
let [x, y] = Vector.rotation(-intervalAngle * i, [0, -radius]);
@ -116,12 +115,9 @@ SV.registerLayout('AdjoinMatrixGraph', {
for (i = 0; i < matrixNodeLength; i++) {
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 });
}
}
});
});

175
demo/Layouter/AdjoinTableGraph.js
View File

@ -1,95 +1,93 @@
SV.registerLayout('AdjoinTableGraph', {
sourcesPreprocess(sources, options) {
let dataLength = sources.length;
let tableHeadNodes = [];
let nodeMap = {};
let i;
sourcesPreprocess(sources, options, group) {
// let dataLength = sources.length;
// let tableHeadNodes = [];
// let nodeMap = {};
// let i;
for (i = 0; i < dataLength; i++) {
let graphNode = sources[i];
tableHeadNodes.push({
id: `table-head-node-${i}`,
type: 'tableHeadNode',
data: graphNode.id
});
// for (i = 0; i < dataLength; i++) {
// let graphNode = sources[i];
nodeMap[graphNode.id] = {
node: graphNode,
order: i,
neighbor: []
};
}
// tableHeadNodes.push({
// id: `table-head-node-${i}`,
// type: 'tableHeadNode',
// data: graphNode.id
// });
Object.keys(nodeMap).map(key => {
let nodeData = nodeMap[key],
neighbor = nodeData.node.neighbor;
// nodeMap[graphNode.id] = {
// node: graphNode,
// order: i,
// neighbor: []
// };
// }
if (neighbor === undefined) {
return;
}
// Object.keys(nodeMap).map(key => {
// let nodeData = nodeMap[key],
// neighbor = nodeData.node.neighbor;
neighbor.forEach((item, index) => {
let targetNodeData = nodeMap[item];
// if (neighbor === undefined) {
// return;
// }
nodeData.neighbor.push({
id: `${key}-table-node-${item}`,
type: 'tableNode',
data: item.toString(),
order: targetNodeData.order
});
// neighbor.forEach((item, index) => {
// let targetNodeData = nodeMap[item];
targetNodeData.neighbor.push({
id: `${item}-table-node-${key}`,
type: 'tableNode',
data: key.toString(),
order: nodeData.order
});
});
// nodeData.neighbor.push({
// id: `${key}-table-node-${item}`,
// type: 'tableNode',
// data: item.toString(),
// order: targetNodeData.order
// });
Object.keys(nodeMap).map(key => {
let nodeData = nodeMap[key],
neighbor = nodeData.neighbor;
// targetNodeData.neighbor.push({
// id: `${item}-table-node-${key}`,
// type: 'tableNode',
// data: key.toString(),
// order: nodeData.order
// });
// });
if (neighbor === undefined) {
return;
}
// Object.keys(nodeMap).map(key => {
// let nodeData = nodeMap[key],
// neighbor = nodeData.neighbor;
neighbor.sort((n1, n2) => {
return n1.order - n2.order;
});
// if (neighbor === undefined) {
// return;
// }
for(let i = 0; i < neighbor.length; i++) {
if(neighbor[i + 1]) {
neighbor[i].next = `tableNode#${neighbor[i + 1].id}`;
}
}
});
// neighbor.sort((n1, n2) => {
// return n1.order - n2.order;
// });
tableHeadNodes.forEach(item => {
let nodeData = nodeMap[item.data],
neighbor = nodeData.neighbor;
// for (let i = 0; i < neighbor.length; i++) {
// if (neighbor[i + 1]) {
// neighbor[i].next = `tableNode#${neighbor[i + 1].id}`;
// }
// }
// });
if(neighbor.length) {
item.headNext = `tableNode#${neighbor[0].id}`;
}
});
});
// tableHeadNodes.forEach(item => {
// let nodeData = nodeMap[item.data],
// neighbor = nodeData.neighbor;
sources.push(...tableHeadNodes);
Object.keys(nodeMap).map(key => {
let nodeData = nodeMap[key],
neighbor = nodeData.neighbor;
sources.push(...neighbor);
});
// if (neighbor.length) {
// item.headNext = `tableNode#${neighbor[0].id}`;
// }
// });
// });
return sources;
// sources.push(...tableHeadNodes);
// Object.keys(nodeMap).map(key => {
// let nodeData = nodeMap[key],
// neighbor = nodeData.neighbor;
// sources.push(...neighbor);
// });
// return sources;
},
defineOptions() {
@ -129,17 +127,17 @@ SV.registerLayout('AdjoinTableGraph', {
stroke: '#333'
}
},
headNext: {
headNext: {
sourceAnchor: 1,
targetAnchor: 6,
style: {
stroke: '#333',
endArrow: {
path: G6.Arrow.triangle(8, 6, 0),
path: G6.Arrow.triangle(8, 6, 0),
fill: '#333'
},
startArrow: {
path: G6.Arrow.circle(2, -1),
path: G6.Arrow.circle(2, -1),
fill: '#333'
}
}
@ -150,11 +148,11 @@ SV.registerLayout('AdjoinTableGraph', {
style: {
stroke: '#333',
endArrow: {
path: G6.Arrow.triangle(8, 6, 0),
path: G6.Arrow.triangle(8, 6, 0),
fill: '#333'
},
startArrow: {
path: G6.Arrow.circle(2, -1),
path: G6.Arrow.circle(2, -1),
fill: '#333'
}
}
@ -177,22 +175,22 @@ SV.registerLayout('AdjoinTableGraph', {
* @param node
* @param parent
*/
layoutItem(node, prev, layoutOptions) {
if(!node) {
layoutItem(node, prev, layoutOptions) {
if (!node) {
return null;
}
let width = node.get('size')[0];
if(prev) {
if (prev) {
node.set('y', prev.get('y'));
node.set('x', prev.get('x') + layoutOptions.xInterval + width);
}
if(node.next) {
if (node.next) {
this.layoutItem(node.next, node, layoutOptions);
}
},
},
layout(elements, layoutOptions) {
let nodes = elements.filter(item => item.type === 'default'),
@ -209,9 +207,9 @@ SV.registerLayout('AdjoinTableGraph', {
}
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],
height = node.get('size')[1];
@ -220,7 +218,7 @@ SV.registerLayout('AdjoinTableGraph', {
y: tableY + node.get('y') + i * height
});
if(node.headNext) {
if (node.headNext) {
let y = node.get('y') + height - node.headNext.get('size')[1],
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),
labelCfg,
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 { Util } from '../Common/util';
import { Engine } from '../engine';
@ -67,13 +68,15 @@ export class ModelConstructor {
return;
}
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'] || {},
markerOptions = options.marker || {},
indexLabelOptions = options.indexLabel || {},
addressLabelOption = options.addressLabel || {};
nodeList = this.constructNodes(group, layout, nodeOptions, sourceData);
appendageList.push(...this.constructMarkers(group, layout, markerOptions, nodeList));
appendageList.push(...this.constructIndexLabel(group, layout, indexLabelOptions, nodeList));
@ -230,7 +233,7 @@ export class ModelConstructor {
// 若没有指针字段的结点则跳过
if (value === undefined || value === null) continue;
let id = `${group}[${name}(${value})]`,
let id = `${group}[${name}(${value}-${node.id})]`,
indexLabel = new SVIndexLabel(
id,
name,
@ -378,7 +381,13 @@ export class ModelConstructor {
index: number,
options: LinkOption
): 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);
}

20
src/View/viewContainer.ts
View File

@ -28,6 +28,10 @@ export class ViewContainer {
private prevModelList: SVModel[];
private accumulateLeakModels: SVModel[];
private preIsFirstDebug: boolean[]; //存储以前的handleUpdate
private stackAddress: number //指向preHandleUpdate的栈地址
private preCount: number; //点击上一步的次数
public hasLeak: boolean;
public leakAreaY: number;
public lastLeakAreaTranslateY: number;
@ -48,6 +52,9 @@ export class ViewContainer {
this.brushSelectedModels = [];
this.clickSelectNode = null;
this.lastLeakAreaTranslateY = 0;
this.preIsFirstDebug = [];
this.preCount = 0;
this.stackAddress = 0;
const g6Instance = this.renderer.getG6Instance(),
leakAreaHeight = this.engine.viewOptions.leakAreaHeight,
@ -191,10 +198,21 @@ export class ViewContainer {
this.setPrevUpdateId([])
return;
}
// 判断是否需要进行泄漏区的比较
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(
this.layoutGroupTable,
this.prevModelList,

2
src/engine.ts
View File

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

3
src/options.ts
View File

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