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
272 lines (271 loc) • 11.1 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 escape from 'xml-escape';
import { mergeObjectStructures } from 'shared/utils/composition';
import { generateId, splitNameString, getMaxStringLengthFromList, getPathId } from 'shared/utils/string';
import { flatTree } from 'shared/utils/flatten';
import { calculateShapesBoundaries } from 'shared/utils/geometry';
import { MAX_NAME_STR_LENGTH, getNameSplitterTokensIterator } from '../appearance/TextContentConfigurator';
export var delegateInit = function delegateInit(shape, themeFieldName) {
function init(node, position, theme) {
return shape(getInitialState(node, position, theme, themeFieldName));
}
init.getThemeFieldName = function () {
return themeFieldName;
};
return init;
};
export var getInitialState = function getInitialState(node, _ref, theme, type) {
var x = _ref.x,
y = _ref.y;
var nameParts = splitNameString(node.name, theme.maxNameLength || MAX_NAME_STR_LENGTH, getNameSplitterTokensIterator()),
totalNamePartsNumber = nameParts.length,
maxNamePartLength = getMaxStringLengthFromList(nameParts);
return {
id: generateId(),
nodePathId: getPathId(node),
type: type,
body: [],
theme: theme,
originalTheme: theme,
node: node,
name: node.name,
prefixName: node.prefixName,
nameParts: nameParts,
totalNamePartsNumber: totalNamePartsNumber,
maxNamePartLength: maxNamePartLength,
initialPosition: {
x: x,
y: y
}
};
};
export var setupInitialProperties = function setupInitialProperties(state) {
return {
fromPoint: calculateFromPoint(state),
toPoint: calculateToPoint(state),
backPoint: calculateBackPoint(state),
childOffsetPoint: calculateChildOffsetPoint(state),
boundaries: calculateBoundaries(state)
};
};
export var extractBasicState = function extractBasicState(state) {
return _objectSpread(_objectSpread({}, state), {}, {
position: calculatePosition(state),
dimensions: calculateDimensions(state)
});
};
export var setupInitialSelectors = function setupInitialSelectors(state) {
return {
getBody: function getBody() {
return state.body;
},
getBoundaries: function getBoundaries() {
return state.boundaries;
},
getBackPoint: function getBackPoint() {
return state.backPoint;
},
getAssignedConnectionArrow: function getAssignedConnectionArrow() {
return state.connectionArrow;
},
getChildOffsetPoint: function getChildOffsetPoint() {
return state.childOffsetPoint;
},
getDimensions: function getDimensions() {
return state.dimensions;
},
getId: function getId() {
return state.id;
},
getFromPoint: function getFromPoint() {
return state.fromPoint;
},
getMargin: function getMargin() {
return state.theme.margin;
},
getName: function getName() {
return state.name;
},
getNode: function getNode() {
return state.node;
},
getNodeType: function getNodeType() {
return state.node.type;
},
getNodePathId: function getNodePathId() {
return state.nodePathId;
},
getNodeKey: function getNodeKey() {
return state.node.key;
},
getParent: function getParent() {
return state.parent;
},
getPosition: function getPosition() {
return state.position;
},
getToPoint: function getToPoint() {
return state.toPoint;
},
getShapeType: function getShapeType() {
return state.type;
}
};
};
export var setupSharedPrint = function setupSharedPrint(state) {
return {
//TODO: fix spacing for multi line name
printName: function printName(newPosition) {
var position = state.position,
theme = state.theme,
nameParts = state.nameParts;
var _ref2 = newPosition ? newPosition : position,
x = _ref2.x,
y = _ref2.y;
var name = nameParts.map(function (part, i) {
return "<tspan x=\"".concat(x + theme.horizontalPadding, "\" y=\"").concat(y + 2 * theme.verticalPadding * (i + 1), "\">").concat(escape(part), "</tspan>");
}).join('');
//TODO: move to svg primitives
// 3 because of ellipsis 3 dots
return "".concat(nameParts[0].length <= state.name.length + 3 ? "<title>".concat(escape(state.name), "</title>") : '', "\n <text x=\"").concat(x + theme.horizontalPadding, "\" y=\"").concat(y + 2 * theme.verticalPadding, "\"\n font-family=\"").concat(theme.fontFamily, "\" font-size=\"").concat(theme.fontSize, "\" fill=\"").concat(theme.textColor, "\">\n ").concat(name, "\n </text>");
},
printDebugInfo: function printDebugInfo() {
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
debug = _ref3.debug;
if (!debug) return '';
var position = state.position,
dimensions = state.dimensions,
theme = state.theme,
nodePathId = state.nodePathId;
return "<text x=\"".concat(position.x + 3 * theme.horizontalPadding, "\" y=\"").concat(position.y + dimensions.h + theme.verticalPadding, "\"\n font-family=\"").concat(theme.fontFamily, "\" font-size=\"").concat(theme.debugFontSize, "\" fill=\"").concat(theme.debugTextColor, "\">\n ").concat(nodePathId, "\n </text>");
}
};
};
export var setupGetChildBoundaries = function setupGetChildBoundaries(state) {
return {
getChildBoundaries: function getChildBoundaries(filterFn) {
var body = state.body,
boundaries = state.boundaries;
if (!body.length) {
return boundaries;
}
var flattedTree = flatTree({
getBody: function getBody() {
return filterFn ? body.filter(filterFn) : body;
},
getBoundaries: function getBoundaries() {
return boundaries;
}
}, function (node) {
return node.getBody();
});
return calculateShapesBoundaries(flattedTree.map(function (item) {
return item.getBoundaries();
}));
}
};
};
export var setupStateModifiers = function setupStateModifiers(state) {
return {
addChild: function addChild(child) {
state.body.push(child);
},
setParent: function setParent(parent) {
state.parent = parent;
},
connectChild: function connectChild(child) {
this.addChild(child);
child.setParent(this);
},
updateTheme: function updateTheme(newTheme) {
state.theme = mergeObjectStructures(state.theme, newTheme);
},
assignConnectionArrow: function assignConnectionArrow(connectionArrow) {
state.connectionArrow = connectionArrow;
}
};
};
export var setupBasicBehaviour = function setupBasicBehaviour(state) {
return Object.assign({}, setupSharedPrint(state), setupGetChildBoundaries(state), setupStateModifiers(state));
};
export var setupCompleteState = function setupCompleteState(initialState) {
var state = extractBasicState(initialState);
return _objectSpread(_objectSpread({}, state), setupInitialProperties(state));
};
export var calculateNameBasedWidth = function calculateNameBasedWidth(_ref4) {
var maxNamePartLength = _ref4.maxNamePartLength,
theme = _ref4.theme;
return maxNamePartLength * theme.symbolWidth;
};
export var calculateNameBasedHeight = function calculateNameBasedHeight(_ref5) {
var totalNamePartsNumber = _ref5.totalNamePartsNumber,
theme = _ref5.theme;
return totalNamePartsNumber * theme.symbolHeight + (totalNamePartsNumber - 1) * theme.lineHeight;
};
export var calculateWidth = function calculateWidth(state) {
return 2 * state.theme.horizontalPadding + calculateNameBasedWidth(state);
};
export var calculateHeight = function calculateHeight(state) {
return 2 * state.theme.verticalPadding + calculateNameBasedHeight(state);
};
export var calculateDimensions = function calculateDimensions(state) {
return {
w: calculateWidth(state),
h: calculateHeight(state)
};
};
export var calculatePosition = function calculatePosition(state) {
return _objectSpread({}, state.initialPosition);
};
export var calculateFromPoint = function calculateFromPoint(_ref6) {
var position = _ref6.position,
dimensions = _ref6.dimensions,
theme = _ref6.theme;
return {
x: position.x + theme.childOffset / 2,
y: position.y + dimensions.h
};
};
export var calculateToPoint = function calculateToPoint(_ref7) {
var position = _ref7.position,
dimensions = _ref7.dimensions;
return {
x: position.x,
y: position.y + dimensions.h / 2
};
};
export var calculateBackPoint = function calculateBackPoint(_ref8) {
var position = _ref8.position,
dimensions = _ref8.dimensions;
return {
x: position.x + dimensions.w,
y: position.y + dimensions.h / 2
};
};
export var calculateChildOffsetPoint = function calculateChildOffsetPoint(_ref9) {
var theme = _ref9.theme,
dimensions = _ref9.dimensions;
return {
x: theme.childOffset,
y: dimensions.h + theme.childOffset / 2
};
};
export var calculateBoundaries = function calculateBoundaries(_ref10) {
var position = _ref10.position,
dimensions = _ref10.dimensions;
return {
min: {
x: position.x,
y: position.y
},
max: {
x: position.x + dimensions.w,
y: position.y + dimensions.h
}
};
};