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
88 lines • 4.81 kB
JavaScript
var SvgStyleFieldsMap = [{
from: 'fillColor',
to: 'fill'
}, {
from: 'strokeColor',
to: 'stroke'
}, {
from: 'strokeWidth',
to: 'stroke-width'
}, {
from: 'fillOpacity',
to: 'fill-opacity'
}, {
from: 'strokeOpacity',
to: 'stroke-opacity'
}];
export var extractStylePropsFromTheme = function extractStylePropsFromTheme(theme) {
return SvgStyleFieldsMap.map(function (item) {
return theme[item.from] ? "".concat(item.to, ":").concat(theme[item.from]) : null;
}).filter(function (i) {
return i;
}).join('; ');
};
export var extractStyleAttrsFromTheme = function extractStyleAttrsFromTheme(theme) {
return SvgStyleFieldsMap.map(function (item) {
return theme[item.from] ? "".concat(item.to, "=\"").concat(theme[item.from], "\"") : null;
}).filter(function (i) {
return i;
}).join(' ');
};
export var getRhombus = function getRhombus(x, y, w, h, theme) {
return "<polygon points=\"".concat(x, ",").concat(y + h / 2, " ").concat(x + w / 2, ",").concat(y, " ").concat(x + w, ",").concat(y + h / 2, " ").concat(x + w / 2, ",").concat(y + h, "\"\n style=\"").concat(extractStylePropsFromTheme(theme), "\" />");
};
export var getRoundedRectangle = function getRoundedRectangle(x, y, w, h, theme) {
return "<rect x=\"".concat(x, "\" y=\"").concat(y, "\"\n width=\"").concat(w, "\" height=\"").concat(h, "\"\n rx=\"").concat(theme.roundBorder, "\" ry=\"").concat(theme.roundBorder, "\"\n style=\"").concat(extractStylePropsFromTheme(theme), "\" />");
};
export var getRectangle = function getRectangle(x, y, w, h, theme) {
return "<rect x=\"".concat(x, "\" y=\"").concat(y, "\"\n width=\"").concat(w, "\" height=\"").concat(h, "\"\n style=\"").concat(extractStylePropsFromTheme(theme), "\" />");
};
export var getLine = function getLine(x1, y1, x2, y2, theme) {
return "<line x1=\"".concat(x1, "\" y1=\"").concat(y1, "\" x2=\"").concat(x2, "\" y2=\"").concat(y2, "\"\n style=\"").concat(extractStylePropsFromTheme(theme), "\" />");
};
export var getCircle = function getCircle(x, y, r, theme) {
return "<circle cx=\"".concat(x, "\" cy=\"").concat(y, "\" r=\"").concat(r, "\"\n style=\"").concat(extractStylePropsFromTheme(theme), "\" />");
};
export var getText = function getText(x, y, theme, text) {
return "<text x=\"".concat(x, "\" y=\"").concat(y, "\"\n font-family=\"").concat(theme.fontFamily, "\" font-size=\"").concat(theme.fontSize, "\" fill=\"").concat(theme.textColor, "\">").concat(text, "</text>");
};
export var getClosedPath = function getClosedPath(points, theme) {
var pointStr = points.map(function (point, i) {
if (!i) return "M".concat(point.x, ", ").concat(point.y);
return "L".concat(point.x, ", ").concat(point.y);
}).join(' ');
return "<path d=\"".concat(pointStr, " Z\" \n ").concat(extractStyleAttrsFromTheme(theme), " />");
};
export var getCurvedPath = function getCurvedPath(points, theme) {
var pointStr = points.map(function (point, i) {
if (!i) return "M".concat(point.x, ", ").concat(point.y);
var previousPoint = points[i - 1];
if (i <= 1) {
return getLinePointStr(point, previousPoint, theme.curveTurnRadius);
}
return "Q".concat(previousPoint.x, " ").concat(previousPoint.y, "\n ").concat(getArcEndPointStr(point, previousPoint, theme.curveTurnRadius), "\n ").concat(getLinePointStr(point, previousPoint, 2 * theme.curveTurnRadius));
}).join(' ');
return "<path d=\"".concat(pointStr, "\"\n style=\"fill:none; ").concat(extractStylePropsFromTheme(theme), "\" />");
};
var getLinePointStr = function getLinePointStr(point, previousPoint, radius) {
if (point.x === previousPoint.x) {
return "L".concat(point.x, " ").concat(getShiftedByArcNextPointValue(point.y, previousPoint.y, radius));
}
if (point.y === previousPoint.y) {
return "L".concat(getShiftedByArcNextPointValue(point.x, previousPoint.x, radius), " ").concat(point.y, " ");
}
};
var getShiftedByArcNextPointValue = function getShiftedByArcNextPointValue(pointValue, previousPointValue, radius) {
return pointValue > previousPointValue ? pointValue - radius : pointValue + radius;
};
var getArcEndPointStr = function getArcEndPointStr(point, previousPoint, radius) {
if (point.x === previousPoint.x) {
return "".concat(previousPoint.x, " ").concat(getArcEndPointValue(point.y, previousPoint.y, radius));
}
if (point.y === previousPoint.y) {
return "".concat(getArcEndPointValue(point.x, previousPoint.x, radius), " ").concat(previousPoint.y);
}
};
var getArcEndPointValue = function getArcEndPointValue(pointValue, previousPointValue, radius) {
return pointValue > previousPointValue ? previousPointValue + radius : previousPointValue - radius;
};