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

修改一些小bug

Browse Source
This commit is contained in:
cjc 2022-06-29 22:00:12 +08:00
parent e3d757173e
commit 702297d3ae
9 changed files with 288 additions and 138 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) {

56
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 });
} }
} }
}); });

159
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 dataLength = sources.length;
let nodeMap = {}; // let tableHeadNodes = [];
let i; // let nodeMap = {};
// let i;
for (i = 0; i < dataLength; i++) { // for (i = 0; i < dataLength; i++) {
let graphNode = sources[i]; // let graphNode = sources[i];
tableHeadNodes.push({ // tableHeadNodes.push({
id: `table-head-node-${i}`, // id: `table-head-node-${i}`,
type: 'tableHeadNode', // type: 'tableHeadNode',
data: graphNode.id // data: graphNode.id
}); // });
nodeMap[graphNode.id] = { // nodeMap[graphNode.id] = {
node: graphNode, // node: graphNode,
order: i, // order: i,
neighbor: [] // neighbor: []
}; // };
} // }
Object.keys(nodeMap).map(key => { // Object.keys(nodeMap).map(key => {
let nodeData = nodeMap[key], // let nodeData = nodeMap[key],
neighbor = nodeData.node.neighbor; // neighbor = nodeData.node.neighbor;
if (neighbor === undefined) { // if (neighbor === undefined) {
return; // return;
} // }
neighbor.forEach((item, index) => { // neighbor.forEach((item, index) => {
let targetNodeData = nodeMap[item]; // let targetNodeData = nodeMap[item];
nodeData.neighbor.push({ // nodeData.neighbor.push({
id: `${key}-table-node-${item}`, // id: `${key}-table-node-${item}`,
type: 'tableNode', // type: 'tableNode',
data: item.toString(), // data: item.toString(),
order: targetNodeData.order // order: targetNodeData.order
}); // });
targetNodeData.neighbor.push({ // targetNodeData.neighbor.push({
id: `${item}-table-node-${key}`, // id: `${item}-table-node-${key}`,
type: 'tableNode', // type: 'tableNode',
data: key.toString(), // data: key.toString(),
order: nodeData.order // order: nodeData.order
}); // });
}); // });
Object.keys(nodeMap).map(key => { // Object.keys(nodeMap).map(key => {
let nodeData = nodeMap[key], // let nodeData = nodeMap[key],
neighbor = nodeData.neighbor; // neighbor = nodeData.neighbor;
if (neighbor === undefined) { // if (neighbor === undefined) {
return; // return;
} // }
neighbor.sort((n1, n2) => { // neighbor.sort((n1, n2) => {
return n1.order - n2.order; // return n1.order - n2.order;
}); // });
for(let i = 0; i < neighbor.length; i++) { // for (let i = 0; i < neighbor.length; i++) {
if(neighbor[i + 1]) { // if (neighbor[i + 1]) {
neighbor[i].next = `tableNode#${neighbor[i + 1].id}`; // neighbor[i].next = `tableNode#${neighbor[i + 1].id}`;
} // }
} // }
}); // });
tableHeadNodes.forEach(item => { // tableHeadNodes.forEach(item => {
let nodeData = nodeMap[item.data], // let nodeData = nodeMap[item.data],
neighbor = nodeData.neighbor; // neighbor = nodeData.neighbor;
if(neighbor.length) { // if (neighbor.length) {
item.headNext = `tableNode#${neighbor[0].id}`; // item.headNext = `tableNode#${neighbor[0].id}`;
} // }
}); // });
}); // });
sources.push(...tableHeadNodes); // sources.push(...tableHeadNodes);
Object.keys(nodeMap).map(key => { // Object.keys(nodeMap).map(key => {
let nodeData = nodeMap[key], // let nodeData = nodeMap[key],
neighbor = nodeData.neighbor; // neighbor = nodeData.neighbor;
sources.push(...neighbor); // sources.push(...neighbor);
}); // });
return sources; // return sources;
}, },
defineOptions() { defineOptions() {
@ -177,19 +175,19 @@ 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);
} }
}, },
@ -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;
@ -231,6 +229,3 @@ 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,
}; };
} }

15
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

@ -202,17 +202,17 @@ export class ViewContainer {
let isDiffLeak = handleUpdate?.isEnterFunction || handleUpdate?.hasTriggerLastStep; let isDiffLeak = handleUpdate?.isEnterFunction || handleUpdate?.hasTriggerLastStep;
if (!handleUpdate?.hasTriggerLastStep) { // if (!handleUpdate?.hasTriggerLastStep) {
this.preCount++; // this.preCount++;
} else { // } else {
this.preCount--; // this.preCount--;
} // }
//preCount用来判断是否是第一次进入调试，因为刚开始调试后点击下一步再点上一步，后端给回的isFirstDebug = false，因改为true // //preCount用来判断是否是第一次进入调试，因为刚开始调试后点击下一步再点上一步，后端给回的isFirstDebug = false，因改为true
if (this.preCount === 1 || this.preCount === 2) { // if (this.preCount === 1 || this.preCount === 2) {
console.log(this.preCount); // console.log(this.preCount);
handleUpdate.isFirstDebug = true; // 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;