Additionally, dissimilar types will not clobber unless the\n * config.clobber parameter === true. Example:\n *\n * ```js\n * let config_0 = { foo: { bar: 'bar' }, bar: 'foo' };\n * let config_1 = { foo: 'foo', bar: 'bar' };\n * let result = assignWithDepth(config_0, config_1);\n * console.log(result);\n * //-> result: { foo: { bar: 'bar' }, bar: 'bar' }\n * ```\n *\n * Traditional Object.assign would have clobbered foo in config_0 with foo in config_1. If src is a\n * destructured array of objects and dst is not an array, assignWithDepth will apply each element\n * of src to dst in order.\n * @param dst\n * @param src\n * @param config\n * @param dst\n * @param src\n * @param config\n * @param dst\n * @param src\n * @param config\n * @param {any} dst - The destination of the merge\n * @param {any} src - The source object(s) to merge into destination\n * @param {{ depth: number; clobber: boolean }} [config={ depth: 2, clobber: false }] - Depth: depth\n * to traverse within src and dst for merging - clobber: should dissimilar types clobber (default:\n * { depth: 2, clobber: false }). Default is `{ depth: 2, clobber: false }`\n * @returns {any}\n */\nconst assignWithDepth = function (dst, src, config) {\n const { depth, clobber } = Object.assign({ depth: 2, clobber: false }, config);\n if (Array.isArray(src) && !Array.isArray(dst)) {\n src.forEach((s) => assignWithDepth(dst, s, config));\n return dst;\n } else if (Array.isArray(src) && Array.isArray(dst)) {\n src.forEach((s) => {\n if (dst.indexOf(s) === -1) {\n dst.push(s);\n }\n });\n return dst;\n }\n if (typeof dst === 'undefined' || depth <= 0) {\n if (dst !== undefined && dst !== null && typeof dst === 'object' && typeof src === 'object') {\n return Object.assign(dst, src);\n } else {\n return src;\n }\n }\n if (typeof src !== 'undefined' && typeof dst === 'object' && typeof src === 'object') {\n Object.keys(src).forEach((key) => {\n if (\n typeof src[key] === 'object' &&\n (dst[key] === undefined || typeof dst[key] === 'object')\n ) {\n if (dst[key] === undefined) {\n dst[key] = Array.isArray(src[key]) ? [] : {};\n }\n dst[key] = assignWithDepth(dst[key], src[key], { depth: depth - 1, clobber });\n } else if (clobber || (typeof dst[key] !== 'object' && typeof src[key] !== 'object')) {\n dst[key] = src[key];\n }\n });\n }\n return dst;\n};\n\nexport default assignWithDepth;\n","import { sanitizeText as _sanitizeText } from './diagrams/common/common';\nimport { getConfig } from './config';\nlet title = '';\nlet diagramTitle = '';\nlet description = '';\nconst sanitizeText = (txt) => _sanitizeText(txt, getConfig());\n\nexport const clear = function () {\n title = '';\n description = '';\n diagramTitle = '';\n};\n\nexport const setAccTitle = function (txt) {\n title = sanitizeText(txt).replace(/^\\s+/g, '');\n};\n\nexport const getAccTitle = function () {\n return title || diagramTitle;\n};\n\nexport const setAccDescription = function (txt) {\n description = sanitizeText(txt).replace(/\\n\\s+/g, '\\n');\n};\n\nexport const getAccDescription = function () {\n return description;\n};\n\nexport const setDiagramTitle = function (txt) {\n diagramTitle = sanitizeText(txt);\n};\n\nexport const getDiagramTitle = function () {\n return diagramTitle;\n};\n\nexport default {\n setAccTitle,\n getAccTitle,\n setDiagramTitle,\n getDiagramTitle: getDiagramTitle,\n getAccDescription,\n setAccDescription,\n clear,\n};\n","import assignWithDepth from './assignWithDepth';\nimport { log } from './logger';\nimport theme from './themes';\nimport config from './defaultConfig';\n\nexport const defaultConfig = Object.freeze(config);\n\nlet siteConfig = assignWithDepth({}, defaultConfig);\nlet configFromInitialize;\nlet directives = [];\nlet currentConfig = assignWithDepth({}, defaultConfig);\n\nexport const updateCurrentConfig = (siteCfg, _directives) => {\n // start with config beeing the siteConfig\n let cfg = assignWithDepth({}, siteCfg);\n // let sCfg = assignWithDepth(defaultConfig, siteConfigDelta);\n\n // Join directives\n let sumOfDirectives = {};\n for (let i = 0; i < _directives.length; i++) {\n const d = _directives[i];\n sanitize(d);\n\n // Apply the data from the directive where the the overrides the themeVariables\n sumOfDirectives = assignWithDepth(sumOfDirectives, d);\n }\n\n cfg = assignWithDepth(cfg, sumOfDirectives);\n\n if (sumOfDirectives.theme && theme[sumOfDirectives.theme]) {\n const tmpConfigFromInitialize = assignWithDepth({}, configFromInitialize);\n const themeVariables = assignWithDepth(\n tmpConfigFromInitialize.themeVariables || {},\n sumOfDirectives.themeVariables\n );\n cfg.themeVariables = theme[cfg.theme].getThemeVariables(themeVariables);\n }\n\n currentConfig = cfg;\n return cfg;\n};\n\n/**\n * ## setSiteConfig\n *\n * | Function | Description | Type | Values |\n * | ------------- | ------------------------------------- | ----------- | --------------------------------------- |\n * | setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |\n *\n * **Notes:** Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls\n * to reset() will reset the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig)\n * will reset siteConfig and currentConfig to the defaultConfig Note: currentConfig is set in this\n * function _Default value: At default, will mirror Global Config_\n *\n * @param conf - The base currentConfig to use as siteConfig\n * @returns {object} - The siteConfig\n */\nexport const setSiteConfig = (conf) => {\n siteConfig = assignWithDepth({}, defaultConfig);\n siteConfig = assignWithDepth(siteConfig, conf);\n\n if (conf.theme && theme[conf.theme]) {\n siteConfig.themeVariables = theme[conf.theme].getThemeVariables(conf.themeVariables);\n }\n\n currentConfig = updateCurrentConfig(siteConfig, directives);\n return siteConfig;\n};\n\nexport const saveConfigFromInitialize = (conf) => {\n configFromInitialize = assignWithDepth({}, conf);\n};\n\nexport const updateSiteConfig = (conf) => {\n siteConfig = assignWithDepth(siteConfig, conf);\n updateCurrentConfig(siteConfig, directives);\n\n return siteConfig;\n};\n/**\n * ## getSiteConfig\n *\n * | Function | Description | Type | Values |\n * | ------------- | ------------------------------------------------- | ----------- | -------------------------------- |\n * | setSiteConfig | Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig |\n *\n * **Notes**: Returns **any** values in siteConfig.\n *\n * @returns {object} - The siteConfig\n */\nexport const getSiteConfig = () => {\n return assignWithDepth({}, siteConfig);\n};\n/**\n * ## setConfig\n *\n * | Function | Description | Type | Values |\n * | ------------- | ------------------------------------- | ----------- | --------------------------------------- |\n * | setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |\n *\n * **Notes**: Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure\n * keys. Any values found in conf with key found in siteConfig.secure will be replaced with the\n * corresponding siteConfig value.\n *\n * @param {any} conf - The potential currentConfig\n * @returns {any} - The currentConfig merged with the sanitized conf\n */\nexport const setConfig = (conf) => {\n // sanitize(conf);\n // Object.keys(conf).forEach(key => {\n // const manipulator = manipulators[key];\n // conf[key] = manipulator ? manipulator(conf[key]) : conf[key];\n // });\n\n assignWithDepth(currentConfig, conf);\n\n return getConfig();\n};\n\n/**\n * ## getConfig\n *\n * | Function | Description | Type | Return Values |\n * | --------- | ------------------------- | ----------- | ------------------------------ |\n * | getConfig | Obtains the currentConfig | Get Request | Any Values from current Config |\n *\n * **Notes**: Returns **any** the currentConfig\n *\n * @returns {any} - The currentConfig\n */\nexport const getConfig = () => {\n return assignWithDepth({}, currentConfig);\n};\n/**\n * ## sanitize\n *\n * | Function | Description | Type | Values |\n * | -------- | -------------------------------------- | ----------- | ------ |\n * | sanitize | Sets the siteConfig to desired values. | Put Request | None |\n *\n * Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies\n * options in-place\n *\n * @param {any} options - The potential setConfig parameter\n */\nexport const sanitize = (options) => {\n // Checking that options are not in the list of excluded options\n Object.keys(siteConfig.secure).forEach((key) => {\n if (typeof options[siteConfig.secure[key]] !== 'undefined') {\n // DO NOT attempt to print options[siteConfig.secure[key]] within `${}` as a malicious script\n // can exploit the logger's attempt to stringify the value and execute arbitrary code\n log.debug(\n `Denied attempt to modify a secure key ${siteConfig.secure[key]}`,\n options[siteConfig.secure[key]]\n );\n delete options[siteConfig.secure[key]];\n }\n });\n\n // Check that there no attempts of prototype pollution\n Object.keys(options).forEach((key) => {\n if (key.indexOf('__') === 0) {\n delete options[key];\n }\n });\n // Check that there no attempts of xss, there should be no tags at all in the directive\n // blocking data urls as base64 urls can contain svgs with inline script tags\n Object.keys(options).forEach((key) => {\n if (typeof options[key] === 'string') {\n if (\n options[key].indexOf('<') > -1 ||\n options[key].indexOf('>') > -1 ||\n options[key].indexOf('url(data:') > -1\n ) {\n delete options[key];\n }\n }\n if (typeof options[key] === 'object') {\n sanitize(options[key]);\n }\n });\n};\n\n/**\n * Pushes in a directive to the configuration\n *\n * @param {object} directive The directive to push in\n */\nexport const addDirective = (directive) => {\n if (directive.fontFamily) {\n if (!directive.themeVariables) {\n directive.themeVariables = { fontFamily: directive.fontFamily };\n } else {\n if (!directive.themeVariables.fontFamily) {\n directive.themeVariables = { fontFamily: directive.fontFamily };\n }\n }\n }\n directives.push(directive);\n updateCurrentConfig(siteConfig, directives);\n};\n\n/**\n * ## reset\n *\n * | Function | Description | Type | Required | Values |\n * | -------- | ---------------------------- | ----------- | -------- | ------ |\n * | reset | Resets currentConfig to conf | Put Request | Required | None |\n *\n * ## conf\n *\n * | Parameter | Description | Type | Required | Values |\n * | --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |\n * | conf | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |\n *\n * **Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)\n */\nexport const reset = () => {\n // Replace current config with siteConfig\n directives = [];\n updateCurrentConfig(siteConfig, directives);\n};\n","import intersectRect from './intersect/intersect-rect';\nimport { log } from '../logger';\nimport createLabel from './createLabel';\nimport { select } from 'd3';\nimport { getConfig } from '../config';\nimport { evaluate } from '../diagrams/common/common';\n\nconst rect = (parent, node) => {\n log.trace('Creating subgraph rect for ', node.id, node);\n\n // Add outer g element\n const shapeSvg = parent\n .insert('g')\n .attr('class', 'cluster' + (node.class ? ' ' + node.class : ''))\n .attr('id', node.id);\n\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n // Create the label and insert it after the rect\n const label = shapeSvg.insert('g').attr('class', 'cluster-label');\n\n const text = label\n .node()\n .appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));\n\n // Get the size of the label\n let bbox = text.getBBox();\n\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = text.children[0];\n const dv = select(text);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n\n const padding = 0 * node.padding;\n const halfPadding = padding / 2;\n\n const width = node.width <= bbox.width + padding ? bbox.width + padding : node.width;\n if (node.width <= bbox.width + padding) {\n node.diff = (bbox.width - node.width) / 2 - node.padding / 2;\n } else {\n node.diff = -node.padding / 2;\n }\n\n log.trace('Data ', node, JSON.stringify(node));\n // center the rect around its coordinate\n rect\n .attr('style', node.style)\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('x', node.x - width / 2)\n .attr('y', node.y - node.height / 2 - halfPadding)\n .attr('width', width)\n .attr('height', node.height + padding);\n\n // Center the label\n label.attr(\n 'transform',\n 'translate(' +\n (node.x - bbox.width / 2) +\n ', ' +\n (node.y - node.height / 2 + node.padding / 3) +\n ')'\n );\n\n const rectBox = rect.node().getBBox();\n node.width = rectBox.width;\n node.height = rectBox.height;\n\n node.intersect = function (point) {\n return intersectRect(node, point);\n };\n\n return shapeSvg;\n};\n\n/**\n * Non visible cluster where the note is group with its\n *\n * @param {any} parent\n * @param {any} node\n * @returns {any} ShapeSvg\n */\nconst noteGroup = (parent, node) => {\n // Add outer g element\n const shapeSvg = parent.insert('g').attr('class', 'note-cluster').attr('id', node.id);\n\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n const padding = 0 * node.padding;\n const halfPadding = padding / 2;\n\n // center the rect around its coordinate\n rect\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('x', node.x - node.width / 2 - halfPadding)\n .attr('y', node.y - node.height / 2 - halfPadding)\n .attr('width', node.width + padding)\n .attr('height', node.height + padding)\n .attr('fill', 'none');\n\n const rectBox = rect.node().getBBox();\n node.width = rectBox.width;\n node.height = rectBox.height;\n\n node.intersect = function (point) {\n return intersectRect(node, point);\n };\n\n return shapeSvg;\n};\nconst roundedWithTitle = (parent, node) => {\n // Add outer g element\n const shapeSvg = parent.insert('g').attr('class', node.classes).attr('id', node.id);\n\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n // Create the label and insert it after the rect\n const label = shapeSvg.insert('g').attr('class', 'cluster-label');\n const innerRect = shapeSvg.append('rect');\n\n const text = label\n .node()\n .appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));\n\n // Get the size of the label\n let bbox = text.getBBox();\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = text.children[0];\n const dv = select(text);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n bbox = text.getBBox();\n const padding = 0 * node.padding;\n const halfPadding = padding / 2;\n\n const width = node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width;\n if (node.width <= bbox.width + node.padding) {\n node.diff = (bbox.width + node.padding * 0 - node.width) / 2;\n } else {\n node.diff = -node.padding / 2;\n }\n\n // center the rect around its coordinate\n rect\n .attr('class', 'outer')\n .attr('x', node.x - width / 2 - halfPadding)\n .attr('y', node.y - node.height / 2 - halfPadding)\n .attr('width', width + padding)\n .attr('height', node.height + padding);\n innerRect\n .attr('class', 'inner')\n .attr('x', node.x - width / 2 - halfPadding)\n .attr('y', node.y - node.height / 2 - halfPadding + bbox.height - 1)\n .attr('width', width + padding)\n .attr('height', node.height + padding - bbox.height - 3);\n\n // Center the label\n label.attr(\n 'transform',\n 'translate(' +\n (node.x - bbox.width / 2) +\n ', ' +\n (node.y -\n node.height / 2 -\n node.padding / 3 +\n (evaluate(getConfig().flowchart.htmlLabels) ? 5 : 3)) +\n ')'\n );\n\n const rectBox = rect.node().getBBox();\n node.height = rectBox.height;\n\n node.intersect = function (point) {\n return intersectRect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst divider = (parent, node) => {\n // Add outer g element\n const shapeSvg = parent.insert('g').attr('class', node.classes).attr('id', node.id);\n\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n const padding = 0 * node.padding;\n const halfPadding = padding / 2;\n\n // center the rect around its coordinate\n rect\n .attr('class', 'divider')\n .attr('x', node.x - node.width / 2 - halfPadding)\n .attr('y', node.y - node.height / 2)\n .attr('width', node.width + padding)\n .attr('height', node.height + padding);\n\n const rectBox = rect.node().getBBox();\n node.width = rectBox.width;\n node.height = rectBox.height;\n node.diff = -node.padding / 2;\n node.intersect = function (point) {\n return intersectRect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst shapes = { rect, roundedWithTitle, noteGroup, divider };\n\nlet clusterElems = {};\n\nexport const insertCluster = (elem, node) => {\n log.trace('Inserting cluster');\n const shape = node.shape || 'rect';\n clusterElems[node.id] = shapes[shape](elem, node);\n};\nexport const getClusterTitleWidth = (elem, node) => {\n const label = createLabel(node.labelText, node.labelStyle, undefined, true);\n elem.node().appendChild(label);\n const width = label.getBBox().width;\n elem.node().removeChild(label);\n return width;\n};\n\nexport const clear = () => {\n clusterElems = {};\n};\n\nexport const positionCluster = (node) => {\n log.info('Position cluster (' + node.id + ', ' + node.x + ', ' + node.y + ')');\n const el = clusterElems[node.id];\n\n el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');\n};\n","import { select } from 'd3';\nimport { log } from '../logger'; // eslint-disable-line\nimport { getConfig } from '../config';\nimport { sanitizeText, evaluate } from '../diagrams/common/common';\nimport { decodeEntities } from '../mermaidAPI';\n\nconst sanitizeTxt = (txt) => sanitizeText(txt, getConfig());\n\n/**\n * @param dom\n * @param styleFn\n */\nfunction applyStyle(dom, styleFn) {\n if (styleFn) {\n dom.attr('style', styleFn);\n }\n}\n\n/**\n * @param {any} node\n * @returns {SVGForeignObjectElement} Node\n */\nfunction addHtmlLabel(node) {\n const fo = select(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'));\n const div = fo.append('xhtml:div');\n\n const label = node.label;\n const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';\n div.html(\n '' +\n label +\n ''\n );\n\n applyStyle(div, node.labelStyle);\n div.style('display', 'inline-block');\n // Fix for firefox\n div.style('white-space', 'nowrap');\n div.attr('xmlns', 'http://www.w3.org/1999/xhtml');\n return fo.node();\n}\n\nconst createLabel = (_vertexText, style, isTitle, isNode) => {\n let vertexText = _vertexText || '';\n if (typeof vertexText === 'object') vertexText = vertexText[0];\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?\n vertexText = vertexText.replace(/\\\\n|\\n/g, '
');\n log.info('vertexText' + vertexText);\n const node = {\n isNode,\n label: decodeEntities(vertexText).replace(\n /fa[lrsb]?:fa-[\\w-]+/g,\n (s) => ``\n ),\n labelStyle: style.replace('fill:', 'color:'),\n };\n let vertexNode = addHtmlLabel(node);\n // vertexNode.parentNode.removeChild(vertexNode);\n return vertexNode;\n } else {\n const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n svgLabel.setAttribute('style', style.replace('color:', 'fill:'));\n let rows = [];\n if (typeof vertexText === 'string') {\n rows = vertexText.split(/\\\\n|\\n|
/gi);\n } else if (Array.isArray(vertexText)) {\n rows = vertexText;\n } else {\n rows = [];\n }\n\n for (let j = 0; j < rows.length; j++) {\n const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');\n tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');\n tspan.setAttribute('dy', '1em');\n tspan.setAttribute('x', '0');\n if (isTitle) {\n tspan.setAttribute('class', 'title-row');\n } else {\n tspan.setAttribute('class', 'row');\n }\n tspan.textContent = rows[j].trim();\n svgLabel.appendChild(tspan);\n }\n return svgLabel;\n }\n};\n\nexport default createLabel;\n","import { log } from '../logger'; // eslint-disable-line\nimport createLabel from './createLabel';\nimport { line, curveBasis, select } from 'd3';\nimport { getConfig } from '../config';\nimport utils from '../utils';\nimport { evaluate } from '../diagrams/common/common';\n\nlet edgeLabels = {};\nlet terminalLabels = {};\n\nexport const clear = () => {\n edgeLabels = {};\n terminalLabels = {};\n};\n\nexport const insertEdgeLabel = (elem, edge) => {\n // Create the actual text element\n const labelElement = createLabel(edge.label, edge.labelStyle);\n\n // Create outer g, edgeLabel, this will be positioned after graph layout\n const edgeLabel = elem.insert('g').attr('class', 'edgeLabel');\n\n // Create inner g, label, this will be positioned now for centering the text\n const label = edgeLabel.insert('g').attr('class', 'label');\n label.node().appendChild(labelElement);\n\n // Center the label\n let bbox = labelElement.getBBox();\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = labelElement.children[0];\n const dv = select(labelElement);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');\n\n // Make element accessible by id for positioning\n edgeLabels[edge.id] = edgeLabel;\n\n // Update the abstract data of the edge with the new information about its width and height\n edge.width = bbox.width;\n edge.height = bbox.height;\n\n let fo;\n if (edge.startLabelLeft) {\n // Create the actual text element\n const startLabelElement = createLabel(edge.startLabelLeft, edge.labelStyle);\n const startEdgeLabelLeft = elem.insert('g').attr('class', 'edgeTerminals');\n const inner = startEdgeLabelLeft.insert('g').attr('class', 'inner');\n fo = inner.node().appendChild(startLabelElement);\n const slBox = startLabelElement.getBBox();\n inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');\n if (!terminalLabels[edge.id]) {\n terminalLabels[edge.id] = {};\n }\n terminalLabels[edge.id].startLeft = startEdgeLabelLeft;\n setTerminalWidth(fo, edge.startLabelLeft);\n }\n if (edge.startLabelRight) {\n // Create the actual text element\n const startLabelElement = createLabel(edge.startLabelRight, edge.labelStyle);\n const startEdgeLabelRight = elem.insert('g').attr('class', 'edgeTerminals');\n const inner = startEdgeLabelRight.insert('g').attr('class', 'inner');\n fo = startEdgeLabelRight.node().appendChild(startLabelElement);\n inner.node().appendChild(startLabelElement);\n const slBox = startLabelElement.getBBox();\n inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');\n\n if (!terminalLabels[edge.id]) {\n terminalLabels[edge.id] = {};\n }\n terminalLabels[edge.id].startRight = startEdgeLabelRight;\n setTerminalWidth(fo, edge.startLabelRight);\n }\n if (edge.endLabelLeft) {\n // Create the actual text element\n const endLabelElement = createLabel(edge.endLabelLeft, edge.labelStyle);\n const endEdgeLabelLeft = elem.insert('g').attr('class', 'edgeTerminals');\n const inner = endEdgeLabelLeft.insert('g').attr('class', 'inner');\n fo = inner.node().appendChild(endLabelElement);\n const slBox = endLabelElement.getBBox();\n inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');\n\n endEdgeLabelLeft.node().appendChild(endLabelElement);\n\n if (!terminalLabels[edge.id]) {\n terminalLabels[edge.id] = {};\n }\n terminalLabels[edge.id].endLeft = endEdgeLabelLeft;\n setTerminalWidth(fo, edge.endLabelLeft);\n }\n if (edge.endLabelRight) {\n // Create the actual text element\n const endLabelElement = createLabel(edge.endLabelRight, edge.labelStyle);\n const endEdgeLabelRight = elem.insert('g').attr('class', 'edgeTerminals');\n const inner = endEdgeLabelRight.insert('g').attr('class', 'inner');\n\n fo = inner.node().appendChild(endLabelElement);\n const slBox = endLabelElement.getBBox();\n inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');\n\n endEdgeLabelRight.node().appendChild(endLabelElement);\n if (!terminalLabels[edge.id]) {\n terminalLabels[edge.id] = {};\n }\n terminalLabels[edge.id].endRight = endEdgeLabelRight;\n setTerminalWidth(fo, edge.endLabelRight);\n }\n};\n\n/**\n * @param {any} fo\n * @param {any} value\n */\nfunction setTerminalWidth(fo, value) {\n if (getConfig().flowchart.htmlLabels && fo) {\n fo.style.width = value.length * 9 + 'px';\n fo.style.height = '12px';\n }\n}\n\nexport const positionEdgeLabel = (edge, paths) => {\n log.info('Moving label abc78 ', edge.id, edge.label, edgeLabels[edge.id]);\n let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;\n if (edge.label) {\n const el = edgeLabels[edge.id];\n let x = edge.x;\n let y = edge.y;\n if (path) {\n // // debugger;\n const pos = utils.calcLabelPosition(path);\n log.info('Moving label from (', x, ',', y, ') to (', pos.x, ',', pos.y, ') abc78');\n // x = pos.x;\n // y = pos.y;\n }\n el.attr('transform', 'translate(' + x + ', ' + y + ')');\n }\n\n //let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;\n if (edge.startLabelLeft) {\n const el = terminalLabels[edge.id].startLeft;\n let x = edge.x;\n let y = edge.y;\n if (path) {\n // debugger;\n const pos = utils.calcTerminalLabelPosition(edge.arrowTypeStart ? 10 : 0, 'start_left', path);\n x = pos.x;\n y = pos.y;\n }\n el.attr('transform', 'translate(' + x + ', ' + y + ')');\n }\n if (edge.startLabelRight) {\n const el = terminalLabels[edge.id].startRight;\n let x = edge.x;\n let y = edge.y;\n if (path) {\n // debugger;\n const pos = utils.calcTerminalLabelPosition(\n edge.arrowTypeStart ? 10 : 0,\n 'start_right',\n path\n );\n x = pos.x;\n y = pos.y;\n }\n el.attr('transform', 'translate(' + x + ', ' + y + ')');\n }\n if (edge.endLabelLeft) {\n const el = terminalLabels[edge.id].endLeft;\n let x = edge.x;\n let y = edge.y;\n if (path) {\n // debugger;\n const pos = utils.calcTerminalLabelPosition(edge.arrowTypeEnd ? 10 : 0, 'end_left', path);\n x = pos.x;\n y = pos.y;\n }\n el.attr('transform', 'translate(' + x + ', ' + y + ')');\n }\n if (edge.endLabelRight) {\n const el = terminalLabels[edge.id].endRight;\n let x = edge.x;\n let y = edge.y;\n if (path) {\n // debugger;\n const pos = utils.calcTerminalLabelPosition(edge.arrowTypeEnd ? 10 : 0, 'end_right', path);\n x = pos.x;\n y = pos.y;\n }\n el.attr('transform', 'translate(' + x + ', ' + y + ')');\n }\n};\n\nconst outsideNode = (node, point) => {\n // log.warn('Checking bounds ', node, point);\n const x = node.x;\n const y = node.y;\n const dx = Math.abs(point.x - x);\n const dy = Math.abs(point.y - y);\n const w = node.width / 2;\n const h = node.height / 2;\n if (dx >= w || dy >= h) {\n return true;\n }\n return false;\n};\n\nexport const intersection = (node, outsidePoint, insidePoint) => {\n log.warn(`intersection calc abc89:\n outsidePoint: ${JSON.stringify(outsidePoint)}\n insidePoint : ${JSON.stringify(insidePoint)}\n node : x:${node.x} y:${node.y} w:${node.width} h:${node.height}`);\n const x = node.x;\n const y = node.y;\n\n const dx = Math.abs(x - insidePoint.x);\n // const dy = Math.abs(y - insidePoint.y);\n const w = node.width / 2;\n let r = insidePoint.x < outsidePoint.x ? w - dx : w + dx;\n const h = node.height / 2;\n\n // const edges = {\n // x1: x - w,\n // x2: x + w,\n // y1: y - h,\n // y2: y + h\n // };\n\n // if (\n // outsidePoint.x === edges.x1 ||\n // outsidePoint.x === edges.x2 ||\n // outsidePoint.y === edges.y1 ||\n // outsidePoint.y === edges.y2\n // ) {\n // log.warn('abc89 calc equals on edge', outsidePoint, edges);\n // return outsidePoint;\n // }\n\n const Q = Math.abs(outsidePoint.y - insidePoint.y);\n const R = Math.abs(outsidePoint.x - insidePoint.x);\n // log.warn();\n if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) { // eslint-disable-line\n // Intersection is top or bottom of rect.\n // let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;\n let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;\n r = (R * q) / Q;\n const res = {\n x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x - R + r,\n y: insidePoint.y < outsidePoint.y ? insidePoint.y + Q - q : insidePoint.y - Q + q,\n };\n\n if (r === 0) {\n res.x = outsidePoint.x;\n res.y = outsidePoint.y;\n }\n if (R === 0) {\n res.x = outsidePoint.x;\n }\n if (Q === 0) {\n res.y = outsidePoint.y;\n }\n\n log.warn(`abc89 topp/bott calc, Q ${Q}, q ${q}, R ${R}, r ${r}`, res);\n\n return res;\n } else {\n // Intersection onn sides of rect\n if (insidePoint.x < outsidePoint.x) {\n r = outsidePoint.x - w - x;\n } else {\n // r = outsidePoint.x - w - x;\n r = x - w - outsidePoint.x;\n }\n let q = (Q * r) / R;\n // OK let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x + dx - w;\n // OK let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : outsidePoint.x + r;\n let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x - R + r;\n // let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : outsidePoint.x + r;\n let _y = insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q;\n log.warn(`sides calc abc89, Q ${Q}, q ${q}, R ${R}, r ${r}`, { _x, _y });\n if (r === 0) {\n _x = outsidePoint.x;\n _y = outsidePoint.y;\n }\n if (R === 0) {\n _x = outsidePoint.x;\n }\n if (Q === 0) {\n _y = outsidePoint.y;\n }\n\n return { x: _x, y: _y };\n }\n};\n/**\n * This function will page a path and node where the last point(s) in the path is inside the node\n * and return an update path ending by the border of the node.\n *\n * @param {Array} _points\n * @param {any} boundryNode\n * @returns {Array} Points\n */\nconst cutPathAtIntersect = (_points, boundryNode) => {\n log.warn('abc88 cutPathAtIntersect', _points, boundryNode);\n let points = [];\n let lastPointOutside = _points[0];\n let isInside = false;\n _points.forEach((point) => {\n // const node = clusterDb[edge.toCluster].node;\n log.info('abc88 checking point', point, boundryNode);\n\n // check if point is inside the boundry rect\n if (!outsideNode(boundryNode, point) && !isInside) {\n // First point inside the rect found\n // Calc the intersection coord between the point anf the last point outside the rect\n const inter = intersection(boundryNode, lastPointOutside, point);\n log.warn('abc88 inside', point, lastPointOutside, inter);\n log.warn('abc88 intersection', inter);\n\n // // Check case where the intersection is the same as the last point\n let pointPresent = false;\n points.forEach((p) => {\n pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y);\n });\n // // if (!pointPresent) {\n if (!points.find((e) => e.x === inter.x && e.y === inter.y)) {\n points.push(inter);\n } else {\n log.warn('abc88 no intersect', inter, points);\n }\n // points.push(inter);\n isInside = true;\n } else {\n // Outside\n log.warn('abc88 outside', point, lastPointOutside);\n lastPointOutside = point;\n // points.push(point);\n if (!isInside) points.push(point);\n }\n });\n log.warn('abc88 returning points', points);\n return points;\n};\n\n//(edgePaths, e, edge, clusterDb, diagramtype, graph)\nexport const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph) {\n let points = edge.points;\n let pointsHasChanged = false;\n const tail = graph.node(e.v);\n var head = graph.node(e.w);\n\n log.info('abc88 InsertEdge: ', edge);\n if (head.intersect && tail.intersect) {\n points = points.slice(1, edge.points.length - 1);\n points.unshift(tail.intersect(points[0]));\n log.info(\n 'Last point',\n points[points.length - 1],\n head,\n head.intersect(points[points.length - 1])\n );\n points.push(head.intersect(points[points.length - 1]));\n }\n if (edge.toCluster) {\n log.info('to cluster abc88', clusterDb[edge.toCluster]);\n points = cutPathAtIntersect(edge.points, clusterDb[edge.toCluster].node);\n // log.trace('edge', edge);\n // points = [];\n // let lastPointOutside; // = edge.points[0];\n // let isInside = false;\n // edge.points.forEach(point => {\n // const node = clusterDb[edge.toCluster].node;\n // log.warn('checking from', edge.fromCluster, point, node);\n\n // if (!outsideNode(node, point) && !isInside) {\n // log.trace('inside', edge.toCluster, point, lastPointOutside);\n\n // // First point inside the rect\n // const inter = intersection(node, lastPointOutside, point);\n\n // let pointPresent = false;\n // points.forEach(p => {\n // pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y);\n // });\n // // if (!pointPresent) {\n // if (!points.find(e => e.x === inter.x && e.y === inter.y)) {\n // points.push(inter);\n // } else {\n // log.warn('no intersect', inter, points);\n // }\n // isInside = true;\n // } else {\n // // outside\n // lastPointOutside = point;\n // if (!isInside) points.push(point);\n // }\n // });\n pointsHasChanged = true;\n }\n\n if (edge.fromCluster) {\n log.info('from cluster abc88', clusterDb[edge.fromCluster]);\n points = cutPathAtIntersect(points.reverse(), clusterDb[edge.fromCluster].node).reverse();\n\n pointsHasChanged = true;\n }\n\n // The data for our line\n const lineData = points.filter((p) => !Number.isNaN(p.y));\n\n // This is the accessor function we talked about above\n let curve;\n // Currently only flowcharts get the curve from the settings, perhaps this should\n // be expanded to a common setting? Restricting it for now in order not to cause side-effects that\n // have not been thought through\n if (diagramType === 'graph' || diagramType === 'flowchart') {\n curve = edge.curve || curveBasis;\n } else {\n curve = curveBasis;\n }\n // curve = curveLinear;\n const lineFunction = line()\n .x(function (d) {\n return d.x;\n })\n .y(function (d) {\n return d.y;\n })\n .curve(curve);\n\n // Contruct stroke classes based on properties\n let strokeClasses;\n switch (edge.thickness) {\n case 'normal':\n strokeClasses = 'edge-thickness-normal';\n break;\n case 'thick':\n strokeClasses = 'edge-thickness-thick';\n break;\n default:\n strokeClasses = '';\n }\n switch (edge.pattern) {\n case 'solid':\n strokeClasses += ' edge-pattern-solid';\n break;\n case 'dotted':\n strokeClasses += ' edge-pattern-dotted';\n break;\n case 'dashed':\n strokeClasses += ' edge-pattern-dashed';\n break;\n }\n\n const svgPath = elem\n .append('path')\n .attr('d', lineFunction(lineData))\n .attr('id', edge.id)\n .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))\n .attr('style', edge.style);\n\n // DEBUG code, adds a red circle at each edge coordinate\n // edge.points.forEach(point => {\n // elem\n // .append('circle')\n // .style('stroke', 'red')\n // .style('fill', 'red')\n // .attr('r', 1)\n // .attr('cx', point.x)\n // .attr('cy', point.y);\n // });\n\n let url = '';\n if (getConfig().state.arrowMarkerAbsolute) {\n url =\n window.location.protocol +\n '//' +\n window.location.host +\n window.location.pathname +\n window.location.search;\n url = url.replace(/\\(/g, '\\\\(');\n url = url.replace(/\\)/g, '\\\\)');\n }\n log.info('arrowTypeStart', edge.arrowTypeStart);\n log.info('arrowTypeEnd', edge.arrowTypeEnd);\n\n switch (edge.arrowTypeStart) {\n case 'arrow_cross':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-crossStart' + ')');\n break;\n case 'arrow_point':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-pointStart' + ')');\n break;\n case 'arrow_barb':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-barbStart' + ')');\n break;\n case 'arrow_circle':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-circleStart' + ')');\n break;\n case 'aggregation':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-aggregationStart' + ')');\n break;\n case 'extension':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-extensionStart' + ')');\n break;\n case 'composition':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-compositionStart' + ')');\n break;\n case 'dependency':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-dependencyStart' + ')');\n break;\n default:\n }\n switch (edge.arrowTypeEnd) {\n case 'arrow_cross':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')');\n break;\n case 'arrow_point':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-pointEnd' + ')');\n break;\n case 'arrow_barb':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-barbEnd' + ')');\n break;\n case 'arrow_circle':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-circleEnd' + ')');\n break;\n case 'aggregation':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-aggregationEnd' + ')');\n break;\n case 'extension':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-extensionEnd' + ')');\n break;\n case 'composition':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-compositionEnd' + ')');\n break;\n case 'dependency':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-dependencyEnd' + ')');\n break;\n default:\n }\n let paths = {};\n if (pointsHasChanged) {\n paths.updatedPath = points;\n }\n paths.originalPath = edge.points;\n return paths;\n};\n","import dagre from 'dagre';\nimport graphlib from 'graphlib';\nimport insertMarkers from './markers';\nimport { updateNodeBounds } from './shapes/util';\nimport {\n clear as clearGraphlib,\n clusterDb,\n adjustClustersAndEdges,\n findNonClusterChild,\n sortNodesByHierarchy,\n} from './mermaid-graphlib';\nimport { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes';\nimport { insertCluster, clear as clearClusters } from './clusters';\nimport { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges';\nimport { log } from '../logger';\n\nconst recursiveRender = (_elem, graph, diagramtype, parentCluster) => {\n log.info('Graph in recursive render: XXX', graphlib.json.write(graph), parentCluster);\n const dir = graph.graph().rankdir;\n log.trace('Dir in recursive render - dir:', dir);\n\n const elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line\n if (!graph.nodes()) {\n log.info('No nodes found for', graph);\n } else {\n log.info('Recursive render XXX', graph.nodes());\n }\n if (graph.edges().length > 0) {\n log.trace('Recursive edges', graph.edge(graph.edges()[0]));\n }\n const clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line\n const edgePaths = elem.insert('g').attr('class', 'edgePaths');\n const edgeLabels = elem.insert('g').attr('class', 'edgeLabels');\n const nodes = elem.insert('g').attr('class', 'nodes');\n\n // Insert nodes, this will insert them into the dom and each node will get a size. The size is updated\n // to the abstract node and is later used by dagre for the layout\n graph.nodes().forEach(function (v) {\n const node = graph.node(v);\n if (typeof parentCluster !== 'undefined') {\n const data = JSON.parse(JSON.stringify(parentCluster.clusterData));\n // data.clusterPositioning = true;\n log.info('Setting data for cluster XXX (', v, ') ', data, parentCluster);\n graph.setNode(parentCluster.id, data);\n if (!graph.parent(v)) {\n log.trace('Setting parent', v, parentCluster.id);\n graph.setParent(v, parentCluster.id, data);\n }\n }\n log.info('(Insert) Node XXX' + v + ': ' + JSON.stringify(graph.node(v)));\n if (node && node.clusterNode) {\n // const children = graph.children(v);\n log.info('Cluster identified', v, node.width, graph.node(v));\n const o = recursiveRender(nodes, node.graph, diagramtype, graph.node(v));\n const newEl = o.elem;\n updateNodeBounds(node, newEl);\n node.diff = o.diff || 0;\n log.info('Node bounds (abc123)', v, node, node.width, node.x, node.y);\n setNodeElem(newEl, node);\n\n log.warn('Recursive render complete ', newEl, node);\n } else {\n if (graph.children(v).length > 0) {\n // This is a cluster but not to be rendered recursively\n // Render as before\n log.info('Cluster - the non recursive path XXX', v, node.id, node, graph);\n log.info(findNonClusterChild(node.id, graph));\n clusterDb[node.id] = { id: findNonClusterChild(node.id, graph), node };\n // insertCluster(clusters, graph.node(v));\n } else {\n log.info('Node - the non recursive path', v, node.id, node);\n insertNode(nodes, graph.node(v), dir);\n }\n }\n });\n\n // Insert labels, this will insert them into the dom so that the width can be calculated\n // Also figure out which edges point to/from clusters and adjust them accordingly\n // Edges from/to clusters really points to the first child in the cluster.\n // TODO: pick optimal child in the cluster to us as link anchor\n graph.edges().forEach(function (e) {\n const edge = graph.edge(e.v, e.w, e.name);\n log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));\n log.info('Edge ' + e.v + ' -> ' + e.w + ': ', e, ' ', JSON.stringify(graph.edge(e)));\n\n // Check if link is either from or to a cluster\n log.info('Fix', clusterDb, 'ids:', e.v, e.w, 'Translateing: ', clusterDb[e.v], clusterDb[e.w]);\n insertEdgeLabel(edgeLabels, edge);\n });\n\n graph.edges().forEach(function (e) {\n log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));\n });\n log.info('#############################################');\n log.info('### Layout ###');\n log.info('#############################################');\n log.info(graph);\n dagre.layout(graph);\n log.info('Graph after layout:', graphlib.json.write(graph));\n // Move the nodes to the correct place\n let diff = 0;\n sortNodesByHierarchy(graph).forEach(function (v) {\n const node = graph.node(v);\n log.info('Position ' + v + ': ' + JSON.stringify(graph.node(v)));\n log.info(\n 'Position ' + v + ': (' + node.x,\n ',' + node.y,\n ') width: ',\n node.width,\n ' height: ',\n node.height\n );\n if (node && node.clusterNode) {\n // clusterDb[node.id].node = node;\n\n positionNode(node);\n } else {\n // Non cluster node\n if (graph.children(v).length > 0) {\n // A cluster in the non-recursive way\n // positionCluster(node);\n insertCluster(clusters, node);\n clusterDb[node.id].node = node;\n } else {\n positionNode(node);\n }\n }\n });\n\n // Move the edge labels to the correct place after layout\n graph.edges().forEach(function (e) {\n const edge = graph.edge(e);\n log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);\n\n const paths = insertEdge(edgePaths, e, edge, clusterDb, diagramtype, graph);\n positionEdgeLabel(edge, paths);\n });\n\n graph.nodes().forEach(function (v) {\n const n = graph.node(v);\n log.info(v, n.type, n.diff);\n if (n.type === 'group') {\n diff = n.diff;\n }\n });\n return { elem, diff };\n};\n\nexport const render = (elem, graph, markers, diagramtype, id) => {\n insertMarkers(elem, markers, diagramtype, id);\n clearNodes();\n clearEdges();\n clearClusters();\n clearGraphlib();\n\n log.warn('Graph at first:', graphlib.json.write(graph));\n adjustClustersAndEdges(graph);\n log.warn('Graph after:', graphlib.json.write(graph));\n // log.warn('Graph ever after:', graphlib.json.write(graph.node('A').graph));\n recursiveRender(elem, graph, diagramtype);\n};\n\n// const shapeDefinitions = {};\n// export const addShape = ({ shapeType: fun }) => {\n// shapeDefinitions[shapeType] = fun;\n// };\n\n// const arrowDefinitions = {};\n// export const addArrow = ({ arrowType: fun }) => {\n// arrowDefinitions[arrowType] = fun;\n// };\n","/*\n * Borrowed with love from from dagrge-d3. Many thanks to cpettitt!\n */\n\nimport node from './intersect-node.js';\nimport circle from './intersect-circle.js';\nimport ellipse from './intersect-ellipse.js';\nimport polygon from './intersect-polygon.js';\nimport rect from './intersect-rect.js';\n\nexport default {\n node,\n circle,\n ellipse,\n polygon,\n rect,\n};\n","import intersectEllipse from './intersect-ellipse';\n\n/**\n * @param node\n * @param rx\n * @param point\n */\nfunction intersectCircle(node, rx, point) {\n return intersectEllipse(node, rx, rx, point);\n}\n\nexport default intersectCircle;\n","/**\n * @param node\n * @param rx\n * @param ry\n * @param point\n */\nfunction intersectEllipse(node, rx, ry, point) {\n // Formulae from: https://mathworld.wolfram.com/Ellipse-LineIntersection.html\n\n var cx = node.x;\n var cy = node.y;\n\n var px = cx - point.x;\n var py = cy - point.y;\n\n var det = Math.sqrt(rx * rx * py * py + ry * ry * px * px);\n\n var dx = Math.abs((rx * ry * px) / det);\n if (point.x < cx) {\n dx = -dx;\n }\n var dy = Math.abs((rx * ry * py) / det);\n if (point.y < cy) {\n dy = -dy;\n }\n\n return { x: cx + dx, y: cy + dy };\n}\n\nexport default intersectEllipse;\n","/**\n * Returns the point at which two lines, p and q, intersect or returns undefined if they do not intersect.\n *\n * @param p1\n * @param p2\n * @param q1\n * @param q2\n */\nfunction intersectLine(p1, p2, q1, q2) {\n // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,\n // p7 and p473.\n\n var a1, a2, b1, b2, c1, c2;\n var r1, r2, r3, r4;\n var denom, offset, num;\n var x, y;\n\n // Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x +\n // b1 y + c1 = 0.\n a1 = p2.y - p1.y;\n b1 = p1.x - p2.x;\n c1 = p2.x * p1.y - p1.x * p2.y;\n\n // Compute r3 and r4.\n r3 = a1 * q1.x + b1 * q1.y + c1;\n r4 = a1 * q2.x + b1 * q2.y + c1;\n\n // Check signs of r3 and r4. If both point 3 and point 4 lie on\n // same side of line 1, the line segments do not intersect.\n if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {\n return /*DONT_INTERSECT*/;\n }\n\n // Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0\n a2 = q2.y - q1.y;\n b2 = q1.x - q2.x;\n c2 = q2.x * q1.y - q1.x * q2.y;\n\n // Compute r1 and r2\n r1 = a2 * p1.x + b2 * p1.y + c2;\n r2 = a2 * p2.x + b2 * p2.y + c2;\n\n // Check signs of r1 and r2. If both point 1 and point 2 lie\n // on same side of second line segment, the line segments do\n // not intersect.\n if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) {\n return /*DONT_INTERSECT*/;\n }\n\n // Line segments intersect: compute intersection point.\n denom = a1 * b2 - a2 * b1;\n if (denom === 0) {\n return /*COLLINEAR*/;\n }\n\n offset = Math.abs(denom / 2);\n\n // The denom/2 is to get rounding instead of truncating. It\n // is added or subtracted to the numerator, depending upon the\n // sign of the numerator.\n num = b1 * c2 - b2 * c1;\n x = num < 0 ? (num - offset) / denom : (num + offset) / denom;\n\n num = a2 * c1 - a1 * c2;\n y = num < 0 ? (num - offset) / denom : (num + offset) / denom;\n\n return { x: x, y: y };\n}\n\n/**\n * @param r1\n * @param r2\n */\nfunction sameSign(r1, r2) {\n return r1 * r2 > 0;\n}\n\nexport default intersectLine;\n","module.exports = intersectNode;\n\n/**\n * @param node\n * @param point\n */\nfunction intersectNode(node, point) {\n // console.info('Intersect Node');\n return node.intersect(point);\n}\n","/* eslint \"no-console\": off */\n\nimport intersectLine from './intersect-line';\n\nexport default intersectPolygon;\n\n/**\n * Returns the point ({x, y}) at which the point argument intersects with the node argument assuming\n * that it has the shape specified by polygon.\n *\n * @param node\n * @param polyPoints\n * @param point\n */\nfunction intersectPolygon(node, polyPoints, point) {\n var x1 = node.x;\n var y1 = node.y;\n\n var intersections = [];\n\n var minX = Number.POSITIVE_INFINITY;\n var minY = Number.POSITIVE_INFINITY;\n if (typeof polyPoints.forEach === 'function') {\n polyPoints.forEach(function (entry) {\n minX = Math.min(minX, entry.x);\n minY = Math.min(minY, entry.y);\n });\n } else {\n minX = Math.min(minX, polyPoints.x);\n minY = Math.min(minY, polyPoints.y);\n }\n\n var left = x1 - node.width / 2 - minX;\n var top = y1 - node.height / 2 - minY;\n\n for (var i = 0; i < polyPoints.length; i++) {\n var p1 = polyPoints[i];\n var p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0];\n var intersect = intersectLine(\n node,\n point,\n { x: left + p1.x, y: top + p1.y },\n { x: left + p2.x, y: top + p2.y }\n );\n if (intersect) {\n intersections.push(intersect);\n }\n }\n\n if (!intersections.length) {\n // console.log('NO INTERSECTION FOUND, RETURN NODE CENTER', node);\n return node;\n }\n\n if (intersections.length > 1) {\n // More intersections, find the one nearest to edge end point\n intersections.sort(function (p, q) {\n var pdx = p.x - point.x;\n var pdy = p.y - point.y;\n var distp = Math.sqrt(pdx * pdx + pdy * pdy);\n\n var qdx = q.x - point.x;\n var qdy = q.y - point.y;\n var distq = Math.sqrt(qdx * qdx + qdy * qdy);\n\n return distp < distq ? -1 : distp === distq ? 0 : 1;\n });\n }\n return intersections[0];\n}\n","const intersectRect = (node, point) => {\r\n var x = node.x;\r\n var y = node.y;\r\n\r\n // Rectangle intersection algorithm from:\r\n // https://math.stackexchange.com/questions/108113/find-edge-between-two-boxes\r\n var dx = point.x - x;\r\n var dy = point.y - y;\r\n var w = node.width / 2;\r\n var h = node.height / 2;\r\n\r\n var sx, sy;\r\n if (Math.abs(dy) * w > Math.abs(dx) * h) {\r\n // Intersection is top or bottom of rect.\r\n if (dy < 0) {\r\n h = -h;\r\n }\r\n sx = dy === 0 ? 0 : (h * dx) / dy;\r\n sy = h;\r\n } else {\r\n // Intersection is left or right of rect.\r\n if (dx < 0) {\r\n w = -w;\r\n }\r\n sx = w;\r\n sy = dx === 0 ? 0 : (w * dy) / dx;\r\n }\r\n\r\n return { x: x + sx, y: y + sy };\r\n};\r\n\r\nexport default intersectRect;\r\n","/** Setup arrow head and define the marker. The result is appended to the svg. */\n\nimport { log } from '../logger';\n\n// Only add the number of markers that the diagram needs\nconst insertMarkers = (elem, markerArray, type, id) => {\n markerArray.forEach((markerName) => {\n markers[markerName](elem, type, id);\n });\n};\n\nconst extension = (elem, type, id) => {\n log.trace('Making markers for ', id);\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-extensionStart')\n .attr('class', 'marker extension ' + type)\n .attr('refX', 0)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 1,7 L18,13 V 1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-extensionEnd')\n .attr('class', 'marker extension ' + type)\n .attr('refX', 19)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 1,1 V 13 L18,7 Z'); // this is actual shape for arrowhead\n};\n\nconst composition = (elem, type) => {\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-compositionStart')\n .attr('class', 'marker composition ' + type)\n .attr('refX', 0)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-compositionEnd')\n .attr('class', 'marker composition ' + type)\n .attr('refX', 19)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n};\nconst aggregation = (elem, type) => {\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-aggregationStart')\n .attr('class', 'marker aggregation ' + type)\n .attr('refX', 0)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-aggregationEnd')\n .attr('class', 'marker aggregation ' + type)\n .attr('refX', 19)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n};\nconst dependency = (elem, type) => {\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-dependencyStart')\n .attr('class', 'marker dependency ' + type)\n .attr('refX', 0)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-dependencyEnd')\n .attr('class', 'marker dependency ' + type)\n .attr('refX', 19)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');\n};\nconst point = (elem, type) => {\n elem\n .append('marker')\n .attr('id', type + '-pointEnd')\n .attr('class', 'marker ' + type)\n .attr('viewBox', '0 0 10 10')\n .attr('refX', 9)\n .attr('refY', 5)\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 12)\n .attr('markerHeight', 12)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 0 0 L 10 5 L 0 10 z')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 1)\n .style('stroke-dasharray', '1,0');\n elem\n .append('marker')\n .attr('id', type + '-pointStart')\n .attr('class', 'marker ' + type)\n .attr('viewBox', '0 0 10 10')\n .attr('refX', 0)\n .attr('refY', 5)\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 12)\n .attr('markerHeight', 12)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 0 5 L 10 10 L 10 0 z')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 1)\n .style('stroke-dasharray', '1,0');\n};\nconst circle = (elem, type) => {\n elem\n .append('marker')\n .attr('id', type + '-circleEnd')\n .attr('class', 'marker ' + type)\n .attr('viewBox', '0 0 10 10')\n .attr('refX', 11)\n .attr('refY', 5)\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 11)\n .attr('markerHeight', 11)\n .attr('orient', 'auto')\n .append('circle')\n .attr('cx', '5')\n .attr('cy', '5')\n .attr('r', '5')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 1)\n .style('stroke-dasharray', '1,0');\n\n elem\n .append('marker')\n .attr('id', type + '-circleStart')\n .attr('class', 'marker ' + type)\n .attr('viewBox', '0 0 10 10')\n .attr('refX', -1)\n .attr('refY', 5)\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 11)\n .attr('markerHeight', 11)\n .attr('orient', 'auto')\n .append('circle')\n .attr('cx', '5')\n .attr('cy', '5')\n .attr('r', '5')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 1)\n .style('stroke-dasharray', '1,0');\n};\nconst cross = (elem, type) => {\n elem\n .append('marker')\n .attr('id', type + '-crossEnd')\n .attr('class', 'marker cross ' + type)\n .attr('viewBox', '0 0 11 11')\n .attr('refX', 12)\n .attr('refY', 5.2)\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 11)\n .attr('markerHeight', 11)\n .attr('orient', 'auto')\n .append('path')\n // .attr('stroke', 'black')\n .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 2)\n .style('stroke-dasharray', '1,0');\n\n elem\n .append('marker')\n .attr('id', type + '-crossStart')\n .attr('class', 'marker cross ' + type)\n .attr('viewBox', '0 0 11 11')\n .attr('refX', -1)\n .attr('refY', 5.2)\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 11)\n .attr('markerHeight', 11)\n .attr('orient', 'auto')\n .append('path')\n // .attr('stroke', 'black')\n .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 2)\n .style('stroke-dasharray', '1,0');\n};\nconst barb = (elem, type) => {\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-barbEnd')\n .attr('refX', 19)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 14)\n .attr('markerUnits', 'strokeWidth')\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');\n};\n\n// TODO rename the class diagram markers to something shape descriptive and semantic free\nconst markers = {\n extension,\n composition,\n aggregation,\n dependency,\n point,\n circle,\n cross,\n barb,\n};\nexport default insertMarkers;\n","/** Decorates with functions required by mermaids dagre-wrapper. */\nimport { log } from '../logger';\nimport graphlib from 'graphlib';\n\nexport let clusterDb = {};\nlet decendants = {};\nlet parents = {};\n\nexport const clear = () => {\n decendants = {};\n parents = {};\n clusterDb = {};\n};\n\nconst isDecendant = (id, ancenstorId) => {\n // if (id === ancenstorId) return true;\n\n log.trace(\n 'In isDecendant',\n ancenstorId,\n ' ',\n id,\n ' = ',\n decendants[ancenstorId].indexOf(id) >= 0\n );\n if (decendants[ancenstorId].indexOf(id) >= 0) return true;\n\n return false;\n};\n\nconst edgeInCluster = (edge, clusterId) => {\n log.info('Decendants of ', clusterId, ' is ', decendants[clusterId]);\n log.info('Edge is ', edge);\n // Edges to/from the cluster is not in the cluster, they are in the parent\n if (edge.v === clusterId) return false;\n if (edge.w === clusterId) return false;\n\n if (!decendants[clusterId]) {\n log.debug('Tilt, ', clusterId, ',not in decendants');\n return false;\n }\n log.info('Here ');\n\n if (decendants[clusterId].indexOf(edge.v) >= 0) return true;\n if (isDecendant(edge.v, clusterId)) return true;\n if (isDecendant(edge.w, clusterId)) return true;\n if (decendants[clusterId].indexOf(edge.w) >= 0) return true;\n\n return false;\n};\n\nconst copy = (clusterId, graph, newGraph, rootId) => {\n log.warn(\n 'Copying children of ',\n clusterId,\n 'root',\n rootId,\n 'data',\n graph.node(clusterId),\n rootId\n );\n const nodes = graph.children(clusterId) || [];\n\n // Include cluster node if it is not the root\n if (clusterId !== rootId) {\n nodes.push(clusterId);\n }\n\n log.warn('Copying (nodes) clusterId', clusterId, 'nodes', nodes);\n\n nodes.forEach((node) => {\n if (graph.children(node).length > 0) {\n copy(node, graph, newGraph, rootId);\n } else {\n const data = graph.node(node);\n log.info('cp ', node, ' to ', rootId, ' with parent ', clusterId); //,node, data, ' parent is ', clusterId);\n newGraph.setNode(node, data);\n if (rootId !== graph.parent(node)) {\n log.warn('Setting parent', node, graph.parent(node));\n newGraph.setParent(node, graph.parent(node));\n }\n\n if (clusterId !== rootId && node !== clusterId) {\n log.debug('Setting parent', node, clusterId);\n newGraph.setParent(node, clusterId);\n } else {\n log.info('In copy ', clusterId, 'root', rootId, 'data', graph.node(clusterId), rootId);\n log.debug(\n 'Not Setting parent for node=',\n node,\n 'cluster!==rootId',\n clusterId !== rootId,\n 'node!==clusterId',\n node !== clusterId\n );\n }\n const edges = graph.edges(node);\n log.debug('Copying Edges', edges);\n edges.forEach((edge) => {\n log.info('Edge', edge);\n const data = graph.edge(edge.v, edge.w, edge.name);\n log.info('Edge data', data, rootId);\n try {\n // Do not copy edges in and out of the root cluster, they belong to the parent graph\n if (edgeInCluster(edge, rootId)) {\n log.info('Copying as ', edge.v, edge.w, data, edge.name);\n newGraph.setEdge(edge.v, edge.w, data, edge.name);\n log.info('newGraph edges ', newGraph.edges(), newGraph.edge(newGraph.edges()[0]));\n } else {\n log.info(\n 'Skipping copy of edge ',\n edge.v,\n '-->',\n edge.w,\n ' rootId: ',\n rootId,\n ' clusterId:',\n clusterId\n );\n }\n } catch (e) {\n log.error(e);\n }\n });\n }\n log.debug('Removing node', node);\n graph.removeNode(node);\n });\n};\nexport const extractDecendants = (id, graph) => {\n // log.debug('Extracting ', id);\n const children = graph.children(id);\n let res = [].concat(children);\n\n for (let i = 0; i < children.length; i++) {\n parents[children[i]] = id;\n res = res.concat(extractDecendants(children[i], graph));\n }\n\n return res;\n};\n\n/**\n * Validates the graph, checking that all parent child relation points to existing nodes and that\n * edges between nodes also ia correct. When not correct the function logs the discrepancies.\n *\n * @param graph\n */\nexport const validate = (graph) => {\n const edges = graph.edges();\n log.trace('Edges: ', edges);\n for (let i = 0; i < edges.length; i++) {\n if (graph.children(edges[i].v).length > 0) {\n log.trace('The node ', edges[i].v, ' is part of and edge even though it has children');\n return false;\n }\n if (graph.children(edges[i].w).length > 0) {\n log.trace('The node ', edges[i].w, ' is part of and edge even though it has children');\n return false;\n }\n }\n return true;\n};\n\n/**\n * Finds a child that is not a cluster. When faking a edge between a node and a cluster.\n *\n * @param {Finds a} id\n * @param {any} graph\n */\nexport const findNonClusterChild = (id, graph) => {\n // const node = graph.node(id);\n log.trace('Searching', id);\n // const children = graph.children(id).reverse();\n const children = graph.children(id); //.reverse();\n log.trace('Searching children of id ', id, children);\n if (children.length < 1) {\n log.trace('This is a valid node', id);\n return id;\n }\n for (let i = 0; i < children.length; i++) {\n const _id = findNonClusterChild(children[i], graph);\n if (_id) {\n log.trace('Found replacement for', id, ' => ', _id);\n return _id;\n }\n }\n};\n\nconst getAnchorId = (id) => {\n if (!clusterDb[id]) {\n return id;\n }\n // If the cluster has no external connections\n if (!clusterDb[id].externalConnections) {\n return id;\n }\n\n // Return the replacement node\n if (clusterDb[id]) {\n return clusterDb[id].id;\n }\n return id;\n};\n\nexport const adjustClustersAndEdges = (graph, depth) => {\n if (!graph || depth > 10) {\n log.debug('Opting out, no graph ');\n return;\n } else {\n log.debug('Opting in, graph ');\n }\n // Go through the nodes and for each cluster found, save a replacement node, this can be used when\n // faking a link to a cluster\n graph.nodes().forEach(function (id) {\n const children = graph.children(id);\n if (children.length > 0) {\n log.warn(\n 'Cluster identified',\n id,\n ' Replacement id in edges: ',\n findNonClusterChild(id, graph)\n );\n decendants[id] = extractDecendants(id, graph);\n clusterDb[id] = { id: findNonClusterChild(id, graph), clusterData: graph.node(id) };\n }\n });\n\n // Check incoming and outgoing edges for each cluster\n graph.nodes().forEach(function (id) {\n const children = graph.children(id);\n const edges = graph.edges();\n if (children.length > 0) {\n log.debug('Cluster identified', id, decendants);\n edges.forEach((edge) => {\n // log.debug('Edge, decendants: ', edge, decendants[id]);\n\n // Check if any edge leaves the cluster (not the actual cluster, thats a link from the box)\n if (edge.v !== id && edge.w !== id) {\n // Any edge where either the one of the nodes is decending to the cluster but not the other\n // if (decendants[id].indexOf(edge.v) < 0 && decendants[id].indexOf(edge.w) < 0) {\n\n const d1 = isDecendant(edge.v, id);\n const d2 = isDecendant(edge.w, id);\n\n // d1 xor d2 - if either d1 is true and d2 is false or the other way around\n if (d1 ^ d2) {\n log.warn('Edge: ', edge, ' leaves cluster ', id);\n log.warn('Decendants of XXX ', id, ': ', decendants[id]);\n clusterDb[id].externalConnections = true;\n }\n }\n });\n } else {\n log.debug('Not a cluster ', id, decendants);\n }\n });\n\n // For clusters with incoming and/or outgoing edges translate those edges to a real node\n // in the cluster in order to fake the edge\n graph.edges().forEach(function (e) {\n const edge = graph.edge(e);\n log.warn('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));\n log.warn('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e)));\n\n let v = e.v;\n let w = e.w;\n // Check if link is either from or to a cluster\n log.warn(\n 'Fix XXX',\n clusterDb,\n 'ids:',\n e.v,\n e.w,\n 'Translateing: ',\n clusterDb[e.v],\n ' --- ',\n clusterDb[e.w]\n );\n if (clusterDb[e.v] && clusterDb[e.w] && clusterDb[e.v] === clusterDb[e.w]) {\n log.warn('Fixing and trixing link to self - removing XXX', e.v, e.w, e.name);\n log.warn('Fixing and trixing - removing XXX', e.v, e.w, e.name);\n v = getAnchorId(e.v);\n w = getAnchorId(e.w);\n graph.removeEdge(e.v, e.w, e.name);\n const specialId = e.w + '---' + e.v;\n graph.setNode(specialId, {\n domId: specialId,\n id: specialId,\n labelStyle: '',\n labelText: edge.label,\n padding: 0,\n shape: 'labelRect',\n style: '',\n });\n const edge1 = JSON.parse(JSON.stringify(edge));\n const edge2 = JSON.parse(JSON.stringify(edge));\n edge1.label = '';\n edge1.arrowTypeEnd = 'none';\n edge2.label = '';\n edge1.fromCluster = e.v;\n edge2.toCluster = e.v;\n\n graph.setEdge(v, specialId, edge1, e.name + '-cyclic-special');\n graph.setEdge(specialId, w, edge2, e.name + '-cyclic-special');\n } else if (clusterDb[e.v] || clusterDb[e.w]) {\n log.warn('Fixing and trixing - removing XXX', e.v, e.w, e.name);\n v = getAnchorId(e.v);\n w = getAnchorId(e.w);\n graph.removeEdge(e.v, e.w, e.name);\n if (v !== e.v) edge.fromCluster = e.v;\n if (w !== e.w) edge.toCluster = e.w;\n log.warn('Fix Replacing with XXX', v, w, e.name);\n graph.setEdge(v, w, edge, e.name);\n }\n });\n log.warn('Adjusted Graph', graphlib.json.write(graph));\n extractor(graph, 0);\n\n log.trace(clusterDb);\n\n // Remove references to extracted cluster\n // graph.edges().forEach(edge => {\n // if (isDecendant(edge.v, clusterId) || isDecendant(edge.w, clusterId)) {\n // graph.removeEdge(edge);\n // }\n // });\n};\n\nexport const extractor = (graph, depth) => {\n log.warn('extractor - ', depth, graphlib.json.write(graph), graph.children('D'));\n if (depth > 10) {\n log.error('Bailing out');\n return;\n }\n // For clusters without incoming and/or outgoing edges, create a new cluster-node\n // containing the nodes and edges in the custer in a new graph\n // for (let i = 0;)\n let nodes = graph.nodes();\n let hasChildren = false;\n for (let i = 0; i < nodes.length; i++) {\n const node = nodes[i];\n const children = graph.children(node);\n hasChildren = hasChildren || children.length > 0;\n }\n\n if (!hasChildren) {\n log.debug('Done, no node has children', graph.nodes());\n return;\n }\n // const clusters = Object.keys(clusterDb);\n // clusters.forEach(clusterId => {\n log.debug('Nodes = ', nodes, depth);\n for (let i = 0; i < nodes.length; i++) {\n const node = nodes[i];\n\n log.debug(\n 'Extracting node',\n node,\n clusterDb,\n clusterDb[node] && !clusterDb[node].externalConnections,\n !graph.parent(node),\n graph.node(node),\n graph.children('D'),\n ' Depth ',\n depth\n );\n // Note that the node might have been removed after the Object.keys call so better check\n // that it still is in the game\n if (!clusterDb[node]) {\n // Skip if the node is not a cluster\n log.debug('Not a cluster', node, depth);\n // break;\n } else if (\n !clusterDb[node].externalConnections &&\n // !graph.parent(node) &&\n graph.children(node) &&\n graph.children(node).length > 0\n ) {\n log.warn(\n 'Cluster without external connections, without a parent and with children',\n node,\n depth\n );\n\n const graphSettings = graph.graph();\n let dir = graphSettings.rankdir === 'TB' ? 'LR' : 'TB';\n if (clusterDb[node]) {\n if (clusterDb[node].clusterData && clusterDb[node].clusterData.dir) {\n dir = clusterDb[node].clusterData.dir;\n log.warn('Fixing dir', clusterDb[node].clusterData.dir, dir);\n }\n }\n\n const clusterGraph = new graphlib.Graph({\n multigraph: true,\n compound: true,\n })\n .setGraph({\n rankdir: dir, // Todo: set proper spacing\n nodesep: 50,\n ranksep: 50,\n marginx: 8,\n marginy: 8,\n })\n .setDefaultEdgeLabel(function () {\n return {};\n });\n\n log.warn('Old graph before copy', graphlib.json.write(graph));\n copy(node, graph, clusterGraph, node);\n graph.setNode(node, {\n clusterNode: true,\n id: node,\n clusterData: clusterDb[node].clusterData,\n labelText: clusterDb[node].labelText,\n graph: clusterGraph,\n });\n log.warn('New graph after copy node: (', node, ')', graphlib.json.write(clusterGraph));\n log.debug('Old graph after copy', graphlib.json.write(graph));\n } else {\n log.warn(\n 'Cluster ** ',\n node,\n ' **not meeting the criteria !externalConnections:',\n !clusterDb[node].externalConnections,\n ' no parent: ',\n !graph.parent(node),\n ' children ',\n graph.children(node) && graph.children(node).length > 0,\n graph.children('D'),\n depth\n );\n log.debug(clusterDb);\n }\n }\n\n nodes = graph.nodes();\n log.warn('New list of nodes', nodes);\n for (let i = 0; i < nodes.length; i++) {\n const node = nodes[i];\n const data = graph.node(node);\n log.warn(' Now next level', node, data);\n if (data.clusterNode) {\n extractor(data.graph, depth + 1);\n }\n }\n};\n\nconst sorter = (graph, nodes) => {\n if (nodes.length === 0) return [];\n let result = Object.assign(nodes);\n nodes.forEach((node) => {\n const children = graph.children(node);\n const sorted = sorter(graph, children);\n result = result.concat(sorted);\n });\n\n return result;\n};\n\nexport const sortNodesByHierarchy = (graph) => sorter(graph, graph.children());\n","import { select } from 'd3';\nimport { log } from '../logger'; // eslint-disable-line\nimport { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util';\nimport { getConfig } from '../config';\nimport intersect from './intersect/index.js';\nimport createLabel from './createLabel';\nimport note from './shapes/note';\nimport { parseMember } from '../diagrams/class/svgDraw';\nimport { evaluate, sanitizeText as sanitize } from '../diagrams/common/common';\n\nconst sanitizeText = (txt) => sanitize(txt, getConfig());\n\nconst question = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const s = w + h;\n const points = [\n { x: s / 2, y: 0 },\n { x: s, y: -s / 2 },\n { x: s / 2, y: -s },\n { x: 0, y: -s / 2 },\n ];\n\n log.info('Question main (Circle)');\n\n const questionElem = insertPolygonShape(shapeSvg, s, s, points);\n questionElem.attr('style', node.style);\n updateNodeBounds(node, questionElem);\n\n node.intersect = function (point) {\n log.warn('Intersect called');\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst choice = (parent, node) => {\n const shapeSvg = parent\n .insert('g')\n .attr('class', 'node default')\n .attr('id', node.domId || node.id);\n\n const s = 28;\n const points = [\n { x: 0, y: s / 2 },\n { x: s / 2, y: 0 },\n { x: 0, y: -s / 2 },\n { x: -s / 2, y: 0 },\n ];\n\n const choice = shapeSvg.insert('polygon', ':first-child').attr(\n 'points',\n points\n .map(function (d) {\n return d.x + ',' + d.y;\n })\n .join(' ')\n );\n // center the circle around its coordinate\n choice.attr('class', 'state-start').attr('r', 7).attr('width', 28).attr('height', 28);\n node.width = 28;\n node.height = 28;\n\n node.intersect = function (point) {\n return intersect.circle(node, 14, point);\n };\n\n return shapeSvg;\n};\n\nconst hexagon = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const f = 4;\n const h = bbox.height + node.padding;\n const m = h / f;\n const w = bbox.width + 2 * m + node.padding;\n const points = [\n { x: m, y: 0 },\n { x: w - m, y: 0 },\n { x: w, y: -h / 2 },\n { x: w - m, y: -h },\n { x: m, y: -h },\n { x: 0, y: -h / 2 },\n ];\n\n const hex = insertPolygonShape(shapeSvg, w, h, points);\n hex.attr('style', node.style);\n updateNodeBounds(node, hex);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst rect_left_inv_arrow = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: -h / 2, y: 0 },\n { x: w, y: 0 },\n { x: w, y: -h },\n { x: -h / 2, y: -h },\n { x: 0, y: -h / 2 },\n ];\n\n const el = insertPolygonShape(shapeSvg, w, h, points);\n el.attr('style', node.style);\n\n node.width = w + h;\n node.height = h;\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst lean_right = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: (-2 * h) / 6, y: 0 },\n { x: w - h / 6, y: 0 },\n { x: w + (2 * h) / 6, y: -h },\n { x: h / 6, y: -h },\n ];\n\n const el = insertPolygonShape(shapeSvg, w, h, points);\n el.attr('style', node.style);\n updateNodeBounds(node, el);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst lean_left = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: (2 * h) / 6, y: 0 },\n { x: w + h / 6, y: 0 },\n { x: w - (2 * h) / 6, y: -h },\n { x: -h / 6, y: -h },\n ];\n\n const el = insertPolygonShape(shapeSvg, w, h, points);\n el.attr('style', node.style);\n updateNodeBounds(node, el);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst trapezoid = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: (-2 * h) / 6, y: 0 },\n { x: w + (2 * h) / 6, y: 0 },\n { x: w - h / 6, y: -h },\n { x: h / 6, y: -h },\n ];\n\n const el = insertPolygonShape(shapeSvg, w, h, points);\n el.attr('style', node.style);\n updateNodeBounds(node, el);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst inv_trapezoid = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: h / 6, y: 0 },\n { x: w - h / 6, y: 0 },\n { x: w + (2 * h) / 6, y: -h },\n { x: (-2 * h) / 6, y: -h },\n ];\n\n const el = insertPolygonShape(shapeSvg, w, h, points);\n el.attr('style', node.style);\n updateNodeBounds(node, el);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst rect_right_inv_arrow = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: 0, y: 0 },\n { x: w + h / 2, y: 0 },\n { x: w, y: -h / 2 },\n { x: w + h / 2, y: -h },\n { x: 0, y: -h },\n ];\n\n const el = insertPolygonShape(shapeSvg, w, h, points);\n el.attr('style', node.style);\n updateNodeBounds(node, el);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst cylinder = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const w = bbox.width + node.padding;\n const rx = w / 2;\n const ry = rx / (2.5 + w / 50);\n const h = bbox.height + ry + node.padding;\n\n const shape =\n 'M 0,' +\n ry +\n ' a ' +\n rx +\n ',' +\n ry +\n ' 0,0,0 ' +\n w +\n ' 0 a ' +\n rx +\n ',' +\n ry +\n ' 0,0,0 ' +\n -w +\n ' 0 l 0,' +\n h +\n ' a ' +\n rx +\n ',' +\n ry +\n ' 0,0,0 ' +\n w +\n ' 0 l 0,' +\n -h;\n\n const el = shapeSvg\n .attr('label-offset-y', ry)\n .insert('path', ':first-child')\n .attr('style', node.style)\n .attr('d', shape)\n .attr('transform', 'translate(' + -w / 2 + ',' + -(h / 2 + ry) + ')');\n\n updateNodeBounds(node, el);\n\n node.intersect = function (point) {\n const pos = intersect.rect(node, point);\n const x = pos.x - node.x;\n\n if (\n rx != 0 &&\n (Math.abs(x) < node.width / 2 ||\n (Math.abs(x) == node.width / 2 && Math.abs(pos.y - node.y) > node.height / 2 - ry))\n ) {\n // ellipsis equation: x*x / a*a + y*y / b*b = 1\n // solve for y to get adjustion value for pos.y\n let y = ry * ry * (1 - (x * x) / (rx * rx));\n if (y != 0) y = Math.sqrt(y);\n y = ry - y;\n if (point.y - node.y > 0) y = -y;\n\n pos.y += y;\n }\n\n return pos;\n };\n\n return shapeSvg;\n};\n\nconst rect = (parent, node) => {\n const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);\n\n log.trace('Classes = ', node.classes);\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n const totalWidth = bbox.width + node.padding;\n const totalHeight = bbox.height + node.padding;\n rect\n .attr('class', 'basic label-container')\n .attr('style', node.style)\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('x', -bbox.width / 2 - halfPadding)\n .attr('y', -bbox.height / 2 - halfPadding)\n .attr('width', totalWidth)\n .attr('height', totalHeight);\n\n if (node.props) {\n const propKeys = new Set(Object.keys(node.props));\n if (node.props.borders) {\n applyNodePropertyBorders(rect, node.props.borders, totalWidth, totalHeight);\n propKeys.delete('borders');\n }\n propKeys.forEach((propKey) => {\n log.warn(`Unknown node property ${propKey}`);\n });\n }\n\n updateNodeBounds(node, rect);\n\n node.intersect = function (point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst labelRect = (parent, node) => {\n const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'label', true);\n\n log.trace('Classes = ', node.classes);\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n // Hide the rect we are only after the label\n const totalWidth = 0;\n const totalHeight = 0;\n rect.attr('width', totalWidth).attr('height', totalHeight);\n shapeSvg.attr('class', 'label edgeLabel');\n\n if (node.props) {\n const propKeys = new Set(Object.keys(node.props));\n if (node.props.borders) {\n applyNodePropertyBorders(rect, node.props.borders, totalWidth, totalHeight);\n propKeys.delete('borders');\n }\n propKeys.forEach((propKey) => {\n log.warn(`Unknown node property ${propKey}`);\n });\n }\n\n updateNodeBounds(node, rect);\n\n node.intersect = function (point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\n/**\n * @param rect\n * @param borders\n * @param totalWidth\n * @param totalHeight\n */\nfunction applyNodePropertyBorders(rect, borders, totalWidth, totalHeight) {\n const strokeDashArray = [];\n const addBorder = (length) => {\n strokeDashArray.push(length);\n strokeDashArray.push(0);\n };\n const skipBorder = (length) => {\n strokeDashArray.push(0);\n strokeDashArray.push(length);\n };\n if (borders.includes('t')) {\n log.debug('add top border');\n addBorder(totalWidth);\n } else {\n skipBorder(totalWidth);\n }\n if (borders.includes('r')) {\n log.debug('add right border');\n addBorder(totalHeight);\n } else {\n skipBorder(totalHeight);\n }\n if (borders.includes('b')) {\n log.debug('add bottom border');\n addBorder(totalWidth);\n } else {\n skipBorder(totalWidth);\n }\n if (borders.includes('l')) {\n log.debug('add left border');\n addBorder(totalHeight);\n } else {\n skipBorder(totalHeight);\n }\n rect.attr('stroke-dasharray', strokeDashArray.join(' '));\n}\n\nconst rectWithTitle = (parent, node) => {\n // const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes);\n\n let classes;\n if (!node.classes) {\n classes = 'node default';\n } else {\n classes = 'node ' + node.classes;\n }\n // Add outer g element\n const shapeSvg = parent\n .insert('g')\n .attr('class', classes)\n .attr('id', node.domId || node.id);\n\n // Create the title label and insert it after the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n // const innerRect = shapeSvg.insert('rect');\n const innerLine = shapeSvg.insert('line');\n\n const label = shapeSvg.insert('g').attr('class', 'label');\n\n const text2 = node.labelText.flat ? node.labelText.flat() : node.labelText;\n // const text2 = typeof text2prim === 'object' ? text2prim[0] : text2prim;\n\n let title = '';\n if (typeof text2 === 'object') {\n title = text2[0];\n } else {\n title = text2;\n }\n log.info('Label text abc79', title, text2, typeof text2 === 'object');\n\n const text = label.node().appendChild(createLabel(title, node.labelStyle, true, true));\n let bbox = { width: 0, height: 0 };\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = text.children[0];\n const dv = select(text);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n log.info('Text 2', text2);\n const textRows = text2.slice(1, text2.length);\n let titleBox = text.getBBox();\n const descr = label\n .node()\n .appendChild(\n createLabel(textRows.join ? textRows.join('
') : textRows, node.labelStyle, true, true)\n );\n\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = descr.children[0];\n const dv = select(descr);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n // bbox = label.getBBox();\n // log.info(descr);\n const halfPadding = node.padding / 2;\n select(descr).attr(\n 'transform',\n 'translate( ' +\n // (titleBox.width - bbox.width) / 2 +\n (bbox.width > titleBox.width ? 0 : (titleBox.width - bbox.width) / 2) +\n ', ' +\n (titleBox.height + halfPadding + 5) +\n ')'\n );\n select(text).attr(\n 'transform',\n 'translate( ' +\n // (titleBox.width - bbox.width) / 2 +\n (bbox.width < titleBox.width ? 0 : -(titleBox.width - bbox.width) / 2) +\n ', ' +\n 0 +\n ')'\n );\n // Get the size of the label\n\n // Bounding box for title and text\n bbox = label.node().getBBox();\n\n // Center the label\n label.attr(\n 'transform',\n 'translate(' + -bbox.width / 2 + ', ' + (-bbox.height / 2 - halfPadding + 3) + ')'\n );\n\n rect\n .attr('class', 'outer title-state')\n .attr('x', -bbox.width / 2 - halfPadding)\n .attr('y', -bbox.height / 2 - halfPadding)\n .attr('width', bbox.width + node.padding)\n .attr('height', bbox.height + node.padding);\n\n innerLine\n .attr('class', 'divider')\n .attr('x1', -bbox.width / 2 - halfPadding)\n .attr('x2', bbox.width / 2 + halfPadding)\n .attr('y1', -bbox.height / 2 - halfPadding + titleBox.height + halfPadding)\n .attr('y2', -bbox.height / 2 - halfPadding + titleBox.height + halfPadding);\n\n updateNodeBounds(node, rect);\n\n node.intersect = function (point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst stadium = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const h = bbox.height + node.padding;\n const w = bbox.width + h / 4 + node.padding;\n\n // add the rect\n const rect = shapeSvg\n .insert('rect', ':first-child')\n .attr('style', node.style)\n .attr('rx', h / 2)\n .attr('ry', h / 2)\n .attr('x', -w / 2)\n .attr('y', -h / 2)\n .attr('width', w)\n .attr('height', h);\n\n updateNodeBounds(node, rect);\n\n node.intersect = function (point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst circle = (parent, node) => {\n const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);\n const circle = shapeSvg.insert('circle', ':first-child');\n\n // center the circle around its coordinate\n circle\n .attr('style', node.style)\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('r', bbox.width / 2 + halfPadding)\n .attr('width', bbox.width + node.padding)\n .attr('height', bbox.height + node.padding);\n\n log.info('Circle main');\n\n updateNodeBounds(node, circle);\n\n node.intersect = function (point) {\n log.info('Circle intersect', node, bbox.width / 2 + halfPadding, point);\n return intersect.circle(node, bbox.width / 2 + halfPadding, point);\n };\n\n return shapeSvg;\n};\n\nconst doublecircle = (parent, node) => {\n const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);\n const gap = 5;\n const circleGroup = shapeSvg.insert('g', ':first-child');\n const outerCircle = circleGroup.insert('circle');\n const innerCircle = circleGroup.insert('circle');\n\n // center the circle around its coordinate\n outerCircle\n .attr('style', node.style)\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('r', bbox.width / 2 + halfPadding + gap)\n .attr('width', bbox.width + node.padding + gap * 2)\n .attr('height', bbox.height + node.padding + gap * 2);\n\n innerCircle\n .attr('style', node.style)\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('r', bbox.width / 2 + halfPadding)\n .attr('width', bbox.width + node.padding)\n .attr('height', bbox.height + node.padding);\n\n log.info('DoubleCircle main');\n\n updateNodeBounds(node, outerCircle);\n\n node.intersect = function (point) {\n log.info('DoubleCircle intersect', node, bbox.width / 2 + halfPadding + gap, point);\n return intersect.circle(node, bbox.width / 2 + halfPadding + gap, point);\n };\n\n return shapeSvg;\n};\n\nconst subroutine = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: 0, y: 0 },\n { x: w, y: 0 },\n { x: w, y: -h },\n { x: 0, y: -h },\n { x: 0, y: 0 },\n { x: -8, y: 0 },\n { x: w + 8, y: 0 },\n { x: w + 8, y: -h },\n { x: -8, y: -h },\n { x: -8, y: 0 },\n ];\n\n const el = insertPolygonShape(shapeSvg, w, h, points);\n el.attr('style', node.style);\n updateNodeBounds(node, el);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst start = (parent, node) => {\n const shapeSvg = parent\n .insert('g')\n .attr('class', 'node default')\n .attr('id', node.domId || node.id);\n const circle = shapeSvg.insert('circle', ':first-child');\n\n // center the circle around its coordinate\n circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14);\n\n updateNodeBounds(node, circle);\n\n node.intersect = function (point) {\n return intersect.circle(node, 7, point);\n };\n\n return shapeSvg;\n};\n\nconst forkJoin = (parent, node, dir) => {\n const shapeSvg = parent\n .insert('g')\n .attr('class', 'node default')\n .attr('id', node.domId || node.id);\n\n let width = 70;\n let height = 10;\n\n if (dir === 'LR') {\n width = 10;\n height = 70;\n }\n\n const shape = shapeSvg\n .append('rect')\n .attr('x', (-1 * width) / 2)\n .attr('y', (-1 * height) / 2)\n .attr('width', width)\n .attr('height', height)\n .attr('class', 'fork-join');\n\n updateNodeBounds(node, shape);\n node.height = node.height + node.padding / 2;\n node.width = node.width + node.padding / 2;\n node.intersect = function (point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst end = (parent, node) => {\n const shapeSvg = parent\n .insert('g')\n .attr('class', 'node default')\n .attr('id', node.domId || node.id);\n const innerCircle = shapeSvg.insert('circle', ':first-child');\n const circle = shapeSvg.insert('circle', ':first-child');\n\n circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14);\n\n innerCircle.attr('class', 'state-end').attr('r', 5).attr('width', 10).attr('height', 10);\n\n updateNodeBounds(node, circle);\n\n node.intersect = function (point) {\n return intersect.circle(node, 7, point);\n };\n\n return shapeSvg;\n};\n\nconst class_box = (parent, node) => {\n const halfPadding = node.padding / 2;\n const rowPadding = 4;\n const lineHeight = 8;\n\n let classes;\n if (!node.classes) {\n classes = 'node default';\n } else {\n classes = 'node ' + node.classes;\n }\n // Add outer g element\n const shapeSvg = parent\n .insert('g')\n .attr('class', classes)\n .attr('id', node.domId || node.id);\n\n // Create the title label and insert it after the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n const topLine = shapeSvg.insert('line');\n const bottomLine = shapeSvg.insert('line');\n let maxWidth = 0;\n let maxHeight = rowPadding;\n\n const labelContainer = shapeSvg.insert('g').attr('class', 'label');\n let verticalPos = 0;\n const hasInterface = node.classData.annotations && node.classData.annotations[0];\n\n // 1. Create the labels\n const interfaceLabelText = node.classData.annotations[0]\n ? '«' + node.classData.annotations[0] + '»'\n : '';\n const interfaceLabel = labelContainer\n .node()\n .appendChild(createLabel(interfaceLabelText, node.labelStyle, true, true));\n let interfaceBBox = interfaceLabel.getBBox();\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = interfaceLabel.children[0];\n const dv = select(interfaceLabel);\n interfaceBBox = div.getBoundingClientRect();\n dv.attr('width', interfaceBBox.width);\n dv.attr('height', interfaceBBox.height);\n }\n if (node.classData.annotations[0]) {\n maxHeight += interfaceBBox.height + rowPadding;\n maxWidth += interfaceBBox.width;\n }\n\n let classTitleString = node.classData.id;\n\n if (node.classData.type !== undefined && node.classData.type !== '') {\n if (getConfig().flowchart.htmlLabels) {\n classTitleString += '<' + node.classData.type + '>';\n } else {\n classTitleString += '<' + node.classData.type + '>';\n }\n }\n const classTitleLabel = labelContainer\n .node()\n .appendChild(createLabel(classTitleString, node.labelStyle, true, true));\n select(classTitleLabel).attr('class', 'classTitle');\n let classTitleBBox = classTitleLabel.getBBox();\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = classTitleLabel.children[0];\n const dv = select(classTitleLabel);\n classTitleBBox = div.getBoundingClientRect();\n dv.attr('width', classTitleBBox.width);\n dv.attr('height', classTitleBBox.height);\n }\n maxHeight += classTitleBBox.height + rowPadding;\n if (classTitleBBox.width > maxWidth) {\n maxWidth = classTitleBBox.width;\n }\n const classAttributes = [];\n node.classData.members.forEach((str) => {\n const parsedInfo = parseMember(str);\n let parsedText = parsedInfo.displayText;\n if (getConfig().flowchart.htmlLabels) {\n parsedText = parsedText.replace(//g, '>');\n }\n const lbl = labelContainer\n .node()\n .appendChild(\n createLabel(\n parsedText,\n parsedInfo.cssStyle ? parsedInfo.cssStyle : node.labelStyle,\n true,\n true\n )\n );\n let bbox = lbl.getBBox();\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = lbl.children[0];\n const dv = select(lbl);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n if (bbox.width > maxWidth) {\n maxWidth = bbox.width;\n }\n maxHeight += bbox.height + rowPadding;\n classAttributes.push(lbl);\n });\n\n maxHeight += lineHeight;\n\n const classMethods = [];\n node.classData.methods.forEach((str) => {\n const parsedInfo = parseMember(str);\n let displayText = parsedInfo.displayText;\n if (getConfig().flowchart.htmlLabels) {\n displayText = displayText.replace(//g, '>');\n }\n const lbl = labelContainer\n .node()\n .appendChild(\n createLabel(\n displayText,\n parsedInfo.cssStyle ? parsedInfo.cssStyle : node.labelStyle,\n true,\n true\n )\n );\n let bbox = lbl.getBBox();\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = lbl.children[0];\n const dv = select(lbl);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n if (bbox.width > maxWidth) {\n maxWidth = bbox.width;\n }\n maxHeight += bbox.height + rowPadding;\n\n classMethods.push(lbl);\n });\n\n maxHeight += lineHeight;\n\n // 2. Position the labels\n\n // position the interface label\n if (hasInterface) {\n let diffX = (maxWidth - interfaceBBox.width) / 2;\n select(interfaceLabel).attr(\n 'transform',\n 'translate( ' + ((-1 * maxWidth) / 2 + diffX) + ', ' + (-1 * maxHeight) / 2 + ')'\n );\n verticalPos = interfaceBBox.height + rowPadding;\n }\n // Position the class title label\n let diffX = (maxWidth - classTitleBBox.width) / 2;\n select(classTitleLabel).attr(\n 'transform',\n 'translate( ' +\n ((-1 * maxWidth) / 2 + diffX) +\n ', ' +\n ((-1 * maxHeight) / 2 + verticalPos) +\n ')'\n );\n verticalPos += classTitleBBox.height + rowPadding;\n\n topLine\n .attr('class', 'divider')\n .attr('x1', -maxWidth / 2 - halfPadding)\n .attr('x2', maxWidth / 2 + halfPadding)\n .attr('y1', -maxHeight / 2 - halfPadding + lineHeight + verticalPos)\n .attr('y2', -maxHeight / 2 - halfPadding + lineHeight + verticalPos);\n\n verticalPos += lineHeight;\n\n classAttributes.forEach((lbl) => {\n select(lbl).attr(\n 'transform',\n 'translate( ' +\n -maxWidth / 2 +\n ', ' +\n ((-1 * maxHeight) / 2 + verticalPos + lineHeight / 2) +\n ')'\n );\n verticalPos += classTitleBBox.height + rowPadding;\n });\n\n verticalPos += lineHeight;\n bottomLine\n .attr('class', 'divider')\n .attr('x1', -maxWidth / 2 - halfPadding)\n .attr('x2', maxWidth / 2 + halfPadding)\n .attr('y1', -maxHeight / 2 - halfPadding + lineHeight + verticalPos)\n .attr('y2', -maxHeight / 2 - halfPadding + lineHeight + verticalPos);\n\n verticalPos += lineHeight;\n\n classMethods.forEach((lbl) => {\n select(lbl).attr(\n 'transform',\n 'translate( ' + -maxWidth / 2 + ', ' + ((-1 * maxHeight) / 2 + verticalPos) + ')'\n );\n verticalPos += classTitleBBox.height + rowPadding;\n });\n //\n // let bbox;\n // if (evaluate(getConfig().flowchart.htmlLabels)) {\n // const div = interfaceLabel.children[0];\n // const dv = select(interfaceLabel);\n // bbox = div.getBoundingClientRect();\n // dv.attr('width', bbox.width);\n // dv.attr('height', bbox.height);\n // }\n // bbox = labelContainer.getBBox();\n\n // log.info('Text 2', text2);\n // const textRows = text2.slice(1, text2.length);\n // let titleBox = text.getBBox();\n // const descr = label\n // .node()\n // .appendChild(createLabel(textRows.join('
'), node.labelStyle, true, true));\n\n // if (evaluate(getConfig().flowchart.htmlLabels)) {\n // const div = descr.children[0];\n // const dv = select(descr);\n // bbox = div.getBoundingClientRect();\n // dv.attr('width', bbox.width);\n // dv.attr('height', bbox.height);\n // }\n // // bbox = label.getBBox();\n // // log.info(descr);\n // select(descr).attr(\n // 'transform',\n // 'translate( ' +\n // // (titleBox.width - bbox.width) / 2 +\n // (bbox.width > titleBox.width ? 0 : (titleBox.width - bbox.width) / 2) +\n // ', ' +\n // (titleBox.height + halfPadding + 5) +\n // ')'\n // );\n // select(text).attr(\n // 'transform',\n // 'translate( ' +\n // // (titleBox.width - bbox.width) / 2 +\n // (bbox.width < titleBox.width ? 0 : -(titleBox.width - bbox.width) / 2) +\n // ', ' +\n // 0 +\n // ')'\n // );\n // // Get the size of the label\n\n // // Bounding box for title and text\n // bbox = label.node().getBBox();\n\n // // Center the label\n // label.attr(\n // 'transform',\n // 'translate(' + -bbox.width / 2 + ', ' + (-bbox.height / 2 - halfPadding + 3) + ')'\n // );\n\n rect\n .attr('class', 'outer title-state')\n .attr('x', -maxWidth / 2 - halfPadding)\n .attr('y', -(maxHeight / 2) - halfPadding)\n .attr('width', maxWidth + node.padding)\n .attr('height', maxHeight + node.padding);\n\n // innerLine\n // .attr('class', 'divider')\n // .attr('x1', -bbox.width / 2 - halfPadding)\n // .attr('x2', bbox.width / 2 + halfPadding)\n // .attr('y1', -bbox.height / 2 - halfPadding + titleBox.height + halfPadding)\n // .attr('y2', -bbox.height / 2 - halfPadding + titleBox.height + halfPadding);\n\n updateNodeBounds(node, rect);\n\n node.intersect = function (point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst shapes = {\n question,\n rect,\n labelRect,\n rectWithTitle,\n choice,\n circle,\n doublecircle,\n stadium,\n hexagon,\n rect_left_inv_arrow,\n lean_right,\n lean_left,\n trapezoid,\n inv_trapezoid,\n rect_right_inv_arrow,\n cylinder,\n start,\n end,\n note,\n subroutine,\n fork: forkJoin,\n join: forkJoin,\n class_box,\n};\n\nlet nodeElems = {};\n\nexport const insertNode = (elem, node, dir) => {\n let newEl;\n let el;\n\n // Add link when appropriate\n if (node.link) {\n let target;\n if (getConfig().securityLevel === 'sandbox') {\n target = '_top';\n } else if (node.linkTarget) {\n target = node.linkTarget || '_blank';\n }\n newEl = elem.insert('svg:a').attr('xlink:href', node.link).attr('target', target);\n el = shapes[node.shape](newEl, node, dir);\n } else {\n el = shapes[node.shape](elem, node, dir);\n newEl = el;\n }\n if (node.tooltip) {\n el.attr('title', node.tooltip);\n }\n if (node.class) {\n el.attr('class', 'node default ' + node.class);\n }\n\n nodeElems[node.id] = newEl;\n\n if (node.haveCallback) {\n nodeElems[node.id].attr('class', nodeElems[node.id].attr('class') + ' clickable');\n }\n};\nexport const setNodeElem = (elem, node) => {\n nodeElems[node.id] = elem;\n};\nexport const clear = () => {\n nodeElems = {};\n};\n\nexport const positionNode = (node) => {\n const el = nodeElems[node.id];\n log.trace(\n 'Transforming node',\n node.diff,\n node,\n 'translate(' + (node.x - node.width / 2 - 5) + ', ' + node.width / 2 + ')'\n );\n const padding = 8;\n const diff = node.diff || 0;\n if (node.clusterNode) {\n el.attr(\n 'transform',\n 'translate(' +\n (node.x + diff - node.width / 2) +\n ', ' +\n (node.y - node.height / 2 - padding) +\n ')'\n );\n } else {\n el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');\n }\n return diff;\n};\n","import { updateNodeBounds, labelHelper } from './util';\nimport { log } from '../../logger'; // eslint-disable-line\nimport intersect from '../intersect/index.js';\n\nconst note = (parent, node) => {\n const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);\n\n log.info('Classes = ', node.classes);\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n rect\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('x', -bbox.width / 2 - halfPadding)\n .attr('y', -bbox.height / 2 - halfPadding)\n .attr('width', bbox.width + node.padding)\n .attr('height', bbox.height + node.padding);\n\n updateNodeBounds(node, rect);\n\n node.intersect = function (point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nexport default note;\n","import createLabel from '../createLabel';\nimport { getConfig } from '../../config';\nimport { decodeEntities } from '../../mermaidAPI';\nimport { select } from 'd3';\nimport { evaluate, sanitizeText } from '../../diagrams/common/common';\nexport const labelHelper = (parent, node, _classes, isNode) => {\n let classes;\n if (!_classes) {\n classes = 'node default';\n } else {\n classes = _classes;\n }\n // Add outer g element\n const shapeSvg = parent\n .insert('g')\n .attr('class', classes)\n .attr('id', node.domId || node.id);\n\n // Create the label and insert it after the rect\n const label = shapeSvg.insert('g').attr('class', 'label').attr('style', node.labelStyle);\n\n const labelText = typeof node.labelText === 'string' ? node.labelText : node.labelText[0];\n\n const text = label\n .node()\n .appendChild(\n createLabel(\n sanitizeText(decodeEntities(labelText), getConfig()),\n node.labelStyle,\n false,\n isNode\n )\n );\n\n // Get the size of the label\n let bbox = text.getBBox();\n\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = text.children[0];\n const dv = select(text);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n\n const halfPadding = node.padding / 2;\n\n // Center the label\n label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');\n\n return { shapeSvg, bbox, halfPadding, label };\n};\n\nexport const updateNodeBounds = (node, element) => {\n const bbox = element.node().getBBox();\n node.width = bbox.width;\n node.height = bbox.height;\n};\n\n/**\n * @param parent\n * @param w\n * @param h\n * @param points\n */\nexport function insertPolygonShape(parent, w, h, points) {\n return parent\n .insert('polygon', ':first-child')\n .attr(\n 'points',\n points\n .map(function (d) {\n return d.x + ',' + d.y;\n })\n .join(' ')\n )\n .attr('class', 'label-container')\n .attr('transform', 'translate(' + -w / 2 + ',' + h / 2 + ')');\n}\n","import theme from './themes';\n/**\n * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click\n * here](8.6.0_docs.md)].**\n *\n * ## **What follows are config instructions for older versions**\n *\n * These are the default options which can be overridden with the initialization call like so:\n *\n * **Example 1:**
mermaid.initialize({ flowchart:{ htmlLabels: false } });\n *\n * **Example 2:**
\n *\n * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults).\n * A description of each option follows below.\n *\n * @name Configuration\n */\nconst config = {\n /**\n * Theme , the CSS style sheet\n *\n * | Parameter | Description | Type | Required | Values |\n * | --------- | --------------- | ------ | -------- | ---------------------------------------------- |\n * | theme | Built in Themes | string | Optional | 'default', 'forest', 'dark', 'neutral', 'null' |\n *\n * **Notes:** To disable any pre-defined mermaid theme, use \"null\".
\"theme\": \"forest\",\n * \"themeCSS\": \".node rect { fill: red; }\"\n */\n theme: 'default',\n themeVariables: theme['default'].getThemeVariables(),\n themeCSS: undefined,\n /* **maxTextSize** - The maximum allowed size of the users text diagram */\n maxTextSize: 50000,\n darkMode: false,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ---------- | ------------------------------------------------------ | ------ | -------- | --------------------------- |\n * | fontFamily | specifies the font to be used in the rendered diagrams | string | Required | Any Possible CSS FontFamily |\n *\n * **Notes:** Default value: '\"trebuchet ms\", verdana, arial, sans-serif;'.\n */\n fontFamily: '\"trebuchet ms\", verdana, arial, sans-serif;',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ----------------------------------------------------- | ---------------- | -------- | ------------- |\n * | logLevel | This option decides the amount of logging to be used. | string \\| number | Required | 1, 2, 3, 4, 5 |\n *\n * **Notes:**\n *\n * - Debug: 1\n * - Info: 2\n * - Warn: 3\n * - Error: 4\n * - Fatal: 5 (default)\n */\n logLevel: 5,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------- | --------------------------------- | ------ | -------- | ------------------------------- |\n * | securitylevel | Level of trust for parsed diagram | string | Required | 'strict', 'loose', 'antiscript' |\n *\n * **Notes**:\n *\n * - **strict**: (**default**) tags in text are encoded, click functionality is disabled\n * - **loose**: tags in text are allowed, click functionality is enabled\n * - **antiscript**: html tags in text are allowed, (only script element is removed), click\n * functionality is enabled\n */\n securityLevel: 'strict',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | -------------------------------------------- | ------- | -------- | ----------- |\n * | startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false |\n *\n * **Notes:** Default value: true\n */\n startOnLoad: true,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------- |\n * | arrowMarkerAbsolute | Controls whether or arrow markers in html code are absolute paths or anchors | boolean | Required | true, false |\n *\n * **Notes**:\n *\n * This matters if you are using base tag settings.\n *\n * Default value: false\n */\n arrowMarkerAbsolute: false,\n\n /**\n * This option controls which currentConfig keys are considered _secure_ and can only be changed\n * via call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to the\n * `secure` keys in the current currentConfig. This prevents malicious graph directives from\n * overriding a site's default security.\n *\n * **Notes**:\n *\n * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']\n */\n secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],\n\n /**\n * This option controls if the generated ids of nodes in the SVG are generated randomly or based\n * on a seed. If set to false, the IDs are generated based on the current date and thus are not\n * deterministic. This is the default behaviour.\n *\n * **Notes**:\n *\n * This matters if your files are checked into sourcecontrol e.g. git and should not change unless\n * content is changed.\n *\n * Default value: false\n */\n deterministicIds: false,\n\n /**\n * This option is the optional seed for deterministic ids. if set to undefined but\n * deterministicIds is true, a simple number iterator is used. You can set this attribute to base\n * the seed on a static string.\n */\n deterministicIDSeed: undefined,\n\n /** The object containing configurations specific for flowcharts */\n flowchart: {\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |\n * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n *\n * The amount of padding around the diagram as a whole so that embedded diagrams have margins,\n * expressed in pixels\n *\n * Default value: 8\n */\n diagramPadding: 8,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ---------- | -------------------------------------------------------------------------------------------- | ------- | -------- | ----------- |\n * | htmlLabels | Flag for setting whether or not a html tag should be used for rendering labels on the edges. | boolean | Required | true, false |\n *\n * **Notes:** Default value: true.\n */\n htmlLabels: true,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | --------------------------------------------------- | ------- | -------- | ------------------- |\n * | nodeSpacing | Defines the spacing between nodes on the same level | Integer | Required | Any positive Number |\n *\n * **Notes:**\n *\n * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the\n * vertical spacing for LR as well as RL graphs.**\n *\n * Default value: 50\n */\n nodeSpacing: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------------------------------------------------- | ------- | -------- | ------------------- |\n * | rankSpacing | Defines the spacing between nodes on different levels | Integer | Required | Any Positive Number |\n *\n * **Notes**:\n *\n * Pertains to vertical spacing for TB (top to bottom) or BT (bottom to top), and the horizontal\n * spacing for LR as well as RL graphs.\n *\n * Default value 50\n */\n rankSpacing: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | -------------------------------------------------- | ------ | -------- | ----------------------------- |\n * | curve | Defines how mermaid renders curves for flowcharts. | string | Required | 'basis', 'linear', 'cardinal' |\n *\n * **Notes:**\n *\n * Default Value: 'basis'\n */\n curve: 'basis',\n // Only used in new experimental rendering\n // represents the padding between the labels and the shape\n padding: 15,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------- | ------- | -------- | ----------- |\n * | useMaxWidth | See notes | boolean | 4 | true, false |\n *\n * **Notes:**\n *\n * When this flag is set the height and width is set to 100% and is then scaling with the\n * available space if not the absolute space required is used.\n *\n * Default value: true\n */\n useMaxWidth: true,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ----------- | ------- | -------- | ----------------------- |\n * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |\n *\n * **Notes:**\n *\n * Decides which rendering engine that is to be used for the rendering. Legal values are:\n * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid\n *\n * Default value: 'dagre-d3'\n */\n defaultRenderer: 'dagre-d3',\n },\n\n /** The object containing configurations specific for sequence diagrams */\n sequence: {\n hideUnusedParticipants: false,\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ---------------------------- | ------- | -------- | ------------------ |\n * | activationWidth | Width of the activation rect | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value :10\n */\n activationWidth: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |\n * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 50\n */\n diagramMarginX: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | ------------------------------------------------- | ------- | -------- | ------------------ |\n * | diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 10\n */\n diagramMarginY: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | --------------------- | ------- | -------- | ------------------ |\n * | actorMargin | Margin between actors | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 50\n */\n actorMargin: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | -------------------- | ------- | -------- | ------------------ |\n * | width | Width of actor boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 150\n */\n width: 150,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | --------------------- | ------- | -------- | ------------------ |\n * | height | Height of actor boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 65\n */\n height: 65,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ------------------------ | ------- | -------- | ------------------ |\n * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 10\n */\n boxMargin: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |\n * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 5\n */\n boxTextMargin: 5,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ---------- | ------------------- | ------- | -------- | ------------------ |\n * | noteMargin | margin around notes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 10\n */\n noteMargin: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------- | ---------------------- | ------- | -------- | ------------------ |\n * | messageMargin | Space between messages | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 35\n */\n messageMargin: 35,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------ | --------------------------- | ------ | -------- | ------------------------- |\n * | messageAlign | Multiline message alignment | string | Required | 'left', 'center', 'right' |\n *\n * **Notes:** Default value: 'center'\n */\n messageAlign: 'center',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------ | --------------------------- | ------- | -------- | ----------- |\n * | mirrorActors | Mirror actors under diagram | boolean | Required | true, false |\n *\n * **Notes:** Default value: true\n */\n mirrorActors: true,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ---------- | ----------------------------------------------------------------------- | ------- | -------- | ----------- |\n * | forceMenus | forces actor popup menus to always be visible (to support E2E testing). | Boolean | Required | True, False |\n *\n * **Notes:**\n *\n * Default value: false.\n */\n forceMenus: false,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |\n * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n *\n * Depending on css styling this might need adjustment.\n *\n * Default value: 1\n */\n bottomMarginAdj: 1,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------- | ------- | -------- | ----------- |\n * | useMaxWidth | See Notes | boolean | Required | true, false |\n *\n * **Notes:** When this flag is set to true, the height and width is set to 100% and is then\n * scaling with the available space. If set to false, the absolute space required is used.\n *\n * Default value: true\n */\n useMaxWidth: true,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ------------------------------------ | ------- | -------- | ----------- |\n * | rightAngles | display curve arrows as right angles | boolean | Required | true, false |\n *\n * **Notes:**\n *\n * This will display arrows that start and begin at the same node as right angles, rather than a curve\n *\n * Default value: false\n */\n rightAngles: false,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------------- | ------------------------------- | ------- | -------- | ----------- |\n * | showSequenceNumbers | This will show the node numbers | boolean | Required | true, false |\n *\n * **Notes:** Default value: false\n */\n showSequenceNumbers: false,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------- | -------------------------------------------------- | ------- | -------- | ------------------ |\n * | actorFontSize | This sets the font size of the actor's description | Integer | Require | Any Positive Value |\n *\n * **Notes:** **Default value 14**..\n */\n actorFontSize: 14,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- |\n * | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily |\n *\n * **Notes:** Default value: \"'Open Sans\", sans-serif'\n */\n actorFontFamily: '\"Open Sans\", sans-serif',\n\n /**\n * This sets the font weight of the actor's description\n *\n * **Notes:** Default value: 400.\n */\n actorFontWeight: 400,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------ | ----------------------------------------------- | ------- | -------- | ------------------ |\n * | noteFontSize | This sets the font size of actor-attached notes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 14\n */\n noteFontSize: 14,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | -------------------------------------------------- | ------ | -------- | --------------------------- |\n * | noteFontFamily | This sets the font family of actor-attached notes. | string | Required | Any Possible CSS FontFamily |\n *\n * **Notes:** Default value: ''\"trebuchet ms\", verdana, arial, sans-serif'\n */\n noteFontFamily: '\"trebuchet ms\", verdana, arial, sans-serif',\n\n /**\n * This sets the font weight of the note's description\n *\n * **Notes:** Default value: 400\n */\n noteFontWeight: 400,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ---------------------------------------------------- | ------ | -------- | ------------------------- |\n * | noteAlign | This sets the text alignment of actor-attached notes | string | required | 'left', 'center', 'right' |\n *\n * **Notes:** Default value: 'center'\n */\n noteAlign: 'center',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ----------------------------------------- | ------- | -------- | ------------------- |\n * | messageFontSize | This sets the font size of actor messages | Integer | Required | Any Positive Number |\n *\n * **Notes:** Default value: 16\n */\n messageFontSize: 16,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------------- | ------------------------------------------- | ------ | -------- | --------------------------- |\n * | messageFontFamily | This sets the font family of actor messages | string | Required | Any Possible CSS FontFamily |\n *\n * **Notes:** Default value: '\"trebuchet ms\", verdana, arial, sans-serif'\n */\n messageFontFamily: '\"trebuchet ms\", verdana, arial, sans-serif',\n\n /**\n * This sets the font weight of the message's description\n *\n * **Notes:** Default value: 400.\n */\n messageFontWeight: 400,\n\n /**\n * This sets the auto-wrap state for the diagram\n *\n * **Notes:** Default value: false.\n */\n wrap: false,\n\n /**\n * This sets the auto-wrap padding for the diagram (sides only)\n *\n * **Notes:** Default value: 0.\n */\n wrapPadding: 10,\n\n /**\n * This sets the width of the loop-box (loop, alt, opt, par)\n *\n * **Notes:** Default value: 50.\n */\n labelBoxWidth: 50,\n\n /**\n * This sets the height of the loop-box (loop, alt, opt, par)\n *\n * **Notes:** Default value: 20.\n */\n labelBoxHeight: 20,\n\n messageFont: function () {\n return {\n fontFamily: this.messageFontFamily,\n fontSize: this.messageFontSize,\n fontWeight: this.messageFontWeight,\n };\n },\n noteFont: function () {\n return {\n fontFamily: this.noteFontFamily,\n fontSize: this.noteFontSize,\n fontWeight: this.noteFontWeight,\n };\n },\n actorFont: function () {\n return {\n fontFamily: this.actorFontFamily,\n fontSize: this.actorFontSize,\n fontWeight: this.actorFontWeight,\n };\n },\n },\n\n /** The object containing configurations specific for gantt diagrams */\n gantt: {\n /**\n * ### titleTopMargin\n *\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |\n * | titleTopMargin | Margin top for the text over the gantt diagram | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 25\n */\n titleTopMargin: 25,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ----------------------------------- | ------- | -------- | ------------------ |\n * | barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 20\n */\n barHeight: 20,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ---------------------------------------------------------------- | ------- | -------- | ------------------ |\n * | barGap | The margin between the different activities in the gantt diagram | Integer | Optional | Any Positive Value |\n *\n * **Notes:** Default value: 4\n */\n barGap: 4,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ---------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------ |\n * | topPadding | Margin between title and gantt diagram and between axis and gantt diagram. | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 50\n */\n topPadding: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------ | ----------------------------------------------------------------------- | ------- | -------- | ------------------ |\n * | rightPadding | The space allocated for the section name to the right of the activities | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 75\n */\n rightPadding: 75,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ---------------------------------------------------------------------- | ------- | -------- | ------------------ |\n * | leftPadding | The space allocated for the section name to the left of the activities | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 75\n */\n leftPadding: 75,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------------- | -------------------------------------------- | ------- | -------- | ------------------ |\n * | gridLineStartPadding | Vertical starting position of the grid lines | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 35\n */\n gridLineStartPadding: 35,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ----------- | ------- | -------- | ------------------ |\n * | fontSize | Font size | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 11\n */\n fontSize: 11,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ---------------------- | ------- | -------- | ------------------ |\n * | sectionFontSize | Font size for sections | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 11\n */\n sectionFontSize: 11,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------------- | ---------------------------------------- | ------- | -------- | ------------------ |\n * | numberSectionStyles | The number of alternating section styles | Integer | 4 | Any Positive Value |\n *\n * **Notes:** Default value: 4\n */\n numberSectionStyles: 4,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ---------- | --------------------------- | ---- | -------- | ---------------- |\n * | axisFormat | Datetime format of the axis | 3 | Required | Date in yy-mm-dd |\n *\n * **Notes:**\n *\n * This might need adjustment to match your locale and preferences\n *\n * Default value: '%Y-%m-%d'.\n */\n axisFormat: '%Y-%m-%d',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------- | ------- | -------- | ----------- |\n * | useMaxWidth | See notes | boolean | 4 | true, false |\n *\n * **Notes:**\n *\n * When this flag is set the height and width is set to 100% and is then scaling with the\n * available space if not the absolute space required is used.\n *\n * Default value: true\n */\n useMaxWidth: true,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ----------- | ------- | -------- | ----------- |\n * | topAxis | See notes | Boolean | 4 | True, False |\n *\n * **Notes:** when this flag is set date labels will be added to the top of the chart\n *\n * **Default value false**.\n */\n topAxis: false,\n\n useWidth: undefined,\n },\n\n /** The object containing configurations specific for journey diagrams */\n journey: {\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |\n * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 50\n */\n diagramMarginX: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ |\n * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 10\n */\n diagramMarginY: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | --------------------- | ------- | -------- | ------------------ |\n * | actorMargin | Margin between actors | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 50\n */\n leftMargin: 150,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | -------------------- | ------- | -------- | ------------------ |\n * | width | Width of actor boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 150\n */\n width: 150,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | --------------------- | ------- | -------- | ------------------ |\n * | height | Height of actor boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 65\n */\n height: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ------------------------ | ------- | -------- | ------------------ |\n * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 10\n */\n boxMargin: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |\n * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 5\n */\n boxTextMargin: 5,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ---------- | ------------------- | ------- | -------- | ------------------ |\n * | noteMargin | Margin around notes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 10\n */\n noteMargin: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------- | ----------------------- | ------- | -------- | ------------------ |\n * | messageMargin | Space between messages. | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n *\n * Space between messages.\n *\n * Default value: 35\n */\n messageMargin: 35,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------ | --------------------------- | ---- | -------- | ------------------------- |\n * | messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' |\n *\n * **Notes:** Default value: 'center'\n */\n messageAlign: 'center',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |\n * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4 | Any Positive Value |\n *\n * **Notes:**\n *\n * Depending on css styling this might need adjustment.\n *\n * Default value: 1\n */\n bottomMarginAdj: 1,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------- | ------- | -------- | ----------- |\n * | useMaxWidth | See notes | boolean | 4 | true, false |\n *\n * **Notes:**\n *\n * When this flag is set the height and width is set to 100% and is then scaling with the\n * available space if not the absolute space required is used.\n *\n * Default value: true\n */\n useMaxWidth: true,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | --------------------------------- | ---- | -------- | ----------- |\n * | rightAngles | Curved Arrows become Right Angles | 3 | 4 | true, false |\n *\n * **Notes:**\n *\n * This will display arrows that start and begin at the same node as right angles, rather than a curves\n *\n * Default value: false\n */\n rightAngles: false,\n taskFontSize: 14,\n taskFontFamily: '\"Open Sans\", sans-serif',\n taskMargin: 50,\n // width of activation box\n activationWidth: 10,\n\n // text placement as: tspan | fo | old only text as before\n textPlacement: 'fo',\n actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'],\n\n sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'],\n sectionColours: ['#fff'],\n },\n class: {\n arrowMarkerAbsolute: false,\n dividerMargin: 10,\n padding: 5,\n textHeight: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------- | ------- | -------- | ----------- |\n * | useMaxWidth | See notes | boolean | 4 | true, false |\n *\n * **Notes:**\n *\n * When this flag is set the height and width is set to 100% and is then scaling with the\n * available space if not the absolute space required is used.\n *\n * Default value: true\n */\n useMaxWidth: true,\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ----------- | ------- | -------- | ----------------------- |\n * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |\n *\n * **Notes**:\n *\n * Decides which rendering engine that is to be used for the rendering. Legal values are:\n * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid\n *\n * Default value: 'dagre-d3'\n */\n defaultRenderer: 'dagre-wrapper',\n },\n state: {\n dividerMargin: 10,\n sizeUnit: 5,\n padding: 8,\n textHeight: 10,\n titleShift: -15,\n noteMargin: 10,\n forkWidth: 70,\n forkHeight: 7,\n // Used\n miniPadding: 2,\n // Font size factor, this is used to guess the width of the edges labels before rendering by dagre\n // layout. This might need updating if/when switching font\n fontSizeFactor: 5.02,\n fontSize: 24,\n labelHeight: 16,\n edgeLengthFactor: '20',\n compositTitleSize: 35,\n radius: 5,\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------- | ------- | -------- | ----------- |\n * | useMaxWidth | See notes | boolean | 4 | true, false |\n *\n * **Notes:**\n *\n * When this flag is set the height and width is set to 100% and is then scaling with the\n * available space if not the absolute space required is used.\n *\n * Default value: true\n */\n useMaxWidth: true,\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ----------- | ------- | -------- | ----------------------- |\n * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |\n *\n * **Notes:**\n *\n * Decides which rendering engine that is to be used for the rendering. Legal values are:\n * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid\n *\n * Default value: 'dagre-d3'\n */\n defaultRenderer: 'dagre-wrapper',\n },\n\n /** The object containing configurations specific for entity relationship diagrams */\n er: {\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |\n * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n *\n * The amount of padding around the diagram as a whole so that embedded diagrams have margins,\n * expressed in pixels\n *\n * Default value: 20\n */\n diagramPadding: 20,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ---------------------------------------- | ------ | -------- | ---------------------- |\n * | layoutDirection | Directional bias for layout of entities. | string | Required | \"TB\", \"BT\", \"LR\", \"RL\" |\n *\n * **Notes:**\n *\n * 'TB' for Top-Bottom, 'BT'for Bottom-Top, 'LR' for Left-Right, or 'RL' for Right to Left.\n *\n * T = top, B = bottom, L = left, and R = right.\n *\n * Default value: 'TB'\n */\n layoutDirection: 'TB',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | ---------------------------------- | ------- | -------- | ------------------ |\n * | minEntityWidth | The minimum width of an entity box | Integer | Required | Any Positive Value |\n *\n * **Notes:** Expressed in pixels. Default value: 100\n */\n minEntityWidth: 100,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ----------------------------------- | ------- | -------- | ------------------ |\n * | minEntityHeight | The minimum height of an entity box | Integer | 4 | Any Positive Value |\n *\n * **Notes:** Expressed in pixels Default value: 75\n */\n minEntityHeight: 75,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ |\n * | entityPadding | Minimum internal padding between text in box and box borders | Integer | 4 | Any Positive Value |\n *\n * **Notes:**\n *\n * The minimum internal padding between text in an entity box and the enclosing box borders,\n * expressed in pixels.\n *\n * Default value: 15\n */\n entityPadding: 15,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ----------------------------------- | ------ | -------- | -------------------- |\n * | stroke | Stroke color of box edges and lines | string | 4 | Any recognized color |\n *\n * **Notes:** Default value: 'gray'\n */\n stroke: 'gray',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | -------------------------- | ------ | -------- | -------------------- |\n * | fill | Fill color of entity boxes | string | 4 | Any recognized color |\n *\n * **Notes:** Default value: 'honeydew'\n */\n fill: 'honeydew',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ------------------- | ------- | -------- | ------------------ |\n * | fontSize | Font Size in pixels | Integer | | Any Positive Value |\n *\n * **Notes:**\n *\n * Font size (expressed as an integer representing a number of pixels) Default value: 12\n */\n fontSize: 12,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------- | ------- | -------- | ----------- |\n * | useMaxWidth | See Notes | boolean | Required | true, false |\n *\n * **Notes:**\n *\n * When this flag is set to true, the diagram width is locked to 100% and scaled based on\n * available space. If set to false, the diagram reserves its absolute width.\n *\n * Default value: true\n */\n useMaxWidth: true,\n },\n\n /** The object containing configurations specific for pie diagrams */\n pie: {\n useWidth: undefined,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------- | ------- | -------- | ----------- |\n * | useMaxWidth | See Notes | boolean | Required | true, false |\n *\n * **Notes:**\n *\n * When this flag is set to true, the diagram width is locked to 100% and scaled based on\n * available space. If set to false, the diagram reserves its absolute width.\n *\n * Default value: true\n */\n useMaxWidth: true,\n },\n\n /** The object containing configurations specific for req diagrams */\n requirement: {\n useWidth: undefined,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------- | ------- | -------- | ----------- |\n * | useMaxWidth | See Notes | boolean | Required | true, false |\n *\n * **Notes:**\n *\n * When this flag is set to true, the diagram width is locked to 100% and scaled based on\n * available space. If set to false, the diagram reserves its absolute width.\n *\n * Default value: true\n */\n useMaxWidth: true,\n\n rect_fill: '#f9f9f9',\n text_color: '#333',\n rect_border_size: '0.5px',\n rect_border_color: '#bbb',\n rect_min_width: 200,\n rect_min_height: 200,\n fontSize: 14,\n rect_padding: 10,\n line_height: 20,\n },\n gitGraph: {\n diagramPadding: 8,\n nodeLabel: {\n width: 75,\n height: 100,\n x: -25,\n y: 0,\n },\n mainBranchName: 'main',\n mainBranchOrder: 0,\n showCommitLabel: true,\n showBranches: true,\n rotateCommitLabel: true,\n },\n\n /** The object containing configurations specific for c4 diagrams */\n c4: {\n useWidth: undefined,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |\n * | diagramMarginX | Margin to the right and left of the c4 diagram | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 50\n */\n diagramMarginX: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | ------------------------------------------- | ------- | -------- | ------------------ |\n * | diagramMarginY | Margin to the over and under the c4 diagram | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 10\n */\n diagramMarginY: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------- | --------------------- | ------- | -------- | ------------------ |\n * | c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 50\n */\n c4ShapeMargin: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | ---------------------- | ------- | -------- | ------------------ |\n * | c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 20\n */\n c4ShapePadding: 20,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | --------------------- | ------- | -------- | ------------------ |\n * | width | Width of person boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 216\n */\n width: 216,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ---------------------- | ------- | -------- | ------------------ |\n * | height | Height of person boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 60\n */\n height: 60,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ------------------- | ------- | -------- | ------------------ |\n * | boxMargin | Margin around boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 10\n */\n boxMargin: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------- | ------- | -------- | ----------- |\n * | useMaxWidth | See Notes | boolean | Required | true, false |\n *\n * **Notes:** When this flag is set to true, the height and width is set to 100% and is then\n * scaling with the available space. If set to false, the absolute space required is used.\n *\n * Default value: true\n */\n useMaxWidth: true,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------ | ----------- | ------- | -------- | ------------------ |\n * | c4ShapeInRow | See Notes | Integer | Required | Any Positive Value |\n *\n * **Notes:** How many shapes to place in each row.\n *\n * Default value: 4\n */\n c4ShapeInRow: 4,\n\n nextLinePaddingX: 0,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ----------- | ------- | -------- | ------------------ |\n * | c4BoundaryInRow | See Notes | Integer | Required | Any Positive Value |\n *\n * **Notes:** How many boundarys to place in each row.\n *\n * Default value: 2\n */\n c4BoundaryInRow: 2,\n\n /**\n * This sets the font size of Person shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n personFontSize: 14,\n /**\n * This sets the font family of Person shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n personFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of Person shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n personFontWeight: 'normal',\n\n /**\n * This sets the font size of External Person shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n external_personFontSize: 14,\n /**\n * This sets the font family of External Person shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n external_personFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of External Person shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n external_personFontWeight: 'normal',\n\n /**\n * This sets the font size of System shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n systemFontSize: 14,\n /**\n * This sets the font family of System shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n systemFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of System shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n systemFontWeight: 'normal',\n\n /**\n * This sets the font size of External System shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n external_systemFontSize: 14,\n /**\n * This sets the font family of External System shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n external_systemFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of External System shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n external_systemFontWeight: 'normal',\n\n /**\n * This sets the font size of System DB shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n system_dbFontSize: 14,\n /**\n * This sets the font family of System DB shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n system_dbFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of System DB shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n system_dbFontWeight: 'normal',\n\n /**\n * This sets the font size of External System DB shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n external_system_dbFontSize: 14,\n /**\n * This sets the font family of External System DB shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n external_system_dbFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of External System DB shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n external_system_dbFontWeight: 'normal',\n\n /**\n * This sets the font size of System Queue shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n system_queueFontSize: 14,\n /**\n * This sets the font family of System Queue shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n system_queueFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of System Queue shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n system_queueFontWeight: 'normal',\n\n /**\n * This sets the font size of External System Queue shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n external_system_queueFontSize: 14,\n /**\n * This sets the font family of External System Queue shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n external_system_queueFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of External System Queue shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n external_system_queueFontWeight: 'normal',\n\n /**\n * This sets the font size of Boundary shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n boundaryFontSize: 14,\n /**\n * This sets the font family of Boundary shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n boundaryFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of Boundary shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n boundaryFontWeight: 'normal',\n\n /**\n * This sets the font size of Message shape for the diagram\n *\n * **Notes:** Default value: 12.\n */\n messageFontSize: 12,\n /**\n * This sets the font family of Message shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n messageFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of Message shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n messageFontWeight: 'normal',\n\n /**\n * This sets the font size of Container shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n containerFontSize: 14,\n /**\n * This sets the font family of Container shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n containerFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of Container shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n containerFontWeight: 'normal',\n\n /**\n * This sets the font size of External Container shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n external_containerFontSize: 14,\n /**\n * This sets the font family of External Container shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n external_containerFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of External Container shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n external_containerFontWeight: 'normal',\n\n /**\n * This sets the font size of Container DB shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n container_dbFontSize: 14,\n /**\n * This sets the font family of Container DB shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n container_dbFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of Container DB shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n container_dbFontWeight: 'normal',\n\n /**\n * This sets the font size of External Container DB shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n external_container_dbFontSize: 14,\n /**\n * This sets the font family of External Container DB shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n external_container_dbFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of External Container DB shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n external_container_dbFontWeight: 'normal',\n\n /**\n * This sets the font size of Container Queue shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n container_queueFontSize: 14,\n /**\n * This sets the font family of Container Queue shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n container_queueFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of Container Queue shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n container_queueFontWeight: 'normal',\n\n /**\n * This sets the font size of External Container Queue shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n external_container_queueFontSize: 14,\n /**\n * This sets the font family of External Container Queue shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n external_container_queueFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of External Container Queue shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n external_container_queueFontWeight: 'normal',\n\n /**\n * This sets the font size of Component shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n componentFontSize: 14,\n /**\n * This sets the font family of Component shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n componentFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of Component shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n componentFontWeight: 'normal',\n\n /**\n * This sets the font size of External Component shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n external_componentFontSize: 14,\n /**\n * This sets the font family of External Component shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n external_componentFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of External Component shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n external_componentFontWeight: 'normal',\n\n /**\n * This sets the font size of Component DB shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n component_dbFontSize: 14,\n /**\n * This sets the font family of Component DB shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n component_dbFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of Component DB shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n component_dbFontWeight: 'normal',\n\n /**\n * This sets the font size of External Component DB shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n external_component_dbFontSize: 14,\n /**\n * This sets the font family of External Component DB shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n external_component_dbFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of External Component DB shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n external_component_dbFontWeight: 'normal',\n\n /**\n * This sets the font size of Component Queue shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n component_queueFontSize: 14,\n /**\n * This sets the font family of Component Queue shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n component_queueFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of Component Queue shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n component_queueFontWeight: 'normal',\n\n /**\n * This sets the font size of External Component Queue shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n external_component_queueFontSize: 14,\n /**\n * This sets the font family of External Component Queue shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n external_component_queueFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of External Component Queue shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n external_component_queueFontWeight: 'normal',\n\n /**\n * This sets the auto-wrap state for the diagram\n *\n * **Notes:** Default value: true.\n */\n wrap: true,\n\n /**\n * This sets the auto-wrap padding for the diagram (sides only)\n *\n * **Notes:** Default value: 0.\n */\n wrapPadding: 10,\n\n personFont: function () {\n return {\n fontFamily: this.personFontFamily,\n fontSize: this.personFontSize,\n fontWeight: this.personFontWeight,\n };\n },\n\n external_personFont: function () {\n return {\n fontFamily: this.external_personFontFamily,\n fontSize: this.external_personFontSize,\n fontWeight: this.external_personFontWeight,\n };\n },\n\n systemFont: function () {\n return {\n fontFamily: this.systemFontFamily,\n fontSize: this.systemFontSize,\n fontWeight: this.systemFontWeight,\n };\n },\n\n external_systemFont: function () {\n return {\n fontFamily: this.external_systemFontFamily,\n fontSize: this.external_systemFontSize,\n fontWeight: this.external_systemFontWeight,\n };\n },\n\n system_dbFont: function () {\n return {\n fontFamily: this.system_dbFontFamily,\n fontSize: this.system_dbFontSize,\n fontWeight: this.system_dbFontWeight,\n };\n },\n\n external_system_dbFont: function () {\n return {\n fontFamily: this.external_system_dbFontFamily,\n fontSize: this.external_system_dbFontSize,\n fontWeight: this.external_system_dbFontWeight,\n };\n },\n\n system_queueFont: function () {\n return {\n fontFamily: this.system_queueFontFamily,\n fontSize: this.system_queueFontSize,\n fontWeight: this.system_queueFontWeight,\n };\n },\n\n external_system_queueFont: function () {\n return {\n fontFamily: this.external_system_queueFontFamily,\n fontSize: this.external_system_queueFontSize,\n fontWeight: this.external_system_queueFontWeight,\n };\n },\n\n containerFont: function () {\n return {\n fontFamily: this.containerFontFamily,\n fontSize: this.containerFontSize,\n fontWeight: this.containerFontWeight,\n };\n },\n\n external_containerFont: function () {\n return {\n fontFamily: this.external_containerFontFamily,\n fontSize: this.external_containerFontSize,\n fontWeight: this.external_containerFontWeight,\n };\n },\n\n container_dbFont: function () {\n return {\n fontFamily: this.container_dbFontFamily,\n fontSize: this.container_dbFontSize,\n fontWeight: this.container_dbFontWeight,\n };\n },\n\n external_container_dbFont: function () {\n return {\n fontFamily: this.external_container_dbFontFamily,\n fontSize: this.external_container_dbFontSize,\n fontWeight: this.external_container_dbFontWeight,\n };\n },\n\n container_queueFont: function () {\n return {\n fontFamily: this.container_queueFontFamily,\n fontSize: this.container_queueFontSize,\n fontWeight: this.container_queueFontWeight,\n };\n },\n\n external_container_queueFont: function () {\n return {\n fontFamily: this.external_container_queueFontFamily,\n fontSize: this.external_container_queueFontSize,\n fontWeight: this.external_container_queueFontWeight,\n };\n },\n\n componentFont: function () {\n return {\n fontFamily: this.componentFontFamily,\n fontSize: this.componentFontSize,\n fontWeight: this.componentFontWeight,\n };\n },\n\n external_componentFont: function () {\n return {\n fontFamily: this.external_componentFontFamily,\n fontSize: this.external_componentFontSize,\n fontWeight: this.external_componentFontWeight,\n };\n },\n\n component_dbFont: function () {\n return {\n fontFamily: this.component_dbFontFamily,\n fontSize: this.component_dbFontSize,\n fontWeight: this.component_dbFontWeight,\n };\n },\n\n external_component_dbFont: function () {\n return {\n fontFamily: this.external_component_dbFontFamily,\n fontSize: this.external_component_dbFontSize,\n fontWeight: this.external_component_dbFontWeight,\n };\n },\n\n component_queueFont: function () {\n return {\n fontFamily: this.component_queueFontFamily,\n fontSize: this.component_queueFontSize,\n fontWeight: this.component_queueFontWeight,\n };\n },\n\n external_component_queueFont: function () {\n return {\n fontFamily: this.external_component_queueFontFamily,\n fontSize: this.external_component_queueFontSize,\n fontWeight: this.external_component_queueFontWeight,\n };\n },\n\n boundaryFont: function () {\n return {\n fontFamily: this.boundaryFontFamily,\n fontSize: this.boundaryFontSize,\n fontWeight: this.boundaryFontWeight,\n };\n },\n\n messageFont: function () {\n return {\n fontFamily: this.messageFontFamily,\n fontSize: this.messageFontSize,\n fontWeight: this.messageFontWeight,\n };\n },\n\n // ' Colors\n // ' ##################################\n person_bg_color: '#08427B',\n person_border_color: '#073B6F',\n external_person_bg_color: '#686868',\n external_person_border_color: '#8A8A8A',\n system_bg_color: '#1168BD',\n system_border_color: '#3C7FC0',\n system_db_bg_color: '#1168BD',\n system_db_border_color: '#3C7FC0',\n system_queue_bg_color: '#1168BD',\n system_queue_border_color: '#3C7FC0',\n external_system_bg_color: '#999999',\n external_system_border_color: '#8A8A8A',\n external_system_db_bg_color: '#999999',\n external_system_db_border_color: '#8A8A8A',\n external_system_queue_bg_color: '#999999',\n external_system_queue_border_color: '#8A8A8A',\n container_bg_color: '#438DD5',\n container_border_color: '#3C7FC0',\n container_db_bg_color: '#438DD5',\n container_db_border_color: '#3C7FC0',\n container_queue_bg_color: '#438DD5',\n container_queue_border_color: '#3C7FC0',\n external_container_bg_color: '#B3B3B3',\n external_container_border_color: '#A6A6A6',\n external_container_db_bg_color: '#B3B3B3',\n external_container_db_border_color: '#A6A6A6',\n external_container_queue_bg_color: '#B3B3B3',\n external_container_queue_border_color: '#A6A6A6',\n component_bg_color: '#85BBF0',\n component_border_color: '#78A8D8',\n component_db_bg_color: '#85BBF0',\n component_db_border_color: '#78A8D8',\n component_queue_bg_color: '#85BBF0',\n component_queue_border_color: '#78A8D8',\n external_component_bg_color: '#CCCCCC',\n external_component_border_color: '#BFBFBF',\n external_component_db_bg_color: '#CCCCCC',\n external_component_db_border_color: '#BFBFBF',\n external_component_queue_bg_color: '#CCCCCC',\n external_component_queue_border_color: '#BFBFBF',\n },\n};\n\nconfig.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;\nconfig.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute;\n\nconst keyify = (obj, prefix = '') =>\n Object.keys(obj).reduce((res, el) => {\n if (Array.isArray(obj[el])) {\n return res;\n } else if (typeof obj[el] === 'object' && obj[el] !== null) {\n return [...res, prefix + el, ...keyify(obj[el], '')];\n }\n return [...res, prefix + el];\n }, []);\n\nexport const configKeys = keyify(config, '');\nexport default config;\n","const directive =\n /[%]{2}[{]\\s*(?:(?:(\\w+)\\s*:|(\\w+))\\s*(?:(?:(\\w+))|((?:(?![}][%]{2}).|\\r?\\n)*))?\\s*)(?:[}][%]{2})?/gi;\nconst anyComment = /\\s*%%.*\\n/gm;\nconst detectors = {};\n/**\n * @function detectType Detects the type of the graph text. Takes into consideration the possible\n * existence of an %%init directive\n *\n * ```mermaid\n * %%{initialize: {\"startOnLoad\": true, logLevel: \"fatal\" }}%%\n * graph LR\n * a-->b\n * b-->c\n * c-->d\n * d-->e\n * e-->f\n * f-->g\n * g-->h\n * ```\n * @param {string} text The text defining the graph\n * @param {{\n * class: { defaultRenderer: string } | undefined;\n * state: { defaultRenderer: string } | undefined;\n * flowchart: { defaultRenderer: string } | undefined;\n * }} [cnf]\n * @returns {string} A graph definition key\n */\nconst detectType = function (text, cnf) {\n text = text.replace(directive, '').replace(anyComment, '\\n');\n if (text.match(/^\\s*C4Context|C4Container|C4Component|C4Dynamic|C4Deployment/)) {\n return 'c4';\n }\n\n if (text.match(/^\\s*sequenceDiagram/)) {\n return 'sequence';\n }\n\n if (text.match(/^\\s*gantt/)) {\n return 'gantt';\n }\n if (text.match(/^\\s*classDiagram-v2/)) {\n return 'classDiagram';\n }\n if (text.match(/^\\s*classDiagram/)) {\n if (cnf && cnf.class && cnf.class.defaultRenderer === 'dagre-wrapper') return 'classDiagram';\n return 'class';\n }\n\n if (text.match(/^\\s*stateDiagram-v2/)) {\n return 'stateDiagram';\n }\n\n if (text.match(/^\\s*stateDiagram/)) {\n if (cnf && cnf.class && cnf.state.defaultRenderer === 'dagre-wrapper') return 'stateDiagram';\n return 'state';\n }\n\n // if (text.match(/^\\s*gitGraph/)) {\n // return 'gitGraph';\n // }\n if (text.match(/^\\s*flowchart/)) {\n return 'flowchart-v2';\n }\n\n if (text.match(/^\\s*info/)) {\n return 'info';\n }\n if (text.match(/^\\s*pie/)) {\n return 'pie';\n }\n\n if (text.match(/^\\s*erDiagram/)) {\n return 'er';\n }\n\n if (text.match(/^\\s*journey/)) {\n return 'journey';\n }\n\n if (text.match(/^\\s*requirement/) || text.match(/^\\s*requirementDiagram/)) {\n return 'requirement';\n }\n if (cnf && cnf.flowchart && cnf.flowchart.defaultRenderer === 'dagre-wrapper')\n return 'flowchart-v2';\n const k = Object.keys(detectors);\n for (let i = 0; i < k.length; i++) {\n const key = k[i];\n const dia = detectors[key];\n if (dia && dia.detector(text)) {\n return key;\n }\n }\n return 'flowchart';\n};\nexport const addDetector = (key, detector) => {\n detectors[key] = {\n detector,\n };\n};\nexport default detectType;\n","import { registerDiagram } from './diagramAPI.js';\n// import mindmapDb from '../diagrams/mindmap/mindmapDb';\n// import mindmapRenderer from '../diagrams/mindmap/mindmapRenderer';\n// import mindmapParser from '../diagrams/mindmap/parser/mindmapDiagram';\n// import mindmapDetector from '../diagrams/mindmap/mindmapDetector';\n\nimport gitGraphDb from '../diagrams/git/gitGraphAst';\nimport gitGraphRenderer from '../diagrams/git/gitGraphRenderer';\nimport gitGraphParser from '../diagrams/git/parser/gitGraph';\nimport gitGraphDetector from '../diagrams/git/gitGraphDetector';\n\n// Register mindmap and other built-in diagrams\n// registerDiagram(\n// 'mindmap',\n// mindmapParser,\n// mindmapDb,\n// mindmapRenderer,\n// undefined,\n// mindmapRenderer,\n// mindmapDetector\n// );\nconst addDiagrams = () => {\n registerDiagram(\n 'gitGraph',\n gitGraphParser,\n gitGraphDb,\n gitGraphRenderer,\n undefined,\n gitGraphDetector\n );\n};\nexport default addDiagrams;\n","import c4Db from '../diagrams/c4/c4Db';\nimport c4Renderer from '../diagrams/c4/c4Renderer';\nimport c4Parser from '../diagrams/c4/parser/c4Diagram';\nimport classDb from '../diagrams/class/classDb';\nimport classRenderer from '../diagrams/class/classRenderer';\nimport classRendererV2 from '../diagrams/class/classRenderer-v2';\nimport classParser from '../diagrams/class/parser/classDiagram';\nimport erDb from '../diagrams/er/erDb';\nimport erRenderer from '../diagrams/er/erRenderer';\nimport erParser from '../diagrams/er/parser/erDiagram';\nimport flowDb from '../diagrams/flowchart/flowDb';\nimport flowRenderer from '../diagrams/flowchart/flowRenderer';\nimport flowRendererV2 from '../diagrams/flowchart/flowRenderer-v2';\nimport flowParser from '../diagrams/flowchart/parser/flow';\nimport ganttDb from '../diagrams/gantt/ganttDb';\nimport ganttRenderer from '../diagrams/gantt/ganttRenderer';\nimport ganttParser from '../diagrams/gantt/parser/gantt';\nimport infoDb from '../diagrams/info/infoDb';\nimport infoRenderer from '../diagrams/info/infoRenderer';\nimport infoParser from '../diagrams/info/parser/info';\nimport pieParser from '../diagrams/pie/parser/pie';\nimport pieDb from '../diagrams/pie/pieDb';\nimport pieRenderer from '../diagrams/pie/pieRenderer';\nimport requirementParser from '../diagrams/requirement/parser/requirementDiagram';\nimport requirementDb from '../diagrams/requirement/requirementDb';\nimport requirementRenderer from '../diagrams/requirement/requirementRenderer';\nimport sequenceParser from '../diagrams/sequence/parser/sequenceDiagram';\nimport sequenceDb from '../diagrams/sequence/sequenceDb';\nimport sequenceRenderer from '../diagrams/sequence/sequenceRenderer';\nimport stateParser from '../diagrams/state/parser/stateDiagram';\nimport stateDb from '../diagrams/state/stateDb';\nimport stateRenderer from '../diagrams/state/stateRenderer';\nimport stateRendererV2 from '../diagrams/state/stateRenderer-v2';\nimport journeyDb from '../diagrams/user-journey/journeyDb';\nimport journeyRenderer from '../diagrams/user-journey/journeyRenderer';\nimport journeyParser from '../diagrams/user-journey/parser/journey';\nimport { addDetector } from './detectType';\n\nconst diagrams = {\n c4: {\n db: c4Db,\n renderer: c4Renderer,\n parser: c4Parser,\n init: (cnf) => {\n c4Renderer.setConf(cnf.c4);\n },\n },\n class: {\n db: classDb,\n renderer: classRenderer,\n parser: classParser,\n init: (cnf) => {\n cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n classDb.clear();\n },\n },\n classDiagram: {\n db: classDb,\n renderer: classRendererV2,\n parser: classParser,\n init: (cnf) => {\n cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n classDb.clear();\n },\n },\n er: {\n db: erDb,\n renderer: erRenderer,\n parser: erParser,\n },\n flowchart: {\n db: flowDb,\n renderer: flowRenderer,\n parser: flowParser,\n init: (cnf) => {\n flowRenderer.setConf(cnf.flowchart);\n cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n flowDb.clear();\n flowDb.setGen('gen-1');\n },\n },\n 'flowchart-v2': {\n db: flowDb,\n renderer: flowRendererV2,\n parser: flowParser,\n init: (cnf) => {\n flowRendererV2.setConf(cnf.flowchart);\n cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n flowDb.clear();\n flowDb.setGen('gen-2');\n },\n },\n gantt: {\n db: ganttDb,\n renderer: ganttRenderer,\n parser: ganttParser,\n init: (cnf) => {\n ganttRenderer.setConf(cnf.gantt);\n },\n },\n // git: {\n // db: gitGraphAst,\n // renderer: gitGraphRenderer,\n // parser: gitGraphParser,\n // },\n info: {\n db: infoDb,\n renderer: infoRenderer,\n parser: infoParser,\n },\n pie: {\n db: pieDb,\n renderer: pieRenderer,\n parser: pieParser,\n },\n requirement: {\n db: requirementDb,\n renderer: requirementRenderer,\n parser: requirementParser,\n },\n sequence: {\n db: sequenceDb,\n renderer: sequenceRenderer,\n parser: sequenceParser,\n init: (cnf) => {\n cnf.sequence.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n if (cnf.sequenceDiagram) {\n // backwards compatibility\n sequenceRenderer.setConf(Object.assign(cnf.sequence, cnf.sequenceDiagram));\n console.error(\n '`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.'\n );\n }\n sequenceDb.setWrap(cnf.wrap);\n sequenceRenderer.setConf(cnf.sequence);\n },\n },\n state: {\n db: stateDb,\n renderer: stateRenderer,\n parser: stateParser,\n init: (cnf) => {\n cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n stateDb.clear();\n },\n },\n stateDiagram: {\n db: stateDb,\n renderer: stateRendererV2,\n parser: stateParser,\n init: (cnf) => {\n cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n stateDb.clear();\n },\n },\n journey: {\n db: journeyDb,\n renderer: journeyRenderer,\n parser: journeyParser,\n init: (cnf) => {\n journeyRenderer.setConf(cnf.journey);\n journeyDb.clear();\n },\n },\n};\n// console.log(sequenceDb);\nexport const registerDiagram = (id, parser, db, renderer, init, detector) => {\n diagrams[id] = { parser, db, renderer, init };\n addDetector(id, detector);\n};\n\nexport const getDiagrams = () => {\n // console.log('diagrams', diagrams);\n return diagrams;\n};\n","import mermaidAPI from '../../mermaidAPI';\nimport * as configApi from '../../config';\nimport { log } from '../../logger';\nimport { sanitizeText } from '../common/common';\nimport { setAccTitle, getAccTitle, getAccDescription, setAccDescription } from '../../commonDb';\n\nlet c4ShapeArray = [];\nlet boundaryParseStack = [''];\nlet currentBoundaryParse = 'global';\nlet parentBoundaryParse = '';\nlet boundarys = [\n {\n alias: 'global',\n label: { text: 'global' },\n type: { text: 'global' },\n tags: null,\n link: null,\n parentBoundary: '',\n },\n];\nlet rels = [];\nlet title = '';\nlet wrapEnabled = false;\nlet description = '';\nlet c4ShapeInRow = 4;\nlet c4BoundaryInRow = 2;\nvar c4Type;\n\nexport const getC4Type = function () {\n return c4Type;\n};\n\nexport const setC4Type = function (c4TypeParam) {\n let sanitizedText = sanitizeText(c4TypeParam, configApi.getConfig());\n c4Type = sanitizedText;\n};\n\nexport const parseDirective = function (statement, context, type) {\n mermaidAPI.parseDirective(this, statement, context, type);\n};\n\n//type, from, to, label, ?techn, ?descr, ?sprite, ?tags, $link\nexport const addRel = function (type, from, to, label, techn, descr, sprite, tags, link) {\n // Don't allow label nulling\n if (\n type === undefined ||\n type === null ||\n from === undefined ||\n from === null ||\n to === undefined ||\n to === null ||\n label === undefined ||\n label === null\n )\n return;\n\n let rel = {};\n const old = rels.find((rel) => rel.from === from && rel.to === to);\n if (old) {\n rel = old;\n } else {\n rels.push(rel);\n }\n\n rel.type = type;\n rel.from = from;\n rel.to = to;\n rel.label = { text: label };\n\n if (techn === undefined || techn === null) {\n rel.techn = { text: '' };\n } else {\n if (typeof techn === 'object') {\n let [key, value] = Object.entries(techn)[0];\n rel[key] = { text: value };\n } else {\n rel.techn = { text: techn };\n }\n }\n\n if (descr === undefined || descr === null) {\n rel.descr = { text: '' };\n } else {\n if (typeof descr === 'object') {\n let [key, value] = Object.entries(descr)[0];\n rel[key] = { text: value };\n } else {\n rel.descr = { text: descr };\n }\n }\n\n if (typeof sprite === 'object') {\n let [key, value] = Object.entries(sprite)[0];\n rel[key] = value;\n } else {\n rel.sprite = sprite;\n }\n if (typeof tags === 'object') {\n let [key, value] = Object.entries(tags)[0];\n rel[key] = value;\n } else {\n rel.tags = tags;\n }\n if (typeof link === 'object') {\n let [key, value] = Object.entries(link)[0];\n rel[key] = value;\n } else {\n rel.link = link;\n }\n rel.wrap = autoWrap();\n};\n\n//type, alias, label, ?descr, ?sprite, ?tags, $link\nexport const addPersonOrSystem = function (typeC4Shape, alias, label, descr, sprite, tags, link) {\n // Don't allow label nulling\n if (alias === null || label === null) return;\n\n let personOrSystem = {};\n const old = c4ShapeArray.find((personOrSystem) => personOrSystem.alias === alias);\n if (old && alias === old.alias) {\n personOrSystem = old;\n } else {\n personOrSystem.alias = alias;\n c4ShapeArray.push(personOrSystem);\n }\n\n // Don't allow null labels, either\n if (label === undefined || label === null) {\n personOrSystem.label = { text: '' };\n } else {\n personOrSystem.label = { text: label };\n }\n\n if (descr === undefined || descr === null) {\n personOrSystem.descr = { text: '' };\n } else {\n if (typeof descr === 'object') {\n let [key, value] = Object.entries(descr)[0];\n personOrSystem[key] = { text: value };\n } else {\n personOrSystem.descr = { text: descr };\n }\n }\n\n if (typeof sprite === 'object') {\n let [key, value] = Object.entries(sprite)[0];\n personOrSystem[key] = value;\n } else {\n personOrSystem.sprite = sprite;\n }\n if (typeof tags === 'object') {\n let [key, value] = Object.entries(tags)[0];\n personOrSystem[key] = value;\n } else {\n personOrSystem.tags = tags;\n }\n if (typeof link === 'object') {\n let [key, value] = Object.entries(link)[0];\n personOrSystem[key] = value;\n } else {\n personOrSystem.link = link;\n }\n personOrSystem.typeC4Shape = { text: typeC4Shape };\n personOrSystem.parentBoundary = currentBoundaryParse;\n personOrSystem.wrap = autoWrap();\n};\n\n//type, alias, label, ?techn, ?descr ?sprite, ?tags, $link\nexport const addContainer = function (typeC4Shape, alias, label, techn, descr, sprite, tags, link) {\n // Don't allow label nulling\n if (alias === null || label === null) return;\n\n let container = {};\n const old = c4ShapeArray.find((container) => container.alias === alias);\n if (old && alias === old.alias) {\n container = old;\n } else {\n container.alias = alias;\n c4ShapeArray.push(container);\n }\n\n // Don't allow null labels, either\n if (label === undefined || label === null) {\n container.label = { text: '' };\n } else {\n container.label = { text: label };\n }\n\n if (techn === undefined || techn === null) {\n container.techn = { text: '' };\n } else {\n if (typeof techn === 'object') {\n let [key, value] = Object.entries(techn)[0];\n container[key] = { text: value };\n } else {\n container.techn = { text: techn };\n }\n }\n\n if (descr === undefined || descr === null) {\n container.descr = { text: '' };\n } else {\n if (typeof descr === 'object') {\n let [key, value] = Object.entries(descr)[0];\n container[key] = { text: value };\n } else {\n container.descr = { text: descr };\n }\n }\n\n if (typeof sprite === 'object') {\n let [key, value] = Object.entries(sprite)[0];\n container[key] = value;\n } else {\n container.sprite = sprite;\n }\n if (typeof tags === 'object') {\n let [key, value] = Object.entries(tags)[0];\n container[key] = value;\n } else {\n container.tags = tags;\n }\n if (typeof link === 'object') {\n let [key, value] = Object.entries(link)[0];\n container[key] = value;\n } else {\n container.link = link;\n }\n container.wrap = autoWrap();\n container.typeC4Shape = { text: typeC4Shape };\n container.parentBoundary = currentBoundaryParse;\n};\n\n//type, alias, label, ?techn, ?descr ?sprite, ?tags, $link\nexport const addComponent = function (typeC4Shape, alias, label, techn, descr, sprite, tags, link) {\n // Don't allow label nulling\n if (alias === null || label === null) return;\n\n let component = {};\n const old = c4ShapeArray.find((component) => component.alias === alias);\n if (old && alias === old.alias) {\n component = old;\n } else {\n component.alias = alias;\n c4ShapeArray.push(component);\n }\n\n // Don't allow null labels, either\n if (label === undefined || label === null) {\n component.label = { text: '' };\n } else {\n component.label = { text: label };\n }\n\n if (techn === undefined || techn === null) {\n component.techn = { text: '' };\n } else {\n if (typeof techn === 'object') {\n let [key, value] = Object.entries(techn)[0];\n component[key] = { text: value };\n } else {\n component.techn = { text: techn };\n }\n }\n\n if (descr === undefined || descr === null) {\n component.descr = { text: '' };\n } else {\n if (typeof descr === 'object') {\n let [key, value] = Object.entries(descr)[0];\n component[key] = { text: value };\n } else {\n component.descr = { text: descr };\n }\n }\n\n if (typeof sprite === 'object') {\n let [key, value] = Object.entries(sprite)[0];\n component[key] = value;\n } else {\n component.sprite = sprite;\n }\n if (typeof tags === 'object') {\n let [key, value] = Object.entries(tags)[0];\n component[key] = value;\n } else {\n component.tags = tags;\n }\n if (typeof link === 'object') {\n let [key, value] = Object.entries(link)[0];\n component[key] = value;\n } else {\n component.link = link;\n }\n component.wrap = autoWrap();\n component.typeC4Shape = { text: typeC4Shape };\n component.parentBoundary = currentBoundaryParse;\n};\n\n//alias, label, ?type, ?tags, $link\nexport const addPersonOrSystemBoundary = function (alias, label, type, tags, link) {\n // if (parentBoundary === null) return;\n\n // Don't allow label nulling\n if (alias === null || label === null) return;\n\n let boundary = {};\n const old = boundarys.find((boundary) => boundary.alias === alias);\n if (old && alias === old.alias) {\n boundary = old;\n } else {\n boundary.alias = alias;\n boundarys.push(boundary);\n }\n\n // Don't allow null labels, either\n if (label === undefined || label === null) {\n boundary.label = { text: '' };\n } else {\n boundary.label = { text: label };\n }\n\n if (type === undefined || type === null) {\n boundary.type = { text: 'system' };\n } else {\n if (typeof type === 'object') {\n let [key, value] = Object.entries(type)[0];\n boundary[key] = { text: value };\n } else {\n boundary.type = { text: type };\n }\n }\n\n if (typeof tags === 'object') {\n let [key, value] = Object.entries(tags)[0];\n boundary[key] = value;\n } else {\n boundary.tags = tags;\n }\n if (typeof link === 'object') {\n let [key, value] = Object.entries(link)[0];\n boundary[key] = value;\n } else {\n boundary.link = link;\n }\n boundary.parentBoundary = currentBoundaryParse;\n boundary.wrap = autoWrap();\n\n parentBoundaryParse = currentBoundaryParse;\n currentBoundaryParse = alias;\n boundaryParseStack.push(parentBoundaryParse);\n};\n\n//alias, label, ?type, ?tags, $link\nexport const addContainerBoundary = function (alias, label, type, tags, link) {\n // if (parentBoundary === null) return;\n\n // Don't allow label nulling\n if (alias === null || label === null) return;\n\n let boundary = {};\n const old = boundarys.find((boundary) => boundary.alias === alias);\n if (old && alias === old.alias) {\n boundary = old;\n } else {\n boundary.alias = alias;\n boundarys.push(boundary);\n }\n\n // Don't allow null labels, either\n if (label === undefined || label === null) {\n boundary.label = { text: '' };\n } else {\n boundary.label = { text: label };\n }\n\n if (type === undefined || type === null) {\n boundary.type = { text: 'container' };\n } else {\n if (typeof type === 'object') {\n let [key, value] = Object.entries(type)[0];\n boundary[key] = { text: value };\n } else {\n boundary.type = { text: type };\n }\n }\n\n if (typeof tags === 'object') {\n let [key, value] = Object.entries(tags)[0];\n boundary[key] = value;\n } else {\n boundary.tags = tags;\n }\n if (typeof link === 'object') {\n let [key, value] = Object.entries(link)[0];\n boundary[key] = value;\n } else {\n boundary.link = link;\n }\n boundary.parentBoundary = currentBoundaryParse;\n boundary.wrap = autoWrap();\n\n parentBoundaryParse = currentBoundaryParse;\n currentBoundaryParse = alias;\n boundaryParseStack.push(parentBoundaryParse);\n};\n\n//alias, label, ?type, ?descr, ?sprite, ?tags, $link\nexport const addDeploymentNode = function (\n nodeType,\n alias,\n label,\n type,\n descr,\n sprite,\n tags,\n link\n) {\n // if (parentBoundary === null) return;\n\n // Don't allow label nulling\n if (alias === null || label === null) return;\n\n let boundary = {};\n const old = boundarys.find((boundary) => boundary.alias === alias);\n if (old && alias === old.alias) {\n boundary = old;\n } else {\n boundary.alias = alias;\n boundarys.push(boundary);\n }\n\n // Don't allow null labels, either\n if (label === undefined || label === null) {\n boundary.label = { text: '' };\n } else {\n boundary.label = { text: label };\n }\n\n if (type === undefined || type === null) {\n boundary.type = { text: 'node' };\n } else {\n if (typeof type === 'object') {\n let [key, value] = Object.entries(type)[0];\n boundary[key] = { text: value };\n } else {\n boundary.type = { text: type };\n }\n }\n\n if (descr === undefined || descr === null) {\n boundary.descr = { text: '' };\n } else {\n if (typeof descr === 'object') {\n let [key, value] = Object.entries(descr)[0];\n boundary[key] = { text: value };\n } else {\n boundary.descr = { text: descr };\n }\n }\n\n if (typeof tags === 'object') {\n let [key, value] = Object.entries(tags)[0];\n boundary[key] = value;\n } else {\n boundary.tags = tags;\n }\n if (typeof link === 'object') {\n let [key, value] = Object.entries(link)[0];\n boundary[key] = value;\n } else {\n boundary.link = link;\n }\n boundary.nodeType = nodeType;\n boundary.parentBoundary = currentBoundaryParse;\n boundary.wrap = autoWrap();\n\n parentBoundaryParse = currentBoundaryParse;\n currentBoundaryParse = alias;\n boundaryParseStack.push(parentBoundaryParse);\n};\n\nexport const popBoundaryParseStack = function () {\n currentBoundaryParse = parentBoundaryParse;\n boundaryParseStack.pop();\n parentBoundaryParse = boundaryParseStack.pop();\n boundaryParseStack.push(parentBoundaryParse);\n};\n\n//elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite\nexport const updateElStyle = function (\n typeC4Shape,\n elementName,\n bgColor,\n fontColor,\n borderColor,\n shadowing,\n shape,\n sprite,\n techn,\n legendText,\n legendSprite\n) {\n let old = c4ShapeArray.find((element) => element.alias === elementName);\n if (old === undefined) {\n old = boundarys.find((element) => element.alias === elementName);\n if (old === undefined) {\n return;\n }\n }\n if (bgColor !== undefined && bgColor !== null) {\n if (typeof bgColor === 'object') {\n let [key, value] = Object.entries(bgColor)[0];\n old[key] = value;\n } else {\n old.bgColor = bgColor;\n }\n }\n if (fontColor !== undefined && fontColor !== null) {\n if (typeof fontColor === 'object') {\n let [key, value] = Object.entries(fontColor)[0];\n old[key] = value;\n } else {\n old.fontColor = fontColor;\n }\n }\n if (borderColor !== undefined && borderColor !== null) {\n if (typeof borderColor === 'object') {\n let [key, value] = Object.entries(borderColor)[0];\n old[key] = value;\n } else {\n old.borderColor = borderColor;\n }\n }\n if (shadowing !== undefined && shadowing !== null) {\n if (typeof shadowing === 'object') {\n let [key, value] = Object.entries(shadowing)[0];\n old[key] = value;\n } else {\n old.shadowing = shadowing;\n }\n }\n if (shape !== undefined && shape !== null) {\n if (typeof shape === 'object') {\n let [key, value] = Object.entries(shape)[0];\n old[key] = value;\n } else {\n old.shape = shape;\n }\n }\n if (sprite !== undefined && sprite !== null) {\n if (typeof sprite === 'object') {\n let [key, value] = Object.entries(sprite)[0];\n old[key] = value;\n } else {\n old.sprite = sprite;\n }\n }\n if (techn !== undefined && techn !== null) {\n if (typeof techn === 'object') {\n let [key, value] = Object.entries(techn)[0];\n old[key] = value;\n } else {\n old.techn = techn;\n }\n }\n if (legendText !== undefined && legendText !== null) {\n if (typeof legendText === 'object') {\n let [key, value] = Object.entries(legendText)[0];\n old[key] = value;\n } else {\n old.legendText = legendText;\n }\n }\n if (legendSprite !== undefined && legendSprite !== null) {\n if (typeof legendSprite === 'object') {\n let [key, value] = Object.entries(legendSprite)[0];\n old[key] = value;\n } else {\n old.legendSprite = legendSprite;\n }\n }\n};\n\n//textColor, lineColor, ?offsetX, ?offsetY\nexport const updateRelStyle = function (\n typeC4Shape,\n from,\n to,\n textColor,\n lineColor,\n offsetX,\n offsetY\n) {\n const old = rels.find((rel) => rel.from === from && rel.to === to);\n if (old === undefined) {\n return;\n }\n if (textColor !== undefined && textColor !== null) {\n if (typeof textColor === 'object') {\n let [key, value] = Object.entries(textColor)[0];\n old[key] = value;\n } else {\n old.textColor = textColor;\n }\n }\n if (lineColor !== undefined && lineColor !== null) {\n if (typeof lineColor === 'object') {\n let [key, value] = Object.entries(lineColor)[0];\n old[key] = value;\n } else {\n old.lineColor = lineColor;\n }\n }\n if (offsetX !== undefined && offsetX !== null) {\n if (typeof offsetX === 'object') {\n let [key, value] = Object.entries(offsetX)[0];\n old[key] = parseInt(value);\n } else {\n old.offsetX = parseInt(offsetX);\n }\n }\n if (offsetY !== undefined && offsetY !== null) {\n if (typeof offsetY === 'object') {\n let [key, value] = Object.entries(offsetY)[0];\n old[key] = parseInt(value);\n } else {\n old.offsetY = parseInt(offsetY);\n }\n }\n};\n\n//?c4ShapeInRow, ?c4BoundaryInRow\nexport const updateLayoutConfig = function (typeC4Shape, c4ShapeInRowParam, c4BoundaryInRowParam) {\n let c4ShapeInRowValue = c4ShapeInRow;\n let c4BoundaryInRowValue = c4BoundaryInRow;\n\n if (typeof c4ShapeInRowParam === 'object') {\n let [key, value] = Object.entries(c4ShapeInRowParam)[0];\n c4ShapeInRowValue = parseInt(value);\n } else {\n c4ShapeInRowValue = parseInt(c4ShapeInRowParam);\n }\n if (typeof c4BoundaryInRowParam === 'object') {\n let [key, value] = Object.entries(c4BoundaryInRowParam)[0];\n c4BoundaryInRowValue = parseInt(value);\n } else {\n c4BoundaryInRowValue = parseInt(c4BoundaryInRowParam);\n }\n\n if (c4ShapeInRowValue >= 1) c4ShapeInRow = c4ShapeInRowValue;\n if (c4BoundaryInRowValue >= 1) c4BoundaryInRow = c4BoundaryInRowValue;\n};\n\nexport const getC4ShapeInRow = function () {\n return c4ShapeInRow;\n};\nexport const getC4BoundaryInRow = function () {\n return c4BoundaryInRow;\n};\nexport const getCurrentBoundaryParse = function () {\n return currentBoundaryParse;\n};\n\nexport const getParentBoundaryParse = function () {\n return parentBoundaryParse;\n};\n\nexport const getC4ShapeArray = function (parentBoundary) {\n if (parentBoundary === undefined || parentBoundary === null) return c4ShapeArray;\n else\n return c4ShapeArray.filter((personOrSystem) => {\n return personOrSystem.parentBoundary === parentBoundary;\n });\n};\nexport const getC4Shape = function (alias) {\n return c4ShapeArray.find((personOrSystem) => personOrSystem.alias === alias);\n};\nexport const getC4ShapeKeys = function (parentBoundary) {\n return Object.keys(getC4ShapeArray(parentBoundary));\n};\n\nexport const getBoundarys = function (parentBoundary) {\n if (parentBoundary === undefined || parentBoundary === null) return boundarys;\n else return boundarys.filter((boundary) => boundary.parentBoundary === parentBoundary);\n};\n\nexport const getRels = function () {\n return rels;\n};\n\nexport const getTitle = function () {\n return title;\n};\n\nexport const setWrap = function (wrapSetting) {\n wrapEnabled = wrapSetting;\n};\n\nexport const autoWrap = function () {\n return wrapEnabled;\n};\n\nexport const clear = function () {\n c4ShapeArray = [];\n boundarys = [\n {\n alias: 'global',\n label: { text: 'global' },\n type: { text: 'global' },\n tags: null,\n link: null,\n parentBoundary: '',\n },\n ];\n parentBoundaryParse = '';\n currentBoundaryParse = 'global';\n boundaryParseStack = [''];\n rels = [];\n\n boundaryParseStack = [''];\n title = '';\n wrapEnabled = false;\n description = '';\n c4ShapeInRow = 4;\n c4BoundaryInRow = 2;\n};\n\nexport const LINETYPE = {\n SOLID: 0,\n DOTTED: 1,\n NOTE: 2,\n SOLID_CROSS: 3,\n DOTTED_CROSS: 4,\n SOLID_OPEN: 5,\n DOTTED_OPEN: 6,\n LOOP_START: 10,\n LOOP_END: 11,\n ALT_START: 12,\n ALT_ELSE: 13,\n ALT_END: 14,\n OPT_START: 15,\n OPT_END: 16,\n ACTIVE_START: 17,\n ACTIVE_END: 18,\n PAR_START: 19,\n PAR_AND: 20,\n PAR_END: 21,\n RECT_START: 22,\n RECT_END: 23,\n SOLID_POINT: 24,\n DOTTED_POINT: 25,\n};\n\nexport const ARROWTYPE = {\n FILLED: 0,\n OPEN: 1,\n};\n\nexport const PLACEMENT = {\n LEFTOF: 0,\n RIGHTOF: 1,\n OVER: 2,\n};\n\nexport const setTitle = function (txt) {\n let sanitizedText = sanitizeText(txt, configApi.getConfig());\n title = sanitizedText;\n};\n\nexport default {\n addPersonOrSystem,\n addPersonOrSystemBoundary,\n addContainer,\n addContainerBoundary,\n addComponent,\n addDeploymentNode,\n popBoundaryParseStack,\n addRel,\n updateElStyle,\n updateRelStyle,\n updateLayoutConfig,\n autoWrap,\n setWrap,\n getC4ShapeArray,\n getC4Shape,\n getC4ShapeKeys,\n getBoundarys,\n getCurrentBoundaryParse,\n getParentBoundaryParse,\n getRels,\n getTitle,\n getC4Type,\n getC4ShapeInRow,\n getC4BoundaryInRow,\n setAccTitle,\n getAccTitle,\n getAccDescription,\n setAccDescription,\n parseDirective,\n getConfig: () => configApi.getConfig().c4,\n clear,\n LINETYPE,\n ARROWTYPE,\n PLACEMENT,\n setTitle,\n setC4Type,\n // apply,\n};\n","import { select } from 'd3';\nimport svgDraw, { drawText, fixLifeLineHeights } from './svgDraw';\nimport { log } from '../../logger';\nimport { parser } from './parser/c4Diagram';\nimport common from '../common/common';\nimport c4Db from './c4Db';\nimport * as configApi from '../../config';\nimport assignWithDepth from '../../assignWithDepth';\nimport { wrapLabel, calculateTextWidth, calculateTextHeight, configureSvgSize } from '../../utils';\nimport addSVGAccessibilityFields from '../../accessibility';\n\nlet globalBoundaryMaxX = 0,\n globalBoundaryMaxY = 0;\n\nlet c4ShapeInRow = 4;\nlet c4BoundaryInRow = 2;\n\nparser.yy = c4Db;\n\nlet conf = {};\n\nclass Bounds {\n constructor(diagObj) {\n this.name = '';\n this.data = {};\n this.data.startx = undefined;\n this.data.stopx = undefined;\n this.data.starty = undefined;\n this.data.stopy = undefined;\n this.data.widthLimit = undefined;\n\n this.nextData = {};\n this.nextData.startx = undefined;\n this.nextData.stopx = undefined;\n this.nextData.starty = undefined;\n this.nextData.stopy = undefined;\n this.nextData.cnt = 0;\n\n setConf(diagObj.db.getConfig());\n }\n\n setData(startx, stopx, starty, stopy) {\n this.nextData.startx = this.data.startx = startx;\n this.nextData.stopx = this.data.stopx = stopx;\n this.nextData.starty = this.data.starty = starty;\n this.nextData.stopy = this.data.stopy = stopy;\n }\n\n updateVal(obj, key, val, fun) {\n if (typeof obj[key] === 'undefined') {\n obj[key] = val;\n } else {\n obj[key] = fun(val, obj[key]);\n }\n }\n\n insert(c4Shape) {\n this.nextData.cnt = this.nextData.cnt + 1;\n let _startx =\n this.nextData.startx === this.nextData.stopx\n ? this.nextData.stopx + c4Shape.margin\n : this.nextData.stopx + c4Shape.margin * 2;\n let _stopx = _startx + c4Shape.width;\n let _starty = this.nextData.starty + c4Shape.margin * 2;\n let _stopy = _starty + c4Shape.height;\n if (\n _startx >= this.data.widthLimit ||\n _stopx >= this.data.widthLimit ||\n this.nextData.cnt > c4ShapeInRow\n ) {\n _startx = this.nextData.startx + c4Shape.margin + conf.nextLinePaddingX;\n _starty = this.nextData.stopy + c4Shape.margin * 2;\n\n this.nextData.stopx = _stopx = _startx + c4Shape.width;\n this.nextData.starty = this.nextData.stopy;\n this.nextData.stopy = _stopy = _starty + c4Shape.height;\n this.nextData.cnt = 1;\n }\n\n c4Shape.x = _startx;\n c4Shape.y = _starty;\n\n this.updateVal(this.data, 'startx', _startx, Math.min);\n this.updateVal(this.data, 'starty', _starty, Math.min);\n this.updateVal(this.data, 'stopx', _stopx, Math.max);\n this.updateVal(this.data, 'stopy', _stopy, Math.max);\n\n this.updateVal(this.nextData, 'startx', _startx, Math.min);\n this.updateVal(this.nextData, 'starty', _starty, Math.min);\n this.updateVal(this.nextData, 'stopx', _stopx, Math.max);\n this.updateVal(this.nextData, 'stopy', _stopy, Math.max);\n }\n\n init(diagObj) {\n this.name = '';\n this.data = {\n startx: undefined,\n stopx: undefined,\n starty: undefined,\n stopy: undefined,\n widthLimit: undefined,\n };\n this.nextData = {\n startx: undefined,\n stopx: undefined,\n starty: undefined,\n stopy: undefined,\n cnt: 0,\n };\n setConf(diagObj.db.getConfig());\n }\n\n bumpLastMargin(margin) {\n this.data.stopx += margin;\n this.data.stopy += margin;\n }\n}\n\nexport const setConf = function (cnf) {\n assignWithDepth(conf, cnf);\n\n if (cnf.fontFamily) {\n conf.personFontFamily = conf.systemFontFamily = conf.messageFontFamily = cnf.fontFamily;\n }\n if (cnf.fontSize) {\n conf.personFontSize = conf.systemFontSize = conf.messageFontSize = cnf.fontSize;\n }\n if (cnf.fontWeight) {\n conf.personFontWeight = conf.systemFontWeight = conf.messageFontWeight = cnf.fontWeight;\n }\n};\n\nconst c4ShapeFont = (cnf, typeC4Shape) => {\n return {\n fontFamily: cnf[typeC4Shape + 'FontFamily'],\n fontSize: cnf[typeC4Shape + 'FontSize'],\n fontWeight: cnf[typeC4Shape + 'FontWeight'],\n };\n};\n\nconst boundaryFont = (cnf) => {\n return {\n fontFamily: cnf.boundaryFontFamily,\n fontSize: cnf.boundaryFontSize,\n fontWeight: cnf.boundaryFontWeight,\n };\n};\n\nconst messageFont = (cnf) => {\n return {\n fontFamily: cnf.messageFontFamily,\n fontSize: cnf.messageFontSize,\n fontWeight: cnf.messageFontWeight,\n };\n};\n\n/**\n * @param textType\n * @param c4Shape\n * @param c4ShapeTextWrap\n * @param textConf\n * @param textLimitWidth\n */\nfunction calcC4ShapeTextWH(textType, c4Shape, c4ShapeTextWrap, textConf, textLimitWidth) {\n if (!c4Shape[textType].width) {\n if (c4ShapeTextWrap) {\n c4Shape[textType].text = wrapLabel(c4Shape[textType].text, textLimitWidth, textConf);\n c4Shape[textType].textLines = c4Shape[textType].text.split(common.lineBreakRegex).length;\n // c4Shape[textType].width = calculateTextWidth(c4Shape[textType].text, textConf);\n c4Shape[textType].width = textLimitWidth;\n // c4Shape[textType].height = c4Shape[textType].textLines * textConf.fontSize;\n c4Shape[textType].height = calculateTextHeight(c4Shape[textType].text, textConf);\n } else {\n let lines = c4Shape[textType].text.split(common.lineBreakRegex);\n c4Shape[textType].textLines = lines.length;\n let lineHeight = 0;\n c4Shape[textType].height = 0;\n c4Shape[textType].width = 0;\n for (let i = 0; i < lines.length; i++) {\n c4Shape[textType].width = Math.max(\n calculateTextWidth(lines[i], textConf),\n c4Shape[textType].width\n );\n lineHeight = calculateTextHeight(lines[i], textConf);\n c4Shape[textType].height = c4Shape[textType].height + lineHeight;\n }\n // c4Shapes[textType].height = c4Shapes[textType].textLines * textConf.fontSize;\n }\n }\n}\n\nexport const drawBoundary = function (diagram, boundary, bounds) {\n boundary.x = bounds.data.startx;\n boundary.y = bounds.data.starty;\n boundary.width = bounds.data.stopx - bounds.data.startx;\n boundary.height = bounds.data.stopy - bounds.data.starty;\n\n boundary.label.y = conf.c4ShapeMargin - 35;\n\n let boundaryTextWrap = boundary.wrap && conf.wrap;\n let boundaryLabelConf = boundaryFont(conf);\n boundaryLabelConf.fontSize = boundaryLabelConf.fontSize + 2;\n boundaryLabelConf.fontWeight = 'bold';\n let textLimitWidth = calculateTextWidth(boundary.label.text, boundaryLabelConf);\n calcC4ShapeTextWH('label', boundary, boundaryTextWrap, boundaryLabelConf, textLimitWidth);\n\n svgDraw.drawBoundary(diagram, boundary, conf);\n};\n\nexport const drawC4ShapeArray = function (currentBounds, diagram, c4ShapeArray, c4ShapeKeys) {\n // Upper Y is relative point\n let Y = 0;\n // Draw the c4ShapeArray\n for (let i = 0; i < c4ShapeKeys.length; i++) {\n Y = 0;\n const c4Shape = c4ShapeArray[c4ShapeKeys[i]];\n\n // calc c4 shape type width and height\n\n let c4ShapeTypeConf = c4ShapeFont(conf, c4Shape.typeC4Shape.text);\n c4ShapeTypeConf.fontSize = c4ShapeTypeConf.fontSize - 2;\n c4Shape.typeC4Shape.width = calculateTextWidth(\n '<<' + c4Shape.typeC4Shape.text + '>>',\n c4ShapeTypeConf\n );\n c4Shape.typeC4Shape.height = c4ShapeTypeConf.fontSize + 2;\n c4Shape.typeC4Shape.Y = conf.c4ShapePadding;\n Y = c4Shape.typeC4Shape.Y + c4Shape.typeC4Shape.height - 4;\n\n // set image width and height c4Shape.x + c4Shape.width / 2 - 24, c4Shape.y + 28\n // let imageWidth = 0,\n // imageHeight = 0,\n // imageY = 0;\n //\n c4Shape.image = { width: 0, height: 0, Y: 0 };\n switch (c4Shape.typeC4Shape.text) {\n case 'person':\n case 'external_person':\n c4Shape.image.width = 48;\n c4Shape.image.height = 48;\n c4Shape.image.Y = Y;\n Y = c4Shape.image.Y + c4Shape.image.height;\n break;\n }\n if (c4Shape.sprite) {\n c4Shape.image.width = 48;\n c4Shape.image.height = 48;\n c4Shape.image.Y = Y;\n Y = c4Shape.image.Y + c4Shape.image.height;\n }\n\n // Y = conf.c4ShapePadding + c4Shape.image.height;\n\n let c4ShapeTextWrap = c4Shape.wrap && conf.wrap;\n let textLimitWidth = conf.width - conf.c4ShapePadding * 2;\n\n let c4ShapeLabelConf = c4ShapeFont(conf, c4Shape.typeC4Shape.text);\n c4ShapeLabelConf.fontSize = c4ShapeLabelConf.fontSize + 2;\n c4ShapeLabelConf.fontWeight = 'bold';\n calcC4ShapeTextWH('label', c4Shape, c4ShapeTextWrap, c4ShapeLabelConf, textLimitWidth);\n c4Shape['label'].Y = Y + 8;\n Y = c4Shape['label'].Y + c4Shape['label'].height;\n\n if (c4Shape.type && c4Shape.type.text !== '') {\n c4Shape.type.text = '[' + c4Shape.type.text + ']';\n let c4ShapeTypeConf = c4ShapeFont(conf, c4Shape.typeC4Shape.text);\n calcC4ShapeTextWH('type', c4Shape, c4ShapeTextWrap, c4ShapeTypeConf, textLimitWidth);\n c4Shape['type'].Y = Y + 5;\n Y = c4Shape['type'].Y + c4Shape['type'].height;\n } else if (c4Shape.techn && c4Shape.techn.text !== '') {\n c4Shape.techn.text = '[' + c4Shape.techn.text + ']';\n let c4ShapeTechnConf = c4ShapeFont(conf, c4Shape.techn.text);\n calcC4ShapeTextWH('techn', c4Shape, c4ShapeTextWrap, c4ShapeTechnConf, textLimitWidth);\n c4Shape['techn'].Y = Y + 5;\n Y = c4Shape['techn'].Y + c4Shape['techn'].height;\n }\n\n let rectHeight = Y;\n let rectWidth = c4Shape.label.width;\n\n if (c4Shape.descr && c4Shape.descr.text !== '') {\n let c4ShapeDescrConf = c4ShapeFont(conf, c4Shape.typeC4Shape.text);\n calcC4ShapeTextWH('descr', c4Shape, c4ShapeTextWrap, c4ShapeDescrConf, textLimitWidth);\n c4Shape['descr'].Y = Y + 20;\n Y = c4Shape['descr'].Y + c4Shape['descr'].height;\n\n rectWidth = Math.max(c4Shape.label.width, c4Shape.descr.width);\n rectHeight = Y - c4Shape['descr'].textLines * 5;\n }\n\n rectWidth = rectWidth + conf.c4ShapePadding;\n // let rectHeight =\n\n c4Shape.width = Math.max(c4Shape.width || conf.width, rectWidth, conf.width);\n c4Shape.height = Math.max(c4Shape.height || conf.height, rectHeight, conf.height);\n c4Shape.margin = c4Shape.margin || conf.c4ShapeMargin;\n\n currentBounds.insert(c4Shape);\n\n const height = svgDraw.drawC4Shape(diagram, c4Shape, conf);\n }\n\n currentBounds.bumpLastMargin(conf.c4ShapeMargin);\n};\n\nclass Point {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n }\n}\n\n/* * *\n * Get the intersection of the line between the center point of a rectangle and a point outside the rectangle.\n * Algorithm idea.\n * Using a point outside the rectangle as the coordinate origin, the graph is divided into four quadrants, and each quadrant is divided into two cases, with separate treatment on the coordinate axes\n * 1. The case of coordinate axes.\n * 1. The case of the negative x-axis\n * 2. The case of the positive x-axis\n * 3. The case of the positive y-axis\n * 4. The negative y-axis case\n * 2. Quadrant cases.\n * 2.1. first quadrant: the case where the line intersects the left side of the rectangle; the case where it intersects the lower side of the rectangle\n * 2.2. second quadrant: the case where the line intersects the right side of the rectangle; the case where it intersects the lower edge of the rectangle\n * 2.3. third quadrant: the case where the line intersects the right side of the rectangle; the case where it intersects the upper edge of the rectangle\n * 2.4. fourth quadrant: the case where the line intersects the left side of the rectangle; the case where it intersects the upper side of the rectangle\n *\n */\nlet getIntersectPoint = function (fromNode, endPoint) {\n let x1 = fromNode.x;\n\n let y1 = fromNode.y;\n\n let x2 = endPoint.x;\n\n let y2 = endPoint.y;\n\n let fromCenterX = x1 + fromNode.width / 2;\n\n let fromCenterY = y1 + fromNode.height / 2;\n\n let dx = Math.abs(x1 - x2);\n\n let dy = Math.abs(y1 - y2);\n\n let tanDYX = dy / dx;\n\n let fromDYX = fromNode.height / fromNode.width;\n\n let returnPoint = null;\n\n if (y1 == y2 && x1 < x2) {\n returnPoint = new Point(x1 + fromNode.width, fromCenterY);\n } else if (y1 == y2 && x1 > x2) {\n returnPoint = new Point(x1, fromCenterY);\n } else if (x1 == x2 && y1 < y2) {\n returnPoint = new Point(fromCenterX, y1 + fromNode.height);\n } else if (x1 == x2 && y1 > y2) {\n returnPoint = new Point(fromCenterX, y1);\n }\n\n if (x1 > x2 && y1 < y2) {\n if (fromDYX >= tanDYX) {\n returnPoint = new Point(x1, fromCenterY + (tanDYX * fromNode.width) / 2);\n } else {\n returnPoint = new Point(\n fromCenterX - ((dx / dy) * fromNode.height) / 2,\n y1 + fromNode.height\n );\n }\n } else if (x1 < x2 && y1 < y2) {\n //\n if (fromDYX >= tanDYX) {\n returnPoint = new Point(x1 + fromNode.width, fromCenterY + (tanDYX * fromNode.width) / 2);\n } else {\n returnPoint = new Point(\n fromCenterX + ((dx / dy) * fromNode.height) / 2,\n y1 + fromNode.height\n );\n }\n } else if (x1 < x2 && y1 > y2) {\n if (fromDYX >= tanDYX) {\n returnPoint = new Point(x1 + fromNode.width, fromCenterY - (tanDYX * fromNode.width) / 2);\n } else {\n returnPoint = new Point(fromCenterX + ((fromNode.height / 2) * dx) / dy, y1);\n }\n } else if (x1 > x2 && y1 > y2) {\n if (fromDYX >= tanDYX) {\n returnPoint = new Point(x1, fromCenterY - (fromNode.width / 2) * tanDYX);\n } else {\n returnPoint = new Point(fromCenterX - ((fromNode.height / 2) * dx) / dy, y1);\n }\n }\n return returnPoint;\n};\n\nlet getIntersectPoints = function (fromNode, endNode) {\n let endIntersectPoint = { x: 0, y: 0 };\n endIntersectPoint.x = endNode.x + endNode.width / 2;\n endIntersectPoint.y = endNode.y + endNode.height / 2;\n let startPoint = getIntersectPoint(fromNode, endIntersectPoint);\n\n endIntersectPoint.x = fromNode.x + fromNode.width / 2;\n endIntersectPoint.y = fromNode.y + fromNode.height / 2;\n let endPoint = getIntersectPoint(endNode, endIntersectPoint);\n return { startPoint: startPoint, endPoint: endPoint };\n};\n\nexport const drawRels = function (diagram, rels, getC4ShapeObj, diagObj) {\n let i = 0;\n for (let rel of rels) {\n i = i + 1;\n let relTextWrap = rel.wrap && conf.wrap;\n let relConf = messageFont(conf);\n let diagramType = diagObj.db.getC4Type();\n if (diagramType === 'C4Dynamic') rel.label.text = i + ': ' + rel.label.text;\n let textLimitWidth = calculateTextWidth(rel.label.text, relConf);\n calcC4ShapeTextWH('label', rel, relTextWrap, relConf, textLimitWidth);\n\n if (rel.techn && rel.techn.text !== '') {\n textLimitWidth = calculateTextWidth(rel.techn.text, relConf);\n calcC4ShapeTextWH('techn', rel, relTextWrap, relConf, textLimitWidth);\n }\n\n if (rel.descr && rel.descr.text !== '') {\n textLimitWidth = calculateTextWidth(rel.descr.text, relConf);\n calcC4ShapeTextWH('descr', rel, relTextWrap, relConf, textLimitWidth);\n }\n\n let fromNode = getC4ShapeObj(rel.from);\n let endNode = getC4ShapeObj(rel.to);\n let points = getIntersectPoints(fromNode, endNode);\n rel.startPoint = points.startPoint;\n rel.endPoint = points.endPoint;\n }\n svgDraw.drawRels(diagram, rels, conf);\n};\n\n/**\n * @param diagram\n * @param parentBoundaryAlias\n * @param parentBounds\n * @param currentBoundarys\n * @param diagObj\n */\nfunction drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentBoundarys, diagObj) {\n let currentBounds = new Bounds(diagObj);\n // Calculate the width limit of the boundar. label/type 的长度,\n currentBounds.data.widthLimit =\n parentBounds.data.widthLimit / Math.min(c4BoundaryInRow, currentBoundarys.length);\n // Math.min(\n // conf.width * conf.c4ShapeInRow + conf.c4ShapeMargin * conf.c4ShapeInRow * 2,\n // parentBounds.data.widthLimit / Math.min(conf.c4BoundaryInRow, currentBoundarys.length)\n // );\n for (let i = 0; i < currentBoundarys.length; i++) {\n let currentBoundary = currentBoundarys[i];\n let Y = 0;\n currentBoundary.image = { width: 0, height: 0, Y: 0 };\n if (currentBoundary.sprite) {\n currentBoundary.image.width = 48;\n currentBoundary.image.height = 48;\n currentBoundary.image.Y = Y;\n Y = currentBoundary.image.Y + currentBoundary.image.height;\n }\n\n let currentBoundaryTextWrap = currentBoundary.wrap && conf.wrap;\n\n let currentBoundaryLabelConf = boundaryFont(conf);\n currentBoundaryLabelConf.fontSize = currentBoundaryLabelConf.fontSize + 2;\n currentBoundaryLabelConf.fontWeight = 'bold';\n calcC4ShapeTextWH(\n 'label',\n currentBoundary,\n currentBoundaryTextWrap,\n currentBoundaryLabelConf,\n currentBounds.data.widthLimit\n );\n currentBoundary['label'].Y = Y + 8;\n Y = currentBoundary['label'].Y + currentBoundary['label'].height;\n\n if (currentBoundary.type && currentBoundary.type.text !== '') {\n currentBoundary.type.text = '[' + currentBoundary.type.text + ']';\n let currentBoundaryTypeConf = boundaryFont(conf);\n calcC4ShapeTextWH(\n 'type',\n currentBoundary,\n currentBoundaryTextWrap,\n currentBoundaryTypeConf,\n currentBounds.data.widthLimit\n );\n currentBoundary['type'].Y = Y + 5;\n Y = currentBoundary['type'].Y + currentBoundary['type'].height;\n }\n\n if (currentBoundary.descr && currentBoundary.descr.text !== '') {\n let currentBoundaryDescrConf = boundaryFont(conf);\n currentBoundaryDescrConf.fontSize = currentBoundaryDescrConf.fontSize - 2;\n calcC4ShapeTextWH(\n 'descr',\n currentBoundary,\n currentBoundaryTextWrap,\n currentBoundaryDescrConf,\n currentBounds.data.widthLimit\n );\n currentBoundary['descr'].Y = Y + 20;\n Y = currentBoundary['descr'].Y + currentBoundary['descr'].height;\n }\n\n if (i == 0 || i % c4BoundaryInRow === 0) {\n // Calculate the drawing start point of the currentBoundarys.\n let _x = parentBounds.data.startx + conf.diagramMarginX;\n let _y = parentBounds.data.stopy + conf.diagramMarginY + Y;\n\n currentBounds.setData(_x, _x, _y, _y);\n } else {\n // Calculate the drawing start point of the currentBoundarys.\n let _x =\n currentBounds.data.stopx !== currentBounds.data.startx\n ? currentBounds.data.stopx + conf.diagramMarginX\n : currentBounds.data.startx;\n let _y = currentBounds.data.starty;\n\n currentBounds.setData(_x, _x, _y, _y);\n }\n currentBounds.name = currentBoundary.alias;\n let currentPersonOrSystemArray = diagObj.db.getC4ShapeArray(currentBoundary.alias);\n let currentPersonOrSystemKeys = diagObj.db.getC4ShapeKeys(currentBoundary.alias);\n\n if (currentPersonOrSystemKeys.length > 0) {\n drawC4ShapeArray(\n currentBounds,\n diagram,\n currentPersonOrSystemArray,\n currentPersonOrSystemKeys\n );\n }\n parentBoundaryAlias = currentBoundary.alias;\n let nextCurrentBoundarys = diagObj.db.getBoundarys(parentBoundaryAlias);\n\n if (nextCurrentBoundarys.length > 0) {\n // draw boundary inside currentBoundary\n // bounds.init();\n // parentBoundaryWidthLimit = bounds.data.stopx - bounds.startx;\n drawInsideBoundary(\n diagram,\n parentBoundaryAlias,\n currentBounds,\n nextCurrentBoundarys,\n diagObj\n );\n }\n // draw boundary\n if (currentBoundary.alias !== 'global') drawBoundary(diagram, currentBoundary, currentBounds);\n parentBounds.data.stopy = Math.max(\n currentBounds.data.stopy + conf.c4ShapeMargin,\n parentBounds.data.stopy\n );\n parentBounds.data.stopx = Math.max(\n currentBounds.data.stopx + conf.c4ShapeMargin,\n parentBounds.data.stopx\n );\n globalBoundaryMaxX = Math.max(globalBoundaryMaxX, parentBounds.data.stopx);\n globalBoundaryMaxY = Math.max(globalBoundaryMaxY, parentBounds.data.stopy);\n }\n}\n\n/**\n * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text.\n *\n * @param {any} text\n * @param _text\n * @param {any} id\n * @param _version\n * @param diagObj\n */\nexport const draw = function (_text, id, _version, diagObj) {\n conf = configApi.getConfig().c4;\n const securityLevel = configApi.getConfig().securityLevel;\n // Handle root and Document for when rendering in sanbox mode\n let sandboxElement;\n if (securityLevel === 'sandbox') {\n sandboxElement = select('#i' + id);\n }\n const root =\n securityLevel === 'sandbox'\n ? select(sandboxElement.nodes()[0].contentDocument.body)\n : select('body');\n\n let db = diagObj.db;\n\n diagObj.db.setWrap(conf.wrap);\n\n c4ShapeInRow = db.getC4ShapeInRow();\n c4BoundaryInRow = db.getC4BoundaryInRow();\n\n log.debug(`C:${JSON.stringify(conf, null, 2)}`);\n\n const diagram =\n securityLevel === 'sandbox' ? root.select(`[id=\"${id}\"]`) : select(`[id=\"${id}\"]`);\n\n svgDraw.insertComputerIcon(diagram);\n svgDraw.insertDatabaseIcon(diagram);\n svgDraw.insertClockIcon(diagram);\n\n let screenBounds = new Bounds(diagObj);\n\n screenBounds.setData(\n conf.diagramMarginX,\n conf.diagramMarginX,\n conf.diagramMarginY,\n conf.diagramMarginY\n );\n\n screenBounds.data.widthLimit = screen.availWidth;\n globalBoundaryMaxX = conf.diagramMarginX;\n globalBoundaryMaxY = conf.diagramMarginY;\n\n const title = diagObj.db.getTitle();\n const c4type = diagObj.db.getC4Type();\n let currentBoundarys = diagObj.db.getBoundarys('');\n // switch (c4type) {\n // case 'C4Context':\n drawInsideBoundary(diagram, '', screenBounds, currentBoundarys, diagObj);\n // break;\n // }\n\n // The arrow head definition is attached to the svg once\n svgDraw.insertArrowHead(diagram);\n svgDraw.insertArrowEnd(diagram);\n svgDraw.insertArrowCrossHead(diagram);\n svgDraw.insertArrowFilledHead(diagram);\n\n drawRels(diagram, diagObj.db.getRels(), diagObj.db.getC4Shape, diagObj);\n\n screenBounds.data.stopx = globalBoundaryMaxX;\n screenBounds.data.stopy = globalBoundaryMaxY;\n\n const box = screenBounds.data;\n\n // Make sure the height of the diagram supports long menus.\n let boxHeight = box.stopy - box.starty;\n\n let height = boxHeight + 2 * conf.diagramMarginY;\n\n // Make sure the width of the diagram supports wide menus.\n let boxWidth = box.stopx - box.startx;\n const width = boxWidth + 2 * conf.diagramMarginX;\n\n if (title) {\n diagram\n .append('text')\n .text(title)\n .attr('x', (box.stopx - box.startx) / 2 - 4 * conf.diagramMarginX)\n .attr('y', box.starty + conf.diagramMarginY);\n }\n\n configureSvgSize(diagram, height, width, conf.useMaxWidth);\n\n const extraVertForTitle = title ? 60 : 0;\n diagram.attr(\n 'viewBox',\n box.startx -\n conf.diagramMarginX +\n ' -' +\n (conf.diagramMarginY + extraVertForTitle) +\n ' ' +\n width +\n ' ' +\n (height + extraVertForTitle)\n );\n\n addSVGAccessibilityFields(parser.yy, diagram, id);\n log.debug(`models:`, box);\n};\n\nexport default {\n drawPersonOrSystemArray: drawC4ShapeArray,\n drawBoundary,\n setConf,\n draw,\n};\n","const getStyles = (options) =>\n `.person {\n stroke: ${options.personBorder};\n fill: ${options.personBkg};\n }\n`;\n\nexport default getStyles;\n","import common from '../common/common';\nimport { addFunction } from '../../interactionDb';\nimport { sanitizeUrl } from '@braintree/sanitize-url';\n\nexport const drawRect = function (elem, rectData) {\n const rectElem = elem.append('rect');\n rectElem.attr('x', rectData.x);\n rectElem.attr('y', rectData.y);\n rectElem.attr('fill', rectData.fill);\n rectElem.attr('stroke', rectData.stroke);\n rectElem.attr('width', rectData.width);\n rectElem.attr('height', rectData.height);\n rectElem.attr('rx', rectData.rx);\n rectElem.attr('ry', rectData.ry);\n\n if (rectData.attrs !== 'undefined' && rectData.attrs !== null) {\n for (let attrKey in rectData.attrs) rectElem.attr(attrKey, rectData.attrs[attrKey]);\n }\n\n if (rectData.class !== 'undefined') {\n rectElem.attr('class', rectData.class);\n }\n\n return rectElem;\n};\n\nexport const drawImage = function (elem, width, height, x, y, link) {\n const imageElem = elem.append('image');\n imageElem.attr('width', width);\n imageElem.attr('height', height);\n imageElem.attr('x', x);\n imageElem.attr('y', y);\n let sanitizedLink = link.startsWith('data:image/png;base64') ? link : sanitizeUrl(link);\n imageElem.attr('xlink:href', sanitizedLink);\n};\n\nexport const drawEmbeddedImage = function (elem, x, y, link) {\n const imageElem = elem.append('use');\n imageElem.attr('x', x);\n imageElem.attr('y', y);\n var sanitizedLink = sanitizeUrl(link);\n imageElem.attr('xlink:href', '#' + sanitizedLink);\n};\n\nexport const drawText = function (elem, textData) {\n let prevTextHeight = 0,\n textHeight = 0;\n const lines = textData.text.split(common.lineBreakRegex);\n\n let textElems = [];\n let dy = 0;\n let yfunc = () => textData.y;\n if (\n typeof textData.valign !== 'undefined' &&\n typeof textData.textMargin !== 'undefined' &&\n textData.textMargin > 0\n ) {\n switch (textData.valign) {\n case 'top':\n case 'start':\n yfunc = () => Math.round(textData.y + textData.textMargin);\n break;\n case 'middle':\n case 'center':\n yfunc = () =>\n Math.round(textData.y + (prevTextHeight + textHeight + textData.textMargin) / 2);\n break;\n case 'bottom':\n case 'end':\n yfunc = () =>\n Math.round(\n textData.y +\n (prevTextHeight + textHeight + 2 * textData.textMargin) -\n textData.textMargin\n );\n break;\n }\n }\n if (\n typeof textData.anchor !== 'undefined' &&\n typeof textData.textMargin !== 'undefined' &&\n typeof textData.width !== 'undefined'\n ) {\n switch (textData.anchor) {\n case 'left':\n case 'start':\n textData.x = Math.round(textData.x + textData.textMargin);\n textData.anchor = 'start';\n textData.dominantBaseline = 'text-after-edge';\n textData.alignmentBaseline = 'middle';\n break;\n case 'middle':\n case 'center':\n textData.x = Math.round(textData.x + textData.width / 2);\n textData.anchor = 'middle';\n textData.dominantBaseline = 'middle';\n textData.alignmentBaseline = 'middle';\n break;\n case 'right':\n case 'end':\n textData.x = Math.round(textData.x + textData.width - textData.textMargin);\n textData.anchor = 'end';\n textData.dominantBaseline = 'text-before-edge';\n textData.alignmentBaseline = 'middle';\n break;\n }\n }\n for (let i = 0; i < lines.length; i++) {\n let line = lines[i];\n if (\n typeof textData.textMargin !== 'undefined' &&\n textData.textMargin === 0 &&\n typeof textData.fontSize !== 'undefined'\n ) {\n dy = i * textData.fontSize;\n }\n\n const textElem = elem.append('text');\n textElem.attr('x', textData.x);\n textElem.attr('y', yfunc());\n if (typeof textData.anchor !== 'undefined') {\n textElem\n .attr('text-anchor', textData.anchor)\n .attr('dominant-baseline', textData.dominantBaseline)\n .attr('alignment-baseline', textData.alignmentBaseline);\n }\n if (typeof textData.fontFamily !== 'undefined') {\n textElem.style('font-family', textData.fontFamily);\n }\n if (typeof textData.fontSize !== 'undefined') {\n textElem.style('font-size', textData.fontSize);\n }\n if (typeof textData.fontWeight !== 'undefined') {\n textElem.style('font-weight', textData.fontWeight);\n }\n if (typeof textData.fill !== 'undefined') {\n textElem.attr('fill', textData.fill);\n }\n if (typeof textData.class !== 'undefined') {\n textElem.attr('class', textData.class);\n }\n if (typeof textData.dy !== 'undefined') {\n textElem.attr('dy', textData.dy);\n } else if (dy !== 0) {\n textElem.attr('dy', dy);\n }\n\n if (textData.tspan) {\n const span = textElem.append('tspan');\n span.attr('x', textData.x);\n if (typeof textData.fill !== 'undefined') {\n span.attr('fill', textData.fill);\n }\n span.text(line);\n } else {\n textElem.text(line);\n }\n if (\n typeof textData.valign !== 'undefined' &&\n typeof textData.textMargin !== 'undefined' &&\n textData.textMargin > 0\n ) {\n textHeight += (textElem._groups || textElem)[0][0].getBBox().height;\n prevTextHeight = textHeight;\n }\n\n textElems.push(textElem);\n }\n\n return textElems;\n};\n\nexport const drawLabel = function (elem, txtObject) {\n /**\n * @param {any} x\n * @param {any} y\n * @param {any} width\n * @param {any} height\n * @param {any} cut\n * @returns {any}\n */\n function genPoints(x, y, width, height, cut) {\n return (\n x +\n ',' +\n y +\n ' ' +\n (x + width) +\n ',' +\n y +\n ' ' +\n (x + width) +\n ',' +\n (y + height - cut) +\n ' ' +\n (x + width - cut * 1.2) +\n ',' +\n (y + height) +\n ' ' +\n x +\n ',' +\n (y + height)\n );\n }\n const polygon = elem.append('polygon');\n polygon.attr('points', genPoints(txtObject.x, txtObject.y, txtObject.width, txtObject.height, 7));\n polygon.attr('class', 'labelBox');\n\n txtObject.y = txtObject.y + txtObject.height / 2;\n\n drawText(elem, txtObject);\n return polygon;\n};\n\nexport const drawRels = (elem, rels, conf) => {\n const relsElem = elem.append('g');\n let i = 0;\n for (let rel of rels) {\n let textColor = rel.textColor ? rel.textColor : '#444444';\n let strokeColor = rel.lineColor ? rel.lineColor : '#444444';\n let offsetX = rel.offsetX ? parseInt(rel.offsetX) : 0;\n let offsetY = rel.offsetY ? parseInt(rel.offsetY) : 0;\n\n let url = '';\n if (i === 0) {\n let line = relsElem.append('line');\n line.attr('x1', rel.startPoint.x);\n line.attr('y1', rel.startPoint.y);\n line.attr('x2', rel.endPoint.x);\n line.attr('y2', rel.endPoint.y);\n\n line.attr('stroke-width', '1');\n line.attr('stroke', strokeColor);\n line.style('fill', 'none');\n if (rel.type !== 'rel_b') line.attr('marker-end', 'url(' + url + '#arrowhead)');\n if (rel.type === 'birel' || rel.type === 'rel_b')\n line.attr('marker-start', 'url(' + url + '#arrowend)');\n i = -1;\n } else {\n let line = relsElem.append('path');\n line\n .attr('fill', 'none')\n .attr('stroke-width', '1')\n .attr('stroke', strokeColor)\n .attr(\n 'd',\n 'Mstartx,starty Qcontrolx,controly stopx,stopy '\n .replaceAll('startx', rel.startPoint.x)\n .replaceAll('starty', rel.startPoint.y)\n .replaceAll(\n 'controlx',\n rel.startPoint.x +\n (rel.endPoint.x - rel.startPoint.x) / 2 -\n (rel.endPoint.x - rel.startPoint.x) / 4\n )\n .replaceAll('controly', rel.startPoint.y + (rel.endPoint.y - rel.startPoint.y) / 2)\n .replaceAll('stopx', rel.endPoint.x)\n .replaceAll('stopy', rel.endPoint.y)\n );\n if (rel.type !== 'rel_b') line.attr('marker-end', 'url(' + url + '#arrowhead)');\n if (rel.type === 'birel' || rel.type === 'rel_b')\n line.attr('marker-start', 'url(' + url + '#arrowend)');\n }\n\n let messageConf = conf.messageFont();\n _drawTextCandidateFunc(conf)(\n rel.label.text,\n relsElem,\n Math.min(rel.startPoint.x, rel.endPoint.x) +\n Math.abs(rel.endPoint.x - rel.startPoint.x) / 2 +\n offsetX,\n Math.min(rel.startPoint.y, rel.endPoint.y) +\n Math.abs(rel.endPoint.y - rel.startPoint.y) / 2 +\n offsetY,\n rel.label.width,\n rel.label.height,\n { fill: textColor },\n messageConf\n );\n\n if (rel.techn && rel.techn.text !== '') {\n messageConf = conf.messageFont();\n _drawTextCandidateFunc(conf)(\n '[' + rel.techn.text + ']',\n relsElem,\n Math.min(rel.startPoint.x, rel.endPoint.x) +\n Math.abs(rel.endPoint.x - rel.startPoint.x) / 2 +\n offsetX,\n Math.min(rel.startPoint.y, rel.endPoint.y) +\n Math.abs(rel.endPoint.y - rel.startPoint.y) / 2 +\n conf.messageFontSize +\n 5 +\n offsetY,\n Math.max(rel.label.width, rel.techn.width),\n rel.techn.height,\n { fill: textColor, 'font-style': 'italic' },\n messageConf\n );\n }\n }\n};\n\n/**\n * Draws an boundary in the diagram\n *\n * @param {any} elem - The diagram we'll draw to.\n * @param {any} boundary - The boundary to draw.\n * @param {any} conf - DrawText implementation discriminator object\n */\nconst drawBoundary = function (elem, boundary, conf) {\n const boundaryElem = elem.append('g');\n\n let fillColor = boundary.bgColor ? boundary.bgColor : 'none';\n let strokeColor = boundary.borderColor ? boundary.borderColor : '#444444';\n let fontColor = boundary.fontColor ? boundary.fontColor : 'black';\n\n let attrsValue = { 'stroke-width': 1.0, 'stroke-dasharray': '7.0,7.0' };\n if (boundary.nodeType) attrsValue = { 'stroke-width': 1.0 };\n let rectData = {\n x: boundary.x,\n y: boundary.y,\n fill: fillColor,\n stroke: strokeColor,\n width: boundary.width,\n height: boundary.height,\n rx: 2.5,\n ry: 2.5,\n attrs: attrsValue,\n };\n\n drawRect(boundaryElem, rectData);\n\n // draw label\n let boundaryConf = conf.boundaryFont();\n boundaryConf.fontWeight = 'bold';\n boundaryConf.fontSize = boundaryConf.fontSize + 2;\n boundaryConf.fontColor = fontColor;\n _drawTextCandidateFunc(conf)(\n boundary.label.text,\n boundaryElem,\n boundary.x,\n boundary.y + boundary.label.Y,\n boundary.width,\n boundary.height,\n { fill: '#444444' },\n boundaryConf\n );\n\n // draw type\n if (boundary.type && boundary.type.text !== '') {\n boundaryConf = conf.boundaryFont();\n boundaryConf.fontColor = fontColor;\n _drawTextCandidateFunc(conf)(\n boundary.type.text,\n boundaryElem,\n boundary.x,\n boundary.y + boundary.type.Y,\n boundary.width,\n boundary.height,\n { fill: '#444444' },\n boundaryConf\n );\n }\n\n // draw descr\n if (boundary.descr && boundary.descr.text !== '') {\n boundaryConf = conf.boundaryFont();\n boundaryConf.fontSize = boundaryConf.fontSize - 2;\n boundaryConf.fontColor = fontColor;\n _drawTextCandidateFunc(conf)(\n boundary.descr.text,\n boundaryElem,\n boundary.x,\n boundary.y + boundary.descr.Y,\n boundary.width,\n boundary.height,\n { fill: '#444444' },\n boundaryConf\n );\n }\n};\n\nexport const drawC4Shape = function (elem, c4Shape, conf) {\n let fillColor = c4Shape.bgColor ? c4Shape.bgColor : conf[c4Shape.typeC4Shape.text + '_bg_color'];\n let strokeColor = c4Shape.borderColor\n ? c4Shape.borderColor\n : conf[c4Shape.typeC4Shape.text + '_border_color'];\n let fontColor = c4Shape.fontColor ? c4Shape.fontColor : '#FFFFFF';\n\n let personImg =\n 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAACD0lEQVR4Xu2YoU4EMRCGT+4j8Ai8AhaH4QHgAUjQuFMECUgMIUgwJAgMhgQsAYUiJCiQIBBY+EITsjfTdme6V24v4c8vyGbb+ZjOtN0bNcvjQXmkH83WvYBWto6PLm6v7p7uH1/w2fXD+PBycX1Pv2l3IdDm/vn7x+dXQiAubRzoURa7gRZWd0iGRIiJbOnhnfYBQZNJjNbuyY2eJG8fkDE3bbG4ep6MHUAsgYxmE3nVs6VsBWJSGccsOlFPmLIViMzLOB7pCVO2AtHJMohH7Fh6zqitQK7m0rJvAVYgGcEpe//PLdDz65sM4pF9N7ICcXDKIB5Nv6j7tD0NoSdM2QrU9Gg0ewE1LqBhHR3BBdvj2vapnidjHxD/q6vd7Pvhr31AwcY8eXMTXAKECZZJFXuEq27aLgQK5uLMohCenGGuGewOxSjBvYBqeG6B+Nqiblggdjnc+ZXDy+FNFpFzw76O3UBAROuXh6FoiAcf5g9eTvUgzy0nWg6I8cXHRUpg5bOVBCo+KDpFajOf23GgPme7RSQ+lacIENUgJ6gg1k6HjgOlqnLqip4tEuhv0hNEMXUD0clyXE3p6pZA0S2nnvTlXwLJEZWlb7cTQH1+USgTN4VhAenm/wea1OCAOmqo6fE1WCb9WSKBah+rbUWPWAmE2Rvk0ApiB45eOyNAzU8xcTvj8KvkKEoOaIYeHNA3ZuygAvFMUO0AAAAASUVORK5CYII=';\n switch (c4Shape.typeC4Shape.text) {\n case 'person':\n personImg =\n 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAACD0lEQVR4Xu2YoU4EMRCGT+4j8Ai8AhaH4QHgAUjQuFMECUgMIUgwJAgMhgQsAYUiJCiQIBBY+EITsjfTdme6V24v4c8vyGbb+ZjOtN0bNcvjQXmkH83WvYBWto6PLm6v7p7uH1/w2fXD+PBycX1Pv2l3IdDm/vn7x+dXQiAubRzoURa7gRZWd0iGRIiJbOnhnfYBQZNJjNbuyY2eJG8fkDE3bbG4ep6MHUAsgYxmE3nVs6VsBWJSGccsOlFPmLIViMzLOB7pCVO2AtHJMohH7Fh6zqitQK7m0rJvAVYgGcEpe//PLdDz65sM4pF9N7ICcXDKIB5Nv6j7tD0NoSdM2QrU9Gg0ewE1LqBhHR3BBdvj2vapnidjHxD/q6vd7Pvhr31AwcY8eXMTXAKECZZJFXuEq27aLgQK5uLMohCenGGuGewOxSjBvYBqeG6B+Nqiblggdjnc+ZXDy+FNFpFzw76O3UBAROuXh6FoiAcf5g9eTvUgzy0nWg6I8cXHRUpg5bOVBCo+KDpFajOf23GgPme7RSQ+lacIENUgJ6gg1k6HjgOlqnLqip4tEuhv0hNEMXUD0clyXE3p6pZA0S2nnvTlXwLJEZWlb7cTQH1+USgTN4VhAenm/wea1OCAOmqo6fE1WCb9WSKBah+rbUWPWAmE2Rvk0ApiB45eOyNAzU8xcTvj8KvkKEoOaIYeHNA3ZuygAvFMUO0AAAAASUVORK5CYII=';\n break;\n case 'external_person':\n personImg =\n 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAAB6ElEQVR4Xu2YLY+EMBCG9+dWr0aj0Wg0Go1Go0+j8Xdv2uTCvv1gpt0ebHKPuhDaeW4605Z9mJvx4AdXUyTUdd08z+u6flmWZRnHsWkafk9DptAwDPu+f0eAYtu2PEaGWuj5fCIZrBAC2eLBAnRCsEkkxmeaJp7iDJ2QMDdHsLg8SxKFEJaAo8lAXnmuOFIhTMpxxKATebo4UiFknuNo4OniSIXQyRxEA3YsnjGCVEjVXD7yLUAqxBGUyPv/Y4W2beMgGuS7kVQIBycH0fD+oi5pezQETxdHKmQKGk1eQEYldK+jw5GxPfZ9z7Mk0Qnhf1W1m3w//EUn5BDmSZsbR44QQLBEqrBHqOrmSKaQAxdnLArCrxZcM7A7ZKs4ioRq8LFC+NpC3WCBJsvpVw5edm9iEXFuyNfxXAgSwfrFQ1c0iNda8AdejvUgnktOtJQQxmcfFzGglc5WVCj7oDgFqU18boeFSs52CUh8LE8BIVQDT1ABrB0HtgSEYlX5doJnCwv9TXocKCaKbnwhdDKPq4lf3SwU3HLq4V/+WYhHVMa/3b4IlfyikAduCkcBc7mQ3/z/Qq/cTuikhkzB12Ae/mcJC9U+Vo8Ej1gWAtgbeGgFsAMHr50BIWOLCbezvhpBFUdY6EJuJ/QDW0XoMX60zZ0AAAAASUVORK5CYII=';\n break;\n }\n\n const c4ShapeElem = elem.append('g');\n c4ShapeElem.attr('class', 'person-man');\n\n //