(function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(); else if(typeof define === 'function' && define.amd) define([], factory); else if(typeof exports === 'object') exports["mermaid"] = factory(); else root["mermaid"] = factory(); })(typeof self !== "undefined" ? self : this, function() { return /******/ (() => { // webpackBootstrap /******/ var __webpack_modules__ = ({ /***/ "./src/config.js": /*!***********************!*\ !*** ./src/config.js ***! \***********************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "defaultConfig": () => (/* binding */ defaultConfig), /* harmony export */ "updateCurrentConfig": () => (/* binding */ updateCurrentConfig), /* harmony export */ "setSiteConfig": () => (/* binding */ setSiteConfig), /* harmony export */ "saveConfigFromInitilize": () => (/* binding */ saveConfigFromInitilize), /* harmony export */ "updateSiteConfig": () => (/* binding */ updateSiteConfig), /* harmony export */ "getSiteConfig": () => (/* binding */ getSiteConfig), /* harmony export */ "setConfig": () => (/* binding */ setConfig), /* harmony export */ "getConfig": () => (/* binding */ getConfig), /* harmony export */ "sanitize": () => (/* binding */ sanitize), /* harmony export */ "addDirective": () => (/* binding */ addDirective), /* harmony export */ "reset": () => (/* binding */ reset) /* harmony export */ }); /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils */ "./src/utils.js"); /* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./logger */ "./src/logger.js"); /* harmony import */ var _themes__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./themes */ "./src/themes/index.js"); /* harmony import */ var _defaultConfig__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./defaultConfig */ "./src/defaultConfig.js"); function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } // debugger; var defaultConfig = Object.freeze(_defaultConfig__WEBPACK_IMPORTED_MODULE_0__["default"]); var siteConfig = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.assignWithDepth)({}, defaultConfig); var configFromInitialize; var directives = []; var currentConfig = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.assignWithDepth)({}, defaultConfig); var updateCurrentConfig = function updateCurrentConfig(siteCfg, _directives) { // start with config beeing the siteConfig var cfg = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.assignWithDepth)({}, siteCfg); // let sCfg = assignWithDepth(defaultConfig, siteConfigDelta); // Join directives var sumOfDirectives = {}; for (var i = 0; i < _directives.length; i++) { var d = _directives[i]; sanitize(d); // Apply the data from the directive where the the overrides the themeVaraibles sumOfDirectives = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.assignWithDepth)(sumOfDirectives, d); } cfg = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.assignWithDepth)(cfg, sumOfDirectives); if (sumOfDirectives.theme) { var tmpConfigFromInitialize = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.assignWithDepth)({}, configFromInitialize); var themeVariables = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.assignWithDepth)(tmpConfigFromInitialize.themeVariables || {}, sumOfDirectives.themeVariables); cfg.themeVariables = _themes__WEBPACK_IMPORTED_MODULE_2__["default"][cfg.theme].getThemeVariables(themeVariables); } currentConfig = cfg; return cfg; }; /** * ## setSiteConfig * * | Function | Description | Type | Values | * | ------------- | ------------------------------------- | ----------- | --------------------------------------- | * | setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | * * **Notes:** Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls * to reset() will reset the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) * will reset siteConfig and currentConfig to the defaultConfig Note: currentConfig is set in this * function *Default value: At default, will mirror Global Config** * * @param conf - The base currentConfig to use as siteConfig * @returns {object} - The siteConfig */ var setSiteConfig = function setSiteConfig(conf) { siteConfig = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.assignWithDepth)({}, defaultConfig); siteConfig = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.assignWithDepth)(siteConfig, conf); if (conf.theme) { siteConfig.themeVariables = _themes__WEBPACK_IMPORTED_MODULE_2__["default"][conf.theme].getThemeVariables(conf.themeVariables); } currentConfig = updateCurrentConfig(siteConfig, directives); return siteConfig; }; var saveConfigFromInitilize = function saveConfigFromInitilize(conf) { configFromInitialize = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.assignWithDepth)({}, conf); }; var updateSiteConfig = function updateSiteConfig(conf) { siteConfig = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.assignWithDepth)(siteConfig, conf); updateCurrentConfig(siteConfig, directives); return siteConfig; }; /** * ## getSiteConfig * * | Function | Description | Type | Values | * | ------------- | ------------------------------------------------- | ----------- | -------------------------------- | * | setSiteConfig | Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig | * * **Notes**: Returns **any** values in siteConfig. * * @returns {object} - The siteConfig */ var getSiteConfig = function getSiteConfig() { return (0,_utils__WEBPACK_IMPORTED_MODULE_1__.assignWithDepth)({}, siteConfig); }; /** * ## setConfig * * | Function | Description | Type | Values | * | ------------- | ------------------------------------- | ----------- | --------------------------------------- | * | setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | * * **Notes**: Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure * keys. Any values found in conf with key found in siteConfig.secure will be replaced with the * corresponding siteConfig value. * * @param {any} conf - The potential currentConfig * @returns {any} - The currentConfig merged with the sanitized conf */ var setConfig = function setConfig(conf) { // sanitize(conf); // Object.keys(conf).forEach(key => { // const manipulator = manipulators[key]; // conf[key] = manipulator ? manipulator(conf[key]) : conf[key]; // }); (0,_utils__WEBPACK_IMPORTED_MODULE_1__.assignWithDepth)(currentConfig, conf); return getConfig(); }; /** * ## getConfig * * | Function | Description | Type | Return Values | * | --------- | ------------------------- | ----------- | ------------------------------ | * | getConfig | Obtains the currentConfig | Get Request | Any Values from current Config | * * **Notes**: Returns **any** the currentConfig * * @returns {any} - The currentConfig */ var getConfig = function getConfig() { return (0,_utils__WEBPACK_IMPORTED_MODULE_1__.assignWithDepth)({}, currentConfig); }; /** * ## sanitize * * | Function | Description | Type | Values | * | -------- | -------------------------------------- | ----------- | ------ | * | sanitize | Sets the siteConfig to desired values. | Put Request | None | * * Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies * options in-place * * @param {any} options - The potential setConfig parameter */ var sanitize = function sanitize(options) { // Checking that options are not in the list of excluded options Object.keys(siteConfig.secure).forEach(function (key) { if (typeof options[siteConfig.secure[key]] !== 'undefined') { // DO NOT attempt to print options[siteConfig.secure[key]] within `${}` as a malicious script // can exploit the logger's attempt to stringify the value and execute arbitrary code _logger__WEBPACK_IMPORTED_MODULE_3__.log.debug("Denied attempt to modify a secure key ".concat(siteConfig.secure[key]), options[siteConfig.secure[key]]); delete options[siteConfig.secure[key]]; } }); // Check that there no attempts of prototype pollution Object.keys(options).forEach(function (key) { if (key.indexOf('__') === 0) { delete options[key]; } }); // Check that there no attempts of xss, there should be no tags at all in the directive // blocking data urls as base64 urls can contain svgs with inline script tags Object.keys(options).forEach(function (key) { if (typeof options[key] === 'string') { if (options[key].indexOf('<') > -1 || options[key].indexOf('>') > -1 || options[key].indexOf('url(data:') > -1) { delete options[key]; } } if (_typeof(options[key]) === 'object') { sanitize(options[key]); } }); }; /** * Pushes in a directive to the configuration * * @param {object} directive The directive to push in */ var addDirective = function addDirective(directive) { if (directive.fontFamily) { if (!directive.themeVariables) { directive.themeVariables = { fontFamily: directive.fontFamily }; } else { if (!directive.themeVariables.fontFamily) { directive.themeVariables = { fontFamily: directive.fontFamily }; } } } directives.push(directive); updateCurrentConfig(siteConfig, directives); }; /** * ## reset * * | Function | Description | Type | Required | Values | * | -------- | ---------------------------- | ----------- | -------- | ------ | * | reset | Resets currentConfig to conf | Put Request | Required | None | * * ## conf * * | Parameter | Description | Type | Required | Values | * | --------- | ------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- | * | conf | base set of values, which currentConfig coul be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array | * * **Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`) */ var reset = function reset() { // Replace current config with siteConfig directives = []; updateCurrentConfig(siteConfig, directives); }; /***/ }), /***/ "./src/dagre-wrapper/clusters.js": /*!***************************************!*\ !*** ./src/dagre-wrapper/clusters.js ***! \***************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "insertCluster": () => (/* binding */ insertCluster), /* harmony export */ "getClusterTitleWidth": () => (/* binding */ getClusterTitleWidth), /* harmony export */ "clear": () => (/* binding */ clear), /* harmony export */ "positionCluster": () => (/* binding */ positionCluster) /* harmony export */ }); /* harmony import */ var _intersect_intersect_rect__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./intersect/intersect-rect */ "./src/dagre-wrapper/intersect/intersect-rect.js"); /* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../logger */ "./src/logger.js"); /* harmony import */ var _createLabel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./createLabel */ "./src/dagre-wrapper/createLabel.js"); /* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! d3 */ "d3"); /* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(d3__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../config */ "./src/config.js"); /* harmony import */ var _diagrams_common_common__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../diagrams/common/common */ "./src/diagrams/common/common.js"); var rect = function rect(parent, node) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.trace('Creating subgraph rect for ', node.id, node); // Add outer g element var shapeSvg = parent.insert('g').attr('class', 'cluster' + (node.class ? ' ' + node.class : '')).attr('id', node.id); // add the rect var rect = shapeSvg.insert('rect', ':first-child'); // Create the label and insert it after the rect var label = shapeSvg.insert('g').attr('class', 'cluster-label'); var text = label.node().appendChild((0,_createLabel__WEBPACK_IMPORTED_MODULE_2__["default"])(node.labelText, node.labelStyle, undefined, true)); // Get the size of the label var bbox = text.getBBox(); if ((0,_diagrams_common_common__WEBPACK_IMPORTED_MODULE_3__.evaluate)((0,_config__WEBPACK_IMPORTED_MODULE_4__.getConfig)().flowchart.htmlLabels)) { var div = text.children[0]; var dv = (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)(text); bbox = div.getBoundingClientRect(); dv.attr('width', bbox.width); dv.attr('height', bbox.height); } var padding = 0 * node.padding; var halfPadding = padding / 2; var width = node.width <= bbox.width + padding ? bbox.width + padding : node.width; if (node.width <= bbox.width + padding) { node.diff = (bbox.width - node.width) / 2; } else { node.diff = -node.padding / 2; } _logger__WEBPACK_IMPORTED_MODULE_1__.log.trace('Data ', node, JSON.stringify(node)); // center the rect around its coordinate rect.attr('style', node.style).attr('rx', node.rx).attr('ry', node.ry).attr('x', node.x - width / 2).attr('y', node.y - node.height / 2 - halfPadding).attr('width', width).attr('height', node.height + padding); // Center the label label.attr('transform', 'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2 + node.padding / 3) + ')'); var rectBox = rect.node().getBBox(); node.width = rectBox.width; node.height = rectBox.height; node.intersect = function (point) { return (0,_intersect_intersect_rect__WEBPACK_IMPORTED_MODULE_5__["default"])(node, point); }; return shapeSvg; }; /** * Non visiable cluster where the note is group with its * * @param {any} parent * @param {any} node * @returns {any} ShapeSvg */ var noteGroup = function noteGroup(parent, node) { // Add outer g element var shapeSvg = parent.insert('g').attr('class', 'note-cluster').attr('id', node.id); // add the rect var rect = shapeSvg.insert('rect', ':first-child'); var padding = 0 * node.padding; var halfPadding = padding / 2; // center the rect around its coordinate rect.attr('rx', node.rx).attr('ry', node.ry).attr('x', node.x - node.width / 2 - halfPadding).attr('y', node.y - node.height / 2 - halfPadding).attr('width', node.width + padding).attr('height', node.height + padding).attr('fill', 'none'); var rectBox = rect.node().getBBox(); node.width = rectBox.width; node.height = rectBox.height; node.intersect = function (point) { return (0,_intersect_intersect_rect__WEBPACK_IMPORTED_MODULE_5__["default"])(node, point); }; return shapeSvg; }; var roundedWithTitle = function roundedWithTitle(parent, node) { // Add outer g element var shapeSvg = parent.insert('g').attr('class', node.classes).attr('id', node.id); // add the rect var rect = shapeSvg.insert('rect', ':first-child'); // Create the label and insert it after the rect var label = shapeSvg.insert('g').attr('class', 'cluster-label'); var innerRect = shapeSvg.append('rect'); var text = label.node().appendChild((0,_createLabel__WEBPACK_IMPORTED_MODULE_2__["default"])(node.labelText, node.labelStyle, undefined, true)); // Get the size of the label var bbox = text.getBBox(); if ((0,_diagrams_common_common__WEBPACK_IMPORTED_MODULE_3__.evaluate)((0,_config__WEBPACK_IMPORTED_MODULE_4__.getConfig)().flowchart.htmlLabels)) { var div = text.children[0]; var dv = (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)(text); bbox = div.getBoundingClientRect(); dv.attr('width', bbox.width); dv.attr('height', bbox.height); } bbox = text.getBBox(); var padding = 0 * node.padding; var halfPadding = padding / 2; var width = node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width; if (node.width <= bbox.width + node.padding) { node.diff = (bbox.width + node.padding * 0 - node.width) / 2; } else { node.diff = -node.padding / 2; } // center the rect around its coordinate rect.attr('class', 'outer').attr('x', node.x - width / 2 - halfPadding).attr('y', node.y - node.height / 2 - halfPadding).attr('width', width + padding).attr('height', node.height + padding); innerRect.attr('class', 'inner').attr('x', node.x - width / 2 - halfPadding).attr('y', node.y - node.height / 2 - halfPadding + bbox.height - 1).attr('width', width + padding).attr('height', node.height + padding - bbox.height - 3); // Center the label label.attr('transform', 'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2 - node.padding / 3 + ((0,_diagrams_common_common__WEBPACK_IMPORTED_MODULE_3__.evaluate)((0,_config__WEBPACK_IMPORTED_MODULE_4__.getConfig)().flowchart.htmlLabels) ? 5 : 3)) + ')'); var rectBox = rect.node().getBBox(); node.height = rectBox.height; node.intersect = function (point) { return (0,_intersect_intersect_rect__WEBPACK_IMPORTED_MODULE_5__["default"])(node, point); }; return shapeSvg; }; var divider = function divider(parent, node) { // Add outer g element var shapeSvg = parent.insert('g').attr('class', node.classes).attr('id', node.id); // add the rect var rect = shapeSvg.insert('rect', ':first-child'); var padding = 0 * node.padding; var halfPadding = padding / 2; // center the rect around its coordinate rect.attr('class', 'divider').attr('x', node.x - node.width / 2 - halfPadding).attr('y', node.y - node.height / 2).attr('width', node.width + padding).attr('height', node.height + padding); var rectBox = rect.node().getBBox(); node.width = rectBox.width; node.height = rectBox.height; node.diff = -node.padding / 2; node.intersect = function (point) { return (0,_intersect_intersect_rect__WEBPACK_IMPORTED_MODULE_5__["default"])(node, point); }; return shapeSvg; }; var shapes = { rect: rect, roundedWithTitle: roundedWithTitle, noteGroup: noteGroup, divider: divider }; var clusterElems = {}; var insertCluster = function insertCluster(elem, node) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.trace('Inserting cluster'); var shape = node.shape || 'rect'; clusterElems[node.id] = shapes[shape](elem, node); }; var getClusterTitleWidth = function getClusterTitleWidth(elem, node) { var label = (0,_createLabel__WEBPACK_IMPORTED_MODULE_2__["default"])(node.labelText, node.labelStyle, undefined, true); elem.node().appendChild(label); var width = label.getBBox().width; elem.node().removeChild(label); return width; }; var clear = function clear() { clusterElems = {}; }; var positionCluster = function positionCluster(node) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.info('Position cluster (' + node.id + ', ' + node.x + ', ' + node.y + ')'); var el = clusterElems[node.id]; el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')'); }; /***/ }), /***/ "./src/dagre-wrapper/createLabel.js": /*!******************************************!*\ !*** ./src/dagre-wrapper/createLabel.js ***! \******************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! d3 */ "d3"); /* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(d3__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../logger */ "./src/logger.js"); /* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../config */ "./src/config.js"); /* harmony import */ var _diagrams_common_common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../diagrams/common/common */ "./src/diagrams/common/common.js"); function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } // eslint-disable-line /** * @param dom * @param styleFn */ function applyStyle(dom, styleFn) { if (styleFn) { dom.attr('style', styleFn); } } /** * @param {any} node * @returns {SVGForeignObjectElement} Node */ function addHtmlLabel(node) { var fo = (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')); var div = fo.append('xhtml:div'); var label = node.label; var labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel'; div.html('' + label + ''); applyStyle(div, node.labelStyle); div.style('display', 'inline-block'); // Fix for firefox div.style('white-space', 'nowrap'); div.attr('xmlns', 'http://www.w3.org/1999/xhtml'); return fo.node(); } var createLabel = function createLabel(_vertexText, style, isTitle, isNode) { var vertexText = _vertexText || ''; if (_typeof(vertexText) === 'object') vertexText = vertexText[0]; if ((0,_diagrams_common_common__WEBPACK_IMPORTED_MODULE_1__.evaluate)((0,_config__WEBPACK_IMPORTED_MODULE_2__.getConfig)().flowchart.htmlLabels)) { // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that? vertexText = vertexText.replace(/\\n|\n/g, '
'); _logger__WEBPACK_IMPORTED_MODULE_3__.log.info('vertexText' + vertexText); var node = { isNode: isNode, label: vertexText.replace(/fa[lrsb]?:fa-[\w-]+/g, function (s) { return ""); }), labelStyle: style.replace('fill:', 'color:') }; var vertexNode = addHtmlLabel(node); // vertexNode.parentNode.removeChild(vertexNode); return vertexNode; } else { var svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text'); svgLabel.setAttribute('style', style.replace('color:', 'fill:')); var rows = []; if (typeof vertexText === 'string') { rows = vertexText.split(/\\n|\n|/gi); } else if (Array.isArray(vertexText)) { rows = vertexText; } else { rows = []; } for (var j = 0; j < rows.length; j++) { var tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan'); tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve'); tspan.setAttribute('dy', '1em'); tspan.setAttribute('x', '0'); if (isTitle) { tspan.setAttribute('class', 'title-row'); } else { tspan.setAttribute('class', 'row'); } tspan.textContent = rows[j].trim(); svgLabel.appendChild(tspan); } return svgLabel; } }; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (createLabel); /***/ }), /***/ "./src/dagre-wrapper/edges.js": /*!************************************!*\ !*** ./src/dagre-wrapper/edges.js ***! \************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "clear": () => (/* binding */ clear), /* harmony export */ "insertEdgeLabel": () => (/* binding */ insertEdgeLabel), /* harmony export */ "positionEdgeLabel": () => (/* binding */ positionEdgeLabel), /* harmony export */ "intersection": () => (/* binding */ intersection), /* harmony export */ "insertEdge": () => (/* binding */ insertEdge) /* harmony export */ }); /* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../logger */ "./src/logger.js"); /* harmony import */ var _createLabel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./createLabel */ "./src/dagre-wrapper/createLabel.js"); /* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! d3 */ "d3"); /* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(d3__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../config */ "./src/config.js"); /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../utils */ "./src/utils.js"); /* harmony import */ var _diagrams_common_common__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../diagrams/common/common */ "./src/diagrams/common/common.js"); // eslint-disable-line var edgeLabels = {}; var terminalLabels = {}; var clear = function clear() { edgeLabels = {}; terminalLabels = {}; }; var insertEdgeLabel = function insertEdgeLabel(elem, edge) { // Create the actual text element var labelElement = (0,_createLabel__WEBPACK_IMPORTED_MODULE_1__["default"])(edge.label, edge.labelStyle); // Create outer g, edgeLabel, this will be positioned after graph layout var edgeLabel = elem.insert('g').attr('class', 'edgeLabel'); // Create inner g, label, this will be positioned now for centering the text var label = edgeLabel.insert('g').attr('class', 'label'); label.node().appendChild(labelElement); // Center the label var bbox = labelElement.getBBox(); if ((0,_diagrams_common_common__WEBPACK_IMPORTED_MODULE_2__.evaluate)((0,_config__WEBPACK_IMPORTED_MODULE_3__.getConfig)().flowchart.htmlLabels)) { var div = labelElement.children[0]; var dv = (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)(labelElement); bbox = div.getBoundingClientRect(); dv.attr('width', bbox.width); dv.attr('height', bbox.height); } label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')'); // Make element accessible by id for positioning edgeLabels[edge.id] = edgeLabel; // Update the abstract data of the edge with the new information about its width and height edge.width = bbox.width; edge.height = bbox.height; var fo; if (edge.startLabelLeft) { // Create the actual text element var startLabelElement = (0,_createLabel__WEBPACK_IMPORTED_MODULE_1__["default"])(edge.startLabelLeft, edge.labelStyle); var startEdgeLabelLeft = elem.insert('g').attr('class', 'edgeTerminals'); var inner = startEdgeLabelLeft.insert('g').attr('class', 'inner'); fo = inner.node().appendChild(startLabelElement); var slBox = startLabelElement.getBBox(); inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')'); if (!terminalLabels[edge.id]) { terminalLabels[edge.id] = {}; } terminalLabels[edge.id].startLeft = startEdgeLabelLeft; setTerminalWidth(fo, edge.startLabelLeft); } if (edge.startLabelRight) { // Create the actual text element var _startLabelElement = (0,_createLabel__WEBPACK_IMPORTED_MODULE_1__["default"])(edge.startLabelRight, edge.labelStyle); var startEdgeLabelRight = elem.insert('g').attr('class', 'edgeTerminals'); var _inner = startEdgeLabelRight.insert('g').attr('class', 'inner'); fo = startEdgeLabelRight.node().appendChild(_startLabelElement); _inner.node().appendChild(_startLabelElement); var _slBox = _startLabelElement.getBBox(); _inner.attr('transform', 'translate(' + -_slBox.width / 2 + ', ' + -_slBox.height / 2 + ')'); if (!terminalLabels[edge.id]) { terminalLabels[edge.id] = {}; } terminalLabels[edge.id].startRight = startEdgeLabelRight; setTerminalWidth(fo, edge.startLabelRight); } if (edge.endLabelLeft) { // Create the actual text element var endLabelElement = (0,_createLabel__WEBPACK_IMPORTED_MODULE_1__["default"])(edge.endLabelLeft, edge.labelStyle); var endEdgeLabelLeft = elem.insert('g').attr('class', 'edgeTerminals'); var _inner2 = endEdgeLabelLeft.insert('g').attr('class', 'inner'); fo = _inner2.node().appendChild(endLabelElement); var _slBox2 = endLabelElement.getBBox(); _inner2.attr('transform', 'translate(' + -_slBox2.width / 2 + ', ' + -_slBox2.height / 2 + ')'); endEdgeLabelLeft.node().appendChild(endLabelElement); if (!terminalLabels[edge.id]) { terminalLabels[edge.id] = {}; } terminalLabels[edge.id].endLeft = endEdgeLabelLeft; setTerminalWidth(fo, edge.endLabelLeft); } if (edge.endLabelRight) { // Create the actual text element var _endLabelElement = (0,_createLabel__WEBPACK_IMPORTED_MODULE_1__["default"])(edge.endLabelRight, edge.labelStyle); var endEdgeLabelRight = elem.insert('g').attr('class', 'edgeTerminals'); var _inner3 = endEdgeLabelRight.insert('g').attr('class', 'inner'); fo = _inner3.node().appendChild(_endLabelElement); var _slBox3 = _endLabelElement.getBBox(); _inner3.attr('transform', 'translate(' + -_slBox3.width / 2 + ', ' + -_slBox3.height / 2 + ')'); endEdgeLabelRight.node().appendChild(_endLabelElement); if (!terminalLabels[edge.id]) { terminalLabels[edge.id] = {}; } terminalLabels[edge.id].endRight = endEdgeLabelRight; setTerminalWidth(fo, edge.endLabelRight); } }; /** * @param {any} fo * @param {any} value */ function setTerminalWidth(fo, value) { if ((0,_config__WEBPACK_IMPORTED_MODULE_3__.getConfig)().flowchart.htmlLabels && fo) { fo.style.width = value.length * 9 + 'px'; fo.style.height = '12px'; } } var positionEdgeLabel = function positionEdgeLabel(edge, paths) { _logger__WEBPACK_IMPORTED_MODULE_4__.log.info('Moving label abc78 ', edge.id, edge.label, edgeLabels[edge.id]); var path = paths.updatedPath ? paths.updatedPath : paths.originalPath; if (edge.label) { var el = edgeLabels[edge.id]; var x = edge.x; var y = edge.y; if (path) { // // debugger; var pos = _utils__WEBPACK_IMPORTED_MODULE_5__["default"].calcLabelPosition(path); _logger__WEBPACK_IMPORTED_MODULE_4__.log.info('Moving label from (', x, ',', y, ') to (', pos.x, ',', pos.y, ') abc78'); // x = pos.x; // y = pos.y; } el.attr('transform', 'translate(' + x + ', ' + y + ')'); } //let path = paths.updatedPath ? paths.updatedPath : paths.originalPath; if (edge.startLabelLeft) { var _el = terminalLabels[edge.id].startLeft; var _x2 = edge.x; var _y2 = edge.y; if (path) { // debugger; var _pos = _utils__WEBPACK_IMPORTED_MODULE_5__["default"].calcTerminalLabelPosition(edge.arrowTypeStart ? 10 : 0, 'start_left', path); _x2 = _pos.x; _y2 = _pos.y; } _el.attr('transform', 'translate(' + _x2 + ', ' + _y2 + ')'); } if (edge.startLabelRight) { var _el2 = terminalLabels[edge.id].startRight; var _x3 = edge.x; var _y3 = edge.y; if (path) { // debugger; var _pos2 = _utils__WEBPACK_IMPORTED_MODULE_5__["default"].calcTerminalLabelPosition(edge.arrowTypeStart ? 10 : 0, 'start_right', path); _x3 = _pos2.x; _y3 = _pos2.y; } _el2.attr('transform', 'translate(' + _x3 + ', ' + _y3 + ')'); } if (edge.endLabelLeft) { var _el3 = terminalLabels[edge.id].endLeft; var _x4 = edge.x; var _y4 = edge.y; if (path) { // debugger; var _pos3 = _utils__WEBPACK_IMPORTED_MODULE_5__["default"].calcTerminalLabelPosition(edge.arrowTypeEnd ? 10 : 0, 'end_left', path); _x4 = _pos3.x; _y4 = _pos3.y; } _el3.attr('transform', 'translate(' + _x4 + ', ' + _y4 + ')'); } if (edge.endLabelRight) { var _el4 = terminalLabels[edge.id].endRight; var _x5 = edge.x; var _y5 = edge.y; if (path) { // debugger; var _pos4 = _utils__WEBPACK_IMPORTED_MODULE_5__["default"].calcTerminalLabelPosition(edge.arrowTypeEnd ? 10 : 0, 'end_right', path); _x5 = _pos4.x; _y5 = _pos4.y; } _el4.attr('transform', 'translate(' + _x5 + ', ' + _y5 + ')'); } }; // const getRelationType = function(type) { // switch (type) { // case stateDb.relationType.AGGREGATION: // return 'aggregation'; // case stateDb.relationType.EXTENSION: // return 'extension'; // case stateDb.relationType.COMPOSITION: // return 'composition'; // case stateDb.relationType.DEPENDENCY: // return 'dependency'; // } // }; var outsideNode = function outsideNode(node, point) { // log.warn('Checking bounds ', node, point); var x = node.x; var y = node.y; var dx = Math.abs(point.x - x); var dy = Math.abs(point.y - y); var w = node.width / 2; var h = node.height / 2; if (dx >= w || dy >= h) { return true; } return false; }; var intersection = function intersection(node, outsidePoint, insidePoint) { _logger__WEBPACK_IMPORTED_MODULE_4__.log.warn("intersection calc abc89:\n outsidePoint: ".concat(JSON.stringify(outsidePoint), "\n insidePoint : ").concat(JSON.stringify(insidePoint), "\n node : x:").concat(node.x, " y:").concat(node.y, " w:").concat(node.width, " h:").concat(node.height)); var x = node.x; var y = node.y; var dx = Math.abs(x - insidePoint.x); // const dy = Math.abs(y - insidePoint.y); var w = node.width / 2; var r = insidePoint.x < outsidePoint.x ? w - dx : w + dx; var h = node.height / 2; // const edges = { // x1: x - w, // x2: x + w, // y1: y - h, // y2: y + h // }; // if ( // outsidePoint.x === edges.x1 || // outsidePoint.x === edges.x2 || // outsidePoint.y === edges.y1 || // outsidePoint.y === edges.y2 // ) { // log.warn('abc89 calc equals on edge', outsidePoint, edges); // return outsidePoint; // } var Q = Math.abs(outsidePoint.y - insidePoint.y); var R = Math.abs(outsidePoint.x - insidePoint.x); // log.warn(); if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) { // eslint-disable-line // Intersection is top or bottom of rect. // let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y; var q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y; r = R * q / Q; var res = { x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x - R + r, y: insidePoint.y < outsidePoint.y ? insidePoint.y + Q - q : insidePoint.y - Q + q }; if (r === 0) { res.x = outsidePoint.x; res.y = outsidePoint.y; } if (R === 0) { res.x = outsidePoint.x; } if (Q === 0) { res.y = outsidePoint.y; } _logger__WEBPACK_IMPORTED_MODULE_4__.log.warn("abc89 topp/bott calc, Q ".concat(Q, ", q ").concat(q, ", R ").concat(R, ", r ").concat(r), res); return res; } else { // Intersection onn sides of rect if (insidePoint.x < outsidePoint.x) { r = outsidePoint.x - w - x; } else { // r = outsidePoint.x - w - x; r = x - w - outsidePoint.x; } var _q = Q * r / R; // OK let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x + dx - w; // OK let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : outsidePoint.x + r; var _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x - R + r; // let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : outsidePoint.x + r; var _y = insidePoint.y < outsidePoint.y ? insidePoint.y + _q : insidePoint.y - _q; _logger__WEBPACK_IMPORTED_MODULE_4__.log.warn("sides calc abc89, Q ".concat(Q, ", q ").concat(_q, ", R ").concat(R, ", r ").concat(r), { _x: _x, _y: _y }); if (r === 0) { _x = outsidePoint.x; _y = outsidePoint.y; } if (R === 0) { _x = outsidePoint.x; } if (Q === 0) { _y = outsidePoint.y; } return { x: _x, y: _y }; } }; /** * This function will page a path and node where the last point(s) in the path is inside the node * and return an update path ending by the border of the node. * * @param {Array} _points * @param {any} boundryNode * @returns {Array} Points */ var cutPathAtIntersect = function cutPathAtIntersect(_points, boundryNode) { _logger__WEBPACK_IMPORTED_MODULE_4__.log.warn('abc88 cutPathAtIntersect', _points, boundryNode); var points = []; var lastPointOutside = _points[0]; var isInside = false; _points.forEach(function (point) { // const node = clusterDb[edge.toCluster].node; _logger__WEBPACK_IMPORTED_MODULE_4__.log.info('abc88 checking point', point, boundryNode); // check if point is inside the boundry rect if (!outsideNode(boundryNode, point) && !isInside) { // First point inside the rect found // Calc the intersection coord between the point anf the last opint ouside the rect var inter = intersection(boundryNode, lastPointOutside, point); _logger__WEBPACK_IMPORTED_MODULE_4__.log.warn('abc88 inside', point, lastPointOutside, inter); _logger__WEBPACK_IMPORTED_MODULE_4__.log.warn('abc88 intersection', inter); // // Check case where the intersection is the same as the last point var pointPresent = false; points.forEach(function (p) { pointPresent = pointPresent || p.x === inter.x && p.y === inter.y; }); // // if (!pointPresent) { if (!points.find(function (e) { return e.x === inter.x && e.y === inter.y; })) { points.push(inter); } else { _logger__WEBPACK_IMPORTED_MODULE_4__.log.warn('abc88 no intersect', inter, points); } // points.push(inter); isInside = true; } else { // Outside _logger__WEBPACK_IMPORTED_MODULE_4__.log.warn('abc88 outside', point, lastPointOutside); lastPointOutside = point; // points.push(point); if (!isInside) points.push(point); } }); _logger__WEBPACK_IMPORTED_MODULE_4__.log.warn('abc88 returning points', points); return points; }; //(edgePaths, e, edge, clusterDb, diagramtype, graph) var insertEdge = function insertEdge(elem, e, edge, clusterDb, diagramType, graph) { var points = edge.points; var pointsHasChanged = false; var tail = graph.node(e.v); var head = graph.node(e.w); _logger__WEBPACK_IMPORTED_MODULE_4__.log.info('abc88 InsertEdge: ', edge); if (head.intersect && tail.intersect) { points = points.slice(1, edge.points.length - 1); points.unshift(tail.intersect(points[0])); _logger__WEBPACK_IMPORTED_MODULE_4__.log.info('Last point', points[points.length - 1], head, head.intersect(points[points.length - 1])); points.push(head.intersect(points[points.length - 1])); } if (edge.toCluster) { _logger__WEBPACK_IMPORTED_MODULE_4__.log.info('to cluster abc88', clusterDb[edge.toCluster]); points = cutPathAtIntersect(edge.points, clusterDb[edge.toCluster].node); // log.trace('edge', edge); // points = []; // let lastPointOutside; // = edge.points[0]; // let isInside = false; // edge.points.forEach(point => { // const node = clusterDb[edge.toCluster].node; // log.warn('checking from', edge.fromCluster, point, node); // if (!outsideNode(node, point) && !isInside) { // log.trace('inside', edge.toCluster, point, lastPointOutside); // // First point inside the rect // const inter = intersection(node, lastPointOutside, point); // let pointPresent = false; // points.forEach(p => { // pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y); // }); // // if (!pointPresent) { // if (!points.find(e => e.x === inter.x && e.y === inter.y)) { // points.push(inter); // } else { // log.warn('no intersect', inter, points); // } // isInside = true; // } else { // // outtside // lastPointOutside = point; // if (!isInside) points.push(point); // } // }); pointsHasChanged = true; } if (edge.fromCluster) { _logger__WEBPACK_IMPORTED_MODULE_4__.log.info('from cluster abc88', clusterDb[edge.fromCluster]); points = cutPathAtIntersect(points.reverse(), clusterDb[edge.fromCluster].node).reverse(); // log.warn('edge', edge); // log.warn('from cluster', clusterDb[edge.fromCluster], points); // const updatedPoints = []; // let lastPointOutside = edge.points[edge.points.length - 1]; // let isInside = false; // for (let i = points.length - 1; i >= 0; i--) { // const point = points[i]; // const node = clusterDb[edge.fromCluster].node; // log.warn('checking to', edge.fromCluster, point, node); // if (!outsideNode(node, point) && !isInside) { // log.warn('inside', edge.fromCluster, point, node); // // First point inside the rect // const inter = intersection(node, lastPointOutside, point); // log.warn('intersect', intersection(node, lastPointOutside, point)); // let pointPresent = false; // points.forEach(p => { // pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y); // }); // // if (!pointPresent) { // if (!points.find(e => e.x === inter.x && e.y === inter.y)) { // updatedPoints.unshift(inter); // log.warn('Adding point -updated = ', updatedPoints); // } else { // log.warn('no intersect', inter, points); // } // // points.push(insterection); // isInside = true; // } else { // // at the outside // // if (!isInside) updatedPoints.unshift(point); // updatedPoints.unshift(point); // log.warn('Outside point', point, updatedPoints); // } // lastPointOutside = point; // } // points = updatedPoints; // points = edge.points; pointsHasChanged = true; } // The data for our line var lineData = points.filter(function (p) { return !Number.isNaN(p.y); }); // This is the accessor function we talked about above var curve; // Currently only flowcharts get the curve from the settings, perhaps this should // be expanded to a common setting? Restricting it for now in order not to cause side-effects that // have not been thought through if (diagramType === 'graph' || diagramType === 'flowchart') { curve = edge.curve || d3__WEBPACK_IMPORTED_MODULE_0__.curveBasis; } else { curve = d3__WEBPACK_IMPORTED_MODULE_0__.curveBasis; } // curve = curveLinear; var lineFunction = (0,d3__WEBPACK_IMPORTED_MODULE_0__.line)().x(function (d) { return d.x; }).y(function (d) { return d.y; }).curve(curve); // Contruct stroke classes based on properties var strokeClasses; switch (edge.thickness) { case 'normal': strokeClasses = 'edge-thickness-normal'; break; case 'thick': strokeClasses = 'edge-thickness-thick'; break; default: strokeClasses = ''; } switch (edge.pattern) { case 'solid': strokeClasses += ' edge-pattern-solid'; break; case 'dotted': strokeClasses += ' edge-pattern-dotted'; break; case 'dashed': strokeClasses += ' edge-pattern-dashed'; break; } var svgPath = elem.append('path').attr('d', lineFunction(lineData)).attr('id', edge.id).attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '')).attr('style', edge.style); // DEBUG code, adds a red circle at each edge coordinate // edge.points.forEach(point => { // elem // .append('circle') // .style('stroke', 'red') // .style('fill', 'red') // .attr('r', 1) // .attr('cx', point.x) // .attr('cy', point.y); // }); var url = ''; if ((0,_config__WEBPACK_IMPORTED_MODULE_3__.getConfig)().state.arrowMarkerAbsolute) { url = window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search; url = url.replace(/\(/g, '\\('); url = url.replace(/\)/g, '\\)'); } _logger__WEBPACK_IMPORTED_MODULE_4__.log.info('arrowTypeStart', edge.arrowTypeStart); _logger__WEBPACK_IMPORTED_MODULE_4__.log.info('arrowTypeEnd', edge.arrowTypeEnd); switch (edge.arrowTypeStart) { case 'arrow_cross': svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-crossStart' + ')'); break; case 'arrow_point': svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-pointStart' + ')'); break; case 'arrow_barb': svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-barbStart' + ')'); break; case 'arrow_circle': svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-circleStart' + ')'); break; case 'aggregation': svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-aggregationStart' + ')'); break; case 'extension': svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-extensionStart' + ')'); break; case 'composition': svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-compositionStart' + ')'); break; case 'dependency': svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-dependencyStart' + ')'); break; default: } switch (edge.arrowTypeEnd) { case 'arrow_cross': svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')'); break; case 'arrow_point': svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-pointEnd' + ')'); break; case 'arrow_barb': svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-barbEnd' + ')'); break; case 'arrow_circle': svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-circleEnd' + ')'); break; case 'aggregation': svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-aggregationEnd' + ')'); break; case 'extension': svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-extensionEnd' + ')'); break; case 'composition': svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-compositionEnd' + ')'); break; case 'dependency': svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-dependencyEnd' + ')'); break; default: } var paths = {}; if (pointsHasChanged) { paths.updatedPath = points; } paths.originalPath = edge.points; return paths; }; /***/ }), /***/ "./src/dagre-wrapper/index.js": /*!************************************!*\ !*** ./src/dagre-wrapper/index.js ***! \************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "render": () => (/* binding */ render) /* harmony export */ }); /* harmony import */ var dagre__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! dagre */ "dagre"); /* harmony import */ var dagre__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(dagre__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var graphlib__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! graphlib */ "graphlib"); /* harmony import */ var graphlib__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(graphlib__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var _markers__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./markers */ "./src/dagre-wrapper/markers.js"); /* harmony import */ var _shapes_util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./shapes/util */ "./src/dagre-wrapper/shapes/util.js"); /* harmony import */ var _mermaid_graphlib__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./mermaid-graphlib */ "./src/dagre-wrapper/mermaid-graphlib.js"); /* harmony import */ var _nodes__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./nodes */ "./src/dagre-wrapper/nodes.js"); /* harmony import */ var _clusters__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./clusters */ "./src/dagre-wrapper/clusters.js"); /* harmony import */ var _edges__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./edges */ "./src/dagre-wrapper/edges.js"); /* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../logger */ "./src/logger.js"); var recursiveRender = function recursiveRender(_elem, graph, diagramtype, parentCluster) { _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('Graph in recursive render: XXX', graphlib__WEBPACK_IMPORTED_MODULE_1___default().json.write(graph), parentCluster); var dir = graph.graph().rankdir; _logger__WEBPACK_IMPORTED_MODULE_2__.log.trace('Dir in recursive render - dir:', dir); var elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line if (!graph.nodes()) { _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('No nodes found for', graph); } else { _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('Recursive render XXX', graph.nodes()); } if (graph.edges().length > 0) { _logger__WEBPACK_IMPORTED_MODULE_2__.log.trace('Recursive edges', graph.edge(graph.edges()[0])); } var clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line var edgePaths = elem.insert('g').attr('class', 'edgePaths'); var edgeLabels = elem.insert('g').attr('class', 'edgeLabels'); var nodes = elem.insert('g').attr('class', 'nodes'); // Insert nodes, this will insert them into the dom and each node will get a size. The size is updated // to the abstract node and is later used by dagre for the layout graph.nodes().forEach(function (v) { var node = graph.node(v); if (typeof parentCluster !== 'undefined') { var data = JSON.parse(JSON.stringify(parentCluster.clusterData)); // data.clusterPositioning = true; _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('Setting data for cluster XXX (', v, ') ', data, parentCluster); graph.setNode(parentCluster.id, data); if (!graph.parent(v)) { _logger__WEBPACK_IMPORTED_MODULE_2__.log.trace('Setting parent', v, parentCluster.id); graph.setParent(v, parentCluster.id, data); } } _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('(Insert) Node XXX' + v + ': ' + JSON.stringify(graph.node(v))); if (node && node.clusterNode) { // const children = graph.children(v); _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('Cluster identified', v, node.width, graph.node(v)); var o = recursiveRender(nodes, node.graph, diagramtype, graph.node(v)); var newEl = o.elem; (0,_shapes_util__WEBPACK_IMPORTED_MODULE_3__.updateNodeBounds)(node, newEl); node.diff = o.diff || 0; _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('Node bounds (abc123)', v, node, node.width, node.x, node.y); (0,_nodes__WEBPACK_IMPORTED_MODULE_4__.setNodeElem)(newEl, node); _logger__WEBPACK_IMPORTED_MODULE_2__.log.warn('Recursive render complete ', newEl, node); } else { if (graph.children(v).length > 0) { // This is a cluster but not to be rendered recusively // Render as before _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('Cluster - the non recursive path XXX', v, node.id, node, graph); _logger__WEBPACK_IMPORTED_MODULE_2__.log.info((0,_mermaid_graphlib__WEBPACK_IMPORTED_MODULE_5__.findNonClusterChild)(node.id, graph)); _mermaid_graphlib__WEBPACK_IMPORTED_MODULE_5__.clusterDb[node.id] = { id: (0,_mermaid_graphlib__WEBPACK_IMPORTED_MODULE_5__.findNonClusterChild)(node.id, graph), node: node }; // insertCluster(clusters, graph.node(v)); } else { _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('Node - the non recursive path', v, node.id, node); (0,_nodes__WEBPACK_IMPORTED_MODULE_4__.insertNode)(nodes, graph.node(v), dir); } } }); // Insert labels, this will insert them into the dom so that the width can be calculated // Also figure out which edges point to/from clusters and adjust them accordingly // Edges from/to clusters really points to the first child in the cluster. // TODO: pick optimal child in the cluster to us as link anchor graph.edges().forEach(function (e) { var edge = graph.edge(e.v, e.w, e.name); _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e)); _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('Edge ' + e.v + ' -> ' + e.w + ': ', e, ' ', JSON.stringify(graph.edge(e))); // Check if link is either from or to a cluster _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('Fix', _mermaid_graphlib__WEBPACK_IMPORTED_MODULE_5__.clusterDb, 'ids:', e.v, e.w, 'Translateing: ', _mermaid_graphlib__WEBPACK_IMPORTED_MODULE_5__.clusterDb[e.v], _mermaid_graphlib__WEBPACK_IMPORTED_MODULE_5__.clusterDb[e.w]); (0,_edges__WEBPACK_IMPORTED_MODULE_6__.insertEdgeLabel)(edgeLabels, edge); }); graph.edges().forEach(function (e) { _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e)); }); _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('#############################################'); _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('### Layout ###'); _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('#############################################'); _logger__WEBPACK_IMPORTED_MODULE_2__.log.info(graph); dagre__WEBPACK_IMPORTED_MODULE_0___default().layout(graph); _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('Graph after layout:', graphlib__WEBPACK_IMPORTED_MODULE_1___default().json.write(graph)); // Move the nodes to the correct place var diff = 0; (0,_mermaid_graphlib__WEBPACK_IMPORTED_MODULE_5__.sortNodesByHierarchy)(graph).forEach(function (v) { var node = graph.node(v); _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('Position ' + v + ': ' + JSON.stringify(graph.node(v))); _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('Position ' + v + ': (' + node.x, ',' + node.y, ') width: ', node.width, ' height: ', node.height); if (node && node.clusterNode) { // clusterDb[node.id].node = node; (0,_nodes__WEBPACK_IMPORTED_MODULE_4__.positionNode)(node); } else { // Non cluster node if (graph.children(v).length > 0) { // A cluster in the non-recurive way // positionCluster(node); (0,_clusters__WEBPACK_IMPORTED_MODULE_7__.insertCluster)(clusters, node); _mermaid_graphlib__WEBPACK_IMPORTED_MODULE_5__.clusterDb[node.id].node = node; } else { (0,_nodes__WEBPACK_IMPORTED_MODULE_4__.positionNode)(node); } } }); // Move the edge labels to the correct place after layout graph.edges().forEach(function (e) { var edge = graph.edge(e); _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge); var paths = (0,_edges__WEBPACK_IMPORTED_MODULE_6__.insertEdge)(edgePaths, e, edge, _mermaid_graphlib__WEBPACK_IMPORTED_MODULE_5__.clusterDb, diagramtype, graph); (0,_edges__WEBPACK_IMPORTED_MODULE_6__.positionEdgeLabel)(edge, paths); }); graph.nodes().forEach(function (v) { var n = graph.node(v); _logger__WEBPACK_IMPORTED_MODULE_2__.log.info(v, n.type, n.diff); if (n.type === 'group') { diff = n.diff; } }); return { elem: elem, diff: diff }; }; var render = function render(elem, graph, markers, diagramtype, id) { (0,_markers__WEBPACK_IMPORTED_MODULE_8__["default"])(elem, markers, diagramtype, id); (0,_nodes__WEBPACK_IMPORTED_MODULE_4__.clear)(); (0,_edges__WEBPACK_IMPORTED_MODULE_6__.clear)(); (0,_clusters__WEBPACK_IMPORTED_MODULE_7__.clear)(); (0,_mermaid_graphlib__WEBPACK_IMPORTED_MODULE_5__.clear)(); _logger__WEBPACK_IMPORTED_MODULE_2__.log.warn('Graph at first:', graphlib__WEBPACK_IMPORTED_MODULE_1___default().json.write(graph)); (0,_mermaid_graphlib__WEBPACK_IMPORTED_MODULE_5__.adjustClustersAndEdges)(graph); _logger__WEBPACK_IMPORTED_MODULE_2__.log.warn('Graph after:', graphlib__WEBPACK_IMPORTED_MODULE_1___default().json.write(graph)); // log.warn('Graph ever after:', graphlib.json.write(graph.node('A').graph)); recursiveRender(elem, graph, diagramtype); }; // const shapeDefinitions = {}; // export const addShape = ({ shapeType: fun }) => { // shapeDefinitions[shapeType] = fun; // }; // const arrowDefinitions = {}; // export const addArrow = ({ arrowType: fun }) => { // arrowDefinitions[arrowType] = fun; // }; /***/ }), /***/ "./src/dagre-wrapper/intersect/index.js": /*!**********************************************!*\ !*** ./src/dagre-wrapper/intersect/index.js ***! \**********************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var _intersect_node_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./intersect-node.js */ "./src/dagre-wrapper/intersect/intersect-node.js"); /* harmony import */ var _intersect_node_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_intersect_node_js__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _intersect_circle_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./intersect-circle.js */ "./src/dagre-wrapper/intersect/intersect-circle.js"); /* harmony import */ var _intersect_ellipse_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./intersect-ellipse.js */ "./src/dagre-wrapper/intersect/intersect-ellipse.js"); /* harmony import */ var _intersect_polygon_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./intersect-polygon.js */ "./src/dagre-wrapper/intersect/intersect-polygon.js"); /* harmony import */ var _intersect_rect_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./intersect-rect.js */ "./src/dagre-wrapper/intersect/intersect-rect.js"); /* * Borrowed with love from from dagrge-d3. Many thanks to cpettitt! */ /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({ node: (_intersect_node_js__WEBPACK_IMPORTED_MODULE_0___default()), circle: _intersect_circle_js__WEBPACK_IMPORTED_MODULE_1__["default"], ellipse: _intersect_ellipse_js__WEBPACK_IMPORTED_MODULE_2__["default"], polygon: _intersect_polygon_js__WEBPACK_IMPORTED_MODULE_3__["default"], rect: _intersect_rect_js__WEBPACK_IMPORTED_MODULE_4__["default"] }); /***/ }), /***/ "./src/dagre-wrapper/intersect/intersect-circle.js": /*!*********************************************************!*\ !*** ./src/dagre-wrapper/intersect/intersect-circle.js ***! \*********************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var _intersect_ellipse__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./intersect-ellipse */ "./src/dagre-wrapper/intersect/intersect-ellipse.js"); /** * @param node * @param rx * @param point */ function intersectCircle(node, rx, point) { return (0,_intersect_ellipse__WEBPACK_IMPORTED_MODULE_0__["default"])(node, rx, rx, point); } /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (intersectCircle); /***/ }), /***/ "./src/dagre-wrapper/intersect/intersect-ellipse.js": /*!**********************************************************!*\ !*** ./src/dagre-wrapper/intersect/intersect-ellipse.js ***! \**********************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /** * @param node * @param rx * @param ry * @param point */ function intersectEllipse(node, rx, ry, point) { // Formulae from: http://mathworld.wolfram.com/Ellipse-LineIntersection.html var cx = node.x; var cy = node.y; var px = cx - point.x; var py = cy - point.y; var det = Math.sqrt(rx * rx * py * py + ry * ry * px * px); var dx = Math.abs(rx * ry * px / det); if (point.x < cx) { dx = -dx; } var dy = Math.abs(rx * ry * py / det); if (point.y < cy) { dy = -dy; } return { x: cx + dx, y: cy + dy }; } /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (intersectEllipse); /***/ }), /***/ "./src/dagre-wrapper/intersect/intersect-line.js": /*!*******************************************************!*\ !*** ./src/dagre-wrapper/intersect/intersect-line.js ***! \*******************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /** * Returns the point at which two lines, p and q, intersect or returns undefined if they do not intersect. * * @param p1 * @param p2 * @param q1 * @param q2 */ function intersectLine(p1, p2, q1, q2) { // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994, // p7 and p473. var a1, a2, b1, b2, c1, c2; var r1, r2, r3, r4; var denom, offset, num; var x, y; // Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x + // b1 y + c1 = 0. a1 = p2.y - p1.y; b1 = p1.x - p2.x; c1 = p2.x * p1.y - p1.x * p2.y; // Compute r3 and r4. r3 = a1 * q1.x + b1 * q1.y + c1; r4 = a1 * q2.x + b1 * q2.y + c1; // Check signs of r3 and r4. If both point 3 and point 4 lie on // same side of line 1, the line segments do not intersect. if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) { return; } // Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0 a2 = q2.y - q1.y; b2 = q1.x - q2.x; c2 = q2.x * q1.y - q1.x * q2.y; // Compute r1 and r2 r1 = a2 * p1.x + b2 * p1.y + c2; r2 = a2 * p2.x + b2 * p2.y + c2; // Check signs of r1 and r2. If both point 1 and point 2 lie // on same side of second line segment, the line segments do // not intersect. if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) { return; } // Line segments intersect: compute intersection point. denom = a1 * b2 - a2 * b1; if (denom === 0) { return; } offset = Math.abs(denom / 2); // The denom/2 is to get rounding instead of truncating. It // is added or subtracted to the numerator, depending upon the // sign of the numerator. num = b1 * c2 - b2 * c1; x = num < 0 ? (num - offset) / denom : (num + offset) / denom; num = a2 * c1 - a1 * c2; y = num < 0 ? (num - offset) / denom : (num + offset) / denom; return { x: x, y: y }; } /** * @param r1 * @param r2 */ function sameSign(r1, r2) { return r1 * r2 > 0; } /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (intersectLine); /***/ }), /***/ "./src/dagre-wrapper/intersect/intersect-node.js": /*!*******************************************************!*\ !*** ./src/dagre-wrapper/intersect/intersect-node.js ***! \*******************************************************/ /***/ ((module) => { module.exports = intersectNode; /** * @param node * @param point */ function intersectNode(node, point) { // console.info('Intersect Node'); return node.intersect(point); } /***/ }), /***/ "./src/dagre-wrapper/intersect/intersect-polygon.js": /*!**********************************************************!*\ !*** ./src/dagre-wrapper/intersect/intersect-polygon.js ***! \**********************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var _intersect_line__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./intersect-line */ "./src/dagre-wrapper/intersect/intersect-line.js"); /* eslint "no-console": off */ /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (intersectPolygon); /** * Returns the point ({x, y}) at which the point argument intersects with the node argument assuming * that it has the shape specified by polygon. * * @param node * @param polyPoints * @param point */ function intersectPolygon(node, polyPoints, point) { var x1 = node.x; var y1 = node.y; var intersections = []; var minX = Number.POSITIVE_INFINITY; var minY = Number.POSITIVE_INFINITY; if (typeof polyPoints.forEach === 'function') { polyPoints.forEach(function (entry) { minX = Math.min(minX, entry.x); minY = Math.min(minY, entry.y); }); } else { minX = Math.min(minX, polyPoints.x); minY = Math.min(minY, polyPoints.y); } var left = x1 - node.width / 2 - minX; var top = y1 - node.height / 2 - minY; for (var i = 0; i < polyPoints.length; i++) { var p1 = polyPoints[i]; var p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0]; var intersect = (0,_intersect_line__WEBPACK_IMPORTED_MODULE_0__["default"])(node, point, { x: left + p1.x, y: top + p1.y }, { x: left + p2.x, y: top + p2.y }); if (intersect) { intersections.push(intersect); } } if (!intersections.length) { // console.log('NO INTERSECTION FOUND, RETURN NODE CENTER', node); return node; } if (intersections.length > 1) { // More intersections, find the one nearest to edge end point intersections.sort(function (p, q) { var pdx = p.x - point.x; var pdy = p.y - point.y; var distp = Math.sqrt(pdx * pdx + pdy * pdy); var qdx = q.x - point.x; var qdy = q.y - point.y; var distq = Math.sqrt(qdx * qdx + qdy * qdy); return distp < distq ? -1 : distp === distq ? 0 : 1; }); } return intersections[0]; } /***/ }), /***/ "./src/dagre-wrapper/intersect/intersect-rect.js": /*!*******************************************************!*\ !*** ./src/dagre-wrapper/intersect/intersect-rect.js ***! \*******************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); var intersectRect = function intersectRect(node, point) { var x = node.x; var y = node.y; // Rectangle intersection algorithm from: // http://math.stackexchange.com/questions/108113/find-edge-between-two-boxes var dx = point.x - x; var dy = point.y - y; var w = node.width / 2; var h = node.height / 2; var sx, sy; if (Math.abs(dy) * w > Math.abs(dx) * h) { // Intersection is top or bottom of rect. if (dy < 0) { h = -h; } sx = dy === 0 ? 0 : h * dx / dy; sy = h; } else { // Intersection is left or right of rect. if (dx < 0) { w = -w; } sx = w; sy = dx === 0 ? 0 : w * dy / dx; } return { x: x + sx, y: y + sy }; }; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (intersectRect); /***/ }), /***/ "./src/dagre-wrapper/markers.js": /*!**************************************!*\ !*** ./src/dagre-wrapper/markers.js ***! \**************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../logger */ "./src/logger.js"); /** Setup arrow head and define the marker. The result is appended to the svg. */ // Only add the number of markers that the diagram needs var insertMarkers = function insertMarkers(elem, markerArray, type, id) { markerArray.forEach(function (markerName) { markers[markerName](elem, type, id); }); }; var extension = function extension(elem, type, id) { _logger__WEBPACK_IMPORTED_MODULE_0__.log.trace('Making markers for ', id); elem.append('defs').append('marker').attr('id', type + '-extensionStart').attr('class', 'marker extension ' + type).attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 1,7 L18,13 V 1 Z'); elem.append('defs').append('marker').attr('id', type + '-extensionEnd').attr('class', 'marker extension ' + type).attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 1,1 V 13 L18,7 Z'); // this is actual shape for arrowhead }; var composition = function composition(elem, type) { elem.append('defs').append('marker').attr('id', type + '-compositionStart').attr('class', 'marker composition ' + type).attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z'); elem.append('defs').append('marker').attr('id', type + '-compositionEnd').attr('class', 'marker composition ' + type).attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z'); }; var aggregation = function aggregation(elem, type) { elem.append('defs').append('marker').attr('id', type + '-aggregationStart').attr('class', 'marker aggregation ' + type).attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z'); elem.append('defs').append('marker').attr('id', type + '-aggregationEnd').attr('class', 'marker aggregation ' + type).attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z'); }; var dependency = function dependency(elem, type) { elem.append('defs').append('marker').attr('id', type + '-dependencyStart').attr('class', 'marker dependency ' + type).attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z'); elem.append('defs').append('marker').attr('id', type + '-dependencyEnd').attr('class', 'marker dependency ' + type).attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z'); }; var point = function point(elem, type) { elem.append('marker').attr('id', type + '-pointEnd').attr('class', 'marker ' + type).attr('viewBox', '0 0 10 10').attr('refX', 9).attr('refY', 5).attr('markerUnits', 'userSpaceOnUse').attr('markerWidth', 12).attr('markerHeight', 12).attr('orient', 'auto').append('path').attr('d', 'M 0 0 L 10 5 L 0 10 z').attr('class', 'arrowMarkerPath').style('stroke-width', 1).style('stroke-dasharray', '1,0'); elem.append('marker').attr('id', type + '-pointStart').attr('class', 'marker ' + type).attr('viewBox', '0 0 10 10').attr('refX', 0).attr('refY', 5).attr('markerUnits', 'userSpaceOnUse').attr('markerWidth', 12).attr('markerHeight', 12).attr('orient', 'auto').append('path').attr('d', 'M 0 5 L 10 10 L 10 0 z').attr('class', 'arrowMarkerPath').style('stroke-width', 1).style('stroke-dasharray', '1,0'); }; var circle = function circle(elem, type) { elem.append('marker').attr('id', type + '-circleEnd').attr('class', 'marker ' + type).attr('viewBox', '0 0 10 10').attr('refX', 11).attr('refY', 5).attr('markerUnits', 'userSpaceOnUse').attr('markerWidth', 11).attr('markerHeight', 11).attr('orient', 'auto').append('circle').attr('cx', '5').attr('cy', '5').attr('r', '5').attr('class', 'arrowMarkerPath').style('stroke-width', 1).style('stroke-dasharray', '1,0'); elem.append('marker').attr('id', type + '-circleStart').attr('class', 'marker ' + type).attr('viewBox', '0 0 10 10').attr('refX', -1).attr('refY', 5).attr('markerUnits', 'userSpaceOnUse').attr('markerWidth', 11).attr('markerHeight', 11).attr('orient', 'auto').append('circle').attr('cx', '5').attr('cy', '5').attr('r', '5').attr('class', 'arrowMarkerPath').style('stroke-width', 1).style('stroke-dasharray', '1,0'); }; var cross = function cross(elem, type) { elem.append('marker').attr('id', type + '-crossEnd').attr('class', 'marker cross ' + type).attr('viewBox', '0 0 11 11').attr('refX', 12).attr('refY', 5.2).attr('markerUnits', 'userSpaceOnUse').attr('markerWidth', 11).attr('markerHeight', 11).attr('orient', 'auto').append('path') // .attr('stroke', 'black') .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9').attr('class', 'arrowMarkerPath').style('stroke-width', 2).style('stroke-dasharray', '1,0'); elem.append('marker').attr('id', type + '-crossStart').attr('class', 'marker cross ' + type).attr('viewBox', '0 0 11 11').attr('refX', -1).attr('refY', 5.2).attr('markerUnits', 'userSpaceOnUse').attr('markerWidth', 11).attr('markerHeight', 11).attr('orient', 'auto').append('path') // .attr('stroke', 'black') .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9').attr('class', 'arrowMarkerPath').style('stroke-width', 2).style('stroke-dasharray', '1,0'); }; var barb = function barb(elem, type) { elem.append('defs').append('marker').attr('id', type + '-barbEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 14).attr('markerUnits', 'strokeWidth').attr('orient', 'auto').append('path').attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z'); }; // TODO rename the class diagram markers to something shape descriptive and semanitc free var markers = { extension: extension, composition: composition, aggregation: aggregation, dependency: dependency, point: point, circle: circle, cross: cross, barb: barb }; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (insertMarkers); /***/ }), /***/ "./src/dagre-wrapper/mermaid-graphlib.js": /*!***********************************************!*\ !*** ./src/dagre-wrapper/mermaid-graphlib.js ***! \***********************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "clusterDb": () => (/* binding */ clusterDb), /* harmony export */ "clear": () => (/* binding */ clear), /* harmony export */ "extractDecendants": () => (/* binding */ extractDecendants), /* harmony export */ "validate": () => (/* binding */ validate), /* harmony export */ "findNonClusterChild": () => (/* binding */ findNonClusterChild), /* harmony export */ "adjustClustersAndEdges": () => (/* binding */ adjustClustersAndEdges), /* harmony export */ "extractor": () => (/* binding */ extractor), /* harmony export */ "sortNodesByHierarchy": () => (/* binding */ sortNodesByHierarchy) /* harmony export */ }); /* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../logger */ "./src/logger.js"); /* harmony import */ var graphlib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! graphlib */ "graphlib"); /* harmony import */ var graphlib__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(graphlib__WEBPACK_IMPORTED_MODULE_0__); /** Decorates with functions required by mermaids dagre-wrapper. */ var clusterDb = {}; var decendants = {}; var parents = {}; var clear = function clear() { decendants = {}; parents = {}; clusterDb = {}; }; var isDecendant = function isDecendant(id, ancenstorId) { // if (id === ancenstorId) return true; _logger__WEBPACK_IMPORTED_MODULE_1__.log.trace('In isDecendant', ancenstorId, ' ', id, ' = ', decendants[ancenstorId].indexOf(id) >= 0); if (decendants[ancenstorId].indexOf(id) >= 0) return true; return false; }; var edgeInCluster = function edgeInCluster(edge, clusterId) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.info('Decendants of ', clusterId, ' is ', decendants[clusterId]); _logger__WEBPACK_IMPORTED_MODULE_1__.log.info('Edge is ', edge); // Edges to/from the cluster is not in the cluster, they are in the parent if (edge.v === clusterId) return false; if (edge.w === clusterId) return false; if (!decendants[clusterId]) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.debug('Tilt, ', clusterId, ',not in decendants'); return false; } _logger__WEBPACK_IMPORTED_MODULE_1__.log.info('Here '); if (decendants[clusterId].indexOf(edge.v) >= 0) return true; if (isDecendant(edge.v, clusterId)) return true; if (isDecendant(edge.w, clusterId)) return true; if (decendants[clusterId].indexOf(edge.w) >= 0) return true; return false; }; var copy = function copy(clusterId, graph, newGraph, rootId) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.warn('Copying children of ', clusterId, 'root', rootId, 'data', graph.node(clusterId), rootId); var nodes = graph.children(clusterId) || []; // Include cluster node if it is not the root if (clusterId !== rootId) { nodes.push(clusterId); } _logger__WEBPACK_IMPORTED_MODULE_1__.log.warn('Copying (nodes) clusterId', clusterId, 'nodes', nodes); nodes.forEach(function (node) { if (graph.children(node).length > 0) { copy(node, graph, newGraph, rootId); } else { var data = graph.node(node); _logger__WEBPACK_IMPORTED_MODULE_1__.log.info('cp ', node, ' to ', rootId, ' with parent ', clusterId); //,node, data, ' parent is ', clusterId); newGraph.setNode(node, data); if (rootId !== graph.parent(node)) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.warn('Setting parent', node, graph.parent(node)); newGraph.setParent(node, graph.parent(node)); } if (clusterId !== rootId && node !== clusterId) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.debug('Setting parent', node, clusterId); newGraph.setParent(node, clusterId); } else { _logger__WEBPACK_IMPORTED_MODULE_1__.log.info('In copy ', clusterId, 'root', rootId, 'data', graph.node(clusterId), rootId); _logger__WEBPACK_IMPORTED_MODULE_1__.log.debug('Not Setting parent for node=', node, 'cluster!==rootId', clusterId !== rootId, 'node!==clusterId', node !== clusterId); } var edges = graph.edges(node); _logger__WEBPACK_IMPORTED_MODULE_1__.log.debug('Copying Edges', edges); edges.forEach(function (edge) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.info('Edge', edge); var data = graph.edge(edge.v, edge.w, edge.name); _logger__WEBPACK_IMPORTED_MODULE_1__.log.info('Edge data', data, rootId); try { // Do not copy edges in and out of the root cluster, they belong to the parent graph if (edgeInCluster(edge, rootId)) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.info('Copying as ', edge.v, edge.w, data, edge.name); newGraph.setEdge(edge.v, edge.w, data, edge.name); _logger__WEBPACK_IMPORTED_MODULE_1__.log.info('newGraph edges ', newGraph.edges(), newGraph.edge(newGraph.edges()[0])); } else { _logger__WEBPACK_IMPORTED_MODULE_1__.log.info('Skipping copy of edge ', edge.v, '-->', edge.w, ' rootId: ', rootId, ' clusterId:', clusterId); } } catch (e) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.error(e); } }); } _logger__WEBPACK_IMPORTED_MODULE_1__.log.debug('Removing node', node); graph.removeNode(node); }); }; var extractDecendants = function extractDecendants(id, graph) { // log.debug('Extracting ', id); var children = graph.children(id); var res = [].concat(children); for (var i = 0; i < children.length; i++) { parents[children[i]] = id; res = res.concat(extractDecendants(children[i], graph)); } return res; }; /** * Validates the graph, checking that all parent child relation points to existing nodes and that * edges between nodes also ia correct. When not correct the function logs the discrepancies. * * @param graph */ var validate = function validate(graph) { var edges = graph.edges(); _logger__WEBPACK_IMPORTED_MODULE_1__.log.trace('Edges: ', edges); for (var i = 0; i < edges.length; i++) { if (graph.children(edges[i].v).length > 0) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.trace('The node ', edges[i].v, ' is part of and edge even though it has children'); return false; } if (graph.children(edges[i].w).length > 0) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.trace('The node ', edges[i].w, ' is part of and edge even though it has children'); return false; } } return true; }; /** * Finds a child that is not a cluster. When faking a edge between a node and a cluster. * * @param {Finds a} id * @param {any} graph */ var findNonClusterChild = function findNonClusterChild(id, graph) { // const node = graph.node(id); _logger__WEBPACK_IMPORTED_MODULE_1__.log.trace('Searching', id); // const children = graph.children(id).reverse(); var children = graph.children(id); //.reverse(); _logger__WEBPACK_IMPORTED_MODULE_1__.log.trace('Searching children of id ', id, children); if (children.length < 1) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.trace('This is a valid node', id); return id; } for (var i = 0; i < children.length; i++) { var _id = findNonClusterChild(children[i], graph); if (_id) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.trace('Found replacement for', id, ' => ', _id); return _id; } } }; var getAnchorId = function getAnchorId(id) { if (!clusterDb[id]) { return id; } // If the cluster has no external connections if (!clusterDb[id].externalConnections) { return id; } // Return the replacement node if (clusterDb[id]) { return clusterDb[id].id; } return id; }; var adjustClustersAndEdges = function adjustClustersAndEdges(graph, depth) { if (!graph || depth > 10) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.debug('Opting out, no graph '); return; } else { _logger__WEBPACK_IMPORTED_MODULE_1__.log.debug('Opting in, graph '); } // Go through the nodes and for each cluster found, save a replacment node, this can be used when // faking a link to a cluster graph.nodes().forEach(function (id) { var children = graph.children(id); if (children.length > 0) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.warn('Cluster identified', id, ' Replacement id in edges: ', findNonClusterChild(id, graph)); decendants[id] = extractDecendants(id, graph); clusterDb[id] = { id: findNonClusterChild(id, graph), clusterData: graph.node(id) }; } }); // Check incoming and outgoing edges for each cluster graph.nodes().forEach(function (id) { var children = graph.children(id); var edges = graph.edges(); if (children.length > 0) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.debug('Cluster identified', id, decendants); edges.forEach(function (edge) { // log.debug('Edge, decendants: ', edge, decendants[id]); // Check if any edge leaves the cluster (not the actual cluster, thats a link from the box) if (edge.v !== id && edge.w !== id) { // Any edge where either the one of the nodes is decending to the cluster but not the other // if (decendants[id].indexOf(edge.v) < 0 && decendants[id].indexOf(edge.w) < 0) { var d1 = isDecendant(edge.v, id); var d2 = isDecendant(edge.w, id); // d1 xor d2 - if either d1 is true and d2 is false or the other way around if (d1 ^ d2) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.warn('Edge: ', edge, ' leaves cluster ', id); _logger__WEBPACK_IMPORTED_MODULE_1__.log.warn('Decendants of XXX ', id, ': ', decendants[id]); clusterDb[id].externalConnections = true; } } }); } else { _logger__WEBPACK_IMPORTED_MODULE_1__.log.debug('Not a cluster ', id, decendants); } }); // For clusters with incoming and/or outgoing edges translate those edges to a real node // in the cluster inorder to fake the edge graph.edges().forEach(function (e) { var edge = graph.edge(e); _logger__WEBPACK_IMPORTED_MODULE_1__.log.warn('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e)); _logger__WEBPACK_IMPORTED_MODULE_1__.log.warn('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e))); var v = e.v; var w = e.w; // Check if link is either from or to a cluster _logger__WEBPACK_IMPORTED_MODULE_1__.log.warn('Fix XXX', clusterDb, 'ids:', e.v, e.w, 'Translateing: ', clusterDb[e.v], ' --- ', clusterDb[e.w]); if (clusterDb[e.v] || clusterDb[e.w]) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.warn('Fixing and trixing - removing XXX', e.v, e.w, e.name); v = getAnchorId(e.v); w = getAnchorId(e.w); graph.removeEdge(e.v, e.w, e.name); if (v !== e.v) edge.fromCluster = e.v; if (w !== e.w) edge.toCluster = e.w; _logger__WEBPACK_IMPORTED_MODULE_1__.log.warn('Fix Replacing with XXX', v, w, e.name); graph.setEdge(v, w, edge, e.name); } }); _logger__WEBPACK_IMPORTED_MODULE_1__.log.warn('Adjusted Graph', graphlib__WEBPACK_IMPORTED_MODULE_0___default().json.write(graph)); extractor(graph, 0); _logger__WEBPACK_IMPORTED_MODULE_1__.log.trace(clusterDb); // Remove references to extracted cluster // graph.edges().forEach(edge => { // if (isDecendant(edge.v, clusterId) || isDecendant(edge.w, clusterId)) { // graph.removeEdge(edge); // } // }); }; var extractor = function extractor(graph, depth) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.warn('extractor - ', depth, graphlib__WEBPACK_IMPORTED_MODULE_0___default().json.write(graph), graph.children('D')); if (depth > 10) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.error('Bailing out'); return; } // For clusters without incoming and/or outgoing edges, create a new cluster-node // containing the nodes and edges in the custer in a new graph // for (let i = 0;) var nodes = graph.nodes(); var hasChildren = false; for (var i = 0; i < nodes.length; i++) { var node = nodes[i]; var children = graph.children(node); hasChildren = hasChildren || children.length > 0; } if (!hasChildren) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.debug('Done, no node has children', graph.nodes()); return; } // const clusters = Object.keys(clusterDb); // clusters.forEach(clusterId => { _logger__WEBPACK_IMPORTED_MODULE_1__.log.debug('Nodes = ', nodes, depth); for (var _i = 0; _i < nodes.length; _i++) { var _node = nodes[_i]; _logger__WEBPACK_IMPORTED_MODULE_1__.log.debug('Extracting node', _node, clusterDb, clusterDb[_node] && !clusterDb[_node].externalConnections, !graph.parent(_node), graph.node(_node), graph.children('D'), ' Depth ', depth); // Note that the node might have been removed after the Object.keys call so better check // that it still is in the game if (!clusterDb[_node]) { // Skip if the node is not a cluster _logger__WEBPACK_IMPORTED_MODULE_1__.log.debug('Not a cluster', _node, depth); // break; } else if (!clusterDb[_node].externalConnections && // !graph.parent(node) && graph.children(_node) && graph.children(_node).length > 0) { _logger__WEBPACK_IMPORTED_MODULE_1__.log.warn('Cluster without external connections, without a parent and with children', _node, depth); var graphSettings = graph.graph(); var dir = graphSettings.rankdir === 'TB' ? 'LR' : 'TB'; if (clusterDb[_node]) { if (clusterDb[_node].clusterData && clusterDb[_node].clusterData.dir) { dir = clusterDb[_node].clusterData.dir; _logger__WEBPACK_IMPORTED_MODULE_1__.log.warn('Fixing dir', clusterDb[_node].clusterData.dir, dir); } } var clusterGraph = new (graphlib__WEBPACK_IMPORTED_MODULE_0___default().Graph)({ multigraph: true, compound: true }).setGraph({ rankdir: dir, // Todo: set proper spacing nodesep: 50, ranksep: 50, marginx: 8, marginy: 8 }).setDefaultEdgeLabel(function () { return {}; }); _logger__WEBPACK_IMPORTED_MODULE_1__.log.warn('Old graph before copy', graphlib__WEBPACK_IMPORTED_MODULE_0___default().json.write(graph)); copy(_node, graph, clusterGraph, _node); graph.setNode(_node, { clusterNode: true, id: _node, clusterData: clusterDb[_node].clusterData, labelText: clusterDb[_node].labelText, graph: clusterGraph }); _logger__WEBPACK_IMPORTED_MODULE_1__.log.warn('New graph after copy node: (', _node, ')', graphlib__WEBPACK_IMPORTED_MODULE_0___default().json.write(clusterGraph)); _logger__WEBPACK_IMPORTED_MODULE_1__.log.debug('Old graph after copy', graphlib__WEBPACK_IMPORTED_MODULE_0___default().json.write(graph)); } else { _logger__WEBPACK_IMPORTED_MODULE_1__.log.warn('Cluster ** ', _node, ' **not meeting the criteria !externalConnections:', !clusterDb[_node].externalConnections, ' no parent: ', !graph.parent(_node), ' children ', graph.children(_node) && graph.children(_node).length > 0, graph.children('D'), depth); _logger__WEBPACK_IMPORTED_MODULE_1__.log.debug(clusterDb); } } nodes = graph.nodes(); _logger__WEBPACK_IMPORTED_MODULE_1__.log.warn('New list of nodes', nodes); for (var _i2 = 0; _i2 < nodes.length; _i2++) { var _node2 = nodes[_i2]; var data = graph.node(_node2); _logger__WEBPACK_IMPORTED_MODULE_1__.log.warn(' Now next level', _node2, data); if (data.clusterNode) { extractor(data.graph, depth + 1); } } }; var sorter = function sorter(graph, nodes) { if (nodes.length === 0) return []; var result = Object.assign(nodes); nodes.forEach(function (node) { var children = graph.children(node); var sorted = sorter(graph, children); result = result.concat(sorted); }); return result; }; var sortNodesByHierarchy = function sortNodesByHierarchy(graph) { return sorter(graph, graph.children()); }; /***/ }), /***/ "./src/dagre-wrapper/nodes.js": /*!************************************!*\ !*** ./src/dagre-wrapper/nodes.js ***! \************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "insertNode": () => (/* binding */ insertNode), /* harmony export */ "setNodeElem": () => (/* binding */ setNodeElem), /* harmony export */ "clear": () => (/* binding */ clear), /* harmony export */ "positionNode": () => (/* binding */ positionNode) /* harmony export */ }); /* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! d3 */ "d3"); /* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(d3__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../logger */ "./src/logger.js"); /* harmony import */ var _shapes_util__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./shapes/util */ "./src/dagre-wrapper/shapes/util.js"); /* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../config */ "./src/config.js"); /* harmony import */ var _intersect_index_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./intersect/index.js */ "./src/dagre-wrapper/intersect/index.js"); /* harmony import */ var _createLabel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./createLabel */ "./src/dagre-wrapper/createLabel.js"); /* harmony import */ var _shapes_note__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./shapes/note */ "./src/dagre-wrapper/shapes/note.js"); /* harmony import */ var _diagrams_class_svgDraw__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../diagrams/class/svgDraw */ "./src/diagrams/class/svgDraw.js"); /* harmony import */ var _diagrams_common_common__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../diagrams/common/common */ "./src/diagrams/common/common.js"); function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } // eslint-disable-line var question = function question(parent, node) { var _labelHelper = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.labelHelper)(parent, node, undefined, true), shapeSvg = _labelHelper.shapeSvg, bbox = _labelHelper.bbox; var w = bbox.width + node.padding; var h = bbox.height + node.padding; var s = w + h; var points = [{ x: s / 2, y: 0 }, { x: s, y: -s / 2 }, { x: s / 2, y: -s }, { x: 0, y: -s / 2 }]; _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('Question main (Circle)'); var questionElem = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.insertPolygonShape)(shapeSvg, s, s, points); questionElem.attr('style', node.style); (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.updateNodeBounds)(node, questionElem); node.intersect = function (point) { _logger__WEBPACK_IMPORTED_MODULE_2__.log.warn('Intersect called'); return _intersect_index_js__WEBPACK_IMPORTED_MODULE_3__["default"].polygon(node, points, point); }; return shapeSvg; }; var choice = function choice(parent, node) { var shapeSvg = parent.insert('g').attr('class', 'node default').attr('id', node.domId || node.id); var s = 28; var points = [{ x: 0, y: s / 2 }, { x: s / 2, y: 0 }, { x: 0, y: -s / 2 }, { x: -s / 2, y: 0 }]; var choice = shapeSvg.insert('polygon', ':first-child').attr('points', points.map(function (d) { return d.x + ',' + d.y; }).join(' ')); // center the circle around its coordinate choice.attr('class', 'state-start').attr('r', 7).attr('width', 28).attr('height', 28); node.width = 28; node.height = 28; node.intersect = function (point) { return _intersect_index_js__WEBPACK_IMPORTED_MODULE_3__["default"].circle(node, 14, point); }; return shapeSvg; }; var hexagon = function hexagon(parent, node) { var _labelHelper2 = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.labelHelper)(parent, node, undefined, true), shapeSvg = _labelHelper2.shapeSvg, bbox = _labelHelper2.bbox; var f = 4; var h = bbox.height + node.padding; var m = h / f; var w = bbox.width + 2 * m + node.padding; var points = [{ x: m, y: 0 }, { x: w - m, y: 0 }, { x: w, y: -h / 2 }, { x: w - m, y: -h }, { x: m, y: -h }, { x: 0, y: -h / 2 }]; var hex = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.insertPolygonShape)(shapeSvg, w, h, points); hex.attr('style', node.style); (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.updateNodeBounds)(node, hex); node.intersect = function (point) { return _intersect_index_js__WEBPACK_IMPORTED_MODULE_3__["default"].polygon(node, points, point); }; return shapeSvg; }; var rect_left_inv_arrow = function rect_left_inv_arrow(parent, node) { var _labelHelper3 = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.labelHelper)(parent, node, undefined, true), shapeSvg = _labelHelper3.shapeSvg, bbox = _labelHelper3.bbox; var w = bbox.width + node.padding; var h = bbox.height + node.padding; var points = [{ x: -h / 2, y: 0 }, { x: w, y: 0 }, { x: w, y: -h }, { x: -h / 2, y: -h }, { x: 0, y: -h / 2 }]; var el = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.insertPolygonShape)(shapeSvg, w, h, points); el.attr('style', node.style); node.width = w + h; node.height = h; node.intersect = function (point) { return _intersect_index_js__WEBPACK_IMPORTED_MODULE_3__["default"].polygon(node, points, point); }; return shapeSvg; }; var lean_right = function lean_right(parent, node) { var _labelHelper4 = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.labelHelper)(parent, node, undefined, true), shapeSvg = _labelHelper4.shapeSvg, bbox = _labelHelper4.bbox; var w = bbox.width + node.padding; var h = bbox.height + node.padding; var points = [{ x: -2 * h / 6, y: 0 }, { x: w - h / 6, y: 0 }, { x: w + 2 * h / 6, y: -h }, { x: h / 6, y: -h }]; var el = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.insertPolygonShape)(shapeSvg, w, h, points); el.attr('style', node.style); (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.updateNodeBounds)(node, el); node.intersect = function (point) { return _intersect_index_js__WEBPACK_IMPORTED_MODULE_3__["default"].polygon(node, points, point); }; return shapeSvg; }; var lean_left = function lean_left(parent, node) { var _labelHelper5 = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.labelHelper)(parent, node, undefined, true), shapeSvg = _labelHelper5.shapeSvg, bbox = _labelHelper5.bbox; var w = bbox.width + node.padding; var h = bbox.height + node.padding; var points = [{ x: 2 * h / 6, y: 0 }, { x: w + h / 6, y: 0 }, { x: w - 2 * h / 6, y: -h }, { x: -h / 6, y: -h }]; var el = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.insertPolygonShape)(shapeSvg, w, h, points); el.attr('style', node.style); (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.updateNodeBounds)(node, el); node.intersect = function (point) { return _intersect_index_js__WEBPACK_IMPORTED_MODULE_3__["default"].polygon(node, points, point); }; return shapeSvg; }; var trapezoid = function trapezoid(parent, node) { var _labelHelper6 = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.labelHelper)(parent, node, undefined, true), shapeSvg = _labelHelper6.shapeSvg, bbox = _labelHelper6.bbox; var w = bbox.width + node.padding; var h = bbox.height + node.padding; var points = [{ x: -2 * h / 6, y: 0 }, { x: w + 2 * h / 6, y: 0 }, { x: w - h / 6, y: -h }, { x: h / 6, y: -h }]; var el = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.insertPolygonShape)(shapeSvg, w, h, points); el.attr('style', node.style); (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.updateNodeBounds)(node, el); node.intersect = function (point) { return _intersect_index_js__WEBPACK_IMPORTED_MODULE_3__["default"].polygon(node, points, point); }; return shapeSvg; }; var inv_trapezoid = function inv_trapezoid(parent, node) { var _labelHelper7 = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.labelHelper)(parent, node, undefined, true), shapeSvg = _labelHelper7.shapeSvg, bbox = _labelHelper7.bbox; var w = bbox.width + node.padding; var h = bbox.height + node.padding; var points = [{ x: h / 6, y: 0 }, { x: w - h / 6, y: 0 }, { x: w + 2 * h / 6, y: -h }, { x: -2 * h / 6, y: -h }]; var el = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.insertPolygonShape)(shapeSvg, w, h, points); el.attr('style', node.style); (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.updateNodeBounds)(node, el); node.intersect = function (point) { return _intersect_index_js__WEBPACK_IMPORTED_MODULE_3__["default"].polygon(node, points, point); }; return shapeSvg; }; var rect_right_inv_arrow = function rect_right_inv_arrow(parent, node) { var _labelHelper8 = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.labelHelper)(parent, node, undefined, true), shapeSvg = _labelHelper8.shapeSvg, bbox = _labelHelper8.bbox; var w = bbox.width + node.padding; var h = bbox.height + node.padding; var points = [{ x: 0, y: 0 }, { x: w + h / 2, y: 0 }, { x: w, y: -h / 2 }, { x: w + h / 2, y: -h }, { x: 0, y: -h }]; var el = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.insertPolygonShape)(shapeSvg, w, h, points); el.attr('style', node.style); (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.updateNodeBounds)(node, el); node.intersect = function (point) { return _intersect_index_js__WEBPACK_IMPORTED_MODULE_3__["default"].polygon(node, points, point); }; return shapeSvg; }; var cylinder = function cylinder(parent, node) { var _labelHelper9 = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.labelHelper)(parent, node, undefined, true), shapeSvg = _labelHelper9.shapeSvg, bbox = _labelHelper9.bbox; var w = bbox.width + node.padding; var rx = w / 2; var ry = rx / (2.5 + w / 50); var h = bbox.height + ry + node.padding; var shape = 'M 0,' + ry + ' a ' + rx + ',' + ry + ' 0,0,0 ' + w + ' 0 a ' + rx + ',' + ry + ' 0,0,0 ' + -w + ' 0 l 0,' + h + ' a ' + rx + ',' + ry + ' 0,0,0 ' + w + ' 0 l 0,' + -h; var el = shapeSvg.attr('label-offset-y', ry).insert('path', ':first-child').attr('style', node.style).attr('d', shape).attr('transform', 'translate(' + -w / 2 + ',' + -(h / 2 + ry) + ')'); (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.updateNodeBounds)(node, el); node.intersect = function (point) { var pos = _intersect_index_js__WEBPACK_IMPORTED_MODULE_3__["default"].rect(node, point); var x = pos.x - node.x; if (rx != 0 && (Math.abs(x) < node.width / 2 || Math.abs(x) == node.width / 2 && Math.abs(pos.y - node.y) > node.height / 2 - ry)) { // ellipsis equation: x*x / a*a + y*y / b*b = 1 // solve for y to get adjustion value for pos.y var y = ry * ry * (1 - x * x / (rx * rx)); if (y != 0) y = Math.sqrt(y); y = ry - y; if (point.y - node.y > 0) y = -y; pos.y += y; } return pos; }; return shapeSvg; }; var rect = function rect(parent, node) { var _labelHelper10 = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.labelHelper)(parent, node, 'node ' + node.classes, true), shapeSvg = _labelHelper10.shapeSvg, bbox = _labelHelper10.bbox, halfPadding = _labelHelper10.halfPadding; _logger__WEBPACK_IMPORTED_MODULE_2__.log.trace('Classes = ', node.classes); // add the rect var rect = shapeSvg.insert('rect', ':first-child'); var totalWidth = bbox.width + node.padding; var totalHeight = bbox.height + node.padding; rect.attr('class', 'basic label-container').attr('style', node.style).attr('rx', node.rx).attr('ry', node.ry).attr('x', -bbox.width / 2 - halfPadding).attr('y', -bbox.height / 2 - halfPadding).attr('width', totalWidth).attr('height', totalHeight); if (node.props) { var propKeys = new Set(Object.keys(node.props)); if (node.props.borders) { applyNodePropertyBorders(rect, node.props.borders, totalWidth, totalHeight); propKeys.delete('borders'); } propKeys.forEach(function (propKey) { _logger__WEBPACK_IMPORTED_MODULE_2__.log.warn("Unknown node property ".concat(propKey)); }); } (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.updateNodeBounds)(node, rect); node.intersect = function (point) { return _intersect_index_js__WEBPACK_IMPORTED_MODULE_3__["default"].rect(node, point); }; return shapeSvg; }; function applyNodePropertyBorders(rect, borders, totalWidth, totalHeight) { var strokeDashArray = []; var addBorder = function addBorder(length) { strokeDashArray.push(length); strokeDashArray.push(0); }; var skipBorder = function skipBorder(length) { strokeDashArray.push(0); strokeDashArray.push(length); }; if (borders.includes('t')) { _logger__WEBPACK_IMPORTED_MODULE_2__.log.debug('add top border'); addBorder(totalWidth); } else { skipBorder(totalWidth); } if (borders.includes('r')) { _logger__WEBPACK_IMPORTED_MODULE_2__.log.debug('add right border'); addBorder(totalHeight); } else { skipBorder(totalHeight); } if (borders.includes('b')) { _logger__WEBPACK_IMPORTED_MODULE_2__.log.debug('add bottom border'); addBorder(totalWidth); } else { skipBorder(totalWidth); } if (borders.includes('l')) { _logger__WEBPACK_IMPORTED_MODULE_2__.log.debug('add left border'); addBorder(totalHeight); } else { skipBorder(totalHeight); } rect.attr('stroke-dasharray', strokeDashArray.join(' ')); } var rectWithTitle = function rectWithTitle(parent, node) { // const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes); var classes; if (!node.classes) { classes = 'node default'; } else { classes = 'node ' + node.classes; } // Add outer g element var shapeSvg = parent.insert('g').attr('class', classes).attr('id', node.domId || node.id); // Create the title label and insert it after the rect var rect = shapeSvg.insert('rect', ':first-child'); // const innerRect = shapeSvg.insert('rect'); var innerLine = shapeSvg.insert('line'); var label = shapeSvg.insert('g').attr('class', 'label'); var text2 = node.labelText.flat ? node.labelText.flat() : node.labelText; // const text2 = typeof text2prim === 'object' ? text2prim[0] : text2prim; var title = ''; if (_typeof(text2) === 'object') { title = text2[0]; } else { title = text2; } _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('Label text abc79', title, text2, _typeof(text2) === 'object'); var text = label.node().appendChild((0,_createLabel__WEBPACK_IMPORTED_MODULE_4__["default"])(title, node.labelStyle, true, true)); var bbox = { width: 0, height: 0 }; if ((0,_diagrams_common_common__WEBPACK_IMPORTED_MODULE_5__.evaluate)((0,_config__WEBPACK_IMPORTED_MODULE_6__.getConfig)().flowchart.htmlLabels)) { var div = text.children[0]; var dv = (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)(text); bbox = div.getBoundingClientRect(); dv.attr('width', bbox.width); dv.attr('height', bbox.height); } _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('Text 2', text2); var textRows = text2.slice(1, text2.length); var titleBox = text.getBBox(); var descr = label.node().appendChild((0,_createLabel__WEBPACK_IMPORTED_MODULE_4__["default"])(textRows.join ? textRows.join('
') : textRows, node.labelStyle, true, true)); if ((0,_diagrams_common_common__WEBPACK_IMPORTED_MODULE_5__.evaluate)((0,_config__WEBPACK_IMPORTED_MODULE_6__.getConfig)().flowchart.htmlLabels)) { var _div = descr.children[0]; var _dv = (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)(descr); bbox = _div.getBoundingClientRect(); _dv.attr('width', bbox.width); _dv.attr('height', bbox.height); } // bbox = label.getBBox(); // log.info(descr); var halfPadding = node.padding / 2; (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)(descr).attr('transform', 'translate( ' + ( // (titleBox.width - bbox.width) / 2 + bbox.width > titleBox.width ? 0 : (titleBox.width - bbox.width) / 2) + ', ' + (titleBox.height + halfPadding + 5) + ')'); (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)(text).attr('transform', 'translate( ' + ( // (titleBox.width - bbox.width) / 2 + bbox.width < titleBox.width ? 0 : -(titleBox.width - bbox.width) / 2) + ', ' + 0 + ')'); // Get the size of the label // Bounding box for title and text bbox = label.node().getBBox(); // Center the label label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + (-bbox.height / 2 - halfPadding + 3) + ')'); rect.attr('class', 'outer title-state').attr('x', -bbox.width / 2 - halfPadding).attr('y', -bbox.height / 2 - halfPadding).attr('width', bbox.width + node.padding).attr('height', bbox.height + node.padding); innerLine.attr('class', 'divider').attr('x1', -bbox.width / 2 - halfPadding).attr('x2', bbox.width / 2 + halfPadding).attr('y1', -bbox.height / 2 - halfPadding + titleBox.height + halfPadding).attr('y2', -bbox.height / 2 - halfPadding + titleBox.height + halfPadding); (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.updateNodeBounds)(node, rect); node.intersect = function (point) { return _intersect_index_js__WEBPACK_IMPORTED_MODULE_3__["default"].rect(node, point); }; return shapeSvg; }; var stadium = function stadium(parent, node) { var _labelHelper11 = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.labelHelper)(parent, node, undefined, true), shapeSvg = _labelHelper11.shapeSvg, bbox = _labelHelper11.bbox; var h = bbox.height + node.padding; var w = bbox.width + h / 4 + node.padding; // add the rect var rect = shapeSvg.insert('rect', ':first-child').attr('style', node.style).attr('rx', h / 2).attr('ry', h / 2).attr('x', -w / 2).attr('y', -h / 2).attr('width', w).attr('height', h); (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.updateNodeBounds)(node, rect); node.intersect = function (point) { return _intersect_index_js__WEBPACK_IMPORTED_MODULE_3__["default"].rect(node, point); }; return shapeSvg; }; var circle = function circle(parent, node) { var _labelHelper12 = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.labelHelper)(parent, node, undefined, true), shapeSvg = _labelHelper12.shapeSvg, bbox = _labelHelper12.bbox, halfPadding = _labelHelper12.halfPadding; var circle = shapeSvg.insert('circle', ':first-child'); // center the circle around its coordinate circle.attr('style', node.style).attr('rx', node.rx).attr('ry', node.ry).attr('r', bbox.width / 2 + halfPadding).attr('width', bbox.width + node.padding).attr('height', bbox.height + node.padding); _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('Circle main'); (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.updateNodeBounds)(node, circle); node.intersect = function (point) { _logger__WEBPACK_IMPORTED_MODULE_2__.log.info('Circle intersect', node, bbox.width / 2 + halfPadding, point); return _intersect_index_js__WEBPACK_IMPORTED_MODULE_3__["default"].circle(node, bbox.width / 2 + halfPadding, point); }; return shapeSvg; }; var subroutine = function subroutine(parent, node) { var _labelHelper13 = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.labelHelper)(parent, node, undefined, true), shapeSvg = _labelHelper13.shapeSvg, bbox = _labelHelper13.bbox; var w = bbox.width + node.padding; var h = bbox.height + node.padding; var points = [{ x: 0, y: 0 }, { x: w, y: 0 }, { x: w, y: -h }, { x: 0, y: -h }, { x: 0, y: 0 }, { x: -8, y: 0 }, { x: w + 8, y: 0 }, { x: w + 8, y: -h }, { x: -8, y: -h }, { x: -8, y: 0 }]; var el = (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.insertPolygonShape)(shapeSvg, w, h, points); el.attr('style', node.style); (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.updateNodeBounds)(node, el); node.intersect = function (point) { return _intersect_index_js__WEBPACK_IMPORTED_MODULE_3__["default"].polygon(node, points, point); }; return shapeSvg; }; var start = function start(parent, node) { var shapeSvg = parent.insert('g').attr('class', 'node default').attr('id', node.domId || node.id); var circle = shapeSvg.insert('circle', ':first-child'); // center the circle around its coordinate circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14); (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.updateNodeBounds)(node, circle); node.intersect = function (point) { return _intersect_index_js__WEBPACK_IMPORTED_MODULE_3__["default"].circle(node, 7, point); }; return shapeSvg; }; var forkJoin = function forkJoin(parent, node, dir) { var shapeSvg = parent.insert('g').attr('class', 'node default').attr('id', node.domId || node.id); var width = 70; var height = 10; if (dir === 'LR') { width = 10; height = 70; } var shape = shapeSvg.append('rect').attr('x', -1 * width / 2).attr('y', -1 * height / 2).attr('width', width).attr('height', height).attr('class', 'fork-join'); (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.updateNodeBounds)(node, shape); node.height = node.height + node.padding / 2; node.width = node.width + node.padding / 2; node.intersect = function (point) { return _intersect_index_js__WEBPACK_IMPORTED_MODULE_3__["default"].rect(node, point); }; return shapeSvg; }; var end = function end(parent, node) { var shapeSvg = parent.insert('g').attr('class', 'node default').attr('id', node.domId || node.id); var innerCircle = shapeSvg.insert('circle', ':first-child'); var circle = shapeSvg.insert('circle', ':first-child'); circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14); innerCircle.attr('class', 'state-end').attr('r', 5).attr('width', 10).attr('height', 10); (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.updateNodeBounds)(node, circle); node.intersect = function (point) { return _intersect_index_js__WEBPACK_IMPORTED_MODULE_3__["default"].circle(node, 7, point); }; return shapeSvg; }; var class_box = function class_box(parent, node) { var halfPadding = node.padding / 2; var rowPadding = 4; var lineHeight = 8; var classes; if (!node.classes) { classes = 'node default'; } else { classes = 'node ' + node.classes; } // Add outer g element var shapeSvg = parent.insert('g').attr('class', classes).attr('id', node.domId || node.id); // Create the title label and insert it after the rect var rect = shapeSvg.insert('rect', ':first-child'); var topLine = shapeSvg.insert('line'); var bottomLine = shapeSvg.insert('line'); var maxWidth = 0; var maxHeight = rowPadding; var labelContainer = shapeSvg.insert('g').attr('class', 'label'); var verticalPos = 0; var hasInterface = node.classData.annotations && node.classData.annotations[0]; // 1. Create the labels var interfaceLabelText = node.classData.annotations[0] ? '«' + node.classData.annotations[0] + '»' : ''; var interfaceLabel = labelContainer.node().appendChild((0,_createLabel__WEBPACK_IMPORTED_MODULE_4__["default"])(interfaceLabelText, node.labelStyle, true, true)); var interfaceBBox = interfaceLabel.getBBox(); if ((0,_diagrams_common_common__WEBPACK_IMPORTED_MODULE_5__.evaluate)((0,_config__WEBPACK_IMPORTED_MODULE_6__.getConfig)().flowchart.htmlLabels)) { var div = interfaceLabel.children[0]; var dv = (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)(interfaceLabel); interfaceBBox = div.getBoundingClientRect(); dv.attr('width', interfaceBBox.width); dv.attr('height', interfaceBBox.height); } if (node.classData.annotations[0]) { maxHeight += interfaceBBox.height + rowPadding; maxWidth += interfaceBBox.width; } var classTitleString = node.classData.id; if (node.classData.type !== undefined && node.classData.type !== '') { if ((0,_config__WEBPACK_IMPORTED_MODULE_6__.getConfig)().flowchart.htmlLabels) { classTitleString += '<' + node.classData.type + '>'; } else { classTitleString += '<' + node.classData.type + '>'; } } var classTitleLabel = labelContainer.node().appendChild((0,_createLabel__WEBPACK_IMPORTED_MODULE_4__["default"])(classTitleString, node.labelStyle, true, true)); (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)(classTitleLabel).attr('class', 'classTitle'); var classTitleBBox = classTitleLabel.getBBox(); if ((0,_diagrams_common_common__WEBPACK_IMPORTED_MODULE_5__.evaluate)((0,_config__WEBPACK_IMPORTED_MODULE_6__.getConfig)().flowchart.htmlLabels)) { var _div2 = classTitleLabel.children[0]; var _dv2 = (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)(classTitleLabel); classTitleBBox = _div2.getBoundingClientRect(); _dv2.attr('width', classTitleBBox.width); _dv2.attr('height', classTitleBBox.height); } maxHeight += classTitleBBox.height + rowPadding; if (classTitleBBox.width > maxWidth) { maxWidth = classTitleBBox.width; } var classAttributes = []; node.classData.members.forEach(function (str) { var parsedInfo = (0,_diagrams_class_svgDraw__WEBPACK_IMPORTED_MODULE_7__.parseMember)(str); var parsedText = parsedInfo.displayText; if ((0,_config__WEBPACK_IMPORTED_MODULE_6__.getConfig)().flowchart.htmlLabels) { parsedText = parsedText.replace(//g, '>'); } var lbl = labelContainer.node().appendChild((0,_createLabel__WEBPACK_IMPORTED_MODULE_4__["default"])(parsedText, parsedInfo.cssStyle ? parsedInfo.cssStyle : node.labelStyle, true, true)); var bbox = lbl.getBBox(); if ((0,_diagrams_common_common__WEBPACK_IMPORTED_MODULE_5__.evaluate)((0,_config__WEBPACK_IMPORTED_MODULE_6__.getConfig)().flowchart.htmlLabels)) { var _div3 = lbl.children[0]; var _dv3 = (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)(lbl); bbox = _div3.getBoundingClientRect(); _dv3.attr('width', bbox.width); _dv3.attr('height', bbox.height); } if (bbox.width > maxWidth) { maxWidth = bbox.width; } maxHeight += bbox.height + rowPadding; classAttributes.push(lbl); }); maxHeight += lineHeight; var classMethods = []; node.classData.methods.forEach(function (str) { var parsedInfo = (0,_diagrams_class_svgDraw__WEBPACK_IMPORTED_MODULE_7__.parseMember)(str); var displayText = parsedInfo.displayText; if ((0,_config__WEBPACK_IMPORTED_MODULE_6__.getConfig)().flowchart.htmlLabels) { displayText = displayText.replace(//g, '>'); } var lbl = labelContainer.node().appendChild((0,_createLabel__WEBPACK_IMPORTED_MODULE_4__["default"])(displayText, parsedInfo.cssStyle ? parsedInfo.cssStyle : node.labelStyle, true, true)); var bbox = lbl.getBBox(); if ((0,_diagrams_common_common__WEBPACK_IMPORTED_MODULE_5__.evaluate)((0,_config__WEBPACK_IMPORTED_MODULE_6__.getConfig)().flowchart.htmlLabels)) { var _div4 = lbl.children[0]; var _dv4 = (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)(lbl); bbox = _div4.getBoundingClientRect(); _dv4.attr('width', bbox.width); _dv4.attr('height', bbox.height); } if (bbox.width > maxWidth) { maxWidth = bbox.width; } maxHeight += bbox.height + rowPadding; classMethods.push(lbl); }); maxHeight += lineHeight; // 2. Position the labels // position the interface label if (hasInterface) { var _diffX = (maxWidth - interfaceBBox.width) / 2; (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)(interfaceLabel).attr('transform', 'translate( ' + (-1 * maxWidth / 2 + _diffX) + ', ' + -1 * maxHeight / 2 + ')'); verticalPos = interfaceBBox.height + rowPadding; } // Positin the class title label var diffX = (maxWidth - classTitleBBox.width) / 2; (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)(classTitleLabel).attr('transform', 'translate( ' + (-1 * maxWidth / 2 + diffX) + ', ' + (-1 * maxHeight / 2 + verticalPos) + ')'); verticalPos += classTitleBBox.height + rowPadding; topLine.attr('class', 'divider').attr('x1', -maxWidth / 2 - halfPadding).attr('x2', maxWidth / 2 + halfPadding).attr('y1', -maxHeight / 2 - halfPadding + lineHeight + verticalPos).attr('y2', -maxHeight / 2 - halfPadding + lineHeight + verticalPos); verticalPos += lineHeight; classAttributes.forEach(function (lbl) { (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)(lbl).attr('transform', 'translate( ' + -maxWidth / 2 + ', ' + (-1 * maxHeight / 2 + verticalPos + lineHeight / 2) + ')'); verticalPos += classTitleBBox.height + rowPadding; }); verticalPos += lineHeight; bottomLine.attr('class', 'divider').attr('x1', -maxWidth / 2 - halfPadding).attr('x2', maxWidth / 2 + halfPadding).attr('y1', -maxHeight / 2 - halfPadding + lineHeight + verticalPos).attr('y2', -maxHeight / 2 - halfPadding + lineHeight + verticalPos); verticalPos += lineHeight; classMethods.forEach(function (lbl) { (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)(lbl).attr('transform', 'translate( ' + -maxWidth / 2 + ', ' + (-1 * maxHeight / 2 + verticalPos) + ')'); verticalPos += classTitleBBox.height + rowPadding; }); // // let bbox; // if (evaluate(getConfig().flowchart.htmlLabels)) { // const div = interfaceLabel.children[0]; // const dv = select(interfaceLabel); // bbox = div.getBoundingClientRect(); // dv.attr('width', bbox.width); // dv.attr('height', bbox.height); // } // bbox = labelContainer.getBBox(); // log.info('Text 2', text2); // const textRows = text2.slice(1, text2.length); // let titleBox = text.getBBox(); // const descr = label // .node() // .appendChild(createLabel(textRows.join('
'), node.labelStyle, true, true)); // if (evaluate(getConfig().flowchart.htmlLabels)) { // const div = descr.children[0]; // const dv = select(descr); // bbox = div.getBoundingClientRect(); // dv.attr('width', bbox.width); // dv.attr('height', bbox.height); // } // // bbox = label.getBBox(); // // log.info(descr); // select(descr).attr( // 'transform', // 'translate( ' + // // (titleBox.width - bbox.width) / 2 + // (bbox.width > titleBox.width ? 0 : (titleBox.width - bbox.width) / 2) + // ', ' + // (titleBox.height + halfPadding + 5) + // ')' // ); // select(text).attr( // 'transform', // 'translate( ' + // // (titleBox.width - bbox.width) / 2 + // (bbox.width < titleBox.width ? 0 : -(titleBox.width - bbox.width) / 2) + // ', ' + // 0 + // ')' // ); // // Get the size of the label // // Bounding box for title and text // bbox = label.node().getBBox(); // // Center the label // label.attr( // 'transform', // 'translate(' + -bbox.width / 2 + ', ' + (-bbox.height / 2 - halfPadding + 3) + ')' // ); rect.attr('class', 'outer title-state').attr('x', -maxWidth / 2 - halfPadding).attr('y', -(maxHeight / 2) - halfPadding).attr('width', maxWidth + node.padding).attr('height', maxHeight + node.padding); // innerLine // .attr('class', 'divider') // .attr('x1', -bbox.width / 2 - halfPadding) // .attr('x2', bbox.width / 2 + halfPadding) // .attr('y1', -bbox.height / 2 - halfPadding + titleBox.height + halfPadding) // .attr('y2', -bbox.height / 2 - halfPadding + titleBox.height + halfPadding); (0,_shapes_util__WEBPACK_IMPORTED_MODULE_1__.updateNodeBounds)(node, rect); node.intersect = function (point) { return _intersect_index_js__WEBPACK_IMPORTED_MODULE_3__["default"].rect(node, point); }; return shapeSvg; }; var shapes = { question: question, rect: rect, rectWithTitle: rectWithTitle, choice: choice, circle: circle, stadium: stadium, hexagon: hexagon, rect_left_inv_arrow: rect_left_inv_arrow, lean_right: lean_right, lean_left: lean_left, trapezoid: trapezoid, inv_trapezoid: inv_trapezoid, rect_right_inv_arrow: rect_right_inv_arrow, cylinder: cylinder, start: start, end: end, note: _shapes_note__WEBPACK_IMPORTED_MODULE_8__["default"], subroutine: subroutine, fork: forkJoin, join: forkJoin, class_box: class_box }; var nodeElems = {}; var insertNode = function insertNode(elem, node, dir) { var newEl; var el; // Add link when appropriate if (node.link) { newEl = elem.insert('svg:a').attr('xlink:href', node.link).attr('target', node.linkTarget || '_blank'); el = shapes[node.shape](newEl, node, dir); } else { el = shapes[node.shape](elem, node, dir); newEl = el; } if (node.tooltip) { el.attr('title', node.tooltip); } if (node.class) { el.attr('class', 'node default ' + node.class); } nodeElems[node.id] = newEl; if (node.haveCallback) { nodeElems[node.id].attr('class', nodeElems[node.id].attr('class') + ' clickable'); } }; var setNodeElem = function setNodeElem(elem, node) { nodeElems[node.id] = elem; }; var clear = function clear() { nodeElems = {}; }; var positionNode = function positionNode(node) { var el = nodeElems[node.id]; _logger__WEBPACK_IMPORTED_MODULE_2__.log.trace('Transforming node', node.diff, node, 'translate(' + (node.x - node.width / 2 - 5) + ', ' + node.width / 2 + ')'); var padding = 8; var diff = node.diff || 0; if (node.clusterNode) { el.attr('transform', 'translate(' + (node.x + diff - node.width / 2) + ', ' + (node.y - node.height / 2 - padding) + ')'); } else { el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')'); } return diff; }; /***/ }), /***/ "./src/dagre-wrapper/shapes/note.js": /*!******************************************!*\ !*** ./src/dagre-wrapper/shapes/note.js ***! \******************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./util */ "./src/dagre-wrapper/shapes/util.js"); /* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../logger */ "./src/logger.js"); /* harmony import */ var _intersect_index_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../intersect/index.js */ "./src/dagre-wrapper/intersect/index.js"); // eslint-disable-line var note = function note(parent, node) { var _labelHelper = (0,_util__WEBPACK_IMPORTED_MODULE_0__.labelHelper)(parent, node, 'node ' + node.classes, true), shapeSvg = _labelHelper.shapeSvg, bbox = _labelHelper.bbox, halfPadding = _labelHelper.halfPadding; _logger__WEBPACK_IMPORTED_MODULE_1__.log.info('Classes = ', node.classes); // add the rect var rect = shapeSvg.insert('rect', ':first-child'); rect.attr('rx', node.rx).attr('ry', node.ry).attr('x', -bbox.width / 2 - halfPadding).attr('y', -bbox.height / 2 - halfPadding).attr('width', bbox.width + node.padding).attr('height', bbox.height + node.padding); (0,_util__WEBPACK_IMPORTED_MODULE_0__.updateNodeBounds)(node, rect); node.intersect = function (point) { return _intersect_index_js__WEBPACK_IMPORTED_MODULE_2__["default"].rect(node, point); }; return shapeSvg; }; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (note); /***/ }), /***/ "./src/dagre-wrapper/shapes/util.js": /*!******************************************!*\ !*** ./src/dagre-wrapper/shapes/util.js ***! \******************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "labelHelper": () => (/* binding */ labelHelper), /* harmony export */ "updateNodeBounds": () => (/* binding */ updateNodeBounds), /* harmony export */ "insertPolygonShape": () => (/* binding */ insertPolygonShape) /* harmony export */ }); /* harmony import */ var _createLabel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../createLabel */ "./src/dagre-wrapper/createLabel.js"); /* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../config */ "./src/config.js"); /* harmony import */ var _mermaidAPI__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../mermaidAPI */ "./src/mermaidAPI.js"); /* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! d3 */ "d3"); /* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(d3__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _diagrams_common_common__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../diagrams/common/common */ "./src/diagrams/common/common.js"); var labelHelper = function labelHelper(parent, node, _classes, isNode) { var classes; if (!_classes) { classes = 'node default'; } else { classes = _classes; } // Add outer g element var shapeSvg = parent.insert('g').attr('class', classes).attr('id', node.domId || node.id); // Create the label and insert it after the rect var label = shapeSvg.insert('g').attr('class', 'label').attr('style', node.labelStyle); var labelText = typeof node.labelText === 'string' ? node.labelText : node.labelText[0]; var text = label.node().appendChild((0,_createLabel__WEBPACK_IMPORTED_MODULE_1__["default"])((0,_diagrams_common_common__WEBPACK_IMPORTED_MODULE_2__.sanitizeText)((0,_mermaidAPI__WEBPACK_IMPORTED_MODULE_3__.decodeEntities)(labelText), (0,_config__WEBPACK_IMPORTED_MODULE_4__.getConfig)()), node.labelStyle, false, isNode)); // Get the size of the label var bbox = text.getBBox(); if ((0,_diagrams_common_common__WEBPACK_IMPORTED_MODULE_2__.evaluate)((0,_config__WEBPACK_IMPORTED_MODULE_4__.getConfig)().flowchart.htmlLabels)) { var div = text.children[0]; var dv = (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)(text); bbox = div.getBoundingClientRect(); dv.attr('width', bbox.width); dv.attr('height', bbox.height); } var halfPadding = node.padding / 2; // Center the label label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')'); return { shapeSvg: shapeSvg, bbox: bbox, halfPadding: halfPadding, label: label }; }; var updateNodeBounds = function updateNodeBounds(node, element) { var bbox = element.node().getBBox(); node.width = bbox.width; node.height = bbox.height; }; /** * @param parent * @param w * @param h * @param points */ function insertPolygonShape(parent, w, h, points) { return parent.insert('polygon', ':first-child').attr('points', points.map(function (d) { return d.x + ',' + d.y; }).join(' ')).attr('class', 'label-container').attr('transform', 'translate(' + -w / 2 + ',' + h / 2 + ')'); } /***/ }), /***/ "./src/defaultConfig.js": /*!******************************!*\ !*** ./src/defaultConfig.js ***! \******************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "configKeys": () => (/* binding */ configKeys), /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var _themes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./themes */ "./src/themes/index.js"); function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } /** * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click * here](8.6.0_docs.md)].** * * ## **What follows are config instructions for older versions** * * These are the default options which can be overridden with the initialization call like so: * * **Example 1:**
 mermaid.initialize({ flowchart:{ htmlLabels: false } }); 
* * **Example 2:**
  
* * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults). * A description of each option follows below. * * @name Configuration */ var config = { /** * Theme , the CSS style sheet * * | Parameter | Description | Type | Required | Values | * | --------- | --------------- | ------ | -------- | ---------------------------------------------- | * | theme | Built in Themes | string | Optional | 'default', 'forest', 'dark', 'neutral', 'null' | * * **Notes:** To disable any pre-defined mermaid theme, use "null".
 "theme": "forest",
   * "themeCSS": ".node rect { fill: red; }" 
*/ theme: 'default', themeVariables: _themes__WEBPACK_IMPORTED_MODULE_0__["default"]["default"].getThemeVariables(), themeCSS: undefined, /* **maxTextSize** - The maximum allowed size of the users text diamgram */ maxTextSize: 50000, /** * | Parameter | Description | Type | Required | Values | * | ---------- | ------------------------------------------------------ | ------ | -------- | --------------------------- | * | fontFamily | specifies the font to be used in the rendered diagrams | string | Required | Any Possible CSS FontFamily | * * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif;'. */ fontFamily: '"trebuchet ms", verdana, arial, sans-serif;', /** * | Parameter | Description | Type | Required | Values | * | --------- | ----------------------------------------------------- | ---------------- | -------- | ------------- | * | logLevel | This option decides the amount of logging to be used. | string \| number | Required | 1, 2, 3, 4, 5 | * * **Notes:** * * - Debug: 1 * - Info: 2 * - Warn: 3 * - Error: 4 * - Fatal: 5 (default) */ logLevel: 5, /** * | Parameter | Description | Type | Required | Values | * | ------------- | --------------------------------- | ------ | -------- | ------------------------------- | * | securitylevel | Level of trust for parsed diagram | string | Required | 'strict', 'loose', 'antiscript' | * * **Notes**: * * - **strict**: (**default**) tags in text are encoded, click functionality is disabled * - **loose**: tags in text are allowed, click functionality is enabled * - **antiscript**: html tags in text are allowed, (only script element is removed), click * functionality is enabled */ securityLevel: 'strict', /** * | Parameter | Description | Type | Required | Values | * | ----------- | -------------------------------------------- | ------- | -------- | ----------- | * | startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false | * * **Notes:** Default value: true */ startOnLoad: true, /** * | Parameter | Description | Type | Required | Values | * | ------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------- | * | arrowMarkerAbsolute | Controls whether or arrow markers in html code are absolute paths or anchors | boolean | Required | true, false | * * **Notes**: * * This matters if you are using base tag settings. * * Default value: false */ arrowMarkerAbsolute: false, /** * This option controls which currentConfig keys are considered *secure* and can only be changed * via call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to the * `secure` keys in the current currentConfig. This prevents malicious graph directives from * overriding a site's default security. * * **Notes**: * * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'] */ secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'], /** * This option controls if the generated ids of nodes in the SVG are generated randomly or based * on a seed. If set to false, the IDs are generated based on the current date and thus are not * deterministic. This is the default behaviour. * * **Notes**: * * This matters if your files are checked into sourcecontrol e.g. git and should not change unless * content is changed. * * Default value: false */ deterministicIds: false, /** * This option is the optional seed for deterministic ids. if set to undefined but * deterministicIds is true, a simple number iterator is used. You can set this attribute to base * the seed on a static string. */ deterministicIDSeed: undefined, /** The object containing configurations specific for flowcharts */ flowchart: { /** * | Parameter | Description | Type | Required | Values | * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ | * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value | * * **Notes:** * * The amount of padding around the diagram as a whole so that embedded diagrams have margins, * expressed in pixels * * Default value: 8 */ diagramPadding: 8, /** * | Parameter | Description | Type | Required | Values | * | ---------- | -------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | * | htmlLabels | Flag for setting whether or not a html tag should be used for rendering labels on the edges. | boolean | Required | true, false | * * **Notes:** Default value: true. */ htmlLabels: true, /** * | Parameter | Description | Type | Required | Values | * | ----------- | --------------------------------------------------- | ------- | -------- | ------------------- | * | nodeSpacing | Defines the spacing between nodes on the same level | Integer | Required | Any positive Number | * * **Notes:** * * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the * vertical spacing for LR as well as RL graphs.** * * Default value: 50 */ nodeSpacing: 50, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------------------------------------------------- | ------- | -------- | ------------------- | * | rankSpacing | Defines the spacing between nodes on different levels | Integer | Required | Any Positive Number | * * **Notes**: * * Pertains to vertical spacing for TB (top to bottom) or BT (bottom to top), and the horizontal * spacing for LR as well as RL graphs. * * Default value 50 */ rankSpacing: 50, /** * | Parameter | Description | Type | Required | Values | * | --------- | -------------------------------------------------- | ------ | -------- | ----------------------------- | * | curve | Defines how mermaid renders curves for flowcharts. | string | Required | 'basis', 'linear', 'cardinal' | * * **Notes:** * * Default Value: 'basis' */ curve: 'basis', // Only used in new experimental rendering // represents the padding between the labels and the shape padding: 15, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | * | useMaxWidth | See notes | boolean | 4 | true, false | * * **Notes:** * * When this flag is set the height and width is set to 100% and is then scaling with the * available space if not the absolute space required is used. * * Default value: true */ useMaxWidth: true, /** * | Parameter | Description | Type | Required | Values | * | --------------- | ----------- | ------- | -------- | ----------------------- | * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper | * * **Notes:** * * Decides which rendering engine that is to be used for the rendering. Legal values are: * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid * * Default value: 'dagre-d3' */ defaultRenderer: 'dagre-d3' }, /** The object containing configurations specific for sequence diagrams */ sequence: { /** * | Parameter | Description | Type | Required | Values | * | --------------- | ---------------------------- | ------- | -------- | ------------------ | * | activationWidth | Width of the activation rect | Integer | Required | Any Positive Value | * * **Notes:** Default value :10 */ activationWidth: 10, /** * | Parameter | Description | Type | Required | Values | * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ | * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value | * * **Notes:** Default value: 50 */ diagramMarginX: 50, /** * | Parameter | Description | Type | Required | Values | * | -------------- | ------------------------------------------------- | ------- | -------- | ------------------ | * | diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value | * * **Notes:** Default value: 10 */ diagramMarginY: 10, /** * | Parameter | Description | Type | Required | Values | * | ----------- | --------------------- | ------- | -------- | ------------------ | * | actorMargin | Margin between actors | Integer | Required | Any Positive Value | * * **Notes:** Default value: 50 */ actorMargin: 50, /** * | Parameter | Description | Type | Required | Values | * | --------- | -------------------- | ------- | -------- | ------------------ | * | width | Width of actor boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 150 */ width: 150, /** * | Parameter | Description | Type | Required | Values | * | --------- | --------------------- | ------- | -------- | ------------------ | * | height | Height of actor boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 65 */ height: 65, /** * | Parameter | Description | Type | Required | Values | * | --------- | ------------------------ | ------- | -------- | ------------------ | * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 10 */ boxMargin: 10, /** * | Parameter | Description | Type | Required | Values | * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ | * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 5 */ boxTextMargin: 5, /** * | Parameter | Description | Type | Required | Values | * | ---------- | ------------------- | ------- | -------- | ------------------ | * | noteMargin | margin around notes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 10 */ noteMargin: 10, /** * | Parameter | Description | Type | Required | Values | * | ------------- | ---------------------- | ------- | -------- | ------------------ | * | messageMargin | Space between messages | Integer | Required | Any Positive Value | * * **Notes:** Default value: 35 */ messageMargin: 35, /** * | Parameter | Description | Type | Required | Values | * | ------------ | --------------------------- | ------ | -------- | ------------------------- | * | messageAlign | Multiline message alignment | string | Required | 'left', 'center', 'right' | * * **Notes:** Default value: 'center' */ messageAlign: 'center', /** * | Parameter | Description | Type | Required | Values | * | ------------ | --------------------------- | ------- | -------- | ----------- | * | mirrorActors | Mirror actors under diagram | boolean | Required | true, false | * * **Notes:** Default value: true */ mirrorActors: true, /** * | Parameter | Description | Type | Required | Values | * | ---------- | ----------------------------------------------------------------------- | ------- | -------- | ----------- | * | forceMenus | forces actor popup menus to always be visible (to support E2E testing). | Boolean | Required | True, False | * * **Notes:** * * Default value: false. */ forceMenus: false, /** * | Parameter | Description | Type | Required | Values | * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ | * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | Required | Any Positive Value | * * **Notes:** * * Depending on css styling this might need adjustment. * * Default value: 1 */ bottomMarginAdj: 1, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | * | useMaxWidth | See Notes | boolean | Required | true, false | * * **Notes:** When this flag is set to true, the height and width is set to 100% and is then * scaling with the available space. If set to false, the absolute space required is used. * * Default value: true */ useMaxWidth: true, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ------------------------------------ | ------- | -------- | ----------- | * | rightAngles | display curve arrows as right angles | boolean | Required | true, false | * * **Notes:** * * This will display arrows that start and begin at the same node as right angles, rather than a curve * * Default value: false */ rightAngles: false, /** * | Parameter | Description | Type | Required | Values | * | ------------------- | ------------------------------- | ------- | -------- | ----------- | * | showSequenceNumbers | This will show the node numbers | boolean | Required | true, false | * * **Notes:** Default value: false */ showSequenceNumbers: false, /** * | Parameter | Description | Type | Required | Values | * | ------------- | -------------------------------------------------- | ------- | -------- | ------------------ | * | actorFontSize | This sets the font size of the actor's description | Integer | Require | Any Positive Value | * * **Notes:** **Default value 14**.. */ actorFontSize: 14, /** * | Parameter | Description | Type | Required | Values | * | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- | * | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily | * * **Notes:** Default value: "'Open-Sans", "sans-serif"' */ actorFontFamily: '"Open-Sans", "sans-serif"', /** * This sets the font weight of the actor's description * * **Notes:** Default value: 400. */ actorFontWeight: 400, /** * | Parameter | Description | Type | Required | Values | * | ------------ | ----------------------------------------------- | ------- | -------- | ------------------ | * | noteFontSize | This sets the font size of actor-attached notes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 14 */ noteFontSize: 14, /** * | Parameter | Description | Type | Required | Values | * | -------------- | -------------------------------------------------- | ------ | -------- | --------------------------- | * | noteFontFamily | This sets the font family of actor-attached notes. | string | Required | Any Possible CSS FontFamily | * * **Notes:** Default value: ''"trebuchet ms", verdana, arial, sans-serif' */ noteFontFamily: '"trebuchet ms", verdana, arial, sans-serif', /** * This sets the font weight of the note's description * * **Notes:** Default value: 400 */ noteFontWeight: 400, /** * | Parameter | Description | Type | Required | Values | * | --------- | ---------------------------------------------------- | ------ | -------- | ------------------------- | * | noteAlign | This sets the text alignment of actor-attached notes | string | required | 'left', 'center', 'right' | * * **Notes:** Default value: 'center' */ noteAlign: 'center', /** * | Parameter | Description | Type | Required | Values | * | --------------- | ----------------------------------------- | ------- | -------- | ------------------- | * | messageFontSize | This sets the font size of actor messages | Integer | Required | Any Positive Number | * * **Notes:** Default value: 16 */ messageFontSize: 16, /** * | Parameter | Description | Type | Required | Values | * | ----------------- | ------------------------------------------- | ------ | -------- | --------------------------- | * | messageFontFamily | This sets the font family of actor messages | string | Required | Any Possible CSS FontFamily | * * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif' */ messageFontFamily: '"trebuchet ms", verdana, arial, sans-serif', /** * This sets the font weight of the message's description * * **Notes:** Default value: 400. */ messageFontWeight: 400, /** * This sets the auto-wrap state for the diagram * * **Notes:** Default value: false. */ wrap: false, /** * This sets the auto-wrap padding for the diagram (sides only) * * **Notes:** Default value: 0. */ wrapPadding: 10, /** * This sets the width of the loop-box (loop, alt, opt, par) * * **Notes:** Default value: 50. */ labelBoxWidth: 50, /** * This sets the height of the loop-box (loop, alt, opt, par) * * **Notes:** Default value: 20. */ labelBoxHeight: 20, messageFont: function messageFont() { return { fontFamily: this.messageFontFamily, fontSize: this.messageFontSize, fontWeight: this.messageFontWeight }; }, noteFont: function noteFont() { return { fontFamily: this.noteFontFamily, fontSize: this.noteFontSize, fontWeight: this.noteFontWeight }; }, actorFont: function actorFont() { return { fontFamily: this.actorFontFamily, fontSize: this.actorFontSize, fontWeight: this.actorFontWeight }; } }, /** The object containing configurations specific for gantt diagrams */ gantt: { /** * ### titleTopMargin * * | Parameter | Description | Type | Required | Values | * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | * | titleTopMargin | Margin top for the text over the gantt diagram | Integer | Required | Any Positive Value | * * **Notes:** Default value: 25 */ titleTopMargin: 25, /** * | Parameter | Description | Type | Required | Values | * | --------- | ----------------------------------- | ------- | -------- | ------------------ | * | barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value | * * **Notes:** Default value: 20 */ barHeight: 20, /** * | Parameter | Description | Type | Required | Values | * | --------- | ---------------------------------------------------------------- | ------- | -------- | ------------------ | * | barGap | The margin between the different activities in the gantt diagram | Integer | Optional | Any Positive Value | * * **Notes:** Default value: 4 */ barGap: 4, /** * | Parameter | Description | Type | Required | Values | * | ---------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------ | * | topPadding | Margin between title and gantt diagram and between axis and gantt diagram. | Integer | Required | Any Positive Value | * * **Notes:** Default value: 50 */ topPadding: 50, /** * | Parameter | Description | Type | Required | Values | * | ------------ | ----------------------------------------------------------------------- | ------- | -------- | ------------------ | * | rightPadding | The space allocated for the section name to the right of the activities | Integer | Required | Any Positive Value | * * **Notes:** Default value: 75 */ rightPadding: 75, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ---------------------------------------------------------------------- | ------- | -------- | ------------------ | * | leftPadding | The space allocated for the section name to the left of the activities | Integer | Required | Any Positive Value | * * **Notes:** Default value: 75 */ leftPadding: 75, /** * | Parameter | Description | Type | Required | Values | * | -------------------- | -------------------------------------------- | ------- | -------- | ------------------ | * | gridLineStartPadding | Vertical starting position of the grid lines | Integer | Required | Any Positive Value | * * **Notes:** Default value: 35 */ gridLineStartPadding: 35, /** * | Parameter | Description | Type | Required | Values | * | --------- | ----------- | ------- | -------- | ------------------ | * | fontSize | Font size | Integer | Required | Any Positive Value | * * **Notes:** Default value: 11 */ fontSize: 11, /** * | Parameter | Description | Type | Required | Values | * | --------------- | ---------------------- | ------- | -------- | ------------------ | * | sectionFontSize | Font size for sections | Integer | Required | Any Positive Value | * * **Notes:** Default value: 11 */ sectionFontSize: 11, /** * | Parameter | Description | Type | Required | Values | * | ------------------- | ---------------------------------------- | ------- | -------- | ------------------ | * | numberSectionStyles | The number of alternating section styles | Integer | 4 | Any Positive Value | * * **Notes:** Default value: 4 */ numberSectionStyles: 4, /** * | Parameter | Description | Type | Required | Values | * | ---------- | --------------------------- | ---- | -------- | ---------------- | * | axisFormat | Datetime format of the axis | 3 | Required | Date in yy-mm-dd | * * **Notes:** * * This might need adjustment to match your locale and preferences * * Default value: '%Y-%m-%d'. */ axisFormat: '%Y-%m-%d', /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | * | useMaxWidth | See notes | boolean | 4 | true, false | * * **Notes:** * * When this flag is set the height and width is set to 100% and is then scaling with the * available space if not the absolute space required is used. * * Default value: true */ useMaxWidth: true, /** * | Parameter | Description | Type | Required | Values | * | --------- | ----------- | ------- | -------- | ----------- | * | topAxis | See notes | Boolean | 4 | True, False | * * **Notes:** when this flag is set date labels will be added to the top of the chart * * **Default value false**. */ topAxis: false, useWidth: undefined }, /** The object containing configurations specific for journey diagrams */ journey: { /** * | Parameter | Description | Type | Required | Values | * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ | * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value | * * **Notes:** Default value: 50 */ diagramMarginX: 50, /** * | Parameter | Description | Type | Required | Values | * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ | * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value | * * **Notes:** Default value: 10 */ diagramMarginY: 10, /** * | Parameter | Description | Type | Required | Values | * | ----------- | --------------------- | ------- | -------- | ------------------ | * | actorMargin | Margin between actors | Integer | Required | Any Positive Value | * * **Notes:** Default value: 50 */ leftMargin: 150, /** * | Parameter | Description | Type | Required | Values | * | --------- | -------------------- | ------- | -------- | ------------------ | * | width | Width of actor boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 150 */ width: 150, /** * | Parameter | Description | Type | Required | Values | * | --------- | --------------------- | ------- | -------- | ------------------ | * | height | Height of actor boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 65 */ height: 50, /** * | Parameter | Description | Type | Required | Values | * | --------- | ------------------------ | ------- | -------- | ------------------ | * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 10 */ boxMargin: 10, /** * | Parameter | Description | Type | Required | Values | * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ | * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 5 */ boxTextMargin: 5, /** * | Parameter | Description | Type | Required | Values | * | ---------- | ------------------- | ------- | -------- | ------------------ | * | noteMargin | Margin around notes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 10 */ noteMargin: 10, /** * | Parameter | Description | Type | Required | Values | * | ------------- | ----------------------- | ------- | -------- | ------------------ | * | messageMargin | Space between messages. | Integer | Required | Any Positive Value | * * **Notes:** * * Space between messages. * * Default value: 35 */ messageMargin: 35, /** * | Parameter | Description | Type | Required | Values | * | ------------ | --------------------------- | ---- | -------- | ------------------------- | * | messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' | * * **Notes:** Default value: 'center' */ messageAlign: 'center', /** * | Parameter | Description | Type | Required | Values | * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ | * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4 | Any Positive Value | * * **Notes:** * * Depending on css styling this might need adjustment. * * Default value: 1 */ bottomMarginAdj: 1, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | * | useMaxWidth | See notes | boolean | 4 | true, false | * * **Notes:** * * When this flag is set the height and width is set to 100% and is then scaling with the * available space if not the absolute space required is used. * * Default value: true */ useMaxWidth: true, /** * | Parameter | Description | Type | Required | Values | * | ----------- | --------------------------------- | ---- | -------- | ----------- | * | rightAngles | Curved Arrows become Right Angles | 3 | 4 | true, false | * * **Notes:** * * This will display arrows that start and begin at the same node as right angles, rather than a curves * * Default value: false */ rightAngles: false, taskFontSize: 14, taskFontFamily: '"Open-Sans", "sans-serif"', taskMargin: 50, // width of activation box activationWidth: 10, // text placement as: tspan | fo | old only text as before textPlacement: 'fo', actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'], sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'], sectionColours: ['#fff'] }, class: { arrowMarkerAbsolute: false, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | * | useMaxWidth | See notes | boolean | 4 | true, false | * * **Notes:** * * When this flag is set the height and width is set to 100% and is then scaling with the * available space if not the absolute space required is used. * * Default value: true */ useMaxWidth: true, /** * | Parameter | Description | Type | Required | Values | * | --------------- | ----------- | ------- | -------- | ----------------------- | * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper | * * **Notes**: * * Decides which rendering engine that is to be used for the rendering. Legal values are: * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid * * Default value: 'dagre-d3' */ defaultRenderer: 'dagre-wrapper' }, git: { arrowMarkerAbsolute: false, useWidth: undefined, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | * | useMaxWidth | See notes | boolean | 4 | true, false | * * **Notes:** * * When this flag is set the height and width is set to 100% and is then scaling with the * available space if not the absolute space required is used. * * Default value: true */ useMaxWidth: true }, state: { dividerMargin: 10, sizeUnit: 5, padding: 8, textHeight: 10, titleShift: -15, noteMargin: 10, forkWidth: 70, forkHeight: 7, // Used miniPadding: 2, // Font size factor, this is used to guess the width of the edges labels before rendering by dagre // layout. This might need updating if/when switching font fontSizeFactor: 5.02, fontSize: 24, labelHeight: 16, edgeLengthFactor: '20', compositTitleSize: 35, radius: 5, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | * | useMaxWidth | See notes | boolean | 4 | true, false | * * **Notes:** * * When this flag is set the height and width is set to 100% and is then scaling with the * available space if not the absolute space required is used. * * Default value: true */ useMaxWidth: true, /** * | Parameter | Description | Type | Required | Values | * | --------------- | ----------- | ------- | -------- | ----------------------- | * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper | * * **Notes:** * * Decides which rendering engine that is to be used for the rendering. Legal values are: * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid * * Default value: 'dagre-d3' */ defaultRenderer: 'dagre-wrapper' }, /** The object containing configurations specific for entity relationship diagrams */ er: { /** * | Parameter | Description | Type | Required | Values | * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ | * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value | * * **Notes:** * * The amount of padding around the diagram as a whole so that embedded diagrams have margins, * expressed in pixels * * Default value: 20 */ diagramPadding: 20, /** * | Parameter | Description | Type | Required | Values | * | --------------- | ---------------------------------------- | ------ | -------- | ---------------------- | * | layoutDirection | Directional bias for layout of entities. | string | Required | "TB", "BT", "LR", "RL" | * * **Notes:** * * 'TB' for Top-Bottom, 'BT'for Bottom-Top, 'LR' for Left-Right, or 'RL' for Right to Left. * * T = top, B = bottom, L = left, and R = right. * * Default value: 'TB' */ layoutDirection: 'TB', /** * | Parameter | Description | Type | Required | Values | * | -------------- | ---------------------------------- | ------- | -------- | ------------------ | * | minEntityWidth | The minimum width of an entity box | Integer | Required | Any Positive Value | * * **Notes:** Expressed in pixels. Default value: 100 */ minEntityWidth: 100, /** * | Parameter | Description | Type | Required | Values | * | --------------- | ----------------------------------- | ------- | -------- | ------------------ | * | minEntityHeight | The minimum height of an entity box | Integer | 4 | Any Positive Value | * * **Notes:** Expressed in pixels Default value: 75 */ minEntityHeight: 75, /** * | Parameter | Description | Type | Required | Values | * | ------------- | ----------------------------------------------------------- | ------- | -------- | ------------------ | * | entityPadding | Minimum internal padding betweentext in box and box borders | Integer | 4 | Any Positive Value | * * **Notes:** * * The minimum internal padding betweentext in an entity box and the enclosing box borders, * expressed in pixels. * * Default value: 15 */ entityPadding: 15, /** * | Parameter | Description | Type | Required | Values | * | --------- | ----------------------------------- | ------ | -------- | -------------------- | * | stroke | Stroke color of box edges and lines | string | 4 | Any recognized color | * * **Notes:** Default value: 'gray' */ stroke: 'gray', /** * | Parameter | Description | Type | Required | Values | * | --------- | -------------------------- | ------ | -------- | -------------------- | * | fill | Fill color of entity boxes | string | 4 | Any recognized color | * * **Notes:** Default value: 'honeydew' */ fill: 'honeydew', /** * | Parameter | Description | Type | Required | Values | * | --------- | ------------------- | ------- | -------- | ------------------ | * | fontSize | Font Size in pixels | Integer | | Any Positive Value | * * **Notes:** * * Font size (expressed as an integer representing a number of pixels) Default value: 12 */ fontSize: 12, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | * | useMaxWidth | See Notes | boolean | Required | true, false | * * **Notes:** * * When this flag is set to true, the diagram width is locked to 100% and scaled based on * available space. If set to false, the diagram reserves its absolute width. * * Default value: true */ useMaxWidth: true }, /** The object containing configurations specific for pie diagrams */ pie: { useWidth: undefined, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | * | useMaxWidth | See Notes | boolean | Required | true, false | * * **Notes:** * * When this flag is set to true, the diagram width is locked to 100% and scaled based on * available space. If set to false, the diagram reserves its absolute width. * * Default value: true */ useMaxWidth: true }, /** The object containing configurations specific for req diagrams */ requirement: { useWidth: undefined, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | * | useMaxWidth | See Notes | boolean | Required | true, false | * * **Notes:** * * When this flag is set to true, the diagram width is locked to 100% and scaled based on * available space. If set to false, the diagram reserves its absolute width. * * Default value: true */ useMaxWidth: true, rect_fill: '#f9f9f9', text_color: '#333', rect_border_size: '0.5px', rect_border_color: '#bbb', rect_min_width: 200, rect_min_height: 200, fontSize: 14, rect_padding: 10, line_height: 20 } }; config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute; config.git.arrowMarkerAbsolute = config.arrowMarkerAbsolute; var keyify = function keyify(obj) { var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; return Object.keys(obj).reduce(function (res, el) { if (Array.isArray(obj[el])) { return res; } else if (_typeof(obj[el]) === 'object' && obj[el] !== null) { return [].concat(_toConsumableArray(res), [prefix + el], _toConsumableArray(keyify(obj[el], ''))); } return [].concat(_toConsumableArray(res), [prefix + el]); }, []); }; var configKeys = keyify(config, ''); /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (config); /***/ }), /***/ "./src/diagrams/class/classDb.js": /*!***************************************!*\ !*** ./src/diagrams/class/classDb.js ***! \***************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "parseDirective": () => (/* binding */ parseDirective), /* harmony export */ "addClass": () => (/* binding */ addClass), /* harmony export */ "lookUpDomId": () => (/* binding */ lookUpDomId), /* harmony export */ "clear": () => (/* binding */ clear), /* harmony export */ "getClass": () => (/* binding */ getClass), /* harmony export */ "getClasses": () => (/* binding */ getClasses), /* harmony export */ "getRelations": () => (/* binding */ getRelations), /* harmony export */ "addRelation": () => (/* binding */ addRelation), /* harmony export */ "addAnnotation": () => (/* binding */ addAnnotation), /* harmony export */ "addMember": () => (/* binding */ addMember), /* harmony export */ "addMembers": () => (/* binding */ addMembers), /* harmony export */ "cleanupLabel": () => (/* binding */ cleanupLabel), /* harmony export */ "setCssClass": () => (/* binding */ setCssClass), /* harmony export */ "setLink": () => (/* binding */ setLink), /* harmony export */ "setClickEvent": () => (/* binding */ setClickEvent), /* harmony export */ "bindFunctions": () => (/* binding */ bindFunctions), /* harmony export */ "lineType": () => (/* binding */ lineType), /* harmony export */ "relationType": () => (/* binding */ relationType), /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! d3 */ "d3"); /* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(d3__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../logger */ "./src/logger.js"); /* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../config */ "./src/config.js"); /* harmony import */ var _common_common__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../common/common */ "./src/diagrams/common/common.js"); /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../utils */ "./src/utils.js"); /* harmony import */ var _mermaidAPI__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../mermaidAPI */ "./src/mermaidAPI.js"); function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } var MERMAID_DOM_ID_PREFIX = 'classid-'; var relations = []; var classes = {}; var classCounter = 0; var funs = []; var parseDirective = function parseDirective(statement, context, type) { _mermaidAPI__WEBPACK_IMPORTED_MODULE_1__["default"].parseDirective(this, statement, context, type); }; var splitClassNameAndType = function splitClassNameAndType(id) { var genericType = ''; var className = id; if (id.indexOf('~') > 0) { var split = id.split('~'); className = split[0]; genericType = _common_common__WEBPACK_IMPORTED_MODULE_2__["default"].sanitizeText(split[1], _config__WEBPACK_IMPORTED_MODULE_3__.getConfig()); } return { className: className, type: genericType }; }; /** * Function called by parser when a node definition has been found. * * @param id * @public */ var addClass = function addClass(id) { var classId = splitClassNameAndType(id); // Only add class if not exists if (typeof classes[classId.className] !== 'undefined') return; classes[classId.className] = { id: classId.className, type: classId.type, cssClasses: [], methods: [], members: [], annotations: [], domId: MERMAID_DOM_ID_PREFIX + classId.className + '-' + classCounter }; classCounter++; }; /** * Function to lookup domId from id in the graph definition. * * @param id * @public */ var lookUpDomId = function lookUpDomId(id) { var classKeys = Object.keys(classes); for (var i = 0; i < classKeys.length; i++) { if (classes[classKeys[i]].id === id) { return classes[classKeys[i]].domId; } } }; var clear = function clear() { relations = []; classes = {}; funs = []; funs.push(setupToolTips); }; var getClass = function getClass(id) { return classes[id]; }; var getClasses = function getClasses() { return classes; }; var getRelations = function getRelations() { return relations; }; var addRelation = function addRelation(relation) { _logger__WEBPACK_IMPORTED_MODULE_4__.log.debug('Adding relation: ' + JSON.stringify(relation)); addClass(relation.id1); addClass(relation.id2); relation.id1 = splitClassNameAndType(relation.id1).className; relation.id2 = splitClassNameAndType(relation.id2).className; relations.push(relation); }; /** * Adds an annotation to the specified class Annotations mark special properties of the given type * (like 'interface' or 'service') * * @param className The class name * @param annotation The name of the annotation without any brackets * @public */ var addAnnotation = function addAnnotation(className, annotation) { var validatedClassName = splitClassNameAndType(className).className; classes[validatedClassName].annotations.push(annotation); }; /** * Adds a member to the specified class * * @param className The class name * @param member The full name of the member. If the member is enclosed in <> it is * treated as an annotation If the member is ending with a closing bracket ) it is treated as a * method Otherwise the member will be treated as a normal property * @public */ var addMember = function addMember(className, member) { var validatedClassName = splitClassNameAndType(className).className; var theClass = classes[validatedClassName]; if (typeof member === 'string') { // Member can contain white spaces, we trim them out var memberString = member.trim(); if (memberString.startsWith('<<') && memberString.endsWith('>>')) { // Remove leading and trailing brackets theClass.annotations.push(memberString.substring(2, memberString.length - 2)); } else if (memberString.indexOf(')') > 0) { theClass.methods.push(memberString); } else if (memberString) { theClass.members.push(memberString); } } }; var addMembers = function addMembers(className, members) { if (Array.isArray(members)) { members.reverse(); members.forEach(function (member) { return addMember(className, member); }); } }; var cleanupLabel = function cleanupLabel(label) { if (label.substring(0, 1) === ':') { return _common_common__WEBPACK_IMPORTED_MODULE_2__["default"].sanitizeText(label.substr(1).trim(), _config__WEBPACK_IMPORTED_MODULE_3__.getConfig()); } else { return label.trim(); } }; /** * Called by parser when a special node is found, e.g. a clickable element. * * @param ids Comma separated list of ids * @param className Class to add */ var setCssClass = function setCssClass(ids, className) { ids.split(',').forEach(function (_id) { var id = _id; if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id; if (typeof classes[id] !== 'undefined') { classes[id].cssClasses.push(className); } }); }; /** * Called by parser when a tooltip is found, e.g. a clickable element. * * @param ids Comma separated list of ids * @param tooltip Tooltip to add */ var setTooltip = function setTooltip(ids, tooltip) { var config = _config__WEBPACK_IMPORTED_MODULE_3__.getConfig(); ids.split(',').forEach(function (id) { if (typeof tooltip !== 'undefined') { classes[id].tooltip = _common_common__WEBPACK_IMPORTED_MODULE_2__["default"].sanitizeText(tooltip, config); } }); }; /** * Called by parser when a link is found. Adds the URL to the vertex data. * * @param ids Comma separated list of ids * @param linkStr URL to create a link for * @param target Target of the link, _blank by default as originally defined in the svgDraw.js file */ var setLink = function setLink(ids, linkStr, target) { var config = _config__WEBPACK_IMPORTED_MODULE_3__.getConfig(); ids.split(',').forEach(function (_id) { var id = _id; if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id; if (typeof classes[id] !== 'undefined') { classes[id].link = _utils__WEBPACK_IMPORTED_MODULE_5__["default"].formatUrl(linkStr, config); if (typeof target === 'string') { classes[id].linkTarget = target; } else { classes[id].linkTarget = '_blank'; } } }); setCssClass(ids, 'clickable'); }; /** * Called by parser when a click definition is found. Registers an event handler. * * @param ids Comma separated list of ids * @param functionName Function to be called on click * @param functionArgs Function args the function should be called with */ var setClickEvent = function setClickEvent(ids, functionName, functionArgs) { ids.split(',').forEach(function (id) { setClickFunc(id, functionName, functionArgs); classes[id].haveCallback = true; }); setCssClass(ids, 'clickable'); }; var setClickFunc = function setClickFunc(domId, functionName, functionArgs) { var config = _config__WEBPACK_IMPORTED_MODULE_3__.getConfig(); var id = domId; var elemId = lookUpDomId(id); if (config.securityLevel !== 'loose') { return; } if (typeof functionName === 'undefined') { return; } if (typeof classes[id] !== 'undefined') { var argList = []; if (typeof functionArgs === 'string') { /* Splits functionArgs by ',', ignoring all ',' in double quoted strings */ argList = functionArgs.split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/); for (var i = 0; i < argList.length; i++) { var item = argList[i].trim(); /* Removes all double quotes at the start and end of an argument */ /* This preserves all starting and ending whitespace inside */ if (item.charAt(0) === '"' && item.charAt(item.length - 1) === '"') { item = item.substr(1, item.length - 2); } argList[i] = item; } } /* if no arguments passed into callback, default to passing in id */ if (argList.length === 0) { argList.push(elemId); } funs.push(function () { var elem = document.querySelector("[id=\"".concat(elemId, "\"]")); if (elem !== null) { elem.addEventListener('click', function () { _utils__WEBPACK_IMPORTED_MODULE_5__["default"].runFunc.apply(_utils__WEBPACK_IMPORTED_MODULE_5__["default"], [functionName].concat(_toConsumableArray(argList))); }, false); } }); } }; var bindFunctions = function bindFunctions(element) { funs.forEach(function (fun) { fun(element); }); }; var lineType = { LINE: 0, DOTTED_LINE: 1 }; var relationType = { AGGREGATION: 0, EXTENSION: 1, COMPOSITION: 2, DEPENDENCY: 3 }; var setupToolTips = function setupToolTips(element) { var tooltipElem = (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)('.mermaidTooltip'); if ((tooltipElem._groups || tooltipElem)[0][0] === null) { tooltipElem = (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)('body').append('div').attr('class', 'mermaidTooltip').style('opacity', 0); } var svg = (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)(element).select('svg'); var nodes = svg.selectAll('g.node'); nodes.on('mouseover', function () { var el = (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)(this); var title = el.attr('title'); // Dont try to draw a tooltip if no data is provided if (title === null) { return; } var rect = this.getBoundingClientRect(); tooltipElem.transition().duration(200).style('opacity', '.9'); tooltipElem.html(el.attr('title')).style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px').style('top', window.scrollY + rect.top - 14 + document.body.scrollTop + 'px'); el.classed('hover', true); }).on('mouseout', function () { tooltipElem.transition().duration(500).style('opacity', 0); var el = (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)(this); el.classed('hover', false); }); }; funs.push(setupToolTips); var direction = 'TB'; var getDirection = function getDirection() { return direction; }; var setDirection = function setDirection(dir) { direction = dir; }; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({ parseDirective: parseDirective, getConfig: function getConfig() { return _config__WEBPACK_IMPORTED_MODULE_3__.getConfig().class; }, addClass: addClass, bindFunctions: bindFunctions, clear: clear, getClass: getClass, getClasses: getClasses, addAnnotation: addAnnotation, getRelations: getRelations, addRelation: addRelation, getDirection: getDirection, setDirection: setDirection, addMember: addMember, addMembers: addMembers, cleanupLabel: cleanupLabel, lineType: lineType, relationType: relationType, setClickEvent: setClickEvent, setCssClass: setCssClass, setLink: setLink, setTooltip: setTooltip, lookUpDomId: lookUpDomId }); /***/ }), /***/ "./src/diagrams/class/classRenderer-v2.js": /*!************************************************!*\ !*** ./src/diagrams/class/classRenderer-v2.js ***! \************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "addClasses": () => (/* binding */ addClasses), /* harmony export */ "addRelations": () => (/* binding */ addRelations), /* harmony export */ "setConf": () => (/* binding */ setConf), /* harmony export */ "drawOld": () => (/* binding */ drawOld), /* harmony export */ "draw": () => (/* binding */ draw), /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! d3 */ "d3"); /* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(d3__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var dagre__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! dagre */ "dagre"); /* harmony import */ var dagre__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(dagre__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var graphlib__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! graphlib */ "graphlib"); /* harmony import */ var graphlib__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(graphlib__WEBPACK_IMPORTED_MODULE_2__); /* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../logger */ "./src/logger.js"); /* harmony import */ var _classDb__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./classDb */ "./src/diagrams/class/classDb.js"); /* harmony import */ var _parser_classDiagram__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./parser/classDiagram */ "./src/diagrams/class/parser/classDiagram.jison"); /* harmony import */ var _parser_classDiagram__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_parser_classDiagram__WEBPACK_IMPORTED_MODULE_3__); /* harmony import */ var _svgDraw__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./svgDraw */ "./src/diagrams/class/svgDraw.js"); /* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../config */ "./src/config.js"); /* harmony import */ var _dagre_wrapper_index_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../dagre-wrapper/index.js */ "./src/dagre-wrapper/index.js"); /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../utils */ "./src/utils.js"); /* harmony import */ var _common_common__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../common/common */ "./src/diagrams/common/common.js"); // import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js'; _parser_classDiagram__WEBPACK_IMPORTED_MODULE_3__.parser.yy = _classDb__WEBPACK_IMPORTED_MODULE_4__["default"]; var idCache = {}; var padding = 20; var conf = { dividerMargin: 10, padding: 5, textHeight: 10 }; /** * Function that adds the vertices found during parsing to the graph to be rendered. * * @param {Object< * string, * { cssClasses: string[]; text: string; id: string; type: string; domId: string } * >} classes * Object containing the vertices. * @param {SVGGElement} g The graph that is to be drawn. */ var addClasses = function addClasses(classes, g) { // const svg = select(`[id="${svgId}"]`); var keys = Object.keys(classes); _logger__WEBPACK_IMPORTED_MODULE_5__.log.info('keys:', keys); _logger__WEBPACK_IMPORTED_MODULE_5__.log.info(classes); // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition keys.forEach(function (id) { var vertex = classes[id]; /** * Variable for storing the classes for the vertex * * @type {string} */ var cssClassStr = ''; if (vertex.cssClasses.length > 0) { cssClassStr = cssClassStr + ' ' + vertex.cssClasses.join(' '); } // if (vertex.classes.length > 0) { // classStr = vertex.classes.join(' '); // } var styles = { labelStyle: '' }; //getStylesFromArray(vertex.styles); // Use vertex id as text in the box if no text is provided by the graph definition var vertexText = vertex.text !== undefined ? vertex.text : vertex.id; // We create a SVG label, either by delegating to addHtmlLabel or manually // let vertexNode; // if (evaluate(getConfig().flowchart.htmlLabels)) { // const node = { // label: vertexText.replace( // /fa[lrsb]?:fa-[\w-]+/g, // s => `` // ) // }; // vertexNode = addHtmlLabel(svg, node).node(); // vertexNode.parentNode.removeChild(vertexNode); // } else { // const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text'); // svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:')); // const rows = vertexText.split(common.lineBreakRegex); // for (let j = 0; j < rows.length; j++) { // const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan'); // tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve'); // tspan.setAttribute('dy', '1em'); // tspan.setAttribute('x', '1'); // tspan.textContent = rows[j]; // svgLabel.appendChild(tspan); // } // vertexNode = svgLabel; // } var radious = 0; var _shape = ''; // Set the shape based parameters switch (vertex.type) { case 'class': _shape = 'class_box'; break; default: _shape = 'class_box'; } // Add the node g.setNode(vertex.id, { labelStyle: styles.labelStyle, shape: _shape, labelText: vertexText, classData: vertex, rx: radious, ry: radious, class: cssClassStr, style: styles.style, id: vertex.id, domId: vertex.domId, haveCallback: vertex.haveCallback, link: vertex.link, width: vertex.type === 'group' ? 500 : undefined, type: vertex.type, padding: (0,_config__WEBPACK_IMPORTED_MODULE_6__.getConfig)().flowchart.padding }); _logger__WEBPACK_IMPORTED_MODULE_5__.log.info('setNode', { labelStyle: styles.labelStyle, shape: _shape, labelText: vertexText, rx: radious, ry: radious, class: cssClassStr, style: styles.style, id: vertex.id, width: vertex.type === 'group' ? 500 : undefined, type: vertex.type, padding: (0,_config__WEBPACK_IMPORTED_MODULE_6__.getConfig)().flowchart.padding }); }); }; /** * Add edges to graph based on parsed graph defninition * * @param relations * @param {object} g The graph object */ var addRelations = function addRelations(relations, g) { var cnt = 0; var defaultStyle; var defaultLabelStyle; // if (typeof relations.defaultStyle !== 'undefined') { // const defaultStyles = getStylesFromArray(relations.defaultStyle); // defaultStyle = defaultStyles.style; // defaultLabelStyle = defaultStyles.labelStyle; // } relations.forEach(function (edge) { cnt++; var edgeData = {}; //Set relationship style and line type edgeData.classes = 'relation'; edgeData.pattern = edge.relation.lineType == 1 ? 'dashed' : 'solid'; edgeData.id = 'id' + cnt; // Set link type for rendering if (edge.type === 'arrow_open') { edgeData.arrowhead = 'none'; } else { edgeData.arrowhead = 'normal'; } _logger__WEBPACK_IMPORTED_MODULE_5__.log.info(edgeData, edge); //Set edge extra labels //edgeData.startLabelLeft = edge.relationTitle1; edgeData.startLabelRight = edge.relationTitle1 === 'none' ? '' : edge.relationTitle1; edgeData.endLabelLeft = edge.relationTitle2 === 'none' ? '' : edge.relationTitle2; //edgeData.endLabelRight = edge.relationTitle2; //Set relation arrow types edgeData.arrowTypeStart = getArrowMarker(edge.relation.type1); edgeData.arrowTypeEnd = getArrowMarker(edge.relation.type2); var style = ''; var labelStyle = ''; if (typeof edge.style !== 'undefined') { var styles = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.getStylesFromArray)(edge.style); style = styles.style; labelStyle = styles.labelStyle; } else { style = 'fill:none'; if (typeof defaultStyle !== 'undefined') { style = defaultStyle; } if (typeof defaultLabelStyle !== 'undefined') { labelStyle = defaultLabelStyle; } } edgeData.style = style; edgeData.labelStyle = labelStyle; if (typeof edge.interpolate !== 'undefined') { edgeData.curve = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.interpolateToCurve)(edge.interpolate, d3__WEBPACK_IMPORTED_MODULE_0__.curveLinear); } else if (typeof relations.defaultInterpolate !== 'undefined') { edgeData.curve = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.interpolateToCurve)(relations.defaultInterpolate, d3__WEBPACK_IMPORTED_MODULE_0__.curveLinear); } else { edgeData.curve = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.interpolateToCurve)(conf.curve, d3__WEBPACK_IMPORTED_MODULE_0__.curveLinear); } edge.text = edge.title; if (typeof edge.text === 'undefined') { if (typeof edge.style !== 'undefined') { edgeData.arrowheadStyle = 'fill: #333'; } } else { edgeData.arrowheadStyle = 'fill: #333'; edgeData.labelpos = 'c'; if ((0,_config__WEBPACK_IMPORTED_MODULE_6__.getConfig)().flowchart.htmlLabels) { // eslint-disable-line edgeData.labelType = 'html'; edgeData.label = '' + edge.text + ''; } else { edgeData.labelType = 'text'; edgeData.label = edge.text.replace(_common_common__WEBPACK_IMPORTED_MODULE_8__["default"].lineBreakRegex, '\n'); if (typeof edge.style === 'undefined') { edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none'; } edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:'); } } // Add the edge to the graph g.setEdge(edge.id1, edge.id2, edgeData, cnt); }); }; /** * Gets the ID with the same label as in the cache * * @param {string} label The label to look for * @returns {string} The resulting ID */ var getGraphId = function getGraphId(label) { var foundEntry = Object.entries(idCache).find(function (entry) { return entry[1].label === label; }); if (foundEntry) { return foundEntry[0]; } }; /** * Merges the value of `conf` with the passed `cnf` * * @param {object} cnf Config to merge */ var setConf = function setConf(cnf) { var keys = Object.keys(cnf); keys.forEach(function (key) { conf[key] = cnf[key]; }); }; /** * Draws a flowchart in the tag with id: id based on the graph definition in text. * * @param {string} text * @param {string} id */ var drawOld = function drawOld(text, id) { idCache = {}; _parser_classDiagram__WEBPACK_IMPORTED_MODULE_3__.parser.yy.clear(); _parser_classDiagram__WEBPACK_IMPORTED_MODULE_3__.parser.parse(text); _logger__WEBPACK_IMPORTED_MODULE_5__.log.info('Rendering diagram ' + text); // Fetch the default direction, use TD if none was found var diagram = (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)("[id='".concat(id, "']")); // insertMarkers(diagram); // Layout graph, Create a new directed graph var g = new (graphlib__WEBPACK_IMPORTED_MODULE_2___default().Graph)({ multigraph: true }); // Set an object for the graph label g.setGraph({ isMultiGraph: true }); // Default to assigning a new object as a label for each new edge. g.setDefaultEdgeLabel(function () { return {}; }); var classes = _classDb__WEBPACK_IMPORTED_MODULE_4__["default"].getClasses(); _logger__WEBPACK_IMPORTED_MODULE_5__.log.info('classes:'); _logger__WEBPACK_IMPORTED_MODULE_5__.log.info(classes); var keys = Object.keys(classes); for (var i = 0; i < keys.length; i++) { var classDef = classes[keys[i]]; var node = _svgDraw__WEBPACK_IMPORTED_MODULE_9__["default"].drawClass(diagram, classDef, conf); idCache[node.id] = node; // Add nodes to the graph. The first argument is the node id. The second is // metadata about the node. In this case we're going to add labels to each of // our nodes. g.setNode(node.id, node); _logger__WEBPACK_IMPORTED_MODULE_5__.log.info('Org height: ' + node.height); } var relations = _classDb__WEBPACK_IMPORTED_MODULE_4__["default"].getRelations(); _logger__WEBPACK_IMPORTED_MODULE_5__.log.info('relations:', relations); relations.forEach(function (relation) { _logger__WEBPACK_IMPORTED_MODULE_5__.log.info('tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation)); g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), { relation: relation }, relation.title || 'DEFAULT'); }); dagre__WEBPACK_IMPORTED_MODULE_1___default().layout(g); g.nodes().forEach(function (v) { if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') { _logger__WEBPACK_IMPORTED_MODULE_5__.log.debug('Node ' + v + ': ' + JSON.stringify(g.node(v))); (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)('#' + (0,_classDb__WEBPACK_IMPORTED_MODULE_4__.lookUpDomId)(v)).attr('transform', 'translate(' + (g.node(v).x - g.node(v).width / 2) + ',' + (g.node(v).y - g.node(v).height / 2) + ' )'); } }); g.edges().forEach(function (e) { if (typeof e !== 'undefined' && typeof g.edge(e) !== 'undefined') { _logger__WEBPACK_IMPORTED_MODULE_5__.log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e))); _svgDraw__WEBPACK_IMPORTED_MODULE_9__["default"].drawEdge(diagram, g.edge(e), g.edge(e).relation, conf); } }); var svgBounds = diagram.node().getBBox(); var width = svgBounds.width + padding * 2; var height = svgBounds.height + padding * 2; (0,_utils__WEBPACK_IMPORTED_MODULE_7__.configureSvgSize)(diagram, height, width, conf.useMaxWidth); // Ensure the viewBox includes the whole svgBounds area with extra space for padding var vBox = "".concat(svgBounds.x - padding, " ").concat(svgBounds.y - padding, " ").concat(width, " ").concat(height); _logger__WEBPACK_IMPORTED_MODULE_5__.log.debug("viewBox ".concat(vBox)); diagram.attr('viewBox', vBox); }; var draw = function draw(text, id) { _logger__WEBPACK_IMPORTED_MODULE_5__.log.info('Drawing class'); _classDb__WEBPACK_IMPORTED_MODULE_4__["default"].clear(); // const parser = classDb.parser; // parser.yy = classDb; // Parse the graph definition // try { _parser_classDiagram__WEBPACK_IMPORTED_MODULE_3__.parser.parse(text); // } catch (err) { // log.debug('Parsing failed'); // } // Fetch the default direction, use TD if none was found //let dir = 'TD'; var conf = (0,_config__WEBPACK_IMPORTED_MODULE_6__.getConfig)().flowchart; _logger__WEBPACK_IMPORTED_MODULE_5__.log.info('config:', conf); var nodeSpacing = conf.nodeSpacing || 50; var rankSpacing = conf.rankSpacing || 50; // Create the input mermaid.graph var g = new (graphlib__WEBPACK_IMPORTED_MODULE_2___default().Graph)({ multigraph: true, compound: true }).setGraph({ rankdir: _classDb__WEBPACK_IMPORTED_MODULE_4__["default"].getDirection(), nodesep: nodeSpacing, ranksep: rankSpacing, marginx: 8, marginy: 8 }).setDefaultEdgeLabel(function () { return {}; }); // let subG; // const subGraphs = flowDb.getSubGraphs(); // log.info('Subgraphs - ', subGraphs); // for (let i = subGraphs.length - 1; i >= 0; i--) { // subG = subGraphs[i]; // log.info('Subgraph - ', subG); // flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes); // } // Fetch the verices/nodes and edges/links from the parsed graph definition var classes = _classDb__WEBPACK_IMPORTED_MODULE_4__["default"].getClasses(); var relations = _classDb__WEBPACK_IMPORTED_MODULE_4__["default"].getRelations(); _logger__WEBPACK_IMPORTED_MODULE_5__.log.info(relations); // let i = 0; // for (i = subGraphs.length - 1; i >= 0; i--) { // subG = subGraphs[i]; // selectAll('cluster').append('text'); // for (let j = 0; j < subG.nodes.length; j++) { // g.setParent(subG.nodes[j], subG.id); // } // } addClasses(classes, g, id); addRelations(relations, g); // Add custom shapes // flowChartShapes.addToRenderV2(addShape); // Set up an SVG group so that we can translate the final graph. var svg = (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)("[id=\"".concat(id, "\"]")); svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink'); // Run the renderer. This is what draws the final graph. var element = (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)('#' + id + ' g'); (0,_dagre_wrapper_index_js__WEBPACK_IMPORTED_MODULE_10__.render)(element, g, ['aggregation', 'extension', 'composition', 'dependency'], 'classDiagram', id); // element.selectAll('g.node').attr('title', function() { // return flowDb.getTooltip(this.id); // }); var padding = 8; var svgBounds = svg.node().getBBox(); var width = svgBounds.width + padding * 2; var height = svgBounds.height + padding * 2; _logger__WEBPACK_IMPORTED_MODULE_5__.log.debug("new ViewBox 0 0 ".concat(width, " ").concat(height), "translate(".concat(padding - g._label.marginx, ", ").concat(padding - g._label.marginy, ")")); (0,_utils__WEBPACK_IMPORTED_MODULE_7__.configureSvgSize)(svg, height, width, conf.useMaxWidth); svg.attr('viewBox', "0 0 ".concat(width, " ").concat(height)); svg.select('g').attr('transform', "translate(".concat(padding - g._label.marginx, ", ").concat(padding - svgBounds.y, ")")); // Index nodes // flowDb.indexNodes('subGraph' + i); // Add label rects for non html labels if (!conf.htmlLabels) { var labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label'); for (var k = 0; k < labels.length; k++) { var label = labels[k]; // Get dimensions of label var dim = label.getBBox(); var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); rect.setAttribute('rx', 0); rect.setAttribute('ry', 0); rect.setAttribute('width', dim.width); rect.setAttribute('height', dim.height); // rect.setAttribute('style', 'fill:#e8e8e8;'); label.insertBefore(rect, label.firstChild); } } // If node has a link, wrap it in an anchor SVG object. // const keys = Object.keys(classes); // keys.forEach(function(key) { // const vertex = classes[key]; // if (vertex.link) { // const node = select('#' + id + ' [id="' + key + '"]'); // if (node) { // const link = document.createElementNS('http://www.w3.org/2000/svg', 'a'); // link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' ')); // link.setAttributeNS('http://www.w3.org/2000/svg', 'href', vertex.link); // link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener'); // const linkNode = node.insert(function() { // return link; // }, ':first-child'); // const shape = node.select('.label-container'); // if (shape) { // linkNode.append(function() { // return shape.node(); // }); // } // const label = node.select('.label'); // if (label) { // linkNode.append(function() { // return label.node(); // }); // } // } // } // }); }; /** * Gets the arrow marker for a type index * * @param {number} type The type to look for * @returns {'aggregation' | 'extension' | 'composition' | 'dependency'} The arrow marker */ function getArrowMarker(type) { var marker; switch (type) { case 0: marker = 'aggregation'; break; case 1: marker = 'extension'; break; case 2: marker = 'composition'; break; case 3: marker = 'dependency'; break; default: marker = 'none'; } return marker; } /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({ setConf: setConf, draw: draw }); /***/ }), /***/ "./src/diagrams/class/classRenderer.js": /*!*********************************************!*\ !*** ./src/diagrams/class/classRenderer.js ***! \*********************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "setConf": () => (/* binding */ setConf), /* harmony export */ "draw": () => (/* binding */ draw), /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! d3 */ "d3"); /* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(d3__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var dagre__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! dagre */ "dagre"); /* harmony import */ var dagre__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(dagre__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var graphlib__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! graphlib */ "graphlib"); /* harmony import */ var graphlib__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(graphlib__WEBPACK_IMPORTED_MODULE_2__); /* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../logger */ "./src/logger.js"); /* harmony import */ var _classDb__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./classDb */ "./src/diagrams/class/classDb.js"); /* harmony import */ var _parser_classDiagram__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./parser/classDiagram */ "./src/diagrams/class/parser/classDiagram.jison"); /* harmony import */ var _parser_classDiagram__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_parser_classDiagram__WEBPACK_IMPORTED_MODULE_3__); /* harmony import */ var _svgDraw__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./svgDraw */ "./src/diagrams/class/svgDraw.js"); /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../utils */ "./src/utils.js"); _parser_classDiagram__WEBPACK_IMPORTED_MODULE_3__.parser.yy = _classDb__WEBPACK_IMPORTED_MODULE_4__["default"]; var idCache = {}; var padding = 20; var conf = { dividerMargin: 10, padding: 5, textHeight: 10 }; /** * Gets the ID with the same label as in the cache * * @param {string} label The label to look for * @returns {string} The resulting ID */ var getGraphId = function getGraphId(label) { var foundEntry = Object.entries(idCache).find(function (entry) { return entry[1].label === label; }); if (foundEntry) { return foundEntry[0]; } }; /** * Setup arrow head and define the marker. The result is appended to the svg. * * @param {SVGSVGElement} elem The SVG element to append to */ var insertMarkers = function insertMarkers(elem) { elem.append('defs').append('marker').attr('id', 'extensionStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 1,7 L18,13 V 1 Z'); elem.append('defs').append('marker').attr('id', 'extensionEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 1,1 V 13 L18,7 Z'); // this is actual shape for arrowhead elem.append('defs').append('marker').attr('id', 'compositionStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z'); elem.append('defs').append('marker').attr('id', 'compositionEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z'); elem.append('defs').append('marker').attr('id', 'aggregationStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z'); elem.append('defs').append('marker').attr('id', 'aggregationEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z'); elem.append('defs').append('marker').attr('id', 'dependencyStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z'); elem.append('defs').append('marker').attr('id', 'dependencyEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z'); }; /** * Merges the value of `conf` with the passed `cnf` * * @param {object} cnf Config to merge */ var setConf = function setConf(cnf) { var keys = Object.keys(cnf); keys.forEach(function (key) { conf[key] = cnf[key]; }); }; /** * Draws a flowchart in the tag with id: id based on the graph definition in text. * * @param {string} text * @param {string} id */ var draw = function draw(text, id) { idCache = {}; _parser_classDiagram__WEBPACK_IMPORTED_MODULE_3__.parser.yy.clear(); _parser_classDiagram__WEBPACK_IMPORTED_MODULE_3__.parser.parse(text); _logger__WEBPACK_IMPORTED_MODULE_5__.log.info('Rendering diagram ' + text); // Fetch the default direction, use TD if none was found var diagram = (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)("[id='".concat(id, "']")); diagram.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink'); insertMarkers(diagram); // Layout graph, Create a new directed graph var g = new (graphlib__WEBPACK_IMPORTED_MODULE_2___default().Graph)({ multigraph: true }); // Set an object for the graph label g.setGraph({ isMultiGraph: true }); // Default to assigning a new object as a label for each new edge. g.setDefaultEdgeLabel(function () { return {}; }); var classes = _classDb__WEBPACK_IMPORTED_MODULE_4__["default"].getClasses(); var keys = Object.keys(classes); for (var i = 0; i < keys.length; i++) { var classDef = classes[keys[i]]; var node = _svgDraw__WEBPACK_IMPORTED_MODULE_6__["default"].drawClass(diagram, classDef, conf); idCache[node.id] = node; // Add nodes to the graph. The first argument is the node id. The second is // metadata about the node. In this case we're going to add labels to each of // our nodes. g.setNode(node.id, node); _logger__WEBPACK_IMPORTED_MODULE_5__.log.info('Org height: ' + node.height); } var relations = _classDb__WEBPACK_IMPORTED_MODULE_4__["default"].getRelations(); relations.forEach(function (relation) { _logger__WEBPACK_IMPORTED_MODULE_5__.log.info('tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation)); g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), { relation: relation }, relation.title || 'DEFAULT'); }); dagre__WEBPACK_IMPORTED_MODULE_1___default().layout(g); g.nodes().forEach(function (v) { if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') { _logger__WEBPACK_IMPORTED_MODULE_5__.log.debug('Node ' + v + ': ' + JSON.stringify(g.node(v))); (0,d3__WEBPACK_IMPORTED_MODULE_0__.select)('#' + (0,_classDb__WEBPACK_IMPORTED_MODULE_4__.lookUpDomId)(v)).attr('transform', 'translate(' + (g.node(v).x - g.node(v).width / 2) + ',' + (g.node(v).y - g.node(v).height / 2) + ' )'); } }); g.edges().forEach(function (e) { if (typeof e !== 'undefined' && typeof g.edge(e) !== 'undefined') { _logger__WEBPACK_IMPORTED_MODULE_5__.log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e))); _svgDraw__WEBPACK_IMPORTED_MODULE_6__["default"].drawEdge(diagram, g.edge(e), g.edge(e).relation, conf); } }); var svgBounds = diagram.node().getBBox(); var width = svgBounds.width + padding * 2; var height = svgBounds.height + padding * 2; (0,_utils__WEBPACK_IMPORTED_MODULE_7__.configureSvgSize)(diagram, height, width, conf.useMaxWidth); // Ensure the viewBox includes the whole svgBounds area with extra space for padding var vBox = "".concat(svgBounds.x - padding, " ").concat(svgBounds.y - padding, " ").concat(width, " ").concat(height); _logger__WEBPACK_IMPORTED_MODULE_5__.log.debug("viewBox ".concat(vBox)); diagram.attr('viewBox', vBox); }; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({ setConf: setConf, draw: draw }); /***/ }), /***/ "./src/diagrams/class/styles.js": /*!**************************************!*\ !*** ./src/diagrams/class/styles.js ***! \**************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); var getStyles = function getStyles(options) { return "g.classGroup text {\n fill: ".concat(options.nodeBorder, ";\n fill: ").concat(options.classText, ";\n stroke: none;\n font-family: ").concat(options.fontFamily, ";\n font-size: 10px;\n\n .title {\n font-weight: bolder;\n }\n\n}\n\n.nodeLabel, .edgeLabel {\n color: ").concat(options.classText, ";\n}\n.edgeLabel .label rect {\n fill: ").concat(options.mainBkg, ";\n}\n.label text {\n fill: ").concat(options.classText, ";\n}\n.edgeLabel .label span {\n background: ").concat(options.mainBkg, ";\n}\n\n.classTitle {\n font-weight: bolder;\n}\n.node rect,\n .node circle,\n .node ellipse,\n .node polygon,\n .node path {\n fill: ").concat(options.mainBkg, ";\n stroke: ").concat(options.nodeBorder, ";\n stroke-width: 1px;\n }\n\n\n.divider {\n stroke: ").concat(options.nodeBorder, ";\n stroke: 1;\n}\n\ng.clickable {\n cursor: pointer;\n}\n\ng.classGroup rect {\n fill: ").concat(options.mainBkg, ";\n stroke: ").concat(options.nodeBorder, ";\n}\n\ng.classGroup line {\n stroke: ").concat(options.nodeBorder, ";\n stroke-width: 1;\n}\n\n.classLabel .box {\n stroke: none;\n stroke-width: 0;\n fill: ").concat(options.mainBkg, ";\n opacity: 0.5;\n}\n\n.classLabel .label {\n fill: ").concat(options.nodeBorder, ";\n font-size: 10px;\n}\n\n.relation {\n stroke: ").concat(options.lineColor, ";\n stroke-width: 1;\n fill: none;\n}\n\n.dashed-line{\n stroke-dasharray: 3;\n}\n\n#compositionStart, .composition {\n fill: ").concat(options.lineColor, " !important;\n stroke: ").concat(options.lineColor, " !important;\n stroke-width: 1;\n}\n\n#compositionEnd, .composition {\n fill: ").concat(options.lineColor, " !important;\n stroke: ").concat(options.lineColor, " !important;\n stroke-width: 1;\n}\n\n#dependencyStart, .dependency {\n fill: ").concat(options.lineColor, " !important;\n stroke: ").concat(options.lineColor, " !important;\n stroke-width: 1;\n}\n\n#dependencyStart, .dependency {\n fill: ").concat(options.lineColor, " !important;\n stroke: ").concat(options.lineColor, " !important;\n stroke-width: 1;\n}\n\n#extensionStart, .extension {\n fill: ").concat(options.lineColor, " !important;\n stroke: ").concat(options.lineColor, " !important;\n stroke-width: 1;\n}\n\n#extensionEnd, .extension {\n fill: ").concat(options.lineColor, " !important;\n stroke: ").concat(options.lineColor, " !important;\n stroke-width: 1;\n}\n\n#aggregationStart, .aggregation {\n fill: ").concat(options.mainBkg, " !important;\n stroke: ").concat(options.lineColor, " !important;\n stroke-width: 1;\n}\n\n#aggregationEnd, .aggregation {\n fill: ").concat(options.mainBkg, " !important;\n stroke: ").concat(options.lineColor, " !important;\n stroke-width: 1;\n}\n\n.edgeTerminals {\n font-size: 11px;\n}\n\n"); }; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (getStyles); /***/ }), /***/ "./src/diagrams/class/svgDraw.js": /*!***************************************!*\ !*** ./src/diagrams/class/svgDraw.js ***! \***************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "drawEdge": () => (/* binding */ drawEdge), /* harmony export */ "drawClass": () => (/* binding */ drawClass), /* harmony export */ "parseMember": () => (/* binding */ parseMember), /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! d3 */ "d3"); /* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(d3__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _classDb__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./classDb */ "./src/diagrams/class/classDb.js"); /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../utils */ "./src/utils.js"); /* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../logger */ "./src/logger.js"); var edgeCount = 0; var drawEdge = function drawEdge(elem, path, relation, conf) { var getRelationType = function getRelationType(type) { switch (type) { case _classDb__WEBPACK_IMPORTED_MODULE_1__.relationType.AGGREGATION: return 'aggregation'; case _classDb__WEBPACK_IMPORTED_MODULE_1__.relationType.EXTENSION: return 'extension'; case _classDb__WEBPACK_IMPORTED_MODULE_1__.relationType.COMPOSITION: return 'composition'; case _classDb__WEBPACK_IMPORTED_MODULE_1__.relationType.DEPENDENCY: return 'dependency'; } }; path.points = path.points.filter(function (p) { return !Number.isNaN(p.y); }); // The data for our line var lineData = path.points; // This is the accessor function we talked about above var lineFunction = (0,d3__WEBPACK_IMPORTED_MODULE_0__.line)().x(function (d) { return d.x; }).y(function (d) { return d.y; }).curve(d3__WEBPACK_IMPORTED_MODULE_0__.curveBasis); var svgPath = elem.append('path').attr('d', lineFunction(lineData)).attr('id', 'edge' + edgeCount).attr('class', 'relation'); var url = ''; if (conf.arrowMarkerAbsolute) { url = window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search; url = url.replace(/\(/g, '\\('); url = url.replace(/\)/g, '\\)'); } if (relation.relation.lineType == 1) { svgPath.attr('class', 'relation dashed-line'); } if (relation.relation.type1 !== 'none') { svgPath.attr('marker-start', 'url(' + url + '#' + getRelationType(relation.relation.type1) + 'Start' + ')'); } if (relation.relation.type2 !== 'none') { svgPath.attr('marker-end', 'url(' + url + '#' + getRelationType(relation.relation.type2) + 'End' + ')'); } var x, y; var l = path.points.length; // Calculate Label position var labelPosition = _utils__WEBPACK_IMPORTED_MODULE_2__["default"].calcLabelPosition(path.points); x = labelPosition.x; y = labelPosition.y; var p1_card_x, p1_card_y; var p2_card_x, p2_card_y; if (l % 2 !== 0 && l > 1) { var cardinality_1_point = _utils__WEBPACK_IMPORTED_MODULE_2__["default"].calcCardinalityPosition(relation.relation.type1 !== 'none', path.points, path.points[0]); var cardinality_2_point = _utils__WEBPACK_IMPORTED_MODULE_2__["default"].calcCardinalityPosition(relation.relation.type2 !== 'none', path.points, path.points[l - 1]); _logger__WEBPACK_IMPORTED_MODULE_3__.log.debug('cardinality_1_point ' + JSON.stringify(cardinality_1_point)); _logger__WEBPACK_IMPORTED_MODULE_3__.log.debug('cardinality_2_point ' + JSON.stringify(cardinality_2_point)); p1_card_x = cardinality_1_point.x; p1_card_y = cardinality_1_point.y; p2_card_x = cardinality_2_point.x; p2_card_y = cardinality_2_point.y; } if (typeof relation.title !== 'undefined') { var g = elem.append('g').attr('class', 'classLabel'); var label = g.append('text').attr('class', 'label').attr('x', x).attr('y', y).attr('fill', 'red').attr('text-anchor', 'middle').text(relation.title); window.label = label; var bounds = label.node().getBBox(); g.insert('rect', ':first-child').attr('class', 'box').attr('x', bounds.x - conf.padding / 2).attr('y', bounds.y - conf.padding / 2).attr('width', bounds.width + conf.padding).attr('height', bounds.height + conf.padding); } _logger__WEBPACK_IMPORTED_MODULE_3__.log.info('Rendering relation ' + JSON.stringify(relation)); if (typeof relation.relationTitle1 !== 'undefined' && relation.relationTitle1 !== 'none') { var _g = elem.append('g').attr('class', 'cardinality'); _g.append('text').attr('class', 'type1').attr('x', p1_card_x).attr('y', p1_card_y).attr('fill', 'black').attr('font-size', '6').text(relation.relationTitle1); } if (typeof relation.relationTitle2 !== 'undefined' && relation.relationTitle2 !== 'none') { var _g2 = elem.append('g').attr('class', 'cardinality'); _g2.append('text').attr('class', 'type2').attr('x', p2_card_x).attr('y', p2_card_y).attr('fill', 'black').attr('font-size', '6').text(relation.relationTitle2); } edgeCount++; }; /** * Renders a class diagram * * @param {SVGSVGElement} elem The element to draw it into * @param classDef * @param conf * @todo Add more information in the JSDOC here */ var drawClass = function drawClass(elem, classDef, conf) { _logger__WEBPACK_IMPORTED_MODULE_3__.log.info('Rendering class ' + classDef); var id = classDef.id; var classInfo = { id: id, label: classDef.id, width: 0, height: 0 }; // add class group var g = elem.append('g').attr('id', (0,_classDb__WEBPACK_IMPORTED_MODULE_1__.lookUpDomId)(id)).attr('class', 'classGroup'); // add title var title; if (classDef.link) { title = g.append('svg:a').attr('xlink:href', classDef.link).attr('target', classDef.linkTarget).append('text').attr('y', conf.textHeight + conf.padding).attr('x', 0); } else { title = g.append('text').attr('y', conf.textHeight + conf.padding).attr('x', 0); } // add annotations var isFirst = true; classDef.annotations.forEach(function (member) { var titleText2 = title.append('tspan').text('«' + member + '»'); if (!isFirst) titleText2.attr('dy', conf.textHeight); isFirst = false; }); var classTitleString = classDef.id; if (classDef.type !== undefined && classDef.type !== '') { classTitleString += '<' + classDef.type + '>'; } var classTitle = title.append('tspan').text(classTitleString).attr('class', 'title'); // If class has annotations the title needs to have an offset of the text height if (!isFirst) classTitle.attr('dy', conf.textHeight); var titleHeight = title.node().getBBox().height; var membersLine = g.append('line') // text label for the x axis .attr('x1', 0).attr('y1', conf.padding + titleHeight + conf.dividerMargin / 2).attr('y2', conf.padding + titleHeight + conf.dividerMargin / 2); var members = g.append('text') // text label for the x axis .attr('x', conf.padding).attr('y', titleHeight + conf.dividerMargin + conf.textHeight).attr('fill', 'white').attr('class', 'classText'); isFirst = true; classDef.members.forEach(function (member) { addTspan(members, member, isFirst, conf); isFirst = false; }); var membersBox = members.node().getBBox(); var methodsLine = g.append('line') // text label for the x axis .attr('x1', 0).attr('y1', conf.padding + titleHeight + conf.dividerMargin + membersBox.height).attr('y2', conf.padding + titleHeight + conf.dividerMargin + membersBox.height); var methods = g.append('text') // text label for the x axis .attr('x', conf.padding).attr('y', titleHeight + 2 * conf.dividerMargin + membersBox.height + conf.textHeight).attr('fill', 'white').attr('class', 'classText'); isFirst = true; classDef.methods.forEach(function (method) { addTspan(methods, method, isFirst, conf); isFirst = false; }); var classBox = g.node().getBBox(); var cssClassStr = ' '; if (classDef.cssClasses.length > 0) { cssClassStr = cssClassStr + classDef.cssClasses.join(' '); } var rect = g.insert('rect', ':first-child').attr('x', 0).attr('y', 0).attr('width', classBox.width + 2 * conf.padding).attr('height', classBox.height + conf.padding + 0.5 * conf.dividerMargin).attr('class', cssClassStr); var rectWidth = rect.node().getBBox().width; // Center title // We subtract the width of each text element from the class box width and divide it by 2 title.node().childNodes.forEach(function (x) { x.setAttribute('x', (rectWidth - x.getBBox().width) / 2); }); if (classDef.tooltip) { title.insert('title').text(classDef.tooltip); } membersLine.attr('x2', rectWidth); methodsLine.attr('x2', rectWidth); classInfo.width = rectWidth; classInfo.height = classBox.height + conf.padding + 0.5 * conf.dividerMargin; return classInfo; }; var parseMember = function parseMember(text) { var fieldRegEx = /^(\+|-|~|#)?(\w+)(~\w+~|\[\])?\s+(\w+) *(\*|\$)?$/; var methodRegEx = /^([+|\-|~|#])?(\w+) *\( *(.*)\) *(\*|\$)? *(\w*[~|[\]]*\s*\w*~?)$/; var fieldMatch = text.match(fieldRegEx); var methodMatch = text.match(methodRegEx); if (fieldMatch && !methodMatch) { return buildFieldDisplay(fieldMatch); } else if (methodMatch) { return buildMethodDisplay(methodMatch); } else { return buildLegacyDisplay(text); } }; var buildFieldDisplay = function buildFieldDisplay(parsedText) { var cssStyle = ''; var displayText = ''; try { var visibility = parsedText[1] ? parsedText[1].trim() : ''; var fieldType = parsedText[2] ? parsedText[2].trim() : ''; var genericType = parsedText[3] ? parseGenericTypes(parsedText[3].trim()) : ''; var fieldName = parsedText[4] ? parsedText[4].trim() : ''; var classifier = parsedText[5] ? parsedText[5].trim() : ''; displayText = visibility + fieldType + genericType + ' ' + fieldName; cssStyle = parseClassifier(classifier); } catch (err) { displayText = parsedText; } return { displayText: displayText, cssStyle: cssStyle }; }; var buildMethodDisplay = function buildMethodDisplay(parsedText) { var cssStyle = ''; var displayText = ''; try { var visibility = parsedText[1] ? parsedText[1].trim() : ''; var methodName = parsedText[2] ? parsedText[2].trim() : ''; var parameters = parsedText[3] ? parseGenericTypes(parsedText[3].trim()) : ''; var classifier = parsedText[4] ? parsedText[4].trim() : ''; var returnType = parsedText[5] ? ' : ' + parseGenericTypes(parsedText[5]).trim() : ''; displayText = visibility + methodName + '(' + parameters + ')' + returnType; cssStyle = parseClassifier(classifier); } catch (err) { displayText = parsedText; } return { displayText: displayText, cssStyle: cssStyle }; }; var buildLegacyDisplay = function buildLegacyDisplay(text) { // if for some reason we dont have any match, use old format to parse text var displayText = ''; var cssStyle = ''; var memberText = ''; var returnType = ''; var methodStart = text.indexOf('('); var methodEnd = text.indexOf(')'); if (methodStart > 1 && methodEnd > methodStart && methodEnd <= text.length) { var visibility = ''; var methodName = ''; var firstChar = text.substring(0, 1); if (firstChar.match(/\w/)) { methodName = text.substring(0, methodStart).trim(); } else { if (firstChar.match(/\+|-|~|#/)) { visibility = firstChar; } methodName = text.substring(1, methodStart).trim(); } var parameters = text.substring(methodStart + 1, methodEnd); var classifier = text.substring(methodEnd + 1, 1); cssStyle = parseClassifier(classifier); displayText = visibility + methodName + '(' + parseGenericTypes(parameters.trim()) + ')'; if (methodEnd < memberText.length) { returnType = text.substring(methodEnd + 2).trim(); if (returnType !== '') { returnType = ' : ' + parseGenericTypes(returnType); } } } else { // finally - if all else fails, just send the text back as written (other than parsing for generic types) displayText = parseGenericTypes(text); } return { displayText: displayText, cssStyle: cssStyle }; }; /** * Adds a for a member in a diagram * * @param {SVGElement} textEl The element to append to * @param {string} txt The member * @param {boolean} isFirst * @param {{ padding: string; textHeight: string }} conf The configuration for the member */ var addTspan = function addTspan(textEl, txt, isFirst, conf) { var member = parseMember(txt); var tSpan = textEl.append('tspan').attr('x', conf.padding).text(member.displayText); if (member.cssStyle !== '') { tSpan.attr('style', member.cssStyle); } if (!isFirst) { tSpan.attr('dy', conf.textHeight); } }; /** * Makes generics in typescript syntax * * @example Array of array of strings in typescript syntax * // returns "Array>" * parseGenericTypes('Array~Array~string~~'); * * @param {string} text The text to convert * @returns {string} The converted string */ var parseGenericTypes = function parseGenericTypes(text) { var cleanedText = text; if (text.indexOf('~') != -1) { cleanedText = cleanedText.replace('~', '<'); cleanedText = cleanedText.replace('~', '>'); return parseGenericTypes(cleanedText); } else { return cleanedText; } }; /** * Gives the styles for a classifier * * @param {'+' | '-' | '#' | '~' | '*' | '$'} classifier The classifier string * @returns {string} Styling for the classifier */ var parseClassifier = function parseClassifier(classifier) { switch (classifier) { case '*': return 'font-style:italic;'; case '$': return 'text-decoration:underline;'; default: return ''; } }; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({ drawClass: drawClass, drawEdge: drawEdge, parseMember: parseMember }); /***/ }), /***/ "./src/diagrams/common/common.js": /*!***************************************!*\ !*** ./src/diagrams/common/common.js ***! \***************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "getRows": () => (/* binding */ getRows), /* harmony export */ "removeScript": () => (/* binding */ removeScript), /* harmony export */ "sanitizeText": () => (/* binding */ sanitizeText), /* harmony export */ "sanitizeTextOrArray": () => (/* binding */ sanitizeTextOrArray), /* harmony export */ "lineBreakRegex": () => (/* binding */ lineBreakRegex), /* harmony export */ "hasBreaks": () => (/* binding */ hasBreaks), /* harmony export */ "splitBreaks": () => (/* binding */ splitBreaks), /* harmony export */ "evaluate": () => (/* binding */ evaluate), /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var dompurify__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! dompurify */ "dompurify"); /* harmony import */ var dompurify__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(dompurify__WEBPACK_IMPORTED_MODULE_0__); /** * Gets the number of lines in a string * * @param {string | undefined} s The string to check the lines for * @returns {number} The number of lines in that string */ var getRows = function getRows(s) { if (!s) return 1; var str = breakToPlaceholder(s); str = str.replace(/\\n/g, '#br#'); return str.split('#br#'); }; /** * Removes script tags from a text * * @param {string} txt The text to sanitize * @returns {string} The safer text */ var removeScript = function removeScript(txt) { var rs = ''; var idx = 0; while (idx >= 0) { idx = txt.indexOf('= 0) { rs += txt.substr(0, idx); txt = txt.substr(idx + 1); idx = txt.indexOf(''); if (idx >= 0) { idx += 9; txt = txt.substr(idx); } } else { rs += txt; idx = -1; break; } } rs = rs.replace(/script>/gi, '#'); rs = rs.replace(/script>/gi, '#'); rs = rs.replace(/javascript:/gi, '#'); rs = rs.replace(/onerror=/gi, 'onerror:'); rs = rs.replace(/