/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';\n// import { line, curveBasis, curveLinear, select } from 'd3';\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\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\n// const getRelationType = function(type) {\n// switch (type) {\n// case stateDb.relationType.AGGREGATION:\n// return 'aggregation';\n// case stateDb.relationType.EXTENSION:\n// return 'extension';\n// case stateDb.relationType.COMPOSITION:\n// return 'composition';\n// case stateDb.relationType.DEPENDENCY:\n// return 'dependency';\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 * @param {*} points\n * @param {*} boundryNode\n * @returns\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 opint ouside 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 // // outtside\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 // log.warn('edge', edge);\n // log.warn('from cluster', clusterDb[edge.fromCluster], points);\n // const updatedPoints = [];\n // let lastPointOutside = edge.points[edge.points.length - 1];\n // let isInside = false;\n // for (let i = points.length - 1; i >= 0; i--) {\n // const point = points[i];\n // const node = clusterDb[edge.fromCluster].node;\n // log.warn('checking to', edge.fromCluster, point, node);\n\n // if (!outsideNode(node, point) && !isInside) {\n // log.warn('inside', edge.fromCluster, point, node);\n\n // // First point inside the rect\n // const inter = intersection(node, lastPointOutside, point);\n // log.warn('intersect', intersection(node, lastPointOutside, 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 // updatedPoints.unshift(inter);\n // log.warn('Adding point -updated = ', updatedPoints);\n // } else {\n // log.warn('no intersect', inter, points);\n // }\n // // points.push(insterection);\n // isInside = true;\n // } else {\n // // at the outside\n // // if (!isInside) updatedPoints.unshift(point);\n // updatedPoints.unshift(point);\n // log.warn('Outside point', point, updatedPoints);\n // }\n // lastPointOutside = point;\n // }\n // points = updatedPoints;\n // points = edge.points;\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 recusively\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-recurive 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';\r\n\r\nfunction intersectCircle(node, rx, point) {\r\n return intersectEllipse(node, rx, rx, point);\r\n}\r\n\r\nexport default intersectCircle;\r\n","function intersectEllipse(node, rx, ry, point) {\r\n // Formulae from: http://mathworld.wolfram.com/Ellipse-LineIntersection.html\r\n\r\n var cx = node.x;\r\n var cy = node.y;\r\n\r\n var px = cx - point.x;\r\n var py = cy - point.y;\r\n\r\n var det = Math.sqrt(rx * rx * py * py + ry * ry * px * px);\r\n\r\n var dx = Math.abs((rx * ry * px) / det);\r\n if (point.x < cx) {\r\n dx = -dx;\r\n }\r\n var dy = Math.abs((rx * ry * py) / det);\r\n if (point.y < cy) {\r\n dy = -dy;\r\n }\r\n\r\n return { x: cx + dx, y: cy + dy };\r\n}\r\n\r\nexport default intersectEllipse;\r\n","/*\r\n * Returns the point at which two lines, p and q, intersect or returns\r\n * undefined if they do not intersect.\r\n */\r\nfunction intersectLine(p1, p2, q1, q2) {\r\n // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,\r\n // p7 and p473.\r\n\r\n var a1, a2, b1, b2, c1, c2;\r\n var r1, r2, r3, r4;\r\n var denom, offset, num;\r\n var x, y;\r\n\r\n // Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x +\r\n // b1 y + c1 = 0.\r\n a1 = p2.y - p1.y;\r\n b1 = p1.x - p2.x;\r\n c1 = p2.x * p1.y - p1.x * p2.y;\r\n\r\n // Compute r3 and r4.\r\n r3 = a1 * q1.x + b1 * q1.y + c1;\r\n r4 = a1 * q2.x + b1 * q2.y + c1;\r\n\r\n // Check signs of r3 and r4. If both point 3 and point 4 lie on\r\n // same side of line 1, the line segments do not intersect.\r\n if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {\r\n return /*DONT_INTERSECT*/;\r\n }\r\n\r\n // Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0\r\n a2 = q2.y - q1.y;\r\n b2 = q1.x - q2.x;\r\n c2 = q2.x * q1.y - q1.x * q2.y;\r\n\r\n // Compute r1 and r2\r\n r1 = a2 * p1.x + b2 * p1.y + c2;\r\n r2 = a2 * p2.x + b2 * p2.y + c2;\r\n\r\n // Check signs of r1 and r2. If both point 1 and point 2 lie\r\n // on same side of second line segment, the line segments do\r\n // not intersect.\r\n if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) {\r\n return /*DONT_INTERSECT*/;\r\n }\r\n\r\n // Line segments intersect: compute intersection point.\r\n denom = a1 * b2 - a2 * b1;\r\n if (denom === 0) {\r\n return /*COLLINEAR*/;\r\n }\r\n\r\n offset = Math.abs(denom / 2);\r\n\r\n // The denom/2 is to get rounding instead of truncating. It\r\n // is added or subtracted to the numerator, depending upon the\r\n // sign of the numerator.\r\n num = b1 * c2 - b2 * c1;\r\n x = num < 0 ? (num - offset) / denom : (num + offset) / denom;\r\n\r\n num = a2 * c1 - a1 * c2;\r\n y = num < 0 ? (num - offset) / denom : (num + offset) / denom;\r\n\r\n return { x: x, y: y };\r\n}\r\n\r\nfunction sameSign(r1, r2) {\r\n return r1 * r2 > 0;\r\n}\r\n\r\nexport default intersectLine;\r\n","module.exports = intersectNode;\r\n\r\nfunction intersectNode(node, point) {\r\n // console.info('Intersect Node');\r\n return node.intersect(point);\r\n}\r\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\n * node argument assuming that it has the shape specified by polygon.\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 // http://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","/**\n * Setup arrow head and define the marker. The result is appended to the svg.\n */\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 semanitc free\nconst markers = {\n extension,\n composition,\n aggregation,\n dependency,\n point,\n circle,\n cross,\n barb,\n};\nexport default insertMarkers;\n","/**\n * Decorates with functions required by mermaids dagre-wrapper.\n */\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 * @param {graphlib graph} g\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 * @param {Finds a } id\n * @param {*} 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 replacment 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 inorder 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]) {\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 } from '../diagrams/common/common';\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 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', 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\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 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 // Positin 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 rectWithTitle,\n choice,\n circle,\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 newEl = elem\n .insert('svg:a')\n .attr('xlink:href', node.link)\n .attr('target', node.linkTarget || '_blank');\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 { select } from 'd3';\nimport { evaluate } 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 text = label\n .node()\n .appendChild(createLabel(node.labelText, node.labelStyle, false, isNode));\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\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 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:**\n * \n * mermaid.initialize({\n * flowchart:{\n * htmlLabels: false\n * }\n * });\n * \n *\n * **Example 2:**\n * \n * <script>\n * var config = {\n * startOnLoad:true,\n * flowchart:{\n * useMaxWidth:true,\n * htmlLabels:true,\n * curve:'cardinal',\n * },\n *\n * securityLevel:'loose',\n * };\n * mermaid.initialize(config);\n * </script>\n * \n * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults). 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\".\n *\n * \n * \"theme\": \"forest\",\n * \"themeCSS\": \".node rect { fill: red; }\"\n * \n */\n theme: 'default',\n themeVariables: theme['default'].getThemeVariables(),\n themeCSS: undefined,\n /* **maxTextSize** - The maximum allowed size of the users text diamgram */\n maxTextSize: 50000,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | fontFamily | specifies the font to be used in the rendered diagrams| string | Required | Any Posiable CSS FontFamily |\n *\n * **Notes:**\n * 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 *\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 functionality is enabled\n */\n securityLevel: 'strict',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | startOnLoad | Dictates whether mermaind 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 *\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 via\n * call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to\n * the `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 on a seed.\n * If set to false, the IDs are generated based on the current date and thus are not 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 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 deterministicIds is true, a simple number iterator is used.\n * You can set this attribute to base the seed on a static string.\n */\n deterministicIDSeed: undefined,\n\n /**\n * The object containing configurations specific for flowcharts\n */\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, 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 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 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 Vaue: '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\n * * dagre-wrapper - wrapper for dagre implemented in mermaid\n *\n * Default value: 'dagre-d3'\n */\n defaultRenderer: 'dagre-d3',\n },\n\n /**\n * The object containing configurations specific for sequence diagrams\n */\n sequence: {\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | activationWidth | Width of the activation rect | Integer | Required | Any Positive Value |\n *\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:**\n * 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:**\n * 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:**\n * 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:**\n * 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:**\n * 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:**\n * 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 * 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:**\n * 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:**\n * 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:**\n * When this flag is set to true, the height and width is set to 100% and is then scaling with the\n * 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:**\n * 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:**\n ***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 Posiable CSS FontFamily |\n *\n * **Notes:**\n * 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:**\n * 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:**\n * 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 Posiable CSS FontFamily |\n *\n * **Notes:**\n * 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:**\n * 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:**\n * 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:**\n * 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 Posiable CSS FontFamily |\n *\n * **Notes:**\n * 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:**\n * Default value: 400.\n */\n messageFontWeight: 400,\n\n /**\n * This sets the auto-wrap state for the diagram\n *\n * **Notes:**\n * Default value: false.\n */\n wrap: false,\n\n /**\n * This sets the auto-wrap padding for the diagram (sides only)\n *\n * **Notes:**\n * 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:**\n * 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:**\n * 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 /**\n * The object containing configurations specific for gantt diagrams\n */\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:**\n * 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:**\n * 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:**\n * 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:**\n * 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:**\n * 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:**\n * 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:**\n * 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:**\n * Default value: 11\n */\n fontSize: 11,\n\n /**\n * | Parameter | Description | Type | Required | Values|\n * | --- | --- | --- | --- | --- |\n * | sectionFontSize | Font size for secions| Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * 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:**\n * 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\ntop of the chart\n *\n ***Default value false**.\n */\n topAxis: false,\n\n useWidth: undefined,\n },\n\n /**\n * The object containing configurations specific for journey diagrams\n */\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:**\n * 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:**\n * 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:**\n * 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:**\n * 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:**\n * 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:**\n * 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:**\n * 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:**\n * 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:**\n * 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\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\n * * dagre-wrapper - wrapper for dagre implemented in mermaid\n *\n * Default value: 'dagre-d3'\n */\n defaultRenderer: 'dagre-wrapper',\n },\n git: {\n arrowMarkerAbsolute: false,\n\n useWidth: undefined,\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 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\n * * dagre-wrapper - wrapper for dagre implemented in mermaid\n *\n * Default value: 'dagre-d3'\n */\n defaultRenderer: 'dagre-wrapper',\n },\n\n /**\n * The object containing configurations specific for entity relationship diagrams\n */\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, 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 mimimum width of an entity box | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Expressed in pixels.\n * 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:**\n * Expressed in pixels\n * Default value: 75\n */\n minEntityHeight: 75,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | entityPadding | Minimum internal padding betweentext in box and box borders | Integer | 4 | Any Positive Value |\n *\n * **Notes:**\n *\n * The minimum internal padding betweentext in an entity box and the enclosing box borders, 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:**\n * 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:**\n * 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)\n * 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\n * scaled based on available space. If set to false, the diagram reserves its\n * absolute width.\n *\n * Default value: true\n */\n useMaxWidth: true,\n },\n\n /**\n * The object containing configurations specific for pie diagrams\n */\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\n * scaled based on available space. If set to false, the diagram reserves its\n * absolute width.\n *\n * Default value: true\n */\n useMaxWidth: true,\n },\n\n /**\n * The object containing configurations specific for req diagrams\n */\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\n * scaled based on available space. If set to false, the diagram reserves its\n * 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};\n\nconfig.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;\nconfig.git.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","import { select } from 'd3';\nimport { log } from '../../logger';\nimport * as configApi from '../../config';\nimport common from '../common/common';\nimport utils from '../../utils';\nimport mermaidAPI from '../../mermaidAPI';\n\nconst MERMAID_DOM_ID_PREFIX = 'classid-';\n\nlet relations = [];\nlet classes = {};\nlet classCounter = 0;\n\nlet funs = [];\n\nexport const parseDirective = function (statement, context, type) {\n mermaidAPI.parseDirective(this, statement, context, type);\n};\n\nconst splitClassNameAndType = function (id) {\n let genericType = '';\n let className = id;\n\n if (id.indexOf('~') > 0) {\n let split = id.split('~');\n className = split[0];\n\n genericType = split[1];\n }\n\n return { className: className, type: genericType };\n};\n\n/**\n * Function called by parser when a node definition has been found.\n * @param id\n * @public\n */\nexport const addClass = function (id) {\n let classId = splitClassNameAndType(id);\n // Only add class if not exists\n if (typeof classes[classId.className] !== 'undefined') return;\n\n classes[classId.className] = {\n id: classId.className,\n type: classId.type,\n cssClasses: [],\n methods: [],\n members: [],\n annotations: [],\n domId: MERMAID_DOM_ID_PREFIX + classId.className + '-' + classCounter,\n };\n\n classCounter++;\n};\n\n/**\n * Function to lookup domId from id in the graph definition.\n * @param id\n * @public\n */\nexport const lookUpDomId = function (id) {\n const classKeys = Object.keys(classes);\n for (let i = 0; i < classKeys.length; i++) {\n if (classes[classKeys[i]].id === id) {\n return classes[classKeys[i]].domId;\n }\n }\n};\n\nexport const clear = function () {\n relations = [];\n classes = {};\n funs = [];\n funs.push(setupToolTips);\n};\n\nexport const getClass = function (id) {\n return classes[id];\n};\nexport const getClasses = function () {\n return classes;\n};\n\nexport const getRelations = function () {\n return relations;\n};\n\nexport const addRelation = function (relation) {\n log.debug('Adding relation: ' + JSON.stringify(relation));\n addClass(relation.id1);\n addClass(relation.id2);\n\n relation.id1 = splitClassNameAndType(relation.id1).className;\n relation.id2 = splitClassNameAndType(relation.id2).className;\n\n relations.push(relation);\n};\n\n/**\n * Adds an annotation to the specified class\n * Annotations mark special properties of the given type (like 'interface' or 'service')\n * @param className The class name\n * @param annotation The name of the annotation without any brackets\n * @public\n */\nexport const addAnnotation = function (className, annotation) {\n const validatedClassName = splitClassNameAndType(className).className;\n classes[validatedClassName].annotations.push(annotation);\n};\n\n/**\n * Adds a member to the specified class\n * @param className The class name\n * @param member The full name of the member.\n * If the member is enclosed in <> it is treated as an annotation\n * If the member is ending with a closing bracket ) it is treated as a method\n * Otherwise the member will be treated as a normal property\n * @public\n */\nexport const addMember = function (className, member) {\n const validatedClassName = splitClassNameAndType(className).className;\n const theClass = classes[validatedClassName];\n\n if (typeof member === 'string') {\n // Member can contain white spaces, we trim them out\n const memberString = member.trim();\n\n if (memberString.startsWith('<<') && memberString.endsWith('>>')) {\n // Remove leading and trailing brackets\n theClass.annotations.push(memberString.substring(2, memberString.length - 2));\n } else if (memberString.indexOf(')') > 0) {\n theClass.methods.push(memberString);\n } else if (memberString) {\n theClass.members.push(memberString);\n }\n }\n};\n\nexport const addMembers = function (className, members) {\n if (Array.isArray(members)) {\n members.reverse();\n members.forEach((member) => addMember(className, member));\n }\n};\n\nexport const cleanupLabel = function (label) {\n if (label.substring(0, 1) === ':') {\n return label.substr(1).trim();\n } else {\n return label.trim();\n }\n};\n\n/**\n * Called by parser when a special node is found, e.g. a clickable element.\n * @param ids Comma separated list of ids\n * @param className Class to add\n */\nexport const setCssClass = function (ids, className) {\n ids.split(',').forEach(function (_id) {\n let id = _id;\n if (_id[0].match(/\\d/)) id = MERMAID_DOM_ID_PREFIX + id;\n if (typeof classes[id] !== 'undefined') {\n classes[id].cssClasses.push(className);\n }\n });\n};\n\n/**\n * Called by parser when a tooltip is found, e.g. a clickable element.\n * @param ids Comma separated list of ids\n * @param tooltip Tooltip to add\n */\nconst setTooltip = function (ids, tooltip) {\n const config = configApi.getConfig();\n ids.split(',').forEach(function (id) {\n if (typeof tooltip !== 'undefined') {\n classes[id].tooltip = common.sanitizeText(tooltip, config);\n }\n });\n};\n\n/**\n * Called by parser when a link is found. Adds the URL to the vertex data.\n * @param ids Comma separated list of ids\n * @param linkStr URL to create a link for\n * @param target Target of the link, _blank by default as originally defined in the svgDraw.js file\n */\nexport const setLink = function (ids, linkStr, target) {\n const config = configApi.getConfig();\n ids.split(',').forEach(function (_id) {\n let id = _id;\n if (_id[0].match(/\\d/)) id = MERMAID_DOM_ID_PREFIX + id;\n if (typeof classes[id] !== 'undefined') {\n classes[id].link = utils.formatUrl(linkStr, config);\n if (typeof target === 'string') {\n classes[id].linkTarget = target;\n } else {\n classes[id].linkTarget = '_blank';\n }\n }\n });\n setCssClass(ids, 'clickable');\n};\n\n/**\n * Called by parser when a click definition is found. Registers an event handler.\n * @param ids Comma separated list of ids\n * @param functionName Function to be called on click\n * @param functionArgs Function args the function should be called with\n */\nexport const setClickEvent = function (ids, functionName, functionArgs) {\n ids.split(',').forEach(function (id) {\n setClickFunc(id, functionName, functionArgs);\n classes[id].haveCallback = true;\n });\n setCssClass(ids, 'clickable');\n};\n\nconst setClickFunc = function (domId, functionName, functionArgs) {\n const config = configApi.getConfig();\n let id = domId;\n let elemId = lookUpDomId(id);\n\n if (config.securityLevel !== 'loose') {\n return;\n }\n if (typeof functionName === 'undefined') {\n return;\n }\n if (typeof classes[id] !== 'undefined') {\n let argList = [];\n if (typeof functionArgs === 'string') {\n /* Splits functionArgs by ',', ignoring all ',' in double quoted strings */\n argList = functionArgs.split(/,(?=(?:(?:[^\"]*\"){2})*[^\"]*$)/);\n for (let i = 0; i < argList.length; i++) {\n let item = argList[i].trim();\n /* Removes all double quotes at the start and end of an argument */\n /* This preserves all starting and ending whitespace inside */\n if (item.charAt(0) === '\"' && item.charAt(item.length - 1) === '\"') {\n item = item.substr(1, item.length - 2);\n }\n argList[i] = item;\n }\n }\n\n /* if no arguments passed into callback, default to passing in id */\n if (argList.length === 0) {\n argList.push(elemId);\n }\n\n funs.push(function () {\n const elem = document.querySelector(`[id=\"${elemId}\"]`);\n if (elem !== null) {\n elem.addEventListener(\n 'click',\n function () {\n utils.runFunc(functionName, ...argList);\n },\n false\n );\n }\n });\n }\n};\n\nexport const bindFunctions = function (element) {\n funs.forEach(function (fun) {\n fun(element);\n });\n};\n\nexport const lineType = {\n LINE: 0,\n DOTTED_LINE: 1,\n};\n\nexport const relationType = {\n AGGREGATION: 0,\n EXTENSION: 1,\n COMPOSITION: 2,\n DEPENDENCY: 3,\n};\n\nconst setupToolTips = function (element) {\n let tooltipElem = select('.mermaidTooltip');\n if ((tooltipElem._groups || tooltipElem)[0][0] === null) {\n tooltipElem = select('body').append('div').attr('class', 'mermaidTooltip').style('opacity', 0);\n }\n\n const svg = select(element).select('svg');\n\n const nodes = svg.selectAll('g.node');\n nodes\n .on('mouseover', function () {\n const el = select(this);\n const title = el.attr('title');\n // Dont try to draw a tooltip if no data is provided\n if (title === null) {\n return;\n }\n const rect = this.getBoundingClientRect();\n\n tooltipElem.transition().duration(200).style('opacity', '.9');\n tooltipElem\n .html(el.attr('title'))\n .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')\n .style('top', window.scrollY + rect.top - 14 + document.body.scrollTop + 'px');\n el.classed('hover', true);\n })\n .on('mouseout', function () {\n tooltipElem.transition().duration(500).style('opacity', 0);\n const el = select(this);\n el.classed('hover', false);\n });\n};\nfuns.push(setupToolTips);\n\nlet direction = 'TB';\nconst getDirection = () => direction;\nconst setDirection = (dir) => {\n direction = dir;\n};\n\nexport default {\n parseDirective,\n getConfig: () => configApi.getConfig().class,\n addClass,\n bindFunctions,\n clear,\n getClass,\n getClasses,\n addAnnotation,\n getRelations,\n addRelation,\n getDirection,\n setDirection,\n addMember,\n addMembers,\n cleanupLabel,\n lineType,\n relationType,\n setClickEvent,\n setCssClass,\n setLink,\n setTooltip,\n lookUpDomId,\n};\n","import { select } from 'd3';\nimport dagre from 'dagre';\nimport graphlib from 'graphlib';\nimport { log } from '../../logger';\nimport classDb, { lookUpDomId } from './classDb';\nimport { parser } from './parser/classDiagram';\nimport svgDraw from './svgDraw';\nimport { getConfig } from '../../config';\nimport { render } from '../../dagre-wrapper/index.js';\n// import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';\nimport { curveLinear } from 'd3';\nimport { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';\nimport common from '../common/common';\n\nparser.yy = classDb;\n\nlet idCache = {};\nconst padding = 20;\n\nconst conf = {\n dividerMargin: 10,\n padding: 5,\n textHeight: 10,\n};\n\n/**\n * Function that adds the vertices found during parsing to the graph to be rendered.\n * @param vert Object containing the vertices.\n * @param g The graph that is to be drawn.\n */\nexport const addClasses = function (classes, g) {\n // const svg = select(`[id=\"${svgId}\"]`);\n const keys = Object.keys(classes);\n log.info('keys:', keys);\n log.info(classes);\n\n // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition\n keys.forEach(function (id) {\n const vertex = classes[id];\n\n /**\n * Variable for storing the classes for the vertex\n * @type {string}\n */\n let cssClassStr = '';\n if (vertex.cssClasses.length > 0) {\n cssClassStr = cssClassStr + ' ' + vertex.cssClasses.join(' ');\n }\n // if (vertex.classes.length > 0) {\n // classStr = vertex.classes.join(' ');\n // }\n\n const styles = { labelStyle: '' }; //getStylesFromArray(vertex.styles);\n\n // Use vertex id as text in the box if no text is provided by the graph definition\n let vertexText = vertex.text !== undefined ? vertex.text : vertex.id;\n\n // We create a SVG label, either by delegating to addHtmlLabel or manually\n // let vertexNode;\n // if (evaluate(getConfig().flowchart.htmlLabels)) {\n // const node = {\n // label: vertexText.replace(\n // /fa[lrsb]?:fa-[\\w-]+/g,\n // s => ``\n // )\n // };\n // vertexNode = addHtmlLabel(svg, node).node();\n // vertexNode.parentNode.removeChild(vertexNode);\n // } else {\n // const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n // svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));\n\n // const rows = vertexText.split(common.lineBreakRegex);\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', '1');\n // tspan.textContent = rows[j];\n // svgLabel.appendChild(tspan);\n // }\n // vertexNode = svgLabel;\n // }\n\n let radious = 0;\n let _shape = '';\n // Set the shape based parameters\n switch (vertex.type) {\n case 'class':\n _shape = 'class_box';\n break;\n default:\n _shape = 'class_box';\n }\n // Add the node\n g.setNode(vertex.id, {\n labelStyle: styles.labelStyle,\n shape: _shape,\n labelText: vertexText,\n classData: vertex,\n rx: radious,\n ry: radious,\n class: cssClassStr,\n style: styles.style,\n id: vertex.id,\n domId: vertex.domId,\n haveCallback: vertex.haveCallback,\n link: vertex.link,\n width: vertex.type === 'group' ? 500 : undefined,\n type: vertex.type,\n padding: getConfig().flowchart.padding,\n });\n\n log.info('setNode', {\n labelStyle: styles.labelStyle,\n shape: _shape,\n labelText: vertexText,\n rx: radious,\n ry: radious,\n class: cssClassStr,\n style: styles.style,\n id: vertex.id,\n width: vertex.type === 'group' ? 500 : undefined,\n type: vertex.type,\n padding: getConfig().flowchart.padding,\n });\n });\n};\n\n/**\n * Add edges to graph based on parsed graph defninition\n * @param {Object} edges The edges to add to the graph\n * @param {Object} g The graph object\n */\nexport const addRelations = function (relations, g) {\n let cnt = 0;\n\n let defaultStyle;\n let defaultLabelStyle;\n\n // if (typeof relations.defaultStyle !== 'undefined') {\n // const defaultStyles = getStylesFromArray(relations.defaultStyle);\n // defaultStyle = defaultStyles.style;\n // defaultLabelStyle = defaultStyles.labelStyle;\n // }\n\n relations.forEach(function (edge) {\n cnt++;\n const edgeData = {};\n //Set relationship style and line type\n edgeData.classes = 'relation';\n edgeData.pattern = edge.relation.lineType == 1 ? 'dashed' : 'solid';\n\n edgeData.id = 'id' + cnt;\n // Set link type for rendering\n if (edge.type === 'arrow_open') {\n edgeData.arrowhead = 'none';\n } else {\n edgeData.arrowhead = 'normal';\n }\n\n log.info(edgeData, edge);\n //Set edge extra labels\n //edgeData.startLabelLeft = edge.relationTitle1;\n edgeData.startLabelRight = edge.relationTitle1 === 'none' ? '' : edge.relationTitle1;\n edgeData.endLabelLeft = edge.relationTitle2 === 'none' ? '' : edge.relationTitle2;\n //edgeData.endLabelRight = edge.relationTitle2;\n\n //Set relation arrow types\n edgeData.arrowTypeStart = getArrowMarker(edge.relation.type1);\n edgeData.arrowTypeEnd = getArrowMarker(edge.relation.type2);\n let style = '';\n let labelStyle = '';\n\n if (typeof edge.style !== 'undefined') {\n const styles = getStylesFromArray(edge.style);\n style = styles.style;\n labelStyle = styles.labelStyle;\n } else {\n style = 'fill:none';\n if (typeof defaultStyle !== 'undefined') {\n style = defaultStyle;\n }\n if (typeof defaultLabelStyle !== 'undefined') {\n labelStyle = defaultLabelStyle;\n }\n }\n\n edgeData.style = style;\n edgeData.labelStyle = labelStyle;\n\n if (typeof edge.interpolate !== 'undefined') {\n edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);\n } else if (typeof relations.defaultInterpolate !== 'undefined') {\n edgeData.curve = interpolateToCurve(relations.defaultInterpolate, curveLinear);\n } else {\n edgeData.curve = interpolateToCurve(conf.curve, curveLinear);\n }\n\n edge.text = edge.title;\n if (typeof edge.text === 'undefined') {\n if (typeof edge.style !== 'undefined') {\n edgeData.arrowheadStyle = 'fill: #333';\n }\n } else {\n edgeData.arrowheadStyle = 'fill: #333';\n edgeData.labelpos = 'c';\n\n if (getConfig().flowchart.htmlLabels) { // eslint-disable-line\n edgeData.labelType = 'html';\n edgeData.label = '' + edge.text + '';\n } else {\n edgeData.labelType = 'text';\n edgeData.label = edge.text.replace(common.lineBreakRegex, '\\n');\n\n if (typeof edge.style === 'undefined') {\n edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';\n }\n\n edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');\n }\n }\n // Add the edge to the graph\n g.setEdge(edge.id1, edge.id2, edgeData, cnt);\n });\n};\n\n// Todo optimize\nconst getGraphId = function (label) {\n const keys = Object.keys(idCache);\n\n for (let i = 0; i < keys.length; i++) {\n if (idCache[keys[i]].label === label) {\n return keys[i];\n }\n }\n\n return undefined;\n};\n\nexport const setConf = function (cnf) {\n const keys = Object.keys(cnf);\n\n keys.forEach(function (key) {\n conf[key] = cnf[key];\n });\n};\n\n/**\n * Draws a flowchart in the tag with id: id based on the graph definition in text.\n * @param text\n * @param id\n */\nexport const drawOld = function (text, id) {\n idCache = {};\n parser.yy.clear();\n parser.parse(text);\n\n log.info('Rendering diagram ' + text);\n\n // Fetch the default direction, use TD if none was found\n const diagram = select(`[id='${id}']`);\n // insertMarkers(diagram);\n\n // Layout graph, Create a new directed graph\n const g = new graphlib.Graph({\n multigraph: true,\n });\n\n // Set an object for the graph label\n g.setGraph({\n isMultiGraph: true,\n });\n\n // Default to assigning a new object as a label for each new edge.\n g.setDefaultEdgeLabel(function () {\n return {};\n });\n\n const classes = classDb.getClasses();\n log.info('classes:');\n log.info(classes);\n const keys = Object.keys(classes);\n for (let i = 0; i < keys.length; i++) {\n const classDef = classes[keys[i]];\n const node = svgDraw.drawClass(diagram, classDef, conf);\n idCache[node.id] = node;\n\n // Add nodes to the graph. The first argument is the node id. The second is\n // metadata about the node. In this case we're going to add labels to each of\n // our nodes.\n g.setNode(node.id, node);\n\n log.info('Org height: ' + node.height);\n }\n\n const relations = classDb.getRelations();\n log.info('relations:', relations);\n relations.forEach(function (relation) {\n log.info(\n 'tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation)\n );\n g.setEdge(\n getGraphId(relation.id1),\n getGraphId(relation.id2),\n {\n relation: relation,\n },\n relation.title || 'DEFAULT'\n );\n });\n\n dagre.layout(g);\n g.nodes().forEach(function (v) {\n if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {\n log.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));\n select('#' + lookUpDomId(v)).attr(\n 'transform',\n 'translate(' +\n (g.node(v).x - g.node(v).width / 2) +\n ',' +\n (g.node(v).y - g.node(v).height / 2) +\n ' )'\n );\n }\n });\n\n g.edges().forEach(function (e) {\n if (typeof e !== 'undefined' && typeof g.edge(e) !== 'undefined') {\n log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));\n svgDraw.drawEdge(diagram, g.edge(e), g.edge(e).relation, conf);\n }\n });\n\n const svgBounds = diagram.node().getBBox();\n const width = svgBounds.width + padding * 2;\n const height = svgBounds.height + padding * 2;\n\n configureSvgSize(diagram, height, width, conf.useMaxWidth);\n\n // Ensure the viewBox includes the whole svgBounds area with extra space for padding\n const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;\n log.debug(`viewBox ${vBox}`);\n diagram.attr('viewBox', vBox);\n};\n\nexport const draw = function (text, id) {\n log.info('Drawing class');\n classDb.clear();\n // const parser = classDb.parser;\n // parser.yy = classDb;\n\n // Parse the graph definition\n // try {\n parser.parse(text);\n // } catch (err) {\n // log.debug('Parsing failed');\n // }\n\n // Fetch the default direction, use TD if none was found\n //let dir = 'TD';\n\n const conf = getConfig().flowchart;\n log.info('config:', conf);\n const nodeSpacing = conf.nodeSpacing || 50;\n const rankSpacing = conf.rankSpacing || 50;\n\n // Create the input mermaid.graph\n const g = new graphlib.Graph({\n multigraph: true,\n compound: true,\n })\n .setGraph({\n rankdir: classDb.getDirection(),\n nodesep: nodeSpacing,\n ranksep: rankSpacing,\n marginx: 8,\n marginy: 8,\n })\n .setDefaultEdgeLabel(function () {\n return {};\n });\n\n // let subG;\n // const subGraphs = flowDb.getSubGraphs();\n // log.info('Subgraphs - ', subGraphs);\n // for (let i = subGraphs.length - 1; i >= 0; i--) {\n // subG = subGraphs[i];\n // log.info('Subgraph - ', subG);\n // flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes);\n // }\n\n // Fetch the verices/nodes and edges/links from the parsed graph definition\n const classes = classDb.getClasses();\n const relations = classDb.getRelations();\n\n log.info(relations);\n // let i = 0;\n // for (i = subGraphs.length - 1; i >= 0; i--) {\n // subG = subGraphs[i];\n\n // selectAll('cluster').append('text');\n\n // for (let j = 0; j < subG.nodes.length; j++) {\n // g.setParent(subG.nodes[j], subG.id);\n // }\n // }\n addClasses(classes, g, id);\n addRelations(relations, g);\n\n // Add custom shapes\n // flowChartShapes.addToRenderV2(addShape);\n\n // Set up an SVG group so that we can translate the final graph.\n const svg = select(`[id=\"${id}\"]`);\n svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');\n\n // Run the renderer. This is what draws the final graph.\n const element = select('#' + id + ' g');\n render(element, g, ['aggregation', 'extension', 'composition', 'dependency'], 'classDiagram', id);\n\n // element.selectAll('g.node').attr('title', function() {\n // return flowDb.getTooltip(this.id);\n // });\n\n const padding = 8;\n const svgBounds = svg.node().getBBox();\n const width = svgBounds.width + padding * 2;\n const height = svgBounds.height + padding * 2;\n log.debug(\n `new ViewBox 0 0 ${width} ${height}`,\n `translate(${padding - g._label.marginx}, ${padding - g._label.marginy})`\n );\n\n configureSvgSize(svg, height, width, conf.useMaxWidth);\n\n svg.attr('viewBox', `0 0 ${width} ${height}`);\n svg\n .select('g')\n .attr('transform', `translate(${padding - g._label.marginx}, ${padding - svgBounds.y})`);\n\n // Index nodes\n // flowDb.indexNodes('subGraph' + i);\n\n // Add label rects for non html labels\n if (!conf.htmlLabels) {\n const labels = document.querySelectorAll('[id=\"' + id + '\"] .edgeLabel .label');\n for (let k = 0; k < labels.length; k++) {\n const label = labels[k];\n\n // Get dimensions of label\n const dim = label.getBBox();\n\n const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\n rect.setAttribute('rx', 0);\n rect.setAttribute('ry', 0);\n rect.setAttribute('width', dim.width);\n rect.setAttribute('height', dim.height);\n // rect.setAttribute('style', 'fill:#e8e8e8;');\n\n label.insertBefore(rect, label.firstChild);\n }\n }\n\n // If node has a link, wrap it in an anchor SVG object.\n // const keys = Object.keys(classes);\n // keys.forEach(function(key) {\n // const vertex = classes[key];\n\n // if (vertex.link) {\n // const node = select('#' + id + ' [id=\"' + key + '\"]');\n // if (node) {\n // const link = document.createElementNS('http://www.w3.org/2000/svg', 'a');\n // link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' '));\n // link.setAttributeNS('http://www.w3.org/2000/svg', 'href', vertex.link);\n // link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener');\n\n // const linkNode = node.insert(function() {\n // return link;\n // }, ':first-child');\n\n // const shape = node.select('.label-container');\n // if (shape) {\n // linkNode.append(function() {\n // return shape.node();\n // });\n // }\n\n // const label = node.select('.label');\n // if (label) {\n // linkNode.append(function() {\n // return label.node();\n // });\n // }\n // }\n // }\n // });\n};\n\nexport default {\n setConf,\n draw,\n};\nfunction getArrowMarker(type) {\n let marker;\n switch (type) {\n case 0:\n marker = 'aggregation';\n break;\n case 1:\n marker = 'extension';\n break;\n case 2:\n marker = 'composition';\n break;\n case 3:\n marker = 'dependency';\n break;\n default:\n marker = 'none';\n }\n return marker;\n}\n","import { select } from 'd3';\nimport dagre from 'dagre';\nimport graphlib from 'graphlib';\nimport { log } from '../../logger';\nimport classDb, { lookUpDomId } from './classDb';\nimport { parser } from './parser/classDiagram';\nimport svgDraw from './svgDraw';\nimport { configureSvgSize } from '../../utils';\n\nparser.yy = classDb;\n\nlet idCache = {};\nconst padding = 20;\n\nconst conf = {\n dividerMargin: 10,\n padding: 5,\n textHeight: 10,\n};\n\n// Todo optimize\nconst getGraphId = function (label) {\n const keys = Object.keys(idCache);\n\n for (let i = 0; i < keys.length; i++) {\n if (idCache[keys[i]].label === label) {\n return keys[i];\n }\n }\n\n return undefined;\n};\n\n/**\n * Setup arrow head and define the marker. The result is appended to the svg.\n */\nconst insertMarkers = function (elem) {\n elem\n .append('defs')\n .append('marker')\n .attr('id', 'extensionStart')\n .attr('class', 'extension')\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', 'extensionEnd')\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 elem\n .append('defs')\n .append('marker')\n .attr('id', 'compositionStart')\n .attr('class', 'extension')\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', 'compositionEnd')\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\n elem\n .append('defs')\n .append('marker')\n .attr('id', 'aggregationStart')\n .attr('class', 'extension')\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', 'aggregationEnd')\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\n elem\n .append('defs')\n .append('marker')\n .attr('id', 'dependencyStart')\n .attr('class', 'extension')\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', 'dependencyEnd')\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};\n\nexport const setConf = function (cnf) {\n const keys = Object.keys(cnf);\n\n keys.forEach(function (key) {\n conf[key] = cnf[key];\n });\n};\n\n/**\n * Draws a flowchart in the tag with id: id based on the graph definition in text.\n * @param text\n * @param id\n */\nexport const draw = function (text, id) {\n idCache = {};\n parser.yy.clear();\n parser.parse(text);\n\n log.info('Rendering diagram ' + text);\n\n // Fetch the default direction, use TD if none was found\n const diagram = select(`[id='${id}']`);\n diagram.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');\n insertMarkers(diagram);\n\n // Layout graph, Create a new directed graph\n const g = new graphlib.Graph({\n multigraph: true,\n });\n\n // Set an object for the graph label\n g.setGraph({\n isMultiGraph: true,\n });\n\n // Default to assigning a new object as a label for each new edge.\n g.setDefaultEdgeLabel(function () {\n return {};\n });\n\n const classes = classDb.getClasses();\n const keys = Object.keys(classes);\n\n for (let i = 0; i < keys.length; i++) {\n const classDef = classes[keys[i]];\n const node = svgDraw.drawClass(diagram, classDef, conf);\n idCache[node.id] = node;\n\n // Add nodes to the graph. The first argument is the node id. The second is\n // metadata about the node. In this case we're going to add labels to each of\n // our nodes.\n g.setNode(node.id, node);\n\n log.info('Org height: ' + node.height);\n }\n\n const relations = classDb.getRelations();\n relations.forEach(function (relation) {\n log.info(\n 'tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation)\n );\n g.setEdge(\n getGraphId(relation.id1),\n getGraphId(relation.id2),\n {\n relation: relation,\n },\n relation.title || 'DEFAULT'\n );\n });\n\n dagre.layout(g);\n g.nodes().forEach(function (v) {\n if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {\n log.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));\n select('#' + lookUpDomId(v)).attr(\n 'transform',\n 'translate(' +\n (g.node(v).x - g.node(v).width / 2) +\n ',' +\n (g.node(v).y - g.node(v).height / 2) +\n ' )'\n );\n }\n });\n\n g.edges().forEach(function (e) {\n if (typeof e !== 'undefined' && typeof g.edge(e) !== 'undefined') {\n log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));\n svgDraw.drawEdge(diagram, g.edge(e), g.edge(e).relation, conf);\n }\n });\n\n const svgBounds = diagram.node().getBBox();\n const width = svgBounds.width + padding * 2;\n const height = svgBounds.height + padding * 2;\n\n configureSvgSize(diagram, height, width, conf.useMaxWidth);\n\n // Ensure the viewBox includes the whole svgBounds area with extra space for padding\n const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;\n log.debug(`viewBox ${vBox}`);\n diagram.attr('viewBox', vBox);\n};\n\nexport default {\n setConf,\n draw,\n};\n","/* parser generated by jison 0.4.18 */\n/*\n Returns a Parser object of the following structure:\n\n Parser: {\n yy: {}\n }\n\n Parser.prototype: {\n yy: {},\n trace: function(),\n symbols_: {associative list: name ==> number},\n terminals_: {associative list: number ==> name},\n productions_: [...],\n performAction: function anonymous(yytext, yyleng, yylineno, yy, yystate, $$, _$),\n table: [...],\n defaultActions: {...},\n parseError: function(str, hash),\n parse: function(input),\n\n lexer: {\n EOF: 1,\n parseError: function(str, hash),\n setInput: function(input),\n input: function(),\n unput: function(str),\n more: function(),\n less: function(n),\n pastInput: function(),\n upcomingInput: function(),\n showPosition: function(),\n test_match: function(regex_match_array, rule_index),\n next: function(),\n lex: function(),\n begin: function(condition),\n popState: function(),\n _currentRules: function(),\n topState: function(),\n pushState: function(condition),\n\n options: {\n ranges: boolean (optional: true ==> token location info will include a .range[] member)\n flex: boolean (optional: true ==> flex-like lexing behaviour where the rules are tested exhaustively to find the longest match)\n backtrack_lexer: boolean (optional: true ==> lexer regexes are tested in order and for each matching regex the action code is invoked; the lexer terminates the scan when a token is returned by the action code)\n },\n\n performAction: function(yy, yy_, $avoiding_name_collisions, YY_START),\n rules: [...],\n conditions: {associative list: name ==> set},\n }\n }\n\n\n token location info (@$, _$, etc.): {\n first_line: n,\n last_line: n,\n first_column: n,\n last_column: n,\n range: [start_number, end_number] (where the numbers are indexes into the input string, regular zero-based)\n }\n\n\n the parseError function receives a 'hash' object with these members for lexer and parser errors: {\n text: (matched text)\n token: (the produced terminal token, if any)\n line: (yylineno)\n }\n while parser (grammar) errors will also provide these members, i.e. parser errors deliver a superset of attributes: {\n loc: (yylloc)\n expected: (string describing the set of expected tokens)\n recoverable: (boolean: TRUE when the parser has a error recovery rule available for this particular error)\n }\n*/\nvar parser = (function(){\nvar o=function(k,v,o,l){for(o=o||{},l=k.length;l--;o[k[l]]=v);return o},$V0=[1,6],$V1=[1,7],$V2=[1,8],$V3=[1,9],$V4=[1,12],$V5=[1,11],$V6=[1,15,24],$V7=[1,19],$V8=[1,31],$V9=[1,34],$Va=[1,32],$Vb=[1,33],$Vc=[1,35],$Vd=[1,36],$Ve=[1,37],$Vf=[1,38],$Vg=[1,41],$Vh=[1,42],$Vi=[1,43],$Vj=[1,44],$Vk=[15,24],$Vl=[1,56],$Vm=[1,57],$Vn=[1,58],$Vo=[1,59],$Vp=[1,60],$Vq=[1,61],$Vr=[15,24,31,38,39,47,50,51,52,53,54,55,60,62],$Vs=[15,24,29,31,38,39,43,47,50,51,52,53,54,55,60,62,77,78,79,80],$Vt=[7,8,9,10,15,18,22,24],$Vu=[47,77,78,79,80],$Vv=[47,54,55,77,78,79,80],$Vw=[47,50,51,52,53,77,78,79,80],$Vx=[15,24,31],$Vy=[1,93];\nvar parser = {trace: function trace () { },\nyy: {},\nsymbols_: {\"error\":2,\"start\":3,\"mermaidDoc\":4,\"direction\":5,\"directive\":6,\"direction_tb\":7,\"direction_bt\":8,\"direction_rl\":9,\"direction_lr\":10,\"graphConfig\":11,\"openDirective\":12,\"typeDirective\":13,\"closeDirective\":14,\"NEWLINE\":15,\":\":16,\"argDirective\":17,\"open_directive\":18,\"type_directive\":19,\"arg_directive\":20,\"close_directive\":21,\"CLASS_DIAGRAM\":22,\"statements\":23,\"EOF\":24,\"statement\":25,\"className\":26,\"alphaNumToken\":27,\"classLiteralName\":28,\"GENERICTYPE\":29,\"relationStatement\":30,\"LABEL\":31,\"classStatement\":32,\"methodStatement\":33,\"annotationStatement\":34,\"clickStatement\":35,\"cssClassStatement\":36,\"CLASS\":37,\"STYLE_SEPARATOR\":38,\"STRUCT_START\":39,\"members\":40,\"STRUCT_STOP\":41,\"ANNOTATION_START\":42,\"ANNOTATION_END\":43,\"MEMBER\":44,\"SEPARATOR\":45,\"relation\":46,\"STR\":47,\"relationType\":48,\"lineType\":49,\"AGGREGATION\":50,\"EXTENSION\":51,\"COMPOSITION\":52,\"DEPENDENCY\":53,\"LINE\":54,\"DOTTED_LINE\":55,\"CALLBACK\":56,\"LINK\":57,\"LINK_TARGET\":58,\"CLICK\":59,\"CALLBACK_NAME\":60,\"CALLBACK_ARGS\":61,\"HREF\":62,\"CSSCLASS\":63,\"commentToken\":64,\"textToken\":65,\"graphCodeTokens\":66,\"textNoTagsToken\":67,\"TAGSTART\":68,\"TAGEND\":69,\"==\":70,\"--\":71,\"PCT\":72,\"DEFAULT\":73,\"SPACE\":74,\"MINUS\":75,\"keywords\":76,\"UNICODE_TEXT\":77,\"NUM\":78,\"ALPHA\":79,\"BQUOTE_STR\":80,\"$accept\":0,\"$end\":1},\nterminals_: {2:\"error\",7:\"direction_tb\",8:\"direction_bt\",9:\"direction_rl\",10:\"direction_lr\",15:\"NEWLINE\",16:\":\",18:\"open_directive\",19:\"type_directive\",20:\"arg_directive\",21:\"close_directive\",22:\"CLASS_DIAGRAM\",24:\"EOF\",29:\"GENERICTYPE\",31:\"LABEL\",37:\"CLASS\",38:\"STYLE_SEPARATOR\",39:\"STRUCT_START\",41:\"STRUCT_STOP\",42:\"ANNOTATION_START\",43:\"ANNOTATION_END\",44:\"MEMBER\",45:\"SEPARATOR\",47:\"STR\",50:\"AGGREGATION\",51:\"EXTENSION\",52:\"COMPOSITION\",53:\"DEPENDENCY\",54:\"LINE\",55:\"DOTTED_LINE\",56:\"CALLBACK\",57:\"LINK\",58:\"LINK_TARGET\",59:\"CLICK\",60:\"CALLBACK_NAME\",61:\"CALLBACK_ARGS\",62:\"HREF\",63:\"CSSCLASS\",66:\"graphCodeTokens\",68:\"TAGSTART\",69:\"TAGEND\",70:\"==\",71:\"--\",72:\"PCT\",73:\"DEFAULT\",74:\"SPACE\",75:\"MINUS\",76:\"keywords\",77:\"UNICODE_TEXT\",78:\"NUM\",79:\"ALPHA\",80:\"BQUOTE_STR\"},\nproductions_: [0,[3,1],[3,1],[3,2],[5,1],[5,1],[5,1],[5,1],[4,1],[6,4],[6,6],[12,1],[13,1],[17,1],[14,1],[11,4],[23,1],[23,2],[23,3],[26,1],[26,1],[26,2],[26,2],[26,2],[25,1],[25,2],[25,1],[25,1],[25,1],[25,1],[25,1],[25,1],[25,1],[32,2],[32,4],[32,5],[32,7],[34,4],[40,1],[40,2],[33,1],[33,2],[33,1],[33,1],[30,3],[30,4],[30,4],[30,5],[46,3],[46,2],[46,2],[46,1],[48,1],[48,1],[48,1],[48,1],[49,1],[49,1],[35,3],[35,4],[35,3],[35,4],[35,4],[35,5],[35,3],[35,4],[35,4],[35,5],[35,3],[35,4],[35,4],[35,5],[36,3],[64,1],[64,1],[65,1],[65,1],[65,1],[65,1],[65,1],[65,1],[65,1],[67,1],[67,1],[67,1],[67,1],[27,1],[27,1],[27,1],[28,1]],\nperformAction: function anonymous(yytext, yyleng, yylineno, yy, yystate /* action[1] */, $$ /* vstack */, _$ /* lstack */) {\n/* this == yyval */\n\nvar $0 = $$.length - 1;\nswitch (yystate) {\ncase 4:\n yy.setDirection('TB');\nbreak;\ncase 5:\n yy.setDirection('BT');\nbreak;\ncase 6:\n yy.setDirection('RL');\nbreak;\ncase 7:\n yy.setDirection('LR');\nbreak;\ncase 11:\n yy.parseDirective('%%{', 'open_directive'); \nbreak;\ncase 12:\n yy.parseDirective($$[$0], 'type_directive'); \nbreak;\ncase 13:\n $$[$0] = $$[$0].trim().replace(/'/g, '\"'); yy.parseDirective($$[$0], 'arg_directive'); \nbreak;\ncase 14:\n yy.parseDirective('}%%', 'close_directive', 'class'); \nbreak;\ncase 19: case 20:\n this.$=$$[$0]; \nbreak;\ncase 21:\n this.$=$$[$0-1]+$$[$0]; \nbreak;\ncase 22: case 23:\n this.$=$$[$0-1]+'~'+$$[$0]; \nbreak;\ncase 24:\n yy.addRelation($$[$0]); \nbreak;\ncase 25:\n $$[$0-1].title = yy.cleanupLabel($$[$0]); yy.addRelation($$[$0-1]); \nbreak;\ncase 33:\nyy.addClass($$[$0]);\nbreak;\ncase 34:\nyy.addClass($$[$0-2]);yy.setCssClass($$[$0-2], $$[$0]);\nbreak;\ncase 35:\n/*console.log($$[$0-3],JSON.stringify($$[$0-1]));*/yy.addClass($$[$0-3]);yy.addMembers($$[$0-3],$$[$0-1]);\nbreak;\ncase 36:\nyy.addClass($$[$0-5]);yy.setCssClass($$[$0-5], $$[$0-3]);yy.addMembers($$[$0-5],$$[$0-1]);\nbreak;\ncase 37:\n yy.addAnnotation($$[$0],$$[$0-2]); \nbreak;\ncase 38:\n this.$ = [$$[$0]]; \nbreak;\ncase 39:\n $$[$0].push($$[$0-1]);this.$=$$[$0];\nbreak;\ncase 40:\n/*console.log('Rel found',$$[$0]);*/\nbreak;\ncase 41:\nyy.addMember($$[$0-1],yy.cleanupLabel($$[$0]));\nbreak;\ncase 42:\n/*console.warn('Member',$$[$0]);*/\nbreak;\ncase 43:\n/*console.log('sep found',$$[$0]);*/\nbreak;\ncase 44:\n this.$ = {'id1':$$[$0-2],'id2':$$[$0], relation:$$[$0-1], relationTitle1:'none', relationTitle2:'none'}; \nbreak;\ncase 45:\n this.$ = {id1:$$[$0-3], id2:$$[$0], relation:$$[$0-1], relationTitle1:$$[$0-2], relationTitle2:'none'}\nbreak;\ncase 46:\n this.$ = {id1:$$[$0-3], id2:$$[$0], relation:$$[$0-2], relationTitle1:'none', relationTitle2:$$[$0-1]}; \nbreak;\ncase 47:\n this.$ = {id1:$$[$0-4], id2:$$[$0], relation:$$[$0-2], relationTitle1:$$[$0-3], relationTitle2:$$[$0-1]} \nbreak;\ncase 48:\n this.$={type1:$$[$0-2],type2:$$[$0],lineType:$$[$0-1]}; \nbreak;\ncase 49:\n this.$={type1:'none',type2:$$[$0],lineType:$$[$0-1]}; \nbreak;\ncase 50:\n this.$={type1:$$[$0-1],type2:'none',lineType:$$[$0]}; \nbreak;\ncase 51:\n this.$={type1:'none',type2:'none',lineType:$$[$0]}; \nbreak;\ncase 52:\n this.$=yy.relationType.AGGREGATION;\nbreak;\ncase 53:\n this.$=yy.relationType.EXTENSION;\nbreak;\ncase 54:\n this.$=yy.relationType.COMPOSITION;\nbreak;\ncase 55:\n this.$=yy.relationType.DEPENDENCY;\nbreak;\ncase 56:\nthis.$=yy.lineType.LINE;\nbreak;\ncase 57:\nthis.$=yy.lineType.DOTTED_LINE;\nbreak;\ncase 58: case 64:\nthis.$ = $$[$0-2];yy.setClickEvent($$[$0-1], $$[$0]);\nbreak;\ncase 59: case 65:\nthis.$ = $$[$0-3];yy.setClickEvent($$[$0-2], $$[$0-1]);yy.setTooltip($$[$0-2], $$[$0]);\nbreak;\ncase 60: case 68:\nthis.$ = $$[$0-2];yy.setLink($$[$0-1], $$[$0]);\nbreak;\ncase 61:\nthis.$ = $$[$0-3];yy.setLink($$[$0-2], $$[$0-1],$$[$0]);\nbreak;\ncase 62: case 70:\nthis.$ = $$[$0-3];yy.setLink($$[$0-2], $$[$0-1]);yy.setTooltip($$[$0-2], $$[$0]);\nbreak;\ncase 63: case 71:\nthis.$ = $$[$0-4];yy.setLink($$[$0-3], $$[$0-2], $$[$0]);yy.setTooltip($$[$0-3], $$[$0-1]);\nbreak;\ncase 66:\nthis.$ = $$[$0-3];yy.setClickEvent($$[$0-2], $$[$0-1], $$[$0]);\nbreak;\ncase 67:\nthis.$ = $$[$0-4];yy.setClickEvent($$[$0-3], $$[$0-2], $$[$0-1]);yy.setTooltip($$[$0-3], $$[$0]);\nbreak;\ncase 69:\nthis.$ = $$[$0-3];yy.setLink($$[$0-2], $$[$0-1], $$[$0]);\nbreak;\ncase 72:\nyy.setCssClass($$[$0-1], $$[$0]);\nbreak;\n}\n},\ntable: [{3:1,4:2,5:3,6:4,7:$V0,8:$V1,9:$V2,10:$V3,11:5,12:10,18:$V4,22:$V5},{1:[3]},{1:[2,1]},{1:[2,2]},{3:13,4:2,5:3,6:4,7:$V0,8:$V1,9:$V2,10:$V3,11:5,12:10,18:$V4,22:$V5},{1:[2,8]},o($V6,[2,4]),o($V6,[2,5]),o($V6,[2,6]),o($V6,[2,7]),{13:14,19:[1,15]},{15:[1,16]},{19:[2,11]},{1:[2,3]},{14:17,16:[1,18],21:$V7},o([16,21],[2,12]),{5:29,6:28,7:$V0,8:$V1,9:$V2,10:$V3,12:10,18:$V4,23:20,25:21,26:30,27:39,28:40,30:22,32:23,33:24,34:25,35:26,36:27,37:$V8,42:$V9,44:$Va,45:$Vb,56:$Vc,57:$Vd,59:$Ve,63:$Vf,77:$Vg,78:$Vh,79:$Vi,80:$Vj},{15:[1,45]},{17:46,20:[1,47]},{15:[2,14]},{24:[1,48]},{15:[1,49],24:[2,16]},o($Vk,[2,24],{31:[1,50]}),o($Vk,[2,26]),o($Vk,[2,27]),o($Vk,[2,28]),o($Vk,[2,29]),o($Vk,[2,30]),o($Vk,[2,31]),o($Vk,[2,32]),o($Vk,[2,40],{46:51,48:54,49:55,31:[1,53],47:[1,52],50:$Vl,51:$Vm,52:$Vn,53:$Vo,54:$Vp,55:$Vq}),{26:62,27:39,28:40,77:$Vg,78:$Vh,79:$Vi,80:$Vj},o($Vk,[2,42]),o($Vk,[2,43]),{27:63,77:$Vg,78:$Vh,79:$Vi},{26:64,27:39,28:40,77:$Vg,78:$Vh,79:$Vi,80:$Vj},{26:65,27:39,28:40,77:$Vg,78:$Vh,79:$Vi,80:$Vj},{26:66,27:39,28:40,77:$Vg,78:$Vh,79:$Vi,80:$Vj},{47:[1,67]},o($Vr,[2,19],{27:39,28:40,26:68,29:[1,69],77:$Vg,78:$Vh,79:$Vi,80:$Vj}),o($Vr,[2,20],{29:[1,70]}),o($Vs,[2,86]),o($Vs,[2,87]),o($Vs,[2,88]),o([15,24,29,31,38,39,47,50,51,52,53,54,55,60,62],[2,89]),o($Vt,[2,9]),{14:71,21:$V7},{21:[2,13]},{1:[2,15]},{5:29,6:28,7:$V0,8:$V1,9:$V2,10:$V3,12:10,18:$V4,23:72,24:[2,17],25:21,26:30,27:39,28:40,30:22,32:23,33:24,34:25,35:26,36:27,37:$V8,42:$V9,44:$Va,45:$Vb,56:$Vc,57:$Vd,59:$Ve,63:$Vf,77:$Vg,78:$Vh,79:$Vi,80:$Vj},o($Vk,[2,25]),{26:73,27:39,28:40,47:[1,74],77:$Vg,78:$Vh,79:$Vi,80:$Vj},{46:75,48:54,49:55,50:$Vl,51:$Vm,52:$Vn,53:$Vo,54:$Vp,55:$Vq},o($Vk,[2,41]),{49:76,54:$Vp,55:$Vq},o($Vu,[2,51],{48:77,50:$Vl,51:$Vm,52:$Vn,53:$Vo}),o($Vv,[2,52]),o($Vv,[2,53]),o($Vv,[2,54]),o($Vv,[2,55]),o($Vw,[2,56]),o($Vw,[2,57]),o($Vk,[2,33],{38:[1,78],39:[1,79]}),{43:[1,80]},{47:[1,81]},{47:[1,82]},{60:[1,83],62:[1,84]},{27:85,77:$Vg,78:$Vh,79:$Vi},o($Vr,[2,21]),o($Vr,[2,22]),o($Vr,[2,23]),{15:[1,86]},{24:[2,18]},o($Vx,[2,44]),{26:87,27:39,28:40,77:$Vg,78:$Vh,79:$Vi,80:$Vj},{26:88,27:39,28:40,47:[1,89],77:$Vg,78:$Vh,79:$Vi,80:$Vj},o($Vu,[2,50],{48:90,50:$Vl,51:$Vm,52:$Vn,53:$Vo}),o($Vu,[2,49]),{27:91,77:$Vg,78:$Vh,79:$Vi},{40:92,44:$Vy},{26:94,27:39,28:40,77:$Vg,78:$Vh,79:$Vi,80:$Vj},o($Vk,[2,58],{47:[1,95]}),o($Vk,[2,60],{47:[1,97],58:[1,96]}),o($Vk,[2,64],{47:[1,98],61:[1,99]}),o($Vk,[2,68],{47:[1,101],58:[1,100]}),o($Vk,[2,72]),o($Vt,[2,10]),o($Vx,[2,46]),o($Vx,[2,45]),{26:102,27:39,28:40,77:$Vg,78:$Vh,79:$Vi,80:$Vj},o($Vu,[2,48]),o($Vk,[2,34],{39:[1,103]}),{41:[1,104]},{40:105,41:[2,38],44:$Vy},o($Vk,[2,37]),o($Vk,[2,59]),o($Vk,[2,61]),o($Vk,[2,62],{58:[1,106]}),o($Vk,[2,65]),o($Vk,[2,66],{47:[1,107]}),o($Vk,[2,69]),o($Vk,[2,70],{58:[1,108]}),o($Vx,[2,47]),{40:109,44:$Vy},o($Vk,[2,35]),{41:[2,39]},o($Vk,[2,63]),o($Vk,[2,67]),o($Vk,[2,71]),{41:[1,110]},o($Vk,[2,36])],\ndefaultActions: {2:[2,1],3:[2,2],5:[2,8],12:[2,11],13:[2,3],19:[2,14],47:[2,13],48:[2,15],72:[2,18],105:[2,39]},\nparseError: function parseError (str, hash) {\n if (hash.recoverable) {\n this.trace(str);\n } else {\n var error = new Error(str);\n error.hash = hash;\n throw error;\n }\n},\nparse: function parse(input) {\n var self = this, stack = [0], tstack = [], vstack = [null], lstack = [], table = this.table, yytext = '', yylineno = 0, yyleng = 0, recovering = 0, TERROR = 2, EOF = 1;\n var args = lstack.slice.call(arguments, 1);\n var lexer = Object.create(this.lexer);\n var sharedState = { yy: {} };\n for (var k in this.yy) {\n if (Object.prototype.hasOwnProperty.call(this.yy, k)) {\n sharedState.yy[k] = this.yy[k];\n }\n }\n lexer.setInput(input, sharedState.yy);\n sharedState.yy.lexer = lexer;\n sharedState.yy.parser = this;\n if (typeof lexer.yylloc == 'undefined') {\n lexer.yylloc = {};\n }\n var yyloc = lexer.yylloc;\n lstack.push(yyloc);\n var ranges = lexer.options && lexer.options.ranges;\n if (typeof sharedState.yy.parseError === 'function') {\n this.parseError = sharedState.yy.parseError;\n } else {\n this.parseError = Object.getPrototypeOf(this).parseError;\n }\n function popStack(n) {\n stack.length = stack.length - 2 * n;\n vstack.length = vstack.length - n;\n lstack.length = lstack.length - n;\n }\n function lex() {\n var token;\n token = tstack.pop() || lexer.lex() || EOF;\n if (typeof token !== 'number') {\n if (token instanceof Array) {\n tstack = token;\n token = tstack.pop();\n }\n token = self.symbols_[token] || token;\n }\n return token;\n }\n var symbol, preErrorSymbol, state, action, a, r, yyval = {}, p, len, newState, expected;\n while (true) {\n state = stack[stack.length - 1];\n if (this.defaultActions[state]) {\n action = this.defaultActions[state];\n } else {\n if (symbol === null || typeof symbol == 'undefined') {\n symbol = lex();\n }\n action = table[state] && table[state][symbol];\n }\n if (typeof action === 'undefined' || !action.length || !action[0]) {\n var errStr = '';\n expected = [];\n for (p in table[state]) {\n if (this.terminals_[p] && p > TERROR) {\n expected.push('\\'' + this.terminals_[p] + '\\'');\n }\n }\n if (lexer.showPosition) {\n errStr = 'Parse error on line ' + (yylineno + 1) + ':\\n' + lexer.showPosition() + '\\nExpecting ' + expected.join(', ') + ', got \\'' + (this.terminals_[symbol] || symbol) + '\\'';\n } else {\n errStr = 'Parse error on line ' + (yylineno + 1) + ': Unexpected ' + (symbol == EOF ? 'end of input' : '\\'' + (this.terminals_[symbol] || symbol) + '\\'');\n }\n this.parseError(errStr, {\n text: lexer.match,\n token: this.terminals_[symbol] || symbol,\n line: lexer.yylineno,\n loc: yyloc,\n expected: expected\n });\n }\n if (action[0] instanceof Array && action.length > 1) {\n throw new Error('Parse Error: multiple actions possible at state: ' + state + ', token: ' + symbol);\n }\n switch (action[0]) {\n case 1:\n stack.push(symbol);\n vstack.push(lexer.yytext);\n lstack.push(lexer.yylloc);\n stack.push(action[1]);\n symbol = null;\n if (!preErrorSymbol) {\n yyleng = lexer.yyleng;\n yytext = lexer.yytext;\n yylineno = lexer.yylineno;\n yyloc = lexer.yylloc;\n if (recovering > 0) {\n recovering--;\n }\n } else {\n symbol = preErrorSymbol;\n preErrorSymbol = null;\n }\n break;\n case 2:\n len = this.productions_[action[1]][1];\n yyval.$ = vstack[vstack.length - len];\n yyval._$ = {\n first_line: lstack[lstack.length - (len || 1)].first_line,\n last_line: lstack[lstack.length - 1].last_line,\n first_column: lstack[lstack.length - (len || 1)].first_column,\n last_column: lstack[lstack.length - 1].last_column\n };\n if (ranges) {\n yyval._$.range = [\n lstack[lstack.length - (len || 1)].range[0],\n lstack[lstack.length - 1].range[1]\n ];\n }\n r = this.performAction.apply(yyval, [\n yytext,\n yyleng,\n yylineno,\n sharedState.yy,\n action[1],\n vstack,\n lstack\n ].concat(args));\n if (typeof r !== 'undefined') {\n return r;\n }\n if (len) {\n stack = stack.slice(0, -1 * len * 2);\n vstack = vstack.slice(0, -1 * len);\n lstack = lstack.slice(0, -1 * len);\n }\n stack.push(this.productions_[action[1]][0]);\n vstack.push(yyval.$);\n lstack.push(yyval._$);\n newState = table[stack[stack.length - 2]][stack[stack.length - 1]];\n stack.push(newState);\n break;\n case 3:\n return true;\n }\n }\n return true;\n}};\n\n/* generated by jison-lex 0.3.4 */\nvar lexer = (function(){\nvar lexer = ({\n\nEOF:1,\n\nparseError:function parseError(str, hash) {\n if (this.yy.parser) {\n this.yy.parser.parseError(str, hash);\n } else {\n throw new Error(str);\n }\n },\n\n// resets the lexer, sets new input\nsetInput:function (input, yy) {\n this.yy = yy || this.yy || {};\n this._input = input;\n this._more = this._backtrack = this.done = false;\n this.yylineno = this.yyleng = 0;\n this.yytext = this.matched = this.match = '';\n this.conditionStack = ['INITIAL'];\n this.yylloc = {\n first_line: 1,\n first_column: 0,\n last_line: 1,\n last_column: 0\n };\n if (this.options.ranges) {\n this.yylloc.range = [0,0];\n }\n this.offset = 0;\n return this;\n },\n\n// consumes and returns one char from the input\ninput:function () {\n var ch = this._input[0];\n this.yytext += ch;\n this.yyleng++;\n this.offset++;\n this.match += ch;\n this.matched += ch;\n var lines = ch.match(/(?:\\r\\n?|\\n).*/g);\n if (lines) {\n this.yylineno++;\n this.yylloc.last_line++;\n } else {\n this.yylloc.last_column++;\n }\n if (this.options.ranges) {\n this.yylloc.range[1]++;\n }\n\n this._input = this._input.slice(1);\n return ch;\n },\n\n// unshifts one char (or a string) into the input\nunput:function (ch) {\n var len = ch.length;\n var lines = ch.split(/(?:\\r\\n?|\\n)/g);\n\n this._input = ch + this._input;\n this.yytext = this.yytext.substr(0, this.yytext.length - len);\n //this.yyleng -= len;\n this.offset -= len;\n var oldLines = this.match.split(/(?:\\r\\n?|\\n)/g);\n this.match = this.match.substr(0, this.match.length - 1);\n this.matched = this.matched.substr(0, this.matched.length - 1);\n\n if (lines.length - 1) {\n this.yylineno -= lines.length - 1;\n }\n var r = this.yylloc.range;\n\n this.yylloc = {\n first_line: this.yylloc.first_line,\n last_line: this.yylineno + 1,\n first_column: this.yylloc.first_column,\n last_column: lines ?\n (lines.length === oldLines.length ? this.yylloc.first_column : 0)\n + oldLines[oldLines.length - lines.length].length - lines[0].length :\n this.yylloc.first_column - len\n };\n\n if (this.options.ranges) {\n this.yylloc.range = [r[0], r[0] + this.yyleng - len];\n }\n this.yyleng = this.yytext.length;\n return this;\n },\n\n// When called from action, caches matched text and appends it on next action\nmore:function () {\n this._more = true;\n return this;\n },\n\n// When called from action, signals the lexer that this rule fails to match the input, so the next matching rule (regex) should be tested instead.\nreject:function () {\n if (this.options.backtrack_lexer) {\n this._backtrack = true;\n } else {\n return this.parseError('Lexical error on line ' + (this.yylineno + 1) + '. You can only invoke reject() in the lexer when the lexer is of the backtracking persuasion (options.backtrack_lexer = true).\\n' + this.showPosition(), {\n text: \"\",\n token: null,\n line: this.yylineno\n });\n\n }\n return this;\n },\n\n// retain first n characters of the match\nless:function (n) {\n this.unput(this.match.slice(n));\n },\n\n// displays already matched input, i.e. for error messages\npastInput:function () {\n var past = this.matched.substr(0, this.matched.length - this.match.length);\n return (past.length > 20 ? '...':'') + past.substr(-20).replace(/\\n/g, \"\");\n },\n\n// displays upcoming input, i.e. for error messages\nupcomingInput:function () {\n var next = this.match;\n if (next.length < 20) {\n next += this._input.substr(0, 20-next.length);\n }\n return (next.substr(0,20) + (next.length > 20 ? '...' : '')).replace(/\\n/g, \"\");\n },\n\n// displays the character position where the lexing error occurred, i.e. for error messages\nshowPosition:function () {\n var pre = this.pastInput();\n var c = new Array(pre.length + 1).join(\"-\");\n return pre + this.upcomingInput() + \"\\n\" + c + \"^\";\n },\n\n// test the lexed token: return FALSE when not a match, otherwise return token\ntest_match:function(match, indexed_rule) {\n var token,\n lines,\n backup;\n\n if (this.options.backtrack_lexer) {\n // save context\n backup = {\n yylineno: this.yylineno,\n yylloc: {\n first_line: this.yylloc.first_line,\n last_line: this.last_line,\n first_column: this.yylloc.first_column,\n last_column: this.yylloc.last_column\n },\n yytext: this.yytext,\n match: this.match,\n matches: this.matches,\n matched: this.matched,\n yyleng: this.yyleng,\n offset: this.offset,\n _more: this._more,\n _input: this._input,\n yy: this.yy,\n conditionStack: this.conditionStack.slice(0),\n done: this.done\n };\n if (this.options.ranges) {\n backup.yylloc.range = this.yylloc.range.slice(0);\n }\n }\n\n lines = match[0].match(/(?:\\r\\n?|\\n).*/g);\n if (lines) {\n this.yylineno += lines.length;\n }\n this.yylloc = {\n first_line: this.yylloc.last_line,\n last_line: this.yylineno + 1,\n first_column: this.yylloc.last_column,\n last_column: lines ?\n lines[lines.length - 1].length - lines[lines.length - 1].match(/\\r?\\n?/)[0].length :\n this.yylloc.last_column + match[0].length\n };\n this.yytext += match[0];\n this.match += match[0];\n this.matches = match;\n this.yyleng = this.yytext.length;\n if (this.options.ranges) {\n this.yylloc.range = [this.offset, this.offset += this.yyleng];\n }\n this._more = false;\n this._backtrack = false;\n this._input = this._input.slice(match[0].length);\n this.matched += match[0];\n token = this.performAction.call(this, this.yy, this, indexed_rule, this.conditionStack[this.conditionStack.length - 1]);\n if (this.done && this._input) {\n this.done = false;\n }\n if (token) {\n return token;\n } else if (this._backtrack) {\n // recover context\n for (var k in backup) {\n this[k] = backup[k];\n }\n return false; // rule action called reject() implying the next rule should be tested instead.\n }\n return false;\n },\n\n// return next match in input\nnext:function () {\n if (this.done) {\n return this.EOF;\n }\n if (!this._input) {\n this.done = true;\n }\n\n var token,\n match,\n tempMatch,\n index;\n if (!this._more) {\n this.yytext = '';\n this.match = '';\n }\n var rules = this._currentRules();\n for (var i = 0; i < rules.length; i++) {\n tempMatch = this._input.match(this.rules[rules[i]]);\n if (tempMatch && (!match || tempMatch[0].length > match[0].length)) {\n match = tempMatch;\n index = i;\n if (this.options.backtrack_lexer) {\n token = this.test_match(tempMatch, rules[i]);\n if (token !== false) {\n return token;\n } else if (this._backtrack) {\n match = false;\n continue; // rule action called reject() implying a rule MISmatch.\n } else {\n // else: this is a lexer rule which consumes input without producing a token (e.g. whitespace)\n return false;\n }\n } else if (!this.options.flex) {\n break;\n }\n }\n }\n if (match) {\n token = this.test_match(match, rules[index]);\n if (token !== false) {\n return token;\n }\n // else: this is a lexer rule which consumes input without producing a token (e.g. whitespace)\n return false;\n }\n if (this._input === \"\") {\n return this.EOF;\n } else {\n return this.parseError('Lexical error on line ' + (this.yylineno + 1) + '. Unrecognized text.\\n' + this.showPosition(), {\n text: \"\",\n token: null,\n line: this.yylineno\n });\n }\n },\n\n// return next match that has a token\nlex:function lex () {\n var r = this.next();\n if (r) {\n return r;\n } else {\n return this.lex();\n }\n },\n\n// activates a new lexer condition state (pushes the new lexer condition state onto the condition stack)\nbegin:function begin (condition) {\n this.conditionStack.push(condition);\n },\n\n// pop the previously active lexer condition state off the condition stack\npopState:function popState () {\n var n = this.conditionStack.length - 1;\n if (n > 0) {\n return this.conditionStack.pop();\n } else {\n return this.conditionStack[0];\n }\n },\n\n// produce the lexer rule set which is active for the currently active lexer condition state\n_currentRules:function _currentRules () {\n if (this.conditionStack.length && this.conditionStack[this.conditionStack.length - 1]) {\n return this.conditions[this.conditionStack[this.conditionStack.length - 1]].rules;\n } else {\n return this.conditions[\"INITIAL\"].rules;\n }\n },\n\n// return the currently active lexer condition state; when an index argument is provided it produces the N-th previous condition state, if available\ntopState:function topState (n) {\n n = this.conditionStack.length - 1 - Math.abs(n || 0);\n if (n >= 0) {\n return this.conditionStack[n];\n } else {\n return \"INITIAL\";\n }\n },\n\n// alias for begin(condition)\npushState:function pushState (condition) {\n this.begin(condition);\n },\n\n// return the number of states currently on the stack\nstateStackSize:function stateStackSize() {\n return this.conditionStack.length;\n },\noptions: {},\nperformAction: function anonymous(yy,yy_,$avoiding_name_collisions,YY_START) {\nvar YYSTATE=YY_START;\nswitch($avoiding_name_collisions) {\ncase 0: this.begin('open_directive'); return 18; \nbreak;\ncase 1:return 7;\nbreak;\ncase 2:return 8;\nbreak;\ncase 3:return 9;\nbreak;\ncase 4:return 10;\nbreak;\ncase 5: this.begin('type_directive'); return 19; \nbreak;\ncase 6: this.popState(); this.begin('arg_directive'); return 16; \nbreak;\ncase 7: this.popState(); this.popState(); return 21; \nbreak;\ncase 8:return 20;\nbreak;\ncase 9:/* skip comments */\nbreak;\ncase 10:/* skip comments */\nbreak;\ncase 11:return 15;\nbreak;\ncase 12:/* skip whitespace */\nbreak;\ncase 13:return 22;\nbreak;\ncase 14:return 22;\nbreak;\ncase 15: this.begin(\"struct\"); /*console.log('Starting struct');*/ return 39;\nbreak;\ncase 16:return \"EOF_IN_STRUCT\";\nbreak;\ncase 17:return \"OPEN_IN_STRUCT\";\nbreak;\ncase 18: /*console.log('Ending struct');*/this.popState(); return 41;\nbreak;\ncase 19:/* nothing */\nbreak;\ncase 20: /*console.log('lex-member: ' + yy_.yytext);*/ return \"MEMBER\";\nbreak;\ncase 21:return 37;\nbreak;\ncase 22:return 63;\nbreak;\ncase 23:return 56;\nbreak;\ncase 24:return 57;\nbreak;\ncase 25:return 59;\nbreak;\ncase 26:return 42;\nbreak;\ncase 27:return 43;\nbreak;\ncase 28:this.begin(\"generic\");\nbreak;\ncase 29:this.popState();\nbreak;\ncase 30:return \"GENERICTYPE\";\nbreak;\ncase 31:this.begin(\"string\");\nbreak;\ncase 32:this.popState();\nbreak;\ncase 33:return \"STR\";\nbreak;\ncase 34:this.begin(\"bqstring\");\nbreak;\ncase 35:this.popState();\nbreak;\ncase 36:return \"BQUOTE_STR\";\nbreak;\ncase 37:this.begin(\"href\");\nbreak;\ncase 38:this.popState();\nbreak;\ncase 39:return 62;\nbreak;\ncase 40:this.begin(\"callback_name\");\nbreak;\ncase 41:this.popState();\nbreak;\ncase 42:this.popState(); this.begin(\"callback_args\");\nbreak;\ncase 43:return 60;\nbreak;\ncase 44:this.popState();\nbreak;\ncase 45:return 61;\nbreak;\ncase 46:return 58;\nbreak;\ncase 47:return 58;\nbreak;\ncase 48:return 58;\nbreak;\ncase 49:return 58;\nbreak;\ncase 50:return 51;\nbreak;\ncase 51:return 51;\nbreak;\ncase 52:return 53;\nbreak;\ncase 53:return 53;\nbreak;\ncase 54:return 52;\nbreak;\ncase 55:return 50;\nbreak;\ncase 56:return 54;\nbreak;\ncase 57:return 55;\nbreak;\ncase 58:return 31;\nbreak;\ncase 59:return 38;\nbreak;\ncase 60:return 75;\nbreak;\ncase 61:return 'DOT';\nbreak;\ncase 62:return 'PLUS';\nbreak;\ncase 63:return 72;\nbreak;\ncase 64:return 'EQUALS';\nbreak;\ncase 65:return 'EQUALS';\nbreak;\ncase 66:return 79;\nbreak;\ncase 67:return 'PUNCTUATION';\nbreak;\ncase 68:return 78;\nbreak;\ncase 69:return 77;\nbreak;\ncase 70:return 74;\nbreak;\ncase 71:return 24;\nbreak;\n}\n},\nrules: [/^(?:%%\\{)/,/^(?:.*direction\\s+TB[^\\n]*)/,/^(?:.*direction\\s+BT[^\\n]*)/,/^(?:.*direction\\s+RL[^\\n]*)/,/^(?:.*direction\\s+LR[^\\n]*)/,/^(?:((?:(?!\\}%%)[^:.])*))/,/^(?::)/,/^(?:\\}%%)/,/^(?:((?:(?!\\}%%).|\\n)*))/,/^(?:%%(?!\\{)*[^\\n]*(\\r?\\n?)+)/,/^(?:%%[^\\n]*(\\r?\\n)*)/,/^(?:\\s*(\\r?\\n)+)/,/^(?:\\s+)/,/^(?:classDiagram-v2\\b)/,/^(?:classDiagram\\b)/,/^(?:[{])/,/^(?:$)/,/^(?:[{])/,/^(?:[}])/,/^(?:[\\n])/,/^(?:[^{}\\n]*)/,/^(?:class\\b)/,/^(?:cssClass\\b)/,/^(?:callback\\b)/,/^(?:link\\b)/,/^(?:click\\b)/,/^(?:<<)/,/^(?:>>)/,/^(?:[~])/,/^(?:[~])/,/^(?:[^~]*)/,/^(?:[\"])/,/^(?:[\"])/,/^(?:[^\"]*)/,/^(?:[`])/,/^(?:[`])/,/^(?:[^`]+)/,/^(?:href[\\s]+[\"])/,/^(?:[\"])/,/^(?:[^\"]*)/,/^(?:call[\\s]+)/,/^(?:\\([\\s]*\\))/,/^(?:\\()/,/^(?:[^(]*)/,/^(?:\\))/,/^(?:[^)]*)/,/^(?:_self\\b)/,/^(?:_blank\\b)/,/^(?:_parent\\b)/,/^(?:_top\\b)/,/^(?:\\s*<\\|)/,/^(?:\\s*\\|>)/,/^(?:\\s*>)/,/^(?:\\s*<)/,/^(?:\\s*\\*)/,/^(?:\\s*o\\b)/,/^(?:--)/,/^(?:\\.\\.)/,/^(?::{1}[^:\\n;]+)/,/^(?::{3})/,/^(?:-)/,/^(?:\\.)/,/^(?:\\+)/,/^(?:%)/,/^(?:=)/,/^(?:=)/,/^(?:\\w+)/,/^(?:[!\"#$%&'*+,-.`?\\\\/])/,/^(?:[0-9]+)/,/^(?:[\\u00AA\\u00B5\\u00BA\\u00C0-\\u00D6\\u00D8-\\u00F6]|[\\u00F8-\\u02C1\\u02C6-\\u02D1\\u02E0-\\u02E4\\u02EC\\u02EE\\u0370-\\u0374\\u0376\\u0377]|[\\u037A-\\u037D\\u0386\\u0388-\\u038A\\u038C\\u038E-\\u03A1\\u03A3-\\u03F5]|[\\u03F7-\\u0481\\u048A-\\u0527\\u0531-\\u0556\\u0559\\u0561-\\u0587\\u05D0-\\u05EA]|[\\u05F0-\\u05F2\\u0620-\\u064A\\u066E\\u066F\\u0671-\\u06D3\\u06D5\\u06E5\\u06E6\\u06EE]|[\\u06EF\\u06FA-\\u06FC\\u06FF\\u0710\\u0712-\\u072F\\u074D-\\u07A5\\u07B1\\u07CA-\\u07EA]|[\\u07F4\\u07F5\\u07FA\\u0800-\\u0815\\u081A\\u0824\\u0828\\u0840-\\u0858\\u08A0]|[\\u08A2-\\u08AC\\u0904-\\u0939\\u093D\\u0950\\u0958-\\u0961\\u0971-\\u0977]|[\\u0979-\\u097F\\u0985-\\u098C\\u098F\\u0990\\u0993-\\u09A8\\u09AA-\\u09B0\\u09B2]|[\\u09B6-\\u09B9\\u09BD\\u09CE\\u09DC\\u09DD\\u09DF-\\u09E1\\u09F0\\u09F1\\u0A05-\\u0A0A]|[\\u0A0F\\u0A10\\u0A13-\\u0A28\\u0A2A-\\u0A30\\u0A32\\u0A33\\u0A35\\u0A36\\u0A38\\u0A39]|[\\u0A59-\\u0A5C\\u0A5E\\u0A72-\\u0A74\\u0A85-\\u0A8D\\u0A8F-\\u0A91\\u0A93-\\u0AA8]|[\\u0AAA-\\u0AB0\\u0AB2\\u0AB3\\u0AB5-\\u0AB9\\u0ABD\\u0AD0\\u0AE0\\u0AE1\\u0B05-\\u0B0C]|[\\u0B0F\\u0B10\\u0B13-\\u0B28\\u0B2A-\\u0B30\\u0B32\\u0B33\\u0B35-\\u0B39\\u0B3D\\u0B5C]|[\\u0B5D\\u0B5F-\\u0B61\\u0B71\\u0B83\\u0B85-\\u0B8A\\u0B8E-\\u0B90\\u0B92-\\u0B95\\u0B99]|[\\u0B9A\\u0B9C\\u0B9E\\u0B9F\\u0BA3\\u0BA4\\u0BA8-\\u0BAA\\u0BAE-\\u0BB9\\u0BD0]|[\\u0C05-\\u0C0C\\u0C0E-\\u0C10\\u0C12-\\u0C28\\u0C2A-\\u0C33\\u0C35-\\u0C39\\u0C3D]|[\\u0C58\\u0C59\\u0C60\\u0C61\\u0C85-\\u0C8C\\u0C8E-\\u0C90\\u0C92-\\u0CA8\\u0CAA-\\u0CB3]|[\\u0CB5-\\u0CB9\\u0CBD\\u0CDE\\u0CE0\\u0CE1\\u0CF1\\u0CF2\\u0D05-\\u0D0C\\u0D0E-\\u0D10]|[\\u0D12-\\u0D3A\\u0D3D\\u0D4E\\u0D60\\u0D61\\u0D7A-\\u0D7F\\u0D85-\\u0D96\\u0D9A-\\u0DB1]|[\\u0DB3-\\u0DBB\\u0DBD\\u0DC0-\\u0DC6\\u0E01-\\u0E30\\u0E32\\u0E33\\u0E40-\\u0E46\\u0E81]|[\\u0E82\\u0E84\\u0E87\\u0E88\\u0E8A\\u0E8D\\u0E94-\\u0E97\\u0E99-\\u0E9F\\u0EA1-\\u0EA3]|[\\u0EA5\\u0EA7\\u0EAA\\u0EAB\\u0EAD-\\u0EB0\\u0EB2\\u0EB3\\u0EBD\\u0EC0-\\u0EC4\\u0EC6]|[\\u0EDC-\\u0EDF\\u0F00\\u0F40-\\u0F47\\u0F49-\\u0F6C\\u0F88-\\u0F8C\\u1000-\\u102A]|[\\u103F\\u1050-\\u1055\\u105A-\\u105D\\u1061\\u1065\\u1066\\u106E-\\u1070\\u1075-\\u1081]|[\\u108E\\u10A0-\\u10C5\\u10C7\\u10CD\\u10D0-\\u10FA\\u10FC-\\u1248\\u124A-\\u124D]|[\\u1250-\\u1256\\u1258\\u125A-\\u125D\\u1260-\\u1288\\u128A-\\u128D\\u1290-\\u12B0]|[\\u12B2-\\u12B5\\u12B8-\\u12BE\\u12C0\\u12C2-\\u12C5\\u12C8-\\u12D6\\u12D8-\\u1310]|[\\u1312-\\u1315\\u1318-\\u135A\\u1380-\\u138F\\u13A0-\\u13F4\\u1401-\\u166C]|[\\u166F-\\u167F\\u1681-\\u169A\\u16A0-\\u16EA\\u1700-\\u170C\\u170E-\\u1711]|[\\u1720-\\u1731\\u1740-\\u1751\\u1760-\\u176C\\u176E-\\u1770\\u1780-\\u17B3\\u17D7]|[\\u17DC\\u1820-\\u1877\\u1880-\\u18A8\\u18AA\\u18B0-\\u18F5\\u1900-\\u191C]|[\\u1950-\\u196D\\u1970-\\u1974\\u1980-\\u19AB\\u19C1-\\u19C7\\u1A00-\\u1A16]|[\\u1A20-\\u1A54\\u1AA7\\u1B05-\\u1B33\\u1B45-\\u1B4B\\u1B83-\\u1BA0\\u1BAE\\u1BAF]|[\\u1BBA-\\u1BE5\\u1C00-\\u1C23\\u1C4D-\\u1C4F\\u1C5A-\\u1C7D\\u1CE9-\\u1CEC]|[\\u1CEE-\\u1CF1\\u1CF5\\u1CF6\\u1D00-\\u1DBF\\u1E00-\\u1F15\\u1F18-\\u1F1D]|[\\u1F20-\\u1F45\\u1F48-\\u1F4D\\u1F50-\\u1F57\\u1F59\\u1F5B\\u1F5D\\u1F5F-\\u1F7D]|[\\u1F80-\\u1FB4\\u1FB6-\\u1FBC\\u1FBE\\u1FC2-\\u1FC4\\u1FC6-\\u1FCC\\u1FD0-\\u1FD3]|[\\u1FD6-\\u1FDB\\u1FE0-\\u1FEC\\u1FF2-\\u1FF4\\u1FF6-\\u1FFC\\u2071\\u207F]|[\\u2090-\\u209C\\u2102\\u2107\\u210A-\\u2113\\u2115\\u2119-\\u211D\\u2124\\u2126\\u2128]|[\\u212A-\\u212D\\u212F-\\u2139\\u213C-\\u213F\\u2145-\\u2149\\u214E\\u2183\\u2184]|[\\u2C00-\\u2C2E\\u2C30-\\u2C5E\\u2C60-\\u2CE4\\u2CEB-\\u2CEE\\u2CF2\\u2CF3]|[\\u2D00-\\u2D25\\u2D27\\u2D2D\\u2D30-\\u2D67\\u2D6F\\u2D80-\\u2D96\\u2DA0-\\u2DA6]|[\\u2DA8-\\u2DAE\\u2DB0-\\u2DB6\\u2DB8-\\u2DBE\\u2DC0-\\u2DC6\\u2DC8-\\u2DCE]|[\\u2DD0-\\u2DD6\\u2DD8-\\u2DDE\\u2E2F\\u3005\\u3006\\u3031-\\u3035\\u303B\\u303C]|[\\u3041-\\u3096\\u309D-\\u309F\\u30A1-\\u30FA\\u30FC-\\u30FF\\u3105-\\u312D]|[\\u3131-\\u318E\\u31A0-\\u31BA\\u31F0-\\u31FF\\u3400-\\u4DB5\\u4E00-\\u9FCC]|[\\uA000-\\uA48C\\uA4D0-\\uA4FD\\uA500-\\uA60C\\uA610-\\uA61F\\uA62A\\uA62B]|[\\uA640-\\uA66E\\uA67F-\\uA697\\uA6A0-\\uA6E5\\uA717-\\uA71F\\uA722-\\uA788]|[\\uA78B-\\uA78E\\uA790-\\uA793\\uA7A0-\\uA7AA\\uA7F8-\\uA801\\uA803-\\uA805]|[\\uA807-\\uA80A\\uA80C-\\uA822\\uA840-\\uA873\\uA882-\\uA8B3\\uA8F2-\\uA8F7\\uA8FB]|[\\uA90A-\\uA925\\uA930-\\uA946\\uA960-\\uA97C\\uA984-\\uA9B2\\uA9CF\\uAA00-\\uAA28]|[\\uAA40-\\uAA42\\uAA44-\\uAA4B\\uAA60-\\uAA76\\uAA7A\\uAA80-\\uAAAF\\uAAB1\\uAAB5]|[\\uAAB6\\uAAB9-\\uAABD\\uAAC0\\uAAC2\\uAADB-\\uAADD\\uAAE0-\\uAAEA\\uAAF2-\\uAAF4]|[\\uAB01-\\uAB06\\uAB09-\\uAB0E\\uAB11-\\uAB16\\uAB20-\\uAB26\\uAB28-\\uAB2E]|[\\uABC0-\\uABE2\\uAC00-\\uD7A3\\uD7B0-\\uD7C6\\uD7CB-\\uD7FB\\uF900-\\uFA6D]|[\\uFA70-\\uFAD9\\uFB00-\\uFB06\\uFB13-\\uFB17\\uFB1D\\uFB1F-\\uFB28\\uFB2A-\\uFB36]|[\\uFB38-\\uFB3C\\uFB3E\\uFB40\\uFB41\\uFB43\\uFB44\\uFB46-\\uFBB1\\uFBD3-\\uFD3D]|[\\uFD50-\\uFD8F\\uFD92-\\uFDC7\\uFDF0-\\uFDFB\\uFE70-\\uFE74\\uFE76-\\uFEFC]|[\\uFF21-\\uFF3A\\uFF41-\\uFF5A\\uFF66-\\uFFBE\\uFFC2-\\uFFC7\\uFFCA-\\uFFCF]|[\\uFFD2-\\uFFD7\\uFFDA-\\uFFDC])/,/^(?:\\s)/,/^(?:$)/],\nconditions: {\"arg_directive\":{\"rules\":[7,8],\"inclusive\":false},\"type_directive\":{\"rules\":[6,7],\"inclusive\":false},\"open_directive\":{\"rules\":[5],\"inclusive\":false},\"callback_args\":{\"rules\":[44,45],\"inclusive\":false},\"callback_name\":{\"rules\":[41,42,43],\"inclusive\":false},\"href\":{\"rules\":[38,39],\"inclusive\":false},\"struct\":{\"rules\":[16,17,18,19,20],\"inclusive\":false},\"generic\":{\"rules\":[29,30],\"inclusive\":false},\"bqstring\":{\"rules\":[35,36],\"inclusive\":false},\"string\":{\"rules\":[32,33],\"inclusive\":false},\"INITIAL\":{\"rules\":[0,1,2,3,4,9,10,11,12,13,14,15,21,22,23,24,25,26,27,28,31,34,37,40,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71],\"inclusive\":true}}\n});\nreturn lexer;\n})();\nparser.lexer = lexer;\nfunction Parser () {\n this.yy = {};\n}\nParser.prototype = parser;parser.Parser = Parser;\nreturn new Parser;\n})();\n\n\nif (typeof require !== 'undefined' && typeof exports !== 'undefined') {\nexports.parser = parser;\nexports.Parser = parser.Parser;\nexports.parse = function () { return parser.parse.apply(parser, arguments); };\nexports.main = function commonjsMain (args) {\n if (!args[1]) {\n console.log('Usage: '+args[0]+' FILE');\n process.exit(1);\n }\n var source = require('fs').readFileSync(require('path').normalize(args[1]), \"utf8\");\n return exports.parser.parse(source);\n};\nif (typeof module !== 'undefined' && require.main === module) {\n exports.main(process.argv.slice(1));\n}\n}","const getStyles = (options) =>\n `g.classGroup text {\n fill: ${options.nodeBorder};\n fill: ${options.classText};\n stroke: none;\n font-family: ${options.fontFamily};\n font-size: 10px;\n\n .title {\n font-weight: bolder;\n }\n\n}\n\n.nodeLabel, .edgeLabel {\n color: ${options.classText};\n}\n.edgeLabel .label rect {\n fill: ${options.mainBkg};\n}\n.label text {\n fill: ${options.classText};\n}\n.edgeLabel .label span {\n background: ${options.mainBkg};\n}\n\n.classTitle {\n font-weight: bolder;\n}\n.node rect,\n .node circle,\n .node ellipse,\n .node polygon,\n .node path {\n fill: ${options.mainBkg};\n stroke: ${options.nodeBorder};\n stroke-width: 1px;\n }\n\n\n.divider {\n stroke: ${options.nodeBorder};\n stroke: 1;\n}\n\ng.clickable {\n cursor: pointer;\n}\n\ng.classGroup rect {\n fill: ${options.mainBkg};\n stroke: ${options.nodeBorder};\n}\n\ng.classGroup line {\n stroke: ${options.nodeBorder};\n stroke-width: 1;\n}\n\n.classLabel .box {\n stroke: none;\n stroke-width: 0;\n fill: ${options.mainBkg};\n opacity: 0.5;\n}\n\n.classLabel .label {\n fill: ${options.nodeBorder};\n font-size: 10px;\n}\n\n.relation {\n stroke: ${options.lineColor};\n stroke-width: 1;\n fill: none;\n}\n\n.dashed-line{\n stroke-dasharray: 3;\n}\n\n#compositionStart, .composition {\n fill: ${options.lineColor} !important;\n stroke: ${options.lineColor} !important;\n stroke-width: 1;\n}\n\n#compositionEnd, .composition {\n fill: ${options.lineColor} !important;\n stroke: ${options.lineColor} !important;\n stroke-width: 1;\n}\n\n#dependencyStart, .dependency {\n fill: ${options.lineColor} !important;\n stroke: ${options.lineColor} !important;\n stroke-width: 1;\n}\n\n#dependencyStart, .dependency {\n fill: ${options.lineColor} !important;\n stroke: ${options.lineColor} !important;\n stroke-width: 1;\n}\n\n#extensionStart, .extension {\n fill: ${options.lineColor} !important;\n stroke: ${options.lineColor} !important;\n stroke-width: 1;\n}\n\n#extensionEnd, .extension {\n fill: ${options.lineColor} !important;\n stroke: ${options.lineColor} !important;\n stroke-width: 1;\n}\n\n#aggregationStart, .aggregation {\n fill: ${options.mainBkg} !important;\n stroke: ${options.lineColor} !important;\n stroke-width: 1;\n}\n\n#aggregationEnd, .aggregation {\n fill: ${options.mainBkg} !important;\n stroke: ${options.lineColor} !important;\n stroke-width: 1;\n}\n\n.edgeTerminals {\n font-size: 11px;\n}\n\n`;\n\nexport default getStyles;\n","import { line, curveBasis } from 'd3';\nimport { lookUpDomId, relationType } from './classDb';\nimport utils from '../../utils';\nimport { log } from '../../logger';\n\nlet edgeCount = 0;\nexport const drawEdge = function (elem, path, relation, conf) {\n const getRelationType = function (type) {\n switch (type) {\n case relationType.AGGREGATION:\n return 'aggregation';\n case relationType.EXTENSION:\n return 'extension';\n case relationType.COMPOSITION:\n return 'composition';\n case relationType.DEPENDENCY:\n return 'dependency';\n }\n };\n\n path.points = path.points.filter((p) => !Number.isNaN(p.y));\n\n // The data for our line\n const lineData = path.points;\n\n // This is the accessor function we talked about above\n const lineFunction = line()\n .x(function (d) {\n return d.x;\n })\n .y(function (d) {\n return d.y;\n })\n .curve(curveBasis);\n\n const svgPath = elem\n .append('path')\n .attr('d', lineFunction(lineData))\n .attr('id', 'edge' + edgeCount)\n .attr('class', 'relation');\n let url = '';\n if (conf.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\n if (relation.relation.lineType == 1) {\n svgPath.attr('class', 'relation dashed-line');\n }\n if (relation.relation.type1 !== 'none') {\n svgPath.attr(\n 'marker-start',\n 'url(' + url + '#' + getRelationType(relation.relation.type1) + 'Start' + ')'\n );\n }\n if (relation.relation.type2 !== 'none') {\n svgPath.attr(\n 'marker-end',\n 'url(' + url + '#' + getRelationType(relation.relation.type2) + 'End' + ')'\n );\n }\n\n let x, y;\n const l = path.points.length;\n // Calculate Label position\n let labelPosition = utils.calcLabelPosition(path.points);\n x = labelPosition.x;\n y = labelPosition.y;\n\n let p1_card_x, p1_card_y;\n let p2_card_x, p2_card_y;\n\n if (l % 2 !== 0 && l > 1) {\n let cardinality_1_point = utils.calcCardinalityPosition(\n relation.relation.type1 !== 'none',\n path.points,\n path.points[0]\n );\n let cardinality_2_point = utils.calcCardinalityPosition(\n relation.relation.type2 !== 'none',\n path.points,\n path.points[l - 1]\n );\n\n log.debug('cardinality_1_point ' + JSON.stringify(cardinality_1_point));\n log.debug('cardinality_2_point ' + JSON.stringify(cardinality_2_point));\n\n p1_card_x = cardinality_1_point.x;\n p1_card_y = cardinality_1_point.y;\n p2_card_x = cardinality_2_point.x;\n p2_card_y = cardinality_2_point.y;\n }\n\n if (typeof relation.title !== 'undefined') {\n const g = elem.append('g').attr('class', 'classLabel');\n const label = g\n .append('text')\n .attr('class', 'label')\n .attr('x', x)\n .attr('y', y)\n .attr('fill', 'red')\n .attr('text-anchor', 'middle')\n .text(relation.title);\n\n window.label = label;\n const bounds = label.node().getBBox();\n\n g.insert('rect', ':first-child')\n .attr('class', 'box')\n .attr('x', bounds.x - conf.padding / 2)\n .attr('y', bounds.y - conf.padding / 2)\n .attr('width', bounds.width + conf.padding)\n .attr('height', bounds.height + conf.padding);\n }\n\n log.info('Rendering relation ' + JSON.stringify(relation));\n if (typeof relation.relationTitle1 !== 'undefined' && relation.relationTitle1 !== 'none') {\n const g = elem.append('g').attr('class', 'cardinality');\n g.append('text')\n .attr('class', 'type1')\n .attr('x', p1_card_x)\n .attr('y', p1_card_y)\n .attr('fill', 'black')\n .attr('font-size', '6')\n .text(relation.relationTitle1);\n }\n if (typeof relation.relationTitle2 !== 'undefined' && relation.relationTitle2 !== 'none') {\n const g = elem.append('g').attr('class', 'cardinality');\n g.append('text')\n .attr('class', 'type2')\n .attr('x', p2_card_x)\n .attr('y', p2_card_y)\n .attr('fill', 'black')\n .attr('font-size', '6')\n .text(relation.relationTitle2);\n }\n\n edgeCount++;\n};\n\nexport const drawClass = function (elem, classDef, conf) {\n log.info('Rendering class ' + classDef);\n\n const id = classDef.id;\n const classInfo = {\n id: id,\n label: classDef.id,\n width: 0,\n height: 0,\n };\n\n // add class group\n const g = elem.append('g').attr('id', lookUpDomId(id)).attr('class', 'classGroup');\n\n // add title\n let title;\n if (classDef.link) {\n title = g\n .append('svg:a')\n .attr('xlink:href', classDef.link)\n .attr('target', classDef.linkTarget)\n .append('text')\n .attr('y', conf.textHeight + conf.padding)\n .attr('x', 0);\n } else {\n title = g\n .append('text')\n .attr('y', conf.textHeight + conf.padding)\n .attr('x', 0);\n }\n\n // add annotations\n let isFirst = true;\n classDef.annotations.forEach(function (member) {\n const titleText2 = title.append('tspan').text('«' + member + '»');\n if (!isFirst) titleText2.attr('dy', conf.textHeight);\n isFirst = false;\n });\n\n let classTitleString = classDef.id;\n\n if (classDef.type !== undefined && classDef.type !== '') {\n classTitleString += '<' + classDef.type + '>';\n }\n\n const classTitle = title.append('tspan').text(classTitleString).attr('class', 'title');\n\n // If class has annotations the title needs to have an offset of the text height\n if (!isFirst) classTitle.attr('dy', conf.textHeight);\n\n const titleHeight = title.node().getBBox().height;\n\n const membersLine = g\n .append('line') // text label for the x axis\n .attr('x1', 0)\n .attr('y1', conf.padding + titleHeight + conf.dividerMargin / 2)\n .attr('y2', conf.padding + titleHeight + conf.dividerMargin / 2);\n\n const members = g\n .append('text') // text label for the x axis\n .attr('x', conf.padding)\n .attr('y', titleHeight + conf.dividerMargin + conf.textHeight)\n .attr('fill', 'white')\n .attr('class', 'classText');\n\n isFirst = true;\n classDef.members.forEach(function (member) {\n addTspan(members, member, isFirst, conf);\n isFirst = false;\n });\n\n const membersBox = members.node().getBBox();\n\n const methodsLine = g\n .append('line') // text label for the x axis\n .attr('x1', 0)\n .attr('y1', conf.padding + titleHeight + conf.dividerMargin + membersBox.height)\n .attr('y2', conf.padding + titleHeight + conf.dividerMargin + membersBox.height);\n\n const methods = g\n .append('text') // text label for the x axis\n .attr('x', conf.padding)\n .attr('y', titleHeight + 2 * conf.dividerMargin + membersBox.height + conf.textHeight)\n .attr('fill', 'white')\n .attr('class', 'classText');\n\n isFirst = true;\n\n classDef.methods.forEach(function (method) {\n addTspan(methods, method, isFirst, conf);\n isFirst = false;\n });\n\n const classBox = g.node().getBBox();\n var cssClassStr = ' ';\n\n if (classDef.cssClasses.length > 0) {\n cssClassStr = cssClassStr + classDef.cssClasses.join(' ');\n }\n\n const rect = g\n .insert('rect', ':first-child')\n .attr('x', 0)\n .attr('y', 0)\n .attr('width', classBox.width + 2 * conf.padding)\n .attr('height', classBox.height + conf.padding + 0.5 * conf.dividerMargin)\n .attr('class', cssClassStr);\n\n const rectWidth = rect.node().getBBox().width;\n\n // Center title\n // We subtract the width of each text element from the class box width and divide it by 2\n title.node().childNodes.forEach(function (x) {\n x.setAttribute('x', (rectWidth - x.getBBox().width) / 2);\n });\n\n if (classDef.tooltip) {\n title.insert('title').text(classDef.tooltip);\n }\n\n membersLine.attr('x2', rectWidth);\n methodsLine.attr('x2', rectWidth);\n\n classInfo.width = rectWidth;\n classInfo.height = classBox.height + conf.padding + 0.5 * conf.dividerMargin;\n\n return classInfo;\n};\n\nexport const parseMember = function (text) {\n const fieldRegEx = /^(\\+|-|~|#)?(\\w+)(~\\w+~|\\[\\])?\\s+(\\w+) *(\\*|\\$)?$/;\n const methodRegEx = /^([+|\\-|~|#])?(\\w+) *\\( *(.*)\\) *(\\*|\\$)? *(\\w*[~|[\\]]*\\s*\\w*~?)$/;\n\n let fieldMatch = text.match(fieldRegEx);\n let methodMatch = text.match(methodRegEx);\n\n if (fieldMatch && !methodMatch) {\n return buildFieldDisplay(fieldMatch);\n } else if (methodMatch) {\n return buildMethodDisplay(methodMatch);\n } else {\n return buildLegacyDisplay(text);\n }\n};\n\nconst buildFieldDisplay = function (parsedText) {\n let cssStyle = '';\n let displayText = '';\n\n try {\n let visibility = parsedText[1] ? parsedText[1].trim() : '';\n let fieldType = parsedText[2] ? parsedText[2].trim() : '';\n let genericType = parsedText[3] ? parseGenericTypes(parsedText[3].trim()) : '';\n let fieldName = parsedText[4] ? parsedText[4].trim() : '';\n let classifier = parsedText[5] ? parsedText[5].trim() : '';\n\n displayText = visibility + fieldType + genericType + ' ' + fieldName;\n cssStyle = parseClassifier(classifier);\n } catch (err) {\n displayText = parsedText;\n }\n\n return {\n displayText: displayText,\n cssStyle: cssStyle,\n };\n};\n\nconst buildMethodDisplay = function (parsedText) {\n let cssStyle = '';\n let displayText = '';\n\n try {\n let visibility = parsedText[1] ? parsedText[1].trim() : '';\n let methodName = parsedText[2] ? parsedText[2].trim() : '';\n let parameters = parsedText[3] ? parseGenericTypes(parsedText[3].trim()) : '';\n let classifier = parsedText[4] ? parsedText[4].trim() : '';\n let returnType = parsedText[5] ? ' : ' + parseGenericTypes(parsedText[5]).trim() : '';\n\n displayText = visibility + methodName + '(' + parameters + ')' + returnType;\n cssStyle = parseClassifier(classifier);\n } catch (err) {\n displayText = parsedText;\n }\n\n return {\n displayText: displayText,\n cssStyle: cssStyle,\n };\n};\n\nconst buildLegacyDisplay = function (text) {\n // if for some reason we dont have any match, use old format to parse text\n let displayText = '';\n let cssStyle = '';\n let memberText = '';\n let returnType = '';\n let methodStart = text.indexOf('(');\n let methodEnd = text.indexOf(')');\n\n if (methodStart > 1 && methodEnd > methodStart && methodEnd <= text.length) {\n let visibility = '';\n let methodName = '';\n\n let firstChar = text.substring(0, 1);\n if (firstChar.match(/\\w/)) {\n methodName = text.substring(0, methodStart).trim();\n } else {\n if (firstChar.match(/\\+|-|~|#/)) {\n visibility = firstChar;\n }\n\n methodName = text.substring(1, methodStart).trim();\n }\n\n let parameters = text.substring(methodStart + 1, methodEnd);\n let classifier = text.substring(methodEnd + 1, 1);\n cssStyle = parseClassifier(classifier);\n\n displayText = visibility + methodName + '(' + parseGenericTypes(parameters.trim()) + ')';\n\n if (methodEnd < memberText.length) {\n returnType = text.substring(methodEnd + 2).trim();\n if (returnType !== '') {\n returnType = ' : ' + parseGenericTypes(returnType);\n }\n }\n } else {\n // finally - if all else fails, just send the text back as written (other than parsing for generic types)\n displayText = parseGenericTypes(text);\n }\n\n return {\n displayText: displayText,\n cssStyle: cssStyle,\n };\n};\n\nconst addTspan = function (textEl, txt, isFirst, conf) {\n let member = parseMember(txt);\n\n const tSpan = textEl.append('tspan').attr('x', conf.padding).text(member.displayText);\n\n if (member.cssStyle !== '') {\n tSpan.attr('style', member.cssStyle);\n }\n\n if (!isFirst) {\n tSpan.attr('dy', conf.textHeight);\n }\n};\n\nconst parseGenericTypes = function (text) {\n let cleanedText = text;\n\n if (text.indexOf('~') != -1) {\n cleanedText = cleanedText.replace('~', '<');\n cleanedText = cleanedText.replace('~', '>');\n\n return parseGenericTypes(cleanedText);\n } else {\n return cleanedText;\n }\n};\n\nconst parseClassifier = function (classifier) {\n switch (classifier) {\n case '*':\n return 'font-style:italic;';\n case '$':\n return 'text-decoration:underline;';\n default:\n return '';\n }\n};\n\nexport default {\n drawClass,\n drawEdge,\n parseMember,\n};\n","import DOMPurify from 'dompurify';\n\nexport const getRows = (s) => {\n if (!s) return 1;\n let str = breakToPlaceholder(s);\n str = str.replace(/\\\\n/g, '#br#');\n return str.split('#br#');\n};\n\nexport const removeScript = (txt) => {\n var rs = '';\n var idx = 0;\n\n while (idx >= 0) {\n idx = txt.indexOf('= 0) {\n rs += txt.substr(0, idx);\n txt = txt.substr(idx + 1);\n\n idx = txt.indexOf('');\n if (idx >= 0) {\n idx += 9;\n txt = txt.substr(idx);\n }\n } else {\n rs += txt;\n idx = -1;\n break;\n }\n }\n\n rs = rs.replace(/script>/gi, '#');\n rs = rs.replace(/script>/gi, '#');\n rs = rs.replace(/javascript:/gi, '#');\n rs = rs.replace(/onerror=/gi, 'onerror:');\n rs = rs.replace(/