js2flowchart
Version:
> Why? While I've been working on [Under-the-hood-ReactJS](https://github.com/Bogdan-Lyashenko/Under-the-hood-ReactJS) I spent enormous amount of time on creating schemes. Each change in code or flowchart affects all entire scheme instantly, forcing you t
285 lines (255 loc) • 7.17 kB
JavaScript
export const DefaultColors = {
strokeColor: '#444',
defaultFillColor: '#fff',
textColor: '#222',
arrowFillColor: '#333',
rectangleFillColor: '#90caf9',
rectangleDotFillColor: '#ede7f6',
functionFillColor: '#a5d6a7',
rootCircleFillColor: '#fff59d',
loopFillColor: '#b39ddb',
conditionFillColor: '#ce93d8',
destructedNodeFillColor: '#ffcc80',
classFillColor: '#80cbc4',
debuggerFillColor: '#EF5350',
exportFillColor: '#81d4fa',
throwFillColor: '#ef9a9a',
tryFillColor: '#FFE082',
objectFillColor: '#9fa8da',
callFillColor: '#C5E1A5',
debugModeFillColor: '#666'
};
export const buildTheme = config => {
const BaseShape = {
strokeColor: config.strokeColor,
strokeWidth: 1,
fillColor: config.defaultFillColor,
textColor: config.textColor,
fontFamily: 'monospace',
fontSize: 13,
lineHeight: 5, //depends on fontSize
symbolHeight: 10, //depends on fontSize
symbolWidth: 7.8, //depends on fontSize
horizontalPadding: 15,
verticalPadding: 10,
childOffset: 37,
margin: 10,
roundBorder: 2,
complexTypeExtraSpace: 15,
debugFontSize: 8,
debugTextColor: config.debugModeFillColor,
...config
};
return {
BaseShape,
ConnectionArrow: {
arrow: {
size: {
x: 8,
y: 6
},
fillColor: config.arrowFillColor
},
line: {
strokeColor: config.strokeColor,
strokeWidth: 1,
curveTurnRadius: 4
},
lineTurnOffset: 20
},
Shape: {
...BaseShape
},
Rectangle: {
...BaseShape,
fillColor: config.rectangleFillColor,
dot: {
...BaseShape,
offset: 4,
radius: 2,
fillColor: config.rectangleDotFillColor
},
roundBorder: 3
},
VerticalEdgedRectangle: {
...BaseShape,
fillColor: config.functionFillColor,
edgeOffset: 10
},
RootCircle: {
...BaseShape,
radius: 15,
padding: 3,
fillColor: config.rootCircleFillColor
},
LoopRhombus: {
...BaseShape,
fillColor: config.loopFillColor,
thinPartOffset: 15,
rhombusSize: 50,
roundBorder: 3,
doubleLayerOffsetA: 4,
doubleLayerOffsetB: 8,
childOffset: 20,
positionTopShift: 20
},
ConditionRhombus: {
...BaseShape,
fillColor: config.conditionFillColor,
thinPartOffset: 15,
roundBorder: 3,
childOffset: 20,
alternateBranchOffset: 40,
markOffset: {
x: 15,
y: 5
},
margin: 20
},
RootStartPoint: {
center: {
x: 25,
y: 25
},
childOffset: {
x: 25,
y: 65
}
},
ReturnStatement: {
...BaseShape,
roundBorder: 3,
fillColor: config.rectangleFillColor,
arrow: {
...BaseShape,
handlerLength: 5,
sizeX: 16,
sizeY: 22,
fillColor: config.functionFillColor
}
},
DestructedNode: {
...BaseShape,
fillColor: config.destructedNodeFillColor,
roundBorder: 2,
suffix: {
...BaseShape,
roundBorder: 2,
fillColor: config.destructedNodeFillColor,
width: 8,
space: 4
}
},
ClassDeclaration: {
...BaseShape,
fillColor: config.classFillColor,
edgeOffset: 10
},
DebuggerStatement: {
...BaseShape,
fillColor: config.debuggerFillColor,
roundBorder: 2
},
ExportDeclaration: {
...BaseShape,
roundBorder: 3,
fillColor: config.exportFillColor,
arrow: {
...BaseShape,
handlerLength: 5,
sizeX: 20,
sizeY: 28,
fillColor: config.defaultFillColor
}
},
ImportDeclaration: {
...BaseShape,
fillColor: config.defaultFillColor,
edgeOffset: 5
},
ImportSpecifier: {
...BaseShape,
fillColor: config.exportFillColor
},
ThrowStatement: {
...BaseShape,
fillColor: config.throwFillColor
},
TryStatement: {
...BaseShape,
fillColor: config.tryFillColor
},
CatchClause: {
...BaseShape,
fillColor: config.throwFillColor,
arrow: {
...BaseShape,
handlerLength: 2,
sizeX: 16,
sizeY: 28,
fillColor: config.throwFillColor
}
},
SwitchStatement: {
...BaseShape,
fillColor: config.conditionFillColor,
thinPartOffset: 15,
roundBorder: 3,
childOffset: 20,
alternateBranchOffset: 40,
markOffset: {
x: 15,
y: 5
},
margin: 20
},
BreakStatement: {
...BaseShape,
fillColor: config.rectangleFillColor,
arrow: {
...BaseShape,
handlerLength: 5,
sizeX: 16,
sizeY: 28,
fillColor: config.conditionFillColor
}
},
SwitchCase: {
...BaseShape,
fillColor: config.conditionFillColor
},
ContinueStatement: {
...BaseShape,
fillColor: config.rectangleFillColor,
arrow: {
...BaseShape,
handlerLength: 5,
sizeX: 16,
sizeY: 28,
fillColor: config.loopFillColor
}
},
ObjectProperty: {
...BaseShape,
fillColor: config.rectangleFillColor
},
CallExpression: {
...BaseShape,
dot: {
...BaseShape,
offset: 6,
radius: 4,
fillColor: config.rectangleDotFillColor
},
fillColor: config.callFillColor
}
};
};
export default buildTheme(DefaultColors);
export const getAlignedColors = (theme, defaultColor) => {
const themeCopy = { ...theme };
Object.keys(themeCopy).forEach(color => {
themeCopy[color] = defaultColor;
});
return themeCopy;
};