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
232 lines • 8.45 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
export var 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 var buildTheme = function buildTheme(config) {
var BaseShape = _objectSpread({
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: BaseShape,
ConnectionArrow: {
arrow: {
size: {
x: 8,
y: 6
},
fillColor: config.arrowFillColor
},
line: {
strokeColor: config.strokeColor,
strokeWidth: 1,
curveTurnRadius: 4
},
lineTurnOffset: 20
},
Shape: _objectSpread({}, BaseShape),
Rectangle: _objectSpread(_objectSpread({}, BaseShape), {}, {
fillColor: config.rectangleFillColor,
dot: _objectSpread(_objectSpread({}, BaseShape), {}, {
offset: 4,
radius: 2,
fillColor: config.rectangleDotFillColor
}),
roundBorder: 3
}),
VerticalEdgedRectangle: _objectSpread(_objectSpread({}, BaseShape), {}, {
fillColor: config.functionFillColor,
edgeOffset: 10
}),
RootCircle: _objectSpread(_objectSpread({}, BaseShape), {}, {
radius: 15,
padding: 3,
fillColor: config.rootCircleFillColor
}),
LoopRhombus: _objectSpread(_objectSpread({}, BaseShape), {}, {
fillColor: config.loopFillColor,
thinPartOffset: 15,
rhombusSize: 50,
roundBorder: 3,
doubleLayerOffsetA: 4,
doubleLayerOffsetB: 8,
childOffset: 20,
positionTopShift: 20
}),
ConditionRhombus: _objectSpread(_objectSpread({}, 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: _objectSpread(_objectSpread({}, BaseShape), {}, {
roundBorder: 3,
fillColor: config.rectangleFillColor,
arrow: _objectSpread(_objectSpread({}, BaseShape), {}, {
handlerLength: 5,
sizeX: 16,
sizeY: 22,
fillColor: config.functionFillColor
})
}),
DestructedNode: _objectSpread(_objectSpread({}, BaseShape), {}, {
fillColor: config.destructedNodeFillColor,
roundBorder: 2,
suffix: _objectSpread(_objectSpread({}, BaseShape), {}, {
roundBorder: 2,
fillColor: config.destructedNodeFillColor,
width: 8,
space: 4
})
}),
ClassDeclaration: _objectSpread(_objectSpread({}, BaseShape), {}, {
fillColor: config.classFillColor,
edgeOffset: 10
}),
DebuggerStatement: _objectSpread(_objectSpread({}, BaseShape), {}, {
fillColor: config.debuggerFillColor,
roundBorder: 2
}),
ExportDeclaration: _objectSpread(_objectSpread({}, BaseShape), {}, {
roundBorder: 3,
fillColor: config.exportFillColor,
arrow: _objectSpread(_objectSpread({}, BaseShape), {}, {
handlerLength: 5,
sizeX: 20,
sizeY: 28,
fillColor: config.defaultFillColor
})
}),
ImportDeclaration: _objectSpread(_objectSpread({}, BaseShape), {}, {
fillColor: config.defaultFillColor,
edgeOffset: 5
}),
ImportSpecifier: _objectSpread(_objectSpread({}, BaseShape), {}, {
fillColor: config.exportFillColor
}),
ThrowStatement: _objectSpread(_objectSpread({}, BaseShape), {}, {
fillColor: config.throwFillColor
}),
TryStatement: _objectSpread(_objectSpread({}, BaseShape), {}, {
fillColor: config.tryFillColor
}),
CatchClause: _objectSpread(_objectSpread({}, BaseShape), {}, {
fillColor: config.throwFillColor,
arrow: _objectSpread(_objectSpread({}, BaseShape), {}, {
handlerLength: 2,
sizeX: 16,
sizeY: 28,
fillColor: config.throwFillColor
})
}),
SwitchStatement: _objectSpread(_objectSpread({}, BaseShape), {}, {
fillColor: config.conditionFillColor,
thinPartOffset: 15,
roundBorder: 3,
childOffset: 20,
alternateBranchOffset: 40,
markOffset: {
x: 15,
y: 5
},
margin: 20
}),
BreakStatement: _objectSpread(_objectSpread({}, BaseShape), {}, {
fillColor: config.rectangleFillColor,
arrow: _objectSpread(_objectSpread({}, BaseShape), {}, {
handlerLength: 5,
sizeX: 16,
sizeY: 28,
fillColor: config.conditionFillColor
})
}),
SwitchCase: _objectSpread(_objectSpread({}, BaseShape), {}, {
fillColor: config.conditionFillColor
}),
ContinueStatement: _objectSpread(_objectSpread({}, BaseShape), {}, {
fillColor: config.rectangleFillColor,
arrow: _objectSpread(_objectSpread({}, BaseShape), {}, {
handlerLength: 5,
sizeX: 16,
sizeY: 28,
fillColor: config.loopFillColor
})
}),
ObjectProperty: _objectSpread(_objectSpread({}, BaseShape), {}, {
fillColor: config.rectangleFillColor
}),
CallExpression: _objectSpread(_objectSpread({}, BaseShape), {}, {
dot: _objectSpread(_objectSpread({}, BaseShape), {}, {
offset: 6,
radius: 4,
fillColor: config.rectangleDotFillColor
}),
fillColor: config.callFillColor
})
};
};
export default buildTheme(DefaultColors);
export var getAlignedColors = function getAlignedColors(theme, defaultColor) {
var themeCopy = _objectSpread({}, theme);
Object.keys(themeCopy).forEach(function (color) {
themeCopy[color] = defaultColor;
});
return themeCopy;
};