107 lines
2.8 KiB
TypeScript
107 lines
2.8 KiB
TypeScript
import { ElementId, Elements, Position } from '../../src';
|
|
|
|
const nodeWidth = 80;
|
|
const nodeGapWidth = nodeWidth * 2;
|
|
const nodeStyle = { width: nodeWidth, fontSize: 11, color: 'white' };
|
|
|
|
const sourceTargetPositions = [
|
|
{ source: Position.Bottom, target: Position.Top },
|
|
{ source: Position.Right, target: Position.Left }
|
|
];
|
|
const nodeColors = [
|
|
['#1e9e99', '#4cb3ac', '#6ec9c0', '#8ddfd4'],
|
|
['#0f4c75', '#1b5d8b', '#276fa1', '#3282b8']
|
|
];
|
|
const edgeTypes = ['default', 'step', 'smoothstep', 'straight'];
|
|
const offsets = [
|
|
{
|
|
x: 0,
|
|
y: -nodeGapWidth
|
|
},
|
|
{
|
|
x: nodeGapWidth,
|
|
y: -nodeGapWidth
|
|
},
|
|
{
|
|
x: nodeGapWidth,
|
|
y: 0
|
|
},
|
|
{
|
|
x: nodeGapWidth,
|
|
y: nodeGapWidth
|
|
},
|
|
{
|
|
x: 0,
|
|
y: nodeGapWidth
|
|
},
|
|
{
|
|
x: -nodeGapWidth,
|
|
y: nodeGapWidth
|
|
},
|
|
{
|
|
x: -nodeGapWidth,
|
|
y: 0
|
|
},
|
|
{
|
|
x: -nodeGapWidth,
|
|
y: -nodeGapWidth
|
|
}
|
|
];
|
|
|
|
let id = 0;
|
|
const getNodeId = (): ElementId => (id++).toString();
|
|
|
|
export function getElements(): Elements {
|
|
const initialElements = [];
|
|
|
|
for (let sourceTargetIndex = 0; sourceTargetIndex < sourceTargetPositions.length; sourceTargetIndex++) {
|
|
const currSourceTargetPos = sourceTargetPositions[sourceTargetIndex];
|
|
|
|
for (let edgeTypeIndex = 0; edgeTypeIndex < edgeTypes.length; edgeTypeIndex++) {
|
|
const currEdgeType = edgeTypes[edgeTypeIndex];
|
|
|
|
for (let offsetIndex = 0; offsetIndex < offsets.length; offsetIndex++) {
|
|
const currOffset = offsets[offsetIndex];
|
|
|
|
const style = { ...nodeStyle, background: nodeColors[sourceTargetIndex][edgeTypeIndex] };
|
|
const sourcePosition = {
|
|
x: offsetIndex * nodeWidth * 4,
|
|
y: edgeTypeIndex * 300 + sourceTargetIndex * edgeTypes.length * 300
|
|
};
|
|
const sourceId = getNodeId();
|
|
const sourceData = { label: `Source ${sourceId}` };
|
|
const sourceNode = {
|
|
id: sourceId,
|
|
style,
|
|
data: sourceData,
|
|
position: sourcePosition,
|
|
sourcePosition: currSourceTargetPos.source,
|
|
targetPosition: currSourceTargetPos.target
|
|
};
|
|
|
|
const targetId = getNodeId();
|
|
const targetData = { label: `Target ${targetId}` };
|
|
const targetPosition = {
|
|
x: sourcePosition.x + currOffset.x,
|
|
y: sourcePosition.y + currOffset.y
|
|
};
|
|
const targetNode = {
|
|
id: targetId,
|
|
style,
|
|
data: targetData,
|
|
position: targetPosition,
|
|
sourcePosition: currSourceTargetPos.source,
|
|
targetPosition: currSourceTargetPos.target
|
|
};
|
|
|
|
initialElements.push(sourceNode);
|
|
initialElements.push(targetNode);
|
|
|
|
initialElements.push({ id: `${sourceId}-${targetId}`, source: sourceId, target: targetId, type: currEdgeType });
|
|
}
|
|
}
|
|
}
|
|
|
|
return initialElements as Elements;
|
|
}
|