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
124 lines (123 loc) • 7.02 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); }
import { complexTraversal } from 'shared/utils/traversalWithTreeLevelsPointer';
import { SVGBase } from './SVGBase';
import { createShapeForNode, createRootCircle, createConnectionArrow } from './shapesFactory';
import { TOKEN_TYPES, TOKEN_KEYS, ARROW_TYPE } from 'shared/constants';
export var buildSVGObjectsTree = function buildSVGObjectsTree(flowTree, styleTheme) {
var svg = SVGBase();
var shapeStructures = buildShapeStructures(flowTree, styleTheme);
var connections = buildConnections(shapeStructures.root, styleTheme);
svg.addShapes(shapeStructures.list).addShapes(shapeStructures.root);
svg.addArrowConnections(connections);
return svg;
};
export var buildShapeStructures = function buildShapeStructures(flowTree, styleTheme) {
var root = createRootCircle(flowTree, styleTheme),
position = _objectSpread({}, root.getChildOffsetPoint()),
shapesList = [];
var latestNode;
complexTraversal(flowTree, root, function (parentNode, parentShape) {
position.x += parentShape.getChildOffsetPoint().x;
}, function (node, parentShape) {
position.y += addExtraSpacingBeforeShape(styleTheme, node, latestNode);
//TODO: refactor, move cases out of func, it will to many of them soon
if (parentShape.getNodeType() === TOKEN_TYPES.CONDITIONAL && node.key === TOKEN_KEYS.ALTERNATE && !parentShape.checkIfChildExist(TOKEN_KEYS.ALTERNATE)) {
var alternatePoint = parentShape.getAlternativeBranchChildOffsetPoint();
position.x = alternatePoint.x + parentShape.getMargin();
position.y = alternatePoint.y;
}
var shape = createShapeForNode(node, {
x: position.x,
y: position.y
}, styleTheme);
position.x = shape.getPosition().x;
position.y = shape.getPosition().y;
shapesList.push(shape);
parentShape.connectChild(shape);
position.y += shape.getChildOffsetPoint().y;
latestNode = node;
return shape;
}, function (parentNode, parentShape) {
if (parentNode.type === TOKEN_TYPES.CONDITIONAL) {
position.y = parentShape.getChildBoundaries().max.y + parentShape.getMargin();
}
position.x = parentShape.getPosition().x;
});
return {
list: shapesList,
root: root
};
};
var addExtraSpacingBeforeShape = function addExtraSpacingBeforeShape(theme, node) {
var latestNode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var complexNodeTypes = [TOKEN_TYPES.FUNCTION, TOKEN_TYPES.FUNCTION_DECLARATION, TOKEN_TYPES.FUNCTION_EXPRESSION, TOKEN_TYPES.ARROW_FUNCTION_EXPRESSION, TOKEN_TYPES.CLASS_DECLARATION, TOKEN_TYPES.IMPORT_DECLARATION, TOKEN_TYPES.EXPORT_NAMED_DECLARATION, TOKEN_TYPES.EXPORT_DEFAULT_DECLARATION];
if (complexNodeTypes.includes(node.type) && !complexNodeTypes.includes(latestNode.type) && node.pathParentType !== TOKEN_TYPES.CALL_EXPRESSION) {
return theme.BaseShape.complexTypeExtraSpace;
}
return 0;
};
export var buildConnections = function buildConnections(shapesTree, styleTheme) {
var connections = [],
pushArrow = function pushArrow(config) {
var connection = createConnectionArrow(config, styleTheme);
connections.push(connection);
return connection;
};
var latestShape = null,
latestParentShape = null;
complexTraversal(shapesTree, shapesTree, function (parentShape) {}, function (shape, parentShape) {
latestShape = shape;
var config = buildConnectionConfig(shape, parentShape),
arrow = pushArrow(config);
shape.assignConnectionArrow(arrow);
return shape;
}, function (parentShape) {
latestParentShape = parentShape;
if (parentShape.getNodeType() !== TOKEN_TYPES.LOOP) return;
var _parentShape$getChild = parentShape.getChildBoundaries(),
max = _parentShape$getChild.max;
parentShape.assignLoopedConnectionArrow(pushArrow({
startPoint: latestShape.getBackPoint(),
endPoint: parentShape.getMidPoint(),
boundaryPoint: {
x: max.x
},
arrowType: ARROW_TYPE.DOWN
}));
}, {
getBody: function getBody(node) {
return node.getBody();
}
});
return connections;
};
var isNoArrow = function isNoArrow(toShape, fromShape) {
if ([TOKEN_TYPES.IMPORT_SPECIFIER, TOKEN_TYPES.IMPORT_DEFAULT_SPECIFIER, TOKEN_TYPES.OBJECT_PROPERTY].includes(toShape.getNodeType())) {
return true;
}
if ([TOKEN_TYPES.FUNCTION_DECLARATION, TOKEN_TYPES.FUNCTION_EXPRESSION, TOKEN_TYPES.FUNCTION, TOKEN_TYPES.ARROW_FUNCTION_EXPRESSION].includes(toShape.getNodeType()) && [TOKEN_TYPES.CALL_EXPRESSION, TOKEN_TYPES.VARIABLE_DECLARATOR, TOKEN_TYPES.ASSIGNMENT_EXPRESSION, TOKEN_TYPES.NEW_EXPRESSION].includes(fromShape.getNodeType())) {
return true;
}
};
var buildConnectionConfig = function buildConnectionConfig(toShape, fromShape) {
var config = {
endPoint: toShape.getToPoint(),
arrowType: ARROW_TYPE.RIGHT,
noArrow: isNoArrow(toShape, fromShape)
};
if (toShape.getNodeKey() === TOKEN_KEYS.ALTERNATE && fromShape.getAlternativeBranchChildOffsetPoint) {
var boundaryPoint = fromShape.getAlternativeBranchChildOffsetPoint();
config.startPoint = fromShape.getAlternateFromPoint();
config.boundaryPoint = {
x: boundaryPoint.x
};
} else {
config.startPoint = fromShape.getFromPoint();
}
return config;
};