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
Download Patch File Download Diff File Expand all files Collapse all files
demo/Layouter/AdjoinMatrixGraph.js
+27 -31
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 });
}
}
});
});
demo/Layouter/AdjoinTableGraph.js
+85 -90
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', {
}
}
});
});
demo/Layouter/DirectedAdjoinMatrixGraph.js
+146
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 });
}
}
});