528 lines
14 KiB
TypeScript
528 lines
14 KiB
TypeScript
|
import { uniqBy, groupBy, reduce, uniq } from 'lodash';
|
||
|
|
const shape = {
|
||
|
|
ER: 'er-rect',
|
||
|
|
EDGE: 'edge',
|
||
|
|
};
|
||
|
|
export const getInheritCollections = (collections, name) => {
|
||
|
|
const parents = [];
|
||
|
|
const getParents = (name) => {
|
||
|
|
const collection = collections?.find((collection) => collection.name === name);
|
||
|
|
if (collection) {
|
||
|
|
const { inherits } = collection;
|
||
|
|
if (inherits) {
|
||
|
|
for (let index = 0; index < inherits.length; index++) {
|
||
|
|
const collectionKey = inherits[index];
|
||
|
|
parents.push(collectionKey);
|
||
|
|
getParents(collectionKey);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return uniq(parents);
|
||
|
|
};
|
||
|
|
|
||
|
|
return getParents(name);
|
||
|
|
};
|
||
|
|
|
||
|
|
export const getChildrenCollections = (collections, name) => {
|
||
|
|
const childrens = [];
|
||
|
|
const getChildrens = (name) => {
|
||
|
|
const inheritCollections = collections.filter((v) => {
|
||
|
|
return v.inherits?.includes(name);
|
||
|
|
});
|
||
|
|
inheritCollections.forEach((v) => {
|
||
|
|
const collectionKey = v.name;
|
||
|
|
childrens.push(v);
|
||
|
|
return getChildrens(collectionKey);
|
||
|
|
});
|
||
|
|
return childrens;
|
||
|
|
};
|
||
|
|
return getChildrens(name);
|
||
|
|
};
|
||
|
|
export const formatData = (data) => {
|
||
|
|
const edgeData = [];
|
||
|
|
const targetTablekeys = [];
|
||
|
|
const tableData = data.map((item, index) => {
|
||
|
|
const ports = [];
|
||
|
|
const totalFields = [...item.fields];
|
||
|
|
const inheritCollections = getInheritCollections(data, item.name);
|
||
|
|
const inheritedFields = reduce(
|
||
|
|
inheritCollections,
|
||
|
|
(result, value) => {
|
||
|
|
const arr = result;
|
||
|
|
const parentFields = data
|
||
|
|
.find((k) => k.name === value)
|
||
|
|
?.fields.map((v) => {
|
||
|
|
return { ...v, sourceCollectionName: item.name };
|
||
|
|
});
|
||
|
|
return arr.concat(parentFields);
|
||
|
|
},
|
||
|
|
[],
|
||
|
|
);
|
||
|
|
uniqBy(totalFields.concat(inheritedFields), 'name').forEach((field) => {
|
||
|
|
field.uiSchema &&
|
||
|
|
ports.push({
|
||
|
|
id: field.key,
|
||
|
|
group: 'list',
|
||
|
|
...field,
|
||
|
|
});
|
||
|
|
['obo', 'oho', 'o2o', 'o2m', 'm2o', 'm2m', 'linkTo'].includes(field.interface) && edgeData.push(field);
|
||
|
|
});
|
||
|
|
|
||
|
|
targetTablekeys.push(item.name);
|
||
|
|
const portsData = formatPortData(ports);
|
||
|
|
return {
|
||
|
|
id: item.name,
|
||
|
|
shape: shape.ER,
|
||
|
|
name: item.name,
|
||
|
|
title: item.title,
|
||
|
|
width: 250,
|
||
|
|
// height: 40 * portsData.initPorts?.length||40,
|
||
|
|
ports: [...(portsData.initPorts || []), ...(portsData.morePorts || [])],
|
||
|
|
item: item,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
const edges = formatEdgeData(edgeData, targetTablekeys, tableData);
|
||
|
|
const inheritEdges = formatInheritEdgeData(data);
|
||
|
|
return { nodesData: tableData, edgesData: edges, inheritEdges };
|
||
|
|
};
|
||
|
|
|
||
|
|
export const formatPortData = (ports) => {
|
||
|
|
const portsData = groupBy(ports, (v) => {
|
||
|
|
if (
|
||
|
|
v.isForeignKey ||
|
||
|
|
v.primaryKey ||
|
||
|
|
['obo', 'oho', 'o2o', 'o2m', 'm2o', 'm2m', 'linkTo', 'id'].includes(v.interface)
|
||
|
|
) {
|
||
|
|
return 'initPorts';
|
||
|
|
} else {
|
||
|
|
return 'morePorts';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return portsData;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const formatInheritEdgeData = (collections) => {
|
||
|
|
const commonAttrs = {
|
||
|
|
attrs: {
|
||
|
|
line: {
|
||
|
|
strokeWidth: 1,
|
||
|
|
textAnchor: 'middle',
|
||
|
|
textVerticalAnchor: 'middle',
|
||
|
|
stroke: '#ddd',
|
||
|
|
sourceMarker: null,
|
||
|
|
// targetMarker: null,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
router: {
|
||
|
|
name: 'smooth',
|
||
|
|
args: {
|
||
|
|
direction: 'H',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
labels: [
|
||
|
|
{
|
||
|
|
markup: [
|
||
|
|
{
|
||
|
|
tagName: 'ellipse',
|
||
|
|
selector: 'labelBody',
|
||
|
|
style: {
|
||
|
|
cursor: 'pointer',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
tagName: 'text',
|
||
|
|
selector: 'labelText',
|
||
|
|
style: {
|
||
|
|
cursor: 'pointer',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
attrs: {
|
||
|
|
labelText: {
|
||
|
|
text: 'inherits',
|
||
|
|
fill: 'rgba(0, 0, 0, 0.3)',
|
||
|
|
textAnchor: 'middle',
|
||
|
|
textVerticalAnchor: 'middle',
|
||
|
|
},
|
||
|
|
labelBody: {
|
||
|
|
ref: 'labelText',
|
||
|
|
refWidth: '100%',
|
||
|
|
refHeight: '100%',
|
||
|
|
fill: '#f0f2f5',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
position: {
|
||
|
|
distance: 0.5,
|
||
|
|
args: {
|
||
|
|
keepGradient: true,
|
||
|
|
ensureLegibility: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
const inheritEdges = [];
|
||
|
|
collections.forEach((v) => {
|
||
|
|
const parentCollectonKeys = v.inherits || [];
|
||
|
|
if (parentCollectonKeys.length) {
|
||
|
|
parentCollectonKeys.forEach((k) => {
|
||
|
|
inheritEdges.push({
|
||
|
|
id: v.name + k,
|
||
|
|
source: {
|
||
|
|
cell: v.name,
|
||
|
|
connectionPoint: 'rect',
|
||
|
|
},
|
||
|
|
target: {
|
||
|
|
cell: k,
|
||
|
|
connectionPoint: 'rect',
|
||
|
|
},
|
||
|
|
connector: 'rounded',
|
||
|
|
connectionType: 'inherited',
|
||
|
|
...commonAttrs,
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return inheritEdges;
|
||
|
|
};
|
||
|
|
|
||
|
|
const formatEdgeData = (data, targetTables, tableData) => {
|
||
|
|
const edges = [];
|
||
|
|
for (let i = 0; i < data.length; i++) {
|
||
|
|
if (targetTables.includes(data[i].target)) {
|
||
|
|
const targetTable = tableData.find((v) => v.name === data[i].target);
|
||
|
|
const sourceTable = tableData.find((v) => v.name === (data[i].sourceCollectionName || data[i].collectionName));
|
||
|
|
const commonAttrs = {
|
||
|
|
attrs: {
|
||
|
|
line: {
|
||
|
|
strokeWidth: 1,
|
||
|
|
textAnchor: 'middle',
|
||
|
|
textVerticalAnchor: 'middle',
|
||
|
|
stroke: '#ddd',
|
||
|
|
sourceMarker: null,
|
||
|
|
targetMarker: null,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
router:
|
||
|
|
sourceTable.id === targetTable.id
|
||
|
|
? {
|
||
|
|
name: 'oneSide',
|
||
|
|
args: {
|
||
|
|
side: 'left',
|
||
|
|
},
|
||
|
|
}
|
||
|
|
: {
|
||
|
|
name: 'er',
|
||
|
|
args: {
|
||
|
|
direction: 'H',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
labels: [
|
||
|
|
{
|
||
|
|
markup: [
|
||
|
|
{
|
||
|
|
tagName: 'ellipse',
|
||
|
|
selector: 'labelBody',
|
||
|
|
style: {
|
||
|
|
cursor: 'pointer',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
tagName: 'text',
|
||
|
|
selector: 'labelText',
|
||
|
|
style: {
|
||
|
|
cursor: 'pointer',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
attrs: {
|
||
|
|
labelText: {
|
||
|
|
text: getRelationship(data[i].interface)[0],
|
||
|
|
fill: 'rgba(0, 0, 0, 0.3)',
|
||
|
|
textAnchor: 'middle',
|
||
|
|
textVerticalAnchor: 'middle',
|
||
|
|
},
|
||
|
|
labelBody: {
|
||
|
|
ref: 'labelText',
|
||
|
|
refWidth: '100%',
|
||
|
|
refHeight: '100%',
|
||
|
|
stroke: '#ddd',
|
||
|
|
fill: '#f0f2f5',
|
||
|
|
strokeWidth: 1,
|
||
|
|
rx: 10,
|
||
|
|
ry: 10,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
position: {
|
||
|
|
distance: 0.3,
|
||
|
|
args: {
|
||
|
|
keepGradient: true,
|
||
|
|
ensureLegibility: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
markup: [
|
||
|
|
{
|
||
|
|
tagName: 'ellipse',
|
||
|
|
selector: 'labelBody',
|
||
|
|
style: {
|
||
|
|
cursor: 'pointer',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
tagName: 'text',
|
||
|
|
selector: 'labelText',
|
||
|
|
style: {
|
||
|
|
cursor: 'pointer',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
attrs: {
|
||
|
|
labelText: {
|
||
|
|
text: getRelationship(data[i].interface)[1],
|
||
|
|
fill: 'rgba(0, 0, 0, 0.3)',
|
||
|
|
textAnchor: 'middle',
|
||
|
|
textVerticalAnchor: 'middle',
|
||
|
|
},
|
||
|
|
labelBody: {
|
||
|
|
ref: 'labelText',
|
||
|
|
refWidth: '100%',
|
||
|
|
refHeight: '100%',
|
||
|
|
stroke: '#ddd',
|
||
|
|
fill: '#f0f2f5',
|
||
|
|
rx: 10,
|
||
|
|
ry: 10,
|
||
|
|
strokeWidth: 1,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
position: {
|
||
|
|
distance: 0.7,
|
||
|
|
args: {
|
||
|
|
keepGradient: true,
|
||
|
|
ensureLegibility: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
const isuniq = (id) => {
|
||
|
|
const targetEdge = edges.find((v) => v.id === id);
|
||
|
|
if (targetEdge) {
|
||
|
|
targetEdge.associated.push(data[i].name);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
};
|
||
|
|
if (['m2m', 'linkTo'].includes(data[i].interface)) {
|
||
|
|
const throughTable = tableData.find((v) => v.name === data[i].through);
|
||
|
|
if (throughTable) {
|
||
|
|
const sCellId1 = sourceTable.id;
|
||
|
|
const tCellId1 = throughTable.id;
|
||
|
|
const sPortId1 = sourceTable.ports.find((v) => v.name === data[i].sourceKey)?.id;
|
||
|
|
const tPortId1 = throughTable.ports.find((v) => v.name === data[i].foreignKey)?.id;
|
||
|
|
const sCellId2 = targetTable.id;
|
||
|
|
const tCellId2 = throughTable.id;
|
||
|
|
const sPortId2 = targetTable.ports.find((v) => v.name === data[i].targetKey)?.id;
|
||
|
|
const tPortId2 = throughTable.ports.find((v) => v.name === data[i].otherKey)?.id;
|
||
|
|
const id1 = sCellId1 + sPortId1 + tCellId1 + tPortId1;
|
||
|
|
const id2 = sCellId2 + sPortId2 + tCellId2 + tPortId2;
|
||
|
|
edges.push({
|
||
|
|
id: id1,
|
||
|
|
source: {
|
||
|
|
cell: sCellId1,
|
||
|
|
port: sPortId1,
|
||
|
|
anchor: {
|
||
|
|
name: 'right',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
target: {
|
||
|
|
cell: tCellId1,
|
||
|
|
port: tPortId1,
|
||
|
|
anchor: {
|
||
|
|
name: 'left',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
associated: [data[i].name],
|
||
|
|
m2m: [id1, id2],
|
||
|
|
...commonAttrs,
|
||
|
|
});
|
||
|
|
edges.push({
|
||
|
|
id: id2,
|
||
|
|
source: {
|
||
|
|
cell: sCellId2,
|
||
|
|
port: sPortId2,
|
||
|
|
anchor: {
|
||
|
|
name: 'right',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
target: {
|
||
|
|
cell: tCellId2,
|
||
|
|
port: tPortId2,
|
||
|
|
anchor: {
|
||
|
|
name: 'left',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
associated: [data[i].name],
|
||
|
|
m2m: [id1, id2],
|
||
|
|
...commonAttrs,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
const isLegalEdge = tableData
|
||
|
|
.find((v) => v.name == (data[i].sourceCollectionName || data[i].collectionName))
|
||
|
|
.ports.find((v) => v.name === data[i].foreignKey);
|
||
|
|
const sCellId1 = sourceTable.id;
|
||
|
|
const tCellId1 = targetTable.id;
|
||
|
|
const sPortId1 = isLegalEdge?.id;
|
||
|
|
const tPortId1 = targetTable.ports.find((v) => v.name === data[i].targetKey)?.id;
|
||
|
|
const sCellId2 = sourceTable.id;
|
||
|
|
const tCellId2 = targetTable.id;
|
||
|
|
const sPortId2 = sourceTable.ports.find((v) => v.name === data[i].sourceKey)?.id;
|
||
|
|
const tPortId2 = targetTable.ports.find((v) => v.name === data[i].foreignKey)?.id;
|
||
|
|
const id1 = sCellId1 + sPortId1 + tCellId1 + tPortId1;
|
||
|
|
const id2 = sCellId2 + sPortId2 + tCellId2 + tPortId2;
|
||
|
|
isuniq(tCellId1 + tPortId1 + sCellId1 + sPortId1) &&
|
||
|
|
isLegalEdge &&
|
||
|
|
tPortId1 &&
|
||
|
|
edges.push({
|
||
|
|
id: id1,
|
||
|
|
source: {
|
||
|
|
cell: sCellId1,
|
||
|
|
port: sPortId1,
|
||
|
|
anchor: {
|
||
|
|
name: 'right',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
target: {
|
||
|
|
cell: tCellId1,
|
||
|
|
port: tPortId1,
|
||
|
|
anchor: {
|
||
|
|
name: 'left',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
associated: [data[i].name],
|
||
|
|
...commonAttrs,
|
||
|
|
});
|
||
|
|
isuniq(tCellId2 + tPortId2 + sCellId2 + sPortId2) &&
|
||
|
|
sPortId2 &&
|
||
|
|
tPortId2 &&
|
||
|
|
edges.push({
|
||
|
|
id: id2,
|
||
|
|
source: {
|
||
|
|
cell: sCellId2,
|
||
|
|
port: sPortId2,
|
||
|
|
anchor: {
|
||
|
|
name: 'right',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
target: {
|
||
|
|
cell: tCellId2,
|
||
|
|
port: tPortId2,
|
||
|
|
anchor: {
|
||
|
|
name: 'left',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
associated: [data[i].name],
|
||
|
|
...commonAttrs,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return uniqBy(edges, 'id');
|
||
|
|
};
|
||
|
|
|
||
|
|
const getRelationship = (relatioship) => {
|
||
|
|
switch (relatioship) {
|
||
|
|
case 'm2m':
|
||
|
|
case 'linkTo':
|
||
|
|
return ['1', 'N'];
|
||
|
|
case 'o2m':
|
||
|
|
return ['1', 'N'];
|
||
|
|
case 'm2o':
|
||
|
|
return ['N', '1'];
|
||
|
|
case 'obo':
|
||
|
|
case 'oho':
|
||
|
|
return ['1', '1'];
|
||
|
|
default:
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
export const getDiffNode = (newNodes, oldNodes) => {
|
||
|
|
let arr = [];
|
||
|
|
const length1 = newNodes.length;
|
||
|
|
const length2 = oldNodes.length;
|
||
|
|
for (let i = 0; i < length1; i++) {
|
||
|
|
if (!oldNodes.find((v) => v.id === newNodes[i].id)) {
|
||
|
|
arr.push({
|
||
|
|
status: 'add',
|
||
|
|
node: newNodes[i],
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
const oldNode = oldNodes.find((v) => v.id === newNodes[i].id);
|
||
|
|
const oldPorts = oldNode?.ports.items;
|
||
|
|
const newPorts = newNodes[i].ports;
|
||
|
|
if (oldNode) {
|
||
|
|
for (let h = 0; h < newPorts.length; h++) {
|
||
|
|
if (!oldPorts.find((v) => v.id === newPorts[h].id)) {
|
||
|
|
arr.push({
|
||
|
|
status: 'insertPort',
|
||
|
|
node: newNodes[i],
|
||
|
|
port: { index: h, port: newPorts[h] },
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
for (let k = 0; k < oldPorts.length; k++) {
|
||
|
|
if (!newPorts.find((v) => v.id === oldPorts[k].id)) {
|
||
|
|
arr.push({
|
||
|
|
status: 'deletePort',
|
||
|
|
node: newNodes[i],
|
||
|
|
port: oldPorts[k],
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (oldNode.title !== newNodes[i].title) {
|
||
|
|
arr.push({
|
||
|
|
status: 'updateNode',
|
||
|
|
node: newNodes[i],
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
for (let i = 0; i < length2; i++) {
|
||
|
|
if (!newNodes.find((v) => v.id === oldNodes[i].id)) {
|
||
|
|
arr.push({
|
||
|
|
status: 'delete',
|
||
|
|
node: oldNodes[i],
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return arr;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const getDiffEdge = (newEdges, oldEdges) => {
|
||
|
|
const length1 = newEdges.length;
|
||
|
|
const length2 = oldEdges?.length;
|
||
|
|
const edges = [];
|
||
|
|
for (let i = 0; i < length1; i++) {
|
||
|
|
if (!oldEdges.find((v) => v.id === newEdges[i].id)) {
|
||
|
|
edges.push({
|
||
|
|
status: 'add',
|
||
|
|
edge: newEdges[i],
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
for (let i = 0; i < length2; i++) {
|
||
|
|
if (!newEdges.find((v) => v.id === oldEdges[i].id)) {
|
||
|
|
edges.push({
|
||
|
|
status: 'delete',
|
||
|
|
edge: oldEdges[i],
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return edges;
|
||
|
|
};
|