>)/i,/^(?:.*\\[\\[fork\\]\\])/i,/^(?:.*\\[\\[join\\]\\])/i,/^(?:.*\\[\\[choice\\]\\])/i,/^(?:.*direction\\s+TB[^\\n]*)/i,/^(?:.*direction\\s+BT[^\\n]*)/i,/^(?:.*direction\\s+RL[^\\n]*)/i,/^(?:.*direction\\s+LR[^\\n]*)/i,/^(?:[\"])/i,/^(?:\\s*as\\s+)/i,/^(?:[^\\n\\{]*)/i,/^(?:[\"])/i,/^(?:[^\"]*)/i,/^(?:[^\\n\\s\\{]+)/i,/^(?:\\n)/i,/^(?:\\{)/i,/^(?:\\})/i,/^(?:[\\n])/i,/^(?:note\\s+)/i,/^(?:left of\\b)/i,/^(?:right of\\b)/i,/^(?:\")/i,/^(?:\\s*as\\s*)/i,/^(?:[\"])/i,/^(?:[^\"]*)/i,/^(?:[^\\n]*)/i,/^(?:\\s*[^:\\n\\s\\-]+)/i,/^(?:\\s*:[^:\\n;]+)/i,/^(?:[\\s\\S]*?end note\\b)/i,/^(?:stateDiagram\\s+)/i,/^(?:stateDiagram-v2\\s+)/i,/^(?:hide empty description\\b)/i,/^(?:\\[\\*\\])/i,/^(?:[^:\\n\\s\\-\\{]+)/i,/^(?:\\s*:[^:\\n;]+)/i,/^(?:-->)/i,/^(?:--)/i,/^(?:$)/i,/^(?:.)/i],\nconditions: {\"LINE\":{\"rules\":[13,14],\"inclusive\":false},\"close_directive\":{\"rules\":[13,14],\"inclusive\":false},\"arg_directive\":{\"rules\":[7,8,13,14],\"inclusive\":false},\"type_directive\":{\"rules\":[6,7,13,14],\"inclusive\":false},\"open_directive\":{\"rules\":[5,13,14],\"inclusive\":false},\"struct\":{\"rules\":[13,14,26,33,34,35,36,45,46,47,61,62,63,64,65],\"inclusive\":false},\"FLOATING_NOTE_ID\":{\"rules\":[54],\"inclusive\":false},\"FLOATING_NOTE\":{\"rules\":[51,52,53],\"inclusive\":false},\"NOTE_TEXT\":{\"rules\":[56,57],\"inclusive\":false},\"NOTE_ID\":{\"rules\":[55],\"inclusive\":false},\"NOTE\":{\"rules\":[48,49,50],\"inclusive\":false},\"acc_descr_multiline\":{\"rules\":[24,25],\"inclusive\":false},\"acc_descr\":{\"rules\":[22],\"inclusive\":false},\"acc_title\":{\"rules\":[20],\"inclusive\":false},\"SCALE\":{\"rules\":[17,18],\"inclusive\":false},\"ALIAS\":{\"rules\":[],\"inclusive\":false},\"STATE_ID\":{\"rules\":[39],\"inclusive\":false},\"STATE_STRING\":{\"rules\":[40,41],\"inclusive\":false},\"FORK_STATE\":{\"rules\":[],\"inclusive\":false},\"STATE\":{\"rules\":[13,14,27,28,29,30,31,32,37,38,42,43,44],\"inclusive\":false},\"ID\":{\"rules\":[13,14],\"inclusive\":false},\"INITIAL\":{\"rules\":[0,1,2,3,4,9,10,11,12,14,15,16,19,21,23,26,44,47,58,59,60,61,62,63,64,66,67],\"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}","/* 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,2],$V1=[1,5],$V2=[6,9,11,17,18,20,22,23,24,26],$V3=[1,15],$V4=[1,16],$V5=[1,17],$V6=[1,18],$V7=[1,19],$V8=[1,20],$V9=[1,24],$Va=[4,6,9,11,17,18,20,22,23,24,26];\nvar parser = {trace: function trace () { },\nyy: {},\nsymbols_: {\"error\":2,\"start\":3,\"journey\":4,\"document\":5,\"EOF\":6,\"directive\":7,\"line\":8,\"SPACE\":9,\"statement\":10,\"NEWLINE\":11,\"openDirective\":12,\"typeDirective\":13,\"closeDirective\":14,\":\":15,\"argDirective\":16,\"title\":17,\"acc_title\":18,\"acc_title_value\":19,\"acc_descr\":20,\"acc_descr_value\":21,\"acc_descr_multiline_value\":22,\"section\":23,\"taskName\":24,\"taskData\":25,\"open_directive\":26,\"type_directive\":27,\"arg_directive\":28,\"close_directive\":29,\"$accept\":0,\"$end\":1},\nterminals_: {2:\"error\",4:\"journey\",6:\"EOF\",9:\"SPACE\",11:\"NEWLINE\",15:\":\",17:\"title\",18:\"acc_title\",19:\"acc_title_value\",20:\"acc_descr\",21:\"acc_descr_value\",22:\"acc_descr_multiline_value\",23:\"section\",24:\"taskName\",25:\"taskData\",26:\"open_directive\",27:\"type_directive\",28:\"arg_directive\",29:\"close_directive\"},\nproductions_: [0,[3,3],[3,2],[5,0],[5,2],[8,2],[8,1],[8,1],[8,1],[7,4],[7,6],[10,1],[10,2],[10,2],[10,1],[10,1],[10,2],[10,1],[12,1],[13,1],[16,1],[14,1]],\nperformAction: function anonymous(yytext, yyleng, yylineno, yy, yystate /* action[1] */, $$ /* vstack */, _$ /* lstack */) {\n/* this == yyval */\n\nvar $0 = $$.length - 1;\nswitch (yystate) {\ncase 1:\n return $$[$0-1]; \nbreak;\ncase 3:\n this.$ = [] \nbreak;\ncase 4:\n$$[$0-1].push($$[$0]);this.$ = $$[$0-1]\nbreak;\ncase 5: case 6:\n this.$ = $$[$0] \nbreak;\ncase 7: case 8:\n this.$=[];\nbreak;\ncase 11:\nyy.setDiagramTitle($$[$0].substr(6));this.$=$$[$0].substr(6);\nbreak;\ncase 12:\n this.$=$$[$0].trim();yy.setAccTitle(this.$); \nbreak;\ncase 13: case 14:\n this.$=$$[$0].trim();yy.setAccDescription(this.$); \nbreak;\ncase 15:\nyy.addSection($$[$0].substr(8));this.$=$$[$0].substr(8);\nbreak;\ncase 16:\nyy.addTask($$[$0-1], $$[$0]);this.$='task';\nbreak;\ncase 18:\n yy.parseDirective('%%{', 'open_directive'); \nbreak;\ncase 19:\n yy.parseDirective($$[$0], 'type_directive'); \nbreak;\ncase 20:\n $$[$0] = $$[$0].trim().replace(/'/g, '\"'); yy.parseDirective($$[$0], 'arg_directive'); \nbreak;\ncase 21:\n yy.parseDirective('}%%', 'close_directive', 'journey'); \nbreak;\n}\n},\ntable: [{3:1,4:$V0,7:3,12:4,26:$V1},{1:[3]},o($V2,[2,3],{5:6}),{3:7,4:$V0,7:3,12:4,26:$V1},{13:8,27:[1,9]},{27:[2,18]},{6:[1,10],7:21,8:11,9:[1,12],10:13,11:[1,14],12:4,17:$V3,18:$V4,20:$V5,22:$V6,23:$V7,24:$V8,26:$V1},{1:[2,2]},{14:22,15:[1,23],29:$V9},o([15,29],[2,19]),o($V2,[2,8],{1:[2,1]}),o($V2,[2,4]),{7:21,10:25,12:4,17:$V3,18:$V4,20:$V5,22:$V6,23:$V7,24:$V8,26:$V1},o($V2,[2,6]),o($V2,[2,7]),o($V2,[2,11]),{19:[1,26]},{21:[1,27]},o($V2,[2,14]),o($V2,[2,15]),{25:[1,28]},o($V2,[2,17]),{11:[1,29]},{16:30,28:[1,31]},{11:[2,21]},o($V2,[2,5]),o($V2,[2,12]),o($V2,[2,13]),o($V2,[2,16]),o($Va,[2,9]),{14:32,29:$V9},{29:[2,20]},{11:[1,33]},o($Va,[2,10])],\ndefaultActions: {5:[2,18],7:[2,2],24:[2,21],31:[2,20]},\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\r\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: {\"case-insensitive\":true},\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 26; \nbreak;\ncase 1: this.begin('type_directive'); return 27; \nbreak;\ncase 2: this.popState(); this.begin('arg_directive'); return 15; \nbreak;\ncase 3: this.popState(); this.popState(); return 29; \nbreak;\ncase 4:return 28;\nbreak;\ncase 5:/* skip comments */\nbreak;\ncase 6:/* skip comments */\nbreak;\ncase 7:return 11;\nbreak;\ncase 8:/* skip whitespace */\nbreak;\ncase 9:/* skip comments */\nbreak;\ncase 10:return 4;\nbreak;\ncase 11:return 17;\nbreak;\ncase 12: this.begin(\"acc_title\");return 18; \nbreak;\ncase 13: this.popState(); return \"acc_title_value\"; \nbreak;\ncase 14: this.begin(\"acc_descr\");return 20; \nbreak;\ncase 15: this.popState(); return \"acc_descr_value\"; \nbreak;\ncase 16: this.begin(\"acc_descr_multiline\");\nbreak;\ncase 17: this.popState(); \nbreak;\ncase 18:return \"acc_descr_multiline_value\";\nbreak;\ncase 19:return 23;\nbreak;\ncase 20:return 24;\nbreak;\ncase 21:return 25;\nbreak;\ncase 22:return 15;\nbreak;\ncase 23:return 6;\nbreak;\ncase 24:return 'INVALID';\nbreak;\n}\n},\nrules: [/^(?:%%\\{)/i,/^(?:((?:(?!\\}%%)[^:.])*))/i,/^(?::)/i,/^(?:\\}%%)/i,/^(?:((?:(?!\\}%%).|\\n)*))/i,/^(?:%(?!\\{)[^\\n]*)/i,/^(?:[^\\}]%%[^\\n]*)/i,/^(?:[\\n]+)/i,/^(?:\\s+)/i,/^(?:#[^\\n]*)/i,/^(?:journey\\b)/i,/^(?:title\\s[^#\\n;]+)/i,/^(?:accTitle\\s*:\\s*)/i,/^(?:(?!\\n||)*[^\\n]*)/i,/^(?:accDescr\\s*:\\s*)/i,/^(?:(?!\\n||)*[^\\n]*)/i,/^(?:accDescr\\s*\\{\\s*)/i,/^(?:[\\}])/i,/^(?:[^\\}]*)/i,/^(?:section\\s[^#:\\n;]+)/i,/^(?:[^#:\\n;]+)/i,/^(?::[^#\\n;]+)/i,/^(?::)/i,/^(?:$)/i,/^(?:.)/i],\nconditions: {\"open_directive\":{\"rules\":[1],\"inclusive\":false},\"type_directive\":{\"rules\":[2,3],\"inclusive\":false},\"arg_directive\":{\"rules\":[3,4],\"inclusive\":false},\"acc_descr_multiline\":{\"rules\":[17,18],\"inclusive\":false},\"acc_descr\":{\"rules\":[15],\"inclusive\":false},\"acc_title\":{\"rules\":[13],\"inclusive\":false},\"INITIAL\":{\"rules\":[0,5,6,7,8,9,10,11,12,14,16,19,20,21,22,23,24],\"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}","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.sanitizeUrl = void 0;\nvar invalidProtocolRegex = /^([^\\w]*)(javascript|data|vbscript)/im;\nvar htmlEntitiesRegex = /&#(\\w+)(^\\w|;)?/g;\nvar ctrlCharactersRegex = /[\\u0000-\\u001F\\u007F-\\u009F\\u2000-\\u200D\\uFEFF]/gim;\nvar urlSchemeRegex = /^([^:]+):/gm;\nvar relativeFirstCharacters = [\".\", \"/\"];\nfunction isRelativeUrlWithoutProtocol(url) {\n return relativeFirstCharacters.indexOf(url[0]) > -1;\n}\n// adapted from https://stackoverflow.com/a/29824550/2601552\nfunction decodeHtmlCharacters(str) {\n return str.replace(htmlEntitiesRegex, function (match, dec) {\n return String.fromCharCode(dec);\n });\n}\nfunction sanitizeUrl(url) {\n var sanitizedUrl = decodeHtmlCharacters(url || \"\")\n .replace(ctrlCharactersRegex, \"\")\n .trim();\n if (!sanitizedUrl) {\n return \"about:blank\";\n }\n if (isRelativeUrlWithoutProtocol(sanitizedUrl)) {\n return sanitizedUrl;\n }\n var urlSchemeParseResults = sanitizedUrl.match(urlSchemeRegex);\n if (!urlSchemeParseResults) {\n return sanitizedUrl;\n }\n var urlScheme = urlSchemeParseResults[0];\n if (invalidProtocolRegex.test(urlScheme)) {\n return \"about:blank\";\n }\n return sanitizedUrl;\n}\nexports.sanitizeUrl = sanitizeUrl;\n","import utils from './utils';\nimport * as configApi from './config';\nimport { log } from './logger';\nimport { getDiagrams } from './diagram-api/diagramAPI';\nimport detectType from './diagram-api/detectType';\nclass Diagram {\n type = 'graph';\n parser;\n renderer;\n db;\n constructor(txt) {\n const diagrams = getDiagrams();\n const cnf = configApi.getConfig();\n this.txt = txt;\n this.type = detectType(txt, cnf);\n log.debug('Type ' + this.type);\n\n // console.log('this.type', this.type, diagrams[this.type]);\n // Setup diagram\n this.db = diagrams[this.type].db;\n this.renderer = diagrams[this.type].renderer;\n this.parser = diagrams[this.type].parser;\n this.parser.parser.yy = this.db;\n if (typeof diagrams[this.type].init === 'function') {\n diagrams[this.type].init(cnf);\n log.debug('Initialized diagram ' + this.type, cnf);\n }\n this.txt = this.txt + '\\n';\n\n this.parser.parser.yy.graphType = this.type;\n this.parser.parser.yy.parseError = (str, hash) => {\n const error = { str, hash };\n throw error;\n };\n this.parser.parse(this.txt);\n }\n parse(text) {\n var parseEncounteredException = false;\n try {\n text = text + '\\n';\n this.db.clear();\n\n this.parser.parse(text);\n } catch (error) {\n parseEncounteredException = true;\n // Is this the correct way to access mermiad's parseError()\n // method ? (or global.mermaid.parseError()) ?\n if (global.mermaid.parseError) {\n if (error.str != undefined) {\n // handle case where error string and hash were\n // wrapped in object like`const error = { str, hash };`\n global.mermaid.parseError(error.str, error.hash);\n } else {\n // assume it is just error string and pass it on\n global.mermaid.parseError(error);\n }\n } else {\n // No mermaid.parseError() handler defined, so re-throw it\n throw error;\n }\n }\n return !parseEncounteredException;\n }\n getParser() {\n return this.parser;\n }\n getType() {\n return this.type;\n }\n}\n\nexport default Diagram;\n","/**\n * This method will add a basic title and description element to a chart. The yy parser will need to\n * respond to getAccTitle and getAccDescription, where the title is the title element on the chart,\n * which is generally not displayed and the accDescription is the description element on the chart,\n * which is never displayed.\n *\n * The following charts display their title as a visual and accessibility element: gantt\n *\n * @param yy_parser\n * @param svg\n * @param id\n */\nexport default function addSVGAccessibilityFields(yy_parser, svg, id) {\n if (typeof svg.insert === 'undefined') {\n return;\n }\n\n let title_string = yy_parser.getAccTitle();\n let description = yy_parser.getAccDescription();\n svg.attr('role', 'img').attr('aria-labelledby', 'chart-title-' + id + ' chart-desc-' + id);\n svg\n .insert('desc', ':first-child')\n .attr('id', 'chart-desc-' + id)\n .text(description);\n svg\n .insert('title', ':first-child')\n .attr('id', 'chart-title-' + id)\n .text(title_string);\n}\n","/**\n * @function assignWithDepth Extends the functionality of {@link ObjectConstructor.assign} with the\n * ability to merge arbitrary-depth objects For each key in src with path `k` (recursively)\n * performs an Object.assign(dst[`k`], src[`k`]) with a slight change from the typical handling of\n * undefined for dst[`k`]: instead of raising an error, dst[`k`] is auto-initialized to {} and\n * effectively merged with src[`k`] Additionally, dissimilar types will not clobber unless the\n * config.clobber parameter === true. Example:\n *\n * ```js\n * let config_0 = { foo: { bar: 'bar' }, bar: 'foo' };\n * let config_1 = { foo: 'foo', bar: 'bar' };\n * let result = assignWithDepth(config_0, config_1);\n * console.log(result);\n * //-> result: { foo: { bar: 'bar' }, bar: 'bar' }\n * ```\n *\n * Traditional Object.assign would have clobbered foo in config_0 with foo in config_1. If src is a\n * destructured array of objects and dst is not an array, assignWithDepth will apply each element\n * of src to dst in order.\n * @param dst\n * @param src\n * @param config\n * @param dst\n * @param src\n * @param config\n * @param dst\n * @param src\n * @param config\n * @param {any} dst - The destination of the merge\n * @param {any} src - The source object(s) to merge into destination\n * @param {{ depth: number; clobber: boolean }} [config={ depth: 2, clobber: false }] - Depth: depth\n * to traverse within src and dst for merging - clobber: should dissimilar types clobber (default:\n * { depth: 2, clobber: false }). Default is `{ depth: 2, clobber: false }`\n * @returns {any}\n */\nconst assignWithDepth = function (dst, src, config) {\n const { depth, clobber } = Object.assign({ depth: 2, clobber: false }, config);\n if (Array.isArray(src) && !Array.isArray(dst)) {\n src.forEach((s) => assignWithDepth(dst, s, config));\n return dst;\n } else if (Array.isArray(src) && Array.isArray(dst)) {\n src.forEach((s) => {\n if (dst.indexOf(s) === -1) {\n dst.push(s);\n }\n });\n return dst;\n }\n if (typeof dst === 'undefined' || depth <= 0) {\n if (dst !== undefined && dst !== null && typeof dst === 'object' && typeof src === 'object') {\n return Object.assign(dst, src);\n } else {\n return src;\n }\n }\n if (typeof src !== 'undefined' && typeof dst === 'object' && typeof src === 'object') {\n Object.keys(src).forEach((key) => {\n if (\n typeof src[key] === 'object' &&\n (dst[key] === undefined || typeof dst[key] === 'object')\n ) {\n if (dst[key] === undefined) {\n dst[key] = Array.isArray(src[key]) ? [] : {};\n }\n dst[key] = assignWithDepth(dst[key], src[key], { depth: depth - 1, clobber });\n } else if (clobber || (typeof dst[key] !== 'object' && typeof src[key] !== 'object')) {\n dst[key] = src[key];\n }\n });\n }\n return dst;\n};\n\nexport default assignWithDepth;\n","import { sanitizeText as _sanitizeText } from './diagrams/common/common';\nimport { getConfig } from './config';\nlet title = '';\nlet diagramTitle = '';\nlet description = '';\nconst sanitizeText = (txt) => _sanitizeText(txt, getConfig());\n\nexport const clear = function () {\n title = '';\n description = '';\n diagramTitle = '';\n};\n\nexport const setAccTitle = function (txt) {\n title = sanitizeText(txt).replace(/^\\s+/g, '');\n};\n\nexport const getAccTitle = function () {\n return title || diagramTitle;\n};\n\nexport const setAccDescription = function (txt) {\n description = sanitizeText(txt).replace(/\\n\\s+/g, '\\n');\n};\n\nexport const getAccDescription = function () {\n return description;\n};\n\nexport const setDiagramTitle = function (txt) {\n diagramTitle = sanitizeText(txt);\n};\n\nexport const getDiagramTitle = function () {\n return diagramTitle;\n};\n\nexport default {\n setAccTitle,\n getAccTitle,\n setDiagramTitle,\n getDiagramTitle: getDiagramTitle,\n getAccDescription,\n setAccDescription,\n clear,\n};\n","import assignWithDepth from './assignWithDepth';\nimport { log } from './logger';\nimport theme from './themes';\nimport config from './defaultConfig';\n\nexport const defaultConfig = Object.freeze(config);\n\nlet siteConfig = assignWithDepth({}, defaultConfig);\nlet configFromInitialize;\nlet directives = [];\nlet currentConfig = assignWithDepth({}, defaultConfig);\n\nexport const updateCurrentConfig = (siteCfg, _directives) => {\n // start with config beeing the siteConfig\n let cfg = assignWithDepth({}, siteCfg);\n // let sCfg = assignWithDepth(defaultConfig, siteConfigDelta);\n\n // Join directives\n let sumOfDirectives = {};\n for (let i = 0; i < _directives.length; i++) {\n const d = _directives[i];\n sanitize(d);\n\n // Apply the data from the directive where the the overrides the themeVariables\n sumOfDirectives = assignWithDepth(sumOfDirectives, d);\n }\n\n cfg = assignWithDepth(cfg, sumOfDirectives);\n\n if (sumOfDirectives.theme && theme[sumOfDirectives.theme]) {\n const tmpConfigFromInitialize = assignWithDepth({}, configFromInitialize);\n const themeVariables = assignWithDepth(\n tmpConfigFromInitialize.themeVariables || {},\n sumOfDirectives.themeVariables\n );\n cfg.themeVariables = theme[cfg.theme].getThemeVariables(themeVariables);\n }\n\n currentConfig = cfg;\n return cfg;\n};\n\n/**\n * ## setSiteConfig\n *\n * | Function | Description | Type | Values |\n * | ------------- | ------------------------------------- | ----------- | --------------------------------------- |\n * | setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |\n *\n * **Notes:** Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls\n * to reset() will reset the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig)\n * will reset siteConfig and currentConfig to the defaultConfig Note: currentConfig is set in this\n * function _Default value: At default, will mirror Global Config_\n *\n * @param conf - The base currentConfig to use as siteConfig\n * @returns {object} - The siteConfig\n */\nexport const setSiteConfig = (conf) => {\n siteConfig = assignWithDepth({}, defaultConfig);\n siteConfig = assignWithDepth(siteConfig, conf);\n\n if (conf.theme && theme[conf.theme]) {\n siteConfig.themeVariables = theme[conf.theme].getThemeVariables(conf.themeVariables);\n }\n\n currentConfig = updateCurrentConfig(siteConfig, directives);\n return siteConfig;\n};\n\nexport const saveConfigFromInitialize = (conf) => {\n configFromInitialize = assignWithDepth({}, conf);\n};\n\nexport const updateSiteConfig = (conf) => {\n siteConfig = assignWithDepth(siteConfig, conf);\n updateCurrentConfig(siteConfig, directives);\n\n return siteConfig;\n};\n/**\n * ## getSiteConfig\n *\n * | Function | Description | Type | Values |\n * | ------------- | ------------------------------------------------- | ----------- | -------------------------------- |\n * | setSiteConfig | Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig |\n *\n * **Notes**: Returns **any** values in siteConfig.\n *\n * @returns {object} - The siteConfig\n */\nexport const getSiteConfig = () => {\n return assignWithDepth({}, siteConfig);\n};\n/**\n * ## setConfig\n *\n * | Function | Description | Type | Values |\n * | ------------- | ------------------------------------- | ----------- | --------------------------------------- |\n * | setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |\n *\n * **Notes**: Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure\n * keys. Any values found in conf with key found in siteConfig.secure will be replaced with the\n * corresponding siteConfig value.\n *\n * @param {any} conf - The potential currentConfig\n * @returns {any} - The currentConfig merged with the sanitized conf\n */\nexport const setConfig = (conf) => {\n // sanitize(conf);\n // Object.keys(conf).forEach(key => {\n // const manipulator = manipulators[key];\n // conf[key] = manipulator ? manipulator(conf[key]) : conf[key];\n // });\n\n assignWithDepth(currentConfig, conf);\n\n return getConfig();\n};\n\n/**\n * ## getConfig\n *\n * | Function | Description | Type | Return Values |\n * | --------- | ------------------------- | ----------- | ------------------------------ |\n * | getConfig | Obtains the currentConfig | Get Request | Any Values from current Config |\n *\n * **Notes**: Returns **any** the currentConfig\n *\n * @returns {any} - The currentConfig\n */\nexport const getConfig = () => {\n return assignWithDepth({}, currentConfig);\n};\n/**\n * ## sanitize\n *\n * | Function | Description | Type | Values |\n * | -------- | -------------------------------------- | ----------- | ------ |\n * | sanitize | Sets the siteConfig to desired values. | Put Request | None |\n *\n * Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies\n * options in-place\n *\n * @param {any} options - The potential setConfig parameter\n */\nexport const sanitize = (options) => {\n // Checking that options are not in the list of excluded options\n Object.keys(siteConfig.secure).forEach((key) => {\n if (typeof options[siteConfig.secure[key]] !== 'undefined') {\n // DO NOT attempt to print options[siteConfig.secure[key]] within `${}` as a malicious script\n // can exploit the logger's attempt to stringify the value and execute arbitrary code\n log.debug(\n `Denied attempt to modify a secure key ${siteConfig.secure[key]}`,\n options[siteConfig.secure[key]]\n );\n delete options[siteConfig.secure[key]];\n }\n });\n\n // Check that there no attempts of prototype pollution\n Object.keys(options).forEach((key) => {\n if (key.indexOf('__') === 0) {\n delete options[key];\n }\n });\n // Check that there no attempts of xss, there should be no tags at all in the directive\n // blocking data urls as base64 urls can contain svgs with inline script tags\n Object.keys(options).forEach((key) => {\n if (typeof options[key] === 'string') {\n if (\n options[key].indexOf('<') > -1 ||\n options[key].indexOf('>') > -1 ||\n options[key].indexOf('url(data:') > -1\n ) {\n delete options[key];\n }\n }\n if (typeof options[key] === 'object') {\n sanitize(options[key]);\n }\n });\n};\n\n/**\n * Pushes in a directive to the configuration\n *\n * @param {object} directive The directive to push in\n */\nexport const addDirective = (directive) => {\n if (directive.fontFamily) {\n if (!directive.themeVariables) {\n directive.themeVariables = { fontFamily: directive.fontFamily };\n } else {\n if (!directive.themeVariables.fontFamily) {\n directive.themeVariables = { fontFamily: directive.fontFamily };\n }\n }\n }\n directives.push(directive);\n updateCurrentConfig(siteConfig, directives);\n};\n\n/**\n * ## reset\n *\n * | Function | Description | Type | Required | Values |\n * | -------- | ---------------------------- | ----------- | -------- | ------ |\n * | reset | Resets currentConfig to conf | Put Request | Required | None |\n *\n * ## conf\n *\n * | Parameter | Description | Type | Required | Values |\n * | --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |\n * | conf | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |\n *\n * **Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)\n */\nexport const reset = () => {\n // Replace current config with siteConfig\n directives = [];\n updateCurrentConfig(siteConfig, directives);\n};\n","import intersectRect from './intersect/intersect-rect';\nimport { log } from '../logger';\nimport createLabel from './createLabel';\nimport { select } from 'd3';\nimport { getConfig } from '../config';\nimport { evaluate } from '../diagrams/common/common';\n\nconst rect = (parent, node) => {\n log.trace('Creating subgraph rect for ', node.id, node);\n\n // Add outer g element\n const shapeSvg = parent\n .insert('g')\n .attr('class', 'cluster' + (node.class ? ' ' + node.class : ''))\n .attr('id', node.id);\n\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n // Create the label and insert it after the rect\n const label = shapeSvg.insert('g').attr('class', 'cluster-label');\n\n const text = label\n .node()\n .appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));\n\n // Get the size of the label\n let bbox = text.getBBox();\n\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = text.children[0];\n const dv = select(text);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n\n const padding = 0 * node.padding;\n const halfPadding = padding / 2;\n\n const width = node.width <= bbox.width + padding ? bbox.width + padding : node.width;\n if (node.width <= bbox.width + padding) {\n node.diff = (bbox.width - node.width) / 2 - node.padding / 2;\n } else {\n node.diff = -node.padding / 2;\n }\n\n log.trace('Data ', node, JSON.stringify(node));\n // center the rect around its coordinate\n rect\n .attr('style', node.style)\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('x', node.x - width / 2)\n .attr('y', node.y - node.height / 2 - halfPadding)\n .attr('width', width)\n .attr('height', node.height + padding);\n\n // Center the label\n label.attr(\n 'transform',\n 'translate(' +\n (node.x - bbox.width / 2) +\n ', ' +\n (node.y - node.height / 2 + node.padding / 3) +\n ')'\n );\n\n const rectBox = rect.node().getBBox();\n node.width = rectBox.width;\n node.height = rectBox.height;\n\n node.intersect = function (point) {\n return intersectRect(node, point);\n };\n\n return shapeSvg;\n};\n\n/**\n * Non visible cluster where the note is group with its\n *\n * @param {any} parent\n * @param {any} node\n * @returns {any} ShapeSvg\n */\nconst noteGroup = (parent, node) => {\n // Add outer g element\n const shapeSvg = parent.insert('g').attr('class', 'note-cluster').attr('id', node.id);\n\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n const padding = 0 * node.padding;\n const halfPadding = padding / 2;\n\n // center the rect around its coordinate\n rect\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('x', node.x - node.width / 2 - halfPadding)\n .attr('y', node.y - node.height / 2 - halfPadding)\n .attr('width', node.width + padding)\n .attr('height', node.height + padding)\n .attr('fill', 'none');\n\n const rectBox = rect.node().getBBox();\n node.width = rectBox.width;\n node.height = rectBox.height;\n\n node.intersect = function (point) {\n return intersectRect(node, point);\n };\n\n return shapeSvg;\n};\nconst roundedWithTitle = (parent, node) => {\n // Add outer g element\n const shapeSvg = parent.insert('g').attr('class', node.classes).attr('id', node.id);\n\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n // Create the label and insert it after the rect\n const label = shapeSvg.insert('g').attr('class', 'cluster-label');\n const innerRect = shapeSvg.append('rect');\n\n const text = label\n .node()\n .appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));\n\n // Get the size of the label\n let bbox = text.getBBox();\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = text.children[0];\n const dv = select(text);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n bbox = text.getBBox();\n const padding = 0 * node.padding;\n const halfPadding = padding / 2;\n\n const width = node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width;\n if (node.width <= bbox.width + node.padding) {\n node.diff = (bbox.width + node.padding * 0 - node.width) / 2;\n } else {\n node.diff = -node.padding / 2;\n }\n\n // center the rect around its coordinate\n rect\n .attr('class', 'outer')\n .attr('x', node.x - width / 2 - halfPadding)\n .attr('y', node.y - node.height / 2 - halfPadding)\n .attr('width', width + padding)\n .attr('height', node.height + padding);\n innerRect\n .attr('class', 'inner')\n .attr('x', node.x - width / 2 - halfPadding)\n .attr('y', node.y - node.height / 2 - halfPadding + bbox.height - 1)\n .attr('width', width + padding)\n .attr('height', node.height + padding - bbox.height - 3);\n\n // Center the label\n label.attr(\n 'transform',\n 'translate(' +\n (node.x - bbox.width / 2) +\n ', ' +\n (node.y -\n node.height / 2 -\n node.padding / 3 +\n (evaluate(getConfig().flowchart.htmlLabels) ? 5 : 3)) +\n ')'\n );\n\n const rectBox = rect.node().getBBox();\n node.height = rectBox.height;\n\n node.intersect = function (point) {\n return intersectRect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst divider = (parent, node) => {\n // Add outer g element\n const shapeSvg = parent.insert('g').attr('class', node.classes).attr('id', node.id);\n\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n const padding = 0 * node.padding;\n const halfPadding = padding / 2;\n\n // center the rect around its coordinate\n rect\n .attr('class', 'divider')\n .attr('x', node.x - node.width / 2 - halfPadding)\n .attr('y', node.y - node.height / 2)\n .attr('width', node.width + padding)\n .attr('height', node.height + padding);\n\n const rectBox = rect.node().getBBox();\n node.width = rectBox.width;\n node.height = rectBox.height;\n node.diff = -node.padding / 2;\n node.intersect = function (point) {\n return intersectRect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst shapes = { rect, roundedWithTitle, noteGroup, divider };\n\nlet clusterElems = {};\n\nexport const insertCluster = (elem, node) => {\n log.trace('Inserting cluster');\n const shape = node.shape || 'rect';\n clusterElems[node.id] = shapes[shape](elem, node);\n};\nexport const getClusterTitleWidth = (elem, node) => {\n const label = createLabel(node.labelText, node.labelStyle, undefined, true);\n elem.node().appendChild(label);\n const width = label.getBBox().width;\n elem.node().removeChild(label);\n return width;\n};\n\nexport const clear = () => {\n clusterElems = {};\n};\n\nexport const positionCluster = (node) => {\n log.info('Position cluster (' + node.id + ', ' + node.x + ', ' + node.y + ')');\n const el = clusterElems[node.id];\n\n el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');\n};\n","import { select } from 'd3';\nimport { log } from '../logger'; // eslint-disable-line\nimport { getConfig } from '../config';\nimport { sanitizeText, evaluate } from '../diagrams/common/common';\nimport { decodeEntities } from '../mermaidAPI';\n\nconst sanitizeTxt = (txt) => sanitizeText(txt, getConfig());\n\n/**\n * @param dom\n * @param styleFn\n */\nfunction applyStyle(dom, styleFn) {\n if (styleFn) {\n dom.attr('style', styleFn);\n }\n}\n\n/**\n * @param {any} node\n * @returns {SVGForeignObjectElement} Node\n */\nfunction addHtmlLabel(node) {\n const fo = select(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'));\n const div = fo.append('xhtml:div');\n\n const label = node.label;\n const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';\n div.html(\n '' +\n label +\n ''\n );\n\n applyStyle(div, node.labelStyle);\n div.style('display', 'inline-block');\n // Fix for firefox\n div.style('white-space', 'nowrap');\n div.attr('xmlns', 'http://www.w3.org/1999/xhtml');\n return fo.node();\n}\n\nconst createLabel = (_vertexText, style, isTitle, isNode) => {\n let vertexText = _vertexText || '';\n if (typeof vertexText === 'object') vertexText = vertexText[0];\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?\n vertexText = vertexText.replace(/\\\\n|\\n/g, '
');\n log.info('vertexText' + vertexText);\n const node = {\n isNode,\n label: decodeEntities(vertexText).replace(\n /fa[lrsb]?:fa-[\\w-]+/g,\n (s) => ``\n ),\n labelStyle: style.replace('fill:', 'color:'),\n };\n let vertexNode = addHtmlLabel(node);\n // vertexNode.parentNode.removeChild(vertexNode);\n return vertexNode;\n } else {\n const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n svgLabel.setAttribute('style', style.replace('color:', 'fill:'));\n let rows = [];\n if (typeof vertexText === 'string') {\n rows = vertexText.split(/\\\\n|\\n|/gi);\n } else if (Array.isArray(vertexText)) {\n rows = vertexText;\n } else {\n rows = [];\n }\n\n for (let j = 0; j < rows.length; j++) {\n const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');\n tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');\n tspan.setAttribute('dy', '1em');\n tspan.setAttribute('x', '0');\n if (isTitle) {\n tspan.setAttribute('class', 'title-row');\n } else {\n tspan.setAttribute('class', 'row');\n }\n tspan.textContent = rows[j].trim();\n svgLabel.appendChild(tspan);\n }\n return svgLabel;\n }\n};\n\nexport default createLabel;\n","import { log } from '../logger'; // eslint-disable-line\nimport createLabel from './createLabel';\nimport { line, curveBasis, select } from 'd3';\nimport { getConfig } from '../config';\nimport utils from '../utils';\nimport { evaluate } from '../diagrams/common/common';\n\nlet edgeLabels = {};\nlet terminalLabels = {};\n\nexport const clear = () => {\n edgeLabels = {};\n terminalLabels = {};\n};\n\nexport const insertEdgeLabel = (elem, edge) => {\n // Create the actual text element\n const labelElement = createLabel(edge.label, edge.labelStyle);\n\n // Create outer g, edgeLabel, this will be positioned after graph layout\n const edgeLabel = elem.insert('g').attr('class', 'edgeLabel');\n\n // Create inner g, label, this will be positioned now for centering the text\n const label = edgeLabel.insert('g').attr('class', 'label');\n label.node().appendChild(labelElement);\n\n // Center the label\n let bbox = labelElement.getBBox();\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = labelElement.children[0];\n const dv = select(labelElement);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');\n\n // Make element accessible by id for positioning\n edgeLabels[edge.id] = edgeLabel;\n\n // Update the abstract data of the edge with the new information about its width and height\n edge.width = bbox.width;\n edge.height = bbox.height;\n\n let fo;\n if (edge.startLabelLeft) {\n // Create the actual text element\n const startLabelElement = createLabel(edge.startLabelLeft, edge.labelStyle);\n const startEdgeLabelLeft = elem.insert('g').attr('class', 'edgeTerminals');\n const inner = startEdgeLabelLeft.insert('g').attr('class', 'inner');\n fo = inner.node().appendChild(startLabelElement);\n const slBox = startLabelElement.getBBox();\n inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');\n if (!terminalLabels[edge.id]) {\n terminalLabels[edge.id] = {};\n }\n terminalLabels[edge.id].startLeft = startEdgeLabelLeft;\n setTerminalWidth(fo, edge.startLabelLeft);\n }\n if (edge.startLabelRight) {\n // Create the actual text element\n const startLabelElement = createLabel(edge.startLabelRight, edge.labelStyle);\n const startEdgeLabelRight = elem.insert('g').attr('class', 'edgeTerminals');\n const inner = startEdgeLabelRight.insert('g').attr('class', 'inner');\n fo = startEdgeLabelRight.node().appendChild(startLabelElement);\n inner.node().appendChild(startLabelElement);\n const slBox = startLabelElement.getBBox();\n inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');\n\n if (!terminalLabels[edge.id]) {\n terminalLabels[edge.id] = {};\n }\n terminalLabels[edge.id].startRight = startEdgeLabelRight;\n setTerminalWidth(fo, edge.startLabelRight);\n }\n if (edge.endLabelLeft) {\n // Create the actual text element\n const endLabelElement = createLabel(edge.endLabelLeft, edge.labelStyle);\n const endEdgeLabelLeft = elem.insert('g').attr('class', 'edgeTerminals');\n const inner = endEdgeLabelLeft.insert('g').attr('class', 'inner');\n fo = inner.node().appendChild(endLabelElement);\n const slBox = endLabelElement.getBBox();\n inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');\n\n endEdgeLabelLeft.node().appendChild(endLabelElement);\n\n if (!terminalLabels[edge.id]) {\n terminalLabels[edge.id] = {};\n }\n terminalLabels[edge.id].endLeft = endEdgeLabelLeft;\n setTerminalWidth(fo, edge.endLabelLeft);\n }\n if (edge.endLabelRight) {\n // Create the actual text element\n const endLabelElement = createLabel(edge.endLabelRight, edge.labelStyle);\n const endEdgeLabelRight = elem.insert('g').attr('class', 'edgeTerminals');\n const inner = endEdgeLabelRight.insert('g').attr('class', 'inner');\n\n fo = inner.node().appendChild(endLabelElement);\n const slBox = endLabelElement.getBBox();\n inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');\n\n endEdgeLabelRight.node().appendChild(endLabelElement);\n if (!terminalLabels[edge.id]) {\n terminalLabels[edge.id] = {};\n }\n terminalLabels[edge.id].endRight = endEdgeLabelRight;\n setTerminalWidth(fo, edge.endLabelRight);\n }\n};\n\n/**\n * @param {any} fo\n * @param {any} value\n */\nfunction setTerminalWidth(fo, value) {\n if (getConfig().flowchart.htmlLabels && fo) {\n fo.style.width = value.length * 9 + 'px';\n fo.style.height = '12px';\n }\n}\n\nexport const positionEdgeLabel = (edge, paths) => {\n log.info('Moving label abc78 ', edge.id, edge.label, edgeLabels[edge.id]);\n let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;\n if (edge.label) {\n const el = edgeLabels[edge.id];\n let x = edge.x;\n let y = edge.y;\n if (path) {\n // // debugger;\n const pos = utils.calcLabelPosition(path);\n log.info('Moving label from (', x, ',', y, ') to (', pos.x, ',', pos.y, ') abc78');\n // x = pos.x;\n // y = pos.y;\n }\n el.attr('transform', 'translate(' + x + ', ' + y + ')');\n }\n\n //let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;\n if (edge.startLabelLeft) {\n const el = terminalLabels[edge.id].startLeft;\n let x = edge.x;\n let y = edge.y;\n if (path) {\n // debugger;\n const pos = utils.calcTerminalLabelPosition(edge.arrowTypeStart ? 10 : 0, 'start_left', path);\n x = pos.x;\n y = pos.y;\n }\n el.attr('transform', 'translate(' + x + ', ' + y + ')');\n }\n if (edge.startLabelRight) {\n const el = terminalLabels[edge.id].startRight;\n let x = edge.x;\n let y = edge.y;\n if (path) {\n // debugger;\n const pos = utils.calcTerminalLabelPosition(\n edge.arrowTypeStart ? 10 : 0,\n 'start_right',\n path\n );\n x = pos.x;\n y = pos.y;\n }\n el.attr('transform', 'translate(' + x + ', ' + y + ')');\n }\n if (edge.endLabelLeft) {\n const el = terminalLabels[edge.id].endLeft;\n let x = edge.x;\n let y = edge.y;\n if (path) {\n // debugger;\n const pos = utils.calcTerminalLabelPosition(edge.arrowTypeEnd ? 10 : 0, 'end_left', path);\n x = pos.x;\n y = pos.y;\n }\n el.attr('transform', 'translate(' + x + ', ' + y + ')');\n }\n if (edge.endLabelRight) {\n const el = terminalLabels[edge.id].endRight;\n let x = edge.x;\n let y = edge.y;\n if (path) {\n // debugger;\n const pos = utils.calcTerminalLabelPosition(edge.arrowTypeEnd ? 10 : 0, 'end_right', path);\n x = pos.x;\n y = pos.y;\n }\n el.attr('transform', 'translate(' + x + ', ' + y + ')');\n }\n};\n\nconst outsideNode = (node, point) => {\n // log.warn('Checking bounds ', node, point);\n const x = node.x;\n const y = node.y;\n const dx = Math.abs(point.x - x);\n const dy = Math.abs(point.y - y);\n const w = node.width / 2;\n const h = node.height / 2;\n if (dx >= w || dy >= h) {\n return true;\n }\n return false;\n};\n\nexport const intersection = (node, outsidePoint, insidePoint) => {\n log.warn(`intersection calc abc89:\n outsidePoint: ${JSON.stringify(outsidePoint)}\n insidePoint : ${JSON.stringify(insidePoint)}\n node : x:${node.x} y:${node.y} w:${node.width} h:${node.height}`);\n const x = node.x;\n const y = node.y;\n\n const dx = Math.abs(x - insidePoint.x);\n // const dy = Math.abs(y - insidePoint.y);\n const w = node.width / 2;\n let r = insidePoint.x < outsidePoint.x ? w - dx : w + dx;\n const h = node.height / 2;\n\n // const edges = {\n // x1: x - w,\n // x2: x + w,\n // y1: y - h,\n // y2: y + h\n // };\n\n // if (\n // outsidePoint.x === edges.x1 ||\n // outsidePoint.x === edges.x2 ||\n // outsidePoint.y === edges.y1 ||\n // outsidePoint.y === edges.y2\n // ) {\n // log.warn('abc89 calc equals on edge', outsidePoint, edges);\n // return outsidePoint;\n // }\n\n const Q = Math.abs(outsidePoint.y - insidePoint.y);\n const R = Math.abs(outsidePoint.x - insidePoint.x);\n // log.warn();\n if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) { // eslint-disable-line\n // Intersection is top or bottom of rect.\n // let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;\n let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;\n r = (R * q) / Q;\n const res = {\n x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x - R + r,\n y: insidePoint.y < outsidePoint.y ? insidePoint.y + Q - q : insidePoint.y - Q + q,\n };\n\n if (r === 0) {\n res.x = outsidePoint.x;\n res.y = outsidePoint.y;\n }\n if (R === 0) {\n res.x = outsidePoint.x;\n }\n if (Q === 0) {\n res.y = outsidePoint.y;\n }\n\n log.warn(`abc89 topp/bott calc, Q ${Q}, q ${q}, R ${R}, r ${r}`, res);\n\n return res;\n } else {\n // Intersection onn sides of rect\n if (insidePoint.x < outsidePoint.x) {\n r = outsidePoint.x - w - x;\n } else {\n // r = outsidePoint.x - w - x;\n r = x - w - outsidePoint.x;\n }\n let q = (Q * r) / R;\n // OK let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x + dx - w;\n // OK let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : outsidePoint.x + r;\n let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x - R + r;\n // let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : outsidePoint.x + r;\n let _y = insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q;\n log.warn(`sides calc abc89, Q ${Q}, q ${q}, R ${R}, r ${r}`, { _x, _y });\n if (r === 0) {\n _x = outsidePoint.x;\n _y = outsidePoint.y;\n }\n if (R === 0) {\n _x = outsidePoint.x;\n }\n if (Q === 0) {\n _y = outsidePoint.y;\n }\n\n return { x: _x, y: _y };\n }\n};\n/**\n * This function will page a path and node where the last point(s) in the path is inside the node\n * and return an update path ending by the border of the node.\n *\n * @param {Array} _points\n * @param {any} boundryNode\n * @returns {Array} Points\n */\nconst cutPathAtIntersect = (_points, boundryNode) => {\n log.warn('abc88 cutPathAtIntersect', _points, boundryNode);\n let points = [];\n let lastPointOutside = _points[0];\n let isInside = false;\n _points.forEach((point) => {\n // const node = clusterDb[edge.toCluster].node;\n log.info('abc88 checking point', point, boundryNode);\n\n // check if point is inside the boundry rect\n if (!outsideNode(boundryNode, point) && !isInside) {\n // First point inside the rect found\n // Calc the intersection coord between the point anf the last point outside the rect\n const inter = intersection(boundryNode, lastPointOutside, point);\n log.warn('abc88 inside', point, lastPointOutside, inter);\n log.warn('abc88 intersection', inter);\n\n // // Check case where the intersection is the same as the last point\n let pointPresent = false;\n points.forEach((p) => {\n pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y);\n });\n // // if (!pointPresent) {\n if (!points.find((e) => e.x === inter.x && e.y === inter.y)) {\n points.push(inter);\n } else {\n log.warn('abc88 no intersect', inter, points);\n }\n // points.push(inter);\n isInside = true;\n } else {\n // Outside\n log.warn('abc88 outside', point, lastPointOutside);\n lastPointOutside = point;\n // points.push(point);\n if (!isInside) points.push(point);\n }\n });\n log.warn('abc88 returning points', points);\n return points;\n};\n\n//(edgePaths, e, edge, clusterDb, diagramtype, graph)\nexport const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph) {\n let points = edge.points;\n let pointsHasChanged = false;\n const tail = graph.node(e.v);\n var head = graph.node(e.w);\n\n log.info('abc88 InsertEdge: ', edge);\n if (head.intersect && tail.intersect) {\n points = points.slice(1, edge.points.length - 1);\n points.unshift(tail.intersect(points[0]));\n log.info(\n 'Last point',\n points[points.length - 1],\n head,\n head.intersect(points[points.length - 1])\n );\n points.push(head.intersect(points[points.length - 1]));\n }\n if (edge.toCluster) {\n log.info('to cluster abc88', clusterDb[edge.toCluster]);\n points = cutPathAtIntersect(edge.points, clusterDb[edge.toCluster].node);\n // log.trace('edge', edge);\n // points = [];\n // let lastPointOutside; // = edge.points[0];\n // let isInside = false;\n // edge.points.forEach(point => {\n // const node = clusterDb[edge.toCluster].node;\n // log.warn('checking from', edge.fromCluster, point, node);\n\n // if (!outsideNode(node, point) && !isInside) {\n // log.trace('inside', edge.toCluster, point, lastPointOutside);\n\n // // First point inside the rect\n // const inter = intersection(node, lastPointOutside, point);\n\n // let pointPresent = false;\n // points.forEach(p => {\n // pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y);\n // });\n // // if (!pointPresent) {\n // if (!points.find(e => e.x === inter.x && e.y === inter.y)) {\n // points.push(inter);\n // } else {\n // log.warn('no intersect', inter, points);\n // }\n // isInside = true;\n // } else {\n // // outside\n // lastPointOutside = point;\n // if (!isInside) points.push(point);\n // }\n // });\n pointsHasChanged = true;\n }\n\n if (edge.fromCluster) {\n log.info('from cluster abc88', clusterDb[edge.fromCluster]);\n points = cutPathAtIntersect(points.reverse(), clusterDb[edge.fromCluster].node).reverse();\n\n pointsHasChanged = true;\n }\n\n // The data for our line\n const lineData = points.filter((p) => !Number.isNaN(p.y));\n\n // This is the accessor function we talked about above\n let curve;\n // Currently only flowcharts get the curve from the settings, perhaps this should\n // be expanded to a common setting? Restricting it for now in order not to cause side-effects that\n // have not been thought through\n if (diagramType === 'graph' || diagramType === 'flowchart') {\n curve = edge.curve || curveBasis;\n } else {\n curve = curveBasis;\n }\n // curve = curveLinear;\n const lineFunction = line()\n .x(function (d) {\n return d.x;\n })\n .y(function (d) {\n return d.y;\n })\n .curve(curve);\n\n // Contruct stroke classes based on properties\n let strokeClasses;\n switch (edge.thickness) {\n case 'normal':\n strokeClasses = 'edge-thickness-normal';\n break;\n case 'thick':\n strokeClasses = 'edge-thickness-thick';\n break;\n default:\n strokeClasses = '';\n }\n switch (edge.pattern) {\n case 'solid':\n strokeClasses += ' edge-pattern-solid';\n break;\n case 'dotted':\n strokeClasses += ' edge-pattern-dotted';\n break;\n case 'dashed':\n strokeClasses += ' edge-pattern-dashed';\n break;\n }\n\n const svgPath = elem\n .append('path')\n .attr('d', lineFunction(lineData))\n .attr('id', edge.id)\n .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))\n .attr('style', edge.style);\n\n // DEBUG code, adds a red circle at each edge coordinate\n // edge.points.forEach(point => {\n // elem\n // .append('circle')\n // .style('stroke', 'red')\n // .style('fill', 'red')\n // .attr('r', 1)\n // .attr('cx', point.x)\n // .attr('cy', point.y);\n // });\n\n let url = '';\n if (getConfig().state.arrowMarkerAbsolute) {\n url =\n window.location.protocol +\n '//' +\n window.location.host +\n window.location.pathname +\n window.location.search;\n url = url.replace(/\\(/g, '\\\\(');\n url = url.replace(/\\)/g, '\\\\)');\n }\n log.info('arrowTypeStart', edge.arrowTypeStart);\n log.info('arrowTypeEnd', edge.arrowTypeEnd);\n\n switch (edge.arrowTypeStart) {\n case 'arrow_cross':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-crossStart' + ')');\n break;\n case 'arrow_point':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-pointStart' + ')');\n break;\n case 'arrow_barb':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-barbStart' + ')');\n break;\n case 'arrow_circle':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-circleStart' + ')');\n break;\n case 'aggregation':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-aggregationStart' + ')');\n break;\n case 'extension':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-extensionStart' + ')');\n break;\n case 'composition':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-compositionStart' + ')');\n break;\n case 'dependency':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-dependencyStart' + ')');\n break;\n default:\n }\n switch (edge.arrowTypeEnd) {\n case 'arrow_cross':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')');\n break;\n case 'arrow_point':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-pointEnd' + ')');\n break;\n case 'arrow_barb':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-barbEnd' + ')');\n break;\n case 'arrow_circle':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-circleEnd' + ')');\n break;\n case 'aggregation':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-aggregationEnd' + ')');\n break;\n case 'extension':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-extensionEnd' + ')');\n break;\n case 'composition':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-compositionEnd' + ')');\n break;\n case 'dependency':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-dependencyEnd' + ')');\n break;\n default:\n }\n let paths = {};\n if (pointsHasChanged) {\n paths.updatedPath = points;\n }\n paths.originalPath = edge.points;\n return paths;\n};\n","import dagre from 'dagre';\nimport graphlib from 'graphlib';\nimport insertMarkers from './markers';\nimport { updateNodeBounds } from './shapes/util';\nimport {\n clear as clearGraphlib,\n clusterDb,\n adjustClustersAndEdges,\n findNonClusterChild,\n sortNodesByHierarchy,\n} from './mermaid-graphlib';\nimport { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes';\nimport { insertCluster, clear as clearClusters } from './clusters';\nimport { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges';\nimport { log } from '../logger';\n\nconst recursiveRender = (_elem, graph, diagramtype, parentCluster) => {\n log.info('Graph in recursive render: XXX', graphlib.json.write(graph), parentCluster);\n const dir = graph.graph().rankdir;\n log.trace('Dir in recursive render - dir:', dir);\n\n const elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line\n if (!graph.nodes()) {\n log.info('No nodes found for', graph);\n } else {\n log.info('Recursive render XXX', graph.nodes());\n }\n if (graph.edges().length > 0) {\n log.trace('Recursive edges', graph.edge(graph.edges()[0]));\n }\n const clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line\n const edgePaths = elem.insert('g').attr('class', 'edgePaths');\n const edgeLabels = elem.insert('g').attr('class', 'edgeLabels');\n const nodes = elem.insert('g').attr('class', 'nodes');\n\n // Insert nodes, this will insert them into the dom and each node will get a size. The size is updated\n // to the abstract node and is later used by dagre for the layout\n graph.nodes().forEach(function (v) {\n const node = graph.node(v);\n if (typeof parentCluster !== 'undefined') {\n const data = JSON.parse(JSON.stringify(parentCluster.clusterData));\n // data.clusterPositioning = true;\n log.info('Setting data for cluster XXX (', v, ') ', data, parentCluster);\n graph.setNode(parentCluster.id, data);\n if (!graph.parent(v)) {\n log.trace('Setting parent', v, parentCluster.id);\n graph.setParent(v, parentCluster.id, data);\n }\n }\n log.info('(Insert) Node XXX' + v + ': ' + JSON.stringify(graph.node(v)));\n if (node && node.clusterNode) {\n // const children = graph.children(v);\n log.info('Cluster identified', v, node.width, graph.node(v));\n const o = recursiveRender(nodes, node.graph, diagramtype, graph.node(v));\n const newEl = o.elem;\n updateNodeBounds(node, newEl);\n node.diff = o.diff || 0;\n log.info('Node bounds (abc123)', v, node, node.width, node.x, node.y);\n setNodeElem(newEl, node);\n\n log.warn('Recursive render complete ', newEl, node);\n } else {\n if (graph.children(v).length > 0) {\n // This is a cluster but not to be rendered recursively\n // Render as before\n log.info('Cluster - the non recursive path XXX', v, node.id, node, graph);\n log.info(findNonClusterChild(node.id, graph));\n clusterDb[node.id] = { id: findNonClusterChild(node.id, graph), node };\n // insertCluster(clusters, graph.node(v));\n } else {\n log.info('Node - the non recursive path', v, node.id, node);\n insertNode(nodes, graph.node(v), dir);\n }\n }\n });\n\n // Insert labels, this will insert them into the dom so that the width can be calculated\n // Also figure out which edges point to/from clusters and adjust them accordingly\n // Edges from/to clusters really points to the first child in the cluster.\n // TODO: pick optimal child in the cluster to us as link anchor\n graph.edges().forEach(function (e) {\n const edge = graph.edge(e.v, e.w, e.name);\n log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));\n log.info('Edge ' + e.v + ' -> ' + e.w + ': ', e, ' ', JSON.stringify(graph.edge(e)));\n\n // Check if link is either from or to a cluster\n log.info('Fix', clusterDb, 'ids:', e.v, e.w, 'Translateing: ', clusterDb[e.v], clusterDb[e.w]);\n insertEdgeLabel(edgeLabels, edge);\n });\n\n graph.edges().forEach(function (e) {\n log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));\n });\n log.info('#############################################');\n log.info('### Layout ###');\n log.info('#############################################');\n log.info(graph);\n dagre.layout(graph);\n log.info('Graph after layout:', graphlib.json.write(graph));\n // Move the nodes to the correct place\n let diff = 0;\n sortNodesByHierarchy(graph).forEach(function (v) {\n const node = graph.node(v);\n log.info('Position ' + v + ': ' + JSON.stringify(graph.node(v)));\n log.info(\n 'Position ' + v + ': (' + node.x,\n ',' + node.y,\n ') width: ',\n node.width,\n ' height: ',\n node.height\n );\n if (node && node.clusterNode) {\n // clusterDb[node.id].node = node;\n\n positionNode(node);\n } else {\n // Non cluster node\n if (graph.children(v).length > 0) {\n // A cluster in the non-recursive way\n // positionCluster(node);\n insertCluster(clusters, node);\n clusterDb[node.id].node = node;\n } else {\n positionNode(node);\n }\n }\n });\n\n // Move the edge labels to the correct place after layout\n graph.edges().forEach(function (e) {\n const edge = graph.edge(e);\n log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);\n\n const paths = insertEdge(edgePaths, e, edge, clusterDb, diagramtype, graph);\n positionEdgeLabel(edge, paths);\n });\n\n graph.nodes().forEach(function (v) {\n const n = graph.node(v);\n log.info(v, n.type, n.diff);\n if (n.type === 'group') {\n diff = n.diff;\n }\n });\n return { elem, diff };\n};\n\nexport const render = (elem, graph, markers, diagramtype, id) => {\n insertMarkers(elem, markers, diagramtype, id);\n clearNodes();\n clearEdges();\n clearClusters();\n clearGraphlib();\n\n log.warn('Graph at first:', graphlib.json.write(graph));\n adjustClustersAndEdges(graph);\n log.warn('Graph after:', graphlib.json.write(graph));\n // log.warn('Graph ever after:', graphlib.json.write(graph.node('A').graph));\n recursiveRender(elem, graph, diagramtype);\n};\n\n// const shapeDefinitions = {};\n// export const addShape = ({ shapeType: fun }) => {\n// shapeDefinitions[shapeType] = fun;\n// };\n\n// const arrowDefinitions = {};\n// export const addArrow = ({ arrowType: fun }) => {\n// arrowDefinitions[arrowType] = fun;\n// };\n","/*\n * Borrowed with love from from dagrge-d3. Many thanks to cpettitt!\n */\n\nimport node from './intersect-node.js';\nimport circle from './intersect-circle.js';\nimport ellipse from './intersect-ellipse.js';\nimport polygon from './intersect-polygon.js';\nimport rect from './intersect-rect.js';\n\nexport default {\n node,\n circle,\n ellipse,\n polygon,\n rect,\n};\n","import intersectEllipse from './intersect-ellipse';\n\n/**\n * @param node\n * @param rx\n * @param point\n */\nfunction intersectCircle(node, rx, point) {\n return intersectEllipse(node, rx, rx, point);\n}\n\nexport default intersectCircle;\n","/**\n * @param node\n * @param rx\n * @param ry\n * @param point\n */\nfunction intersectEllipse(node, rx, ry, point) {\n // Formulae from: https://mathworld.wolfram.com/Ellipse-LineIntersection.html\n\n var cx = node.x;\n var cy = node.y;\n\n var px = cx - point.x;\n var py = cy - point.y;\n\n var det = Math.sqrt(rx * rx * py * py + ry * ry * px * px);\n\n var dx = Math.abs((rx * ry * px) / det);\n if (point.x < cx) {\n dx = -dx;\n }\n var dy = Math.abs((rx * ry * py) / det);\n if (point.y < cy) {\n dy = -dy;\n }\n\n return { x: cx + dx, y: cy + dy };\n}\n\nexport default intersectEllipse;\n","/**\n * Returns the point at which two lines, p and q, intersect or returns undefined if they do not intersect.\n *\n * @param p1\n * @param p2\n * @param q1\n * @param q2\n */\nfunction intersectLine(p1, p2, q1, q2) {\n // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,\n // p7 and p473.\n\n var a1, a2, b1, b2, c1, c2;\n var r1, r2, r3, r4;\n var denom, offset, num;\n var x, y;\n\n // Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x +\n // b1 y + c1 = 0.\n a1 = p2.y - p1.y;\n b1 = p1.x - p2.x;\n c1 = p2.x * p1.y - p1.x * p2.y;\n\n // Compute r3 and r4.\n r3 = a1 * q1.x + b1 * q1.y + c1;\n r4 = a1 * q2.x + b1 * q2.y + c1;\n\n // Check signs of r3 and r4. If both point 3 and point 4 lie on\n // same side of line 1, the line segments do not intersect.\n if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {\n return /*DONT_INTERSECT*/;\n }\n\n // Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0\n a2 = q2.y - q1.y;\n b2 = q1.x - q2.x;\n c2 = q2.x * q1.y - q1.x * q2.y;\n\n // Compute r1 and r2\n r1 = a2 * p1.x + b2 * p1.y + c2;\n r2 = a2 * p2.x + b2 * p2.y + c2;\n\n // Check signs of r1 and r2. If both point 1 and point 2 lie\n // on same side of second line segment, the line segments do\n // not intersect.\n if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) {\n return /*DONT_INTERSECT*/;\n }\n\n // Line segments intersect: compute intersection point.\n denom = a1 * b2 - a2 * b1;\n if (denom === 0) {\n return /*COLLINEAR*/;\n }\n\n offset = Math.abs(denom / 2);\n\n // The denom/2 is to get rounding instead of truncating. It\n // is added or subtracted to the numerator, depending upon the\n // sign of the numerator.\n num = b1 * c2 - b2 * c1;\n x = num < 0 ? (num - offset) / denom : (num + offset) / denom;\n\n num = a2 * c1 - a1 * c2;\n y = num < 0 ? (num - offset) / denom : (num + offset) / denom;\n\n return { x: x, y: y };\n}\n\n/**\n * @param r1\n * @param r2\n */\nfunction sameSign(r1, r2) {\n return r1 * r2 > 0;\n}\n\nexport default intersectLine;\n","module.exports = intersectNode;\n\n/**\n * @param node\n * @param point\n */\nfunction intersectNode(node, point) {\n // console.info('Intersect Node');\n return node.intersect(point);\n}\n","/* eslint \"no-console\": off */\n\nimport intersectLine from './intersect-line';\n\nexport default intersectPolygon;\n\n/**\n * Returns the point ({x, y}) at which the point argument intersects with the node argument assuming\n * that it has the shape specified by polygon.\n *\n * @param node\n * @param polyPoints\n * @param point\n */\nfunction intersectPolygon(node, polyPoints, point) {\n var x1 = node.x;\n var y1 = node.y;\n\n var intersections = [];\n\n var minX = Number.POSITIVE_INFINITY;\n var minY = Number.POSITIVE_INFINITY;\n if (typeof polyPoints.forEach === 'function') {\n polyPoints.forEach(function (entry) {\n minX = Math.min(minX, entry.x);\n minY = Math.min(minY, entry.y);\n });\n } else {\n minX = Math.min(minX, polyPoints.x);\n minY = Math.min(minY, polyPoints.y);\n }\n\n var left = x1 - node.width / 2 - minX;\n var top = y1 - node.height / 2 - minY;\n\n for (var i = 0; i < polyPoints.length; i++) {\n var p1 = polyPoints[i];\n var p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0];\n var intersect = intersectLine(\n node,\n point,\n { x: left + p1.x, y: top + p1.y },\n { x: left + p2.x, y: top + p2.y }\n );\n if (intersect) {\n intersections.push(intersect);\n }\n }\n\n if (!intersections.length) {\n // console.log('NO INTERSECTION FOUND, RETURN NODE CENTER', node);\n return node;\n }\n\n if (intersections.length > 1) {\n // More intersections, find the one nearest to edge end point\n intersections.sort(function (p, q) {\n var pdx = p.x - point.x;\n var pdy = p.y - point.y;\n var distp = Math.sqrt(pdx * pdx + pdy * pdy);\n\n var qdx = q.x - point.x;\n var qdy = q.y - point.y;\n var distq = Math.sqrt(qdx * qdx + qdy * qdy);\n\n return distp < distq ? -1 : distp === distq ? 0 : 1;\n });\n }\n return intersections[0];\n}\n","const intersectRect = (node, point) => {\r\n var x = node.x;\r\n var y = node.y;\r\n\r\n // Rectangle intersection algorithm from:\r\n // https://math.stackexchange.com/questions/108113/find-edge-between-two-boxes\r\n var dx = point.x - x;\r\n var dy = point.y - y;\r\n var w = node.width / 2;\r\n var h = node.height / 2;\r\n\r\n var sx, sy;\r\n if (Math.abs(dy) * w > Math.abs(dx) * h) {\r\n // Intersection is top or bottom of rect.\r\n if (dy < 0) {\r\n h = -h;\r\n }\r\n sx = dy === 0 ? 0 : (h * dx) / dy;\r\n sy = h;\r\n } else {\r\n // Intersection is left or right of rect.\r\n if (dx < 0) {\r\n w = -w;\r\n }\r\n sx = w;\r\n sy = dx === 0 ? 0 : (w * dy) / dx;\r\n }\r\n\r\n return { x: x + sx, y: y + sy };\r\n};\r\n\r\nexport default intersectRect;\r\n","/** Setup arrow head and define the marker. The result is appended to the svg. */\n\nimport { log } from '../logger';\n\n// Only add the number of markers that the diagram needs\nconst insertMarkers = (elem, markerArray, type, id) => {\n markerArray.forEach((markerName) => {\n markers[markerName](elem, type, id);\n });\n};\n\nconst extension = (elem, type, id) => {\n log.trace('Making markers for ', id);\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-extensionStart')\n .attr('class', 'marker extension ' + type)\n .attr('refX', 0)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 1,7 L18,13 V 1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-extensionEnd')\n .attr('class', 'marker extension ' + type)\n .attr('refX', 19)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 1,1 V 13 L18,7 Z'); // this is actual shape for arrowhead\n};\n\nconst composition = (elem, type) => {\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-compositionStart')\n .attr('class', 'marker composition ' + type)\n .attr('refX', 0)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-compositionEnd')\n .attr('class', 'marker composition ' + type)\n .attr('refX', 19)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n};\nconst aggregation = (elem, type) => {\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-aggregationStart')\n .attr('class', 'marker aggregation ' + type)\n .attr('refX', 0)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-aggregationEnd')\n .attr('class', 'marker aggregation ' + type)\n .attr('refX', 19)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n};\nconst dependency = (elem, type) => {\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-dependencyStart')\n .attr('class', 'marker dependency ' + type)\n .attr('refX', 0)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-dependencyEnd')\n .attr('class', 'marker dependency ' + type)\n .attr('refX', 19)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');\n};\nconst point = (elem, type) => {\n elem\n .append('marker')\n .attr('id', type + '-pointEnd')\n .attr('class', 'marker ' + type)\n .attr('viewBox', '0 0 10 10')\n .attr('refX', 9)\n .attr('refY', 5)\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 12)\n .attr('markerHeight', 12)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 0 0 L 10 5 L 0 10 z')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 1)\n .style('stroke-dasharray', '1,0');\n elem\n .append('marker')\n .attr('id', type + '-pointStart')\n .attr('class', 'marker ' + type)\n .attr('viewBox', '0 0 10 10')\n .attr('refX', 0)\n .attr('refY', 5)\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 12)\n .attr('markerHeight', 12)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 0 5 L 10 10 L 10 0 z')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 1)\n .style('stroke-dasharray', '1,0');\n};\nconst circle = (elem, type) => {\n elem\n .append('marker')\n .attr('id', type + '-circleEnd')\n .attr('class', 'marker ' + type)\n .attr('viewBox', '0 0 10 10')\n .attr('refX', 11)\n .attr('refY', 5)\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 11)\n .attr('markerHeight', 11)\n .attr('orient', 'auto')\n .append('circle')\n .attr('cx', '5')\n .attr('cy', '5')\n .attr('r', '5')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 1)\n .style('stroke-dasharray', '1,0');\n\n elem\n .append('marker')\n .attr('id', type + '-circleStart')\n .attr('class', 'marker ' + type)\n .attr('viewBox', '0 0 10 10')\n .attr('refX', -1)\n .attr('refY', 5)\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 11)\n .attr('markerHeight', 11)\n .attr('orient', 'auto')\n .append('circle')\n .attr('cx', '5')\n .attr('cy', '5')\n .attr('r', '5')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 1)\n .style('stroke-dasharray', '1,0');\n};\nconst cross = (elem, type) => {\n elem\n .append('marker')\n .attr('id', type + '-crossEnd')\n .attr('class', 'marker cross ' + type)\n .attr('viewBox', '0 0 11 11')\n .attr('refX', 12)\n .attr('refY', 5.2)\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 11)\n .attr('markerHeight', 11)\n .attr('orient', 'auto')\n .append('path')\n // .attr('stroke', 'black')\n .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 2)\n .style('stroke-dasharray', '1,0');\n\n elem\n .append('marker')\n .attr('id', type + '-crossStart')\n .attr('class', 'marker cross ' + type)\n .attr('viewBox', '0 0 11 11')\n .attr('refX', -1)\n .attr('refY', 5.2)\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 11)\n .attr('markerHeight', 11)\n .attr('orient', 'auto')\n .append('path')\n // .attr('stroke', 'black')\n .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 2)\n .style('stroke-dasharray', '1,0');\n};\nconst barb = (elem, type) => {\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-barbEnd')\n .attr('refX', 19)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 14)\n .attr('markerUnits', 'strokeWidth')\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');\n};\n\n// TODO rename the class diagram markers to something shape descriptive and semantic free\nconst markers = {\n extension,\n composition,\n aggregation,\n dependency,\n point,\n circle,\n cross,\n barb,\n};\nexport default insertMarkers;\n","/** Decorates with functions required by mermaids dagre-wrapper. */\nimport { log } from '../logger';\nimport graphlib from 'graphlib';\n\nexport let clusterDb = {};\nlet decendants = {};\nlet parents = {};\n\nexport const clear = () => {\n decendants = {};\n parents = {};\n clusterDb = {};\n};\n\nconst isDecendant = (id, ancenstorId) => {\n // if (id === ancenstorId) return true;\n\n log.trace(\n 'In isDecendant',\n ancenstorId,\n ' ',\n id,\n ' = ',\n decendants[ancenstorId].indexOf(id) >= 0\n );\n if (decendants[ancenstorId].indexOf(id) >= 0) return true;\n\n return false;\n};\n\nconst edgeInCluster = (edge, clusterId) => {\n log.info('Decendants of ', clusterId, ' is ', decendants[clusterId]);\n log.info('Edge is ', edge);\n // Edges to/from the cluster is not in the cluster, they are in the parent\n if (edge.v === clusterId) return false;\n if (edge.w === clusterId) return false;\n\n if (!decendants[clusterId]) {\n log.debug('Tilt, ', clusterId, ',not in decendants');\n return false;\n }\n log.info('Here ');\n\n if (decendants[clusterId].indexOf(edge.v) >= 0) return true;\n if (isDecendant(edge.v, clusterId)) return true;\n if (isDecendant(edge.w, clusterId)) return true;\n if (decendants[clusterId].indexOf(edge.w) >= 0) return true;\n\n return false;\n};\n\nconst copy = (clusterId, graph, newGraph, rootId) => {\n log.warn(\n 'Copying children of ',\n clusterId,\n 'root',\n rootId,\n 'data',\n graph.node(clusterId),\n rootId\n );\n const nodes = graph.children(clusterId) || [];\n\n // Include cluster node if it is not the root\n if (clusterId !== rootId) {\n nodes.push(clusterId);\n }\n\n log.warn('Copying (nodes) clusterId', clusterId, 'nodes', nodes);\n\n nodes.forEach((node) => {\n if (graph.children(node).length > 0) {\n copy(node, graph, newGraph, rootId);\n } else {\n const data = graph.node(node);\n log.info('cp ', node, ' to ', rootId, ' with parent ', clusterId); //,node, data, ' parent is ', clusterId);\n newGraph.setNode(node, data);\n if (rootId !== graph.parent(node)) {\n log.warn('Setting parent', node, graph.parent(node));\n newGraph.setParent(node, graph.parent(node));\n }\n\n if (clusterId !== rootId && node !== clusterId) {\n log.debug('Setting parent', node, clusterId);\n newGraph.setParent(node, clusterId);\n } else {\n log.info('In copy ', clusterId, 'root', rootId, 'data', graph.node(clusterId), rootId);\n log.debug(\n 'Not Setting parent for node=',\n node,\n 'cluster!==rootId',\n clusterId !== rootId,\n 'node!==clusterId',\n node !== clusterId\n );\n }\n const edges = graph.edges(node);\n log.debug('Copying Edges', edges);\n edges.forEach((edge) => {\n log.info('Edge', edge);\n const data = graph.edge(edge.v, edge.w, edge.name);\n log.info('Edge data', data, rootId);\n try {\n // Do not copy edges in and out of the root cluster, they belong to the parent graph\n if (edgeInCluster(edge, rootId)) {\n log.info('Copying as ', edge.v, edge.w, data, edge.name);\n newGraph.setEdge(edge.v, edge.w, data, edge.name);\n log.info('newGraph edges ', newGraph.edges(), newGraph.edge(newGraph.edges()[0]));\n } else {\n log.info(\n 'Skipping copy of edge ',\n edge.v,\n '-->',\n edge.w,\n ' rootId: ',\n rootId,\n ' clusterId:',\n clusterId\n );\n }\n } catch (e) {\n log.error(e);\n }\n });\n }\n log.debug('Removing node', node);\n graph.removeNode(node);\n });\n};\nexport const extractDecendants = (id, graph) => {\n // log.debug('Extracting ', id);\n const children = graph.children(id);\n let res = [].concat(children);\n\n for (let i = 0; i < children.length; i++) {\n parents[children[i]] = id;\n res = res.concat(extractDecendants(children[i], graph));\n }\n\n return res;\n};\n\n/**\n * Validates the graph, checking that all parent child relation points to existing nodes and that\n * edges between nodes also ia correct. When not correct the function logs the discrepancies.\n *\n * @param graph\n */\nexport const validate = (graph) => {\n const edges = graph.edges();\n log.trace('Edges: ', edges);\n for (let i = 0; i < edges.length; i++) {\n if (graph.children(edges[i].v).length > 0) {\n log.trace('The node ', edges[i].v, ' is part of and edge even though it has children');\n return false;\n }\n if (graph.children(edges[i].w).length > 0) {\n log.trace('The node ', edges[i].w, ' is part of and edge even though it has children');\n return false;\n }\n }\n return true;\n};\n\n/**\n * Finds a child that is not a cluster. When faking a edge between a node and a cluster.\n *\n * @param {Finds a} id\n * @param {any} graph\n */\nexport const findNonClusterChild = (id, graph) => {\n // const node = graph.node(id);\n log.trace('Searching', id);\n // const children = graph.children(id).reverse();\n const children = graph.children(id); //.reverse();\n log.trace('Searching children of id ', id, children);\n if (children.length < 1) {\n log.trace('This is a valid node', id);\n return id;\n }\n for (let i = 0; i < children.length; i++) {\n const _id = findNonClusterChild(children[i], graph);\n if (_id) {\n log.trace('Found replacement for', id, ' => ', _id);\n return _id;\n }\n }\n};\n\nconst getAnchorId = (id) => {\n if (!clusterDb[id]) {\n return id;\n }\n // If the cluster has no external connections\n if (!clusterDb[id].externalConnections) {\n return id;\n }\n\n // Return the replacement node\n if (clusterDb[id]) {\n return clusterDb[id].id;\n }\n return id;\n};\n\nexport const adjustClustersAndEdges = (graph, depth) => {\n if (!graph || depth > 10) {\n log.debug('Opting out, no graph ');\n return;\n } else {\n log.debug('Opting in, graph ');\n }\n // Go through the nodes and for each cluster found, save a replacement node, this can be used when\n // faking a link to a cluster\n graph.nodes().forEach(function (id) {\n const children = graph.children(id);\n if (children.length > 0) {\n log.warn(\n 'Cluster identified',\n id,\n ' Replacement id in edges: ',\n findNonClusterChild(id, graph)\n );\n decendants[id] = extractDecendants(id, graph);\n clusterDb[id] = { id: findNonClusterChild(id, graph), clusterData: graph.node(id) };\n }\n });\n\n // Check incoming and outgoing edges for each cluster\n graph.nodes().forEach(function (id) {\n const children = graph.children(id);\n const edges = graph.edges();\n if (children.length > 0) {\n log.debug('Cluster identified', id, decendants);\n edges.forEach((edge) => {\n // log.debug('Edge, decendants: ', edge, decendants[id]);\n\n // Check if any edge leaves the cluster (not the actual cluster, thats a link from the box)\n if (edge.v !== id && edge.w !== id) {\n // Any edge where either the one of the nodes is decending to the cluster but not the other\n // if (decendants[id].indexOf(edge.v) < 0 && decendants[id].indexOf(edge.w) < 0) {\n\n const d1 = isDecendant(edge.v, id);\n const d2 = isDecendant(edge.w, id);\n\n // d1 xor d2 - if either d1 is true and d2 is false or the other way around\n if (d1 ^ d2) {\n log.warn('Edge: ', edge, ' leaves cluster ', id);\n log.warn('Decendants of XXX ', id, ': ', decendants[id]);\n clusterDb[id].externalConnections = true;\n }\n }\n });\n } else {\n log.debug('Not a cluster ', id, decendants);\n }\n });\n\n // For clusters with incoming and/or outgoing edges translate those edges to a real node\n // in the cluster in order to fake the edge\n graph.edges().forEach(function (e) {\n const edge = graph.edge(e);\n log.warn('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));\n log.warn('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e)));\n\n let v = e.v;\n let w = e.w;\n // Check if link is either from or to a cluster\n log.warn(\n 'Fix XXX',\n clusterDb,\n 'ids:',\n e.v,\n e.w,\n 'Translateing: ',\n clusterDb[e.v],\n ' --- ',\n clusterDb[e.w]\n );\n if (clusterDb[e.v] && clusterDb[e.w] && clusterDb[e.v] === clusterDb[e.w]) {\n log.warn('Fixing and trixing link to self - removing XXX', e.v, e.w, e.name);\n log.warn('Fixing and trixing - removing XXX', e.v, e.w, e.name);\n v = getAnchorId(e.v);\n w = getAnchorId(e.w);\n graph.removeEdge(e.v, e.w, e.name);\n const specialId = e.w + '---' + e.v;\n graph.setNode(specialId, {\n domId: specialId,\n id: specialId,\n labelStyle: '',\n labelText: edge.label,\n padding: 0,\n shape: 'labelRect',\n style: '',\n });\n const edge1 = JSON.parse(JSON.stringify(edge));\n const edge2 = JSON.parse(JSON.stringify(edge));\n edge1.label = '';\n edge1.arrowTypeEnd = 'none';\n edge2.label = '';\n edge1.fromCluster = e.v;\n edge2.toCluster = e.v;\n\n graph.setEdge(v, specialId, edge1, e.name + '-cyclic-special');\n graph.setEdge(specialId, w, edge2, e.name + '-cyclic-special');\n } else if (clusterDb[e.v] || clusterDb[e.w]) {\n log.warn('Fixing and trixing - removing XXX', e.v, e.w, e.name);\n v = getAnchorId(e.v);\n w = getAnchorId(e.w);\n graph.removeEdge(e.v, e.w, e.name);\n if (v !== e.v) edge.fromCluster = e.v;\n if (w !== e.w) edge.toCluster = e.w;\n log.warn('Fix Replacing with XXX', v, w, e.name);\n graph.setEdge(v, w, edge, e.name);\n }\n });\n log.warn('Adjusted Graph', graphlib.json.write(graph));\n extractor(graph, 0);\n\n log.trace(clusterDb);\n\n // Remove references to extracted cluster\n // graph.edges().forEach(edge => {\n // if (isDecendant(edge.v, clusterId) || isDecendant(edge.w, clusterId)) {\n // graph.removeEdge(edge);\n // }\n // });\n};\n\nexport const extractor = (graph, depth) => {\n log.warn('extractor - ', depth, graphlib.json.write(graph), graph.children('D'));\n if (depth > 10) {\n log.error('Bailing out');\n return;\n }\n // For clusters without incoming and/or outgoing edges, create a new cluster-node\n // containing the nodes and edges in the custer in a new graph\n // for (let i = 0;)\n let nodes = graph.nodes();\n let hasChildren = false;\n for (let i = 0; i < nodes.length; i++) {\n const node = nodes[i];\n const children = graph.children(node);\n hasChildren = hasChildren || children.length > 0;\n }\n\n if (!hasChildren) {\n log.debug('Done, no node has children', graph.nodes());\n return;\n }\n // const clusters = Object.keys(clusterDb);\n // clusters.forEach(clusterId => {\n log.debug('Nodes = ', nodes, depth);\n for (let i = 0; i < nodes.length; i++) {\n const node = nodes[i];\n\n log.debug(\n 'Extracting node',\n node,\n clusterDb,\n clusterDb[node] && !clusterDb[node].externalConnections,\n !graph.parent(node),\n graph.node(node),\n graph.children('D'),\n ' Depth ',\n depth\n );\n // Note that the node might have been removed after the Object.keys call so better check\n // that it still is in the game\n if (!clusterDb[node]) {\n // Skip if the node is not a cluster\n log.debug('Not a cluster', node, depth);\n // break;\n } else if (\n !clusterDb[node].externalConnections &&\n // !graph.parent(node) &&\n graph.children(node) &&\n graph.children(node).length > 0\n ) {\n log.warn(\n 'Cluster without external connections, without a parent and with children',\n node,\n depth\n );\n\n const graphSettings = graph.graph();\n let dir = graphSettings.rankdir === 'TB' ? 'LR' : 'TB';\n if (clusterDb[node]) {\n if (clusterDb[node].clusterData && clusterDb[node].clusterData.dir) {\n dir = clusterDb[node].clusterData.dir;\n log.warn('Fixing dir', clusterDb[node].clusterData.dir, dir);\n }\n }\n\n const clusterGraph = new graphlib.Graph({\n multigraph: true,\n compound: true,\n })\n .setGraph({\n rankdir: dir, // Todo: set proper spacing\n nodesep: 50,\n ranksep: 50,\n marginx: 8,\n marginy: 8,\n })\n .setDefaultEdgeLabel(function () {\n return {};\n });\n\n log.warn('Old graph before copy', graphlib.json.write(graph));\n copy(node, graph, clusterGraph, node);\n graph.setNode(node, {\n clusterNode: true,\n id: node,\n clusterData: clusterDb[node].clusterData,\n labelText: clusterDb[node].labelText,\n graph: clusterGraph,\n });\n log.warn('New graph after copy node: (', node, ')', graphlib.json.write(clusterGraph));\n log.debug('Old graph after copy', graphlib.json.write(graph));\n } else {\n log.warn(\n 'Cluster ** ',\n node,\n ' **not meeting the criteria !externalConnections:',\n !clusterDb[node].externalConnections,\n ' no parent: ',\n !graph.parent(node),\n ' children ',\n graph.children(node) && graph.children(node).length > 0,\n graph.children('D'),\n depth\n );\n log.debug(clusterDb);\n }\n }\n\n nodes = graph.nodes();\n log.warn('New list of nodes', nodes);\n for (let i = 0; i < nodes.length; i++) {\n const node = nodes[i];\n const data = graph.node(node);\n log.warn(' Now next level', node, data);\n if (data.clusterNode) {\n extractor(data.graph, depth + 1);\n }\n }\n};\n\nconst sorter = (graph, nodes) => {\n if (nodes.length === 0) return [];\n let result = Object.assign(nodes);\n nodes.forEach((node) => {\n const children = graph.children(node);\n const sorted = sorter(graph, children);\n result = result.concat(sorted);\n });\n\n return result;\n};\n\nexport const sortNodesByHierarchy = (graph) => sorter(graph, graph.children());\n","import { select } from 'd3';\nimport { log } from '../logger'; // eslint-disable-line\nimport { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util';\nimport { getConfig } from '../config';\nimport intersect from './intersect/index.js';\nimport createLabel from './createLabel';\nimport note from './shapes/note';\nimport { parseMember } from '../diagrams/class/svgDraw';\nimport { evaluate, sanitizeText as sanitize } from '../diagrams/common/common';\n\nconst sanitizeText = (txt) => sanitize(txt, getConfig());\n\nconst question = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const s = w + h;\n const points = [\n { x: s / 2, y: 0 },\n { x: s, y: -s / 2 },\n { x: s / 2, y: -s },\n { x: 0, y: -s / 2 },\n ];\n\n log.info('Question main (Circle)');\n\n const questionElem = insertPolygonShape(shapeSvg, s, s, points);\n questionElem.attr('style', node.style);\n updateNodeBounds(node, questionElem);\n\n node.intersect = function (point) {\n log.warn('Intersect called');\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst choice = (parent, node) => {\n const shapeSvg = parent\n .insert('g')\n .attr('class', 'node default')\n .attr('id', node.domId || node.id);\n\n const s = 28;\n const points = [\n { x: 0, y: s / 2 },\n { x: s / 2, y: 0 },\n { x: 0, y: -s / 2 },\n { x: -s / 2, y: 0 },\n ];\n\n const choice = shapeSvg.insert('polygon', ':first-child').attr(\n 'points',\n points\n .map(function (d) {\n return d.x + ',' + d.y;\n })\n .join(' ')\n );\n // center the circle around its coordinate\n choice.attr('class', 'state-start').attr('r', 7).attr('width', 28).attr('height', 28);\n node.width = 28;\n node.height = 28;\n\n node.intersect = function (point) {\n return intersect.circle(node, 14, point);\n };\n\n return shapeSvg;\n};\n\nconst hexagon = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const f = 4;\n const h = bbox.height + node.padding;\n const m = h / f;\n const w = bbox.width + 2 * m + node.padding;\n const points = [\n { x: m, y: 0 },\n { x: w - m, y: 0 },\n { x: w, y: -h / 2 },\n { x: w - m, y: -h },\n { x: m, y: -h },\n { x: 0, y: -h / 2 },\n ];\n\n const hex = insertPolygonShape(shapeSvg, w, h, points);\n hex.attr('style', node.style);\n updateNodeBounds(node, hex);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst rect_left_inv_arrow = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: -h / 2, y: 0 },\n { x: w, y: 0 },\n { x: w, y: -h },\n { x: -h / 2, y: -h },\n { x: 0, y: -h / 2 },\n ];\n\n const el = insertPolygonShape(shapeSvg, w, h, points);\n el.attr('style', node.style);\n\n node.width = w + h;\n node.height = h;\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst lean_right = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: (-2 * h) / 6, y: 0 },\n { x: w - h / 6, y: 0 },\n { x: w + (2 * h) / 6, y: -h },\n { x: h / 6, y: -h },\n ];\n\n const el = insertPolygonShape(shapeSvg, w, h, points);\n el.attr('style', node.style);\n updateNodeBounds(node, el);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst lean_left = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: (2 * h) / 6, y: 0 },\n { x: w + h / 6, y: 0 },\n { x: w - (2 * h) / 6, y: -h },\n { x: -h / 6, y: -h },\n ];\n\n const el = insertPolygonShape(shapeSvg, w, h, points);\n el.attr('style', node.style);\n updateNodeBounds(node, el);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst trapezoid = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: (-2 * h) / 6, y: 0 },\n { x: w + (2 * h) / 6, y: 0 },\n { x: w - h / 6, y: -h },\n { x: h / 6, y: -h },\n ];\n\n const el = insertPolygonShape(shapeSvg, w, h, points);\n el.attr('style', node.style);\n updateNodeBounds(node, el);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst inv_trapezoid = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: h / 6, y: 0 },\n { x: w - h / 6, y: 0 },\n { x: w + (2 * h) / 6, y: -h },\n { x: (-2 * h) / 6, y: -h },\n ];\n\n const el = insertPolygonShape(shapeSvg, w, h, points);\n el.attr('style', node.style);\n updateNodeBounds(node, el);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst rect_right_inv_arrow = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: 0, y: 0 },\n { x: w + h / 2, y: 0 },\n { x: w, y: -h / 2 },\n { x: w + h / 2, y: -h },\n { x: 0, y: -h },\n ];\n\n const el = insertPolygonShape(shapeSvg, w, h, points);\n el.attr('style', node.style);\n updateNodeBounds(node, el);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst cylinder = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const w = bbox.width + node.padding;\n const rx = w / 2;\n const ry = rx / (2.5 + w / 50);\n const h = bbox.height + ry + node.padding;\n\n const shape =\n 'M 0,' +\n ry +\n ' a ' +\n rx +\n ',' +\n ry +\n ' 0,0,0 ' +\n w +\n ' 0 a ' +\n rx +\n ',' +\n ry +\n ' 0,0,0 ' +\n -w +\n ' 0 l 0,' +\n h +\n ' a ' +\n rx +\n ',' +\n ry +\n ' 0,0,0 ' +\n w +\n ' 0 l 0,' +\n -h;\n\n const el = shapeSvg\n .attr('label-offset-y', ry)\n .insert('path', ':first-child')\n .attr('style', node.style)\n .attr('d', shape)\n .attr('transform', 'translate(' + -w / 2 + ',' + -(h / 2 + ry) + ')');\n\n updateNodeBounds(node, el);\n\n node.intersect = function (point) {\n const pos = intersect.rect(node, point);\n const x = pos.x - node.x;\n\n if (\n rx != 0 &&\n (Math.abs(x) < node.width / 2 ||\n (Math.abs(x) == node.width / 2 && Math.abs(pos.y - node.y) > node.height / 2 - ry))\n ) {\n // ellipsis equation: x*x / a*a + y*y / b*b = 1\n // solve for y to get adjustion value for pos.y\n let y = ry * ry * (1 - (x * x) / (rx * rx));\n if (y != 0) y = Math.sqrt(y);\n y = ry - y;\n if (point.y - node.y > 0) y = -y;\n\n pos.y += y;\n }\n\n return pos;\n };\n\n return shapeSvg;\n};\n\nconst rect = (parent, node) => {\n const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);\n\n log.trace('Classes = ', node.classes);\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n const totalWidth = bbox.width + node.padding;\n const totalHeight = bbox.height + node.padding;\n rect\n .attr('class', 'basic label-container')\n .attr('style', node.style)\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('x', -bbox.width / 2 - halfPadding)\n .attr('y', -bbox.height / 2 - halfPadding)\n .attr('width', totalWidth)\n .attr('height', totalHeight);\n\n if (node.props) {\n const propKeys = new Set(Object.keys(node.props));\n if (node.props.borders) {\n applyNodePropertyBorders(rect, node.props.borders, totalWidth, totalHeight);\n propKeys.delete('borders');\n }\n propKeys.forEach((propKey) => {\n log.warn(`Unknown node property ${propKey}`);\n });\n }\n\n updateNodeBounds(node, rect);\n\n node.intersect = function (point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst labelRect = (parent, node) => {\n const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'label', true);\n\n log.trace('Classes = ', node.classes);\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n // Hide the rect we are only after the label\n const totalWidth = 0;\n const totalHeight = 0;\n rect.attr('width', totalWidth).attr('height', totalHeight);\n shapeSvg.attr('class', 'label edgeLabel');\n\n if (node.props) {\n const propKeys = new Set(Object.keys(node.props));\n if (node.props.borders) {\n applyNodePropertyBorders(rect, node.props.borders, totalWidth, totalHeight);\n propKeys.delete('borders');\n }\n propKeys.forEach((propKey) => {\n log.warn(`Unknown node property ${propKey}`);\n });\n }\n\n updateNodeBounds(node, rect);\n\n node.intersect = function (point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\n/**\n * @param rect\n * @param borders\n * @param totalWidth\n * @param totalHeight\n */\nfunction applyNodePropertyBorders(rect, borders, totalWidth, totalHeight) {\n const strokeDashArray = [];\n const addBorder = (length) => {\n strokeDashArray.push(length);\n strokeDashArray.push(0);\n };\n const skipBorder = (length) => {\n strokeDashArray.push(0);\n strokeDashArray.push(length);\n };\n if (borders.includes('t')) {\n log.debug('add top border');\n addBorder(totalWidth);\n } else {\n skipBorder(totalWidth);\n }\n if (borders.includes('r')) {\n log.debug('add right border');\n addBorder(totalHeight);\n } else {\n skipBorder(totalHeight);\n }\n if (borders.includes('b')) {\n log.debug('add bottom border');\n addBorder(totalWidth);\n } else {\n skipBorder(totalWidth);\n }\n if (borders.includes('l')) {\n log.debug('add left border');\n addBorder(totalHeight);\n } else {\n skipBorder(totalHeight);\n }\n rect.attr('stroke-dasharray', strokeDashArray.join(' '));\n}\n\nconst rectWithTitle = (parent, node) => {\n // const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes);\n\n let classes;\n if (!node.classes) {\n classes = 'node default';\n } else {\n classes = 'node ' + node.classes;\n }\n // Add outer g element\n const shapeSvg = parent\n .insert('g')\n .attr('class', classes)\n .attr('id', node.domId || node.id);\n\n // Create the title label and insert it after the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n // const innerRect = shapeSvg.insert('rect');\n const innerLine = shapeSvg.insert('line');\n\n const label = shapeSvg.insert('g').attr('class', 'label');\n\n const text2 = node.labelText.flat ? node.labelText.flat() : node.labelText;\n // const text2 = typeof text2prim === 'object' ? text2prim[0] : text2prim;\n\n let title = '';\n if (typeof text2 === 'object') {\n title = text2[0];\n } else {\n title = text2;\n }\n log.info('Label text abc79', title, text2, typeof text2 === 'object');\n\n const text = label.node().appendChild(createLabel(title, node.labelStyle, true, true));\n let bbox = { width: 0, height: 0 };\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = text.children[0];\n const dv = select(text);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n log.info('Text 2', text2);\n const textRows = text2.slice(1, text2.length);\n let titleBox = text.getBBox();\n const descr = label\n .node()\n .appendChild(\n createLabel(textRows.join ? textRows.join('
') : textRows, node.labelStyle, true, true)\n );\n\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = descr.children[0];\n const dv = select(descr);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n // bbox = label.getBBox();\n // log.info(descr);\n const halfPadding = node.padding / 2;\n select(descr).attr(\n 'transform',\n 'translate( ' +\n // (titleBox.width - bbox.width) / 2 +\n (bbox.width > titleBox.width ? 0 : (titleBox.width - bbox.width) / 2) +\n ', ' +\n (titleBox.height + halfPadding + 5) +\n ')'\n );\n select(text).attr(\n 'transform',\n 'translate( ' +\n // (titleBox.width - bbox.width) / 2 +\n (bbox.width < titleBox.width ? 0 : -(titleBox.width - bbox.width) / 2) +\n ', ' +\n 0 +\n ')'\n );\n // Get the size of the label\n\n // Bounding box for title and text\n bbox = label.node().getBBox();\n\n // Center the label\n label.attr(\n 'transform',\n 'translate(' + -bbox.width / 2 + ', ' + (-bbox.height / 2 - halfPadding + 3) + ')'\n );\n\n rect\n .attr('class', 'outer title-state')\n .attr('x', -bbox.width / 2 - halfPadding)\n .attr('y', -bbox.height / 2 - halfPadding)\n .attr('width', bbox.width + node.padding)\n .attr('height', bbox.height + node.padding);\n\n innerLine\n .attr('class', 'divider')\n .attr('x1', -bbox.width / 2 - halfPadding)\n .attr('x2', bbox.width / 2 + halfPadding)\n .attr('y1', -bbox.height / 2 - halfPadding + titleBox.height + halfPadding)\n .attr('y2', -bbox.height / 2 - halfPadding + titleBox.height + halfPadding);\n\n updateNodeBounds(node, rect);\n\n node.intersect = function (point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst stadium = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const h = bbox.height + node.padding;\n const w = bbox.width + h / 4 + node.padding;\n\n // add the rect\n const rect = shapeSvg\n .insert('rect', ':first-child')\n .attr('style', node.style)\n .attr('rx', h / 2)\n .attr('ry', h / 2)\n .attr('x', -w / 2)\n .attr('y', -h / 2)\n .attr('width', w)\n .attr('height', h);\n\n updateNodeBounds(node, rect);\n\n node.intersect = function (point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst circle = (parent, node) => {\n const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);\n const circle = shapeSvg.insert('circle', ':first-child');\n\n // center the circle around its coordinate\n circle\n .attr('style', node.style)\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('r', bbox.width / 2 + halfPadding)\n .attr('width', bbox.width + node.padding)\n .attr('height', bbox.height + node.padding);\n\n log.info('Circle main');\n\n updateNodeBounds(node, circle);\n\n node.intersect = function (point) {\n log.info('Circle intersect', node, bbox.width / 2 + halfPadding, point);\n return intersect.circle(node, bbox.width / 2 + halfPadding, point);\n };\n\n return shapeSvg;\n};\n\nconst doublecircle = (parent, node) => {\n const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);\n const gap = 5;\n const circleGroup = shapeSvg.insert('g', ':first-child');\n const outerCircle = circleGroup.insert('circle');\n const innerCircle = circleGroup.insert('circle');\n\n // center the circle around its coordinate\n outerCircle\n .attr('style', node.style)\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('r', bbox.width / 2 + halfPadding + gap)\n .attr('width', bbox.width + node.padding + gap * 2)\n .attr('height', bbox.height + node.padding + gap * 2);\n\n innerCircle\n .attr('style', node.style)\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('r', bbox.width / 2 + halfPadding)\n .attr('width', bbox.width + node.padding)\n .attr('height', bbox.height + node.padding);\n\n log.info('DoubleCircle main');\n\n updateNodeBounds(node, outerCircle);\n\n node.intersect = function (point) {\n log.info('DoubleCircle intersect', node, bbox.width / 2 + halfPadding + gap, point);\n return intersect.circle(node, bbox.width / 2 + halfPadding + gap, point);\n };\n\n return shapeSvg;\n};\n\nconst subroutine = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: 0, y: 0 },\n { x: w, y: 0 },\n { x: w, y: -h },\n { x: 0, y: -h },\n { x: 0, y: 0 },\n { x: -8, y: 0 },\n { x: w + 8, y: 0 },\n { x: w + 8, y: -h },\n { x: -8, y: -h },\n { x: -8, y: 0 },\n ];\n\n const el = insertPolygonShape(shapeSvg, w, h, points);\n el.attr('style', node.style);\n updateNodeBounds(node, el);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst start = (parent, node) => {\n const shapeSvg = parent\n .insert('g')\n .attr('class', 'node default')\n .attr('id', node.domId || node.id);\n const circle = shapeSvg.insert('circle', ':first-child');\n\n // center the circle around its coordinate\n circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14);\n\n updateNodeBounds(node, circle);\n\n node.intersect = function (point) {\n return intersect.circle(node, 7, point);\n };\n\n return shapeSvg;\n};\n\nconst forkJoin = (parent, node, dir) => {\n const shapeSvg = parent\n .insert('g')\n .attr('class', 'node default')\n .attr('id', node.domId || node.id);\n\n let width = 70;\n let height = 10;\n\n if (dir === 'LR') {\n width = 10;\n height = 70;\n }\n\n const shape = shapeSvg\n .append('rect')\n .attr('x', (-1 * width) / 2)\n .attr('y', (-1 * height) / 2)\n .attr('width', width)\n .attr('height', height)\n .attr('class', 'fork-join');\n\n updateNodeBounds(node, shape);\n node.height = node.height + node.padding / 2;\n node.width = node.width + node.padding / 2;\n node.intersect = function (point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst end = (parent, node) => {\n const shapeSvg = parent\n .insert('g')\n .attr('class', 'node default')\n .attr('id', node.domId || node.id);\n const innerCircle = shapeSvg.insert('circle', ':first-child');\n const circle = shapeSvg.insert('circle', ':first-child');\n\n circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14);\n\n innerCircle.attr('class', 'state-end').attr('r', 5).attr('width', 10).attr('height', 10);\n\n updateNodeBounds(node, circle);\n\n node.intersect = function (point) {\n return intersect.circle(node, 7, point);\n };\n\n return shapeSvg;\n};\n\nconst class_box = (parent, node) => {\n const halfPadding = node.padding / 2;\n const rowPadding = 4;\n const lineHeight = 8;\n\n let classes;\n if (!node.classes) {\n classes = 'node default';\n } else {\n classes = 'node ' + node.classes;\n }\n // Add outer g element\n const shapeSvg = parent\n .insert('g')\n .attr('class', classes)\n .attr('id', node.domId || node.id);\n\n // Create the title label and insert it after the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n const topLine = shapeSvg.insert('line');\n const bottomLine = shapeSvg.insert('line');\n let maxWidth = 0;\n let maxHeight = rowPadding;\n\n const labelContainer = shapeSvg.insert('g').attr('class', 'label');\n let verticalPos = 0;\n const hasInterface = node.classData.annotations && node.classData.annotations[0];\n\n // 1. Create the labels\n const interfaceLabelText = node.classData.annotations[0]\n ? '«' + node.classData.annotations[0] + '»'\n : '';\n const interfaceLabel = labelContainer\n .node()\n .appendChild(createLabel(interfaceLabelText, node.labelStyle, true, true));\n let interfaceBBox = interfaceLabel.getBBox();\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = interfaceLabel.children[0];\n const dv = select(interfaceLabel);\n interfaceBBox = div.getBoundingClientRect();\n dv.attr('width', interfaceBBox.width);\n dv.attr('height', interfaceBBox.height);\n }\n if (node.classData.annotations[0]) {\n maxHeight += interfaceBBox.height + rowPadding;\n maxWidth += interfaceBBox.width;\n }\n\n let classTitleString = node.classData.id;\n\n if (node.classData.type !== undefined && node.classData.type !== '') {\n if (getConfig().flowchart.htmlLabels) {\n classTitleString += '<' + node.classData.type + '>';\n } else {\n classTitleString += '<' + node.classData.type + '>';\n }\n }\n const classTitleLabel = labelContainer\n .node()\n .appendChild(createLabel(classTitleString, node.labelStyle, true, true));\n select(classTitleLabel).attr('class', 'classTitle');\n let classTitleBBox = classTitleLabel.getBBox();\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = classTitleLabel.children[0];\n const dv = select(classTitleLabel);\n classTitleBBox = div.getBoundingClientRect();\n dv.attr('width', classTitleBBox.width);\n dv.attr('height', classTitleBBox.height);\n }\n maxHeight += classTitleBBox.height + rowPadding;\n if (classTitleBBox.width > maxWidth) {\n maxWidth = classTitleBBox.width;\n }\n const classAttributes = [];\n node.classData.members.forEach((str) => {\n const parsedInfo = parseMember(str);\n let parsedText = parsedInfo.displayText;\n if (getConfig().flowchart.htmlLabels) {\n parsedText = parsedText.replace(//g, '>');\n }\n const lbl = labelContainer\n .node()\n .appendChild(\n createLabel(\n parsedText,\n parsedInfo.cssStyle ? parsedInfo.cssStyle : node.labelStyle,\n true,\n true\n )\n );\n let bbox = lbl.getBBox();\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = lbl.children[0];\n const dv = select(lbl);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n if (bbox.width > maxWidth) {\n maxWidth = bbox.width;\n }\n maxHeight += bbox.height + rowPadding;\n classAttributes.push(lbl);\n });\n\n maxHeight += lineHeight;\n\n const classMethods = [];\n node.classData.methods.forEach((str) => {\n const parsedInfo = parseMember(str);\n let displayText = parsedInfo.displayText;\n if (getConfig().flowchart.htmlLabels) {\n displayText = displayText.replace(//g, '>');\n }\n const lbl = labelContainer\n .node()\n .appendChild(\n createLabel(\n displayText,\n parsedInfo.cssStyle ? parsedInfo.cssStyle : node.labelStyle,\n true,\n true\n )\n );\n let bbox = lbl.getBBox();\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = lbl.children[0];\n const dv = select(lbl);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n if (bbox.width > maxWidth) {\n maxWidth = bbox.width;\n }\n maxHeight += bbox.height + rowPadding;\n\n classMethods.push(lbl);\n });\n\n maxHeight += lineHeight;\n\n // 2. Position the labels\n\n // position the interface label\n if (hasInterface) {\n let diffX = (maxWidth - interfaceBBox.width) / 2;\n select(interfaceLabel).attr(\n 'transform',\n 'translate( ' + ((-1 * maxWidth) / 2 + diffX) + ', ' + (-1 * maxHeight) / 2 + ')'\n );\n verticalPos = interfaceBBox.height + rowPadding;\n }\n // Position the class title label\n let diffX = (maxWidth - classTitleBBox.width) / 2;\n select(classTitleLabel).attr(\n 'transform',\n 'translate( ' +\n ((-1 * maxWidth) / 2 + diffX) +\n ', ' +\n ((-1 * maxHeight) / 2 + verticalPos) +\n ')'\n );\n verticalPos += classTitleBBox.height + rowPadding;\n\n topLine\n .attr('class', 'divider')\n .attr('x1', -maxWidth / 2 - halfPadding)\n .attr('x2', maxWidth / 2 + halfPadding)\n .attr('y1', -maxHeight / 2 - halfPadding + lineHeight + verticalPos)\n .attr('y2', -maxHeight / 2 - halfPadding + lineHeight + verticalPos);\n\n verticalPos += lineHeight;\n\n classAttributes.forEach((lbl) => {\n select(lbl).attr(\n 'transform',\n 'translate( ' +\n -maxWidth / 2 +\n ', ' +\n ((-1 * maxHeight) / 2 + verticalPos + lineHeight / 2) +\n ')'\n );\n verticalPos += classTitleBBox.height + rowPadding;\n });\n\n verticalPos += lineHeight;\n bottomLine\n .attr('class', 'divider')\n .attr('x1', -maxWidth / 2 - halfPadding)\n .attr('x2', maxWidth / 2 + halfPadding)\n .attr('y1', -maxHeight / 2 - halfPadding + lineHeight + verticalPos)\n .attr('y2', -maxHeight / 2 - halfPadding + lineHeight + verticalPos);\n\n verticalPos += lineHeight;\n\n classMethods.forEach((lbl) => {\n select(lbl).attr(\n 'transform',\n 'translate( ' + -maxWidth / 2 + ', ' + ((-1 * maxHeight) / 2 + verticalPos) + ')'\n );\n verticalPos += classTitleBBox.height + rowPadding;\n });\n //\n // let bbox;\n // if (evaluate(getConfig().flowchart.htmlLabels)) {\n // const div = interfaceLabel.children[0];\n // const dv = select(interfaceLabel);\n // bbox = div.getBoundingClientRect();\n // dv.attr('width', bbox.width);\n // dv.attr('height', bbox.height);\n // }\n // bbox = labelContainer.getBBox();\n\n // log.info('Text 2', text2);\n // const textRows = text2.slice(1, text2.length);\n // let titleBox = text.getBBox();\n // const descr = label\n // .node()\n // .appendChild(createLabel(textRows.join('
'), node.labelStyle, true, true));\n\n // if (evaluate(getConfig().flowchart.htmlLabels)) {\n // const div = descr.children[0];\n // const dv = select(descr);\n // bbox = div.getBoundingClientRect();\n // dv.attr('width', bbox.width);\n // dv.attr('height', bbox.height);\n // }\n // // bbox = label.getBBox();\n // // log.info(descr);\n // select(descr).attr(\n // 'transform',\n // 'translate( ' +\n // // (titleBox.width - bbox.width) / 2 +\n // (bbox.width > titleBox.width ? 0 : (titleBox.width - bbox.width) / 2) +\n // ', ' +\n // (titleBox.height + halfPadding + 5) +\n // ')'\n // );\n // select(text).attr(\n // 'transform',\n // 'translate( ' +\n // // (titleBox.width - bbox.width) / 2 +\n // (bbox.width < titleBox.width ? 0 : -(titleBox.width - bbox.width) / 2) +\n // ', ' +\n // 0 +\n // ')'\n // );\n // // Get the size of the label\n\n // // Bounding box for title and text\n // bbox = label.node().getBBox();\n\n // // Center the label\n // label.attr(\n // 'transform',\n // 'translate(' + -bbox.width / 2 + ', ' + (-bbox.height / 2 - halfPadding + 3) + ')'\n // );\n\n rect\n .attr('class', 'outer title-state')\n .attr('x', -maxWidth / 2 - halfPadding)\n .attr('y', -(maxHeight / 2) - halfPadding)\n .attr('width', maxWidth + node.padding)\n .attr('height', maxHeight + node.padding);\n\n // innerLine\n // .attr('class', 'divider')\n // .attr('x1', -bbox.width / 2 - halfPadding)\n // .attr('x2', bbox.width / 2 + halfPadding)\n // .attr('y1', -bbox.height / 2 - halfPadding + titleBox.height + halfPadding)\n // .attr('y2', -bbox.height / 2 - halfPadding + titleBox.height + halfPadding);\n\n updateNodeBounds(node, rect);\n\n node.intersect = function (point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst shapes = {\n question,\n rect,\n labelRect,\n rectWithTitle,\n choice,\n circle,\n doublecircle,\n stadium,\n hexagon,\n rect_left_inv_arrow,\n lean_right,\n lean_left,\n trapezoid,\n inv_trapezoid,\n rect_right_inv_arrow,\n cylinder,\n start,\n end,\n note,\n subroutine,\n fork: forkJoin,\n join: forkJoin,\n class_box,\n};\n\nlet nodeElems = {};\n\nexport const insertNode = (elem, node, dir) => {\n let newEl;\n let el;\n\n // Add link when appropriate\n if (node.link) {\n let target;\n if (getConfig().securityLevel === 'sandbox') {\n target = '_top';\n } else if (node.linkTarget) {\n target = node.linkTarget || '_blank';\n }\n newEl = elem.insert('svg:a').attr('xlink:href', node.link).attr('target', target);\n el = shapes[node.shape](newEl, node, dir);\n } else {\n el = shapes[node.shape](elem, node, dir);\n newEl = el;\n }\n if (node.tooltip) {\n el.attr('title', node.tooltip);\n }\n if (node.class) {\n el.attr('class', 'node default ' + node.class);\n }\n\n nodeElems[node.id] = newEl;\n\n if (node.haveCallback) {\n nodeElems[node.id].attr('class', nodeElems[node.id].attr('class') + ' clickable');\n }\n};\nexport const setNodeElem = (elem, node) => {\n nodeElems[node.id] = elem;\n};\nexport const clear = () => {\n nodeElems = {};\n};\n\nexport const positionNode = (node) => {\n const el = nodeElems[node.id];\n log.trace(\n 'Transforming node',\n node.diff,\n node,\n 'translate(' + (node.x - node.width / 2 - 5) + ', ' + node.width / 2 + ')'\n );\n const padding = 8;\n const diff = node.diff || 0;\n if (node.clusterNode) {\n el.attr(\n 'transform',\n 'translate(' +\n (node.x + diff - node.width / 2) +\n ', ' +\n (node.y - node.height / 2 - padding) +\n ')'\n );\n } else {\n el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');\n }\n return diff;\n};\n","import { updateNodeBounds, labelHelper } from './util';\nimport { log } from '../../logger'; // eslint-disable-line\nimport intersect from '../intersect/index.js';\n\nconst note = (parent, node) => {\n const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);\n\n log.info('Classes = ', node.classes);\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n rect\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('x', -bbox.width / 2 - halfPadding)\n .attr('y', -bbox.height / 2 - halfPadding)\n .attr('width', bbox.width + node.padding)\n .attr('height', bbox.height + node.padding);\n\n updateNodeBounds(node, rect);\n\n node.intersect = function (point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nexport default note;\n","import createLabel from '../createLabel';\nimport { getConfig } from '../../config';\nimport { decodeEntities } from '../../mermaidAPI';\nimport { select } from 'd3';\nimport { evaluate, sanitizeText } from '../../diagrams/common/common';\nexport const labelHelper = (parent, node, _classes, isNode) => {\n let classes;\n if (!_classes) {\n classes = 'node default';\n } else {\n classes = _classes;\n }\n // Add outer g element\n const shapeSvg = parent\n .insert('g')\n .attr('class', classes)\n .attr('id', node.domId || node.id);\n\n // Create the label and insert it after the rect\n const label = shapeSvg.insert('g').attr('class', 'label').attr('style', node.labelStyle);\n\n const labelText = typeof node.labelText === 'string' ? node.labelText : node.labelText[0];\n\n const text = label\n .node()\n .appendChild(\n createLabel(\n sanitizeText(decodeEntities(labelText), getConfig()),\n node.labelStyle,\n false,\n isNode\n )\n );\n\n // Get the size of the label\n let bbox = text.getBBox();\n\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = text.children[0];\n const dv = select(text);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n\n const halfPadding = node.padding / 2;\n\n // Center the label\n label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');\n\n return { shapeSvg, bbox, halfPadding, label };\n};\n\nexport const updateNodeBounds = (node, element) => {\n const bbox = element.node().getBBox();\n node.width = bbox.width;\n node.height = bbox.height;\n};\n\n/**\n * @param parent\n * @param w\n * @param h\n * @param points\n */\nexport function insertPolygonShape(parent, w, h, points) {\n return parent\n .insert('polygon', ':first-child')\n .attr(\n 'points',\n points\n .map(function (d) {\n return d.x + ',' + d.y;\n })\n .join(' ')\n )\n .attr('class', 'label-container')\n .attr('transform', 'translate(' + -w / 2 + ',' + h / 2 + ')');\n}\n","import theme from './themes';\n/**\n * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click\n * here](8.6.0_docs.md)].**\n *\n * ## **What follows are config instructions for older versions**\n *\n * These are the default options which can be overridden with the initialization call like so:\n *\n * **Example 1:** mermaid.initialize({ flowchart:{ htmlLabels: false } }); \n *\n * **Example 2:**
\n *\n * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults).\n * A description of each option follows below.\n *\n * @name Configuration\n */\nconst config = {\n /**\n * Theme , the CSS style sheet\n *\n * | Parameter | Description | Type | Required | Values |\n * | --------- | --------------- | ------ | -------- | ---------------------------------------------- |\n * | theme | Built in Themes | string | Optional | 'default', 'forest', 'dark', 'neutral', 'null' |\n *\n * **Notes:** To disable any pre-defined mermaid theme, use \"null\". \"theme\": \"forest\",\n * \"themeCSS\": \".node rect { fill: red; }\" \n */\n theme: 'default',\n themeVariables: theme['default'].getThemeVariables(),\n themeCSS: undefined,\n /* **maxTextSize** - The maximum allowed size of the users text diagram */\n maxTextSize: 50000,\n darkMode: false,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ---------- | ------------------------------------------------------ | ------ | -------- | --------------------------- |\n * | fontFamily | specifies the font to be used in the rendered diagrams | string | Required | Any Possible CSS FontFamily |\n *\n * **Notes:** Default value: '\"trebuchet ms\", verdana, arial, sans-serif;'.\n */\n fontFamily: '\"trebuchet ms\", verdana, arial, sans-serif;',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ----------------------------------------------------- | ---------------- | -------- | ------------- |\n * | logLevel | This option decides the amount of logging to be used. | string \\| number | Required | 1, 2, 3, 4, 5 |\n *\n * **Notes:**\n *\n * - Debug: 1\n * - Info: 2\n * - Warn: 3\n * - Error: 4\n * - Fatal: 5 (default)\n */\n logLevel: 5,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------- | --------------------------------- | ------ | -------- | ------------------------------- |\n * | securitylevel | Level of trust for parsed diagram | string | Required | 'strict', 'loose', 'antiscript' |\n *\n * **Notes**:\n *\n * - **strict**: (**default**) tags in text are encoded, click functionality is disabled\n * - **loose**: tags in text are allowed, click functionality is enabled\n * - **antiscript**: html tags in text are allowed, (only script element is removed), click\n * functionality is enabled\n */\n securityLevel: 'strict',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | -------------------------------------------- | ------- | -------- | ----------- |\n * | startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false |\n *\n * **Notes:** Default value: true\n */\n startOnLoad: true,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------- |\n * | arrowMarkerAbsolute | Controls whether or arrow markers in html code are absolute paths or anchors | boolean | Required | true, false |\n *\n * **Notes**:\n *\n * This matters if you are using base tag settings.\n *\n * Default value: false\n */\n arrowMarkerAbsolute: false,\n\n /**\n * This option controls which currentConfig keys are considered _secure_ and can only be changed\n * via call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to the\n * `secure` keys in the current currentConfig. This prevents malicious graph directives from\n * overriding a site's default security.\n *\n * **Notes**:\n *\n * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']\n */\n secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],\n\n /**\n * This option controls if the generated ids of nodes in the SVG are generated randomly or based\n * on a seed. If set to false, the IDs are generated based on the current date and thus are not\n * deterministic. This is the default behaviour.\n *\n * **Notes**:\n *\n * This matters if your files are checked into sourcecontrol e.g. git and should not change unless\n * content is changed.\n *\n * Default value: false\n */\n deterministicIds: false,\n\n /**\n * This option is the optional seed for deterministic ids. if set to undefined but\n * deterministicIds is true, a simple number iterator is used. You can set this attribute to base\n * the seed on a static string.\n */\n deterministicIDSeed: undefined,\n\n /** The object containing configurations specific for flowcharts */\n flowchart: {\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |\n * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n *\n * The amount of padding around the diagram as a whole so that embedded diagrams have margins,\n * expressed in pixels\n *\n * Default value: 8\n */\n diagramPadding: 8,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ---------- | -------------------------------------------------------------------------------------------- | ------- | -------- | ----------- |\n * | htmlLabels | Flag for setting whether or not a html tag should be used for rendering labels on the edges. | boolean | Required | true, false |\n *\n * **Notes:** Default value: true.\n */\n htmlLabels: true,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | --------------------------------------------------- | ------- | -------- | ------------------- |\n * | nodeSpacing | Defines the spacing between nodes on the same level | Integer | Required | Any positive Number |\n *\n * **Notes:**\n *\n * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the\n * vertical spacing for LR as well as RL graphs.**\n *\n * Default value: 50\n */\n nodeSpacing: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------------------------------------------------- | ------- | -------- | ------------------- |\n * | rankSpacing | Defines the spacing between nodes on different levels | Integer | Required | Any Positive Number |\n *\n * **Notes**:\n *\n * Pertains to vertical spacing for TB (top to bottom) or BT (bottom to top), and the horizontal\n * spacing for LR as well as RL graphs.\n *\n * Default value 50\n */\n rankSpacing: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | -------------------------------------------------- | ------ | -------- | ----------------------------- |\n * | curve | Defines how mermaid renders curves for flowcharts. | string | Required | 'basis', 'linear', 'cardinal' |\n *\n * **Notes:**\n *\n * Default Value: 'basis'\n */\n curve: 'basis',\n // Only used in new experimental rendering\n // represents the padding between the labels and the shape\n padding: 15,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------- | ------- | -------- | ----------- |\n * | useMaxWidth | See notes | boolean | 4 | true, false |\n *\n * **Notes:**\n *\n * When this flag is set the height and width is set to 100% and is then scaling with the\n * available space if not the absolute space required is used.\n *\n * Default value: true\n */\n useMaxWidth: true,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ----------- | ------- | -------- | ----------------------- |\n * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |\n *\n * **Notes:**\n *\n * Decides which rendering engine that is to be used for the rendering. Legal values are:\n * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid\n *\n * Default value: 'dagre-d3'\n */\n defaultRenderer: 'dagre-d3',\n },\n\n /** The object containing configurations specific for sequence diagrams */\n sequence: {\n hideUnusedParticipants: false,\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ---------------------------- | ------- | -------- | ------------------ |\n * | activationWidth | Width of the activation rect | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value :10\n */\n activationWidth: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |\n * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 50\n */\n diagramMarginX: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | ------------------------------------------------- | ------- | -------- | ------------------ |\n * | diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 10\n */\n diagramMarginY: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | --------------------- | ------- | -------- | ------------------ |\n * | actorMargin | Margin between actors | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 50\n */\n actorMargin: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | -------------------- | ------- | -------- | ------------------ |\n * | width | Width of actor boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 150\n */\n width: 150,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | --------------------- | ------- | -------- | ------------------ |\n * | height | Height of actor boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 65\n */\n height: 65,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ------------------------ | ------- | -------- | ------------------ |\n * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 10\n */\n boxMargin: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |\n * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 5\n */\n boxTextMargin: 5,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ---------- | ------------------- | ------- | -------- | ------------------ |\n * | noteMargin | margin around notes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 10\n */\n noteMargin: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------- | ---------------------- | ------- | -------- | ------------------ |\n * | messageMargin | Space between messages | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 35\n */\n messageMargin: 35,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------ | --------------------------- | ------ | -------- | ------------------------- |\n * | messageAlign | Multiline message alignment | string | Required | 'left', 'center', 'right' |\n *\n * **Notes:** Default value: 'center'\n */\n messageAlign: 'center',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------ | --------------------------- | ------- | -------- | ----------- |\n * | mirrorActors | Mirror actors under diagram | boolean | Required | true, false |\n *\n * **Notes:** Default value: true\n */\n mirrorActors: true,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ---------- | ----------------------------------------------------------------------- | ------- | -------- | ----------- |\n * | forceMenus | forces actor popup menus to always be visible (to support E2E testing). | Boolean | Required | True, False |\n *\n * **Notes:**\n *\n * Default value: false.\n */\n forceMenus: false,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |\n * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n *\n * Depending on css styling this might need adjustment.\n *\n * Default value: 1\n */\n bottomMarginAdj: 1,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------- | ------- | -------- | ----------- |\n * | useMaxWidth | See Notes | boolean | Required | true, false |\n *\n * **Notes:** When this flag is set to true, the height and width is set to 100% and is then\n * scaling with the available space. If set to false, the absolute space required is used.\n *\n * Default value: true\n */\n useMaxWidth: true,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ------------------------------------ | ------- | -------- | ----------- |\n * | rightAngles | display curve arrows as right angles | boolean | Required | true, false |\n *\n * **Notes:**\n *\n * This will display arrows that start and begin at the same node as right angles, rather than a curve\n *\n * Default value: false\n */\n rightAngles: false,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------------- | ------------------------------- | ------- | -------- | ----------- |\n * | showSequenceNumbers | This will show the node numbers | boolean | Required | true, false |\n *\n * **Notes:** Default value: false\n */\n showSequenceNumbers: false,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------- | -------------------------------------------------- | ------- | -------- | ------------------ |\n * | actorFontSize | This sets the font size of the actor's description | Integer | Require | Any Positive Value |\n *\n * **Notes:** **Default value 14**..\n */\n actorFontSize: 14,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- |\n * | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily |\n *\n * **Notes:** Default value: \"'Open Sans\", sans-serif'\n */\n actorFontFamily: '\"Open Sans\", sans-serif',\n\n /**\n * This sets the font weight of the actor's description\n *\n * **Notes:** Default value: 400.\n */\n actorFontWeight: 400,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------ | ----------------------------------------------- | ------- | -------- | ------------------ |\n * | noteFontSize | This sets the font size of actor-attached notes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 14\n */\n noteFontSize: 14,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | -------------------------------------------------- | ------ | -------- | --------------------------- |\n * | noteFontFamily | This sets the font family of actor-attached notes. | string | Required | Any Possible CSS FontFamily |\n *\n * **Notes:** Default value: ''\"trebuchet ms\", verdana, arial, sans-serif'\n */\n noteFontFamily: '\"trebuchet ms\", verdana, arial, sans-serif',\n\n /**\n * This sets the font weight of the note's description\n *\n * **Notes:** Default value: 400\n */\n noteFontWeight: 400,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ---------------------------------------------------- | ------ | -------- | ------------------------- |\n * | noteAlign | This sets the text alignment of actor-attached notes | string | required | 'left', 'center', 'right' |\n *\n * **Notes:** Default value: 'center'\n */\n noteAlign: 'center',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ----------------------------------------- | ------- | -------- | ------------------- |\n * | messageFontSize | This sets the font size of actor messages | Integer | Required | Any Positive Number |\n *\n * **Notes:** Default value: 16\n */\n messageFontSize: 16,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------------- | ------------------------------------------- | ------ | -------- | --------------------------- |\n * | messageFontFamily | This sets the font family of actor messages | string | Required | Any Possible CSS FontFamily |\n *\n * **Notes:** Default value: '\"trebuchet ms\", verdana, arial, sans-serif'\n */\n messageFontFamily: '\"trebuchet ms\", verdana, arial, sans-serif',\n\n /**\n * This sets the font weight of the message's description\n *\n * **Notes:** Default value: 400.\n */\n messageFontWeight: 400,\n\n /**\n * This sets the auto-wrap state for the diagram\n *\n * **Notes:** Default value: false.\n */\n wrap: false,\n\n /**\n * This sets the auto-wrap padding for the diagram (sides only)\n *\n * **Notes:** Default value: 0.\n */\n wrapPadding: 10,\n\n /**\n * This sets the width of the loop-box (loop, alt, opt, par)\n *\n * **Notes:** Default value: 50.\n */\n labelBoxWidth: 50,\n\n /**\n * This sets the height of the loop-box (loop, alt, opt, par)\n *\n * **Notes:** Default value: 20.\n */\n labelBoxHeight: 20,\n\n messageFont: function () {\n return {\n fontFamily: this.messageFontFamily,\n fontSize: this.messageFontSize,\n fontWeight: this.messageFontWeight,\n };\n },\n noteFont: function () {\n return {\n fontFamily: this.noteFontFamily,\n fontSize: this.noteFontSize,\n fontWeight: this.noteFontWeight,\n };\n },\n actorFont: function () {\n return {\n fontFamily: this.actorFontFamily,\n fontSize: this.actorFontSize,\n fontWeight: this.actorFontWeight,\n };\n },\n },\n\n /** The object containing configurations specific for gantt diagrams */\n gantt: {\n /**\n * ### titleTopMargin\n *\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |\n * | titleTopMargin | Margin top for the text over the gantt diagram | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 25\n */\n titleTopMargin: 25,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ----------------------------------- | ------- | -------- | ------------------ |\n * | barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 20\n */\n barHeight: 20,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ---------------------------------------------------------------- | ------- | -------- | ------------------ |\n * | barGap | The margin between the different activities in the gantt diagram | Integer | Optional | Any Positive Value |\n *\n * **Notes:** Default value: 4\n */\n barGap: 4,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ---------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------ |\n * | topPadding | Margin between title and gantt diagram and between axis and gantt diagram. | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 50\n */\n topPadding: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------ | ----------------------------------------------------------------------- | ------- | -------- | ------------------ |\n * | rightPadding | The space allocated for the section name to the right of the activities | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 75\n */\n rightPadding: 75,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ---------------------------------------------------------------------- | ------- | -------- | ------------------ |\n * | leftPadding | The space allocated for the section name to the left of the activities | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 75\n */\n leftPadding: 75,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------------- | -------------------------------------------- | ------- | -------- | ------------------ |\n * | gridLineStartPadding | Vertical starting position of the grid lines | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 35\n */\n gridLineStartPadding: 35,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ----------- | ------- | -------- | ------------------ |\n * | fontSize | Font size | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 11\n */\n fontSize: 11,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ---------------------- | ------- | -------- | ------------------ |\n * | sectionFontSize | Font size for sections | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 11\n */\n sectionFontSize: 11,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------------- | ---------------------------------------- | ------- | -------- | ------------------ |\n * | numberSectionStyles | The number of alternating section styles | Integer | 4 | Any Positive Value |\n *\n * **Notes:** Default value: 4\n */\n numberSectionStyles: 4,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ---------- | --------------------------- | ---- | -------- | ---------------- |\n * | axisFormat | Datetime format of the axis | 3 | Required | Date in yy-mm-dd |\n *\n * **Notes:**\n *\n * This might need adjustment to match your locale and preferences\n *\n * Default value: '%Y-%m-%d'.\n */\n axisFormat: '%Y-%m-%d',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------- | ------- | -------- | ----------- |\n * | useMaxWidth | See notes | boolean | 4 | true, false |\n *\n * **Notes:**\n *\n * When this flag is set the height and width is set to 100% and is then scaling with the\n * available space if not the absolute space required is used.\n *\n * Default value: true\n */\n useMaxWidth: true,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ----------- | ------- | -------- | ----------- |\n * | topAxis | See notes | Boolean | 4 | True, False |\n *\n * **Notes:** when this flag is set date labels will be added to the top of the chart\n *\n * **Default value false**.\n */\n topAxis: false,\n\n useWidth: undefined,\n },\n\n /** The object containing configurations specific for journey diagrams */\n journey: {\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |\n * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 50\n */\n diagramMarginX: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ |\n * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 10\n */\n diagramMarginY: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | --------------------- | ------- | -------- | ------------------ |\n * | actorMargin | Margin between actors | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 50\n */\n leftMargin: 150,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | -------------------- | ------- | -------- | ------------------ |\n * | width | Width of actor boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 150\n */\n width: 150,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | --------------------- | ------- | -------- | ------------------ |\n * | height | Height of actor boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 65\n */\n height: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ------------------------ | ------- | -------- | ------------------ |\n * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 10\n */\n boxMargin: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |\n * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 5\n */\n boxTextMargin: 5,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ---------- | ------------------- | ------- | -------- | ------------------ |\n * | noteMargin | Margin around notes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 10\n */\n noteMargin: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------- | ----------------------- | ------- | -------- | ------------------ |\n * | messageMargin | Space between messages. | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n *\n * Space between messages.\n *\n * Default value: 35\n */\n messageMargin: 35,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------ | --------------------------- | ---- | -------- | ------------------------- |\n * | messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' |\n *\n * **Notes:** Default value: 'center'\n */\n messageAlign: 'center',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |\n * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4 | Any Positive Value |\n *\n * **Notes:**\n *\n * Depending on css styling this might need adjustment.\n *\n * Default value: 1\n */\n bottomMarginAdj: 1,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------- | ------- | -------- | ----------- |\n * | useMaxWidth | See notes | boolean | 4 | true, false |\n *\n * **Notes:**\n *\n * When this flag is set the height and width is set to 100% and is then scaling with the\n * available space if not the absolute space required is used.\n *\n * Default value: true\n */\n useMaxWidth: true,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | --------------------------------- | ---- | -------- | ----------- |\n * | rightAngles | Curved Arrows become Right Angles | 3 | 4 | true, false |\n *\n * **Notes:**\n *\n * This will display arrows that start and begin at the same node as right angles, rather than a curves\n *\n * Default value: false\n */\n rightAngles: false,\n taskFontSize: 14,\n taskFontFamily: '\"Open Sans\", sans-serif',\n taskMargin: 50,\n // width of activation box\n activationWidth: 10,\n\n // text placement as: tspan | fo | old only text as before\n textPlacement: 'fo',\n actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'],\n\n sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'],\n sectionColours: ['#fff'],\n },\n class: {\n arrowMarkerAbsolute: false,\n dividerMargin: 10,\n padding: 5,\n textHeight: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------- | ------- | -------- | ----------- |\n * | useMaxWidth | See notes | boolean | 4 | true, false |\n *\n * **Notes:**\n *\n * When this flag is set the height and width is set to 100% and is then scaling with the\n * available space if not the absolute space required is used.\n *\n * Default value: true\n */\n useMaxWidth: true,\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ----------- | ------- | -------- | ----------------------- |\n * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |\n *\n * **Notes**:\n *\n * Decides which rendering engine that is to be used for the rendering. Legal values are:\n * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid\n *\n * Default value: 'dagre-d3'\n */\n defaultRenderer: 'dagre-wrapper',\n },\n state: {\n dividerMargin: 10,\n sizeUnit: 5,\n padding: 8,\n textHeight: 10,\n titleShift: -15,\n noteMargin: 10,\n forkWidth: 70,\n forkHeight: 7,\n // Used\n miniPadding: 2,\n // Font size factor, this is used to guess the width of the edges labels before rendering by dagre\n // layout. This might need updating if/when switching font\n fontSizeFactor: 5.02,\n fontSize: 24,\n labelHeight: 16,\n edgeLengthFactor: '20',\n compositTitleSize: 35,\n radius: 5,\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------- | ------- | -------- | ----------- |\n * | useMaxWidth | See notes | boolean | 4 | true, false |\n *\n * **Notes:**\n *\n * When this flag is set the height and width is set to 100% and is then scaling with the\n * available space if not the absolute space required is used.\n *\n * Default value: true\n */\n useMaxWidth: true,\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ----------- | ------- | -------- | ----------------------- |\n * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |\n *\n * **Notes:**\n *\n * Decides which rendering engine that is to be used for the rendering. Legal values are:\n * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid\n *\n * Default value: 'dagre-d3'\n */\n defaultRenderer: 'dagre-wrapper',\n },\n\n /** The object containing configurations specific for entity relationship diagrams */\n er: {\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |\n * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n *\n * The amount of padding around the diagram as a whole so that embedded diagrams have margins,\n * expressed in pixels\n *\n * Default value: 20\n */\n diagramPadding: 20,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ---------------------------------------- | ------ | -------- | ---------------------- |\n * | layoutDirection | Directional bias for layout of entities. | string | Required | \"TB\", \"BT\", \"LR\", \"RL\" |\n *\n * **Notes:**\n *\n * 'TB' for Top-Bottom, 'BT'for Bottom-Top, 'LR' for Left-Right, or 'RL' for Right to Left.\n *\n * T = top, B = bottom, L = left, and R = right.\n *\n * Default value: 'TB'\n */\n layoutDirection: 'TB',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | ---------------------------------- | ------- | -------- | ------------------ |\n * | minEntityWidth | The minimum width of an entity box | Integer | Required | Any Positive Value |\n *\n * **Notes:** Expressed in pixels. Default value: 100\n */\n minEntityWidth: 100,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ----------------------------------- | ------- | -------- | ------------------ |\n * | minEntityHeight | The minimum height of an entity box | Integer | 4 | Any Positive Value |\n *\n * **Notes:** Expressed in pixels Default value: 75\n */\n minEntityHeight: 75,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ |\n * | entityPadding | Minimum internal padding between text in box and box borders | Integer | 4 | Any Positive Value |\n *\n * **Notes:**\n *\n * The minimum internal padding between text in an entity box and the enclosing box borders,\n * expressed in pixels.\n *\n * Default value: 15\n */\n entityPadding: 15,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ----------------------------------- | ------ | -------- | -------------------- |\n * | stroke | Stroke color of box edges and lines | string | 4 | Any recognized color |\n *\n * **Notes:** Default value: 'gray'\n */\n stroke: 'gray',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | -------------------------- | ------ | -------- | -------------------- |\n * | fill | Fill color of entity boxes | string | 4 | Any recognized color |\n *\n * **Notes:** Default value: 'honeydew'\n */\n fill: 'honeydew',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ------------------- | ------- | -------- | ------------------ |\n * | fontSize | Font Size in pixels | Integer | | Any Positive Value |\n *\n * **Notes:**\n *\n * Font size (expressed as an integer representing a number of pixels) Default value: 12\n */\n fontSize: 12,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------- | ------- | -------- | ----------- |\n * | useMaxWidth | See Notes | boolean | Required | true, false |\n *\n * **Notes:**\n *\n * When this flag is set to true, the diagram width is locked to 100% and scaled based on\n * available space. If set to false, the diagram reserves its absolute width.\n *\n * Default value: true\n */\n useMaxWidth: true,\n },\n\n /** The object containing configurations specific for pie diagrams */\n pie: {\n useWidth: undefined,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------- | ------- | -------- | ----------- |\n * | useMaxWidth | See Notes | boolean | Required | true, false |\n *\n * **Notes:**\n *\n * When this flag is set to true, the diagram width is locked to 100% and scaled based on\n * available space. If set to false, the diagram reserves its absolute width.\n *\n * Default value: true\n */\n useMaxWidth: true,\n },\n\n /** The object containing configurations specific for req diagrams */\n requirement: {\n useWidth: undefined,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------- | ------- | -------- | ----------- |\n * | useMaxWidth | See Notes | boolean | Required | true, false |\n *\n * **Notes:**\n *\n * When this flag is set to true, the diagram width is locked to 100% and scaled based on\n * available space. If set to false, the diagram reserves its absolute width.\n *\n * Default value: true\n */\n useMaxWidth: true,\n\n rect_fill: '#f9f9f9',\n text_color: '#333',\n rect_border_size: '0.5px',\n rect_border_color: '#bbb',\n rect_min_width: 200,\n rect_min_height: 200,\n fontSize: 14,\n rect_padding: 10,\n line_height: 20,\n },\n gitGraph: {\n diagramPadding: 8,\n nodeLabel: {\n width: 75,\n height: 100,\n x: -25,\n y: 0,\n },\n mainBranchName: 'main',\n mainBranchOrder: 0,\n showCommitLabel: true,\n showBranches: true,\n rotateCommitLabel: true,\n },\n\n /** The object containing configurations specific for c4 diagrams */\n c4: {\n useWidth: undefined,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |\n * | diagramMarginX | Margin to the right and left of the c4 diagram | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 50\n */\n diagramMarginX: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | ------------------------------------------- | ------- | -------- | ------------------ |\n * | diagramMarginY | Margin to the over and under the c4 diagram | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 10\n */\n diagramMarginY: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------- | --------------------- | ------- | -------- | ------------------ |\n * | c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 50\n */\n c4ShapeMargin: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | -------------- | ---------------------- | ------- | -------- | ------------------ |\n * | c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 20\n */\n c4ShapePadding: 20,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | --------------------- | ------- | -------- | ------------------ |\n * | width | Width of person boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 216\n */\n width: 216,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ---------------------- | ------- | -------- | ------------------ |\n * | height | Height of person boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 60\n */\n height: 60,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------- | ------------------- | ------- | -------- | ------------------ |\n * | boxMargin | Margin around boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 10\n */\n boxMargin: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ----------- | ----------- | ------- | -------- | ----------- |\n * | useMaxWidth | See Notes | boolean | Required | true, false |\n *\n * **Notes:** When this flag is set to true, the height and width is set to 100% and is then\n * scaling with the available space. If set to false, the absolute space required is used.\n *\n * Default value: true\n */\n useMaxWidth: true,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | ------------ | ----------- | ------- | -------- | ------------------ |\n * | c4ShapeInRow | See Notes | Integer | Required | Any Positive Value |\n *\n * **Notes:** How many shapes to place in each row.\n *\n * Default value: 4\n */\n c4ShapeInRow: 4,\n\n nextLinePaddingX: 0,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --------------- | ----------- | ------- | -------- | ------------------ |\n * | c4BoundaryInRow | See Notes | Integer | Required | Any Positive Value |\n *\n * **Notes:** How many boundarys to place in each row.\n *\n * Default value: 2\n */\n c4BoundaryInRow: 2,\n\n /**\n * This sets the font size of Person shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n personFontSize: 14,\n /**\n * This sets the font family of Person shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n personFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of Person shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n personFontWeight: 'normal',\n\n /**\n * This sets the font size of External Person shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n external_personFontSize: 14,\n /**\n * This sets the font family of External Person shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n external_personFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of External Person shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n external_personFontWeight: 'normal',\n\n /**\n * This sets the font size of System shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n systemFontSize: 14,\n /**\n * This sets the font family of System shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n systemFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of System shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n systemFontWeight: 'normal',\n\n /**\n * This sets the font size of External System shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n external_systemFontSize: 14,\n /**\n * This sets the font family of External System shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n external_systemFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of External System shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n external_systemFontWeight: 'normal',\n\n /**\n * This sets the font size of System DB shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n system_dbFontSize: 14,\n /**\n * This sets the font family of System DB shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n system_dbFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of System DB shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n system_dbFontWeight: 'normal',\n\n /**\n * This sets the font size of External System DB shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n external_system_dbFontSize: 14,\n /**\n * This sets the font family of External System DB shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n external_system_dbFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of External System DB shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n external_system_dbFontWeight: 'normal',\n\n /**\n * This sets the font size of System Queue shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n system_queueFontSize: 14,\n /**\n * This sets the font family of System Queue shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n system_queueFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of System Queue shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n system_queueFontWeight: 'normal',\n\n /**\n * This sets the font size of External System Queue shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n external_system_queueFontSize: 14,\n /**\n * This sets the font family of External System Queue shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n external_system_queueFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of External System Queue shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n external_system_queueFontWeight: 'normal',\n\n /**\n * This sets the font size of Boundary shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n boundaryFontSize: 14,\n /**\n * This sets the font family of Boundary shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n boundaryFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of Boundary shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n boundaryFontWeight: 'normal',\n\n /**\n * This sets the font size of Message shape for the diagram\n *\n * **Notes:** Default value: 12.\n */\n messageFontSize: 12,\n /**\n * This sets the font family of Message shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n messageFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of Message shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n messageFontWeight: 'normal',\n\n /**\n * This sets the font size of Container shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n containerFontSize: 14,\n /**\n * This sets the font family of Container shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n containerFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of Container shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n containerFontWeight: 'normal',\n\n /**\n * This sets the font size of External Container shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n external_containerFontSize: 14,\n /**\n * This sets the font family of External Container shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n external_containerFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of External Container shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n external_containerFontWeight: 'normal',\n\n /**\n * This sets the font size of Container DB shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n container_dbFontSize: 14,\n /**\n * This sets the font family of Container DB shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n container_dbFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of Container DB shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n container_dbFontWeight: 'normal',\n\n /**\n * This sets the font size of External Container DB shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n external_container_dbFontSize: 14,\n /**\n * This sets the font family of External Container DB shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n external_container_dbFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of External Container DB shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n external_container_dbFontWeight: 'normal',\n\n /**\n * This sets the font size of Container Queue shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n container_queueFontSize: 14,\n /**\n * This sets the font family of Container Queue shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n container_queueFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of Container Queue shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n container_queueFontWeight: 'normal',\n\n /**\n * This sets the font size of External Container Queue shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n external_container_queueFontSize: 14,\n /**\n * This sets the font family of External Container Queue shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n external_container_queueFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of External Container Queue shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n external_container_queueFontWeight: 'normal',\n\n /**\n * This sets the font size of Component shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n componentFontSize: 14,\n /**\n * This sets the font family of Component shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n componentFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of Component shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n componentFontWeight: 'normal',\n\n /**\n * This sets the font size of External Component shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n external_componentFontSize: 14,\n /**\n * This sets the font family of External Component shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n external_componentFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of External Component shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n external_componentFontWeight: 'normal',\n\n /**\n * This sets the font size of Component DB shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n component_dbFontSize: 14,\n /**\n * This sets the font family of Component DB shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n component_dbFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of Component DB shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n component_dbFontWeight: 'normal',\n\n /**\n * This sets the font size of External Component DB shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n external_component_dbFontSize: 14,\n /**\n * This sets the font family of External Component DB shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n external_component_dbFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of External Component DB shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n external_component_dbFontWeight: 'normal',\n\n /**\n * This sets the font size of Component Queue shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n component_queueFontSize: 14,\n /**\n * This sets the font family of Component Queue shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n component_queueFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of Component Queue shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n component_queueFontWeight: 'normal',\n\n /**\n * This sets the font size of External Component Queue shape for the diagram\n *\n * **Notes:** Default value: 14.\n */\n external_component_queueFontSize: 14,\n /**\n * This sets the font family of External Component Queue shape for the diagram\n *\n * **Notes:** Default value: \"Open Sans\", sans-serif.\n */\n external_component_queueFontFamily: '\"Open Sans\", sans-serif',\n /**\n * This sets the font weight of External Component Queue shape for the diagram\n *\n * **Notes:** Default value: normal.\n */\n external_component_queueFontWeight: 'normal',\n\n /**\n * This sets the auto-wrap state for the diagram\n *\n * **Notes:** Default value: true.\n */\n wrap: true,\n\n /**\n * This sets the auto-wrap padding for the diagram (sides only)\n *\n * **Notes:** Default value: 0.\n */\n wrapPadding: 10,\n\n personFont: function () {\n return {\n fontFamily: this.personFontFamily,\n fontSize: this.personFontSize,\n fontWeight: this.personFontWeight,\n };\n },\n\n external_personFont: function () {\n return {\n fontFamily: this.external_personFontFamily,\n fontSize: this.external_personFontSize,\n fontWeight: this.external_personFontWeight,\n };\n },\n\n systemFont: function () {\n return {\n fontFamily: this.systemFontFamily,\n fontSize: this.systemFontSize,\n fontWeight: this.systemFontWeight,\n };\n },\n\n external_systemFont: function () {\n return {\n fontFamily: this.external_systemFontFamily,\n fontSize: this.external_systemFontSize,\n fontWeight: this.external_systemFontWeight,\n };\n },\n\n system_dbFont: function () {\n return {\n fontFamily: this.system_dbFontFamily,\n fontSize: this.system_dbFontSize,\n fontWeight: this.system_dbFontWeight,\n };\n },\n\n external_system_dbFont: function () {\n return {\n fontFamily: this.external_system_dbFontFamily,\n fontSize: this.external_system_dbFontSize,\n fontWeight: this.external_system_dbFontWeight,\n };\n },\n\n system_queueFont: function () {\n return {\n fontFamily: this.system_queueFontFamily,\n fontSize: this.system_queueFontSize,\n fontWeight: this.system_queueFontWeight,\n };\n },\n\n external_system_queueFont: function () {\n return {\n fontFamily: this.external_system_queueFontFamily,\n fontSize: this.external_system_queueFontSize,\n fontWeight: this.external_system_queueFontWeight,\n };\n },\n\n containerFont: function () {\n return {\n fontFamily: this.containerFontFamily,\n fontSize: this.containerFontSize,\n fontWeight: this.containerFontWeight,\n };\n },\n\n external_containerFont: function () {\n return {\n fontFamily: this.external_containerFontFamily,\n fontSize: this.external_containerFontSize,\n fontWeight: this.external_containerFontWeight,\n };\n },\n\n container_dbFont: function () {\n return {\n fontFamily: this.container_dbFontFamily,\n fontSize: this.container_dbFontSize,\n fontWeight: this.container_dbFontWeight,\n };\n },\n\n external_container_dbFont: function () {\n return {\n fontFamily: this.external_container_dbFontFamily,\n fontSize: this.external_container_dbFontSize,\n fontWeight: this.external_container_dbFontWeight,\n };\n },\n\n container_queueFont: function () {\n return {\n fontFamily: this.container_queueFontFamily,\n fontSize: this.container_queueFontSize,\n fontWeight: this.container_queueFontWeight,\n };\n },\n\n external_container_queueFont: function () {\n return {\n fontFamily: this.external_container_queueFontFamily,\n fontSize: this.external_container_queueFontSize,\n fontWeight: this.external_container_queueFontWeight,\n };\n },\n\n componentFont: function () {\n return {\n fontFamily: this.componentFontFamily,\n fontSize: this.componentFontSize,\n fontWeight: this.componentFontWeight,\n };\n },\n\n external_componentFont: function () {\n return {\n fontFamily: this.external_componentFontFamily,\n fontSize: this.external_componentFontSize,\n fontWeight: this.external_componentFontWeight,\n };\n },\n\n component_dbFont: function () {\n return {\n fontFamily: this.component_dbFontFamily,\n fontSize: this.component_dbFontSize,\n fontWeight: this.component_dbFontWeight,\n };\n },\n\n external_component_dbFont: function () {\n return {\n fontFamily: this.external_component_dbFontFamily,\n fontSize: this.external_component_dbFontSize,\n fontWeight: this.external_component_dbFontWeight,\n };\n },\n\n component_queueFont: function () {\n return {\n fontFamily: this.component_queueFontFamily,\n fontSize: this.component_queueFontSize,\n fontWeight: this.component_queueFontWeight,\n };\n },\n\n external_component_queueFont: function () {\n return {\n fontFamily: this.external_component_queueFontFamily,\n fontSize: this.external_component_queueFontSize,\n fontWeight: this.external_component_queueFontWeight,\n };\n },\n\n boundaryFont: function () {\n return {\n fontFamily: this.boundaryFontFamily,\n fontSize: this.boundaryFontSize,\n fontWeight: this.boundaryFontWeight,\n };\n },\n\n messageFont: function () {\n return {\n fontFamily: this.messageFontFamily,\n fontSize: this.messageFontSize,\n fontWeight: this.messageFontWeight,\n };\n },\n\n // ' Colors\n // ' ##################################\n person_bg_color: '#08427B',\n person_border_color: '#073B6F',\n external_person_bg_color: '#686868',\n external_person_border_color: '#8A8A8A',\n system_bg_color: '#1168BD',\n system_border_color: '#3C7FC0',\n system_db_bg_color: '#1168BD',\n system_db_border_color: '#3C7FC0',\n system_queue_bg_color: '#1168BD',\n system_queue_border_color: '#3C7FC0',\n external_system_bg_color: '#999999',\n external_system_border_color: '#8A8A8A',\n external_system_db_bg_color: '#999999',\n external_system_db_border_color: '#8A8A8A',\n external_system_queue_bg_color: '#999999',\n external_system_queue_border_color: '#8A8A8A',\n container_bg_color: '#438DD5',\n container_border_color: '#3C7FC0',\n container_db_bg_color: '#438DD5',\n container_db_border_color: '#3C7FC0',\n container_queue_bg_color: '#438DD5',\n container_queue_border_color: '#3C7FC0',\n external_container_bg_color: '#B3B3B3',\n external_container_border_color: '#A6A6A6',\n external_container_db_bg_color: '#B3B3B3',\n external_container_db_border_color: '#A6A6A6',\n external_container_queue_bg_color: '#B3B3B3',\n external_container_queue_border_color: '#A6A6A6',\n component_bg_color: '#85BBF0',\n component_border_color: '#78A8D8',\n component_db_bg_color: '#85BBF0',\n component_db_border_color: '#78A8D8',\n component_queue_bg_color: '#85BBF0',\n component_queue_border_color: '#78A8D8',\n external_component_bg_color: '#CCCCCC',\n external_component_border_color: '#BFBFBF',\n external_component_db_bg_color: '#CCCCCC',\n external_component_db_border_color: '#BFBFBF',\n external_component_queue_bg_color: '#CCCCCC',\n external_component_queue_border_color: '#BFBFBF',\n },\n};\n\nconfig.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;\nconfig.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute;\n\nconst keyify = (obj, prefix = '') =>\n Object.keys(obj).reduce((res, el) => {\n if (Array.isArray(obj[el])) {\n return res;\n } else if (typeof obj[el] === 'object' && obj[el] !== null) {\n return [...res, prefix + el, ...keyify(obj[el], '')];\n }\n return [...res, prefix + el];\n }, []);\n\nexport const configKeys = keyify(config, '');\nexport default config;\n","const directive =\n /[%]{2}[{]\\s*(?:(?:(\\w+)\\s*:|(\\w+))\\s*(?:(?:(\\w+))|((?:(?![}][%]{2}).|\\r?\\n)*))?\\s*)(?:[}][%]{2})?/gi;\nconst anyComment = /\\s*%%.*\\n/gm;\nconst detectors = {};\n/**\n * @function detectType Detects the type of the graph text. Takes into consideration the possible\n * existence of an %%init directive\n *\n * ```mermaid\n * %%{initialize: {\"startOnLoad\": true, logLevel: \"fatal\" }}%%\n * graph LR\n * a-->b\n * b-->c\n * c-->d\n * d-->e\n * e-->f\n * f-->g\n * g-->h\n * ```\n * @param {string} text The text defining the graph\n * @param {{\n * class: { defaultRenderer: string } | undefined;\n * state: { defaultRenderer: string } | undefined;\n * flowchart: { defaultRenderer: string } | undefined;\n * }} [cnf]\n * @returns {string} A graph definition key\n */\nconst detectType = function (text, cnf) {\n text = text.replace(directive, '').replace(anyComment, '\\n');\n if (text.match(/^\\s*C4Context|C4Container|C4Component|C4Dynamic|C4Deployment/)) {\n return 'c4';\n }\n\n if (text.match(/^\\s*sequenceDiagram/)) {\n return 'sequence';\n }\n\n if (text.match(/^\\s*gantt/)) {\n return 'gantt';\n }\n if (text.match(/^\\s*classDiagram-v2/)) {\n return 'classDiagram';\n }\n if (text.match(/^\\s*classDiagram/)) {\n if (cnf && cnf.class && cnf.class.defaultRenderer === 'dagre-wrapper') return 'classDiagram';\n return 'class';\n }\n\n if (text.match(/^\\s*stateDiagram-v2/)) {\n return 'stateDiagram';\n }\n\n if (text.match(/^\\s*stateDiagram/)) {\n if (cnf && cnf.class && cnf.state.defaultRenderer === 'dagre-wrapper') return 'stateDiagram';\n return 'state';\n }\n\n // if (text.match(/^\\s*gitGraph/)) {\n // return 'gitGraph';\n // }\n if (text.match(/^\\s*flowchart/)) {\n return 'flowchart-v2';\n }\n\n if (text.match(/^\\s*info/)) {\n return 'info';\n }\n if (text.match(/^\\s*pie/)) {\n return 'pie';\n }\n\n if (text.match(/^\\s*erDiagram/)) {\n return 'er';\n }\n\n if (text.match(/^\\s*journey/)) {\n return 'journey';\n }\n\n if (text.match(/^\\s*requirement/) || text.match(/^\\s*requirementDiagram/)) {\n return 'requirement';\n }\n if (cnf && cnf.flowchart && cnf.flowchart.defaultRenderer === 'dagre-wrapper')\n return 'flowchart-v2';\n const k = Object.keys(detectors);\n for (let i = 0; i < k.length; i++) {\n const key = k[i];\n const dia = detectors[key];\n if (dia && dia.detector(text)) {\n return key;\n }\n }\n return 'flowchart';\n};\nexport const addDetector = (key, detector) => {\n detectors[key] = {\n detector,\n };\n};\nexport default detectType;\n","import { registerDiagram } from './diagramAPI.js';\n// import mindmapDb from '../diagrams/mindmap/mindmapDb';\n// import mindmapRenderer from '../diagrams/mindmap/mindmapRenderer';\n// import mindmapParser from '../diagrams/mindmap/parser/mindmapDiagram';\n// import mindmapDetector from '../diagrams/mindmap/mindmapDetector';\n\nimport gitGraphDb from '../diagrams/git/gitGraphAst';\nimport gitGraphRenderer from '../diagrams/git/gitGraphRenderer';\nimport gitGraphParser from '../diagrams/git/parser/gitGraph';\nimport gitGraphDetector from '../diagrams/git/gitGraphDetector';\n\n// Register mindmap and other built-in diagrams\n// registerDiagram(\n// 'mindmap',\n// mindmapParser,\n// mindmapDb,\n// mindmapRenderer,\n// undefined,\n// mindmapRenderer,\n// mindmapDetector\n// );\nconst addDiagrams = () => {\n registerDiagram(\n 'gitGraph',\n gitGraphParser,\n gitGraphDb,\n gitGraphRenderer,\n undefined,\n gitGraphDetector\n );\n};\nexport default addDiagrams;\n","import c4Db from '../diagrams/c4/c4Db';\nimport c4Renderer from '../diagrams/c4/c4Renderer';\nimport c4Parser from '../diagrams/c4/parser/c4Diagram';\nimport classDb from '../diagrams/class/classDb';\nimport classRenderer from '../diagrams/class/classRenderer';\nimport classRendererV2 from '../diagrams/class/classRenderer-v2';\nimport classParser from '../diagrams/class/parser/classDiagram';\nimport erDb from '../diagrams/er/erDb';\nimport erRenderer from '../diagrams/er/erRenderer';\nimport erParser from '../diagrams/er/parser/erDiagram';\nimport flowDb from '../diagrams/flowchart/flowDb';\nimport flowRenderer from '../diagrams/flowchart/flowRenderer';\nimport flowRendererV2 from '../diagrams/flowchart/flowRenderer-v2';\nimport flowParser from '../diagrams/flowchart/parser/flow';\nimport ganttDb from '../diagrams/gantt/ganttDb';\nimport ganttRenderer from '../diagrams/gantt/ganttRenderer';\nimport ganttParser from '../diagrams/gantt/parser/gantt';\nimport infoDb from '../diagrams/info/infoDb';\nimport infoRenderer from '../diagrams/info/infoRenderer';\nimport infoParser from '../diagrams/info/parser/info';\nimport pieParser from '../diagrams/pie/parser/pie';\nimport pieDb from '../diagrams/pie/pieDb';\nimport pieRenderer from '../diagrams/pie/pieRenderer';\nimport requirementParser from '../diagrams/requirement/parser/requirementDiagram';\nimport requirementDb from '../diagrams/requirement/requirementDb';\nimport requirementRenderer from '../diagrams/requirement/requirementRenderer';\nimport sequenceParser from '../diagrams/sequence/parser/sequenceDiagram';\nimport sequenceDb from '../diagrams/sequence/sequenceDb';\nimport sequenceRenderer from '../diagrams/sequence/sequenceRenderer';\nimport stateParser from '../diagrams/state/parser/stateDiagram';\nimport stateDb from '../diagrams/state/stateDb';\nimport stateRenderer from '../diagrams/state/stateRenderer';\nimport stateRendererV2 from '../diagrams/state/stateRenderer-v2';\nimport journeyDb from '../diagrams/user-journey/journeyDb';\nimport journeyRenderer from '../diagrams/user-journey/journeyRenderer';\nimport journeyParser from '../diagrams/user-journey/parser/journey';\nimport { addDetector } from './detectType';\n\nconst diagrams = {\n c4: {\n db: c4Db,\n renderer: c4Renderer,\n parser: c4Parser,\n init: (cnf) => {\n c4Renderer.setConf(cnf.c4);\n },\n },\n class: {\n db: classDb,\n renderer: classRenderer,\n parser: classParser,\n init: (cnf) => {\n cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n classDb.clear();\n },\n },\n classDiagram: {\n db: classDb,\n renderer: classRendererV2,\n parser: classParser,\n init: (cnf) => {\n cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n classDb.clear();\n },\n },\n er: {\n db: erDb,\n renderer: erRenderer,\n parser: erParser,\n },\n flowchart: {\n db: flowDb,\n renderer: flowRenderer,\n parser: flowParser,\n init: (cnf) => {\n flowRenderer.setConf(cnf.flowchart);\n cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n flowDb.clear();\n flowDb.setGen('gen-1');\n },\n },\n 'flowchart-v2': {\n db: flowDb,\n renderer: flowRendererV2,\n parser: flowParser,\n init: (cnf) => {\n flowRendererV2.setConf(cnf.flowchart);\n cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n flowDb.clear();\n flowDb.setGen('gen-2');\n },\n },\n gantt: {\n db: ganttDb,\n renderer: ganttRenderer,\n parser: ganttParser,\n init: (cnf) => {\n ganttRenderer.setConf(cnf.gantt);\n },\n },\n // git: {\n // db: gitGraphAst,\n // renderer: gitGraphRenderer,\n // parser: gitGraphParser,\n // },\n info: {\n db: infoDb,\n renderer: infoRenderer,\n parser: infoParser,\n },\n pie: {\n db: pieDb,\n renderer: pieRenderer,\n parser: pieParser,\n },\n requirement: {\n db: requirementDb,\n renderer: requirementRenderer,\n parser: requirementParser,\n },\n sequence: {\n db: sequenceDb,\n renderer: sequenceRenderer,\n parser: sequenceParser,\n init: (cnf) => {\n cnf.sequence.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n if (cnf.sequenceDiagram) {\n // backwards compatibility\n sequenceRenderer.setConf(Object.assign(cnf.sequence, cnf.sequenceDiagram));\n console.error(\n '`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.'\n );\n }\n sequenceDb.setWrap(cnf.wrap);\n sequenceRenderer.setConf(cnf.sequence);\n },\n },\n state: {\n db: stateDb,\n renderer: stateRenderer,\n parser: stateParser,\n init: (cnf) => {\n cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n stateDb.clear();\n },\n },\n stateDiagram: {\n db: stateDb,\n renderer: stateRendererV2,\n parser: stateParser,\n init: (cnf) => {\n cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n stateDb.clear();\n },\n },\n journey: {\n db: journeyDb,\n renderer: journeyRenderer,\n parser: journeyParser,\n init: (cnf) => {\n journeyRenderer.setConf(cnf.journey);\n journeyDb.clear();\n },\n },\n};\n// console.log(sequenceDb);\nexport const registerDiagram = (id, parser, db, renderer, init, detector) => {\n diagrams[id] = { parser, db, renderer, init };\n addDetector(id, detector);\n};\n\nexport const getDiagrams = () => {\n // console.log('diagrams', diagrams);\n return diagrams;\n};\n","import mermaidAPI from '../../mermaidAPI';\nimport * as configApi from '../../config';\nimport { log } from '../../logger';\nimport { sanitizeText } from '../common/common';\nimport { setAccTitle, getAccTitle, getAccDescription, setAccDescription } from '../../commonDb';\n\nlet c4ShapeArray = [];\nlet boundaryParseStack = [''];\nlet currentBoundaryParse = 'global';\nlet parentBoundaryParse = '';\nlet boundarys = [\n {\n alias: 'global',\n label: { text: 'global' },\n type: { text: 'global' },\n tags: null,\n link: null,\n parentBoundary: '',\n },\n];\nlet rels = [];\nlet title = '';\nlet wrapEnabled = false;\nlet description = '';\nlet c4ShapeInRow = 4;\nlet c4BoundaryInRow = 2;\nvar c4Type;\n\nexport const getC4Type = function () {\n return c4Type;\n};\n\nexport const setC4Type = function (c4TypeParam) {\n let sanitizedText = sanitizeText(c4TypeParam, configApi.getConfig());\n c4Type = sanitizedText;\n};\n\nexport const parseDirective = function (statement, context, type) {\n mermaidAPI.parseDirective(this, statement, context, type);\n};\n\n//type, from, to, label, ?techn, ?descr, ?sprite, ?tags, $link\nexport const addRel = function (type, from, to, label, techn, descr, sprite, tags, link) {\n // Don't allow label nulling\n if (\n type === undefined ||\n type === null ||\n from === undefined ||\n from === null ||\n to === undefined ||\n to === null ||\n label === undefined ||\n label === null\n )\n return;\n\n let rel = {};\n const old = rels.find((rel) => rel.from === from && rel.to === to);\n if (old) {\n rel = old;\n } else {\n rels.push(rel);\n }\n\n rel.type = type;\n rel.from = from;\n rel.to = to;\n rel.label = { text: label };\n\n if (techn === undefined || techn === null) {\n rel.techn = { text: '' };\n } else {\n if (typeof techn === 'object') {\n let [key, value] = Object.entries(techn)[0];\n rel[key] = { text: value };\n } else {\n rel.techn = { text: techn };\n }\n }\n\n if (descr === undefined || descr === null) {\n rel.descr = { text: '' };\n } else {\n if (typeof descr === 'object') {\n let [key, value] = Object.entries(descr)[0];\n rel[key] = { text: value };\n } else {\n rel.descr = { text: descr };\n }\n }\n\n if (typeof sprite === 'object') {\n let [key, value] = Object.entries(sprite)[0];\n rel[key] = value;\n } else {\n rel.sprite = sprite;\n }\n if (typeof tags === 'object') {\n let [key, value] = Object.entries(tags)[0];\n rel[key] = value;\n } else {\n rel.tags = tags;\n }\n if (typeof link === 'object') {\n let [key, value] = Object.entries(link)[0];\n rel[key] = value;\n } else {\n rel.link = link;\n }\n rel.wrap = autoWrap();\n};\n\n//type, alias, label, ?descr, ?sprite, ?tags, $link\nexport const addPersonOrSystem = function (typeC4Shape, alias, label, descr, sprite, tags, link) {\n // Don't allow label nulling\n if (alias === null || label === null) return;\n\n let personOrSystem = {};\n const old = c4ShapeArray.find((personOrSystem) => personOrSystem.alias === alias);\n if (old && alias === old.alias) {\n personOrSystem = old;\n } else {\n personOrSystem.alias = alias;\n c4ShapeArray.push(personOrSystem);\n }\n\n // Don't allow null labels, either\n if (label === undefined || label === null) {\n personOrSystem.label = { text: '' };\n } else {\n personOrSystem.label = { text: label };\n }\n\n if (descr === undefined || descr === null) {\n personOrSystem.descr = { text: '' };\n } else {\n if (typeof descr === 'object') {\n let [key, value] = Object.entries(descr)[0];\n personOrSystem[key] = { text: value };\n } else {\n personOrSystem.descr = { text: descr };\n }\n }\n\n if (typeof sprite === 'object') {\n let [key, value] = Object.entries(sprite)[0];\n personOrSystem[key] = value;\n } else {\n personOrSystem.sprite = sprite;\n }\n if (typeof tags === 'object') {\n let [key, value] = Object.entries(tags)[0];\n personOrSystem[key] = value;\n } else {\n personOrSystem.tags = tags;\n }\n if (typeof link === 'object') {\n let [key, value] = Object.entries(link)[0];\n personOrSystem[key] = value;\n } else {\n personOrSystem.link = link;\n }\n personOrSystem.typeC4Shape = { text: typeC4Shape };\n personOrSystem.parentBoundary = currentBoundaryParse;\n personOrSystem.wrap = autoWrap();\n};\n\n//type, alias, label, ?techn, ?descr ?sprite, ?tags, $link\nexport const addContainer = function (typeC4Shape, alias, label, techn, descr, sprite, tags, link) {\n // Don't allow label nulling\n if (alias === null || label === null) return;\n\n let container = {};\n const old = c4ShapeArray.find((container) => container.alias === alias);\n if (old && alias === old.alias) {\n container = old;\n } else {\n container.alias = alias;\n c4ShapeArray.push(container);\n }\n\n // Don't allow null labels, either\n if (label === undefined || label === null) {\n container.label = { text: '' };\n } else {\n container.label = { text: label };\n }\n\n if (techn === undefined || techn === null) {\n container.techn = { text: '' };\n } else {\n if (typeof techn === 'object') {\n let [key, value] = Object.entries(techn)[0];\n container[key] = { text: value };\n } else {\n container.techn = { text: techn };\n }\n }\n\n if (descr === undefined || descr === null) {\n container.descr = { text: '' };\n } else {\n if (typeof descr === 'object') {\n let [key, value] = Object.entries(descr)[0];\n container[key] = { text: value };\n } else {\n container.descr = { text: descr };\n }\n }\n\n if (typeof sprite === 'object') {\n let [key, value] = Object.entries(sprite)[0];\n container[key] = value;\n } else {\n container.sprite = sprite;\n }\n if (typeof tags === 'object') {\n let [key, value] = Object.entries(tags)[0];\n container[key] = value;\n } else {\n container.tags = tags;\n }\n if (typeof link === 'object') {\n let [key, value] = Object.entries(link)[0];\n container[key] = value;\n } else {\n container.link = link;\n }\n container.wrap = autoWrap();\n container.typeC4Shape = { text: typeC4Shape };\n container.parentBoundary = currentBoundaryParse;\n};\n\n//type, alias, label, ?techn, ?descr ?sprite, ?tags, $link\nexport const addComponent = function (typeC4Shape, alias, label, techn, descr, sprite, tags, link) {\n // Don't allow label nulling\n if (alias === null || label === null) return;\n\n let component = {};\n const old = c4ShapeArray.find((component) => component.alias === alias);\n if (old && alias === old.alias) {\n component = old;\n } else {\n component.alias = alias;\n c4ShapeArray.push(component);\n }\n\n // Don't allow null labels, either\n if (label === undefined || label === null) {\n component.label = { text: '' };\n } else {\n component.label = { text: label };\n }\n\n if (techn === undefined || techn === null) {\n component.techn = { text: '' };\n } else {\n if (typeof techn === 'object') {\n let [key, value] = Object.entries(techn)[0];\n component[key] = { text: value };\n } else {\n component.techn = { text: techn };\n }\n }\n\n if (descr === undefined || descr === null) {\n component.descr = { text: '' };\n } else {\n if (typeof descr === 'object') {\n let [key, value] = Object.entries(descr)[0];\n component[key] = { text: value };\n } else {\n component.descr = { text: descr };\n }\n }\n\n if (typeof sprite === 'object') {\n let [key, value] = Object.entries(sprite)[0];\n component[key] = value;\n } else {\n component.sprite = sprite;\n }\n if (typeof tags === 'object') {\n let [key, value] = Object.entries(tags)[0];\n component[key] = value;\n } else {\n component.tags = tags;\n }\n if (typeof link === 'object') {\n let [key, value] = Object.entries(link)[0];\n component[key] = value;\n } else {\n component.link = link;\n }\n component.wrap = autoWrap();\n component.typeC4Shape = { text: typeC4Shape };\n component.parentBoundary = currentBoundaryParse;\n};\n\n//alias, label, ?type, ?tags, $link\nexport const addPersonOrSystemBoundary = function (alias, label, type, tags, link) {\n // if (parentBoundary === null) return;\n\n // Don't allow label nulling\n if (alias === null || label === null) return;\n\n let boundary = {};\n const old = boundarys.find((boundary) => boundary.alias === alias);\n if (old && alias === old.alias) {\n boundary = old;\n } else {\n boundary.alias = alias;\n boundarys.push(boundary);\n }\n\n // Don't allow null labels, either\n if (label === undefined || label === null) {\n boundary.label = { text: '' };\n } else {\n boundary.label = { text: label };\n }\n\n if (type === undefined || type === null) {\n boundary.type = { text: 'system' };\n } else {\n if (typeof type === 'object') {\n let [key, value] = Object.entries(type)[0];\n boundary[key] = { text: value };\n } else {\n boundary.type = { text: type };\n }\n }\n\n if (typeof tags === 'object') {\n let [key, value] = Object.entries(tags)[0];\n boundary[key] = value;\n } else {\n boundary.tags = tags;\n }\n if (typeof link === 'object') {\n let [key, value] = Object.entries(link)[0];\n boundary[key] = value;\n } else {\n boundary.link = link;\n }\n boundary.parentBoundary = currentBoundaryParse;\n boundary.wrap = autoWrap();\n\n parentBoundaryParse = currentBoundaryParse;\n currentBoundaryParse = alias;\n boundaryParseStack.push(parentBoundaryParse);\n};\n\n//alias, label, ?type, ?tags, $link\nexport const addContainerBoundary = function (alias, label, type, tags, link) {\n // if (parentBoundary === null) return;\n\n // Don't allow label nulling\n if (alias === null || label === null) return;\n\n let boundary = {};\n const old = boundarys.find((boundary) => boundary.alias === alias);\n if (old && alias === old.alias) {\n boundary = old;\n } else {\n boundary.alias = alias;\n boundarys.push(boundary);\n }\n\n // Don't allow null labels, either\n if (label === undefined || label === null) {\n boundary.label = { text: '' };\n } else {\n boundary.label = { text: label };\n }\n\n if (type === undefined || type === null) {\n boundary.type = { text: 'container' };\n } else {\n if (typeof type === 'object') {\n let [key, value] = Object.entries(type)[0];\n boundary[key] = { text: value };\n } else {\n boundary.type = { text: type };\n }\n }\n\n if (typeof tags === 'object') {\n let [key, value] = Object.entries(tags)[0];\n boundary[key] = value;\n } else {\n boundary.tags = tags;\n }\n if (typeof link === 'object') {\n let [key, value] = Object.entries(link)[0];\n boundary[key] = value;\n } else {\n boundary.link = link;\n }\n boundary.parentBoundary = currentBoundaryParse;\n boundary.wrap = autoWrap();\n\n parentBoundaryParse = currentBoundaryParse;\n currentBoundaryParse = alias;\n boundaryParseStack.push(parentBoundaryParse);\n};\n\n//alias, label, ?type, ?descr, ?sprite, ?tags, $link\nexport const addDeploymentNode = function (\n nodeType,\n alias,\n label,\n type,\n descr,\n sprite,\n tags,\n link\n) {\n // if (parentBoundary === null) return;\n\n // Don't allow label nulling\n if (alias === null || label === null) return;\n\n let boundary = {};\n const old = boundarys.find((boundary) => boundary.alias === alias);\n if (old && alias === old.alias) {\n boundary = old;\n } else {\n boundary.alias = alias;\n boundarys.push(boundary);\n }\n\n // Don't allow null labels, either\n if (label === undefined || label === null) {\n boundary.label = { text: '' };\n } else {\n boundary.label = { text: label };\n }\n\n if (type === undefined || type === null) {\n boundary.type = { text: 'node' };\n } else {\n if (typeof type === 'object') {\n let [key, value] = Object.entries(type)[0];\n boundary[key] = { text: value };\n } else {\n boundary.type = { text: type };\n }\n }\n\n if (descr === undefined || descr === null) {\n boundary.descr = { text: '' };\n } else {\n if (typeof descr === 'object') {\n let [key, value] = Object.entries(descr)[0];\n boundary[key] = { text: value };\n } else {\n boundary.descr = { text: descr };\n }\n }\n\n if (typeof tags === 'object') {\n let [key, value] = Object.entries(tags)[0];\n boundary[key] = value;\n } else {\n boundary.tags = tags;\n }\n if (typeof link === 'object') {\n let [key, value] = Object.entries(link)[0];\n boundary[key] = value;\n } else {\n boundary.link = link;\n }\n boundary.nodeType = nodeType;\n boundary.parentBoundary = currentBoundaryParse;\n boundary.wrap = autoWrap();\n\n parentBoundaryParse = currentBoundaryParse;\n currentBoundaryParse = alias;\n boundaryParseStack.push(parentBoundaryParse);\n};\n\nexport const popBoundaryParseStack = function () {\n currentBoundaryParse = parentBoundaryParse;\n boundaryParseStack.pop();\n parentBoundaryParse = boundaryParseStack.pop();\n boundaryParseStack.push(parentBoundaryParse);\n};\n\n//elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite\nexport const updateElStyle = function (\n typeC4Shape,\n elementName,\n bgColor,\n fontColor,\n borderColor,\n shadowing,\n shape,\n sprite,\n techn,\n legendText,\n legendSprite\n) {\n let old = c4ShapeArray.find((element) => element.alias === elementName);\n if (old === undefined) {\n old = boundarys.find((element) => element.alias === elementName);\n if (old === undefined) {\n return;\n }\n }\n if (bgColor !== undefined && bgColor !== null) {\n if (typeof bgColor === 'object') {\n let [key, value] = Object.entries(bgColor)[0];\n old[key] = value;\n } else {\n old.bgColor = bgColor;\n }\n }\n if (fontColor !== undefined && fontColor !== null) {\n if (typeof fontColor === 'object') {\n let [key, value] = Object.entries(fontColor)[0];\n old[key] = value;\n } else {\n old.fontColor = fontColor;\n }\n }\n if (borderColor !== undefined && borderColor !== null) {\n if (typeof borderColor === 'object') {\n let [key, value] = Object.entries(borderColor)[0];\n old[key] = value;\n } else {\n old.borderColor = borderColor;\n }\n }\n if (shadowing !== undefined && shadowing !== null) {\n if (typeof shadowing === 'object') {\n let [key, value] = Object.entries(shadowing)[0];\n old[key] = value;\n } else {\n old.shadowing = shadowing;\n }\n }\n if (shape !== undefined && shape !== null) {\n if (typeof shape === 'object') {\n let [key, value] = Object.entries(shape)[0];\n old[key] = value;\n } else {\n old.shape = shape;\n }\n }\n if (sprite !== undefined && sprite !== null) {\n if (typeof sprite === 'object') {\n let [key, value] = Object.entries(sprite)[0];\n old[key] = value;\n } else {\n old.sprite = sprite;\n }\n }\n if (techn !== undefined && techn !== null) {\n if (typeof techn === 'object') {\n let [key, value] = Object.entries(techn)[0];\n old[key] = value;\n } else {\n old.techn = techn;\n }\n }\n if (legendText !== undefined && legendText !== null) {\n if (typeof legendText === 'object') {\n let [key, value] = Object.entries(legendText)[0];\n old[key] = value;\n } else {\n old.legendText = legendText;\n }\n }\n if (legendSprite !== undefined && legendSprite !== null) {\n if (typeof legendSprite === 'object') {\n let [key, value] = Object.entries(legendSprite)[0];\n old[key] = value;\n } else {\n old.legendSprite = legendSprite;\n }\n }\n};\n\n//textColor, lineColor, ?offsetX, ?offsetY\nexport const updateRelStyle = function (\n typeC4Shape,\n from,\n to,\n textColor,\n lineColor,\n offsetX,\n offsetY\n) {\n const old = rels.find((rel) => rel.from === from && rel.to === to);\n if (old === undefined) {\n return;\n }\n if (textColor !== undefined && textColor !== null) {\n if (typeof textColor === 'object') {\n let [key, value] = Object.entries(textColor)[0];\n old[key] = value;\n } else {\n old.textColor = textColor;\n }\n }\n if (lineColor !== undefined && lineColor !== null) {\n if (typeof lineColor === 'object') {\n let [key, value] = Object.entries(lineColor)[0];\n old[key] = value;\n } else {\n old.lineColor = lineColor;\n }\n }\n if (offsetX !== undefined && offsetX !== null) {\n if (typeof offsetX === 'object') {\n let [key, value] = Object.entries(offsetX)[0];\n old[key] = parseInt(value);\n } else {\n old.offsetX = parseInt(offsetX);\n }\n }\n if (offsetY !== undefined && offsetY !== null) {\n if (typeof offsetY === 'object') {\n let [key, value] = Object.entries(offsetY)[0];\n old[key] = parseInt(value);\n } else {\n old.offsetY = parseInt(offsetY);\n }\n }\n};\n\n//?c4ShapeInRow, ?c4BoundaryInRow\nexport const updateLayoutConfig = function (typeC4Shape, c4ShapeInRowParam, c4BoundaryInRowParam) {\n let c4ShapeInRowValue = c4ShapeInRow;\n let c4BoundaryInRowValue = c4BoundaryInRow;\n\n if (typeof c4ShapeInRowParam === 'object') {\n let [key, value] = Object.entries(c4ShapeInRowParam)[0];\n c4ShapeInRowValue = parseInt(value);\n } else {\n c4ShapeInRowValue = parseInt(c4ShapeInRowParam);\n }\n if (typeof c4BoundaryInRowParam === 'object') {\n let [key, value] = Object.entries(c4BoundaryInRowParam)[0];\n c4BoundaryInRowValue = parseInt(value);\n } else {\n c4BoundaryInRowValue = parseInt(c4BoundaryInRowParam);\n }\n\n if (c4ShapeInRowValue >= 1) c4ShapeInRow = c4ShapeInRowValue;\n if (c4BoundaryInRowValue >= 1) c4BoundaryInRow = c4BoundaryInRowValue;\n};\n\nexport const getC4ShapeInRow = function () {\n return c4ShapeInRow;\n};\nexport const getC4BoundaryInRow = function () {\n return c4BoundaryInRow;\n};\nexport const getCurrentBoundaryParse = function () {\n return currentBoundaryParse;\n};\n\nexport const getParentBoundaryParse = function () {\n return parentBoundaryParse;\n};\n\nexport const getC4ShapeArray = function (parentBoundary) {\n if (parentBoundary === undefined || parentBoundary === null) return c4ShapeArray;\n else\n return c4ShapeArray.filter((personOrSystem) => {\n return personOrSystem.parentBoundary === parentBoundary;\n });\n};\nexport const getC4Shape = function (alias) {\n return c4ShapeArray.find((personOrSystem) => personOrSystem.alias === alias);\n};\nexport const getC4ShapeKeys = function (parentBoundary) {\n return Object.keys(getC4ShapeArray(parentBoundary));\n};\n\nexport const getBoundarys = function (parentBoundary) {\n if (parentBoundary === undefined || parentBoundary === null) return boundarys;\n else return boundarys.filter((boundary) => boundary.parentBoundary === parentBoundary);\n};\n\nexport const getRels = function () {\n return rels;\n};\n\nexport const getTitle = function () {\n return title;\n};\n\nexport const setWrap = function (wrapSetting) {\n wrapEnabled = wrapSetting;\n};\n\nexport const autoWrap = function () {\n return wrapEnabled;\n};\n\nexport const clear = function () {\n c4ShapeArray = [];\n boundarys = [\n {\n alias: 'global',\n label: { text: 'global' },\n type: { text: 'global' },\n tags: null,\n link: null,\n parentBoundary: '',\n },\n ];\n parentBoundaryParse = '';\n currentBoundaryParse = 'global';\n boundaryParseStack = [''];\n rels = [];\n\n boundaryParseStack = [''];\n title = '';\n wrapEnabled = false;\n description = '';\n c4ShapeInRow = 4;\n c4BoundaryInRow = 2;\n};\n\nexport const LINETYPE = {\n SOLID: 0,\n DOTTED: 1,\n NOTE: 2,\n SOLID_CROSS: 3,\n DOTTED_CROSS: 4,\n SOLID_OPEN: 5,\n DOTTED_OPEN: 6,\n LOOP_START: 10,\n LOOP_END: 11,\n ALT_START: 12,\n ALT_ELSE: 13,\n ALT_END: 14,\n OPT_START: 15,\n OPT_END: 16,\n ACTIVE_START: 17,\n ACTIVE_END: 18,\n PAR_START: 19,\n PAR_AND: 20,\n PAR_END: 21,\n RECT_START: 22,\n RECT_END: 23,\n SOLID_POINT: 24,\n DOTTED_POINT: 25,\n};\n\nexport const ARROWTYPE = {\n FILLED: 0,\n OPEN: 1,\n};\n\nexport const PLACEMENT = {\n LEFTOF: 0,\n RIGHTOF: 1,\n OVER: 2,\n};\n\nexport const setTitle = function (txt) {\n let sanitizedText = sanitizeText(txt, configApi.getConfig());\n title = sanitizedText;\n};\n\nexport default {\n addPersonOrSystem,\n addPersonOrSystemBoundary,\n addContainer,\n addContainerBoundary,\n addComponent,\n addDeploymentNode,\n popBoundaryParseStack,\n addRel,\n updateElStyle,\n updateRelStyle,\n updateLayoutConfig,\n autoWrap,\n setWrap,\n getC4ShapeArray,\n getC4Shape,\n getC4ShapeKeys,\n getBoundarys,\n getCurrentBoundaryParse,\n getParentBoundaryParse,\n getRels,\n getTitle,\n getC4Type,\n getC4ShapeInRow,\n getC4BoundaryInRow,\n setAccTitle,\n getAccTitle,\n getAccDescription,\n setAccDescription,\n parseDirective,\n getConfig: () => configApi.getConfig().c4,\n clear,\n LINETYPE,\n ARROWTYPE,\n PLACEMENT,\n setTitle,\n setC4Type,\n // apply,\n};\n","import { select } from 'd3';\nimport svgDraw, { drawText, fixLifeLineHeights } from './svgDraw';\nimport { log } from '../../logger';\nimport { parser } from './parser/c4Diagram';\nimport common from '../common/common';\nimport c4Db from './c4Db';\nimport * as configApi from '../../config';\nimport assignWithDepth from '../../assignWithDepth';\nimport { wrapLabel, calculateTextWidth, calculateTextHeight, configureSvgSize } from '../../utils';\nimport addSVGAccessibilityFields from '../../accessibility';\n\nlet globalBoundaryMaxX = 0,\n globalBoundaryMaxY = 0;\n\nlet c4ShapeInRow = 4;\nlet c4BoundaryInRow = 2;\n\nparser.yy = c4Db;\n\nlet conf = {};\n\nclass Bounds {\n constructor(diagObj) {\n this.name = '';\n this.data = {};\n this.data.startx = undefined;\n this.data.stopx = undefined;\n this.data.starty = undefined;\n this.data.stopy = undefined;\n this.data.widthLimit = undefined;\n\n this.nextData = {};\n this.nextData.startx = undefined;\n this.nextData.stopx = undefined;\n this.nextData.starty = undefined;\n this.nextData.stopy = undefined;\n this.nextData.cnt = 0;\n\n setConf(diagObj.db.getConfig());\n }\n\n setData(startx, stopx, starty, stopy) {\n this.nextData.startx = this.data.startx = startx;\n this.nextData.stopx = this.data.stopx = stopx;\n this.nextData.starty = this.data.starty = starty;\n this.nextData.stopy = this.data.stopy = stopy;\n }\n\n updateVal(obj, key, val, fun) {\n if (typeof obj[key] === 'undefined') {\n obj[key] = val;\n } else {\n obj[key] = fun(val, obj[key]);\n }\n }\n\n insert(c4Shape) {\n this.nextData.cnt = this.nextData.cnt + 1;\n let _startx =\n this.nextData.startx === this.nextData.stopx\n ? this.nextData.stopx + c4Shape.margin\n : this.nextData.stopx + c4Shape.margin * 2;\n let _stopx = _startx + c4Shape.width;\n let _starty = this.nextData.starty + c4Shape.margin * 2;\n let _stopy = _starty + c4Shape.height;\n if (\n _startx >= this.data.widthLimit ||\n _stopx >= this.data.widthLimit ||\n this.nextData.cnt > c4ShapeInRow\n ) {\n _startx = this.nextData.startx + c4Shape.margin + conf.nextLinePaddingX;\n _starty = this.nextData.stopy + c4Shape.margin * 2;\n\n this.nextData.stopx = _stopx = _startx + c4Shape.width;\n this.nextData.starty = this.nextData.stopy;\n this.nextData.stopy = _stopy = _starty + c4Shape.height;\n this.nextData.cnt = 1;\n }\n\n c4Shape.x = _startx;\n c4Shape.y = _starty;\n\n this.updateVal(this.data, 'startx', _startx, Math.min);\n this.updateVal(this.data, 'starty', _starty, Math.min);\n this.updateVal(this.data, 'stopx', _stopx, Math.max);\n this.updateVal(this.data, 'stopy', _stopy, Math.max);\n\n this.updateVal(this.nextData, 'startx', _startx, Math.min);\n this.updateVal(this.nextData, 'starty', _starty, Math.min);\n this.updateVal(this.nextData, 'stopx', _stopx, Math.max);\n this.updateVal(this.nextData, 'stopy', _stopy, Math.max);\n }\n\n init(diagObj) {\n this.name = '';\n this.data = {\n startx: undefined,\n stopx: undefined,\n starty: undefined,\n stopy: undefined,\n widthLimit: undefined,\n };\n this.nextData = {\n startx: undefined,\n stopx: undefined,\n starty: undefined,\n stopy: undefined,\n cnt: 0,\n };\n setConf(diagObj.db.getConfig());\n }\n\n bumpLastMargin(margin) {\n this.data.stopx += margin;\n this.data.stopy += margin;\n }\n}\n\nexport const setConf = function (cnf) {\n assignWithDepth(conf, cnf);\n\n if (cnf.fontFamily) {\n conf.personFontFamily = conf.systemFontFamily = conf.messageFontFamily = cnf.fontFamily;\n }\n if (cnf.fontSize) {\n conf.personFontSize = conf.systemFontSize = conf.messageFontSize = cnf.fontSize;\n }\n if (cnf.fontWeight) {\n conf.personFontWeight = conf.systemFontWeight = conf.messageFontWeight = cnf.fontWeight;\n }\n};\n\nconst c4ShapeFont = (cnf, typeC4Shape) => {\n return {\n fontFamily: cnf[typeC4Shape + 'FontFamily'],\n fontSize: cnf[typeC4Shape + 'FontSize'],\n fontWeight: cnf[typeC4Shape + 'FontWeight'],\n };\n};\n\nconst boundaryFont = (cnf) => {\n return {\n fontFamily: cnf.boundaryFontFamily,\n fontSize: cnf.boundaryFontSize,\n fontWeight: cnf.boundaryFontWeight,\n };\n};\n\nconst messageFont = (cnf) => {\n return {\n fontFamily: cnf.messageFontFamily,\n fontSize: cnf.messageFontSize,\n fontWeight: cnf.messageFontWeight,\n };\n};\n\n/**\n * @param textType\n * @param c4Shape\n * @param c4ShapeTextWrap\n * @param textConf\n * @param textLimitWidth\n */\nfunction calcC4ShapeTextWH(textType, c4Shape, c4ShapeTextWrap, textConf, textLimitWidth) {\n if (!c4Shape[textType].width) {\n if (c4ShapeTextWrap) {\n c4Shape[textType].text = wrapLabel(c4Shape[textType].text, textLimitWidth, textConf);\n c4Shape[textType].textLines = c4Shape[textType].text.split(common.lineBreakRegex).length;\n // c4Shape[textType].width = calculateTextWidth(c4Shape[textType].text, textConf);\n c4Shape[textType].width = textLimitWidth;\n // c4Shape[textType].height = c4Shape[textType].textLines * textConf.fontSize;\n c4Shape[textType].height = calculateTextHeight(c4Shape[textType].text, textConf);\n } else {\n let lines = c4Shape[textType].text.split(common.lineBreakRegex);\n c4Shape[textType].textLines = lines.length;\n let lineHeight = 0;\n c4Shape[textType].height = 0;\n c4Shape[textType].width = 0;\n for (let i = 0; i < lines.length; i++) {\n c4Shape[textType].width = Math.max(\n calculateTextWidth(lines[i], textConf),\n c4Shape[textType].width\n );\n lineHeight = calculateTextHeight(lines[i], textConf);\n c4Shape[textType].height = c4Shape[textType].height + lineHeight;\n }\n // c4Shapes[textType].height = c4Shapes[textType].textLines * textConf.fontSize;\n }\n }\n}\n\nexport const drawBoundary = function (diagram, boundary, bounds) {\n boundary.x = bounds.data.startx;\n boundary.y = bounds.data.starty;\n boundary.width = bounds.data.stopx - bounds.data.startx;\n boundary.height = bounds.data.stopy - bounds.data.starty;\n\n boundary.label.y = conf.c4ShapeMargin - 35;\n\n let boundaryTextWrap = boundary.wrap && conf.wrap;\n let boundaryLabelConf = boundaryFont(conf);\n boundaryLabelConf.fontSize = boundaryLabelConf.fontSize + 2;\n boundaryLabelConf.fontWeight = 'bold';\n let textLimitWidth = calculateTextWidth(boundary.label.text, boundaryLabelConf);\n calcC4ShapeTextWH('label', boundary, boundaryTextWrap, boundaryLabelConf, textLimitWidth);\n\n svgDraw.drawBoundary(diagram, boundary, conf);\n};\n\nexport const drawC4ShapeArray = function (currentBounds, diagram, c4ShapeArray, c4ShapeKeys) {\n // Upper Y is relative point\n let Y = 0;\n // Draw the c4ShapeArray\n for (let i = 0; i < c4ShapeKeys.length; i++) {\n Y = 0;\n const c4Shape = c4ShapeArray[c4ShapeKeys[i]];\n\n // calc c4 shape type width and height\n\n let c4ShapeTypeConf = c4ShapeFont(conf, c4Shape.typeC4Shape.text);\n c4ShapeTypeConf.fontSize = c4ShapeTypeConf.fontSize - 2;\n c4Shape.typeC4Shape.width = calculateTextWidth(\n '<<' + c4Shape.typeC4Shape.text + '>>',\n c4ShapeTypeConf\n );\n c4Shape.typeC4Shape.height = c4ShapeTypeConf.fontSize + 2;\n c4Shape.typeC4Shape.Y = conf.c4ShapePadding;\n Y = c4Shape.typeC4Shape.Y + c4Shape.typeC4Shape.height - 4;\n\n // set image width and height c4Shape.x + c4Shape.width / 2 - 24, c4Shape.y + 28\n // let imageWidth = 0,\n // imageHeight = 0,\n // imageY = 0;\n //\n c4Shape.image = { width: 0, height: 0, Y: 0 };\n switch (c4Shape.typeC4Shape.text) {\n case 'person':\n case 'external_person':\n c4Shape.image.width = 48;\n c4Shape.image.height = 48;\n c4Shape.image.Y = Y;\n Y = c4Shape.image.Y + c4Shape.image.height;\n break;\n }\n if (c4Shape.sprite) {\n c4Shape.image.width = 48;\n c4Shape.image.height = 48;\n c4Shape.image.Y = Y;\n Y = c4Shape.image.Y + c4Shape.image.height;\n }\n\n // Y = conf.c4ShapePadding + c4Shape.image.height;\n\n let c4ShapeTextWrap = c4Shape.wrap && conf.wrap;\n let textLimitWidth = conf.width - conf.c4ShapePadding * 2;\n\n let c4ShapeLabelConf = c4ShapeFont(conf, c4Shape.typeC4Shape.text);\n c4ShapeLabelConf.fontSize = c4ShapeLabelConf.fontSize + 2;\n c4ShapeLabelConf.fontWeight = 'bold';\n calcC4ShapeTextWH('label', c4Shape, c4ShapeTextWrap, c4ShapeLabelConf, textLimitWidth);\n c4Shape['label'].Y = Y + 8;\n Y = c4Shape['label'].Y + c4Shape['label'].height;\n\n if (c4Shape.type && c4Shape.type.text !== '') {\n c4Shape.type.text = '[' + c4Shape.type.text + ']';\n let c4ShapeTypeConf = c4ShapeFont(conf, c4Shape.typeC4Shape.text);\n calcC4ShapeTextWH('type', c4Shape, c4ShapeTextWrap, c4ShapeTypeConf, textLimitWidth);\n c4Shape['type'].Y = Y + 5;\n Y = c4Shape['type'].Y + c4Shape['type'].height;\n } else if (c4Shape.techn && c4Shape.techn.text !== '') {\n c4Shape.techn.text = '[' + c4Shape.techn.text + ']';\n let c4ShapeTechnConf = c4ShapeFont(conf, c4Shape.techn.text);\n calcC4ShapeTextWH('techn', c4Shape, c4ShapeTextWrap, c4ShapeTechnConf, textLimitWidth);\n c4Shape['techn'].Y = Y + 5;\n Y = c4Shape['techn'].Y + c4Shape['techn'].height;\n }\n\n let rectHeight = Y;\n let rectWidth = c4Shape.label.width;\n\n if (c4Shape.descr && c4Shape.descr.text !== '') {\n let c4ShapeDescrConf = c4ShapeFont(conf, c4Shape.typeC4Shape.text);\n calcC4ShapeTextWH('descr', c4Shape, c4ShapeTextWrap, c4ShapeDescrConf, textLimitWidth);\n c4Shape['descr'].Y = Y + 20;\n Y = c4Shape['descr'].Y + c4Shape['descr'].height;\n\n rectWidth = Math.max(c4Shape.label.width, c4Shape.descr.width);\n rectHeight = Y - c4Shape['descr'].textLines * 5;\n }\n\n rectWidth = rectWidth + conf.c4ShapePadding;\n // let rectHeight =\n\n c4Shape.width = Math.max(c4Shape.width || conf.width, rectWidth, conf.width);\n c4Shape.height = Math.max(c4Shape.height || conf.height, rectHeight, conf.height);\n c4Shape.margin = c4Shape.margin || conf.c4ShapeMargin;\n\n currentBounds.insert(c4Shape);\n\n const height = svgDraw.drawC4Shape(diagram, c4Shape, conf);\n }\n\n currentBounds.bumpLastMargin(conf.c4ShapeMargin);\n};\n\nclass Point {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n }\n}\n\n/* * *\n * Get the intersection of the line between the center point of a rectangle and a point outside the rectangle.\n * Algorithm idea.\n * Using a point outside the rectangle as the coordinate origin, the graph is divided into four quadrants, and each quadrant is divided into two cases, with separate treatment on the coordinate axes\n * 1. The case of coordinate axes.\n * 1. The case of the negative x-axis\n * 2. The case of the positive x-axis\n * 3. The case of the positive y-axis\n * 4. The negative y-axis case\n * 2. Quadrant cases.\n * 2.1. first quadrant: the case where the line intersects the left side of the rectangle; the case where it intersects the lower side of the rectangle\n * 2.2. second quadrant: the case where the line intersects the right side of the rectangle; the case where it intersects the lower edge of the rectangle\n * 2.3. third quadrant: the case where the line intersects the right side of the rectangle; the case where it intersects the upper edge of the rectangle\n * 2.4. fourth quadrant: the case where the line intersects the left side of the rectangle; the case where it intersects the upper side of the rectangle\n *\n */\nlet getIntersectPoint = function (fromNode, endPoint) {\n let x1 = fromNode.x;\n\n let y1 = fromNode.y;\n\n let x2 = endPoint.x;\n\n let y2 = endPoint.y;\n\n let fromCenterX = x1 + fromNode.width / 2;\n\n let fromCenterY = y1 + fromNode.height / 2;\n\n let dx = Math.abs(x1 - x2);\n\n let dy = Math.abs(y1 - y2);\n\n let tanDYX = dy / dx;\n\n let fromDYX = fromNode.height / fromNode.width;\n\n let returnPoint = null;\n\n if (y1 == y2 && x1 < x2) {\n returnPoint = new Point(x1 + fromNode.width, fromCenterY);\n } else if (y1 == y2 && x1 > x2) {\n returnPoint = new Point(x1, fromCenterY);\n } else if (x1 == x2 && y1 < y2) {\n returnPoint = new Point(fromCenterX, y1 + fromNode.height);\n } else if (x1 == x2 && y1 > y2) {\n returnPoint = new Point(fromCenterX, y1);\n }\n\n if (x1 > x2 && y1 < y2) {\n if (fromDYX >= tanDYX) {\n returnPoint = new Point(x1, fromCenterY + (tanDYX * fromNode.width) / 2);\n } else {\n returnPoint = new Point(\n fromCenterX - ((dx / dy) * fromNode.height) / 2,\n y1 + fromNode.height\n );\n }\n } else if (x1 < x2 && y1 < y2) {\n //\n if (fromDYX >= tanDYX) {\n returnPoint = new Point(x1 + fromNode.width, fromCenterY + (tanDYX * fromNode.width) / 2);\n } else {\n returnPoint = new Point(\n fromCenterX + ((dx / dy) * fromNode.height) / 2,\n y1 + fromNode.height\n );\n }\n } else if (x1 < x2 && y1 > y2) {\n if (fromDYX >= tanDYX) {\n returnPoint = new Point(x1 + fromNode.width, fromCenterY - (tanDYX * fromNode.width) / 2);\n } else {\n returnPoint = new Point(fromCenterX + ((fromNode.height / 2) * dx) / dy, y1);\n }\n } else if (x1 > x2 && y1 > y2) {\n if (fromDYX >= tanDYX) {\n returnPoint = new Point(x1, fromCenterY - (fromNode.width / 2) * tanDYX);\n } else {\n returnPoint = new Point(fromCenterX - ((fromNode.height / 2) * dx) / dy, y1);\n }\n }\n return returnPoint;\n};\n\nlet getIntersectPoints = function (fromNode, endNode) {\n let endIntersectPoint = { x: 0, y: 0 };\n endIntersectPoint.x = endNode.x + endNode.width / 2;\n endIntersectPoint.y = endNode.y + endNode.height / 2;\n let startPoint = getIntersectPoint(fromNode, endIntersectPoint);\n\n endIntersectPoint.x = fromNode.x + fromNode.width / 2;\n endIntersectPoint.y = fromNode.y + fromNode.height / 2;\n let endPoint = getIntersectPoint(endNode, endIntersectPoint);\n return { startPoint: startPoint, endPoint: endPoint };\n};\n\nexport const drawRels = function (diagram, rels, getC4ShapeObj, diagObj) {\n let i = 0;\n for (let rel of rels) {\n i = i + 1;\n let relTextWrap = rel.wrap && conf.wrap;\n let relConf = messageFont(conf);\n let diagramType = diagObj.db.getC4Type();\n if (diagramType === 'C4Dynamic') rel.label.text = i + ': ' + rel.label.text;\n let textLimitWidth = calculateTextWidth(rel.label.text, relConf);\n calcC4ShapeTextWH('label', rel, relTextWrap, relConf, textLimitWidth);\n\n if (rel.techn && rel.techn.text !== '') {\n textLimitWidth = calculateTextWidth(rel.techn.text, relConf);\n calcC4ShapeTextWH('techn', rel, relTextWrap, relConf, textLimitWidth);\n }\n\n if (rel.descr && rel.descr.text !== '') {\n textLimitWidth = calculateTextWidth(rel.descr.text, relConf);\n calcC4ShapeTextWH('descr', rel, relTextWrap, relConf, textLimitWidth);\n }\n\n let fromNode = getC4ShapeObj(rel.from);\n let endNode = getC4ShapeObj(rel.to);\n let points = getIntersectPoints(fromNode, endNode);\n rel.startPoint = points.startPoint;\n rel.endPoint = points.endPoint;\n }\n svgDraw.drawRels(diagram, rels, conf);\n};\n\n/**\n * @param diagram\n * @param parentBoundaryAlias\n * @param parentBounds\n * @param currentBoundarys\n * @param diagObj\n */\nfunction drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentBoundarys, diagObj) {\n let currentBounds = new Bounds(diagObj);\n // Calculate the width limit of the boundar. label/type 的长度，\n currentBounds.data.widthLimit =\n parentBounds.data.widthLimit / Math.min(c4BoundaryInRow, currentBoundarys.length);\n // Math.min(\n // conf.width * conf.c4ShapeInRow + conf.c4ShapeMargin * conf.c4ShapeInRow * 2,\n // parentBounds.data.widthLimit / Math.min(conf.c4BoundaryInRow, currentBoundarys.length)\n // );\n for (let i = 0; i < currentBoundarys.length; i++) {\n let currentBoundary = currentBoundarys[i];\n let Y = 0;\n currentBoundary.image = { width: 0, height: 0, Y: 0 };\n if (currentBoundary.sprite) {\n currentBoundary.image.width = 48;\n currentBoundary.image.height = 48;\n currentBoundary.image.Y = Y;\n Y = currentBoundary.image.Y + currentBoundary.image.height;\n }\n\n let currentBoundaryTextWrap = currentBoundary.wrap && conf.wrap;\n\n let currentBoundaryLabelConf = boundaryFont(conf);\n currentBoundaryLabelConf.fontSize = currentBoundaryLabelConf.fontSize + 2;\n currentBoundaryLabelConf.fontWeight = 'bold';\n calcC4ShapeTextWH(\n 'label',\n currentBoundary,\n currentBoundaryTextWrap,\n currentBoundaryLabelConf,\n currentBounds.data.widthLimit\n );\n currentBoundary['label'].Y = Y + 8;\n Y = currentBoundary['label'].Y + currentBoundary['label'].height;\n\n if (currentBoundary.type && currentBoundary.type.text !== '') {\n currentBoundary.type.text = '[' + currentBoundary.type.text + ']';\n let currentBoundaryTypeConf = boundaryFont(conf);\n calcC4ShapeTextWH(\n 'type',\n currentBoundary,\n currentBoundaryTextWrap,\n currentBoundaryTypeConf,\n currentBounds.data.widthLimit\n );\n currentBoundary['type'].Y = Y + 5;\n Y = currentBoundary['type'].Y + currentBoundary['type'].height;\n }\n\n if (currentBoundary.descr && currentBoundary.descr.text !== '') {\n let currentBoundaryDescrConf = boundaryFont(conf);\n currentBoundaryDescrConf.fontSize = currentBoundaryDescrConf.fontSize - 2;\n calcC4ShapeTextWH(\n 'descr',\n currentBoundary,\n currentBoundaryTextWrap,\n currentBoundaryDescrConf,\n currentBounds.data.widthLimit\n );\n currentBoundary['descr'].Y = Y + 20;\n Y = currentBoundary['descr'].Y + currentBoundary['descr'].height;\n }\n\n if (i == 0 || i % c4BoundaryInRow === 0) {\n // Calculate the drawing start point of the currentBoundarys.\n let _x = parentBounds.data.startx + conf.diagramMarginX;\n let _y = parentBounds.data.stopy + conf.diagramMarginY + Y;\n\n currentBounds.setData(_x, _x, _y, _y);\n } else {\n // Calculate the drawing start point of the currentBoundarys.\n let _x =\n currentBounds.data.stopx !== currentBounds.data.startx\n ? currentBounds.data.stopx + conf.diagramMarginX\n : currentBounds.data.startx;\n let _y = currentBounds.data.starty;\n\n currentBounds.setData(_x, _x, _y, _y);\n }\n currentBounds.name = currentBoundary.alias;\n let currentPersonOrSystemArray = diagObj.db.getC4ShapeArray(currentBoundary.alias);\n let currentPersonOrSystemKeys = diagObj.db.getC4ShapeKeys(currentBoundary.alias);\n\n if (currentPersonOrSystemKeys.length > 0) {\n drawC4ShapeArray(\n currentBounds,\n diagram,\n currentPersonOrSystemArray,\n currentPersonOrSystemKeys\n );\n }\n parentBoundaryAlias = currentBoundary.alias;\n let nextCurrentBoundarys = diagObj.db.getBoundarys(parentBoundaryAlias);\n\n if (nextCurrentBoundarys.length > 0) {\n // draw boundary inside currentBoundary\n // bounds.init();\n // parentBoundaryWidthLimit = bounds.data.stopx - bounds.startx;\n drawInsideBoundary(\n diagram,\n parentBoundaryAlias,\n currentBounds,\n nextCurrentBoundarys,\n diagObj\n );\n }\n // draw boundary\n if (currentBoundary.alias !== 'global') drawBoundary(diagram, currentBoundary, currentBounds);\n parentBounds.data.stopy = Math.max(\n currentBounds.data.stopy + conf.c4ShapeMargin,\n parentBounds.data.stopy\n );\n parentBounds.data.stopx = Math.max(\n currentBounds.data.stopx + conf.c4ShapeMargin,\n parentBounds.data.stopx\n );\n globalBoundaryMaxX = Math.max(globalBoundaryMaxX, parentBounds.data.stopx);\n globalBoundaryMaxY = Math.max(globalBoundaryMaxY, parentBounds.data.stopy);\n }\n}\n\n/**\n * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text.\n *\n * @param {any} text\n * @param _text\n * @param {any} id\n * @param _version\n * @param diagObj\n */\nexport const draw = function (_text, id, _version, diagObj) {\n conf = configApi.getConfig().c4;\n const securityLevel = configApi.getConfig().securityLevel;\n // Handle root and Document for when rendering in sanbox mode\n let sandboxElement;\n if (securityLevel === 'sandbox') {\n sandboxElement = select('#i' + id);\n }\n const root =\n securityLevel === 'sandbox'\n ? select(sandboxElement.nodes()[0].contentDocument.body)\n : select('body');\n\n let db = diagObj.db;\n\n diagObj.db.setWrap(conf.wrap);\n\n c4ShapeInRow = db.getC4ShapeInRow();\n c4BoundaryInRow = db.getC4BoundaryInRow();\n\n log.debug(`C:${JSON.stringify(conf, null, 2)}`);\n\n const diagram =\n securityLevel === 'sandbox' ? root.select(`[id=\"${id}\"]`) : select(`[id=\"${id}\"]`);\n\n svgDraw.insertComputerIcon(diagram);\n svgDraw.insertDatabaseIcon(diagram);\n svgDraw.insertClockIcon(diagram);\n\n let screenBounds = new Bounds(diagObj);\n\n screenBounds.setData(\n conf.diagramMarginX,\n conf.diagramMarginX,\n conf.diagramMarginY,\n conf.diagramMarginY\n );\n\n screenBounds.data.widthLimit = screen.availWidth;\n globalBoundaryMaxX = conf.diagramMarginX;\n globalBoundaryMaxY = conf.diagramMarginY;\n\n const title = diagObj.db.getTitle();\n const c4type = diagObj.db.getC4Type();\n let currentBoundarys = diagObj.db.getBoundarys('');\n // switch (c4type) {\n // case 'C4Context':\n drawInsideBoundary(diagram, '', screenBounds, currentBoundarys, diagObj);\n // break;\n // }\n\n // The arrow head definition is attached to the svg once\n svgDraw.insertArrowHead(diagram);\n svgDraw.insertArrowEnd(diagram);\n svgDraw.insertArrowCrossHead(diagram);\n svgDraw.insertArrowFilledHead(diagram);\n\n drawRels(diagram, diagObj.db.getRels(), diagObj.db.getC4Shape, diagObj);\n\n screenBounds.data.stopx = globalBoundaryMaxX;\n screenBounds.data.stopy = globalBoundaryMaxY;\n\n const box = screenBounds.data;\n\n // Make sure the height of the diagram supports long menus.\n let boxHeight = box.stopy - box.starty;\n\n let height = boxHeight + 2 * conf.diagramMarginY;\n\n // Make sure the width of the diagram supports wide menus.\n let boxWidth = box.stopx - box.startx;\n const width = boxWidth + 2 * conf.diagramMarginX;\n\n if (title) {\n diagram\n .append('text')\n .text(title)\n .attr('x', (box.stopx - box.startx) / 2 - 4 * conf.diagramMarginX)\n .attr('y', box.starty + conf.diagramMarginY);\n }\n\n configureSvgSize(diagram, height, width, conf.useMaxWidth);\n\n const extraVertForTitle = title ? 60 : 0;\n diagram.attr(\n 'viewBox',\n box.startx -\n conf.diagramMarginX +\n ' -' +\n (conf.diagramMarginY + extraVertForTitle) +\n ' ' +\n width +\n ' ' +\n (height + extraVertForTitle)\n );\n\n addSVGAccessibilityFields(parser.yy, diagram, id);\n log.debug(`models:`, box);\n};\n\nexport default {\n drawPersonOrSystemArray: drawC4ShapeArray,\n drawBoundary,\n setConf,\n draw,\n};\n","const getStyles = (options) =>\n `.person {\n stroke: ${options.personBorder};\n fill: ${options.personBkg};\n }\n`;\n\nexport default getStyles;\n","import common from '../common/common';\nimport { addFunction } from '../../interactionDb';\nimport { sanitizeUrl } from '@braintree/sanitize-url';\n\nexport const drawRect = function (elem, rectData) {\n const rectElem = elem.append('rect');\n rectElem.attr('x', rectData.x);\n rectElem.attr('y', rectData.y);\n rectElem.attr('fill', rectData.fill);\n rectElem.attr('stroke', rectData.stroke);\n rectElem.attr('width', rectData.width);\n rectElem.attr('height', rectData.height);\n rectElem.attr('rx', rectData.rx);\n rectElem.attr('ry', rectData.ry);\n\n if (rectData.attrs !== 'undefined' && rectData.attrs !== null) {\n for (let attrKey in rectData.attrs) rectElem.attr(attrKey, rectData.attrs[attrKey]);\n }\n\n if (rectData.class !== 'undefined') {\n rectElem.attr('class', rectData.class);\n }\n\n return rectElem;\n};\n\nexport const drawImage = function (elem, width, height, x, y, link) {\n const imageElem = elem.append('image');\n imageElem.attr('width', width);\n imageElem.attr('height', height);\n imageElem.attr('x', x);\n imageElem.attr('y', y);\n let sanitizedLink = link.startsWith('data:image/png;base64') ? link : sanitizeUrl(link);\n imageElem.attr('xlink:href', sanitizedLink);\n};\n\nexport const drawEmbeddedImage = function (elem, x, y, link) {\n const imageElem = elem.append('use');\n imageElem.attr('x', x);\n imageElem.attr('y', y);\n var sanitizedLink = sanitizeUrl(link);\n imageElem.attr('xlink:href', '#' + sanitizedLink);\n};\n\nexport const drawText = function (elem, textData) {\n let prevTextHeight = 0,\n textHeight = 0;\n const lines = textData.text.split(common.lineBreakRegex);\n\n let textElems = [];\n let dy = 0;\n let yfunc = () => textData.y;\n if (\n typeof textData.valign !== 'undefined' &&\n typeof textData.textMargin !== 'undefined' &&\n textData.textMargin > 0\n ) {\n switch (textData.valign) {\n case 'top':\n case 'start':\n yfunc = () => Math.round(textData.y + textData.textMargin);\n break;\n case 'middle':\n case 'center':\n yfunc = () =>\n Math.round(textData.y + (prevTextHeight + textHeight + textData.textMargin) / 2);\n break;\n case 'bottom':\n case 'end':\n yfunc = () =>\n Math.round(\n textData.y +\n (prevTextHeight + textHeight + 2 * textData.textMargin) -\n textData.textMargin\n );\n break;\n }\n }\n if (\n typeof textData.anchor !== 'undefined' &&\n typeof textData.textMargin !== 'undefined' &&\n typeof textData.width !== 'undefined'\n ) {\n switch (textData.anchor) {\n case 'left':\n case 'start':\n textData.x = Math.round(textData.x + textData.textMargin);\n textData.anchor = 'start';\n textData.dominantBaseline = 'text-after-edge';\n textData.alignmentBaseline = 'middle';\n break;\n case 'middle':\n case 'center':\n textData.x = Math.round(textData.x + textData.width / 2);\n textData.anchor = 'middle';\n textData.dominantBaseline = 'middle';\n textData.alignmentBaseline = 'middle';\n break;\n case 'right':\n case 'end':\n textData.x = Math.round(textData.x + textData.width - textData.textMargin);\n textData.anchor = 'end';\n textData.dominantBaseline = 'text-before-edge';\n textData.alignmentBaseline = 'middle';\n break;\n }\n }\n for (let i = 0; i < lines.length; i++) {\n let line = lines[i];\n if (\n typeof textData.textMargin !== 'undefined' &&\n textData.textMargin === 0 &&\n typeof textData.fontSize !== 'undefined'\n ) {\n dy = i * textData.fontSize;\n }\n\n const textElem = elem.append('text');\n textElem.attr('x', textData.x);\n textElem.attr('y', yfunc());\n if (typeof textData.anchor !== 'undefined') {\n textElem\n .attr('text-anchor', textData.anchor)\n .attr('dominant-baseline', textData.dominantBaseline)\n .attr('alignment-baseline', textData.alignmentBaseline);\n }\n if (typeof textData.fontFamily !== 'undefined') {\n textElem.style('font-family', textData.fontFamily);\n }\n if (typeof textData.fontSize !== 'undefined') {\n textElem.style('font-size', textData.fontSize);\n }\n if (typeof textData.fontWeight !== 'undefined') {\n textElem.style('font-weight', textData.fontWeight);\n }\n if (typeof textData.fill !== 'undefined') {\n textElem.attr('fill', textData.fill);\n }\n if (typeof textData.class !== 'undefined') {\n textElem.attr('class', textData.class);\n }\n if (typeof textData.dy !== 'undefined') {\n textElem.attr('dy', textData.dy);\n } else if (dy !== 0) {\n textElem.attr('dy', dy);\n }\n\n if (textData.tspan) {\n const span = textElem.append('tspan');\n span.attr('x', textData.x);\n if (typeof textData.fill !== 'undefined') {\n span.attr('fill', textData.fill);\n }\n span.text(line);\n } else {\n textElem.text(line);\n }\n if (\n typeof textData.valign !== 'undefined' &&\n typeof textData.textMargin !== 'undefined' &&\n textData.textMargin > 0\n ) {\n textHeight += (textElem._groups || textElem)[0][0].getBBox().height;\n prevTextHeight = textHeight;\n }\n\n textElems.push(textElem);\n }\n\n return textElems;\n};\n\nexport const drawLabel = function (elem, txtObject) {\n /**\n * @param {any} x\n * @param {any} y\n * @param {any} width\n * @param {any} height\n * @param {any} cut\n * @returns {any}\n */\n function genPoints(x, y, width, height, cut) {\n return (\n x +\n ',' +\n y +\n ' ' +\n (x + width) +\n ',' +\n y +\n ' ' +\n (x + width) +\n ',' +\n (y + height - cut) +\n ' ' +\n (x + width - cut * 1.2) +\n ',' +\n (y + height) +\n ' ' +\n x +\n ',' +\n (y + height)\n );\n }\n const polygon = elem.append('polygon');\n polygon.attr('points', genPoints(txtObject.x, txtObject.y, txtObject.width, txtObject.height, 7));\n polygon.attr('class', 'labelBox');\n\n txtObject.y = txtObject.y + txtObject.height / 2;\n\n drawText(elem, txtObject);\n return polygon;\n};\n\nexport const drawRels = (elem, rels, conf) => {\n const relsElem = elem.append('g');\n let i = 0;\n for (let rel of rels) {\n let textColor = rel.textColor ? rel.textColor : '#444444';\n let strokeColor = rel.lineColor ? rel.lineColor : '#444444';\n let offsetX = rel.offsetX ? parseInt(rel.offsetX) : 0;\n let offsetY = rel.offsetY ? parseInt(rel.offsetY) : 0;\n\n let url = '';\n if (i === 0) {\n let line = relsElem.append('line');\n line.attr('x1', rel.startPoint.x);\n line.attr('y1', rel.startPoint.y);\n line.attr('x2', rel.endPoint.x);\n line.attr('y2', rel.endPoint.y);\n\n line.attr('stroke-width', '1');\n line.attr('stroke', strokeColor);\n line.style('fill', 'none');\n if (rel.type !== 'rel_b') line.attr('marker-end', 'url(' + url + '#arrowhead)');\n if (rel.type === 'birel' || rel.type === 'rel_b')\n line.attr('marker-start', 'url(' + url + '#arrowend)');\n i = -1;\n } else {\n let line = relsElem.append('path');\n line\n .attr('fill', 'none')\n .attr('stroke-width', '1')\n .attr('stroke', strokeColor)\n .attr(\n 'd',\n 'Mstartx,starty Qcontrolx,controly stopx,stopy '\n .replaceAll('startx', rel.startPoint.x)\n .replaceAll('starty', rel.startPoint.y)\n .replaceAll(\n 'controlx',\n rel.startPoint.x +\n (rel.endPoint.x - rel.startPoint.x) / 2 -\n (rel.endPoint.x - rel.startPoint.x) / 4\n )\n .replaceAll('controly', rel.startPoint.y + (rel.endPoint.y - rel.startPoint.y) / 2)\n .replaceAll('stopx', rel.endPoint.x)\n .replaceAll('stopy', rel.endPoint.y)\n );\n if (rel.type !== 'rel_b') line.attr('marker-end', 'url(' + url + '#arrowhead)');\n if (rel.type === 'birel' || rel.type === 'rel_b')\n line.attr('marker-start', 'url(' + url + '#arrowend)');\n }\n\n let messageConf = conf.messageFont();\n _drawTextCandidateFunc(conf)(\n rel.label.text,\n relsElem,\n Math.min(rel.startPoint.x, rel.endPoint.x) +\n Math.abs(rel.endPoint.x - rel.startPoint.x) / 2 +\n offsetX,\n Math.min(rel.startPoint.y, rel.endPoint.y) +\n Math.abs(rel.endPoint.y - rel.startPoint.y) / 2 +\n offsetY,\n rel.label.width,\n rel.label.height,\n { fill: textColor },\n messageConf\n );\n\n if (rel.techn && rel.techn.text !== '') {\n messageConf = conf.messageFont();\n _drawTextCandidateFunc(conf)(\n '[' + rel.techn.text + ']',\n relsElem,\n Math.min(rel.startPoint.x, rel.endPoint.x) +\n Math.abs(rel.endPoint.x - rel.startPoint.x) / 2 +\n offsetX,\n Math.min(rel.startPoint.y, rel.endPoint.y) +\n Math.abs(rel.endPoint.y - rel.startPoint.y) / 2 +\n conf.messageFontSize +\n 5 +\n offsetY,\n Math.max(rel.label.width, rel.techn.width),\n rel.techn.height,\n { fill: textColor, 'font-style': 'italic' },\n messageConf\n );\n }\n }\n};\n\n/**\n * Draws an boundary in the diagram\n *\n * @param {any} elem - The diagram we'll draw to.\n * @param {any} boundary - The boundary to draw.\n * @param {any} conf - DrawText implementation discriminator object\n */\nconst drawBoundary = function (elem, boundary, conf) {\n const boundaryElem = elem.append('g');\n\n let fillColor = boundary.bgColor ? boundary.bgColor : 'none';\n let strokeColor = boundary.borderColor ? boundary.borderColor : '#444444';\n let fontColor = boundary.fontColor ? boundary.fontColor : 'black';\n\n let attrsValue = { 'stroke-width': 1.0, 'stroke-dasharray': '7.0,7.0' };\n if (boundary.nodeType) attrsValue = { 'stroke-width': 1.0 };\n let rectData = {\n x: boundary.x,\n y: boundary.y,\n fill: fillColor,\n stroke: strokeColor,\n width: boundary.width,\n height: boundary.height,\n rx: 2.5,\n ry: 2.5,\n attrs: attrsValue,\n };\n\n drawRect(boundaryElem, rectData);\n\n // draw label\n let boundaryConf = conf.boundaryFont();\n boundaryConf.fontWeight = 'bold';\n boundaryConf.fontSize = boundaryConf.fontSize + 2;\n boundaryConf.fontColor = fontColor;\n _drawTextCandidateFunc(conf)(\n boundary.label.text,\n boundaryElem,\n boundary.x,\n boundary.y + boundary.label.Y,\n boundary.width,\n boundary.height,\n { fill: '#444444' },\n boundaryConf\n );\n\n // draw type\n if (boundary.type && boundary.type.text !== '') {\n boundaryConf = conf.boundaryFont();\n boundaryConf.fontColor = fontColor;\n _drawTextCandidateFunc(conf)(\n boundary.type.text,\n boundaryElem,\n boundary.x,\n boundary.y + boundary.type.Y,\n boundary.width,\n boundary.height,\n { fill: '#444444' },\n boundaryConf\n );\n }\n\n // draw descr\n if (boundary.descr && boundary.descr.text !== '') {\n boundaryConf = conf.boundaryFont();\n boundaryConf.fontSize = boundaryConf.fontSize - 2;\n boundaryConf.fontColor = fontColor;\n _drawTextCandidateFunc(conf)(\n boundary.descr.text,\n boundaryElem,\n boundary.x,\n boundary.y + boundary.descr.Y,\n boundary.width,\n boundary.height,\n { fill: '#444444' },\n boundaryConf\n );\n }\n};\n\nexport const drawC4Shape = function (elem, c4Shape, conf) {\n let fillColor = c4Shape.bgColor ? c4Shape.bgColor : conf[c4Shape.typeC4Shape.text + '_bg_color'];\n let strokeColor = c4Shape.borderColor\n ? c4Shape.borderColor\n : conf[c4Shape.typeC4Shape.text + '_border_color'];\n let fontColor = c4Shape.fontColor ? c4Shape.fontColor : '#FFFFFF';\n\n let personImg =\n 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAACD0lEQVR4Xu2YoU4EMRCGT+4j8Ai8AhaH4QHgAUjQuFMECUgMIUgwJAgMhgQsAYUiJCiQIBBY+EITsjfTdme6V24v4c8vyGbb+ZjOtN0bNcvjQXmkH83WvYBWto6PLm6v7p7uH1/w2fXD+PBycX1Pv2l3IdDm/vn7x+dXQiAubRzoURa7gRZWd0iGRIiJbOnhnfYBQZNJjNbuyY2eJG8fkDE3bbG4ep6MHUAsgYxmE3nVs6VsBWJSGccsOlFPmLIViMzLOB7pCVO2AtHJMohH7Fh6zqitQK7m0rJvAVYgGcEpe//PLdDz65sM4pF9N7ICcXDKIB5Nv6j7tD0NoSdM2QrU9Gg0ewE1LqBhHR3BBdvj2vapnidjHxD/q6vd7Pvhr31AwcY8eXMTXAKECZZJFXuEq27aLgQK5uLMohCenGGuGewOxSjBvYBqeG6B+Nqiblggdjnc+ZXDy+FNFpFzw76O3UBAROuXh6FoiAcf5g9eTvUgzy0nWg6I8cXHRUpg5bOVBCo+KDpFajOf23GgPme7RSQ+lacIENUgJ6gg1k6HjgOlqnLqip4tEuhv0hNEMXUD0clyXE3p6pZA0S2nnvTlXwLJEZWlb7cTQH1+USgTN4VhAenm/wea1OCAOmqo6fE1WCb9WSKBah+rbUWPWAmE2Rvk0ApiB45eOyNAzU8xcTvj8KvkKEoOaIYeHNA3ZuygAvFMUO0AAAAASUVORK5CYII=';\n switch (c4Shape.typeC4Shape.text) {\n case 'person':\n personImg =\n 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAACD0lEQVR4Xu2YoU4EMRCGT+4j8Ai8AhaH4QHgAUjQuFMECUgMIUgwJAgMhgQsAYUiJCiQIBBY+EITsjfTdme6V24v4c8vyGbb+ZjOtN0bNcvjQXmkH83WvYBWto6PLm6v7p7uH1/w2fXD+PBycX1Pv2l3IdDm/vn7x+dXQiAubRzoURa7gRZWd0iGRIiJbOnhnfYBQZNJjNbuyY2eJG8fkDE3bbG4ep6MHUAsgYxmE3nVs6VsBWJSGccsOlFPmLIViMzLOB7pCVO2AtHJMohH7Fh6zqitQK7m0rJvAVYgGcEpe//PLdDz65sM4pF9N7ICcXDKIB5Nv6j7tD0NoSdM2QrU9Gg0ewE1LqBhHR3BBdvj2vapnidjHxD/q6vd7Pvhr31AwcY8eXMTXAKECZZJFXuEq27aLgQK5uLMohCenGGuGewOxSjBvYBqeG6B+Nqiblggdjnc+ZXDy+FNFpFzw76O3UBAROuXh6FoiAcf5g9eTvUgzy0nWg6I8cXHRUpg5bOVBCo+KDpFajOf23GgPme7RSQ+lacIENUgJ6gg1k6HjgOlqnLqip4tEuhv0hNEMXUD0clyXE3p6pZA0S2nnvTlXwLJEZWlb7cTQH1+USgTN4VhAenm/wea1OCAOmqo6fE1WCb9WSKBah+rbUWPWAmE2Rvk0ApiB45eOyNAzU8xcTvj8KvkKEoOaIYeHNA3ZuygAvFMUO0AAAAASUVORK5CYII=';\n break;\n case 'external_person':\n personImg =\n 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAAB6ElEQVR4Xu2YLY+EMBCG9+dWr0aj0Wg0Go1Go0+j8Xdv2uTCvv1gpt0ebHKPuhDaeW4605Z9mJvx4AdXUyTUdd08z+u6flmWZRnHsWkafk9DptAwDPu+f0eAYtu2PEaGWuj5fCIZrBAC2eLBAnRCsEkkxmeaJp7iDJ2QMDdHsLg8SxKFEJaAo8lAXnmuOFIhTMpxxKATebo4UiFknuNo4OniSIXQyRxEA3YsnjGCVEjVXD7yLUAqxBGUyPv/Y4W2beMgGuS7kVQIBycH0fD+oi5pezQETxdHKmQKGk1eQEYldK+jw5GxPfZ9z7Mk0Qnhf1W1m3w//EUn5BDmSZsbR44QQLBEqrBHqOrmSKaQAxdnLArCrxZcM7A7ZKs4ioRq8LFC+NpC3WCBJsvpVw5edm9iEXFuyNfxXAgSwfrFQ1c0iNda8AdejvUgnktOtJQQxmcfFzGglc5WVCj7oDgFqU18boeFSs52CUh8LE8BIVQDT1ABrB0HtgSEYlX5doJnCwv9TXocKCaKbnwhdDKPq4lf3SwU3HLq4V/+WYhHVMa/3b4IlfyikAduCkcBc7mQ3/z/Qq/cTuikhkzB12Ae/mcJC9U+Vo8Ej1gWAtgbeGgFsAMHr50BIWOLCbezvhpBFUdY6EJuJ/QDW0XoMX60zZ0AAAAASUVORK5CYII=';\n break;\n }\n\n const c4ShapeElem = elem.append('g');\n c4ShapeElem.attr('class', 'person-man');\n\n // \n // draw rect of c4Shape\n const rect = getNoteRect();\n switch (c4Shape.typeC4Shape.text) {\n case 'person':\n case 'external_person':\n case 'system':\n case 'external_system':\n case 'container':\n case 'external_container':\n case 'component':\n case 'external_component':\n rect.x = c4Shape.x;\n rect.y = c4Shape.y;\n rect.fill = fillColor;\n rect.width = c4Shape.width;\n rect.height = c4Shape.height;\n rect.style = 'stroke:' + strokeColor + ';stroke-width:0.5;';\n rect.rx = 2.5;\n rect.ry = 2.5;\n drawRect(c4ShapeElem, rect);\n break;\n case 'system_db':\n case 'external_system_db':\n case 'container_db':\n case 'external_container_db':\n case 'component_db':\n case 'external_component_db':\n c4ShapeElem\n .append('path')\n .attr('fill', fillColor)\n .attr('stroke-width', '0.5')\n .attr('stroke', strokeColor)\n .attr(\n 'd',\n 'Mstartx,startyc0,-10 half,-10 half,-10c0,0 half,0 half,10l0,heightc0,10 -half,10 -half,10c0,0 -half,0 -half,-10l0,-height'\n .replaceAll('startx', c4Shape.x)\n .replaceAll('starty', c4Shape.y)\n .replaceAll('half', c4Shape.width / 2)\n .replaceAll('height', c4Shape.height)\n );\n c4ShapeElem\n .append('path')\n .attr('fill', 'none')\n .attr('stroke-width', '0.5')\n .attr('stroke', strokeColor)\n .attr(\n 'd',\n 'Mstartx,startyc0,10 half,10 half,10c0,0 half,0 half,-10'\n .replaceAll('startx', c4Shape.x)\n .replaceAll('starty', c4Shape.y)\n .replaceAll('half', c4Shape.width / 2)\n );\n break;\n case 'system_queue':\n case 'external_system_queue':\n case 'container_queue':\n case 'external_container_queue':\n case 'component_queue':\n case 'external_component_queue':\n c4ShapeElem\n .append('path')\n .attr('fill', fillColor)\n .attr('stroke-width', '0.5')\n .attr('stroke', strokeColor)\n .attr(\n 'd',\n 'Mstartx,startylwidth,0c5,0 5,half 5,halfc0,0 0,half -5,halfl-width,0c-5,0 -5,-half -5,-halfc0,0 0,-half 5,-half'\n .replaceAll('startx', c4Shape.x)\n .replaceAll('starty', c4Shape.y)\n .replaceAll('width', c4Shape.width)\n .replaceAll('half', c4Shape.height / 2)\n );\n c4ShapeElem\n .append('path')\n .attr('fill', 'none')\n .attr('stroke-width', '0.5')\n .attr('stroke', strokeColor)\n .attr(\n 'd',\n 'Mstartx,startyc-5,0 -5,half -5,halfc0,half 5,half 5,half'\n .replaceAll('startx', c4Shape.x + c4Shape.width)\n .replaceAll('starty', c4Shape.y)\n .replaceAll('half', c4Shape.height / 2)\n );\n break;\n }\n\n // draw type of c4Shape\n let c4ShapeFontConf = getC4ShapeFont(conf, c4Shape.typeC4Shape.text);\n c4ShapeElem\n .append('text')\n .attr('fill', fontColor)\n .attr('font-family', c4ShapeFontConf.fontFamily)\n .attr('font-size', c4ShapeFontConf.fontSize - 2)\n .attr('font-style', 'italic')\n .attr('lengthAdjust', 'spacing')\n .attr('textLength', c4Shape.typeC4Shape.width)\n .attr('x', c4Shape.x + c4Shape.width / 2 - c4Shape.typeC4Shape.width / 2)\n .attr('y', c4Shape.y + c4Shape.typeC4Shape.Y)\n .text('<<' + c4Shape.typeC4Shape.text + '>>');\n\n // draw image/sprite\n switch (c4Shape.typeC4Shape.text) {\n case 'person':\n case 'external_person':\n drawImage(\n c4ShapeElem,\n 48,\n 48,\n c4Shape.x + c4Shape.width / 2 - 24,\n c4Shape.y + c4Shape.image.Y,\n personImg\n );\n break;\n }\n\n // draw label\n let textFontConf = conf[c4Shape.typeC4Shape.text + 'Font']();\n textFontConf.fontWeight = 'bold';\n textFontConf.fontSize = textFontConf.fontSize + 2;\n textFontConf.fontColor = fontColor;\n _drawTextCandidateFunc(conf)(\n c4Shape.label.text,\n c4ShapeElem,\n c4Shape.x,\n c4Shape.y + c4Shape.label.Y,\n c4Shape.width,\n c4Shape.height,\n { fill: fontColor },\n textFontConf\n );\n\n // draw techn/type\n textFontConf = conf[c4Shape.typeC4Shape.text + 'Font']();\n textFontConf.fontColor = fontColor;\n\n if (c4Shape.thchn && c4Shape.thchn.text !== '') {\n _drawTextCandidateFunc(conf)(\n c4Shape.thchn.text,\n c4ShapeElem,\n c4Shape.x,\n c4Shape.y + c4Shape.thchn.Y,\n c4Shape.width,\n c4Shape.height,\n { fill: fontColor, 'font-style': 'italic' },\n textFontConf\n );\n } else if (c4Shape.type && c4Shape.type.text !== '') {\n _drawTextCandidateFunc(conf)(\n c4Shape.type.text,\n c4ShapeElem,\n c4Shape.x,\n c4Shape.y + c4Shape.type.Y,\n c4Shape.width,\n c4Shape.height,\n { fill: fontColor, 'font-style': 'italic' },\n textFontConf\n );\n }\n\n // draw descr\n if (c4Shape.descr && c4Shape.descr.text !== '') {\n textFontConf = conf.personFont();\n textFontConf.fontColor = fontColor;\n _drawTextCandidateFunc(conf)(\n c4Shape.descr.text,\n c4ShapeElem,\n c4Shape.x,\n c4Shape.y + c4Shape.descr.Y,\n c4Shape.width,\n c4Shape.height,\n { fill: fontColor },\n textFontConf\n );\n }\n\n return c4Shape.height;\n};\n\nexport const insertDatabaseIcon = function (elem) {\n elem\n .append('defs')\n .append('symbol')\n .attr('id', 'database')\n .attr('fill-rule', 'evenodd')\n .attr('clip-rule', 'evenodd')\n .append('path')\n .attr('transform', 'scale(.5)')\n .attr(\n 'd',\n 'M12.258.001l.256.004.255.005.253.008.251.01.249.012.247.015.246.016.242.019.241.02.239.023.236.024.233.027.231.028.229.031.225.032.223.034.22.036.217.038.214.04.211.041.208.043.205.045.201.046.198.048.194.05.191.051.187.053.183.054.18.056.175.057.172.059.168.06.163.061.16.063.155.064.15.066.074.033.073.033.071.034.07.034.069.035.068.035.067.035.066.035.064.036.064.036.062.036.06.036.06.037.058.037.058.037.055.038.055.038.053.038.052.038.051.039.05.039.048.039.047.039.045.04.044.04.043.04.041.04.04.041.039.041.037.041.036.041.034.041.033.042.032.042.03.042.029.042.027.042.026.043.024.043.023.043.021.043.02.043.018.044.017.043.015.044.013.044.012.044.011.045.009.044.007.045.006.045.004.045.002.045.001.045v17l-.001.045-.002.045-.004.045-.006.045-.007.045-.009.044-.011.045-.012.044-.013.044-.015.044-.017.043-.018.044-.02.043-.021.043-.023.043-.024.043-.026.043-.027.042-.029.042-.03.042-.032.042-.033.042-.034.041-.036.041-.037.041-.039.041-.04.041-.041.04-.043.04-.044.04-.045.04-.047.039-.048.039-.05.039-.051.039-.052.038-.053.038-.055.038-.055.038-.058.037-.058.037-.06.037-.06.036-.062.036-.064.036-.064.036-.066.035-.067.035-.068.035-.069.035-.07.034-.071.034-.073.033-.074.033-.15.066-.155.064-.16.063-.163.061-.168.06-.172.059-.175.057-.18.056-.183.054-.187.053-.191.051-.194.05-.198.048-.201.046-.205.045-.208.043-.211.041-.214.04-.217.038-.22.036-.223.034-.225.032-.229.031-.231.028-.233.027-.236.024-.239.023-.241.02-.242.019-.246.016-.247.015-.249.012-.251.01-.253.008-.255.005-.256.004-.258.001-.258-.001-.256-.004-.255-.005-.253-.008-.251-.01-.249-.012-.247-.015-.245-.016-.243-.019-.241-.02-.238-.023-.236-.024-.234-.027-.231-.028-.228-.031-.226-.032-.223-.034-.22-.036-.217-.038-.214-.04-.211-.041-.208-.043-.204-.045-.201-.046-.198-.048-.195-.05-.19-.051-.187-.053-.184-.054-.179-.056-.176-.057-.172-.059-.167-.06-.164-.061-.159-.063-.155-.064-.151-.066-.074-.033-.072-.033-.072-.034-.07-.034-.069-.035-.068-.035-.067-.035-.066-.035-.064-.036-.063-.036-.062-.036-.061-.036-.06-.037-.058-.037-.057-.037-.056-.038-.055-.038-.053-.038-.052-.038-.051-.039-.049-.039-.049-.039-.046-.039-.046-.04-.044-.04-.043-.04-.041-.04-.04-.041-.039-.041-.037-.041-.036-.041-.034-.041-.033-.042-.032-.042-.03-.042-.029-.042-.027-.042-.026-.043-.024-.043-.023-.043-.021-.043-.02-.043-.018-.044-.017-.043-.015-.044-.013-.044-.012-.044-.011-.045-.009-.044-.007-.045-.006-.045-.004-.045-.002-.045-.001-.045v-17l.001-.045.002-.045.004-.045.006-.045.007-.045.009-.044.011-.045.012-.044.013-.044.015-.044.017-.043.018-.044.02-.043.021-.043.023-.043.024-.043.026-.043.027-.042.029-.042.03-.042.032-.042.033-.042.034-.041.036-.041.037-.041.039-.041.04-.041.041-.04.043-.04.044-.04.046-.04.046-.039.049-.039.049-.039.051-.039.052-.038.053-.038.055-.038.056-.038.057-.037.058-.037.06-.037.061-.036.062-.036.063-.036.064-.036.066-.035.067-.035.068-.035.069-.035.07-.034.072-.034.072-.033.074-.033.151-.066.155-.064.159-.063.164-.061.167-.06.172-.059.176-.057.179-.056.184-.054.187-.053.19-.051.195-.05.198-.048.201-.046.204-.045.208-.043.211-.041.214-.04.217-.038.22-.036.223-.034.226-.032.228-.031.231-.028.234-.027.236-.024.238-.023.241-.02.243-.019.245-.016.247-.015.249-.012.251-.01.253-.008.255-.005.256-.004.258-.001.258.001zm-9.258 20.499v.01l.001.021.003.021.004.022.005.021.006.022.007.022.009.023.01.022.011.023.012.023.013.023.015.023.016.024.017.023.018.024.019.024.021.024.022.025.023.024.024.025.052.049.056.05.061.051.066.051.07.051.075.051.079.052.084.052.088.052.092.052.097.052.102.051.105.052.11.052.114.051.119.051.123.051.127.05.131.05.135.05.139.048.144.049.147.047.152.047.155.047.16.045.163.045.167.043.171.043.176.041.178.041.183.039.187.039.19.037.194.035.197.035.202.033.204.031.209.03.212.029.216.027.219.025.222.024.226.021.23.02.233.018.236.016.24.015.243.012.246.01.249.008.253.005.256.004.259.001.26-.001.257-.004.254-.005.25-.008.247-.011.244-.012.241-.014.237-.016.233-.018.231-.021.226-.021.224-.024.22-.026.216-.027.212-.028.21-.031.205-.031.202-.034.198-.034.194-.036.191-.037.187-.039.183-.04.179-.04.175-.042.172-.043.168-.044.163-.045.16-.046.155-.046.152-.047.148-.048.143-.049.139-.049.136-.05.131-.05.126-.05.123-.051.118-.052.114-.051.11-.052.106-.052.101-.052.096-.052.092-.052.088-.053.083-.051.079-.052.074-.052.07-.051.065-.051.06-.051.056-.05.051-.05.023-.024.023-.025.021-.024.02-.024.019-.024.018-.024.017-.024.015-.023.014-.024.013-.023.012-.023.01-.023.01-.022.008-.022.006-.022.006-.022.004-.022.004-.021.001-.021.001-.021v-4.127l-.077.055-.08.053-.083.054-.085.053-.087.052-.09.052-.093.051-.095.05-.097.05-.1.049-.102.049-.105.048-.106.047-.109.047-.111.046-.114.045-.115.045-.118.044-.12.043-.122.042-.124.042-.126.041-.128.04-.13.04-.132.038-.134.038-.135.037-.138.037-.139.035-.142.035-.143.034-.144.033-.147.032-.148.031-.15.03-.151.03-.153.029-.154.027-.156.027-.158.026-.159.025-.161.024-.162.023-.163.022-.165.021-.166.02-.167.019-.169.018-.169.017-.171.016-.173.015-.173.014-.175.013-.175.012-.177.011-.178.01-.179.008-.179.008-.181.006-.182.005-.182.004-.184.003-.184.002h-.37l-.184-.002-.184-.003-.182-.004-.182-.005-.181-.006-.179-.008-.179-.008-.178-.01-.176-.011-.176-.012-.175-.013-.173-.014-.172-.015-.171-.016-.17-.017-.169-.018-.167-.019-.166-.02-.165-.021-.163-.022-.162-.023-.161-.024-.159-.025-.157-.026-.156-.027-.155-.027-.153-.029-.151-.03-.15-.03-.148-.031-.146-.032-.145-.033-.143-.034-.141-.035-.14-.035-.137-.037-.136-.037-.134-.038-.132-.038-.13-.04-.128-.04-.126-.041-.124-.042-.122-.042-.12-.044-.117-.043-.116-.045-.113-.045-.112-.046-.109-.047-.106-.047-.105-.048-.102-.049-.1-.049-.097-.05-.095-.05-.093-.052-.09-.051-.087-.052-.085-.053-.083-.054-.08-.054-.077-.054v4.127zm0-5.654v.011l.001.021.003.021.004.021.005.022.006.022.007.022.009.022.01.022.011.023.012.023.013.023.015.024.016.023.017.024.018.024.019.024.021.024.022.024.023.025.024.024.052.05.056.05.061.05.066.051.07.051.075.052.079.051.084.052.088.052.092.052.097.052.102.052.105.052.11.051.114.051.119.052.123.05.127.051.131.05.135.049.139.049.144.048.147.048.152.047.155.046.16.045.163.045.167.044.171.042.176.042.178.04.183.04.187.038.19.037.194.036.197.034.202.033.204.032.209.03.212.028.216.027.219.025.222.024.226.022.23.02.233.018.236.016.24.014.243.012.246.01.249.008.253.006.256.003.259.001.26-.001.257-.003.254-.006.25-.008.247-.01.244-.012.241-.015.237-.016.233-.018.231-.02.226-.022.224-.024.22-.025.216-.027.212-.029.21-.03.205-.032.202-.033.198-.035.194-.036.191-.037.187-.039.183-.039.179-.041.175-.042.172-.043.168-.044.163-.045.16-.045.155-.047.152-.047.148-.048.143-.048.139-.05.136-.049.131-.05.126-.051.123-.051.118-.051.114-.052.11-.052.106-.052.101-.052.096-.052.092-.052.088-.052.083-.052.079-.052.074-.051.07-.052.065-.051.06-.05.056-.051.051-.049.023-.025.023-.024.021-.025.02-.024.019-.024.018-.024.017-.024.015-.023.014-.023.013-.024.012-.022.01-.023.01-.023.008-.022.006-.022.006-.022.004-.021.004-.022.001-.021.001-.021v-4.139l-.077.054-.08.054-.083.054-.085.052-.087.053-.09.051-.093.051-.095.051-.097.05-.1.049-.102.049-.105.048-.106.047-.109.047-.111.046-.114.045-.115.044-.118.044-.12.044-.122.042-.124.042-.126.041-.128.04-.13.039-.132.039-.134.038-.135.037-.138.036-.139.036-.142.035-.143.033-.144.033-.147.033-.148.031-.15.03-.151.03-.153.028-.154.028-.156.027-.158.026-.159.025-.161.024-.162.023-.163.022-.165.021-.166.02-.167.019-.169.018-.169.017-.171.016-.173.015-.173.014-.175.013-.175.012-.177.011-.178.009-.179.009-.179.007-.181.007-.182.005-.182.004-.184.003-.184.002h-.37l-.184-.002-.184-.003-.182-.004-.182-.005-.181-.007-.179-.007-.179-.009-.178-.009-.176-.011-.176-.012-.175-.013-.173-.014-.172-.015-.171-.016-.17-.017-.169-.018-.167-.019-.166-.02-.165-.021-.163-.022-.162-.023-.161-.024-.159-.025-.157-.026-.156-.027-.155-.028-.153-.028-.151-.03-.15-.03-.148-.031-.146-.033-.145-.033-.143-.033-.141-.035-.14-.036-.137-.036-.136-.037-.134-.038-.132-.039-.13-.039-.128-.04-.126-.041-.124-.042-.122-.043-.12-.043-.117-.044-.116-.044-.113-.046-.112-.046-.109-.046-.106-.047-.105-.048-.102-.049-.1-.049-.097-.05-.095-.051-.093-.051-.09-.051-.087-.053-.085-.052-.083-.054-.08-.054-.077-.054v4.139zm0-5.666v.011l.001.02.003.022.004.021.005.022.006.021.007.022.009.023.01.022.011.023.012.023.013.023.015.023.016.024.017.024.018.023.019.024.021.025.022.024.023.024.024.025.052.05.056.05.061.05.066.051.07.051.075.052.079.051.084.052.088.052.092.052.097.052.102.052.105.051.11.052.114.051.119.051.123.051.127.05.131.05.135.05.139.049.144.048.147.048.152.047.155.046.16.045.163.045.167.043.171.043.176.042.178.04.183.04.187.038.19.037.194.036.197.034.202.033.204.032.209.03.212.028.216.027.219.025.222.024.226.021.23.02.233.018.236.017.24.014.243.012.246.01.249.008.253.006.256.003.259.001.26-.001.257-.003.254-.006.25-.008.247-.01.244-.013.241-.014.237-.016.233-.018.231-.02.226-.022.224-.024.22-.025.216-.027.212-.029.21-.03.205-.032.202-.033.198-.035.194-.036.191-.037.187-.039.183-.039.179-.041.175-.042.172-.043.168-.044.163-.045.16-.045.155-.047.152-.047.148-.048.143-.049.139-.049.136-.049.131-.051.126-.05.123-.051.118-.052.114-.051.11-.052.106-.052.101-.052.096-.052.092-.052.088-.052.083-.052.079-.052.074-.052.07-.051.065-.051.06-.051.056-.05.051-.049.023-.025.023-.025.021-.024.02-.024.019-.024.018-.024.017-.024.015-.023.014-.024.013-.023.012-.023.01-.022.01-.023.008-.022.006-.022.006-.022.004-.022.004-.021.001-.021.001-.021v-4.153l-.077.054-.08.054-.083.053-.085.053-.087.053-.09.051-.093.051-.095.051-.097.05-.1.049-.102.048-.105.048-.106.048-.109.046-.111.046-.114.046-.115.044-.118.044-.12.043-.122.043-.124.042-.126.041-.128.04-.13.039-.132.039-.134.038-.135.037-.138.036-.139.036-.142.034-.143.034-.144.033-.147.032-.148.032-.15.03-.151.03-.153.028-.154.028-.156.027-.158.026-.159.024-.161.024-.162.023-.163.023-.165.021-.166.02-.167.019-.169.018-.169.017-.171.016-.173.015-.173.014-.175.013-.175.012-.177.01-.178.01-.179.009-.179.007-.181.006-.182.006-.182.004-.184.003-.184.001-.185.001-.185-.001-.184-.001-.184-.003-.182-.004-.182-.006-.181-.006-.179-.007-.179-.009-.178-.01-.176-.01-.176-.012-.175-.013-.173-.014-.172-.015-.171-.016-.17-.017-.169-.018-.167-.019-.166-.02-.165-.021-.163-.023-.162-.023-.161-.024-.159-.024-.157-.026-.156-.027-.155-.028-.153-.028-.151-.03-.15-.03-.148-.032-.146-.032-.145-.033-.143-.034-.141-.034-.14-.036-.137-.036-.136-.037-.134-.038-.132-.039-.13-.039-.128-.041-.126-.041-.124-.041-.122-.043-.12-.043-.117-.044-.116-.044-.113-.046-.112-.046-.109-.046-.106-.048-.105-.048-.102-.048-.1-.05-.097-.049-.095-.051-.093-.051-.09-.052-.087-.052-.085-.053-.083-.053-.08-.054-.077-.054v4.153zm8.74-8.179l-.257.004-.254.005-.25.008-.247.011-.244.012-.241.014-.237.016-.233.018-.231.021-.226.022-.224.023-.22.026-.216.027-.212.028-.21.031-.205.032-.202.033-.198.034-.194.036-.191.038-.187.038-.183.04-.179.041-.175.042-.172.043-.168.043-.163.045-.16.046-.155.046-.152.048-.148.048-.143.048-.139.049-.136.05-.131.05-.126.051-.123.051-.118.051-.114.052-.11.052-.106.052-.101.052-.096.052-.092.052-.088.052-.083.052-.079.052-.074.051-.07.052-.065.051-.06.05-.056.05-.051.05-.023.025-.023.024-.021.024-.02.025-.019.024-.018.024-.017.023-.015.024-.014.023-.013.023-.012.023-.01.023-.01.022-.008.022-.006.023-.006.021-.004.022-.004.021-.001.021-.001.021.001.021.001.021.004.021.004.022.006.021.006.023.008.022.01.022.01.023.012.023.013.023.014.023.015.024.017.023.018.024.019.024.02.025.021.024.023.024.023.025.051.05.056.05.06.05.065.051.07.052.074.051.079.052.083.052.088.052.092.052.096.052.101.052.106.052.11.052.114.052.118.051.123.051.126.051.131.05.136.05.139.049.143.048.148.048.152.048.155.046.16.046.163.045.168.043.172.043.175.042.179.041.183.04.187.038.191.038.194.036.198.034.202.033.205.032.21.031.212.028.216.027.22.026.224.023.226.022.231.021.233.018.237.016.241.014.244.012.247.011.25.008.254.005.257.004.26.001.26-.001.257-.004.254-.005.25-.008.247-.011.244-.012.241-.014.237-.016.233-.018.231-.021.226-.022.224-.023.22-.026.216-.027.212-.028.21-.031.205-.032.202-.033.198-.034.194-.036.191-.038.187-.038.183-.04.179-.041.175-.042.172-.043.168-.043.163-.045.16-.046.155-.046.152-.048.148-.048.143-.048.139-.049.136-.05.131-.05.126-.051.123-.051.118-.051.114-.052.11-.052.106-.052.101-.052.096-.052.092-.052.088-.052.083-.052.079-.052.074-.051.07-.052.065-.051.06-.05.056-.05.051-.05.023-.025.023-.024.021-.024.02-.025.019-.024.018-.024.017-.023.015-.024.014-.023.013-.023.012-.023.01-.023.01-.022.008-.022.006-.023.006-.021.004-.022.004-.021.001-.021.001-.021-.001-.021-.001-.021-.004-.021-.004-.022-.006-.021-.006-.023-.008-.022-.01-.022-.01-.023-.012-.023-.013-.023-.014-.023-.015-.024-.017-.023-.018-.024-.019-.024-.02-.025-.021-.024-.023-.024-.023-.025-.051-.05-.056-.05-.06-.05-.065-.051-.07-.052-.074-.051-.079-.052-.083-.052-.088-.052-.092-.052-.096-.052-.101-.052-.106-.052-.11-.052-.114-.052-.118-.051-.123-.051-.126-.051-.131-.05-.136-.05-.139-.049-.143-.048-.148-.048-.152-.048-.155-.046-.16-.046-.163-.045-.168-.043-.172-.043-.175-.042-.179-.041-.183-.04-.187-.038-.191-.038-.194-.036-.198-.034-.202-.033-.205-.032-.21-.031-.212-.028-.216-.027-.22-.026-.224-.023-.226-.022-.231-.021-.233-.018-.237-.016-.241-.014-.244-.012-.247-.011-.25-.008-.254-.005-.257-.004-.26-.001-.26.001z'\n );\n};\n\nexport const insertComputerIcon = function (elem) {\n elem\n .append('defs')\n .append('symbol')\n .attr('id', 'computer')\n .attr('width', '24')\n .attr('height', '24')\n .append('path')\n .attr('transform', 'scale(.5)')\n .attr(\n 'd',\n 'M2 2v13h20v-13h-20zm18 11h-16v-9h16v9zm-10.228 6l.466-1h3.524l.467 1h-4.457zm14.228 3h-24l2-6h2.104l-1.33 4h18.45l-1.297-4h2.073l2 6zm-5-10h-14v-7h14v7z'\n );\n};\n\nexport const insertClockIcon = function (elem) {\n elem\n .append('defs')\n .append('symbol')\n .attr('id', 'clock')\n .attr('width', '24')\n .attr('height', '24')\n .append('path')\n .attr('transform', 'scale(.5)')\n .attr(\n 'd',\n 'M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5.848 12.459c.202.038.202.333.001.372-1.907.361-6.045 1.111-6.547 1.111-.719 0-1.301-.582-1.301-1.301 0-.512.77-5.447 1.125-7.445.034-.192.312-.181.343.014l.985 6.238 5.394 1.011z'\n );\n};\n\n/**\n * Setup arrow head and define the marker. The result is appended to the svg.\n *\n * @param elem\n */\nexport const insertArrowHead = function (elem) {\n elem\n .append('defs')\n .append('marker')\n .attr('id', 'arrowhead')\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'); // this is actual shape for arrowhead\n};\nexport const insertArrowEnd = function (elem) {\n elem\n .append('defs')\n .append('marker')\n .attr('id', 'arrowend')\n .attr('refX', 1)\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 10 0 L 0 5 L 10 10 z'); // this is actual shape for arrowhead\n};\n/**\n * Setup arrow head and define the marker. The result is appended to the svg.\n *\n * @param {any} elem\n */\nexport const insertArrowFilledHead = function (elem) {\n elem\n .append('defs')\n .append('marker')\n .attr('id', 'filled-head')\n .attr('refX', 18)\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/**\n * Setup node number. The result is appended to the svg.\n *\n * @param {any} elem\n */\nexport const insertDynamicNumber = function (elem) {\n elem\n .append('defs')\n .append('marker')\n .attr('id', 'sequencenumber')\n .attr('refX', 15)\n .attr('refY', 15)\n .attr('markerWidth', 60)\n .attr('markerHeight', 40)\n .attr('orient', 'auto')\n .append('circle')\n .attr('cx', 15)\n .attr('cy', 15)\n .attr('r', 6);\n // .style(\"fill\", '#f00');\n};\n/**\n * Setup arrow head and define the marker. The result is appended to the svg.\n *\n * @param {any} elem\n */\nexport const insertArrowCrossHead = function (elem) {\n const defs = elem.append('defs');\n const marker = defs\n .append('marker')\n .attr('id', 'crosshead')\n .attr('markerWidth', 15)\n .attr('markerHeight', 8)\n .attr('orient', 'auto')\n .attr('refX', 16)\n .attr('refY', 4);\n\n // The arrow\n marker\n .append('path')\n .attr('fill', 'black')\n .attr('stroke', '#000000')\n .style('stroke-dasharray', '0, 0')\n .attr('stroke-width', '1px')\n .attr('d', 'M 9,2 V 6 L16,4 Z');\n\n // The cross\n marker\n .append('path')\n .attr('fill', 'none')\n .attr('stroke', '#000000')\n .style('stroke-dasharray', '0, 0')\n .attr('stroke-width', '1px')\n .attr('d', 'M 0,1 L 6,7 M 6,1 L 0,7');\n // this is actual shape for arrowhead\n};\n\nexport const getTextObj = function () {\n return {\n x: 0,\n y: 0,\n fill: undefined,\n anchor: undefined,\n style: '#666',\n width: undefined,\n height: undefined,\n textMargin: 0,\n rx: 0,\n ry: 0,\n tspan: true,\n valign: undefined,\n };\n};\n\nexport const getNoteRect = function () {\n return {\n x: 0,\n y: 0,\n fill: '#EDF2AE',\n stroke: '#666',\n width: 100,\n anchor: 'start',\n height: 100,\n rx: 0,\n ry: 0,\n };\n};\n\nconst getC4ShapeFont = (cnf, typeC4Shape) => {\n return {\n fontFamily: cnf[typeC4Shape + 'FontFamily'],\n fontSize: cnf[typeC4Shape + 'FontSize'],\n fontWeight: cnf[typeC4Shape + 'FontWeight'],\n };\n};\n\nconst _drawTextCandidateFunc = (function () {\n /**\n * @param {any} content\n * @param {any} g\n * @param {any} x\n * @param {any} y\n * @param {any} width\n * @param {any} height\n * @param {any} textAttrs\n */\n function byText(content, g, x, y, width, height, textAttrs) {\n const text = g\n .append('text')\n .attr('x', x + width / 2)\n .attr('y', y + height / 2 + 5)\n .style('text-anchor', 'middle')\n .text(content);\n _setTextAttrs(text, textAttrs);\n }\n\n /**\n * @param {any} content\n * @param {any} g\n * @param {any} x\n * @param {any} y\n * @param {any} width\n * @param {any} height\n * @param {any} textAttrs\n * @param {any} conf\n */\n function byTspan(content, g, x, y, width, height, textAttrs, conf) {\n const { fontSize, fontFamily, fontWeight } = conf;\n\n const lines = content.split(common.lineBreakRegex);\n for (let i = 0; i < lines.length; i++) {\n const dy = i * fontSize - (fontSize * (lines.length - 1)) / 2;\n const text = g\n .append('text')\n .attr('x', x + width / 2)\n .attr('y', y)\n .style('text-anchor', 'middle')\n .attr('dominant-baseline', 'middle')\n .style('font-size', fontSize)\n .style('font-weight', fontWeight)\n .style('font-family', fontFamily);\n text\n .append('tspan')\n // .attr('x', x + width / 2)\n .attr('dy', dy)\n .text(lines[i])\n // .attr('y', y + height / 2)\n .attr('alignment-baseline', 'mathematical');\n\n _setTextAttrs(text, textAttrs);\n }\n }\n\n /**\n * @param {any} content\n * @param {any} g\n * @param {any} x\n * @param {any} y\n * @param {any} width\n * @param {any} height\n * @param {any} textAttrs\n * @param {any} conf\n */\n function byFo(content, g, x, y, width, height, textAttrs, conf) {\n const s = g.append('switch');\n const f = s\n .append('foreignObject')\n .attr('x', x)\n .attr('y', y)\n .attr('width', width)\n .attr('height', height);\n\n const text = f\n .append('xhtml:div')\n .style('display', 'table')\n .style('height', '100%')\n .style('width', '100%');\n\n text\n .append('div')\n .style('display', 'table-cell')\n .style('text-align', 'center')\n .style('vertical-align', 'middle')\n .text(content);\n\n byTspan(content, s, x, y, width, height, textAttrs, conf);\n _setTextAttrs(text, textAttrs);\n }\n\n /**\n * @param {any} toText\n * @param {any} fromTextAttrsDict\n */\n function _setTextAttrs(toText, fromTextAttrsDict) {\n for (const key in fromTextAttrsDict) {\n if (fromTextAttrsDict.hasOwnProperty(key)) {\n // eslint-disable-line\n toText.attr(key, fromTextAttrsDict[key]);\n }\n }\n }\n\n return function (conf) {\n return conf.textPlacement === 'fo' ? byFo : conf.textPlacement === 'old' ? byText : byTspan;\n };\n})();\n\nexport default {\n drawRect,\n drawText,\n drawLabel,\n drawBoundary,\n drawC4Shape,\n drawRels,\n drawImage,\n drawEmbeddedImage,\n insertArrowHead,\n insertArrowEnd,\n insertArrowFilledHead,\n insertDynamicNumber,\n insertArrowCrossHead,\n insertDatabaseIcon,\n insertComputerIcon,\n insertClockIcon,\n getTextObj,\n getNoteRect,\n sanitizeUrl,\n};\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';\nimport {\n setAccTitle,\n getAccTitle,\n getAccDescription,\n setAccDescription,\n clear as commonClear,\n} from '../../commonDb';\n\nconst MERMAID_DOM_ID_PREFIX = 'classid-';\n\nlet relations = [];\nlet classes = {};\nlet classCounter = 0;\n\nlet funs = [];\n\nconst sanitizeText = (txt) => common.sanitizeText(txt, configApi.getConfig());\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 = common.sanitizeText(split[1], configApi.getConfig());\n }\n\n return { className: className, type: genericType };\n};\n\n/**\n * Function called by parser when a node definition has been found.\n *\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 *\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 commonClear();\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 relation.relationTitle1 = common.sanitizeText(\n relation.relationTitle1.trim(),\n configApi.getConfig()\n );\n\n relation.relationTitle2 = common.sanitizeText(\n relation.relationTitle2.trim(),\n configApi.getConfig()\n );\n\n relations.push(relation);\n};\n\n/**\n * Adds an annotation to the specified class Annotations mark special properties of the given type\n * (like 'interface' or 'service')\n *\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 *\n * @param className The class name\n * @param member The full name of the member. If the member is enclosed in <> it is\n * treated as an annotation If the member is ending with a closing bracket ) it is treated as a\n * method 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 theClass.annotations.push(sanitizeText(memberString.substring(2, memberString.length - 2)));\n } else if (memberString.indexOf(')') > 0) {\n theClass.methods.push(sanitizeText(memberString));\n } else if (memberString) {\n theClass.members.push(sanitizeText(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 common.sanitizeText(label.substr(1).trim(), configApi.getConfig());\n } else {\n return sanitizeText(label.trim());\n }\n};\n\n/**\n * Called by parser when a special node is found, e.g. a clickable element.\n *\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 *\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 *\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 (config.securityLevel === 'sandbox') {\n classes[id].linkTarget = '_top';\n } else if (typeof target === 'string') {\n classes[id].linkTarget = sanitizeText(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 *\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 .text(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 setAccTitle,\n getAccTitle,\n getAccDescription,\n setAccDescription,\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 graphlib from 'graphlib';\nimport { log } from '../../logger';\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, setupGraphViewbox } from '../../utils';\nimport common from '../common/common';\nimport addSVGAccessibilityFields from '../../accessibility';\n\nlet idCache = {};\nconst padding = 20;\n\nconst sanitizeText = (txt) => common.sanitizeText(txt, getConfig());\n\nlet 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 *\n * @param {Object<\n * string,\n * { cssClasses: string[]; text: string; id: string; type: string; domId: string }\n * >} classes\n * Object containing the vertices.\n * @param {SVGGElement} 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 *\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: sanitizeText(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 definition\n *\n * @param relations\n * @param {object} g The graph object\n */\nexport const addRelations = function (relations, g) {\n const conf = getConfig().flowchart;\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) {\n // 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/**\n * Gets the ID with the same label as in the cache\n *\n * @param {string} label The label to look for\n * @returns {string} The resulting ID\n */\nconst getGraphId = function (label) {\n const foundEntry = Object.entries(idCache).find((entry) => entry[1].label === label);\n\n if (foundEntry) {\n return foundEntry[0];\n }\n};\n\n/**\n * Merges the value of `conf` with the passed `cnf`\n *\n * @param {object} cnf Config to merge\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 *\n * @param {string} text\n * @param {string} id\n * @param _version\n * @param diagObj\n */\nexport const draw = function (text, id, _version, diagObj) {\n log.info('Drawing class - ', id);\n // diagObj.db.clear();\n // const parser = diagObj.db.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 const securityLevel = getConfig().securityLevel;\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: diagObj.db.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 vertices/nodes and edges/links from the parsed graph definition\n const classes = diagObj.db.getClasses();\n const relations = diagObj.db.getRelations();\n\n log.info(relations);\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 let sandboxElement;\n if (securityLevel === 'sandbox') {\n sandboxElement = select('#i' + id);\n }\n const root =\n securityLevel === 'sandbox'\n ? select(sandboxElement.nodes()[0].contentDocument.body)\n : select('body');\n const svg = root.select(`[id=\"${id}\"]`);\n\n // Run the renderer. This is what draws the final graph.\n const element = root.select('#' + id + ' g');\n render(element, g, ['aggregation', 'extension', 'composition', 'dependency'], 'classDiagram', id);\n\n setupGraphViewbox(g, svg, conf.diagramPadding, conf.useMaxWidth);\n\n // Add label rects for non html labels\n if (!conf.htmlLabels) {\n const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;\n const labels = doc.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 = doc.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 addSVGAccessibilityFields(diagObj.db, svg, id);\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\n/**\n * Gets the arrow marker for a type index\n *\n * @param {number} type The type to look for\n * @returns {'aggregation' | 'extension' | 'composition' | 'dependency'} The arrow marker\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\nexport default {\n setConf,\n draw,\n};\n","import { select } from 'd3';\nimport dagre from 'dagre';\nimport graphlib from 'graphlib';\nimport { log } from '../../logger';\nimport svgDraw from './svgDraw';\nimport { configureSvgSize } from '../../utils';\nimport { getConfig } from '../../config';\nimport addSVGAccessibilityFields from '../../accessibility';\n\nlet idCache = {};\nconst padding = 20;\n\nconst confa = {\n dividerMargin: 10,\n padding: 5,\n textHeight: 10,\n};\n\n/**\n * Gets the ID with the same label as in the cache\n *\n * @param {string} label The label to look for\n * @returns {string} The resulting ID\n */\nconst getGraphId = function (label) {\n const foundEntry = Object.entries(idCache).find((entry) => entry[1].label === label);\n\n if (foundEntry) {\n return foundEntry[0];\n }\n};\n\n/**\n * Setup arrow head and define the marker. The result is appended to the svg.\n *\n * @param {SVGSVGElement} elem The SVG element to append to\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\n/**\n * Draws a flowchart in the tag with id: id based on the graph definition in text.\n *\n * @param {string} text\n * @param {string} id\n * @param version\n * @param _version\n * @param diagObj\n */\nexport const draw = function (text, id, _version, diagObj) {\n const conf = getConfig().class;\n idCache = {};\n // diagObj.db.clear();\n // diagObj.parser.parse(text);\n\n log.info('Rendering diagram ' + text);\n\n const securityLevel = getConfig().securityLevel;\n // Handle root and Document for when rendering in sanbox mode\n let sandboxElement;\n if (securityLevel === 'sandbox') {\n sandboxElement = select('#i' + id);\n }\n const root =\n securityLevel === 'sandbox'\n ? select(sandboxElement.nodes()[0].contentDocument.body)\n : select('body');\n const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;\n\n // Fetch the default direction, use TD if none was found\n const diagram = root.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 = diagObj.db.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, diagObj);\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 = diagObj.db.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 root\n .select('#' + diagObj.db.lookUpDomId(v))\n .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, diagObj);\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 addSVGAccessibilityFields(diagObj.db, diagram, id);\n};\n\nexport default {\n draw,\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 utils from '../../utils';\nimport { log } from '../../logger';\n\nlet edgeCount = 0;\nexport const drawEdge = function (elem, path, relation, conf, diagObj) {\n const getRelationType = function (type) {\n switch (type) {\n case diagObj.db.relationType.AGGREGATION:\n return 'aggregation';\n case diagObj.db.EXTENSION:\n return 'extension';\n case diagObj.db.COMPOSITION:\n return 'composition';\n case diagObj.db.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\n/**\n * Renders a class diagram\n *\n * @param {SVGSVGElement} elem The element to draw it into\n * @param classDef\n * @param conf\n * @param diagObj\n * @todo Add more information in the JSDOC here\n */\nexport const drawClass = function (elem, classDef, conf, diagObj) {\n log.debug('Rendering class ', classDef, conf);\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', diagObj.db.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\n/**\n * Adds a for a member in a diagram\n *\n * @param {SVGElement} textEl The element to append to\n * @param {string} txt The member\n * @param {boolean} isFirst\n * @param {{ padding: string; textHeight: string }} conf The configuration for the member\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\n/**\n * Makes generics in typescript syntax\n *\n * @example Array of array of strings in typescript syntax\n * // returns \"Array>\"\n * parseGenericTypes('Array~Array~string~~');\n *\n * @param {string} text The text to convert\n * @returns {string} The converted string\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\n/**\n * Gives the styles for a classifier\n *\n * @param {'+' | '-' | '#' | '~' | '*' | '$'} classifier The classifier string\n * @returns {string} Styling for the classifier\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\n/**\n * Gets the number of lines in a string\n *\n * @param {string | undefined} s The string to check the lines for\n * @returns {number} The number of lines in that string\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 removeEscapes = (text) => {\n let newStr = text.replace(/\\\\u[\\dA-F]{4}/gi, function (match) {\n return String.fromCharCode(parseInt(match.replace(/\\\\u/g, ''), 16));\n });\n\n newStr = newStr.replace(/\\\\x([0-9a-f]{2})/gi, (_, c) => String.fromCharCode(parseInt(c, 16)));\n newStr = newStr.replace(/\\\\[\\d\\d\\d]{3}/gi, function (match) {\n return String.fromCharCode(parseInt(match.replace(/\\\\/g, ''), 8));\n });\n newStr = newStr.replace(/\\\\[\\d\\d\\d]{2}/gi, function (match) {\n return String.fromCharCode(parseInt(match.replace(/\\\\/g, ''), 8));\n });\n\n return newStr;\n};\n\n/**\n * Removes script tags from a text\n *\n * @param {string} txt The text to sanitize\n * @returns {string} The safer text\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 let decodedText = removeEscapes(rs);\n decodedText = decodedText.replaceAll(/script>/gi, '#');\n decodedText = decodedText.replaceAll(/javascript:/gi, '#');\n decodedText = decodedText.replaceAll(/javascript&colon/gi, '#');\n decodedText = decodedText.replaceAll(/onerror=/gi, 'onerror:');\n decodedText = decodedText.replaceAll(/`;\n } else {\n if (cnf.securityLevel !== 'loose') {\n svgCode = DOMPurify.sanitize(svgCode, {\n ADD_TAGS: ['foreignobject'],\n ADD_ATTR: ['dominant-baseline'],\n });\n }\n }\n\n if (typeof cb !== 'undefined') {\n switch (graphType) {\n case 'flowchart':\n case 'flowchart-v2':\n cb(svgCode, flowDb.bindFunctions);\n break;\n case 'gantt':\n cb(svgCode, ganttDb.bindFunctions);\n break;\n case 'class':\n case 'classDiagram':\n cb(svgCode, classDb.bindFunctions);\n break;\n default:\n cb(svgCode);\n }\n } else {\n log.debug('CB = undefined!');\n }\n attachFunctions();\n\n const tmpElementSelector = cnf.securityLevel === 'sandbox' ? '#i' + id : '#d' + id;\n const node = select(tmpElementSelector).node();\n if (node !== null && typeof node.remove === 'function') {\n select(tmpElementSelector).node().remove();\n }\n\n return svgCode;\n};\n\nlet currentDirective = {};\n\nconst parseDirective = function (p, statement, context, type) {\n try {\n if (statement !== undefined) {\n statement = statement.trim();\n switch (context) {\n case 'open_directive':\n currentDirective = {};\n break;\n case 'type_directive':\n currentDirective.type = statement.toLowerCase();\n break;\n case 'arg_directive':\n currentDirective.args = JSON.parse(statement);\n break;\n case 'close_directive':\n handleDirective(p, currentDirective, type);\n currentDirective = null;\n break;\n }\n }\n } catch (error) {\n log.error(\n `Error while rendering sequenceDiagram directive: ${statement} jison context: ${context}`\n );\n log.error(error.message);\n }\n};\n\nconst handleDirective = function (p, directive, type) {\n log.debug(`Directive type=${directive.type} with args:`, directive.args);\n switch (directive.type) {\n case 'init':\n case 'initialize': {\n ['config'].forEach((prop) => {\n if (typeof directive.args[prop] !== 'undefined') {\n if (type === 'flowchart-v2') {\n type = 'flowchart';\n }\n directive.args[type] = directive.args[prop];\n delete directive.args[prop];\n }\n });\n log.debug('sanitize in handleDirective', directive.args);\n directiveSanitizer(directive.args);\n log.debug('sanitize in handleDirective (done)', directive.args);\n configApi.addDirective(directive.args);\n break;\n }\n case 'wrap':\n case 'nowrap':\n if (p && p['setWrap']) {\n p.setWrap(directive.type === 'wrap');\n }\n break;\n case 'themeCss':\n log.warn('themeCss encountered');\n break;\n default:\n log.warn(\n `Unhandled directive: source: '%%{${directive.type}: ${JSON.stringify(\n directive.args ? directive.args : {}\n )}}%%`,\n directive\n );\n break;\n }\n};\n\n/** @param {any} conf */\nfunction updateRendererConfigs(conf) {\n // Todo remove, all diagrams should get config on demand from the config object, no need for this\n\n flowRenderer.setConf(conf.flowchart);\n flowRendererV2.setConf(conf.flowchart);\n if (typeof conf['sequenceDiagram'] !== 'undefined') {\n sequenceRenderer.setConf(assignWithDepth(conf.sequence, conf['sequenceDiagram']));\n }\n sequenceRenderer.setConf(conf.sequence);\n ganttRenderer.setConf(conf.gantt);\n // classRenderer.setConf(conf.class);\n stateRenderer.setConf(conf.state);\n stateRendererV2.setConf(conf.state);\n // infoRenderer.setConf(conf.class);\n journeyRenderer.setConf(conf.journey);\n errorRenderer.setConf(conf.class);\n}\n\n/** @param {any} options */\nfunction initialize(options) {\n // Handle legacy location of font-family configuration\n if (options && options.fontFamily) {\n if (!options.themeVariables) {\n options.themeVariables = { fontFamily: options.fontFamily };\n } else {\n if (!options.themeVariables.fontFamily) {\n options.themeVariables = { fontFamily: options.fontFamily };\n }\n }\n }\n // Set default options\n configApi.saveConfigFromInitialize(options);\n\n if (options && options.theme && theme[options.theme]) {\n // Todo merge with user options\n options.themeVariables = theme[options.theme].getThemeVariables(options.themeVariables);\n } else {\n if (options) options.themeVariables = theme.default.getThemeVariables(options.themeVariables);\n }\n\n const config =\n typeof options === 'object' ? configApi.setSiteConfig(options) : configApi.getSiteConfig();\n\n updateRendererConfigs(config);\n setLogLevel(config.logLevel);\n addDiagrams();\n}\n\nconst mermaidAPI = Object.freeze({\n render,\n parse,\n parseDirective,\n initialize,\n getConfig: configApi.getConfig,\n setConfig: configApi.setConfig,\n getSiteConfig: configApi.getSiteConfig,\n updateSiteConfig: configApi.updateSiteConfig,\n reset: () => {\n configApi.reset();\n },\n globalReset: () => {\n configApi.reset(configApi.defaultConfig);\n updateRendererConfigs(configApi.getConfig());\n },\n defaultConfig: configApi.defaultConfig,\n});\n\nsetLogLevel(configApi.getConfig().logLevel);\nconfigApi.reset(configApi.getConfig());\n\nexport default mermaidAPI;\n/**\n * ## mermaidAPI configuration defaults\n *\n * ```html\n * \n * ```\n */\n","import classDiagram from './diagrams/class/styles';\nimport er from './diagrams/er/styles';\nimport flowchart from './diagrams/flowchart/styles';\nimport gantt from './diagrams/gantt/styles';\nimport gitGraph from './diagrams/git/styles';\nimport info from './diagrams/info/styles';\nimport pie from './diagrams/pie/styles';\nimport requirement from './diagrams/requirement/styles';\nimport sequence from './diagrams/sequence/styles';\nimport stateDiagram from './diagrams/state/styles';\nimport journey from './diagrams/user-journey/styles';\nimport c4 from './diagrams/c4/styles';\nimport { log } from './logger';\n\nconst themes = {\n flowchart,\n 'flowchart-v2': flowchart,\n sequence,\n gantt,\n classDiagram,\n 'classDiagram-v2': classDiagram,\n class: classDiagram,\n stateDiagram,\n state: stateDiagram,\n gitGraph,\n info,\n pie,\n er,\n journey,\n requirement,\n c4,\n};\n\nexport const calcThemeVariables = (theme, userOverRides) => {\n log.info('userOverides', userOverRides);\n return theme.calcColors(userOverRides);\n};\n\nconst getStyles = (type, userStyles, options) => {\n return ` {\n font-family: ${options.fontFamily};\n font-size: ${options.fontSize};\n fill: ${options.textColor}\n }\n\n /* Classes common for multiple diagrams */\n\n .error-icon {\n fill: ${options.errorBkgColor};\n }\n .error-text {\n fill: ${options.errorTextColor};\n stroke: ${options.errorTextColor};\n }\n\n .edge-thickness-normal {\n stroke-width: 2px;\n }\n .edge-thickness-thick {\n stroke-width: 3.5px\n }\n .edge-pattern-solid {\n stroke-dasharray: 0;\n }\n\n .edge-pattern-dashed{\n stroke-dasharray: 3;\n }\n .edge-pattern-dotted {\n stroke-dasharray: 2;\n }\n\n .marker {\n fill: ${options.lineColor};\n stroke: ${options.lineColor};\n }\n .marker.cross {\n stroke: ${options.lineColor};\n }\n\n svg {\n font-family: ${options.fontFamily};\n font-size: ${options.fontSize};\n }\n\n ${themes[type](options)}\n\n ${userStyles}\n`;\n};\n\nexport default getStyles;\n","import { getThemeVariables as baseThemeVariables } from './theme-base';\nimport { getThemeVariables as darkThemeVariables } from './theme-dark';\nimport { getThemeVariables as defaultThemeVariables } from './theme-default';\nimport { getThemeVariables as forestThemeVariables } from './theme-forest';\nimport { getThemeVariables as neutralThemeVariables } from './theme-neutral';\n\nexport default {\n base: {\n getThemeVariables: baseThemeVariables,\n },\n dark: {\n getThemeVariables: darkThemeVariables,\n },\n default: {\n getThemeVariables: defaultThemeVariables,\n },\n forest: {\n getThemeVariables: forestThemeVariables,\n },\n neutral: {\n getThemeVariables: neutralThemeVariables,\n },\n};\n","import { darken, lighten, adjust, invert } from 'khroma';\nimport { mkBorder } from './theme-helpers';\nclass Theme {\n constructor() {\n /** # Base variables */\n /**\n * - Background - used to know what the background color is of the diagram. This is used for\n * deducing colors for instance line color. Default value is #f4f4f4.\n */\n this.background = '#f4f4f4';\n this.darkMode = false;\n\n this.primaryColor = '#fff4dd';\n\n this.noteBkgColor = '#fff5ad';\n this.noteTextColor = '#333';\n\n // dark\n\n this.fontFamily = '\"trebuchet ms\", verdana, arial, sans-serif';\n this.fontSize = '16px';\n }\n updateColors() {\n // The || is to make sure that if the variable has been defined by a user override that value is to be used\n\n /* Main */\n this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#eee' : '#333'); // invert(this.primaryColor);\n this.secondaryColor = this.secondaryColor || adjust(this.primaryColor, { h: -120 });\n this.tertiaryColor = this.tertiaryColor || adjust(this.primaryColor, { h: 180, l: 5 });\n\n this.primaryBorderColor = this.primaryBorderColor || mkBorder(this.primaryColor, this.darkMode);\n this.secondaryBorderColor =\n this.secondaryBorderColor || mkBorder(this.secondaryColor, this.darkMode);\n this.tertiaryBorderColor =\n this.tertiaryBorderColor || mkBorder(this.tertiaryColor, this.darkMode);\n this.noteBorderColor = this.noteBorderColor || mkBorder(this.noteBkgColor, this.darkMode);\n this.noteBkgColor = this.noteBkgColor || '#fff5ad';\n this.noteTextColor = this.noteTextColor || '#333';\n\n this.secondaryTextColor = this.secondaryTextColor || invert(this.secondaryColor);\n this.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor);\n this.lineColor = this.lineColor || invert(this.background);\n this.textColor = this.textColor || this.primaryTextColor;\n\n /* Flowchart variables */\n this.nodeBkg = this.nodeBkg || this.primaryColor;\n this.mainBkg = this.mainBkg || this.primaryColor;\n this.nodeBorder = this.nodeBorder || this.primaryBorderColor;\n this.clusterBkg = this.clusterBkg || this.tertiaryColor;\n this.clusterBorder = this.clusterBorder || this.tertiaryBorderColor;\n this.defaultLinkColor = this.defaultLinkColor || this.lineColor;\n this.titleColor = this.titleColor || this.tertiaryTextColor;\n this.edgeLabelBackground =\n this.edgeLabelBackground ||\n (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);\n this.nodeTextColor = this.nodeTextColor || this.primaryTextColor;\n /* Sequence Diagram variables */\n\n // this.actorBorder = lighten(this.border1, 0.5);\n this.actorBorder = this.actorBorder || this.primaryBorderColor;\n this.actorBkg = this.actorBkg || this.mainBkg;\n this.actorTextColor = this.actorTextColor || this.primaryTextColor;\n this.actorLineColor = this.actorLineColor || 'grey';\n this.labelBoxBkgColor = this.labelBoxBkgColor || this.actorBkg;\n this.signalColor = this.signalColor || this.textColor;\n this.signalTextColor = this.signalTextColor || this.textColor;\n this.labelBoxBorderColor = this.labelBoxBorderColor || this.actorBorder;\n this.labelTextColor = this.labelTextColor || this.actorTextColor;\n this.loopTextColor = this.loopTextColor || this.actorTextColor;\n this.activationBorderColor = this.activationBorderColor || darken(this.secondaryColor, 10);\n this.activationBkgColor = this.activationBkgColor || this.secondaryColor;\n this.sequenceNumberColor = this.sequenceNumberColor || invert(this.lineColor);\n\n /* Gantt chart variables */\n\n this.sectionBkgColor = this.sectionBkgColor || this.tertiaryColor;\n this.altSectionBkgColor = this.altSectionBkgColor || 'white';\n this.sectionBkgColor = this.sectionBkgColor || this.secondaryColor;\n this.sectionBkgColor2 = this.sectionBkgColor2 || this.primaryColor;\n this.excludeBkgColor = this.excludeBkgColor || '#eeeeee';\n this.taskBorderColor = this.taskBorderColor || this.primaryBorderColor;\n this.taskBkgColor = this.taskBkgColor || this.primaryColor;\n this.activeTaskBorderColor = this.activeTaskBorderColor || this.primaryColor;\n this.activeTaskBkgColor = this.activeTaskBkgColor || lighten(this.primaryColor, 23);\n this.gridColor = this.gridColor || 'lightgrey';\n this.doneTaskBkgColor = this.doneTaskBkgColor || 'lightgrey';\n this.doneTaskBorderColor = this.doneTaskBorderColor || 'grey';\n this.critBorderColor = this.critBorderColor || '#ff8888';\n this.critBkgColor = this.critBkgColor || 'red';\n this.todayLineColor = this.todayLineColor || 'red';\n this.taskTextColor = this.taskTextColor || this.textColor;\n this.taskTextOutsideColor = this.taskTextOutsideColor || this.textColor;\n this.taskTextLightColor = this.taskTextLightColor || this.textColor;\n this.taskTextColor = this.taskTextColor || this.primaryTextColor;\n this.taskTextDarkColor = this.taskTextDarkColor || this.textColor;\n this.taskTextClickableColor = this.taskTextClickableColor || '#003163';\n\n /* Sequence Diagram variables */\n\n this.personBorder = this.personBorder || this.primaryBorderColor;\n this.personBkg = this.personBkg || this.mainBkg;\n\n /* state colors */\n this.transitionColor = this.transitionColor || this.lineColor;\n this.transitionLabelColor = this.transitionLabelColor || this.textColor;\n /* The color of the text tables of the states*/\n this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;\n\n this.stateBkg = this.stateBkg || this.mainBkg;\n this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;\n this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;\n this.altBackground = this.altBackground || this.tertiaryColor;\n this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;\n this.compositeBorder = this.compositeBorder || this.nodeBorder;\n this.innerEndBackground = this.nodeBorder;\n this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;\n this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;\n this.transitionColor = this.transitionColor || this.lineColor;\n this.specialStateColor = this.lineColor;\n\n /* class */\n this.classText = this.classText || this.textColor;\n\n /* user-journey */\n this.fillType0 = this.fillType0 || this.primaryColor;\n this.fillType1 = this.fillType1 || this.secondaryColor;\n this.fillType2 = this.fillType2 || adjust(this.primaryColor, { h: 64 });\n this.fillType3 = this.fillType3 || adjust(this.secondaryColor, { h: 64 });\n this.fillType4 = this.fillType4 || adjust(this.primaryColor, { h: -64 });\n this.fillType5 = this.fillType5 || adjust(this.secondaryColor, { h: -64 });\n this.fillType6 = this.fillType6 || adjust(this.primaryColor, { h: 128 });\n this.fillType7 = this.fillType7 || adjust(this.secondaryColor, { h: 128 });\n\n /* pie */\n this.pie1 = this.pie1 || this.primaryColor;\n this.pie2 = this.pie2 || this.secondaryColor;\n this.pie3 = this.pie3 || this.tertiaryColor;\n this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -10 });\n this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -10 });\n this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -10 });\n this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -10 });\n this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 });\n this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 });\n this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -20 });\n this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -20 });\n this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -10 });\n this.pieTitleTextSize = this.pieTitleTextSize || '25px';\n this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;\n this.pieSectionTextSize = this.pieSectionTextSize || '17px';\n this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;\n this.pieLegendTextSize = this.pieLegendTextSize || '17px';\n this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;\n this.pieStrokeColor = this.pieStrokeColor || 'black';\n this.pieStrokeWidth = this.pieStrokeWidth || '2px';\n this.pieOpacity = this.pieOpacity || '0.7';\n\n /* requirement-diagram */\n this.requirementBackground = this.requirementBackground || this.primaryColor;\n this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;\n this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;\n this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;\n this.relationColor = this.relationColor || this.lineColor;\n this.relationLabelBackground =\n this.relationLabelBackground ||\n (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);\n this.relationLabelColor = this.relationLabelColor || this.actorTextColor;\n\n /* git */\n this.git0 = this.git0 || this.primaryColor;\n this.git1 = this.git1 || this.secondaryColor;\n this.git2 = this.git2 || this.tertiaryColor;\n this.git3 = this.git3 || adjust(this.primaryColor, { h: -30 });\n this.git4 = this.git4 || adjust(this.primaryColor, { h: -60 });\n this.git5 = this.git5 || adjust(this.primaryColor, { h: -90 });\n this.git6 = this.git6 || adjust(this.primaryColor, { h: +60 });\n this.git7 = this.git7 || adjust(this.primaryColor, { h: +120 });\n if (this.darkMode) {\n this.git0 = lighten(this.git0, 25);\n this.git1 = lighten(this.git1, 25);\n this.git2 = lighten(this.git2, 25);\n this.git3 = lighten(this.git3, 25);\n this.git4 = lighten(this.git4, 25);\n this.git5 = lighten(this.git5, 25);\n this.git6 = lighten(this.git6, 25);\n this.git7 = lighten(this.git7, 25);\n } else {\n this.git0 = darken(this.git0, 25);\n this.git1 = darken(this.git1, 25);\n this.git2 = darken(this.git2, 25);\n this.git3 = darken(this.git3, 25);\n this.git4 = darken(this.git4, 25);\n this.git5 = darken(this.git5, 25);\n this.git6 = darken(this.git6, 25);\n this.git7 = darken(this.git7, 25);\n }\n this.gitInv0 = this.gitInv0 || invert(this.git0);\n this.gitInv1 = this.gitInv1 || invert(this.git1);\n this.gitInv2 = this.gitInv2 || invert(this.git2);\n this.gitInv3 = this.gitInv3 || invert(this.git3);\n this.gitInv4 = this.gitInv4 || invert(this.git4);\n this.gitInv5 = this.gitInv5 || invert(this.git5);\n this.gitInv6 = this.gitInv6 || invert(this.git6);\n this.gitInv7 = this.gitInv7 || invert(this.git7);\n this.branchLabelColor =\n this.branchLabelColor || (this.darkMode ? 'black' : this.labelTextColor);\n this.gitBranchLabel0 = this.gitBranchLabel0 || this.branchLabelColor;\n this.gitBranchLabel1 = this.gitBranchLabel1 || this.branchLabelColor;\n this.gitBranchLabel2 = this.gitBranchLabel2 || this.branchLabelColor;\n this.gitBranchLabel3 = this.gitBranchLabel3 || this.branchLabelColor;\n this.gitBranchLabel4 = this.gitBranchLabel4 || this.branchLabelColor;\n this.gitBranchLabel5 = this.gitBranchLabel5 || this.branchLabelColor;\n this.gitBranchLabel6 = this.gitBranchLabel6 || this.branchLabelColor;\n this.gitBranchLabel7 = this.gitBranchLabel7 || this.branchLabelColor;\n\n this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;\n this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;\n this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;\n this.tagLabelFontSize = this.tagLabelFontSize || '10px';\n this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;\n this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;\n this.commitLabelFontSize = this.commitLabelFontSize || '10px';\n }\n calculate(overrides) {\n if (typeof overrides !== 'object') {\n // Calculate colors form base colors\n this.updateColors();\n return;\n }\n\n const keys = Object.keys(overrides);\n\n // Copy values from overrides, this is mainly for base colors\n keys.forEach((k) => {\n this[k] = overrides[k];\n });\n\n // Calculate colors form base colors\n this.updateColors();\n // Copy values from overrides again in case of an override of derived value\n keys.forEach((k) => {\n this[k] = overrides[k];\n });\n }\n}\n\nexport const getThemeVariables = (userOverrides) => {\n const theme = new Theme();\n theme.calculate(userOverrides);\n return theme;\n};\n","import { invert, lighten, darken, rgba, adjust } from 'khroma';\nimport { mkBorder } from './theme-helpers';\nclass Theme {\n constructor() {\n this.background = '#333';\n this.primaryColor = '#1f2020';\n this.secondaryColor = lighten(this.primaryColor, 16);\n\n this.tertiaryColor = adjust(this.primaryColor, { h: -160 });\n this.primaryBorderColor = invert(this.background);\n this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);\n this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);\n this.primaryTextColor = invert(this.primaryColor);\n this.secondaryTextColor = invert(this.secondaryColor);\n this.tertiaryTextColor = invert(this.tertiaryColor);\n this.lineColor = invert(this.background);\n this.textColor = invert(this.background);\n\n this.mainBkg = '#1f2020';\n this.secondBkg = 'calculated';\n this.mainContrastColor = 'lightgrey';\n this.darkTextColor = lighten(invert('#323D47'), 10);\n this.lineColor = 'calculated';\n this.border1 = '#81B1DB';\n this.border2 = rgba(255, 255, 255, 0.25);\n this.arrowheadColor = 'calculated';\n this.fontFamily = '\"trebuchet ms\", verdana, arial, sans-serif';\n this.fontSize = '16px';\n this.labelBackground = '#181818';\n this.textColor = '#ccc';\n /* Flowchart variables */\n\n this.nodeBkg = 'calculated';\n this.nodeBorder = 'calculated';\n this.clusterBkg = 'calculated';\n this.clusterBorder = 'calculated';\n this.defaultLinkColor = 'calculated';\n this.titleColor = '#F9FFFE';\n this.edgeLabelBackground = 'calculated';\n\n /* Sequence Diagram variables */\n\n this.actorBorder = 'calculated';\n this.actorBkg = 'calculated';\n this.actorTextColor = 'calculated';\n this.actorLineColor = 'calculated';\n this.signalColor = 'calculated';\n this.signalTextColor = 'calculated';\n this.labelBoxBkgColor = 'calculated';\n this.labelBoxBorderColor = 'calculated';\n this.labelTextColor = 'calculated';\n this.loopTextColor = 'calculated';\n this.noteBorderColor = 'calculated';\n this.noteBkgColor = '#fff5ad';\n this.noteTextColor = 'calculated';\n this.activationBorderColor = 'calculated';\n this.activationBkgColor = 'calculated';\n this.sequenceNumberColor = 'black';\n\n /* Gantt chart variables */\n\n this.sectionBkgColor = darken('#EAE8D9', 30);\n this.altSectionBkgColor = 'calculated';\n this.sectionBkgColor2 = '#EAE8D9';\n this.taskBorderColor = rgba(255, 255, 255, 70);\n this.taskBkgColor = 'calculated';\n this.taskTextColor = 'calculated';\n this.taskTextLightColor = 'calculated';\n this.taskTextOutsideColor = 'calculated';\n this.taskTextClickableColor = '#003163';\n this.activeTaskBorderColor = rgba(255, 255, 255, 50);\n this.activeTaskBkgColor = '#81B1DB';\n this.gridColor = 'calculated';\n this.doneTaskBkgColor = 'calculated';\n this.doneTaskBorderColor = 'grey';\n this.critBorderColor = '#E83737';\n this.critBkgColor = '#E83737';\n this.taskTextDarkColor = 'calculated';\n this.todayLineColor = '#DB5757';\n\n /* C4 Context Diagram variables */\n\n this.personBorder = 'calculated';\n this.personBkg = 'calculated';\n\n /* state colors */\n this.labelColor = 'calculated';\n\n this.errorBkgColor = '#a44141';\n this.errorTextColor = '#ddd';\n }\n updateColors() {\n this.secondBkg = lighten(this.mainBkg, 16);\n this.lineColor = this.mainContrastColor;\n this.arrowheadColor = this.mainContrastColor;\n /* Flowchart variables */\n\n this.nodeBkg = this.mainBkg;\n this.nodeBorder = this.border1;\n this.clusterBkg = this.secondBkg;\n this.clusterBorder = this.border2;\n this.defaultLinkColor = this.lineColor;\n this.edgeLabelBackground = lighten(this.labelBackground, 25);\n\n /* Sequence Diagram variables */\n\n this.actorBorder = this.border1;\n this.actorBkg = this.mainBkg;\n this.actorTextColor = this.mainContrastColor;\n this.actorLineColor = this.mainContrastColor;\n this.signalColor = this.mainContrastColor;\n this.signalTextColor = this.mainContrastColor;\n this.labelBoxBkgColor = this.actorBkg;\n this.labelBoxBorderColor = this.actorBorder;\n this.labelTextColor = this.mainContrastColor;\n this.loopTextColor = this.mainContrastColor;\n this.noteBorderColor = this.secondaryBorderColor;\n this.noteBkgColor = this.secondBkg;\n this.noteTextColor = this.secondaryTextColor;\n this.activationBorderColor = this.border1;\n this.activationBkgColor = this.secondBkg;\n\n /* Gantt chart variables */\n\n this.altSectionBkgColor = this.background;\n this.taskBkgColor = lighten(this.mainBkg, 23);\n this.taskTextColor = this.darkTextColor;\n this.taskTextLightColor = this.mainContrastColor;\n this.taskTextOutsideColor = this.taskTextLightColor;\n this.gridColor = this.mainContrastColor;\n this.doneTaskBkgColor = this.mainContrastColor;\n this.taskTextDarkColor = this.darkTextColor;\n\n /* state colors */\n this.transitionColor = this.transitionColor || this.lineColor;\n this.transitionLabelColor = this.transitionLabelColor || this.textColor;\n this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;\n this.stateBkg = this.stateBkg || this.mainBkg;\n this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;\n this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;\n this.altBackground = this.altBackground || '#555';\n this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;\n this.compositeBorder = this.compositeBorder || this.nodeBorder;\n this.innerEndBackground = this.primaryBorderColor;\n this.specialStateColor = '#f4f4f4'; // this.lineColor;\n\n this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;\n this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;\n\n this.fillType0 = this.primaryColor;\n this.fillType1 = this.secondaryColor;\n this.fillType2 = adjust(this.primaryColor, { h: 64 });\n this.fillType3 = adjust(this.secondaryColor, { h: 64 });\n this.fillType4 = adjust(this.primaryColor, { h: -64 });\n this.fillType5 = adjust(this.secondaryColor, { h: -64 });\n this.fillType6 = adjust(this.primaryColor, { h: 128 });\n this.fillType7 = adjust(this.secondaryColor, { h: 128 });\n\n /* pie */\n this.pie1 = this.pie1 || '#0b0000';\n this.pie2 = this.pie2 || '#4d1037';\n this.pie3 = this.pie3 || '#3f5258';\n this.pie4 = this.pie4 || '#4f2f1b';\n this.pie5 = this.pie5 || '#6e0a0a';\n this.pie6 = this.pie6 || '#3b0048';\n this.pie7 = this.pie7 || '#995a01';\n this.pie8 = this.pie8 || '#154706';\n this.pie9 = this.pie9 || '#161722';\n this.pie10 = this.pie10 || '#00296f';\n this.pie11 = this.pie11 || '#01629c';\n this.pie12 = this.pie12 || '#010029';\n this.pieTitleTextSize = this.pieTitleTextSize || '25px';\n this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;\n this.pieSectionTextSize = this.pieSectionTextSize || '17px';\n this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;\n this.pieLegendTextSize = this.pieLegendTextSize || '17px';\n this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;\n this.pieStrokeColor = this.pieStrokeColor || 'black';\n this.pieStrokeWidth = this.pieStrokeWidth || '2px';\n this.pieOpacity = this.pieOpacity || '0.7';\n\n /* class */\n this.classText = this.primaryTextColor;\n\n /* requirement-diagram */\n this.requirementBackground = this.requirementBackground || this.primaryColor;\n this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;\n this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;\n this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;\n this.relationColor = this.relationColor || this.lineColor;\n this.relationLabelBackground =\n this.relationLabelBackground ||\n (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);\n this.relationLabelColor = this.relationLabelColor || this.actorTextColor;\n\n /* git */\n this.git0 = lighten(this.secondaryColor, 20);\n this.git1 = lighten(this.pie2 || this.secondaryColor, 20);\n this.git2 = lighten(this.pie3 || this.tertiaryColor, 20);\n this.git3 = lighten(this.pie4 || adjust(this.primaryColor, { h: -30 }), 20);\n this.git4 = lighten(this.pie5 || adjust(this.primaryColor, { h: -60 }), 20);\n this.git5 = lighten(this.pie6 || adjust(this.primaryColor, { h: -90 }), 10);\n this.git6 = lighten(this.pie7 || adjust(this.primaryColor, { h: +60 }), 10);\n this.git7 = lighten(this.pie8 || adjust(this.primaryColor, { h: +120 }), 20);\n this.gitInv0 = this.gitInv0 || invert(this.git0);\n this.gitInv1 = this.gitInv1 || invert(this.git1);\n this.gitInv2 = this.gitInv2 || invert(this.git2);\n this.gitInv3 = this.gitInv3 || invert(this.git3);\n this.gitInv4 = this.gitInv4 || invert(this.git4);\n this.gitInv5 = this.gitInv5 || invert(this.git5);\n this.gitInv6 = this.gitInv6 || invert(this.git6);\n this.gitInv7 = this.gitInv7 || invert(this.git7);\n\n this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;\n this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;\n this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;\n this.tagLabelFontSize = this.tagLabelFontSize || '10px';\n this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;\n this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;\n this.commitLabelFontSize = this.commitLabelFontSize || '10px';\n }\n calculate(overrides) {\n if (typeof overrides !== 'object') {\n // Calculate colors form base colors\n this.updateColors();\n return;\n }\n\n const keys = Object.keys(overrides);\n\n // Copy values from overrides, this is mainly for base colors\n keys.forEach((k) => {\n this[k] = overrides[k];\n });\n\n // Calculate colors form base colors\n this.updateColors();\n // Copy values from overrides again in case of an override of derived value\n keys.forEach((k) => {\n this[k] = overrides[k];\n });\n }\n}\n\nexport const getThemeVariables = (userOverrides) => {\n const theme = new Theme();\n theme.calculate(userOverrides);\n return theme;\n};\n","import { invert, lighten, rgba, adjust, darken } from 'khroma';\nimport { mkBorder } from './theme-helpers';\n\nclass Theme {\n constructor() {\n /* Base variables */\n this.background = '#f4f4f4';\n this.primaryColor = '#ECECFF';\n\n this.secondaryColor = adjust(this.primaryColor, { h: 120 });\n this.secondaryColor = '#ffffde';\n this.tertiaryColor = adjust(this.primaryColor, { h: -160 });\n this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);\n this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);\n this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);\n // this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);\n\n this.primaryTextColor = invert(this.primaryColor);\n this.secondaryTextColor = invert(this.secondaryColor);\n this.tertiaryTextColor = invert(this.tertiaryColor);\n this.lineColor = invert(this.background);\n this.textColor = invert(this.background);\n\n this.background = 'white';\n this.mainBkg = '#ECECFF';\n this.secondBkg = '#ffffde';\n this.lineColor = '#333333';\n this.border1 = '#9370DB';\n this.border2 = '#aaaa33';\n this.arrowheadColor = '#333333';\n this.fontFamily = '\"trebuchet ms\", verdana, arial, sans-serif';\n this.fontSize = '16px';\n this.labelBackground = '#e8e8e8';\n this.textColor = '#333';\n\n /* Flowchart variables */\n\n this.nodeBkg = 'calculated';\n this.nodeBorder = 'calculated';\n this.clusterBkg = 'calculated';\n this.clusterBorder = 'calculated';\n this.defaultLinkColor = 'calculated';\n this.titleColor = 'calculated';\n this.edgeLabelBackground = 'calculated';\n\n /* Sequence Diagram variables */\n\n this.actorBorder = 'calculated';\n this.actorBkg = 'calculated';\n this.actorTextColor = 'black';\n this.actorLineColor = 'grey';\n this.signalColor = 'calculated';\n this.signalTextColor = 'calculated';\n this.labelBoxBkgColor = 'calculated';\n this.labelBoxBorderColor = 'calculated';\n this.labelTextColor = 'calculated';\n this.loopTextColor = 'calculated';\n this.noteBorderColor = 'calculated';\n this.noteBkgColor = '#fff5ad';\n this.noteTextColor = 'calculated';\n this.activationBorderColor = '#666';\n this.activationBkgColor = '#f4f4f4';\n this.sequenceNumberColor = 'white';\n\n /* Gantt chart variables */\n\n this.sectionBkgColor = 'calculated';\n this.altSectionBkgColor = 'calculated';\n this.sectionBkgColor2 = 'calculated';\n this.excludeBkgColor = '#eeeeee';\n this.taskBorderColor = 'calculated';\n this.taskBkgColor = 'calculated';\n this.taskTextLightColor = 'calculated';\n this.taskTextColor = this.taskTextLightColor;\n this.taskTextDarkColor = 'calculated';\n this.taskTextOutsideColor = this.taskTextDarkColor;\n this.taskTextClickableColor = 'calculated';\n this.activeTaskBorderColor = 'calculated';\n this.activeTaskBkgColor = 'calculated';\n this.gridColor = 'calculated';\n this.doneTaskBkgColor = 'calculated';\n this.doneTaskBorderColor = 'calculated';\n this.critBorderColor = 'calculated';\n this.critBkgColor = 'calculated';\n this.todayLineColor = 'calculated';\n\n this.sectionBkgColor = rgba(102, 102, 255, 0.49);\n this.altSectionBkgColor = 'white';\n this.sectionBkgColor2 = '#fff400';\n this.taskBorderColor = '#534fbc';\n this.taskBkgColor = '#8a90dd';\n this.taskTextLightColor = 'white';\n this.taskTextColor = 'calculated';\n this.taskTextDarkColor = 'black';\n this.taskTextOutsideColor = 'calculated';\n this.taskTextClickableColor = '#003163';\n this.activeTaskBorderColor = '#534fbc';\n this.activeTaskBkgColor = '#bfc7ff';\n this.gridColor = 'lightgrey';\n this.doneTaskBkgColor = 'lightgrey';\n this.doneTaskBorderColor = 'grey';\n this.critBorderColor = '#ff8888';\n this.critBkgColor = 'red';\n this.todayLineColor = 'red';\n\n /* C4 Context Diagram variables */\n\n this.personBorder = 'calculated';\n this.personBkg = 'calculated';\n\n /* state colors */\n this.labelColor = 'black';\n this.errorBkgColor = '#552222';\n this.errorTextColor = '#552222';\n this.updateColors();\n }\n updateColors() {\n /* Flowchart variables */\n\n this.nodeBkg = this.mainBkg;\n this.nodeBorder = this.border1; // border 1\n this.clusterBkg = this.secondBkg;\n this.clusterBorder = this.border2;\n this.defaultLinkColor = this.lineColor;\n this.titleColor = this.textColor;\n this.edgeLabelBackground = this.labelBackground;\n\n /* Sequence Diagram variables */\n\n // this.actorBorder = lighten(this.border1, 0.5);\n this.actorBorder = lighten(this.border1, 23);\n this.actorBkg = this.mainBkg;\n this.labelBoxBkgColor = this.actorBkg;\n this.signalColor = this.textColor;\n this.signalTextColor = this.textColor;\n this.labelBoxBorderColor = this.actorBorder;\n this.labelTextColor = this.actorTextColor;\n this.loopTextColor = this.actorTextColor;\n this.noteBorderColor = this.border2;\n this.noteTextColor = this.actorTextColor;\n\n /* Gantt chart variables */\n\n this.taskTextColor = this.taskTextLightColor;\n this.taskTextOutsideColor = this.taskTextDarkColor;\n\n /* state colors */\n this.transitionColor = this.transitionColor || this.lineColor;\n this.transitionLabelColor = this.transitionLabelColor || this.textColor;\n this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;\n\n this.stateBkg = this.stateBkg || this.mainBkg;\n this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;\n this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;\n this.altBackground = this.altBackground || '#f0f0f0';\n this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;\n this.compositeBorder = this.compositeBorder || this.nodeBorder;\n this.innerEndBackground = this.nodeBorder;\n this.specialStateColor = this.lineColor;\n\n this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;\n this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;\n this.transitionColor = this.transitionColor || this.lineColor;\n /* class */\n this.classText = this.primaryTextColor;\n /* journey */\n this.fillType0 = this.primaryColor;\n this.fillType1 = this.secondaryColor;\n this.fillType2 = adjust(this.primaryColor, { h: 64 });\n this.fillType3 = adjust(this.secondaryColor, { h: 64 });\n this.fillType4 = adjust(this.primaryColor, { h: -64 });\n this.fillType5 = adjust(this.secondaryColor, { h: -64 });\n this.fillType6 = adjust(this.primaryColor, { h: 128 });\n this.fillType7 = adjust(this.secondaryColor, { h: 128 });\n\n /* pie */\n this.pie1 = this.pie1 || this.primaryColor;\n this.pie2 = this.pie2 || this.secondaryColor;\n this.pie3 = this.pie3 || adjust(this.tertiaryColor, { l: -40 });\n this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -10 });\n this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -30 });\n this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -20 });\n this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -20 });\n this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -40 });\n this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: -40 });\n this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -40 });\n this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -90, l: -40 });\n this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -30 });\n this.pieTitleTextSize = this.pieTitleTextSize || '25px';\n this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;\n this.pieSectionTextSize = this.pieSectionTextSize || '17px';\n this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;\n this.pieLegendTextSize = this.pieLegendTextSize || '17px';\n this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;\n this.pieStrokeColor = this.pieStrokeColor || 'black';\n this.pieStrokeWidth = this.pieStrokeWidth || '2px';\n this.pieOpacity = this.pieOpacity || '0.7';\n\n /* requirement-diagram */\n this.requirementBackground = this.requirementBackground || this.primaryColor;\n this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;\n this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;\n this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;\n this.relationColor = this.relationColor || this.lineColor;\n this.relationLabelBackground = this.relationLabelBackground || this.labelBackground;\n this.relationLabelColor = this.relationLabelColor || this.actorTextColor;\n\n /* git */\n this.git0 = this.git0 || this.primaryColor;\n this.git1 = this.git1 || this.secondaryColor;\n this.git2 = this.git2 || this.tertiaryColor;\n this.git3 = this.git3 || adjust(this.primaryColor, { h: -30 });\n this.git4 = this.git4 || adjust(this.primaryColor, { h: -60 });\n this.git5 = this.git5 || adjust(this.primaryColor, { h: -90 });\n this.git6 = this.git6 || adjust(this.primaryColor, { h: +60 });\n this.git7 = this.git7 || adjust(this.primaryColor, { h: +120 });\n if (this.darkMode) {\n this.git0 = lighten(this.git0, 25);\n this.git1 = lighten(this.git1, 25);\n this.git2 = lighten(this.git2, 25);\n this.git3 = lighten(this.git3, 25);\n this.git4 = lighten(this.git4, 25);\n this.git5 = lighten(this.git5, 25);\n this.git6 = lighten(this.git6, 25);\n this.git7 = lighten(this.git7, 25);\n } else {\n this.git0 = darken(this.git0, 25);\n this.git1 = darken(this.git1, 25);\n this.git2 = darken(this.git2, 25);\n this.git3 = darken(this.git3, 25);\n this.git4 = darken(this.git4, 25);\n this.git5 = darken(this.git5, 25);\n this.git6 = darken(this.git6, 25);\n this.git7 = darken(this.git7, 25);\n }\n this.gitInv0 = this.gitInv0 || darken(invert(this.git0), 25);\n this.gitInv1 = this.gitInv1 || invert(this.git1);\n this.gitInv2 = this.gitInv2 || invert(this.git2);\n this.gitInv3 = this.gitInv3 || invert(this.git3);\n this.gitInv4 = this.gitInv4 || invert(this.git4);\n this.gitInv5 = this.gitInv5 || invert(this.git5);\n this.gitInv6 = this.gitInv6 || invert(this.git6);\n this.gitInv7 = this.gitInv7 || invert(this.git7);\n this.gitBranchLabel0 = this.gitBranchLabel0 || invert(this.labelTextColor);\n this.gitBranchLabel1 = this.gitBranchLabel1 || this.labelTextColor;\n this.gitBranchLabel2 = this.gitBranchLabel2 || this.labelTextColor;\n this.gitBranchLabel3 = this.gitBranchLabel3 || invert(this.labelTextColor);\n this.gitBranchLabel4 = this.gitBranchLabel4 || this.labelTextColor;\n this.gitBranchLabel5 = this.gitBranchLabel5 || this.labelTextColor;\n this.gitBranchLabel6 = this.gitBranchLabel6 || this.labelTextColor;\n this.gitBranchLabel7 = this.gitBranchLabel7 || this.labelTextColor;\n\n this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;\n this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;\n this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;\n this.tagLabelFontSize = this.tagLabelFontSize || '10px';\n this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;\n this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;\n this.commitLabelFontSize = this.commitLabelFontSize || '10px';\n }\n calculate(overrides) {\n if (typeof overrides !== 'object') {\n // Calculate colors form base colors\n this.updateColors();\n return;\n }\n\n const keys = Object.keys(overrides);\n\n // Copy values from overrides, this is mainly for base colors\n keys.forEach((k) => {\n this[k] = overrides[k];\n });\n\n // Calculate colors form base colors\n this.updateColors();\n // Copy values from overrides again in case of an override of derived value\n keys.forEach((k) => {\n this[k] = overrides[k];\n });\n }\n}\n\nexport const getThemeVariables = (userOverrides) => {\n const theme = new Theme();\n theme.calculate(userOverrides);\n return theme;\n};\n","import { darken, lighten, adjust, invert } from 'khroma';\nimport { mkBorder } from './theme-helpers';\nclass Theme {\n constructor() {\n /* Base vales */\n this.background = '#f4f4f4';\n this.primaryColor = '#cde498';\n this.secondaryColor = '#cdffb2';\n this.background = 'white';\n this.mainBkg = '#cde498';\n this.secondBkg = '#cdffb2';\n this.lineColor = 'green';\n this.border1 = '#13540c';\n this.border2 = '#6eaa49';\n this.arrowheadColor = 'green';\n this.fontFamily = '\"trebuchet ms\", verdana, arial, sans-serif';\n this.fontSize = '16px';\n\n this.tertiaryColor = lighten('#cde498', 10);\n this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);\n this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);\n this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);\n this.primaryTextColor = invert(this.primaryColor);\n this.secondaryTextColor = invert(this.secondaryColor);\n this.tertiaryTextColor = invert(this.primaryColor);\n this.lineColor = invert(this.background);\n this.textColor = invert(this.background);\n\n /* Flowchart variables */\n this.nodeBkg = 'calculated';\n this.nodeBorder = 'calculated';\n this.clusterBkg = 'calculated';\n this.clusterBorder = 'calculated';\n this.defaultLinkColor = 'calculated';\n this.titleColor = '#333';\n this.edgeLabelBackground = '#e8e8e8';\n\n /* Sequence Diagram variables */\n\n this.actorBorder = 'calculated';\n this.actorBkg = 'calculated';\n this.actorTextColor = 'black';\n this.actorLineColor = 'grey';\n this.signalColor = '#333';\n this.signalTextColor = '#333';\n this.labelBoxBkgColor = 'calculated';\n this.labelBoxBorderColor = '#326932';\n this.labelTextColor = 'calculated';\n this.loopTextColor = 'calculated';\n this.noteBorderColor = 'calculated';\n this.noteBkgColor = '#fff5ad';\n this.noteTextColor = 'calculated';\n this.activationBorderColor = '#666';\n this.activationBkgColor = '#f4f4f4';\n this.sequenceNumberColor = 'white';\n\n /* Gantt chart variables */\n\n this.sectionBkgColor = '#6eaa49';\n this.altSectionBkgColor = 'white';\n this.sectionBkgColor2 = '#6eaa49';\n this.excludeBkgColor = '#eeeeee';\n this.taskBorderColor = 'calculated';\n this.taskBkgColor = '#487e3a';\n this.taskTextLightColor = 'white';\n this.taskTextColor = 'calculated';\n this.taskTextDarkColor = 'black';\n this.taskTextOutsideColor = 'calculated';\n this.taskTextClickableColor = '#003163';\n this.activeTaskBorderColor = 'calculated';\n this.activeTaskBkgColor = 'calculated';\n this.gridColor = 'lightgrey';\n this.doneTaskBkgColor = 'lightgrey';\n this.doneTaskBorderColor = 'grey';\n this.critBorderColor = '#ff8888';\n this.critBkgColor = 'red';\n this.todayLineColor = 'red';\n\n /* C4 Context Diagram variables */\n\n this.personBorder = 'calculated';\n this.personBkg = 'calculated';\n\n /* state colors */\n this.labelColor = 'black';\n\n this.errorBkgColor = '#552222';\n this.errorTextColor = '#552222';\n }\n updateColors() {\n /* Flowchart variables */\n\n this.nodeBkg = this.mainBkg;\n this.nodeBorder = this.border1;\n this.clusterBkg = this.secondBkg;\n this.clusterBorder = this.border2;\n this.defaultLinkColor = this.lineColor;\n\n /* Sequence Diagram variables */\n\n this.actorBorder = darken(this.mainBkg, 20);\n this.actorBkg = this.mainBkg;\n this.labelBoxBkgColor = this.actorBkg;\n this.labelTextColor = this.actorTextColor;\n this.loopTextColor = this.actorTextColor;\n this.noteBorderColor = this.border2;\n this.noteTextColor = this.actorTextColor;\n\n /* Gantt chart variables */\n\n this.taskBorderColor = this.border1;\n this.taskTextColor = this.taskTextLightColor;\n this.taskTextOutsideColor = this.taskTextDarkColor;\n this.activeTaskBorderColor = this.taskBorderColor;\n this.activeTaskBkgColor = this.mainBkg;\n\n /* state colors */\n this.transitionColor = this.transitionColor || this.lineColor;\n this.transitionLabelColor = this.transitionLabelColor || this.textColor;\n this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;\n\n this.stateBkg = this.stateBkg || this.mainBkg;\n this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;\n this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;\n this.altBackground = this.altBackground || '#f0f0f0';\n this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;\n this.compositeBorder = this.compositeBorder || this.nodeBorder;\n this.innerEndBackground = this.primaryBorderColor;\n this.specialStateColor = this.lineColor;\n\n this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;\n this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;\n this.transitionColor = this.transitionColor || this.lineColor;\n /* class */\n this.classText = this.primaryTextColor;\n /* journey */\n this.fillType0 = this.primaryColor;\n this.fillType1 = this.secondaryColor;\n this.fillType2 = adjust(this.primaryColor, { h: 64 });\n this.fillType3 = adjust(this.secondaryColor, { h: 64 });\n this.fillType4 = adjust(this.primaryColor, { h: -64 });\n this.fillType5 = adjust(this.secondaryColor, { h: -64 });\n this.fillType6 = adjust(this.primaryColor, { h: 128 });\n this.fillType7 = adjust(this.secondaryColor, { h: 128 });\n\n /* pie */\n this.pie1 = this.pie1 || this.primaryColor;\n this.pie2 = this.pie2 || this.secondaryColor;\n this.pie3 = this.pie3 || this.tertiaryColor;\n this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -30 });\n this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -30 });\n this.pie6 = this.pie6 || adjust(this.tertiaryColor, { h: +40, l: -40 });\n this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -10 });\n this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 });\n this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 });\n this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -50 });\n this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -50 });\n this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -50 });\n this.pieTitleTextSize = this.pieTitleTextSize || '25px';\n this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;\n this.pieSectionTextSize = this.pieSectionTextSize || '17px';\n this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;\n this.pieLegendTextSize = this.pieLegendTextSize || '17px';\n this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;\n this.pieStrokeColor = this.pieStrokeColor || 'black';\n this.pieStrokeWidth = this.pieStrokeWidth || '2px';\n this.pieOpacity = this.pieOpacity || '0.7';\n\n /* requirement-diagram */\n this.requirementBackground = this.requirementBackground || this.primaryColor;\n this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;\n this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;\n this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;\n this.relationColor = this.relationColor || this.lineColor;\n this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground;\n this.relationLabelColor = this.relationLabelColor || this.actorTextColor;\n\n /* git */\n this.git0 = this.git0 || this.primaryColor;\n this.git1 = this.git1 || this.secondaryColor;\n this.git2 = this.git2 || this.tertiaryColor;\n this.git3 = this.git3 || adjust(this.primaryColor, { h: -30 });\n this.git4 = this.git4 || adjust(this.primaryColor, { h: -60 });\n this.git5 = this.git5 || adjust(this.primaryColor, { h: -90 });\n this.git6 = this.git6 || adjust(this.primaryColor, { h: +60 });\n this.git7 = this.git7 || adjust(this.primaryColor, { h: +120 });\n if (this.darkMode) {\n this.git0 = lighten(this.git0, 25);\n this.git1 = lighten(this.git1, 25);\n this.git2 = lighten(this.git2, 25);\n this.git3 = lighten(this.git3, 25);\n this.git4 = lighten(this.git4, 25);\n this.git5 = lighten(this.git5, 25);\n this.git6 = lighten(this.git6, 25);\n this.git7 = lighten(this.git7, 25);\n } else {\n this.git0 = darken(this.git0, 25);\n this.git1 = darken(this.git1, 25);\n this.git2 = darken(this.git2, 25);\n this.git3 = darken(this.git3, 25);\n this.git4 = darken(this.git4, 25);\n this.git5 = darken(this.git5, 25);\n this.git6 = darken(this.git6, 25);\n this.git7 = darken(this.git7, 25);\n }\n this.gitInv0 = this.gitInv0 || invert(this.git0);\n this.gitInv1 = this.gitInv1 || invert(this.git1);\n this.gitInv2 = this.gitInv2 || invert(this.git2);\n this.gitInv3 = this.gitInv3 || invert(this.git3);\n this.gitInv4 = this.gitInv4 || invert(this.git4);\n this.gitInv5 = this.gitInv5 || invert(this.git5);\n this.gitInv6 = this.gitInv6 || invert(this.git6);\n this.gitInv7 = this.gitInv7 || invert(this.git7);\n\n this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;\n this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;\n this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;\n this.tagLabelFontSize = this.tagLabelFontSize || '10px';\n this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;\n this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;\n this.commitLabelFontSize = this.commitLabelFontSize || '10px';\n }\n calculate(overrides) {\n if (typeof overrides !== 'object') {\n // Calculate colors form base colors\n this.updateColors();\n return;\n }\n\n const keys = Object.keys(overrides);\n\n // Copy values from overrides, this is mainly for base colors\n keys.forEach((k) => {\n this[k] = overrides[k];\n });\n\n // Calculate colors form base colors\n this.updateColors();\n // Copy values from overrides again in case of an override of derived value\n keys.forEach((k) => {\n this[k] = overrides[k];\n });\n }\n}\n\nexport const getThemeVariables = (userOverrides) => {\n const theme = new Theme();\n theme.calculate(userOverrides);\n return theme;\n};\n","import { adjust } from 'khroma';\r\n\r\nexport const mkBorder = (col, darkMode) =>\r\n darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });\r\n","import { invert, darken, lighten, adjust } from 'khroma';\nimport { mkBorder } from './theme-helpers';\n\n// const Color = require ( 'khroma/dist/color' ).default\n// Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => \"#EAF2FB\"\n\nclass Theme {\n constructor() {\n this.primaryColor = '#eee';\n this.contrast = '#707070';\n this.secondaryColor = lighten(this.contrast, 55);\n this.background = '#ffffff';\n\n // this.secondaryColor = adjust(this.primaryColor, { h: 120 });\n this.tertiaryColor = adjust(this.primaryColor, { h: -160 });\n this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);\n this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);\n this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);\n // this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);\n\n this.primaryTextColor = invert(this.primaryColor);\n this.secondaryTextColor = invert(this.secondaryColor);\n this.tertiaryTextColor = invert(this.tertiaryColor);\n this.lineColor = invert(this.background);\n this.textColor = invert(this.background);\n\n // this.altBackground = lighten(this.contrast, 55);\n this.mainBkg = '#eee';\n this.secondBkg = 'calculated';\n this.lineColor = '#666';\n this.border1 = '#999';\n this.border2 = 'calculated';\n this.note = '#ffa';\n this.text = '#333';\n this.critical = '#d42';\n this.done = '#bbb';\n this.arrowheadColor = '#333333';\n this.fontFamily = '\"trebuchet ms\", verdana, arial, sans-serif';\n this.fontSize = '16px';\n\n /* Flowchart variables */\n\n this.nodeBkg = 'calculated';\n this.nodeBorder = 'calculated';\n this.clusterBkg = 'calculated';\n this.clusterBorder = 'calculated';\n this.defaultLinkColor = 'calculated';\n this.titleColor = 'calculated';\n this.edgeLabelBackground = 'white';\n\n /* Sequence Diagram variables */\n\n this.actorBorder = 'calculated';\n this.actorBkg = 'calculated';\n this.actorTextColor = 'calculated';\n this.actorLineColor = 'calculated';\n this.signalColor = 'calculated';\n this.signalTextColor = 'calculated';\n this.labelBoxBkgColor = 'calculated';\n this.labelBoxBorderColor = 'calculated';\n this.labelTextColor = 'calculated';\n this.loopTextColor = 'calculated';\n this.noteBorderColor = 'calculated';\n this.noteBkgColor = 'calculated';\n this.noteTextColor = 'calculated';\n this.activationBorderColor = '#666';\n this.activationBkgColor = '#f4f4f4';\n this.sequenceNumberColor = 'white';\n\n /* Gantt chart variables */\n\n this.sectionBkgColor = 'calculated';\n this.altSectionBkgColor = 'white';\n this.sectionBkgColor2 = 'calculated';\n this.excludeBkgColor = '#eeeeee';\n this.taskBorderColor = 'calculated';\n this.taskBkgColor = 'calculated';\n this.taskTextLightColor = 'white';\n this.taskTextColor = 'calculated';\n this.taskTextDarkColor = 'calculated';\n this.taskTextOutsideColor = 'calculated';\n this.taskTextClickableColor = '#003163';\n this.activeTaskBorderColor = 'calculated';\n this.activeTaskBkgColor = 'calculated';\n this.gridColor = 'calculated';\n this.doneTaskBkgColor = 'calculated';\n this.doneTaskBorderColor = 'calculated';\n this.critBkgColor = 'calculated';\n this.critBorderColor = 'calculated';\n this.todayLineColor = 'calculated';\n\n /* C4 Context Diagram variables */\n\n this.personBorder = 'calculated';\n this.personBkg = 'calculated';\n\n /* state colors */\n this.labelColor = 'black';\n\n this.errorBkgColor = '#552222';\n this.errorTextColor = '#552222';\n }\n updateColors() {\n this.secondBkg = lighten(this.contrast, 55);\n this.border2 = this.contrast;\n\n /* Flowchart variables */\n\n this.nodeBkg = this.mainBkg;\n this.nodeBorder = this.border1;\n this.clusterBkg = this.secondBkg;\n this.clusterBorder = this.border2;\n this.defaultLinkColor = this.lineColor;\n this.titleColor = this.text;\n\n /* Sequence Diagram variables */\n\n this.actorBorder = lighten(this.border1, 23);\n this.actorBkg = this.mainBkg;\n this.actorTextColor = this.text;\n this.actorLineColor = this.lineColor;\n this.signalColor = this.text;\n this.signalTextColor = this.text;\n this.labelBoxBkgColor = this.actorBkg;\n this.labelBoxBorderColor = this.actorBorder;\n this.labelTextColor = this.text;\n this.loopTextColor = this.text;\n this.noteBorderColor = '#999';\n this.noteBkgColor = '#666';\n this.noteTextColor = '#fff';\n\n /* Gantt chart variables */\n\n this.sectionBkgColor = lighten(this.contrast, 30);\n this.sectionBkgColor2 = lighten(this.contrast, 30);\n\n this.taskBorderColor = darken(this.contrast, 10);\n\n this.taskBkgColor = this.contrast;\n this.taskTextColor = this.taskTextLightColor;\n this.taskTextDarkColor = this.text;\n this.taskTextOutsideColor = this.taskTextDarkColor;\n this.activeTaskBorderColor = this.taskBorderColor;\n this.activeTaskBkgColor = this.mainBkg;\n this.gridColor = lighten(this.border1, 30);\n\n this.doneTaskBkgColor = this.done;\n this.doneTaskBorderColor = this.lineColor;\n this.critBkgColor = this.critical;\n this.critBorderColor = darken(this.critBkgColor, 10);\n\n this.todayLineColor = this.critBkgColor;\n\n /* state colors */\n this.transitionColor = this.transitionColor || '#000';\n this.transitionLabelColor = this.transitionLabelColor || this.textColor;\n this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;\n\n this.stateBkg = this.stateBkg || this.mainBkg;\n this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;\n this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;\n this.altBackground = this.altBackground || '#f4f4f4';\n this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;\n this.stateBorder = this.stateBorder || '#000';\n this.innerEndBackground = this.primaryBorderColor;\n this.specialStateColor = '#222';\n\n this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;\n this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;\n\n /* class */\n this.classText = this.primaryTextColor;\n /* journey */\n this.fillType0 = this.primaryColor;\n this.fillType1 = this.secondaryColor;\n this.fillType2 = adjust(this.primaryColor, { h: 64 });\n this.fillType3 = adjust(this.secondaryColor, { h: 64 });\n this.fillType4 = adjust(this.primaryColor, { h: -64 });\n this.fillType5 = adjust(this.secondaryColor, { h: -64 });\n this.fillType6 = adjust(this.primaryColor, { h: 128 });\n this.fillType7 = adjust(this.secondaryColor, { h: 128 });\n\n // /* pie */\n this.pie1 = this.pie1 || '#F4F4F4';\n this.pie2 = this.pie2 || '#555';\n this.pie3 = this.pie3 || '#BBB';\n this.pie4 = this.pie4 || '#777';\n this.pie5 = this.pie5 || '#999';\n this.pie6 = this.pie6 || '#DDD';\n this.pie7 = this.pie7 || '#FFF';\n this.pie8 = this.pie8 || '#DDD';\n this.pie9 = this.pie9 || '#BBB';\n this.pie10 = this.pie10 || '#999';\n this.pie11 = this.pie11 || '#777';\n this.pie12 = this.pie12 || '#555';\n this.pieTitleTextSize = this.pieTitleTextSize || '25px';\n this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;\n this.pieSectionTextSize = this.pieSectionTextSize || '17px';\n this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;\n this.pieLegendTextSize = this.pieLegendTextSize || '17px';\n this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;\n this.pieStrokeColor = this.pieStrokeColor || 'black';\n this.pieStrokeWidth = this.pieStrokeWidth || '2px';\n this.pieOpacity = this.pieOpacity || '0.7';\n\n // this.pie1 = this.pie1 || '#212529';\n // this.pie2 = this.pie2 || '#343A40';\n // this.pie3 = this.pie3 || '#495057';\n // this.pie4 = this.pie4 || '#6C757D';\n // this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -10 });\n // this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -10 });\n // this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -10 });\n // this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 });\n // this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 });\n // this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -20 });\n // this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -20 });\n // this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -10 });\n\n /* requirement-diagram */\n this.requirementBackground = this.requirementBackground || this.primaryColor;\n this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;\n this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;\n this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;\n this.relationColor = this.relationColor || this.lineColor;\n this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground;\n this.relationLabelColor = this.relationLabelColor || this.actorTextColor;\n\n /* git */\n this.git0 = darken(this.pie1, 25) || this.primaryColor;\n this.git1 = this.pie2 || this.secondaryColor;\n this.git2 = this.pie3 || this.tertiaryColor;\n this.git3 = this.pie4 || adjust(this.primaryColor, { h: -30 });\n this.git4 = this.pie5 || adjust(this.primaryColor, { h: -60 });\n this.git5 = this.pie6 || adjust(this.primaryColor, { h: -90 });\n this.git6 = this.pie7 || adjust(this.primaryColor, { h: +60 });\n this.git7 = this.pie8 || adjust(this.primaryColor, { h: +120 });\n\n this.gitInv0 = this.gitInv0 || invert(this.git0);\n this.gitInv1 = this.gitInv1 || invert(this.git1);\n this.gitInv2 = this.gitInv2 || invert(this.git2);\n this.gitInv3 = this.gitInv3 || invert(this.git3);\n this.gitInv4 = this.gitInv4 || invert(this.git4);\n this.gitInv5 = this.gitInv5 || invert(this.git5);\n this.gitInv6 = this.gitInv6 || invert(this.git6);\n this.gitInv7 = this.gitInv7 || invert(this.git7);\n\n this.branchLabelColor = this.branchLabelColor || this.labelTextColor;\n this.gitBranchLabel0 = this.branchLabelColor;\n this.gitBranchLabel1 = 'white';\n this.gitBranchLabel2 = this.branchLabelColor;\n this.gitBranchLabel3 = 'white';\n this.gitBranchLabel4 = this.branchLabelColor;\n this.gitBranchLabel5 = this.branchLabelColor;\n this.gitBranchLabel6 = this.branchLabelColor;\n this.gitBranchLabel7 = this.branchLabelColor;\n\n this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;\n this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;\n this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;\n this.tagLabelFontSize = this.tagLabelFontSize || '10px';\n this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;\n this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;\n this.commitLabelFontSize = this.commitLabelFontSize || '10px';\n }\n calculate(overrides) {\n if (typeof overrides !== 'object') {\n // Calculate colors form base colors\n this.updateColors();\n return;\n }\n\n const keys = Object.keys(overrides);\n\n // Copy values from overrides, this is mainly for base colors\n keys.forEach((k) => {\n this[k] = overrides[k];\n });\n\n // Calculate colors form base colors\n this.updateColors();\n // Copy values from overrides again in case of an override of derived value\n keys.forEach((k) => {\n this[k] = overrides[k];\n });\n }\n}\n\nexport const getThemeVariables = (userOverrides) => {\n const theme = new Theme();\n theme.calculate(userOverrides);\n return theme;\n};\n","import { sanitizeUrl } from '@braintree/sanitize-url';\nimport {\n curveBasis,\n curveBasisClosed,\n curveBasisOpen,\n curveLinear,\n curveLinearClosed,\n curveMonotoneX,\n curveMonotoneY,\n curveNatural,\n curveStep,\n curveStepAfter,\n curveStepBefore,\n select,\n} from 'd3';\nimport common from './diagrams/common/common';\nimport { configKeys } from './defaultConfig';\nimport { log } from './logger';\nimport detectType from './diagram-api/detectType';\nimport assignWithDepth from './assignWithDepth';\n\n// Effectively an enum of the supported curve types, accessible by name\nconst d3CurveTypes = {\n curveBasis: curveBasis,\n curveBasisClosed: curveBasisClosed,\n curveBasisOpen: curveBasisOpen,\n curveLinear: curveLinear,\n curveLinearClosed: curveLinearClosed,\n curveMonotoneX: curveMonotoneX,\n curveMonotoneY: curveMonotoneY,\n curveNatural: curveNatural,\n curveStep: curveStep,\n curveStepAfter: curveStepAfter,\n curveStepBefore: curveStepBefore,\n};\nconst directive =\n /[%]{2}[{]\\s*(?:(?:(\\w+)\\s*:|(\\w+))\\s*(?:(?:(\\w+))|((?:(?![}][%]{2}).|\\r?\\n)*))?\\s*)(?:[}][%]{2})?/gi;\nconst directiveWithoutOpen =\n /\\s*(?:(?:(\\w+)(?=:):|(\\w+))\\s*(?:(?:(\\w+))|((?:(?![}][%]{2}).|\\r?\\n)*))?\\s*)(?:[}][%]{2})?/gi;\nconst anyComment = /\\s*%%.*\\n/gm;\n\n/**\n * @function detectInit Detects the init config object from the text\n *\n * ```mermaid\n * %%{init: {\"theme\": \"debug\", \"logLevel\": 1 }}%%\n * graph LR\n * a-->b\n * b-->c\n * c-->d\n * d-->e\n * e-->f\n * f-->g\n * g-->h\n * ```\n *\n * Or\n *\n * ```mermaid\n * %%{initialize: {\"theme\": \"dark\", logLevel: \"debug\" }}%%\n * graph LR\n * a-->b\n * b-->c\n * c-->d\n * d-->e\n * e-->f\n * f-->g\n * g-->h\n * ```\n * @param {string} text The text defining the graph\n * @param {any} cnf\n * @returns {object} The json object representing the init passed to mermaid.initialize()\n */\nexport const detectInit = function (text, cnf) {\n let inits = detectDirective(text, /(?:init\\b)|(?:initialize\\b)/);\n let results = {};\n\n if (Array.isArray(inits)) {\n let args = inits.map((init) => init.args);\n directiveSanitizer(args);\n\n results = assignWithDepth(results, [...args]);\n } else {\n results = inits.args;\n }\n if (results) {\n let type = detectType(text, cnf);\n ['config'].forEach((prop) => {\n if (typeof results[prop] !== 'undefined') {\n if (type === 'flowchart-v2') {\n type = 'flowchart';\n }\n results[type] = results[prop];\n delete results[prop];\n }\n });\n }\n\n // Todo: refactor this, these results are never used\n return results;\n};\n\n/**\n * @function detectDirective Detects the directive from the text. Text can be single line or\n * multiline. If type is null or omitted the first directive encountered in text will be returned\n *\n * ```mermaid\n * graph LR\n * %%{somedirective}%%\n * a-->b\n * b-->c\n * c-->d\n * d-->e\n * e-->f\n * f-->g\n * g-->h\n * ```\n * @param {string} text The text defining the graph\n * @param {string | RegExp} type The directive to return (default: null)\n * @returns {object | Array} An object or Array representing the directive(s): { type: string, args:\n * object|null } matched by the input type if a single directive was found, that directive object\n * will be returned.\n */\nexport const detectDirective = function (text, type = null) {\n try {\n const commentWithoutDirectives = new RegExp(\n `[%]{2}(?![{]${directiveWithoutOpen.source})(?=[}][%]{2}).*\\n`,\n 'ig'\n );\n text = text.trim().replace(commentWithoutDirectives, '').replace(/'/gm, '\"');\n log.debug(\n `Detecting diagram directive${type !== null ? ' type:' + type : ''} based on the text:${text}`\n );\n let match,\n result = [];\n while ((match = directive.exec(text)) !== null) {\n // This is necessary to avoid infinite loops with zero-width matches\n if (match.index === directive.lastIndex) {\n directive.lastIndex++;\n }\n if (\n (match && !type) ||\n (type && match[1] && match[1].match(type)) ||\n (type && match[2] && match[2].match(type))\n ) {\n let type = match[1] ? match[1] : match[2];\n let args = match[3] ? match[3].trim() : match[4] ? JSON.parse(match[4].trim()) : null;\n result.push({ type, args });\n }\n }\n if (result.length === 0) {\n result.push({ type: text, args: null });\n }\n\n return result.length === 1 ? result[0] : result;\n } catch (error) {\n log.error(\n `ERROR: ${error.message} - Unable to parse directive\n ${type !== null ? ' type:' + type : ''} based on the text:${text}`\n );\n return { type: null, args: null };\n }\n};\n\n/**\n * Caches results of functions based on input\n *\n * @param {Function} fn Function to run\n * @param {Function} resolver Function that resolves to an ID given arguments the `fn` takes\n * @returns {Function} An optimized caching function\n */\nconst memoize = (fn, resolver) => {\n let cache = {};\n return (...args) => {\n let n = resolver ? resolver.apply(this, args) : args[0];\n if (n in cache) {\n return cache[n];\n } else {\n let result = fn(...args);\n cache[n] = result;\n return result;\n }\n };\n};\n\n/**\n * @function isSubstringInArray Detects whether a substring in present in a given array\n * @param {string} str The substring to detect\n * @param {Array} arr The array to search\n * @returns {number} The array index containing the substring or -1 if not present\n */\nexport const isSubstringInArray = function (str, arr) {\n for (let i = 0; i < arr.length; i++) {\n if (arr[i].match(str)) return i;\n }\n return -1;\n};\n\n/**\n * Returns a d3 curve given a curve name\n *\n * @param {string | undefined} interpolate The interpolation name\n * @param {any} defaultCurve The default curve to return\n * @returns {import('d3-shape').CurveFactory} The curve factory to use\n */\nexport const interpolateToCurve = (interpolate, defaultCurve) => {\n if (!interpolate) {\n return defaultCurve;\n }\n const curveName = `curve${interpolate.charAt(0).toUpperCase() + interpolate.slice(1)}`;\n return d3CurveTypes[curveName] || defaultCurve;\n};\n\n/**\n * Formats a URL string\n *\n * @param {string} linkStr String of the URL\n * @param {{ securityLevel: string }} config Configuration passed to MermaidJS\n * @returns {string | undefined} The formatted URL\n */\nexport const formatUrl = (linkStr, config) => {\n let url = linkStr.trim();\n\n if (url) {\n if (config.securityLevel !== 'loose') {\n return sanitizeUrl(url);\n }\n\n return url;\n }\n};\n\n/**\n * Runs a function\n *\n * @param {string} functionName A dot seperated path to the function relative to the `window`\n * @param {...any} params Parameters to pass to the function\n */\nexport const runFunc = (functionName, ...params) => {\n const arrPaths = functionName.split('.');\n\n const len = arrPaths.length - 1;\n const fnName = arrPaths[len];\n\n let obj = window;\n for (let i = 0; i < len; i++) {\n obj = obj[arrPaths[i]];\n if (!obj) return;\n }\n\n obj[fnName](...params);\n};\n\n/**\n * @typedef {object} Point A (x, y) point\n * @property {number} x The x value\n * @property {number} y The y value\n */\n\n/**\n * Finds the distance between two points using the Distance Formula\n *\n * @param {Point} p1 The first point\n * @param {Point} p2 The second point\n * @returns {number} The distance\n */\nconst distance = (p1, p2) =>\n p1 && p2 ? Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)) : 0;\n\n/**\n * @param {Point[]} points List of points\n * @returns {Point}\n * @todo Give this a description\n */\nconst traverseEdge = (points) => {\n let prevPoint;\n let totalDistance = 0;\n\n points.forEach((point) => {\n totalDistance += distance(point, prevPoint);\n prevPoint = point;\n });\n\n // Traverse half of total distance along points\n let remainingDistance = totalDistance / 2;\n let center = undefined;\n prevPoint = undefined;\n points.forEach((point) => {\n if (prevPoint && !center) {\n const vectorDistance = distance(point, prevPoint);\n if (vectorDistance < remainingDistance) {\n remainingDistance -= vectorDistance;\n } else {\n // The point is remainingDistance from prevPoint in the vector between prevPoint and point\n // Calculate the coordinates\n const distanceRatio = remainingDistance / vectorDistance;\n if (distanceRatio <= 0) center = prevPoint;\n if (distanceRatio >= 1) center = { x: point.x, y: point.y };\n if (distanceRatio > 0 && distanceRatio < 1) {\n center = {\n x: (1 - distanceRatio) * prevPoint.x + distanceRatio * point.x,\n y: (1 - distanceRatio) * prevPoint.y + distanceRatio * point.y,\n };\n }\n }\n }\n prevPoint = point;\n });\n return center;\n};\n\n/**\n * Alias for `traverseEdge`\n *\n * @param {Point[]} points List of points\n * @returns {Point} Return result of `transverseEdge`\n */\nconst calcLabelPosition = (points) => {\n if (points.length === 1) {\n return points[0];\n }\n return traverseEdge(points);\n};\n\nconst calcCardinalityPosition = (isRelationTypePresent, points, initialPosition) => {\n let prevPoint;\n let totalDistance = 0; // eslint-disable-line\n log.info('our points', points);\n if (points[0] !== initialPosition) {\n points = points.reverse();\n }\n points.forEach((point) => {\n totalDistance += distance(point, prevPoint);\n prevPoint = point;\n });\n\n // Traverse only 25 total distance along points to find cardinality point\n const distanceToCardinalityPoint = 25;\n\n let remainingDistance = distanceToCardinalityPoint;\n let center;\n prevPoint = undefined;\n points.forEach((point) => {\n if (prevPoint && !center) {\n const vectorDistance = distance(point, prevPoint);\n if (vectorDistance < remainingDistance) {\n remainingDistance -= vectorDistance;\n } else {\n // The point is remainingDistance from prevPoint in the vector between prevPoint and point\n // Calculate the coordinates\n const distanceRatio = remainingDistance / vectorDistance;\n if (distanceRatio <= 0) center = prevPoint;\n if (distanceRatio >= 1) center = { x: point.x, y: point.y };\n if (distanceRatio > 0 && distanceRatio < 1) {\n center = {\n x: (1 - distanceRatio) * prevPoint.x + distanceRatio * point.x,\n y: (1 - distanceRatio) * prevPoint.y + distanceRatio * point.y,\n };\n }\n }\n }\n prevPoint = point;\n });\n // if relation is present (Arrows will be added), change cardinality point off-set distance (d)\n let d = isRelationTypePresent ? 10 : 5;\n //Calculate Angle for x and y axis\n let angle = Math.atan2(points[0].y - center.y, points[0].x - center.x);\n let cardinalityPosition = { x: 0, y: 0 };\n //Calculation cardinality position using angle, center point on the line/curve but pendicular and with offset-distance\n cardinalityPosition.x = Math.sin(angle) * d + (points[0].x + center.x) / 2;\n cardinalityPosition.y = -Math.cos(angle) * d + (points[0].y + center.y) / 2;\n return cardinalityPosition;\n};\n\n/**\n * Position ['start_left', 'start_right', 'end_left', 'end_right']\n *\n * @param {any} terminalMarkerSize\n * @param {any} position\n * @param {any} _points\n * @returns {any}\n */\nconst calcTerminalLabelPosition = (terminalMarkerSize, position, _points) => {\n // Todo looking to faster cloning method\n let points = JSON.parse(JSON.stringify(_points));\n let prevPoint;\n let totalDistance = 0; // eslint-disable-line\n log.info('our points', points);\n if (position !== 'start_left' && position !== 'start_right') {\n points = points.reverse();\n }\n\n points.forEach((point) => {\n totalDistance += distance(point, prevPoint);\n prevPoint = point;\n });\n\n // Traverse only 25 total distance along points to find cardinality point\n const distanceToCardinalityPoint = 25 + terminalMarkerSize;\n\n let remainingDistance = distanceToCardinalityPoint;\n let center;\n prevPoint = undefined;\n points.forEach((point) => {\n if (prevPoint && !center) {\n const vectorDistance = distance(point, prevPoint);\n if (vectorDistance < remainingDistance) {\n remainingDistance -= vectorDistance;\n } else {\n // The point is remainingDistance from prevPoint in the vector between prevPoint and point\n // Calculate the coordinates\n const distanceRatio = remainingDistance / vectorDistance;\n if (distanceRatio <= 0) center = prevPoint;\n if (distanceRatio >= 1) center = { x: point.x, y: point.y };\n if (distanceRatio > 0 && distanceRatio < 1) {\n center = {\n x: (1 - distanceRatio) * prevPoint.x + distanceRatio * point.x,\n y: (1 - distanceRatio) * prevPoint.y + distanceRatio * point.y,\n };\n }\n }\n }\n prevPoint = point;\n });\n // if relation is present (Arrows will be added), change cardinality point off-set distance (d)\n let d = 10 + terminalMarkerSize * 0.5;\n //Calculate Angle for x and y axis\n let angle = Math.atan2(points[0].y - center.y, points[0].x - center.x);\n\n let cardinalityPosition = { x: 0, y: 0 };\n\n //Calculation cardinality position using angle, center point on the line/curve but pendicular and with offset-distance\n\n cardinalityPosition.x = Math.sin(angle) * d + (points[0].x + center.x) / 2;\n cardinalityPosition.y = -Math.cos(angle) * d + (points[0].y + center.y) / 2;\n if (position === 'start_left') {\n cardinalityPosition.x = Math.sin(angle + Math.PI) * d + (points[0].x + center.x) / 2;\n cardinalityPosition.y = -Math.cos(angle + Math.PI) * d + (points[0].y + center.y) / 2;\n }\n if (position === 'end_right') {\n cardinalityPosition.x = Math.sin(angle - Math.PI) * d + (points[0].x + center.x) / 2 - 5;\n cardinalityPosition.y = -Math.cos(angle - Math.PI) * d + (points[0].y + center.y) / 2 - 5;\n }\n if (position === 'end_left') {\n cardinalityPosition.x = Math.sin(angle) * d + (points[0].x + center.x) / 2 - 5;\n cardinalityPosition.y = -Math.cos(angle) * d + (points[0].y + center.y) / 2 - 5;\n }\n return cardinalityPosition;\n};\n\n/**\n * Gets styles from an array of declarations\n *\n * @param {string[]} arr Declarations\n * @returns {{ style: string; labelStyle: string }} The styles grouped as strings\n */\nexport const getStylesFromArray = (arr) => {\n let style = '';\n let labelStyle = '';\n\n for (let i = 0; i < arr.length; i++) {\n if (typeof arr[i] !== 'undefined') {\n // add text properties to label style definition\n if (arr[i].startsWith('color:') || arr[i].startsWith('text-align:')) {\n labelStyle = labelStyle + arr[i] + ';';\n } else {\n style = style + arr[i] + ';';\n }\n }\n }\n\n return { style: style, labelStyle: labelStyle };\n};\n\nlet cnt = 0;\nexport const generateId = () => {\n cnt++;\n return 'id-' + Math.random().toString(36).substr(2, 12) + '-' + cnt;\n};\n\n/**\n * @param {any} length\n * @returns {any}\n */\nfunction makeid(length) {\n var result = '';\n var characters = '0123456789abcdef';\n var charactersLength = characters.length;\n for (var i = 0; i < length; i++) {\n result += characters.charAt(Math.floor(Math.random() * charactersLength));\n }\n return result;\n}\n\nexport const random = (options) => {\n return makeid(options.length);\n};\n\nexport const getTextObj = function () {\n return {\n x: 0,\n y: 0,\n fill: undefined,\n anchor: 'start',\n style: '#666',\n width: 100,\n height: 100,\n textMargin: 0,\n rx: 0,\n ry: 0,\n valign: undefined,\n };\n};\n\n/**\n * Adds text to an element\n *\n * @param {SVGElement} elem Element to add text to\n * @param {{\n * text: string;\n * x: number;\n * y: number;\n * anchor: 'start' | 'middle' | 'end';\n * fontFamily: string;\n * fontSize: string | number;\n * fontWeight: string | number;\n * fill: string;\n * class: string | undefined;\n * textMargin: number;\n * }} textData\n * @returns {SVGTextElement} Text element with given styling and content\n */\nexport const drawSimpleText = function (elem, textData) {\n // Remove and ignore br:s\n const nText = textData.text.replace(common.lineBreakRegex, ' ');\n\n const textElem = elem.append('text');\n textElem.attr('x', textData.x);\n textElem.attr('y', textData.y);\n textElem.style('text-anchor', textData.anchor);\n textElem.style('font-family', textData.fontFamily);\n textElem.style('font-size', textData.fontSize);\n textElem.style('font-weight', textData.fontWeight);\n textElem.attr('fill', textData.fill);\n if (typeof textData.class !== 'undefined') {\n textElem.attr('class', textData.class);\n }\n\n const span = textElem.append('tspan');\n span.attr('x', textData.x + textData.textMargin * 2);\n span.attr('fill', textData.fill);\n span.text(nText);\n\n return textElem;\n};\n\nexport const wrapLabel = memoize(\n (label, maxWidth, config) => {\n if (!label) {\n return label;\n }\n config = Object.assign(\n { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', joinWith: '
' },\n config\n );\n if (common.lineBreakRegex.test(label)) {\n return label;\n }\n const words = label.split(' ');\n const completedLines = [];\n let nextLine = '';\n words.forEach((word, index) => {\n const wordLength = calculateTextWidth(`${word} `, config);\n const nextLineLength = calculateTextWidth(nextLine, config);\n if (wordLength > maxWidth) {\n const { hyphenatedStrings, remainingWord } = breakString(word, maxWidth, '-', config);\n completedLines.push(nextLine, ...hyphenatedStrings);\n nextLine = remainingWord;\n } else if (nextLineLength + wordLength >= maxWidth) {\n completedLines.push(nextLine);\n nextLine = word;\n } else {\n nextLine = [nextLine, word].filter(Boolean).join(' ');\n }\n const currentWord = index + 1;\n const isLastWord = currentWord === words.length;\n if (isLastWord) {\n completedLines.push(nextLine);\n }\n });\n return completedLines.filter((line) => line !== '').join(config.joinWith);\n },\n (label, maxWidth, config) =>\n `${label}-${maxWidth}-${config.fontSize}-${config.fontWeight}-${config.fontFamily}-${config.joinWith}`\n);\n\nconst breakString = memoize(\n (word, maxWidth, hyphenCharacter = '-', config) => {\n config = Object.assign(\n { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 0 },\n config\n );\n const characters = word.split('');\n const lines = [];\n let currentLine = '';\n characters.forEach((character, index) => {\n const nextLine = `${currentLine}${character}`;\n const lineWidth = calculateTextWidth(nextLine, config);\n if (lineWidth >= maxWidth) {\n const currentCharacter = index + 1;\n const isLastLine = characters.length === currentCharacter;\n const hyphenatedNextLine = `${nextLine}${hyphenCharacter}`;\n lines.push(isLastLine ? nextLine : hyphenatedNextLine);\n currentLine = '';\n } else {\n currentLine = nextLine;\n }\n });\n return { hyphenatedStrings: lines, remainingWord: currentLine };\n },\n (word, maxWidth, hyphenCharacter = '-', config) =>\n `${word}-${maxWidth}-${hyphenCharacter}-${config.fontSize}-${config.fontWeight}-${config.fontFamily}`\n);\n\n/**\n * This calculates the text's height, taking into account the wrap breaks and both the statically\n * configured height, width, and the length of the text (in pixels).\n *\n * If the wrapped text text has greater height, we extend the height, so it's value won't overflow.\n *\n * @param {any} text The text to measure\n * @param {any} config - The config for fontSize, fontFamily, and fontWeight all impacting the resulting size\n * @returns {any} - The height for the given text\n */\nexport const calculateTextHeight = function (text, config) {\n config = Object.assign(\n { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 15 },\n config\n );\n return calculateTextDimensions(text, config).height;\n};\n\n/**\n * This calculates the width of the given text, font size and family.\n *\n * @param {any} text - The text to calculate the width of\n * @param {any} config - The config for fontSize, fontFamily, and fontWeight all impacting the resulting size\n * @returns {any} - The width for the given text\n */\nexport const calculateTextWidth = function (text, config) {\n config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial' }, config);\n return calculateTextDimensions(text, config).width;\n};\n\n/**\n * This calculates the dimensions of the given text, font size, font family, font weight, and margins.\n *\n * @param {any} text - The text to calculate the width of\n * @param {any} config - The config for fontSize, fontFamily, fontWeight, and margin all impacting\n * the resulting size\n * @returns - The width for the given text\n */\nexport const calculateTextDimensions = memoize(\n function (text, config) {\n config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial' }, config);\n const { fontSize, fontFamily, fontWeight } = config;\n if (!text) {\n return { width: 0, height: 0 };\n }\n\n // We can't really know if the user supplied font family will render on the user agent;\n // thus, we'll take the max width between the user supplied font family, and a default\n // of sans-serif.\n const fontFamilies = ['sans-serif', fontFamily];\n const lines = text.split(common.lineBreakRegex);\n let dims = [];\n\n const body = select('body');\n // We don't want to leak DOM elements - if a removal operation isn't available\n // for any reason, do not continue.\n if (!body.remove) {\n return { width: 0, height: 0, lineHeight: 0 };\n }\n\n const g = body.append('svg');\n\n for (let fontFamily of fontFamilies) {\n let cheight = 0;\n let dim = { width: 0, height: 0, lineHeight: 0 };\n for (let line of lines) {\n const textObj = getTextObj();\n textObj.text = line;\n const textElem = drawSimpleText(g, textObj)\n .style('font-size', fontSize)\n .style('font-weight', fontWeight)\n .style('font-family', fontFamily);\n\n let bBox = (textElem._groups || textElem)[0][0].getBBox();\n dim.width = Math.round(Math.max(dim.width, bBox.width));\n cheight = Math.round(bBox.height);\n dim.height += cheight;\n dim.lineHeight = Math.round(Math.max(dim.lineHeight, cheight));\n }\n dims.push(dim);\n }\n\n g.remove();\n\n let index =\n isNaN(dims[1].height) ||\n isNaN(dims[1].width) ||\n isNaN(dims[1].lineHeight) ||\n (dims[0].height > dims[1].height &&\n dims[0].width > dims[1].width &&\n dims[0].lineHeight > dims[1].lineHeight)\n ? 0\n : 1;\n return dims[index];\n },\n (text, config) => `${text}-${config.fontSize}-${config.fontWeight}-${config.fontFamily}`\n);\n\n/**\n * Applys d3 attributes\n *\n * @param {any} d3Elem D3 Element to apply the attributes onto\n * @param {[string, string][]} attrs Object.keys equivalent format of key to value mapping of attributes\n */\nconst d3Attrs = function (d3Elem, attrs) {\n for (let attr of attrs) {\n d3Elem.attr(attr[0], attr[1]);\n }\n};\n\n/**\n * Gives attributes for an SVG's size given arguments\n *\n * @param {number} height The height of the SVG\n * @param {number} width The width of the SVG\n * @param {boolean} useMaxWidth Whether or not to use max-width and set width to 100%\n * @returns {Map<'height' | 'width' | 'style', string>} Attributes for the SVG\n */\nexport const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {\n let attrs = new Map();\n attrs.set('height', height);\n if (useMaxWidth) {\n attrs.set('width', '100%');\n attrs.set('style', `max-width: ${width}px;`);\n } else {\n attrs.set('width', width);\n }\n return attrs;\n};\n\n/**\n * Applies attributes from `calculateSvgSizeAttrs`\n *\n * @param {SVGSVGElement} svgElem The SVG Element to configure\n * @param {number} height The height of the SVG\n * @param {number} width The width of the SVG\n * @param {boolean} useMaxWidth Whether or not to use max-width and set width to 100%\n */\nexport const configureSvgSize = function (svgElem, height, width, useMaxWidth) {\n const attrs = calculateSvgSizeAttrs(height, width, useMaxWidth);\n d3Attrs(svgElem, attrs);\n};\nexport const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth) {\n const svgBounds = svgElem.node().getBBox();\n const sWidth = svgBounds.width;\n const sHeight = svgBounds.height;\n\n let width = graph._label.width;\n let height = graph._label.height;\n let tx = 0;\n let ty = 0;\n if (sWidth > width) {\n tx = (sWidth - width) / 2 + padding;\n width = sWidth + padding * 2;\n } else {\n if (Math.abs(sWidth - width) >= 2 * padding + 1) {\n width = width - padding;\n }\n }\n if (sHeight > height) {\n ty = (sHeight - height) / 2 + padding;\n height = sHeight + padding * 2;\n }\n configureSvgSize(svgElem, height, width, useMaxWidth);\n\n // Ensure the viewBox includes the whole svgBounds area with extra space for padding\n const vBox = `0 0 ${width} ${height}`;\n log.debug(\n 'Graph.label',\n graph._label,\n 'swidth',\n sWidth,\n 'sheight',\n sHeight,\n 'width',\n width,\n 'height',\n height,\n 'tx',\n tx,\n 'ty',\n ty,\n 'vBox',\n vBox\n );\n svgElem.attr('viewBox', vBox);\n svgElem.select('g').attr('transform', `translate(${tx}, ${ty})`);\n};\n\nexport const initIdGenerator = class iterator {\n constructor(deterministic, seed) {\n this.deterministic = deterministic;\n this.seed = seed;\n\n this.count = seed ? seed.length : 0;\n }\n\n next() {\n if (!this.deterministic) return Date.now();\n\n return this.count++;\n }\n};\n\nlet decoder;\n\n/**\n * Decodes HTML, source: {@link https://github.com/shrpne/entity-decode/blob/v2.0.1/browser.js}\n *\n * @param {string} html HTML as a string\n * @returns Unescaped HTML\n */\nexport const entityDecode = function (html) {\n decoder = decoder || document.createElement('div');\n // Escape HTML before decoding for HTML Entities\n html = escape(html).replace(/%26/g, '&').replace(/%23/g, '#').replace(/%3B/g, ';');\n // decoding\n decoder.innerHTML = html;\n return unescape(decoder.textContent);\n};\n\n/**\n * Sanitizes directive objects\n *\n * @param {object} args Directive's JSON\n */\nexport const directiveSanitizer = (args) => {\n log.debug('directiveSanitizer called with', args);\n if (typeof args === 'object') {\n // check for array\n if (args.length) {\n args.forEach((arg) => directiveSanitizer(arg));\n } else {\n // This is an object\n Object.keys(args).forEach((key) => {\n log.debug('Checking key', key);\n if (key.indexOf('__') === 0) {\n log.debug('sanitize deleting __ option', key);\n delete args[key];\n }\n\n if (key.indexOf('proto') >= 0) {\n log.debug('sanitize deleting proto option', key);\n delete args[key];\n }\n\n if (key.indexOf('constr') >= 0) {\n log.debug('sanitize deleting constr option', key);\n delete args[key];\n }\n\n if (key.indexOf('themeCSS') >= 0) {\n log.debug('sanitizing themeCss option');\n args[key] = sanitizeCss(args[key]);\n }\n if (key.indexOf('fontFamily') >= 0) {\n log.debug('sanitizing fontFamily option');\n args[key] = sanitizeCss(args[key]);\n }\n if (key.indexOf('altFontFamily') >= 0) {\n log.debug('sanitizing altFontFamily option');\n args[key] = sanitizeCss(args[key]);\n }\n if (configKeys.indexOf(key) < 0) {\n log.debug('sanitize deleting option', key);\n delete args[key];\n } else {\n if (typeof args[key] === 'object') {\n log.debug('sanitize deleting object', key);\n directiveSanitizer(args[key]);\n }\n }\n });\n }\n }\n if (args.themeVariables) {\n const kArr = Object.keys(args.themeVariables);\n for (let i = 0; i < kArr.length; i++) {\n const k = kArr[i];\n const val = args.themeVariables[k];\n if (val && val.match && !val.match(/^[a-zA-Z0-9#,\";()%. ]+$/)) {\n args.themeVariables[k] = '';\n }\n }\n }\n log.debug('After sanitization', args);\n};\nexport const sanitizeCss = (str) => {\n let startCnt = 0;\n let endCnt = 0;\n\n for (let i = 0; i < str.length; i++) {\n if (startCnt < endCnt) {\n return '{ /* ERROR: Unbalanced CSS */ }';\n }\n if (str[i] === '{') {\n startCnt++;\n } else if (str[i] === '}') {\n endCnt++;\n }\n }\n if (startCnt !== endCnt) {\n return '{ /* ERROR: Unbalanced CSS */ }';\n }\n // Todo add more checks here\n return str;\n};\n\nexport default {\n assignWithDepth,\n wrapLabel,\n calculateTextHeight,\n calculateTextWidth,\n calculateTextDimensions,\n calculateSvgSizeAttrs,\n configureSvgSize,\n setupGraphViewbox,\n detectInit,\n detectDirective,\n isSubstringInArray,\n interpolateToCurve,\n calcLabelPosition,\n calcCardinalityPosition,\n calcTerminalLabelPosition,\n formatUrl,\n getStylesFromArray,\n generateId,\n random,\n memoize,\n runFunc,\n entityDecode,\n initIdGenerator: initIdGenerator,\n directiveSanitizer,\n sanitizeCss,\n};\n","/**\n * @license\n * Copyright (c) 2012-2013 Chris Pettitt\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\nmodule.exports = {\n graphlib: require(\"./lib/graphlib\"),\n dagre: require(\"./lib/dagre\"),\n intersect: require(\"./lib/intersect\"),\n render: require(\"./lib/render\"),\n util: require(\"./lib/util\"),\n version: require(\"./lib/version\")\n};\n","var util = require(\"./util\");\n\nmodule.exports = {\n \"default\": normal,\n \"normal\": normal,\n \"vee\": vee,\n \"undirected\": undirected\n};\n\nfunction normal(parent, id, edge, type) {\n var marker = parent.append(\"marker\")\n .attr(\"id\", id)\n .attr(\"viewBox\", \"0 0 10 10\")\n .attr(\"refX\", 9)\n .attr(\"refY\", 5)\n .attr(\"markerUnits\", \"strokeWidth\")\n .attr(\"markerWidth\", 8)\n .attr(\"markerHeight\", 6)\n .attr(\"orient\", \"auto\");\n\n var path = marker.append(\"path\")\n .attr(\"d\", \"M 0 0 L 10 5 L 0 10 z\")\n .style(\"stroke-width\", 1)\n .style(\"stroke-dasharray\", \"1,0\");\n util.applyStyle(path, edge[type + \"Style\"]);\n if (edge[type + \"Class\"]) {\n path.attr(\"class\", edge[type + \"Class\"]);\n }\n}\n\nfunction vee(parent, id, edge, type) {\n var marker = parent.append(\"marker\")\n .attr(\"id\", id)\n .attr(\"viewBox\", \"0 0 10 10\")\n .attr(\"refX\", 9)\n .attr(\"refY\", 5)\n .attr(\"markerUnits\", \"strokeWidth\")\n .attr(\"markerWidth\", 8)\n .attr(\"markerHeight\", 6)\n .attr(\"orient\", \"auto\");\n\n var path = marker.append(\"path\")\n .attr(\"d\", \"M 0 0 L 10 5 L 0 10 L 4 5 z\")\n .style(\"stroke-width\", 1)\n .style(\"stroke-dasharray\", \"1,0\");\n util.applyStyle(path, edge[type + \"Style\"]);\n if (edge[type + \"Class\"]) {\n path.attr(\"class\", edge[type + \"Class\"]);\n }\n}\n\nfunction undirected(parent, id, edge, type) {\n var marker = parent.append(\"marker\")\n .attr(\"id\", id)\n .attr(\"viewBox\", \"0 0 10 10\")\n .attr(\"refX\", 9)\n .attr(\"refY\", 5)\n .attr(\"markerUnits\", \"strokeWidth\")\n .attr(\"markerWidth\", 8)\n .attr(\"markerHeight\", 6)\n .attr(\"orient\", \"auto\");\n\n var path = marker.append(\"path\")\n .attr(\"d\", \"M 0 5 L 10 5\")\n .style(\"stroke-width\", 1)\n .style(\"stroke-dasharray\", \"1,0\");\n util.applyStyle(path, edge[type + \"Style\"]);\n if (edge[type + \"Class\"]) {\n path.attr(\"class\", edge[type + \"Class\"]);\n }\n}\n","var util = require(\"./util\");\nvar d3 = require(\"./d3\");\nvar addLabel = require(\"./label/add-label\");\n\nmodule.exports = createClusters;\n\nfunction createClusters(selection, g) {\n var clusters = g.nodes().filter(function(v) { return util.isSubgraph(g, v); });\n var svgClusters = selection.selectAll(\"g.cluster\")\n .data(clusters, function(v) { return v; });\n\n svgClusters.selectAll(\"*\").remove();\n svgClusters.enter().append(\"g\")\n .attr(\"class\", \"cluster\")\n .attr(\"id\",function(v){\n var node = g.node(v);\n return node.id;\n })\n .style(\"opacity\", 0);\n \n svgClusters = selection.selectAll(\"g.cluster\");\n\n util.applyTransition(svgClusters, g)\n .style(\"opacity\", 1);\n\n svgClusters.each(function(v) {\n var node = g.node(v);\n var thisGroup = d3.select(this);\n d3.select(this).append(\"rect\");\n var labelGroup = thisGroup.append(\"g\").attr(\"class\", \"label\");\n addLabel(labelGroup, node, node.clusterLabelPos);\n });\n\n svgClusters.selectAll(\"rect\").each(function(c) {\n var node = g.node(c);\n var domCluster = d3.select(this);\n util.applyStyle(domCluster, node.style);\n });\n\n var exitSelection;\n\n if (svgClusters.exit) {\n exitSelection = svgClusters.exit();\n } else {\n exitSelection = svgClusters.selectAll(null); // empty selection\n }\n\n util.applyTransition(exitSelection, g)\n .style(\"opacity\", 0)\n .remove();\n\n return svgClusters;\n}\n","\"use strict\";\n\nvar _ = require(\"./lodash\");\nvar addLabel = require(\"./label/add-label\");\nvar util = require(\"./util\");\nvar d3 = require(\"./d3\");\n\nmodule.exports = createEdgeLabels;\n\nfunction createEdgeLabels(selection, g) {\n var svgEdgeLabels = selection.selectAll(\"g.edgeLabel\")\n .data(g.edges(), function(e) { return util.edgeToId(e); })\n .classed(\"update\", true);\n\n svgEdgeLabels.exit().remove();\n svgEdgeLabels.enter().append(\"g\")\n .classed(\"edgeLabel\", true)\n .style(\"opacity\", 0);\n\n svgEdgeLabels = selection.selectAll(\"g.edgeLabel\");\n\n svgEdgeLabels.each(function(e) {\n var root = d3.select(this);\n root.select(\".label\").remove();\n var edge = g.edge(e);\n var label = addLabel(root, g.edge(e), 0, 0).classed(\"label\", true);\n var bbox = label.node().getBBox();\n\n if (edge.labelId) { label.attr(\"id\", edge.labelId); }\n if (!_.has(edge, \"width\")) { edge.width = bbox.width; }\n if (!_.has(edge, \"height\")) { edge.height = bbox.height; }\n });\n\n var exitSelection;\n\n if (svgEdgeLabels.exit) {\n exitSelection = svgEdgeLabels.exit();\n } else {\n exitSelection = svgEdgeLabels.selectAll(null); // empty selection\n }\n\n util.applyTransition(exitSelection, g)\n .style(\"opacity\", 0)\n .remove();\n\n return svgEdgeLabels;\n}\n","\"use strict\";\n\nvar _ = require(\"./lodash\");\nvar intersectNode = require(\"./intersect/intersect-node\");\nvar util = require(\"./util\");\nvar d3 = require(\"./d3\");\nmodule.exports = createEdgePaths;\n\nfunction createEdgePaths(selection, g, arrows) {\n var previousPaths = selection.selectAll(\"g.edgePath\")\n .data(g.edges(), function(e) { return util.edgeToId(e); })\n .classed(\"update\", true);\n\n var newPaths = enter(previousPaths, g);\n exit(previousPaths, g);\n\n var svgPaths = previousPaths.merge !== undefined ? previousPaths.merge(newPaths) : previousPaths;\n util.applyTransition(svgPaths, g)\n .style(\"opacity\", 1);\n\n // Save DOM element in the path group, and set ID and class\n svgPaths.each(function(e) {\n var domEdge = d3.select(this);\n var edge = g.edge(e);\n edge.elem = this;\n\n if (edge.id) {\n domEdge.attr(\"id\", edge.id);\n }\n\n util.applyClass(domEdge, edge[\"class\"],\n (domEdge.classed(\"update\") ? \"update \" : \"\") + \"edgePath\");\n });\n\n svgPaths.selectAll(\"path.path\")\n .each(function(e) {\n var edge = g.edge(e);\n edge.arrowheadId = _.uniqueId(\"arrowhead\");\n\n var domEdge = d3.select(this)\n .attr(\"marker-end\", function() {\n return \"url(\" + makeFragmentRef(location.href, edge.arrowheadId) + \")\";\n })\n .style(\"fill\", \"none\");\n\n util.applyTransition(domEdge, g)\n .attr(\"d\", function(e) { return calcPoints(g, e); });\n\n util.applyStyle(domEdge, edge.style);\n });\n\n svgPaths.selectAll(\"defs *\").remove();\n svgPaths.selectAll(\"defs\")\n .each(function(e) {\n var edge = g.edge(e);\n var arrowhead = arrows[edge.arrowhead];\n arrowhead(d3.select(this), edge.arrowheadId, edge, \"arrowhead\");\n });\n\n return svgPaths;\n}\n\nfunction makeFragmentRef(url, fragmentId) {\n var baseUrl = url.split(\"#\")[0];\n return baseUrl + \"#\" + fragmentId;\n}\n\nfunction calcPoints(g, e) {\n var edge = g.edge(e);\n var tail = g.node(e.v);\n var head = g.node(e.w);\n var points = edge.points.slice(1, edge.points.length - 1);\n points.unshift(intersectNode(tail, points[0]));\n points.push(intersectNode(head, points[points.length - 1]));\n\n return createLine(edge, points);\n}\n\nfunction createLine(edge, points) {\n var line = (d3.line || d3.svg.line)()\n .x(function(d) { return d.x; })\n .y(function(d) { return d.y; });\n \n (line.curve || line.interpolate)(edge.curve);\n\n return line(points);\n}\n\nfunction getCoords(elem) {\n var bbox = elem.getBBox();\n var matrix = elem.ownerSVGElement.getScreenCTM()\n .inverse()\n .multiply(elem.getScreenCTM())\n .translate(bbox.width / 2, bbox.height / 2);\n return { x: matrix.e, y: matrix.f };\n}\n\nfunction enter(svgPaths, g) {\n var svgPathsEnter = svgPaths.enter().append(\"g\")\n .attr(\"class\", \"edgePath\")\n .style(\"opacity\", 0);\n svgPathsEnter.append(\"path\")\n .attr(\"class\", \"path\")\n .attr(\"d\", function(e) {\n var edge = g.edge(e);\n var sourceElem = g.node(e.v).elem;\n var points = _.range(edge.points.length).map(function() { return getCoords(sourceElem); });\n return createLine(edge, points);\n });\n svgPathsEnter.append(\"defs\");\n return svgPathsEnter;\n}\n\nfunction exit(svgPaths, g) {\n var svgPathExit = svgPaths.exit();\n util.applyTransition(svgPathExit, g)\n .style(\"opacity\", 0)\n .remove();\n}\n","\"use strict\";\n\nvar _ = require(\"./lodash\");\nvar addLabel = require(\"./label/add-label\");\nvar util = require(\"./util\");\nvar d3 = require(\"./d3\");\n\nmodule.exports = createNodes;\n\nfunction createNodes(selection, g, shapes) {\n var simpleNodes = g.nodes().filter(function(v) { return !util.isSubgraph(g, v); });\n var svgNodes = selection.selectAll(\"g.node\")\n .data(simpleNodes, function(v) { return v; })\n .classed(\"update\", true);\n\n svgNodes.exit().remove();\n\n svgNodes.enter().append(\"g\")\n .attr(\"class\", \"node\")\n .style(\"opacity\", 0);\n\n svgNodes = selection.selectAll(\"g.node\"); \n\n svgNodes.each(function(v) {\n var node = g.node(v);\n var thisGroup = d3.select(this);\n util.applyClass(thisGroup, node[\"class\"],\n (thisGroup.classed(\"update\") ? \"update \" : \"\") + \"node\");\n\n thisGroup.select(\"g.label\").remove();\n var labelGroup = thisGroup.append(\"g\").attr(\"class\", \"label\");\n var labelDom = addLabel(labelGroup, node);\n var shape = shapes[node.shape];\n var bbox = _.pick(labelDom.node().getBBox(), \"width\", \"height\");\n\n node.elem = this;\n\n if (node.id) { thisGroup.attr(\"id\", node.id); }\n if (node.labelId) { labelGroup.attr(\"id\", node.labelId); }\n\n if (_.has(node, \"width\")) { bbox.width = node.width; }\n if (_.has(node, \"height\")) { bbox.height = node.height; }\n\n bbox.width += node.paddingLeft + node.paddingRight;\n bbox.height += node.paddingTop + node.paddingBottom;\n labelGroup.attr(\"transform\", \"translate(\" +\n ((node.paddingLeft - node.paddingRight) / 2) + \",\" +\n ((node.paddingTop - node.paddingBottom) / 2) + \")\");\n\n var root = d3.select(this);\n root.select(\".label-container\").remove();\n var shapeSvg = shape(root, bbox, node).classed(\"label-container\", true);\n util.applyStyle(shapeSvg, node.style);\n\n var shapeBBox = shapeSvg.node().getBBox();\n node.width = shapeBBox.width;\n node.height = shapeBBox.height;\n });\n\n var exitSelection;\n\n if (svgNodes.exit) {\n exitSelection = svgNodes.exit();\n } else {\n exitSelection = svgNodes.selectAll(null); // empty selection\n }\n\n util.applyTransition(exitSelection, g)\n .style(\"opacity\", 0)\n .remove();\n\n return svgNodes;\n}\n","// Stub to get D3 either via NPM or from the global object\nvar d3;\n\nif (!d3) {\n if (typeof require === \"function\") {\n try {\n d3 = require(\"d3\");\n }\n catch (e) {\n // continue regardless of error\n }\n }\n}\n\nif (!d3) {\n d3 = window.d3;\n}\n\nmodule.exports = d3;\n","/* global window */\n\nvar dagre;\n\nif (typeof require === \"function\") {\n try {\n dagre = require(\"dagre\");\n } catch (e) {\n // continue regardless of error\n }\n}\n\nif (!dagre) {\n dagre = window.dagre;\n}\n\nmodule.exports = dagre;\n","/* global window */\n\nvar graphlib;\n\nif (typeof require === \"function\") {\n try {\n graphlib = require(\"graphlib\");\n }\n catch (e) {\n // continue regardless of error\n }\n}\n\nif (!graphlib) {\n graphlib = window.graphlib;\n}\n\nmodule.exports = graphlib;\n","module.exports = {\n node: require(\"./intersect-node\"),\n circle: require(\"./intersect-circle\"),\n ellipse: require(\"./intersect-ellipse\"),\n polygon: require(\"./intersect-polygon\"),\n rect: require(\"./intersect-rect\")\n};\n","var intersectEllipse = require(\"./intersect-ellipse\");\n\nmodule.exports = intersectCircle;\n\nfunction intersectCircle(node, rx, point) {\n return intersectEllipse(node, rx, rx, point);\n}\n","module.exports = intersectEllipse;\n\nfunction intersectEllipse(node, rx, ry, point) {\n // Formulae from: http://mathworld.wolfram.com/Ellipse-LineIntersection.html\n\n var cx = node.x;\n var cy = node.y;\n\n var px = cx - point.x;\n var py = cy - point.y;\n\n var det = Math.sqrt(rx * rx * py * py + ry * ry * px * px);\n\n var dx = Math.abs(rx * ry * px / det);\n if (point.x < cx) {\n dx = -dx;\n }\n var dy = Math.abs(rx * ry * py / det);\n if (point.y < cy) {\n dy = -dy;\n }\n\n return {x: cx + dx, y: cy + dy};\n}\n\n","module.exports = intersectLine;\n\n/*\n * Returns the point at which two lines, p and q, intersect or returns\n * undefined if they do not intersect.\n */\nfunction intersectLine(p1, p2, q1, q2) {\n // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,\n // p7 and p473.\n\n var a1, a2, b1, b2, c1, c2;\n var r1, r2 , r3, r4;\n var denom, offset, num;\n var x, y;\n\n // Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x +\n // b1 y + c1 = 0.\n a1 = p2.y - p1.y;\n b1 = p1.x - p2.x;\n c1 = (p2.x * p1.y) - (p1.x * p2.y);\n\n // Compute r3 and r4.\n r3 = ((a1 * q1.x) + (b1 * q1.y) + c1);\n r4 = ((a1 * q2.x) + (b1 * q2.y) + c1);\n\n // Check signs of r3 and r4. If both point 3 and point 4 lie on\n // same side of line 1, the line segments do not intersect.\n if ((r3 !== 0) && (r4 !== 0) && sameSign(r3, r4)) {\n return /*DONT_INTERSECT*/;\n }\n\n // Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0\n a2 = q2.y - q1.y;\n b2 = q1.x - q2.x;\n c2 = (q2.x * q1.y) - (q1.x * q2.y);\n\n // Compute r1 and r2\n r1 = (a2 * p1.x) + (b2 * p1.y) + c2;\n r2 = (a2 * p2.x) + (b2 * p2.y) + c2;\n\n // Check signs of r1 and r2. If both point 1 and point 2 lie\n // on same side of second line segment, the line segments do\n // not intersect.\n if ((r1 !== 0) && (r2 !== 0) && (sameSign(r1, r2))) {\n return /*DONT_INTERSECT*/;\n }\n\n // Line segments intersect: compute intersection point.\n denom = (a1 * b2) - (a2 * b1);\n if (denom === 0) {\n return /*COLLINEAR*/;\n }\n\n offset = Math.abs(denom / 2);\n\n // The denom/2 is to get rounding instead of truncating. It\n // is added or subtracted to the numerator, depending upon the\n // sign of the numerator.\n num = (b1 * c2) - (b2 * c1);\n x = (num < 0) ? ((num - offset) / denom) : ((num + offset) / denom);\n\n num = (a2 * c1) - (a1 * c2);\n y = (num < 0) ? ((num - offset) / denom) : ((num + offset) / denom);\n\n return { x: x, y: y };\n}\n\nfunction sameSign(r1, r2) {\n return r1 * r2 > 0;\n}\n","module.exports = intersectNode;\n\nfunction intersectNode(node, point) {\n return node.intersect(point);\n}\n","/* eslint \"no-console\": off */\n\nvar intersectLine = require(\"./intersect-line\");\n\nmodule.exports = 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 polyPoints.forEach(function(entry) {\n minX = Math.min(minX, entry.x);\n minY = Math.min(minY, entry.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(node, point,\n {x: left + p1.x, y: top + p1.y}, {x: left + p2.x, y: top + p2.y});\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","module.exports = intersectRect;\n\nfunction intersectRect(node, point) {\n var x = node.x;\n var y = node.y;\n\n // Rectangle intersection algorithm from:\n // http://math.stackexchange.com/questions/108113/find-edge-between-two-boxes\n var dx = point.x - x;\n var dy = point.y - y;\n var w = node.width / 2;\n var h = node.height / 2;\n\n var sx, sy;\n if (Math.abs(dy) * w > Math.abs(dx) * h) {\n // Intersection is top or bottom of rect.\n if (dy < 0) {\n h = -h;\n }\n sx = dy === 0 ? 0 : h * dx / dy;\n sy = h;\n } else {\n // Intersection is left or right of rect.\n if (dx < 0) {\n w = -w;\n }\n sx = w;\n sy = dx === 0 ? 0 : w * dy / dx;\n }\n\n return {x: x + sx, y: y + sy};\n}\n","var util = require(\"../util\");\n\nmodule.exports = addHtmlLabel;\n\nfunction addHtmlLabel(root, node) {\n var fo = root\n .append(\"foreignObject\")\n .attr(\"width\", \"100000\");\n\n var div = fo\n .append(\"xhtml:div\");\n div.attr(\"xmlns\", \"http://www.w3.org/1999/xhtml\");\n\n var label = node.label;\n switch(typeof label) {\n case \"function\":\n div.insert(label);\n break;\n case \"object\":\n // Currently we assume this is a DOM object.\n div.insert(function() { return label; });\n break;\n default: div.html(label);\n }\n\n util.applyStyle(div, node.labelStyle);\n div.style(\"display\", \"inline-block\");\n // Fix for firefox\n div.style(\"white-space\", \"nowrap\");\n\n var client = div.node().getBoundingClientRect();\n fo\n .attr(\"width\", client.width)\n .attr(\"height\", client.height); \n\n return fo;\n}\n","var addTextLabel = require(\"./add-text-label\");\nvar addHtmlLabel = require(\"./add-html-label\");\nvar addSVGLabel = require(\"./add-svg-label\");\n\nmodule.exports = addLabel;\n\nfunction addLabel(root, node, location) {\n var label = node.label;\n var labelSvg = root.append(\"g\");\n\n // Allow the label to be a string, a function that returns a DOM element, or\n // a DOM element itself.\n if (node.labelType === \"svg\") {\n addSVGLabel(labelSvg, node);\n } else if (typeof label !== \"string\" || node.labelType === \"html\") {\n addHtmlLabel(labelSvg, node);\n } else {\n addTextLabel(labelSvg, node);\n }\n\n var labelBBox = labelSvg.node().getBBox();\n var y;\n switch(location) {\n case \"top\":\n y = (-node.height / 2);\n break;\n case \"bottom\":\n y = (node.height / 2) - labelBBox.height;\n break;\n default:\n y = (-labelBBox.height / 2);\n }\n labelSvg.attr(\n \"transform\",\n \"translate(\" + (-labelBBox.width / 2) + \",\" + y + \")\");\n\n return labelSvg;\n}\n","var util = require(\"../util\");\n\nmodule.exports = addSVGLabel;\n\nfunction addSVGLabel(root, node) {\n var domNode = root;\n\n domNode.node().appendChild(node.label);\n\n util.applyStyle(domNode, node.labelStyle);\n\n return domNode;\n}\n","var util = require(\"../util\");\n\nmodule.exports = addTextLabel;\n\n/*\n * Attaches a text label to the specified root. Handles escape sequences.\n */\nfunction addTextLabel(root, node) {\n var domNode = root.append(\"text\");\n\n var lines = processEscapeSequences(node.label).split(\"\\n\");\n for (var i = 0; i < lines.length; i++) {\n domNode.append(\"tspan\")\n .attr(\"xml:space\", \"preserve\")\n .attr(\"dy\", \"1em\")\n .attr(\"x\", \"1\")\n .text(lines[i]);\n }\n\n util.applyStyle(domNode, node.labelStyle);\n\n return domNode;\n}\n\nfunction processEscapeSequences(text) {\n var newText = \"\";\n var escaped = false;\n var ch;\n for (var i = 0; i < text.length; ++i) {\n ch = text[i];\n if (escaped) {\n switch(ch) {\n case \"n\": newText += \"\\n\"; break;\n default: newText += ch;\n }\n escaped = false;\n } else if (ch === \"\\\\\") {\n escaped = true;\n } else {\n newText += ch;\n }\n }\n return newText;\n}\n","/* global window */\n\nvar lodash;\n\nif (typeof require === \"function\") {\n try {\n lodash = {\n defaults: require(\"lodash/defaults\"),\n each: require(\"lodash/each\"),\n isFunction: require(\"lodash/isFunction\"),\n isPlainObject: require(\"lodash/isPlainObject\"),\n pick: require(\"lodash/pick\"),\n has: require(\"lodash/has\"),\n range: require(\"lodash/range\"),\n uniqueId: require(\"lodash/uniqueId\")\n };\n }\n catch (e) {\n // continue regardless of error\n }\n}\n\nif (!lodash) {\n lodash = window._;\n}\n\nmodule.exports = lodash;\n","\"use strict\";\n\nvar util = require(\"./util\");\nvar d3 = require(\"./d3\");\n\nmodule.exports = positionClusters;\n\nfunction positionClusters(selection, g) {\n var created = selection.filter(function() { return !d3.select(this).classed(\"update\"); });\n\n function translate(v) {\n var node = g.node(v);\n return \"translate(\" + node.x + \",\" + node.y + \")\";\n }\n\n created.attr(\"transform\", translate);\n\n util.applyTransition(selection, g)\n .style(\"opacity\", 1)\n .attr(\"transform\", translate);\n\n util.applyTransition(created.selectAll(\"rect\"), g)\n .attr(\"width\", function(v) { return g.node(v).width; })\n .attr(\"height\", function(v) { return g.node(v).height; })\n .attr(\"x\", function(v) {\n var node = g.node(v);\n return -node.width / 2;\n })\n .attr(\"y\", function(v) {\n var node = g.node(v);\n return -node.height / 2;\n });\n}\n","\"use strict\";\n\nvar util = require(\"./util\");\nvar d3 = require(\"./d3\");\nvar _ = require(\"./lodash\");\n\nmodule.exports = positionEdgeLabels;\n\nfunction positionEdgeLabels(selection, g) {\n var created = selection.filter(function() { return !d3.select(this).classed(\"update\"); });\n\n function translate(e) {\n var edge = g.edge(e);\n return _.has(edge, \"x\") ? \"translate(\" + edge.x + \",\" + edge.y + \")\" : \"\";\n }\n\n created.attr(\"transform\", translate);\n\n util.applyTransition(selection, g)\n .style(\"opacity\", 1)\n .attr(\"transform\", translate);\n}\n","\"use strict\";\n\nvar util = require(\"./util\");\nvar d3 = require(\"./d3\");\n\nmodule.exports = positionNodes;\n\nfunction positionNodes(selection, g) {\n var created = selection.filter(function() { return !d3.select(this).classed(\"update\"); });\n\n function translate(v) {\n var node = g.node(v);\n return \"translate(\" + node.x + \",\" + node.y + \")\";\n }\n\n created.attr(\"transform\", translate);\n\n util.applyTransition(selection, g)\n .style(\"opacity\", 1)\n .attr(\"transform\", translate);\n}\n","var _ = require(\"./lodash\");\nvar d3 = require(\"./d3\");\nvar layout = require(\"./dagre\").layout;\n\nmodule.exports = render;\n\n// This design is based on http://bost.ocks.org/mike/chart/.\nfunction render() {\n var createNodes = require(\"./create-nodes\");\n var createClusters = require(\"./create-clusters\");\n var createEdgeLabels = require(\"./create-edge-labels\");\n var createEdgePaths = require(\"./create-edge-paths\");\n var positionNodes = require(\"./position-nodes\");\n var positionEdgeLabels = require(\"./position-edge-labels\");\n var positionClusters = require(\"./position-clusters\");\n var shapes = require(\"./shapes\");\n var arrows = require(\"./arrows\");\n\n var fn = function(svg, g) {\n preProcessGraph(g);\n\n var outputGroup = createOrSelectGroup(svg, \"output\");\n var clustersGroup = createOrSelectGroup(outputGroup, \"clusters\");\n var edgePathsGroup = createOrSelectGroup(outputGroup, \"edgePaths\");\n var edgeLabels = createEdgeLabels(createOrSelectGroup(outputGroup, \"edgeLabels\"), g);\n var nodes = createNodes(createOrSelectGroup(outputGroup, \"nodes\"), g, shapes);\n\n layout(g);\n\n positionNodes(nodes, g);\n positionEdgeLabels(edgeLabels, g);\n createEdgePaths(edgePathsGroup, g, arrows);\n\n var clusters = createClusters(clustersGroup, g);\n positionClusters(clusters, g);\n\n postProcessGraph(g);\n };\n\n fn.createNodes = function(value) {\n if (!arguments.length) return createNodes;\n createNodes = value;\n return fn;\n };\n\n fn.createClusters = function(value) {\n if (!arguments.length) return createClusters;\n createClusters = value;\n return fn;\n };\n\n fn.createEdgeLabels = function(value) {\n if (!arguments.length) return createEdgeLabels;\n createEdgeLabels = value;\n return fn;\n };\n\n fn.createEdgePaths = function(value) {\n if (!arguments.length) return createEdgePaths;\n createEdgePaths = value;\n return fn;\n };\n\n fn.shapes = function(value) {\n if (!arguments.length) return shapes;\n shapes = value;\n return fn;\n };\n\n fn.arrows = function(value) {\n if (!arguments.length) return arrows;\n arrows = value;\n return fn;\n };\n\n return fn;\n}\n\nvar NODE_DEFAULT_ATTRS = {\n paddingLeft: 10,\n paddingRight: 10,\n paddingTop: 10,\n paddingBottom: 10,\n rx: 0,\n ry: 0,\n shape: \"rect\"\n};\n\nvar EDGE_DEFAULT_ATTRS = {\n arrowhead: \"normal\",\n curve: d3.curveLinear\n};\n\nfunction preProcessGraph(g) {\n g.nodes().forEach(function(v) {\n var node = g.node(v);\n if (!_.has(node, \"label\") && !g.children(v).length) { node.label = v; }\n\n if (_.has(node, \"paddingX\")) {\n _.defaults(node, {\n paddingLeft: node.paddingX,\n paddingRight: node.paddingX\n });\n }\n\n if (_.has(node, \"paddingY\")) {\n _.defaults(node, {\n paddingTop: node.paddingY,\n paddingBottom: node.paddingY\n });\n }\n\n if (_.has(node, \"padding\")) {\n _.defaults(node, {\n paddingLeft: node.padding,\n paddingRight: node.padding,\n paddingTop: node.padding,\n paddingBottom: node.padding\n });\n }\n\n _.defaults(node, NODE_DEFAULT_ATTRS);\n\n _.each([\"paddingLeft\", \"paddingRight\", \"paddingTop\", \"paddingBottom\"], function(k) {\n node[k] = Number(node[k]);\n });\n\n // Save dimensions for restore during post-processing\n if (_.has(node, \"width\")) { node._prevWidth = node.width; }\n if (_.has(node, \"height\")) { node._prevHeight = node.height; }\n });\n\n g.edges().forEach(function(e) {\n var edge = g.edge(e);\n if (!_.has(edge, \"label\")) { edge.label = \"\"; }\n _.defaults(edge, EDGE_DEFAULT_ATTRS);\n });\n}\n\nfunction postProcessGraph(g) {\n _.each(g.nodes(), function(v) {\n var node = g.node(v);\n\n // Restore original dimensions\n if (_.has(node, \"_prevWidth\")) {\n node.width = node._prevWidth;\n } else {\n delete node.width;\n }\n\n if (_.has(node, \"_prevHeight\")) {\n node.height = node._prevHeight;\n } else {\n delete node.height;\n }\n\n delete node._prevWidth;\n delete node._prevHeight;\n });\n}\n\nfunction createOrSelectGroup(root, name) {\n var selection = root.select(\"g.\" + name);\n if (selection.empty()) {\n selection = root.append(\"g\").attr(\"class\", name);\n }\n return selection;\n}\n","\"use strict\";\n\nvar intersectRect = require(\"./intersect/intersect-rect\");\nvar intersectEllipse = require(\"./intersect/intersect-ellipse\");\nvar intersectCircle = require(\"./intersect/intersect-circle\");\nvar intersectPolygon = require(\"./intersect/intersect-polygon\");\n\nmodule.exports = {\n rect: rect,\n ellipse: ellipse,\n circle: circle,\n diamond: diamond\n};\n\nfunction rect(parent, bbox, node) {\n var shapeSvg = parent.insert(\"rect\", \":first-child\")\n .attr(\"rx\", node.rx)\n .attr(\"ry\", node.ry)\n .attr(\"x\", -bbox.width / 2)\n .attr(\"y\", -bbox.height / 2)\n .attr(\"width\", bbox.width)\n .attr(\"height\", bbox.height);\n\n node.intersect = function(point) {\n return intersectRect(node, point);\n };\n\n return shapeSvg;\n}\n\nfunction ellipse(parent, bbox, node) {\n var rx = bbox.width / 2;\n var ry = bbox.height / 2;\n var shapeSvg = parent.insert(\"ellipse\", \":first-child\")\n .attr(\"x\", -bbox.width / 2)\n .attr(\"y\", -bbox.height / 2)\n .attr(\"rx\", rx)\n .attr(\"ry\", ry);\n\n node.intersect = function(point) {\n return intersectEllipse(node, rx, ry, point);\n };\n\n return shapeSvg;\n}\n\nfunction circle(parent, bbox, node) {\n var r = Math.max(bbox.width, bbox.height) / 2;\n var shapeSvg = parent.insert(\"circle\", \":first-child\")\n .attr(\"x\", -bbox.width / 2)\n .attr(\"y\", -bbox.height / 2)\n .attr(\"r\", r);\n\n node.intersect = function(point) {\n return intersectCircle(node, r, point);\n };\n\n return shapeSvg;\n}\n\n// Circumscribe an ellipse for the bounding box with a diamond shape. I derived\n// the function to calculate the diamond shape from:\n// http://mathforum.org/kb/message.jspa?messageID=3750236\nfunction diamond(parent, bbox, node) {\n var w = (bbox.width * Math.SQRT2) / 2;\n var h = (bbox.height * Math.SQRT2) / 2;\n var points = [\n { x: 0, y: -h },\n { x: -w, y: 0 },\n { x: 0, y: h },\n { x: w, y: 0 }\n ];\n var shapeSvg = parent.insert(\"polygon\", \":first-child\")\n .attr(\"points\", points.map(function(p) { return p.x + \",\" + p.y; }).join(\" \"));\n\n node.intersect = function(p) {\n return intersectPolygon(node, points, p);\n };\n\n return shapeSvg;\n}\n","var _ = require(\"./lodash\");\n\n// Public utility functions\nmodule.exports = {\n isSubgraph: isSubgraph,\n edgeToId: edgeToId,\n applyStyle: applyStyle,\n applyClass: applyClass,\n applyTransition: applyTransition\n};\n\n/*\n * Returns true if the specified node in the graph is a subgraph node. A\n * subgraph node is one that contains other nodes.\n */\nfunction isSubgraph(g, v) {\n return !!g.children(v).length;\n}\n\nfunction edgeToId(e) {\n return escapeId(e.v) + \":\" + escapeId(e.w) + \":\" + escapeId(e.name);\n}\n\nvar ID_DELIM = /:/g;\nfunction escapeId(str) {\n return str ? String(str).replace(ID_DELIM, \"\\\\:\") : \"\";\n}\n\nfunction applyStyle(dom, styleFn) {\n if (styleFn) {\n dom.attr(\"style\", styleFn);\n }\n}\n\nfunction applyClass(dom, classFn, otherClasses) {\n if (classFn) {\n dom\n .attr(\"class\", classFn)\n .attr(\"class\", otherClasses + \" \" + dom.attr(\"class\"));\n }\n}\n\nfunction applyTransition(selection, g) {\n var graph = g.graph();\n\n if (_.isPlainObject(graph)) {\n var transition = graph.transition;\n if (_.isFunction(transition)) {\n return transition(selection);\n }\n }\n\n return selection;\n}\n","module.exports = \"0.6.4\";\n","/*\nCopyright (c) 2012-2014 Chris Pettitt\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n*/\n\nmodule.exports = {\n graphlib: require(\"./lib/graphlib\"),\n\n layout: require(\"./lib/layout\"),\n debug: require(\"./lib/debug\"),\n util: {\n time: require(\"./lib/util\").time,\n notime: require(\"./lib/util\").notime\n },\n version: require(\"./lib/version\")\n};\n","\"use strict\";\n\nvar _ = require(\"./lodash\");\nvar greedyFAS = require(\"./greedy-fas\");\n\nmodule.exports = {\n run: run,\n undo: undo\n};\n\nfunction run(g) {\n var fas = (g.graph().acyclicer === \"greedy\"\n ? greedyFAS(g, weightFn(g))\n : dfsFAS(g));\n _.forEach(fas, function(e) {\n var label = g.edge(e);\n g.removeEdge(e);\n label.forwardName = e.name;\n label.reversed = true;\n g.setEdge(e.w, e.v, label, _.uniqueId(\"rev\"));\n });\n\n function weightFn(g) {\n return function(e) {\n return g.edge(e).weight;\n };\n }\n}\n\nfunction dfsFAS(g) {\n var fas = [];\n var stack = {};\n var visited = {};\n\n function dfs(v) {\n if (_.has(visited, v)) {\n return;\n }\n visited[v] = true;\n stack[v] = true;\n _.forEach(g.outEdges(v), function(e) {\n if (_.has(stack, e.w)) {\n fas.push(e);\n } else {\n dfs(e.w);\n }\n });\n delete stack[v];\n }\n\n _.forEach(g.nodes(), dfs);\n return fas;\n}\n\nfunction undo(g) {\n _.forEach(g.edges(), function(e) {\n var label = g.edge(e);\n if (label.reversed) {\n g.removeEdge(e);\n\n var forwardName = label.forwardName;\n delete label.reversed;\n delete label.forwardName;\n g.setEdge(e.w, e.v, label, forwardName);\n }\n });\n}\n","var _ = require(\"./lodash\");\nvar util = require(\"./util\");\n\nmodule.exports = addBorderSegments;\n\nfunction addBorderSegments(g) {\n function dfs(v) {\n var children = g.children(v);\n var node = g.node(v);\n if (children.length) {\n _.forEach(children, dfs);\n }\n\n if (_.has(node, \"minRank\")) {\n node.borderLeft = [];\n node.borderRight = [];\n for (var rank = node.minRank, maxRank = node.maxRank + 1;\n rank < maxRank;\n ++rank) {\n addBorderNode(g, \"borderLeft\", \"_bl\", v, node, rank);\n addBorderNode(g, \"borderRight\", \"_br\", v, node, rank);\n }\n }\n }\n\n _.forEach(g.children(), dfs);\n}\n\nfunction addBorderNode(g, prop, prefix, sg, sgNode, rank) {\n var label = { width: 0, height: 0, rank: rank, borderType: prop };\n var prev = sgNode[prop][rank - 1];\n var curr = util.addDummyNode(g, \"border\", label, prefix);\n sgNode[prop][rank] = curr;\n g.setParent(curr, sg);\n if (prev) {\n g.setEdge(prev, curr, { weight: 1 });\n }\n}\n","\"use strict\";\n\nvar _ = require(\"./lodash\");\n\nmodule.exports = {\n adjust: adjust,\n undo: undo\n};\n\nfunction adjust(g) {\n var rankDir = g.graph().rankdir.toLowerCase();\n if (rankDir === \"lr\" || rankDir === \"rl\") {\n swapWidthHeight(g);\n }\n}\n\nfunction undo(g) {\n var rankDir = g.graph().rankdir.toLowerCase();\n if (rankDir === \"bt\" || rankDir === \"rl\") {\n reverseY(g);\n }\n\n if (rankDir === \"lr\" || rankDir === \"rl\") {\n swapXY(g);\n swapWidthHeight(g);\n }\n}\n\nfunction swapWidthHeight(g) {\n _.forEach(g.nodes(), function(v) { swapWidthHeightOne(g.node(v)); });\n _.forEach(g.edges(), function(e) { swapWidthHeightOne(g.edge(e)); });\n}\n\nfunction swapWidthHeightOne(attrs) {\n var w = attrs.width;\n attrs.width = attrs.height;\n attrs.height = w;\n}\n\nfunction reverseY(g) {\n _.forEach(g.nodes(), function(v) { reverseYOne(g.node(v)); });\n\n _.forEach(g.edges(), function(e) {\n var edge = g.edge(e);\n _.forEach(edge.points, reverseYOne);\n if (_.has(edge, \"y\")) {\n reverseYOne(edge);\n }\n });\n}\n\nfunction reverseYOne(attrs) {\n attrs.y = -attrs.y;\n}\n\nfunction swapXY(g) {\n _.forEach(g.nodes(), function(v) { swapXYOne(g.node(v)); });\n\n _.forEach(g.edges(), function(e) {\n var edge = g.edge(e);\n _.forEach(edge.points, swapXYOne);\n if (_.has(edge, \"x\")) {\n swapXYOne(edge);\n }\n });\n}\n\nfunction swapXYOne(attrs) {\n var x = attrs.x;\n attrs.x = attrs.y;\n attrs.y = x;\n}\n","/*\n * Simple doubly linked list implementation derived from Cormen, et al.,\n * \"Introduction to Algorithms\".\n */\n\nmodule.exports = List;\n\nfunction List() {\n var sentinel = {};\n sentinel._next = sentinel._prev = sentinel;\n this._sentinel = sentinel;\n}\n\nList.prototype.dequeue = function() {\n var sentinel = this._sentinel;\n var entry = sentinel._prev;\n if (entry !== sentinel) {\n unlink(entry);\n return entry;\n }\n};\n\nList.prototype.enqueue = function(entry) {\n var sentinel = this._sentinel;\n if (entry._prev && entry._next) {\n unlink(entry);\n }\n entry._next = sentinel._next;\n sentinel._next._prev = entry;\n sentinel._next = entry;\n entry._prev = sentinel;\n};\n\nList.prototype.toString = function() {\n var strs = [];\n var sentinel = this._sentinel;\n var curr = sentinel._prev;\n while (curr !== sentinel) {\n strs.push(JSON.stringify(curr, filterOutLinks));\n curr = curr._prev;\n }\n return \"[\" + strs.join(\", \") + \"]\";\n};\n\nfunction unlink(entry) {\n entry._prev._next = entry._next;\n entry._next._prev = entry._prev;\n delete entry._next;\n delete entry._prev;\n}\n\nfunction filterOutLinks(k, v) {\n if (k !== \"_next\" && k !== \"_prev\") {\n return v;\n }\n}\n","var _ = require(\"./lodash\");\nvar util = require(\"./util\");\nvar Graph = require(\"./graphlib\").Graph;\n\nmodule.exports = {\n debugOrdering: debugOrdering\n};\n\n/* istanbul ignore next */\nfunction debugOrdering(g) {\n var layerMatrix = util.buildLayerMatrix(g);\n\n var h = new Graph({ compound: true, multigraph: true }).setGraph({});\n\n _.forEach(g.nodes(), function(v) {\n h.setNode(v, { label: v });\n h.setParent(v, \"layer\" + g.node(v).rank);\n });\n\n _.forEach(g.edges(), function(e) {\n h.setEdge(e.v, e.w, {}, e.name);\n });\n\n _.forEach(layerMatrix, function(layer, i) {\n var layerV = \"layer\" + i;\n h.setNode(layerV, { rank: \"same\" });\n _.reduce(layer, function(u, v) {\n h.setEdge(u, v, { style: \"invis\" });\n return v;\n });\n });\n\n return h;\n}\n","/* global window */\n\nvar graphlib;\n\nif (typeof require === \"function\") {\n try {\n graphlib = require(\"graphlib\");\n } catch (e) {\n // continue regardless of error\n }\n}\n\nif (!graphlib) {\n graphlib = window.graphlib;\n}\n\nmodule.exports = graphlib;\n","var _ = require(\"./lodash\");\nvar Graph = require(\"./graphlib\").Graph;\nvar List = require(\"./data/list\");\n\n/*\n * A greedy heuristic for finding a feedback arc set for a graph. A feedback\n * arc set is a set of edges that can be removed to make a graph acyclic.\n * The algorithm comes from: P. Eades, X. Lin, and W. F. Smyth, \"A fast and\n * effective heuristic for the feedback arc set problem.\" This implementation\n * adjusts that from the paper to allow for weighted edges.\n */\nmodule.exports = greedyFAS;\n\nvar DEFAULT_WEIGHT_FN = _.constant(1);\n\nfunction greedyFAS(g, weightFn) {\n if (g.nodeCount() <= 1) {\n return [];\n }\n var state = buildState(g, weightFn || DEFAULT_WEIGHT_FN);\n var results = doGreedyFAS(state.graph, state.buckets, state.zeroIdx);\n\n // Expand multi-edges\n return _.flatten(_.map(results, function(e) {\n return g.outEdges(e.v, e.w);\n }), true);\n}\n\nfunction doGreedyFAS(g, buckets, zeroIdx) {\n var results = [];\n var sources = buckets[buckets.length - 1];\n var sinks = buckets[0];\n\n var entry;\n while (g.nodeCount()) {\n while ((entry = sinks.dequeue())) { removeNode(g, buckets, zeroIdx, entry); }\n while ((entry = sources.dequeue())) { removeNode(g, buckets, zeroIdx, entry); }\n if (g.nodeCount()) {\n for (var i = buckets.length - 2; i > 0; --i) {\n entry = buckets[i].dequeue();\n if (entry) {\n results = results.concat(removeNode(g, buckets, zeroIdx, entry, true));\n break;\n }\n }\n }\n }\n\n return results;\n}\n\nfunction removeNode(g, buckets, zeroIdx, entry, collectPredecessors) {\n var results = collectPredecessors ? [] : undefined;\n\n _.forEach(g.inEdges(entry.v), function(edge) {\n var weight = g.edge(edge);\n var uEntry = g.node(edge.v);\n\n if (collectPredecessors) {\n results.push({ v: edge.v, w: edge.w });\n }\n\n uEntry.out -= weight;\n assignBucket(buckets, zeroIdx, uEntry);\n });\n\n _.forEach(g.outEdges(entry.v), function(edge) {\n var weight = g.edge(edge);\n var w = edge.w;\n var wEntry = g.node(w);\n wEntry[\"in\"] -= weight;\n assignBucket(buckets, zeroIdx, wEntry);\n });\n\n g.removeNode(entry.v);\n\n return results;\n}\n\nfunction buildState(g, weightFn) {\n var fasGraph = new Graph();\n var maxIn = 0;\n var maxOut = 0;\n\n _.forEach(g.nodes(), function(v) {\n fasGraph.setNode(v, { v: v, \"in\": 0, out: 0 });\n });\n\n // Aggregate weights on nodes, but also sum the weights across multi-edges\n // into a single edge for the fasGraph.\n _.forEach(g.edges(), function(e) {\n var prevWeight = fasGraph.edge(e.v, e.w) || 0;\n var weight = weightFn(e);\n var edgeWeight = prevWeight + weight;\n fasGraph.setEdge(e.v, e.w, edgeWeight);\n maxOut = Math.max(maxOut, fasGraph.node(e.v).out += weight);\n maxIn = Math.max(maxIn, fasGraph.node(e.w)[\"in\"] += weight);\n });\n\n var buckets = _.range(maxOut + maxIn + 3).map(function() { return new List(); });\n var zeroIdx = maxIn + 1;\n\n _.forEach(fasGraph.nodes(), function(v) {\n assignBucket(buckets, zeroIdx, fasGraph.node(v));\n });\n\n return { graph: fasGraph, buckets: buckets, zeroIdx: zeroIdx };\n}\n\nfunction assignBucket(buckets, zeroIdx, entry) {\n if (!entry.out) {\n buckets[0].enqueue(entry);\n } else if (!entry[\"in\"]) {\n buckets[buckets.length - 1].enqueue(entry);\n } else {\n buckets[entry.out - entry[\"in\"] + zeroIdx].enqueue(entry);\n }\n}\n","\"use strict\";\n\nvar _ = require(\"./lodash\");\nvar acyclic = require(\"./acyclic\");\nvar normalize = require(\"./normalize\");\nvar rank = require(\"./rank\");\nvar normalizeRanks = require(\"./util\").normalizeRanks;\nvar parentDummyChains = require(\"./parent-dummy-chains\");\nvar removeEmptyRanks = require(\"./util\").removeEmptyRanks;\nvar nestingGraph = require(\"./nesting-graph\");\nvar addBorderSegments = require(\"./add-border-segments\");\nvar coordinateSystem = require(\"./coordinate-system\");\nvar order = require(\"./order\");\nvar position = require(\"./position\");\nvar util = require(\"./util\");\nvar Graph = require(\"./graphlib\").Graph;\n\nmodule.exports = layout;\n\nfunction layout(g, opts) {\n var time = opts && opts.debugTiming ? util.time : util.notime;\n time(\"layout\", function() {\n var layoutGraph = \n time(\" buildLayoutGraph\", function() { return buildLayoutGraph(g); });\n time(\" runLayout\", function() { runLayout(layoutGraph, time); });\n time(\" updateInputGraph\", function() { updateInputGraph(g, layoutGraph); });\n });\n}\n\nfunction runLayout(g, time) {\n time(\" makeSpaceForEdgeLabels\", function() { makeSpaceForEdgeLabels(g); });\n time(\" removeSelfEdges\", function() { removeSelfEdges(g); });\n time(\" acyclic\", function() { acyclic.run(g); });\n time(\" nestingGraph.run\", function() { nestingGraph.run(g); });\n time(\" rank\", function() { rank(util.asNonCompoundGraph(g)); });\n time(\" injectEdgeLabelProxies\", function() { injectEdgeLabelProxies(g); });\n time(\" removeEmptyRanks\", function() { removeEmptyRanks(g); });\n time(\" nestingGraph.cleanup\", function() { nestingGraph.cleanup(g); });\n time(\" normalizeRanks\", function() { normalizeRanks(g); });\n time(\" assignRankMinMax\", function() { assignRankMinMax(g); });\n time(\" removeEdgeLabelProxies\", function() { removeEdgeLabelProxies(g); });\n time(\" normalize.run\", function() { normalize.run(g); });\n time(\" parentDummyChains\", function() { parentDummyChains(g); });\n time(\" addBorderSegments\", function() { addBorderSegments(g); });\n time(\" order\", function() { order(g); });\n time(\" insertSelfEdges\", function() { insertSelfEdges(g); });\n time(\" adjustCoordinateSystem\", function() { coordinateSystem.adjust(g); });\n time(\" position\", function() { position(g); });\n time(\" positionSelfEdges\", function() { positionSelfEdges(g); });\n time(\" removeBorderNodes\", function() { removeBorderNodes(g); });\n time(\" normalize.undo\", function() { normalize.undo(g); });\n time(\" fixupEdgeLabelCoords\", function() { fixupEdgeLabelCoords(g); });\n time(\" undoCoordinateSystem\", function() { coordinateSystem.undo(g); });\n time(\" translateGraph\", function() { translateGraph(g); });\n time(\" assignNodeIntersects\", function() { assignNodeIntersects(g); });\n time(\" reversePoints\", function() { reversePointsForReversedEdges(g); });\n time(\" acyclic.undo\", function() { acyclic.undo(g); });\n}\n\n/*\n * Copies final layout information from the layout graph back to the input\n * graph. This process only copies whitelisted attributes from the layout graph\n * to the input graph, so it serves as a good place to determine what\n * attributes can influence layout.\n */\nfunction updateInputGraph(inputGraph, layoutGraph) {\n _.forEach(inputGraph.nodes(), function(v) {\n var inputLabel = inputGraph.node(v);\n var layoutLabel = layoutGraph.node(v);\n\n if (inputLabel) {\n inputLabel.x = layoutLabel.x;\n inputLabel.y = layoutLabel.y;\n\n if (layoutGraph.children(v).length) {\n inputLabel.width = layoutLabel.width;\n inputLabel.height = layoutLabel.height;\n }\n }\n });\n\n _.forEach(inputGraph.edges(), function(e) {\n var inputLabel = inputGraph.edge(e);\n var layoutLabel = layoutGraph.edge(e);\n\n inputLabel.points = layoutLabel.points;\n if (_.has(layoutLabel, \"x\")) {\n inputLabel.x = layoutLabel.x;\n inputLabel.y = layoutLabel.y;\n }\n });\n\n inputGraph.graph().width = layoutGraph.graph().width;\n inputGraph.graph().height = layoutGraph.graph().height;\n}\n\nvar graphNumAttrs = [\"nodesep\", \"edgesep\", \"ranksep\", \"marginx\", \"marginy\"];\nvar graphDefaults = { ranksep: 50, edgesep: 20, nodesep: 50, rankdir: \"tb\" };\nvar graphAttrs = [\"acyclicer\", \"ranker\", \"rankdir\", \"align\"];\nvar nodeNumAttrs = [\"width\", \"height\"];\nvar nodeDefaults = { width: 0, height: 0 };\nvar edgeNumAttrs = [\"minlen\", \"weight\", \"width\", \"height\", \"labeloffset\"];\nvar edgeDefaults = {\n minlen: 1, weight: 1, width: 0, height: 0,\n labeloffset: 10, labelpos: \"r\"\n};\nvar edgeAttrs = [\"labelpos\"];\n\n/*\n * Constructs a new graph from the input graph, which can be used for layout.\n * This process copies only whitelisted attributes from the input graph to the\n * layout graph. Thus this function serves as a good place to determine what\n * attributes can influence layout.\n */\nfunction buildLayoutGraph(inputGraph) {\n var g = new Graph({ multigraph: true, compound: true });\n var graph = canonicalize(inputGraph.graph());\n\n g.setGraph(_.merge({},\n graphDefaults,\n selectNumberAttrs(graph, graphNumAttrs),\n _.pick(graph, graphAttrs)));\n\n _.forEach(inputGraph.nodes(), function(v) {\n var node = canonicalize(inputGraph.node(v));\n g.setNode(v, _.defaults(selectNumberAttrs(node, nodeNumAttrs), nodeDefaults));\n g.setParent(v, inputGraph.parent(v));\n });\n\n _.forEach(inputGraph.edges(), function(e) {\n var edge = canonicalize(inputGraph.edge(e));\n g.setEdge(e, _.merge({},\n edgeDefaults,\n selectNumberAttrs(edge, edgeNumAttrs),\n _.pick(edge, edgeAttrs)));\n });\n\n return g;\n}\n\n/*\n * This idea comes from the Gansner paper: to account for edge labels in our\n * layout we split each rank in half by doubling minlen and halving ranksep.\n * Then we can place labels at these mid-points between nodes.\n *\n * We also add some minimal padding to the width to push the label for the edge\n * away from the edge itself a bit.\n */\nfunction makeSpaceForEdgeLabels(g) {\n var graph = g.graph();\n graph.ranksep /= 2;\n _.forEach(g.edges(), function(e) {\n var edge = g.edge(e);\n edge.minlen *= 2;\n if (edge.labelpos.toLowerCase() !== \"c\") {\n if (graph.rankdir === \"TB\" || graph.rankdir === \"BT\") {\n edge.width += edge.labeloffset;\n } else {\n edge.height += edge.labeloffset;\n }\n }\n });\n}\n\n/*\n * Creates temporary dummy nodes that capture the rank in which each edge's\n * label is going to, if it has one of non-zero width and height. We do this\n * so that we can safely remove empty ranks while preserving balance for the\n * label's position.\n */\nfunction injectEdgeLabelProxies(g) {\n _.forEach(g.edges(), function(e) {\n var edge = g.edge(e);\n if (edge.width && edge.height) {\n var v = g.node(e.v);\n var w = g.node(e.w);\n var label = { rank: (w.rank - v.rank) / 2 + v.rank, e: e };\n util.addDummyNode(g, \"edge-proxy\", label, \"_ep\");\n }\n });\n}\n\nfunction assignRankMinMax(g) {\n var maxRank = 0;\n _.forEach(g.nodes(), function(v) {\n var node = g.node(v);\n if (node.borderTop) {\n node.minRank = g.node(node.borderTop).rank;\n node.maxRank = g.node(node.borderBottom).rank;\n maxRank = _.max(maxRank, node.maxRank);\n }\n });\n g.graph().maxRank = maxRank;\n}\n\nfunction removeEdgeLabelProxies(g) {\n _.forEach(g.nodes(), function(v) {\n var node = g.node(v);\n if (node.dummy === \"edge-proxy\") {\n g.edge(node.e).labelRank = node.rank;\n g.removeNode(v);\n }\n });\n}\n\nfunction translateGraph(g) {\n var minX = Number.POSITIVE_INFINITY;\n var maxX = 0;\n var minY = Number.POSITIVE_INFINITY;\n var maxY = 0;\n var graphLabel = g.graph();\n var marginX = graphLabel.marginx || 0;\n var marginY = graphLabel.marginy || 0;\n\n function getExtremes(attrs) {\n var x = attrs.x;\n var y = attrs.y;\n var w = attrs.width;\n var h = attrs.height;\n minX = Math.min(minX, x - w / 2);\n maxX = Math.max(maxX, x + w / 2);\n minY = Math.min(minY, y - h / 2);\n maxY = Math.max(maxY, y + h / 2);\n }\n\n _.forEach(g.nodes(), function(v) { getExtremes(g.node(v)); });\n _.forEach(g.edges(), function(e) {\n var edge = g.edge(e);\n if (_.has(edge, \"x\")) {\n getExtremes(edge);\n }\n });\n\n minX -= marginX;\n minY -= marginY;\n\n _.forEach(g.nodes(), function(v) {\n var node = g.node(v);\n node.x -= minX;\n node.y -= minY;\n });\n\n _.forEach(g.edges(), function(e) {\n var edge = g.edge(e);\n _.forEach(edge.points, function(p) {\n p.x -= minX;\n p.y -= minY;\n });\n if (_.has(edge, \"x\")) { edge.x -= minX; }\n if (_.has(edge, \"y\")) { edge.y -= minY; }\n });\n\n graphLabel.width = maxX - minX + marginX;\n graphLabel.height = maxY - minY + marginY;\n}\n\nfunction assignNodeIntersects(g) {\n _.forEach(g.edges(), function(e) {\n var edge = g.edge(e);\n var nodeV = g.node(e.v);\n var nodeW = g.node(e.w);\n var p1, p2;\n if (!edge.points) {\n edge.points = [];\n p1 = nodeW;\n p2 = nodeV;\n } else {\n p1 = edge.points[0];\n p2 = edge.points[edge.points.length - 1];\n }\n edge.points.unshift(util.intersectRect(nodeV, p1));\n edge.points.push(util.intersectRect(nodeW, p2));\n });\n}\n\nfunction fixupEdgeLabelCoords(g) {\n _.forEach(g.edges(), function(e) {\n var edge = g.edge(e);\n if (_.has(edge, \"x\")) {\n if (edge.labelpos === \"l\" || edge.labelpos === \"r\") {\n edge.width -= edge.labeloffset;\n }\n switch (edge.labelpos) {\n case \"l\": edge.x -= edge.width / 2 + edge.labeloffset; break;\n case \"r\": edge.x += edge.width / 2 + edge.labeloffset; break;\n }\n }\n });\n}\n\nfunction reversePointsForReversedEdges(g) {\n _.forEach(g.edges(), function(e) {\n var edge = g.edge(e);\n if (edge.reversed) {\n edge.points.reverse();\n }\n });\n}\n\nfunction removeBorderNodes(g) {\n _.forEach(g.nodes(), function(v) {\n if (g.children(v).length) {\n var node = g.node(v);\n var t = g.node(node.borderTop);\n var b = g.node(node.borderBottom);\n var l = g.node(_.last(node.borderLeft));\n var r = g.node(_.last(node.borderRight));\n\n node.width = Math.abs(r.x - l.x);\n node.height = Math.abs(b.y - t.y);\n node.x = l.x + node.width / 2;\n node.y = t.y + node.height / 2;\n }\n });\n\n _.forEach(g.nodes(), function(v) {\n if (g.node(v).dummy === \"border\") {\n g.removeNode(v);\n }\n });\n}\n\nfunction removeSelfEdges(g) {\n _.forEach(g.edges(), function(e) {\n if (e.v === e.w) {\n var node = g.node(e.v);\n if (!node.selfEdges) {\n node.selfEdges = [];\n }\n node.selfEdges.push({ e: e, label: g.edge(e) });\n g.removeEdge(e);\n }\n });\n}\n\nfunction insertSelfEdges(g) {\n var layers = util.buildLayerMatrix(g);\n _.forEach(layers, function(layer) {\n var orderShift = 0;\n _.forEach(layer, function(v, i) {\n var node = g.node(v);\n node.order = i + orderShift;\n _.forEach(node.selfEdges, function(selfEdge) {\n util.addDummyNode(g, \"selfedge\", {\n width: selfEdge.label.width,\n height: selfEdge.label.height,\n rank: node.rank,\n order: i + (++orderShift),\n e: selfEdge.e,\n label: selfEdge.label\n }, \"_se\");\n });\n delete node.selfEdges;\n });\n });\n}\n\nfunction positionSelfEdges(g) {\n _.forEach(g.nodes(), function(v) {\n var node = g.node(v);\n if (node.dummy === \"selfedge\") {\n var selfNode = g.node(node.e.v);\n var x = selfNode.x + selfNode.width / 2;\n var y = selfNode.y;\n var dx = node.x - x;\n var dy = selfNode.height / 2;\n g.setEdge(node.e, node.label);\n g.removeNode(v);\n node.label.points = [\n { x: x + 2 * dx / 3, y: y - dy },\n { x: x + 5 * dx / 6, y: y - dy },\n { x: x + dx , y: y },\n { x: x + 5 * dx / 6, y: y + dy },\n { x: x + 2 * dx / 3, y: y + dy }\n ];\n node.label.x = node.x;\n node.label.y = node.y;\n }\n });\n}\n\nfunction selectNumberAttrs(obj, attrs) {\n return _.mapValues(_.pick(obj, attrs), Number);\n}\n\nfunction canonicalize(attrs) {\n var newAttrs = {};\n _.forEach(attrs, function(v, k) {\n newAttrs[k.toLowerCase()] = v;\n });\n return newAttrs;\n}\n","/* global window */\n\nvar lodash;\n\nif (typeof require === \"function\") {\n try {\n lodash = {\n cloneDeep: require(\"lodash/cloneDeep\"),\n constant: require(\"lodash/constant\"),\n defaults: require(\"lodash/defaults\"),\n each: require(\"lodash/each\"),\n filter: require(\"lodash/filter\"),\n find: require(\"lodash/find\"),\n flatten: require(\"lodash/flatten\"),\n forEach: require(\"lodash/forEach\"),\n forIn: require(\"lodash/forIn\"),\n has: require(\"lodash/has\"),\n isUndefined: require(\"lodash/isUndefined\"),\n last: require(\"lodash/last\"),\n map: require(\"lodash/map\"),\n mapValues: require(\"lodash/mapValues\"),\n max: require(\"lodash/max\"),\n merge: require(\"lodash/merge\"),\n min: require(\"lodash/min\"),\n minBy: require(\"lodash/minBy\"),\n now: require(\"lodash/now\"),\n pick: require(\"lodash/pick\"),\n range: require(\"lodash/range\"),\n reduce: require(\"lodash/reduce\"),\n sortBy: require(\"lodash/sortBy\"),\n uniqueId: require(\"lodash/uniqueId\"),\n values: require(\"lodash/values\"),\n zipObject: require(\"lodash/zipObject\"),\n };\n } catch (e) {\n // continue regardless of error\n }\n}\n\nif (!lodash) {\n lodash = window._;\n}\n\nmodule.exports = lodash;\n","var _ = require(\"./lodash\");\nvar util = require(\"./util\");\n\nmodule.exports = {\n run: run,\n cleanup: cleanup\n};\n\n/*\n * A nesting graph creates dummy nodes for the tops and bottoms of subgraphs,\n * adds appropriate edges to ensure that all cluster nodes are placed between\n * these boundries, and ensures that the graph is connected.\n *\n * In addition we ensure, through the use of the minlen property, that nodes\n * and subgraph border nodes to not end up on the same rank.\n *\n * Preconditions:\n *\n * 1. Input graph is a DAG\n * 2. Nodes in the input graph has a minlen attribute\n *\n * Postconditions:\n *\n * 1. Input graph is connected.\n * 2. Dummy nodes are added for the tops and bottoms of subgraphs.\n * 3. The minlen attribute for nodes is adjusted to ensure nodes do not\n * get placed on the same rank as subgraph border nodes.\n *\n * The nesting graph idea comes from Sander, \"Layout of Compound Directed\n * Graphs.\"\n */\nfunction run(g) {\n var root = util.addDummyNode(g, \"root\", {}, \"_root\");\n var depths = treeDepths(g);\n var height = _.max(_.values(depths)) - 1; // Note: depths is an Object not an array\n var nodeSep = 2 * height + 1;\n\n g.graph().nestingRoot = root;\n\n // Multiply minlen by nodeSep to align nodes on non-border ranks.\n _.forEach(g.edges(), function(e) { g.edge(e).minlen *= nodeSep; });\n\n // Calculate a weight that is sufficient to keep subgraphs vertically compact\n var weight = sumWeights(g) + 1;\n\n // Create border nodes and link them up\n _.forEach(g.children(), function(child) {\n dfs(g, root, nodeSep, weight, height, depths, child);\n });\n\n // Save the multiplier for node layers for later removal of empty border\n // layers.\n g.graph().nodeRankFactor = nodeSep;\n}\n\nfunction dfs(g, root, nodeSep, weight, height, depths, v) {\n var children = g.children(v);\n if (!children.length) {\n if (v !== root) {\n g.setEdge(root, v, { weight: 0, minlen: nodeSep });\n }\n return;\n }\n\n var top = util.addBorderNode(g, \"_bt\");\n var bottom = util.addBorderNode(g, \"_bb\");\n var label = g.node(v);\n\n g.setParent(top, v);\n label.borderTop = top;\n g.setParent(bottom, v);\n label.borderBottom = bottom;\n\n _.forEach(children, function(child) {\n dfs(g, root, nodeSep, weight, height, depths, child);\n\n var childNode = g.node(child);\n var childTop = childNode.borderTop ? childNode.borderTop : child;\n var childBottom = childNode.borderBottom ? childNode.borderBottom : child;\n var thisWeight = childNode.borderTop ? weight : 2 * weight;\n var minlen = childTop !== childBottom ? 1 : height - depths[v] + 1;\n\n g.setEdge(top, childTop, {\n weight: thisWeight,\n minlen: minlen,\n nestingEdge: true\n });\n\n g.setEdge(childBottom, bottom, {\n weight: thisWeight,\n minlen: minlen,\n nestingEdge: true\n });\n });\n\n if (!g.parent(v)) {\n g.setEdge(root, top, { weight: 0, minlen: height + depths[v] });\n }\n}\n\nfunction treeDepths(g) {\n var depths = {};\n function dfs(v, depth) {\n var children = g.children(v);\n if (children && children.length) {\n _.forEach(children, function(child) {\n dfs(child, depth + 1);\n });\n }\n depths[v] = depth;\n }\n _.forEach(g.children(), function(v) { dfs(v, 1); });\n return depths;\n}\n\nfunction sumWeights(g) {\n return _.reduce(g.edges(), function(acc, e) {\n return acc + g.edge(e).weight;\n }, 0);\n}\n\nfunction cleanup(g) {\n var graphLabel = g.graph();\n g.removeNode(graphLabel.nestingRoot);\n delete graphLabel.nestingRoot;\n _.forEach(g.edges(), function(e) {\n var edge = g.edge(e);\n if (edge.nestingEdge) {\n g.removeEdge(e);\n }\n });\n}\n","\"use strict\";\n\nvar _ = require(\"./lodash\");\nvar util = require(\"./util\");\n\nmodule.exports = {\n run: run,\n undo: undo\n};\n\n/*\n * Breaks any long edges in the graph into short segments that span 1 layer\n * each. This operation is undoable with the denormalize function.\n *\n * Pre-conditions:\n *\n * 1. The input graph is a DAG.\n * 2. Each node in the graph has a \"rank\" property.\n *\n * Post-condition:\n *\n * 1. All edges in the graph have a length of 1.\n * 2. Dummy nodes are added where edges have been split into segments.\n * 3. The graph is augmented with a \"dummyChains\" attribute which contains\n * the first dummy in each chain of dummy nodes produced.\n */\nfunction run(g) {\n g.graph().dummyChains = [];\n _.forEach(g.edges(), function(edge) { normalizeEdge(g, edge); });\n}\n\nfunction normalizeEdge(g, e) {\n var v = e.v;\n var vRank = g.node(v).rank;\n var w = e.w;\n var wRank = g.node(w).rank;\n var name = e.name;\n var edgeLabel = g.edge(e);\n var labelRank = edgeLabel.labelRank;\n\n if (wRank === vRank + 1) return;\n\n g.removeEdge(e);\n\n var dummy, attrs, i;\n for (i = 0, ++vRank; vRank < wRank; ++i, ++vRank) {\n edgeLabel.points = [];\n attrs = {\n width: 0, height: 0,\n edgeLabel: edgeLabel, edgeObj: e,\n rank: vRank\n };\n dummy = util.addDummyNode(g, \"edge\", attrs, \"_d\");\n if (vRank === labelRank) {\n attrs.width = edgeLabel.width;\n attrs.height = edgeLabel.height;\n attrs.dummy = \"edge-label\";\n attrs.labelpos = edgeLabel.labelpos;\n }\n g.setEdge(v, dummy, { weight: edgeLabel.weight }, name);\n if (i === 0) {\n g.graph().dummyChains.push(dummy);\n }\n v = dummy;\n }\n\n g.setEdge(v, w, { weight: edgeLabel.weight }, name);\n}\n\nfunction undo(g) {\n _.forEach(g.graph().dummyChains, function(v) {\n var node = g.node(v);\n var origLabel = node.edgeLabel;\n var w;\n g.setEdge(node.edgeObj, origLabel);\n while (node.dummy) {\n w = g.successors(v)[0];\n g.removeNode(v);\n origLabel.points.push({ x: node.x, y: node.y });\n if (node.dummy === \"edge-label\") {\n origLabel.x = node.x;\n origLabel.y = node.y;\n origLabel.width = node.width;\n origLabel.height = node.height;\n }\n v = w;\n node = g.node(v);\n }\n });\n}\n","var _ = require(\"../lodash\");\n\nmodule.exports = addSubgraphConstraints;\n\nfunction addSubgraphConstraints(g, cg, vs) {\n var prev = {},\n rootPrev;\n\n _.forEach(vs, function(v) {\n var child = g.parent(v),\n parent,\n prevChild;\n while (child) {\n parent = g.parent(child);\n if (parent) {\n prevChild = prev[parent];\n prev[parent] = child;\n } else {\n prevChild = rootPrev;\n rootPrev = child;\n }\n if (prevChild && prevChild !== child) {\n cg.setEdge(prevChild, child);\n return;\n }\n child = parent;\n }\n });\n\n /*\n function dfs(v) {\n var children = v ? g.children(v) : g.children();\n if (children.length) {\n var min = Number.POSITIVE_INFINITY,\n subgraphs = [];\n _.each(children, function(child) {\n var childMin = dfs(child);\n if (g.children(child).length) {\n subgraphs.push({ v: child, order: childMin });\n }\n min = Math.min(min, childMin);\n });\n _.reduce(_.sortBy(subgraphs, \"order\"), function(prev, curr) {\n cg.setEdge(prev.v, curr.v);\n return curr;\n });\n return min;\n }\n return g.node(v).order;\n }\n dfs(undefined);\n */\n}\n","var _ = require(\"../lodash\");\n\nmodule.exports = barycenter;\n\nfunction barycenter(g, movable) {\n return _.map(movable, function(v) {\n var inV = g.inEdges(v);\n if (!inV.length) {\n return { v: v };\n } else {\n var result = _.reduce(inV, function(acc, e) {\n var edge = g.edge(e),\n nodeU = g.node(e.v);\n return {\n sum: acc.sum + (edge.weight * nodeU.order),\n weight: acc.weight + edge.weight\n };\n }, { sum: 0, weight: 0 });\n\n return {\n v: v,\n barycenter: result.sum / result.weight,\n weight: result.weight\n };\n }\n });\n}\n\n","var _ = require(\"../lodash\");\nvar Graph = require(\"../graphlib\").Graph;\n\nmodule.exports = buildLayerGraph;\n\n/*\n * Constructs a graph that can be used to sort a layer of nodes. The graph will\n * contain all base and subgraph nodes from the request layer in their original\n * hierarchy and any edges that are incident on these nodes and are of the type\n * requested by the \"relationship\" parameter.\n *\n * Nodes from the requested rank that do not have parents are assigned a root\n * node in the output graph, which is set in the root graph attribute. This\n * makes it easy to walk the hierarchy of movable nodes during ordering.\n *\n * Pre-conditions:\n *\n * 1. Input graph is a DAG\n * 2. Base nodes in the input graph have a rank attribute\n * 3. Subgraph nodes in the input graph has minRank and maxRank attributes\n * 4. Edges have an assigned weight\n *\n * Post-conditions:\n *\n * 1. Output graph has all nodes in the movable rank with preserved\n * hierarchy.\n * 2. Root nodes in the movable layer are made children of the node\n * indicated by the root attribute of the graph.\n * 3. Non-movable nodes incident on movable nodes, selected by the\n * relationship parameter, are included in the graph (without hierarchy).\n * 4. Edges incident on movable nodes, selected by the relationship\n * parameter, are added to the output graph.\n * 5. The weights for copied edges are aggregated as need, since the output\n * graph is not a multi-graph.\n */\nfunction buildLayerGraph(g, rank, relationship) {\n var root = createRootNode(g),\n result = new Graph({ compound: true }).setGraph({ root: root })\n .setDefaultNodeLabel(function(v) { return g.node(v); });\n\n _.forEach(g.nodes(), function(v) {\n var node = g.node(v),\n parent = g.parent(v);\n\n if (node.rank === rank || node.minRank <= rank && rank <= node.maxRank) {\n result.setNode(v);\n result.setParent(v, parent || root);\n\n // This assumes we have only short edges!\n _.forEach(g[relationship](v), function(e) {\n var u = e.v === v ? e.w : e.v,\n edge = result.edge(u, v),\n weight = !_.isUndefined(edge) ? edge.weight : 0;\n result.setEdge(u, v, { weight: g.edge(e).weight + weight });\n });\n\n if (_.has(node, \"minRank\")) {\n result.setNode(v, {\n borderLeft: node.borderLeft[rank],\n borderRight: node.borderRight[rank]\n });\n }\n }\n });\n\n return result;\n}\n\nfunction createRootNode(g) {\n var v;\n while (g.hasNode((v = _.uniqueId(\"_root\"))));\n return v;\n}\n","\"use strict\";\n\nvar _ = require(\"../lodash\");\n\nmodule.exports = crossCount;\n\n/*\n * A function that takes a layering (an array of layers, each with an array of\n * ordererd nodes) and a graph and returns a weighted crossing count.\n *\n * Pre-conditions:\n *\n * 1. Input graph must be simple (not a multigraph), directed, and include\n * only simple edges.\n * 2. Edges in the input graph must have assigned weights.\n *\n * Post-conditions:\n *\n * 1. The graph and layering matrix are left unchanged.\n *\n * This algorithm is derived from Barth, et al., \"Bilayer Cross Counting.\"\n */\nfunction crossCount(g, layering) {\n var cc = 0;\n for (var i = 1; i < layering.length; ++i) {\n cc += twoLayerCrossCount(g, layering[i-1], layering[i]);\n }\n return cc;\n}\n\nfunction twoLayerCrossCount(g, northLayer, southLayer) {\n // Sort all of the edges between the north and south layers by their position\n // in the north layer and then the south. Map these edges to the position of\n // their head in the south layer.\n var southPos = _.zipObject(southLayer,\n _.map(southLayer, function (v, i) { return i; }));\n var southEntries = _.flatten(_.map(northLayer, function(v) {\n return _.sortBy(_.map(g.outEdges(v), function(e) {\n return { pos: southPos[e.w], weight: g.edge(e).weight };\n }), \"pos\");\n }), true);\n\n // Build the accumulator tree\n var firstIndex = 1;\n while (firstIndex < southLayer.length) firstIndex <<= 1;\n var treeSize = 2 * firstIndex - 1;\n firstIndex -= 1;\n var tree = _.map(new Array(treeSize), function() { return 0; });\n\n // Calculate the weighted crossings\n var cc = 0;\n _.forEach(southEntries.forEach(function(entry) {\n var index = entry.pos + firstIndex;\n tree[index] += entry.weight;\n var weightSum = 0;\n while (index > 0) {\n if (index % 2) {\n weightSum += tree[index + 1];\n }\n index = (index - 1) >> 1;\n tree[index] += entry.weight;\n }\n cc += entry.weight * weightSum;\n }));\n\n return cc;\n}\n","\"use strict\";\n\nvar _ = require(\"../lodash\");\nvar initOrder = require(\"./init-order\");\nvar crossCount = require(\"./cross-count\");\nvar sortSubgraph = require(\"./sort-subgraph\");\nvar buildLayerGraph = require(\"./build-layer-graph\");\nvar addSubgraphConstraints = require(\"./add-subgraph-constraints\");\nvar Graph = require(\"../graphlib\").Graph;\nvar util = require(\"../util\");\n\nmodule.exports = order;\n\n/*\n * Applies heuristics to minimize edge crossings in the graph and sets the best\n * order solution as an order attribute on each node.\n *\n * Pre-conditions:\n *\n * 1. Graph must be DAG\n * 2. Graph nodes must be objects with a \"rank\" attribute\n * 3. Graph edges must have the \"weight\" attribute\n *\n * Post-conditions:\n *\n * 1. Graph nodes will have an \"order\" attribute based on the results of the\n * algorithm.\n */\nfunction order(g) {\n var maxRank = util.maxRank(g),\n downLayerGraphs = buildLayerGraphs(g, _.range(1, maxRank + 1), \"inEdges\"),\n upLayerGraphs = buildLayerGraphs(g, _.range(maxRank - 1, -1, -1), \"outEdges\");\n\n var layering = initOrder(g);\n assignOrder(g, layering);\n\n var bestCC = Number.POSITIVE_INFINITY,\n best;\n\n for (var i = 0, lastBest = 0; lastBest < 4; ++i, ++lastBest) {\n sweepLayerGraphs(i % 2 ? downLayerGraphs : upLayerGraphs, i % 4 >= 2);\n\n layering = util.buildLayerMatrix(g);\n var cc = crossCount(g, layering);\n if (cc < bestCC) {\n lastBest = 0;\n best = _.cloneDeep(layering);\n bestCC = cc;\n }\n }\n\n assignOrder(g, best);\n}\n\nfunction buildLayerGraphs(g, ranks, relationship) {\n return _.map(ranks, function(rank) {\n return buildLayerGraph(g, rank, relationship);\n });\n}\n\nfunction sweepLayerGraphs(layerGraphs, biasRight) {\n var cg = new Graph();\n _.forEach(layerGraphs, function(lg) {\n var root = lg.graph().root;\n var sorted = sortSubgraph(lg, root, cg, biasRight);\n _.forEach(sorted.vs, function(v, i) {\n lg.node(v).order = i;\n });\n addSubgraphConstraints(lg, cg, sorted.vs);\n });\n}\n\nfunction assignOrder(g, layering) {\n _.forEach(layering, function(layer) {\n _.forEach(layer, function(v, i) {\n g.node(v).order = i;\n });\n });\n}\n","\"use strict\";\n\nvar _ = require(\"../lodash\");\n\nmodule.exports = initOrder;\n\n/*\n * Assigns an initial order value for each node by performing a DFS search\n * starting from nodes in the first rank. Nodes are assigned an order in their\n * rank as they are first visited.\n *\n * This approach comes from Gansner, et al., \"A Technique for Drawing Directed\n * Graphs.\"\n *\n * Returns a layering matrix with an array per layer and each layer sorted by\n * the order of its nodes.\n */\nfunction initOrder(g) {\n var visited = {};\n var simpleNodes = _.filter(g.nodes(), function(v) {\n return !g.children(v).length;\n });\n var maxRank = _.max(_.map(simpleNodes, function(v) { return g.node(v).rank; }));\n var layers = _.map(_.range(maxRank + 1), function() { return []; });\n\n function dfs(v) {\n if (_.has(visited, v)) return;\n visited[v] = true;\n var node = g.node(v);\n layers[node.rank].push(v);\n _.forEach(g.successors(v), dfs);\n }\n\n var orderedVs = _.sortBy(simpleNodes, function(v) { return g.node(v).rank; });\n _.forEach(orderedVs, dfs);\n\n return layers;\n}\n","\"use strict\";\n\nvar _ = require(\"../lodash\");\n\nmodule.exports = resolveConflicts;\n\n/*\n * Given a list of entries of the form {v, barycenter, weight} and a\n * constraint graph this function will resolve any conflicts between the\n * constraint graph and the barycenters for the entries. If the barycenters for\n * an entry would violate a constraint in the constraint graph then we coalesce\n * the nodes in the conflict into a new node that respects the contraint and\n * aggregates barycenter and weight information.\n *\n * This implementation is based on the description in Forster, \"A Fast and\n * Simple Hueristic for Constrained Two-Level Crossing Reduction,\" thought it\n * differs in some specific details.\n *\n * Pre-conditions:\n *\n * 1. Each entry has the form {v, barycenter, weight}, or if the node has\n * no barycenter, then {v}.\n *\n * Returns:\n *\n * A new list of entries of the form {vs, i, barycenter, weight}. The list\n * `vs` may either be a singleton or it may be an aggregation of nodes\n * ordered such that they do not violate constraints from the constraint\n * graph. The property `i` is the lowest original index of any of the\n * elements in `vs`.\n */\nfunction resolveConflicts(entries, cg) {\n var mappedEntries = {};\n _.forEach(entries, function(entry, i) {\n var tmp = mappedEntries[entry.v] = {\n indegree: 0,\n \"in\": [],\n out: [],\n vs: [entry.v],\n i: i\n };\n if (!_.isUndefined(entry.barycenter)) {\n tmp.barycenter = entry.barycenter;\n tmp.weight = entry.weight;\n }\n });\n\n _.forEach(cg.edges(), function(e) {\n var entryV = mappedEntries[e.v];\n var entryW = mappedEntries[e.w];\n if (!_.isUndefined(entryV) && !_.isUndefined(entryW)) {\n entryW.indegree++;\n entryV.out.push(mappedEntries[e.w]);\n }\n });\n\n var sourceSet = _.filter(mappedEntries, function(entry) {\n return !entry.indegree;\n });\n\n return doResolveConflicts(sourceSet);\n}\n\nfunction doResolveConflicts(sourceSet) {\n var entries = [];\n\n function handleIn(vEntry) {\n return function(uEntry) {\n if (uEntry.merged) {\n return;\n }\n if (_.isUndefined(uEntry.barycenter) ||\n _.isUndefined(vEntry.barycenter) ||\n uEntry.barycenter >= vEntry.barycenter) {\n mergeEntries(vEntry, uEntry);\n }\n };\n }\n\n function handleOut(vEntry) {\n return function(wEntry) {\n wEntry[\"in\"].push(vEntry);\n if (--wEntry.indegree === 0) {\n sourceSet.push(wEntry);\n }\n };\n }\n\n while (sourceSet.length) {\n var entry = sourceSet.pop();\n entries.push(entry);\n _.forEach(entry[\"in\"].reverse(), handleIn(entry));\n _.forEach(entry.out, handleOut(entry));\n }\n\n return _.map(_.filter(entries, function(entry) { return !entry.merged; }),\n function(entry) {\n return _.pick(entry, [\"vs\", \"i\", \"barycenter\", \"weight\"]);\n });\n\n}\n\nfunction mergeEntries(target, source) {\n var sum = 0;\n var weight = 0;\n\n if (target.weight) {\n sum += target.barycenter * target.weight;\n weight += target.weight;\n }\n\n if (source.weight) {\n sum += source.barycenter * source.weight;\n weight += source.weight;\n }\n\n target.vs = source.vs.concat(target.vs);\n target.barycenter = sum / weight;\n target.weight = weight;\n target.i = Math.min(source.i, target.i);\n source.merged = true;\n}\n","var _ = require(\"../lodash\");\nvar barycenter = require(\"./barycenter\");\nvar resolveConflicts = require(\"./resolve-conflicts\");\nvar sort = require(\"./sort\");\n\nmodule.exports = sortSubgraph;\n\nfunction sortSubgraph(g, v, cg, biasRight) {\n var movable = g.children(v);\n var node = g.node(v);\n var bl = node ? node.borderLeft : undefined;\n var br = node ? node.borderRight: undefined;\n var subgraphs = {};\n\n if (bl) {\n movable = _.filter(movable, function(w) {\n return w !== bl && w !== br;\n });\n }\n\n var barycenters = barycenter(g, movable);\n _.forEach(barycenters, function(entry) {\n if (g.children(entry.v).length) {\n var subgraphResult = sortSubgraph(g, entry.v, cg, biasRight);\n subgraphs[entry.v] = subgraphResult;\n if (_.has(subgraphResult, \"barycenter\")) {\n mergeBarycenters(entry, subgraphResult);\n }\n }\n });\n\n var entries = resolveConflicts(barycenters, cg);\n expandSubgraphs(entries, subgraphs);\n\n var result = sort(entries, biasRight);\n\n if (bl) {\n result.vs = _.flatten([bl, result.vs, br], true);\n if (g.predecessors(bl).length) {\n var blPred = g.node(g.predecessors(bl)[0]),\n brPred = g.node(g.predecessors(br)[0]);\n if (!_.has(result, \"barycenter\")) {\n result.barycenter = 0;\n result.weight = 0;\n }\n result.barycenter = (result.barycenter * result.weight +\n blPred.order + brPred.order) / (result.weight + 2);\n result.weight += 2;\n }\n }\n\n return result;\n}\n\nfunction expandSubgraphs(entries, subgraphs) {\n _.forEach(entries, function(entry) {\n entry.vs = _.flatten(entry.vs.map(function(v) {\n if (subgraphs[v]) {\n return subgraphs[v].vs;\n }\n return v;\n }), true);\n });\n}\n\nfunction mergeBarycenters(target, other) {\n if (!_.isUndefined(target.barycenter)) {\n target.barycenter = (target.barycenter * target.weight +\n other.barycenter * other.weight) /\n (target.weight + other.weight);\n target.weight += other.weight;\n } else {\n target.barycenter = other.barycenter;\n target.weight = other.weight;\n }\n}\n","var _ = require(\"../lodash\");\nvar util = require(\"../util\");\n\nmodule.exports = sort;\n\nfunction sort(entries, biasRight) {\n var parts = util.partition(entries, function(entry) {\n return _.has(entry, \"barycenter\");\n });\n var sortable = parts.lhs,\n unsortable = _.sortBy(parts.rhs, function(entry) { return -entry.i; }),\n vs = [],\n sum = 0,\n weight = 0,\n vsIndex = 0;\n\n sortable.sort(compareWithBias(!!biasRight));\n\n vsIndex = consumeUnsortable(vs, unsortable, vsIndex);\n\n _.forEach(sortable, function (entry) {\n vsIndex += entry.vs.length;\n vs.push(entry.vs);\n sum += entry.barycenter * entry.weight;\n weight += entry.weight;\n vsIndex = consumeUnsortable(vs, unsortable, vsIndex);\n });\n\n var result = { vs: _.flatten(vs, true) };\n if (weight) {\n result.barycenter = sum / weight;\n result.weight = weight;\n }\n return result;\n}\n\nfunction consumeUnsortable(vs, unsortable, index) {\n var last;\n while (unsortable.length && (last = _.last(unsortable)).i <= index) {\n unsortable.pop();\n vs.push(last.vs);\n index++;\n }\n return index;\n}\n\nfunction compareWithBias(bias) {\n return function(entryV, entryW) {\n if (entryV.barycenter < entryW.barycenter) {\n return -1;\n } else if (entryV.barycenter > entryW.barycenter) {\n return 1;\n }\n\n return !bias ? entryV.i - entryW.i : entryW.i - entryV.i;\n };\n}\n","var _ = require(\"./lodash\");\n\nmodule.exports = parentDummyChains;\n\nfunction parentDummyChains(g) {\n var postorderNums = postorder(g);\n\n _.forEach(g.graph().dummyChains, function(v) {\n var node = g.node(v);\n var edgeObj = node.edgeObj;\n var pathData = findPath(g, postorderNums, edgeObj.v, edgeObj.w);\n var path = pathData.path;\n var lca = pathData.lca;\n var pathIdx = 0;\n var pathV = path[pathIdx];\n var ascending = true;\n\n while (v !== edgeObj.w) {\n node = g.node(v);\n\n if (ascending) {\n while ((pathV = path[pathIdx]) !== lca &&\n g.node(pathV).maxRank < node.rank) {\n pathIdx++;\n }\n\n if (pathV === lca) {\n ascending = false;\n }\n }\n\n if (!ascending) {\n while (pathIdx < path.length - 1 &&\n g.node(pathV = path[pathIdx + 1]).minRank <= node.rank) {\n pathIdx++;\n }\n pathV = path[pathIdx];\n }\n\n g.setParent(v, pathV);\n v = g.successors(v)[0];\n }\n });\n}\n\n// Find a path from v to w through the lowest common ancestor (LCA). Return the\n// full path and the LCA.\nfunction findPath(g, postorderNums, v, w) {\n var vPath = [];\n var wPath = [];\n var low = Math.min(postorderNums[v].low, postorderNums[w].low);\n var lim = Math.max(postorderNums[v].lim, postorderNums[w].lim);\n var parent;\n var lca;\n\n // Traverse up from v to find the LCA\n parent = v;\n do {\n parent = g.parent(parent);\n vPath.push(parent);\n } while (parent &&\n (postorderNums[parent].low > low || lim > postorderNums[parent].lim));\n lca = parent;\n\n // Traverse from w to LCA\n parent = w;\n while ((parent = g.parent(parent)) !== lca) {\n wPath.push(parent);\n }\n\n return { path: vPath.concat(wPath.reverse()), lca: lca };\n}\n\nfunction postorder(g) {\n var result = {};\n var lim = 0;\n\n function dfs(v) {\n var low = lim;\n _.forEach(g.children(v), dfs);\n result[v] = { low: low, lim: lim++ };\n }\n _.forEach(g.children(), dfs);\n\n return result;\n}\n","\"use strict\";\n\nvar _ = require(\"../lodash\");\nvar Graph = require(\"../graphlib\").Graph;\nvar util = require(\"../util\");\n\n/*\n * This module provides coordinate assignment based on Brandes and Köpf, \"Fast\n * and Simple Horizontal Coordinate Assignment.\"\n */\n\nmodule.exports = {\n positionX: positionX,\n findType1Conflicts: findType1Conflicts,\n findType2Conflicts: findType2Conflicts,\n addConflict: addConflict,\n hasConflict: hasConflict,\n verticalAlignment: verticalAlignment,\n horizontalCompaction: horizontalCompaction,\n alignCoordinates: alignCoordinates,\n findSmallestWidthAlignment: findSmallestWidthAlignment,\n balance: balance\n};\n\n/*\n * Marks all edges in the graph with a type-1 conflict with the \"type1Conflict\"\n * property. A type-1 conflict is one where a non-inner segment crosses an\n * inner segment. An inner segment is an edge with both incident nodes marked\n * with the \"dummy\" property.\n *\n * This algorithm scans layer by layer, starting with the second, for type-1\n * conflicts between the current layer and the previous layer. For each layer\n * it scans the nodes from left to right until it reaches one that is incident\n * on an inner segment. It then scans predecessors to determine if they have\n * edges that cross that inner segment. At the end a final scan is done for all\n * nodes on the current rank to see if they cross the last visited inner\n * segment.\n *\n * This algorithm (safely) assumes that a dummy node will only be incident on a\n * single node in the layers being scanned.\n */\nfunction findType1Conflicts(g, layering) {\n var conflicts = {};\n\n function visitLayer(prevLayer, layer) {\n var\n // last visited node in the previous layer that is incident on an inner\n // segment.\n k0 = 0,\n // Tracks the last node in this layer scanned for crossings with a type-1\n // segment.\n scanPos = 0,\n prevLayerLength = prevLayer.length,\n lastNode = _.last(layer);\n\n _.forEach(layer, function(v, i) {\n var w = findOtherInnerSegmentNode(g, v),\n k1 = w ? g.node(w).order : prevLayerLength;\n\n if (w || v === lastNode) {\n _.forEach(layer.slice(scanPos, i +1), function(scanNode) {\n _.forEach(g.predecessors(scanNode), function(u) {\n var uLabel = g.node(u),\n uPos = uLabel.order;\n if ((uPos < k0 || k1 < uPos) &&\n !(uLabel.dummy && g.node(scanNode).dummy)) {\n addConflict(conflicts, u, scanNode);\n }\n });\n });\n scanPos = i + 1;\n k0 = k1;\n }\n });\n\n return layer;\n }\n\n _.reduce(layering, visitLayer);\n return conflicts;\n}\n\nfunction findType2Conflicts(g, layering) {\n var conflicts = {};\n\n function scan(south, southPos, southEnd, prevNorthBorder, nextNorthBorder) {\n var v;\n _.forEach(_.range(southPos, southEnd), function(i) {\n v = south[i];\n if (g.node(v).dummy) {\n _.forEach(g.predecessors(v), function(u) {\n var uNode = g.node(u);\n if (uNode.dummy &&\n (uNode.order < prevNorthBorder || uNode.order > nextNorthBorder)) {\n addConflict(conflicts, u, v);\n }\n });\n }\n });\n }\n\n\n function visitLayer(north, south) {\n var prevNorthPos = -1,\n nextNorthPos,\n southPos = 0;\n\n _.forEach(south, function(v, southLookahead) {\n if (g.node(v).dummy === \"border\") {\n var predecessors = g.predecessors(v);\n if (predecessors.length) {\n nextNorthPos = g.node(predecessors[0]).order;\n scan(south, southPos, southLookahead, prevNorthPos, nextNorthPos);\n southPos = southLookahead;\n prevNorthPos = nextNorthPos;\n }\n }\n scan(south, southPos, south.length, nextNorthPos, north.length);\n });\n\n return south;\n }\n\n _.reduce(layering, visitLayer);\n return conflicts;\n}\n\nfunction findOtherInnerSegmentNode(g, v) {\n if (g.node(v).dummy) {\n return _.find(g.predecessors(v), function(u) {\n return g.node(u).dummy;\n });\n }\n}\n\nfunction addConflict(conflicts, v, w) {\n if (v > w) {\n var tmp = v;\n v = w;\n w = tmp;\n }\n\n var conflictsV = conflicts[v];\n if (!conflictsV) {\n conflicts[v] = conflictsV = {};\n }\n conflictsV[w] = true;\n}\n\nfunction hasConflict(conflicts, v, w) {\n if (v > w) {\n var tmp = v;\n v = w;\n w = tmp;\n }\n return _.has(conflicts[v], w);\n}\n\n/*\n * Try to align nodes into vertical \"blocks\" where possible. This algorithm\n * attempts to align a node with one of its median neighbors. If the edge\n * connecting a neighbor is a type-1 conflict then we ignore that possibility.\n * If a previous node has already formed a block with a node after the node\n * we're trying to form a block with, we also ignore that possibility - our\n * blocks would be split in that scenario.\n */\nfunction verticalAlignment(g, layering, conflicts, neighborFn) {\n var root = {},\n align = {},\n pos = {};\n\n // We cache the position here based on the layering because the graph and\n // layering may be out of sync. The layering matrix is manipulated to\n // generate different extreme alignments.\n _.forEach(layering, function(layer) {\n _.forEach(layer, function(v, order) {\n root[v] = v;\n align[v] = v;\n pos[v] = order;\n });\n });\n\n _.forEach(layering, function(layer) {\n var prevIdx = -1;\n _.forEach(layer, function(v) {\n var ws = neighborFn(v);\n if (ws.length) {\n ws = _.sortBy(ws, function(w) { return pos[w]; });\n var mp = (ws.length - 1) / 2;\n for (var i = Math.floor(mp), il = Math.ceil(mp); i <= il; ++i) {\n var w = ws[i];\n if (align[v] === v &&\n prevIdx < pos[w] &&\n !hasConflict(conflicts, v, w)) {\n align[w] = v;\n align[v] = root[v] = root[w];\n prevIdx = pos[w];\n }\n }\n }\n });\n });\n\n return { root: root, align: align };\n}\n\nfunction horizontalCompaction(g, layering, root, align, reverseSep) {\n // This portion of the algorithm differs from BK due to a number of problems.\n // Instead of their algorithm we construct a new block graph and do two\n // sweeps. The first sweep places blocks with the smallest possible\n // coordinates. The second sweep removes unused space by moving blocks to the\n // greatest coordinates without violating separation.\n var xs = {},\n blockG = buildBlockGraph(g, layering, root, reverseSep),\n borderType = reverseSep ? \"borderLeft\" : \"borderRight\";\n\n function iterate(setXsFunc, nextNodesFunc) {\n var stack = blockG.nodes();\n var elem = stack.pop();\n var visited = {};\n while (elem) {\n if (visited[elem]) {\n setXsFunc(elem);\n } else {\n visited[elem] = true;\n stack.push(elem);\n stack = stack.concat(nextNodesFunc(elem));\n }\n\n elem = stack.pop();\n }\n }\n\n // First pass, assign smallest coordinates\n function pass1(elem) {\n xs[elem] = blockG.inEdges(elem).reduce(function(acc, e) {\n return Math.max(acc, xs[e.v] + blockG.edge(e));\n }, 0);\n }\n\n // Second pass, assign greatest coordinates\n function pass2(elem) {\n var min = blockG.outEdges(elem).reduce(function(acc, e) {\n return Math.min(acc, xs[e.w] - blockG.edge(e));\n }, Number.POSITIVE_INFINITY);\n\n var node = g.node(elem);\n if (min !== Number.POSITIVE_INFINITY && node.borderType !== borderType) {\n xs[elem] = Math.max(xs[elem], min);\n }\n }\n\n iterate(pass1, blockG.predecessors.bind(blockG));\n iterate(pass2, blockG.successors.bind(blockG));\n\n // Assign x coordinates to all nodes\n _.forEach(align, function(v) {\n xs[v] = xs[root[v]];\n });\n\n return xs;\n}\n\n\nfunction buildBlockGraph(g, layering, root, reverseSep) {\n var blockGraph = new Graph(),\n graphLabel = g.graph(),\n sepFn = sep(graphLabel.nodesep, graphLabel.edgesep, reverseSep);\n\n _.forEach(layering, function(layer) {\n var u;\n _.forEach(layer, function(v) {\n var vRoot = root[v];\n blockGraph.setNode(vRoot);\n if (u) {\n var uRoot = root[u],\n prevMax = blockGraph.edge(uRoot, vRoot);\n blockGraph.setEdge(uRoot, vRoot, Math.max(sepFn(g, v, u), prevMax || 0));\n }\n u = v;\n });\n });\n\n return blockGraph;\n}\n\n/*\n * Returns the alignment that has the smallest width of the given alignments.\n */\nfunction findSmallestWidthAlignment(g, xss) {\n return _.minBy(_.values(xss), function (xs) {\n var max = Number.NEGATIVE_INFINITY;\n var min = Number.POSITIVE_INFINITY;\n\n _.forIn(xs, function (x, v) {\n var halfWidth = width(g, v) / 2;\n\n max = Math.max(x + halfWidth, max);\n min = Math.min(x - halfWidth, min);\n });\n\n return max - min;\n });\n}\n\n/*\n * Align the coordinates of each of the layout alignments such that\n * left-biased alignments have their minimum coordinate at the same point as\n * the minimum coordinate of the smallest width alignment and right-biased\n * alignments have their maximum coordinate at the same point as the maximum\n * coordinate of the smallest width alignment.\n */\nfunction alignCoordinates(xss, alignTo) {\n var alignToVals = _.values(alignTo),\n alignToMin = _.min(alignToVals),\n alignToMax = _.max(alignToVals);\n\n _.forEach([\"u\", \"d\"], function(vert) {\n _.forEach([\"l\", \"r\"], function(horiz) {\n var alignment = vert + horiz,\n xs = xss[alignment],\n delta;\n if (xs === alignTo) return;\n\n var xsVals = _.values(xs);\n delta = horiz === \"l\" ? alignToMin - _.min(xsVals) : alignToMax - _.max(xsVals);\n\n if (delta) {\n xss[alignment] = _.mapValues(xs, function(x) { return x + delta; });\n }\n });\n });\n}\n\nfunction balance(xss, align) {\n return _.mapValues(xss.ul, function(ignore, v) {\n if (align) {\n return xss[align.toLowerCase()][v];\n } else {\n var xs = _.sortBy(_.map(xss, v));\n return (xs[1] + xs[2]) / 2;\n }\n });\n}\n\nfunction positionX(g) {\n var layering = util.buildLayerMatrix(g);\n var conflicts = _.merge(\n findType1Conflicts(g, layering),\n findType2Conflicts(g, layering));\n\n var xss = {};\n var adjustedLayering;\n _.forEach([\"u\", \"d\"], function(vert) {\n adjustedLayering = vert === \"u\" ? layering : _.values(layering).reverse();\n _.forEach([\"l\", \"r\"], function(horiz) {\n if (horiz === \"r\") {\n adjustedLayering = _.map(adjustedLayering, function(inner) {\n return _.values(inner).reverse();\n });\n }\n\n var neighborFn = (vert === \"u\" ? g.predecessors : g.successors).bind(g);\n var align = verticalAlignment(g, adjustedLayering, conflicts, neighborFn);\n var xs = horizontalCompaction(g, adjustedLayering,\n align.root, align.align, horiz === \"r\");\n if (horiz === \"r\") {\n xs = _.mapValues(xs, function(x) { return -x; });\n }\n xss[vert + horiz] = xs;\n });\n });\n\n var smallestWidth = findSmallestWidthAlignment(g, xss);\n alignCoordinates(xss, smallestWidth);\n return balance(xss, g.graph().align);\n}\n\nfunction sep(nodeSep, edgeSep, reverseSep) {\n return function(g, v, w) {\n var vLabel = g.node(v);\n var wLabel = g.node(w);\n var sum = 0;\n var delta;\n\n sum += vLabel.width / 2;\n if (_.has(vLabel, \"labelpos\")) {\n switch (vLabel.labelpos.toLowerCase()) {\n case \"l\": delta = -vLabel.width / 2; break;\n case \"r\": delta = vLabel.width / 2; break;\n }\n }\n if (delta) {\n sum += reverseSep ? delta : -delta;\n }\n delta = 0;\n\n sum += (vLabel.dummy ? edgeSep : nodeSep) / 2;\n sum += (wLabel.dummy ? edgeSep : nodeSep) / 2;\n\n sum += wLabel.width / 2;\n if (_.has(wLabel, \"labelpos\")) {\n switch (wLabel.labelpos.toLowerCase()) {\n case \"l\": delta = wLabel.width / 2; break;\n case \"r\": delta = -wLabel.width / 2; break;\n }\n }\n if (delta) {\n sum += reverseSep ? delta : -delta;\n }\n delta = 0;\n\n return sum;\n };\n}\n\nfunction width(g, v) {\n return g.node(v).width;\n}\n","\"use strict\";\n\nvar _ = require(\"../lodash\");\nvar util = require(\"../util\");\nvar positionX = require(\"./bk\").positionX;\n\nmodule.exports = position;\n\nfunction position(g) {\n g = util.asNonCompoundGraph(g);\n\n positionY(g);\n _.forEach(positionX(g), function(x, v) {\n g.node(v).x = x;\n });\n}\n\nfunction positionY(g) {\n var layering = util.buildLayerMatrix(g);\n var rankSep = g.graph().ranksep;\n var prevY = 0;\n _.forEach(layering, function(layer) {\n var maxHeight = _.max(_.map(layer, function(v) { return g.node(v).height; }));\n _.forEach(layer, function(v) {\n g.node(v).y = prevY + maxHeight / 2;\n });\n prevY += maxHeight + rankSep;\n });\n}\n\n","\"use strict\";\n\nvar _ = require(\"../lodash\");\nvar Graph = require(\"../graphlib\").Graph;\nvar slack = require(\"./util\").slack;\n\nmodule.exports = feasibleTree;\n\n/*\n * Constructs a spanning tree with tight edges and adjusted the input node's\n * ranks to achieve this. A tight edge is one that is has a length that matches\n * its \"minlen\" attribute.\n *\n * The basic structure for this function is derived from Gansner, et al., \"A\n * Technique for Drawing Directed Graphs.\"\n *\n * Pre-conditions:\n *\n * 1. Graph must be a DAG.\n * 2. Graph must be connected.\n * 3. Graph must have at least one node.\n * 5. Graph nodes must have been previously assigned a \"rank\" property that\n * respects the \"minlen\" property of incident edges.\n * 6. Graph edges must have a \"minlen\" property.\n *\n * Post-conditions:\n *\n * - Graph nodes will have their rank adjusted to ensure that all edges are\n * tight.\n *\n * Returns a tree (undirected graph) that is constructed using only \"tight\"\n * edges.\n */\nfunction feasibleTree(g) {\n var t = new Graph({ directed: false });\n\n // Choose arbitrary node from which to start our tree\n var start = g.nodes()[0];\n var size = g.nodeCount();\n t.setNode(start, {});\n\n var edge, delta;\n while (tightTree(t, g) < size) {\n edge = findMinSlackEdge(t, g);\n delta = t.hasNode(edge.v) ? slack(g, edge) : -slack(g, edge);\n shiftRanks(t, g, delta);\n }\n\n return t;\n}\n\n/*\n * Finds a maximal tree of tight edges and returns the number of nodes in the\n * tree.\n */\nfunction tightTree(t, g) {\n function dfs(v) {\n _.forEach(g.nodeEdges(v), function(e) {\n var edgeV = e.v,\n w = (v === edgeV) ? e.w : edgeV;\n if (!t.hasNode(w) && !slack(g, e)) {\n t.setNode(w, {});\n t.setEdge(v, w, {});\n dfs(w);\n }\n });\n }\n\n _.forEach(t.nodes(), dfs);\n return t.nodeCount();\n}\n\n/*\n * Finds the edge with the smallest slack that is incident on tree and returns\n * it.\n */\nfunction findMinSlackEdge(t, g) {\n return _.minBy(g.edges(), function(e) {\n if (t.hasNode(e.v) !== t.hasNode(e.w)) {\n return slack(g, e);\n }\n });\n}\n\nfunction shiftRanks(t, g, delta) {\n _.forEach(t.nodes(), function(v) {\n g.node(v).rank += delta;\n });\n}\n","\"use strict\";\n\nvar rankUtil = require(\"./util\");\nvar longestPath = rankUtil.longestPath;\nvar feasibleTree = require(\"./feasible-tree\");\nvar networkSimplex = require(\"./network-simplex\");\n\nmodule.exports = rank;\n\n/*\n * Assigns a rank to each node in the input graph that respects the \"minlen\"\n * constraint specified on edges between nodes.\n *\n * This basic structure is derived from Gansner, et al., \"A Technique for\n * Drawing Directed Graphs.\"\n *\n * Pre-conditions:\n *\n * 1. Graph must be a connected DAG\n * 2. Graph nodes must be objects\n * 3. Graph edges must have \"weight\" and \"minlen\" attributes\n *\n * Post-conditions:\n *\n * 1. Graph nodes will have a \"rank\" attribute based on the results of the\n * algorithm. Ranks can start at any index (including negative), we'll\n * fix them up later.\n */\nfunction rank(g) {\n switch(g.graph().ranker) {\n case \"network-simplex\": networkSimplexRanker(g); break;\n case \"tight-tree\": tightTreeRanker(g); break;\n case \"longest-path\": longestPathRanker(g); break;\n default: networkSimplexRanker(g);\n }\n}\n\n// A fast and simple ranker, but results are far from optimal.\nvar longestPathRanker = longestPath;\n\nfunction tightTreeRanker(g) {\n longestPath(g);\n feasibleTree(g);\n}\n\nfunction networkSimplexRanker(g) {\n networkSimplex(g);\n}\n","\"use strict\";\n\nvar _ = require(\"../lodash\");\nvar feasibleTree = require(\"./feasible-tree\");\nvar slack = require(\"./util\").slack;\nvar initRank = require(\"./util\").longestPath;\nvar preorder = require(\"../graphlib\").alg.preorder;\nvar postorder = require(\"../graphlib\").alg.postorder;\nvar simplify = require(\"../util\").simplify;\n\nmodule.exports = networkSimplex;\n\n// Expose some internals for testing purposes\nnetworkSimplex.initLowLimValues = initLowLimValues;\nnetworkSimplex.initCutValues = initCutValues;\nnetworkSimplex.calcCutValue = calcCutValue;\nnetworkSimplex.leaveEdge = leaveEdge;\nnetworkSimplex.enterEdge = enterEdge;\nnetworkSimplex.exchangeEdges = exchangeEdges;\n\n/*\n * The network simplex algorithm assigns ranks to each node in the input graph\n * and iteratively improves the ranking to reduce the length of edges.\n *\n * Preconditions:\n *\n * 1. The input graph must be a DAG.\n * 2. All nodes in the graph must have an object value.\n * 3. All edges in the graph must have \"minlen\" and \"weight\" attributes.\n *\n * Postconditions:\n *\n * 1. All nodes in the graph will have an assigned \"rank\" attribute that has\n * been optimized by the network simplex algorithm. Ranks start at 0.\n *\n *\n * A rough sketch of the algorithm is as follows:\n *\n * 1. Assign initial ranks to each node. We use the longest path algorithm,\n * which assigns ranks to the lowest position possible. In general this\n * leads to very wide bottom ranks and unnecessarily long edges.\n * 2. Construct a feasible tight tree. A tight tree is one such that all\n * edges in the tree have no slack (difference between length of edge\n * and minlen for the edge). This by itself greatly improves the assigned\n * rankings by shorting edges.\n * 3. Iteratively find edges that have negative cut values. Generally a\n * negative cut value indicates that the edge could be removed and a new\n * tree edge could be added to produce a more compact graph.\n *\n * Much of the algorithms here are derived from Gansner, et al., \"A Technique\n * for Drawing Directed Graphs.\" The structure of the file roughly follows the\n * structure of the overall algorithm.\n */\nfunction networkSimplex(g) {\n g = simplify(g);\n initRank(g);\n var t = feasibleTree(g);\n initLowLimValues(t);\n initCutValues(t, g);\n\n var e, f;\n while ((e = leaveEdge(t))) {\n f = enterEdge(t, g, e);\n exchangeEdges(t, g, e, f);\n }\n}\n\n/*\n * Initializes cut values for all edges in the tree.\n */\nfunction initCutValues(t, g) {\n var vs = postorder(t, t.nodes());\n vs = vs.slice(0, vs.length - 1);\n _.forEach(vs, function(v) {\n assignCutValue(t, g, v);\n });\n}\n\nfunction assignCutValue(t, g, child) {\n var childLab = t.node(child);\n var parent = childLab.parent;\n t.edge(child, parent).cutvalue = calcCutValue(t, g, child);\n}\n\n/*\n * Given the tight tree, its graph, and a child in the graph calculate and\n * return the cut value for the edge between the child and its parent.\n */\nfunction calcCutValue(t, g, child) {\n var childLab = t.node(child);\n var parent = childLab.parent;\n // True if the child is on the tail end of the edge in the directed graph\n var childIsTail = true;\n // The graph's view of the tree edge we're inspecting\n var graphEdge = g.edge(child, parent);\n // The accumulated cut value for the edge between this node and its parent\n var cutValue = 0;\n\n if (!graphEdge) {\n childIsTail = false;\n graphEdge = g.edge(parent, child);\n }\n\n cutValue = graphEdge.weight;\n\n _.forEach(g.nodeEdges(child), function(e) {\n var isOutEdge = e.v === child,\n other = isOutEdge ? e.w : e.v;\n\n if (other !== parent) {\n var pointsToHead = isOutEdge === childIsTail,\n otherWeight = g.edge(e).weight;\n\n cutValue += pointsToHead ? otherWeight : -otherWeight;\n if (isTreeEdge(t, child, other)) {\n var otherCutValue = t.edge(child, other).cutvalue;\n cutValue += pointsToHead ? -otherCutValue : otherCutValue;\n }\n }\n });\n\n return cutValue;\n}\n\nfunction initLowLimValues(tree, root) {\n if (arguments.length < 2) {\n root = tree.nodes()[0];\n }\n dfsAssignLowLim(tree, {}, 1, root);\n}\n\nfunction dfsAssignLowLim(tree, visited, nextLim, v, parent) {\n var low = nextLim;\n var label = tree.node(v);\n\n visited[v] = true;\n _.forEach(tree.neighbors(v), function(w) {\n if (!_.has(visited, w)) {\n nextLim = dfsAssignLowLim(tree, visited, nextLim, w, v);\n }\n });\n\n label.low = low;\n label.lim = nextLim++;\n if (parent) {\n label.parent = parent;\n } else {\n // TODO should be able to remove this when we incrementally update low lim\n delete label.parent;\n }\n\n return nextLim;\n}\n\nfunction leaveEdge(tree) {\n return _.find(tree.edges(), function(e) {\n return tree.edge(e).cutvalue < 0;\n });\n}\n\nfunction enterEdge(t, g, edge) {\n var v = edge.v;\n var w = edge.w;\n\n // For the rest of this function we assume that v is the tail and w is the\n // head, so if we don't have this edge in the graph we should flip it to\n // match the correct orientation.\n if (!g.hasEdge(v, w)) {\n v = edge.w;\n w = edge.v;\n }\n\n var vLabel = t.node(v);\n var wLabel = t.node(w);\n var tailLabel = vLabel;\n var flip = false;\n\n // If the root is in the tail of the edge then we need to flip the logic that\n // checks for the head and tail nodes in the candidates function below.\n if (vLabel.lim > wLabel.lim) {\n tailLabel = wLabel;\n flip = true;\n }\n\n var candidates = _.filter(g.edges(), function(edge) {\n return flip === isDescendant(t, t.node(edge.v), tailLabel) &&\n flip !== isDescendant(t, t.node(edge.w), tailLabel);\n });\n\n return _.minBy(candidates, function(edge) { return slack(g, edge); });\n}\n\nfunction exchangeEdges(t, g, e, f) {\n var v = e.v;\n var w = e.w;\n t.removeEdge(v, w);\n t.setEdge(f.v, f.w, {});\n initLowLimValues(t);\n initCutValues(t, g);\n updateRanks(t, g);\n}\n\nfunction updateRanks(t, g) {\n var root = _.find(t.nodes(), function(v) { return !g.node(v).parent; });\n var vs = preorder(t, root);\n vs = vs.slice(1);\n _.forEach(vs, function(v) {\n var parent = t.node(v).parent,\n edge = g.edge(v, parent),\n flipped = false;\n\n if (!edge) {\n edge = g.edge(parent, v);\n flipped = true;\n }\n\n g.node(v).rank = g.node(parent).rank + (flipped ? edge.minlen : -edge.minlen);\n });\n}\n\n/*\n * Returns true if the edge is in the tree.\n */\nfunction isTreeEdge(tree, u, v) {\n return tree.hasEdge(u, v);\n}\n\n/*\n * Returns true if the specified node is descendant of the root node per the\n * assigned low and lim attributes in the tree.\n */\nfunction isDescendant(tree, vLabel, rootLabel) {\n return rootLabel.low <= vLabel.lim && vLabel.lim <= rootLabel.lim;\n}\n","\"use strict\";\n\nvar _ = require(\"../lodash\");\n\nmodule.exports = {\n longestPath: longestPath,\n slack: slack\n};\n\n/*\n * Initializes ranks for the input graph using the longest path algorithm. This\n * algorithm scales well and is fast in practice, it yields rather poor\n * solutions. Nodes are pushed to the lowest layer possible, leaving the bottom\n * ranks wide and leaving edges longer than necessary. However, due to its\n * speed, this algorithm is good for getting an initial ranking that can be fed\n * into other algorithms.\n *\n * This algorithm does not normalize layers because it will be used by other\n * algorithms in most cases. If using this algorithm directly, be sure to\n * run normalize at the end.\n *\n * Pre-conditions:\n *\n * 1. Input graph is a DAG.\n * 2. Input graph node labels can be assigned properties.\n *\n * Post-conditions:\n *\n * 1. Each node will be assign an (unnormalized) \"rank\" property.\n */\nfunction longestPath(g) {\n var visited = {};\n\n function dfs(v) {\n var label = g.node(v);\n if (_.has(visited, v)) {\n return label.rank;\n }\n visited[v] = true;\n\n var rank = _.min(_.map(g.outEdges(v), function(e) {\n return dfs(e.w) - g.edge(e).minlen;\n }));\n\n if (rank === Number.POSITIVE_INFINITY || // return value of _.map([]) for Lodash 3\n rank === undefined || // return value of _.map([]) for Lodash 4\n rank === null) { // return value of _.map([null])\n rank = 0;\n }\n\n return (label.rank = rank);\n }\n\n _.forEach(g.sources(), dfs);\n}\n\n/*\n * Returns the amount of slack for the given edge. The slack is defined as the\n * difference between the length of the edge and its minimum length.\n */\nfunction slack(g, e) {\n return g.node(e.w).rank - g.node(e.v).rank - g.edge(e).minlen;\n}\n","/* eslint \"no-console\": off */\n\n\"use strict\";\n\nvar _ = require(\"./lodash\");\nvar Graph = require(\"./graphlib\").Graph;\n\nmodule.exports = {\n addDummyNode: addDummyNode,\n simplify: simplify,\n asNonCompoundGraph: asNonCompoundGraph,\n successorWeights: successorWeights,\n predecessorWeights: predecessorWeights,\n intersectRect: intersectRect,\n buildLayerMatrix: buildLayerMatrix,\n normalizeRanks: normalizeRanks,\n removeEmptyRanks: removeEmptyRanks,\n addBorderNode: addBorderNode,\n maxRank: maxRank,\n partition: partition,\n time: time,\n notime: notime\n};\n\n/*\n * Adds a dummy node to the graph and return v.\n */\nfunction addDummyNode(g, type, attrs, name) {\n var v;\n do {\n v = _.uniqueId(name);\n } while (g.hasNode(v));\n\n attrs.dummy = type;\n g.setNode(v, attrs);\n return v;\n}\n\n/*\n * Returns a new graph with only simple edges. Handles aggregation of data\n * associated with multi-edges.\n */\nfunction simplify(g) {\n var simplified = new Graph().setGraph(g.graph());\n _.forEach(g.nodes(), function(v) { simplified.setNode(v, g.node(v)); });\n _.forEach(g.edges(), function(e) {\n var simpleLabel = simplified.edge(e.v, e.w) || { weight: 0, minlen: 1 };\n var label = g.edge(e);\n simplified.setEdge(e.v, e.w, {\n weight: simpleLabel.weight + label.weight,\n minlen: Math.max(simpleLabel.minlen, label.minlen)\n });\n });\n return simplified;\n}\n\nfunction asNonCompoundGraph(g) {\n var simplified = new Graph({ multigraph: g.isMultigraph() }).setGraph(g.graph());\n _.forEach(g.nodes(), function(v) {\n if (!g.children(v).length) {\n simplified.setNode(v, g.node(v));\n }\n });\n _.forEach(g.edges(), function(e) {\n simplified.setEdge(e, g.edge(e));\n });\n return simplified;\n}\n\nfunction successorWeights(g) {\n var weightMap = _.map(g.nodes(), function(v) {\n var sucs = {};\n _.forEach(g.outEdges(v), function(e) {\n sucs[e.w] = (sucs[e.w] || 0) + g.edge(e).weight;\n });\n return sucs;\n });\n return _.zipObject(g.nodes(), weightMap);\n}\n\nfunction predecessorWeights(g) {\n var weightMap = _.map(g.nodes(), function(v) {\n var preds = {};\n _.forEach(g.inEdges(v), function(e) {\n preds[e.v] = (preds[e.v] || 0) + g.edge(e).weight;\n });\n return preds;\n });\n return _.zipObject(g.nodes(), weightMap);\n}\n\n/*\n * Finds where a line starting at point ({x, y}) would intersect a rectangle\n * ({x, y, width, height}) if it were pointing at the rectangle's center.\n */\nfunction intersectRect(rect, point) {\n var x = rect.x;\n var y = rect.y;\n\n // Rectangle intersection algorithm from:\n // http://math.stackexchange.com/questions/108113/find-edge-between-two-boxes\n var dx = point.x - x;\n var dy = point.y - y;\n var w = rect.width / 2;\n var h = rect.height / 2;\n\n if (!dx && !dy) {\n throw new Error(\"Not possible to find intersection inside of the rectangle\");\n }\n\n var sx, sy;\n if (Math.abs(dy) * w > Math.abs(dx) * h) {\n // Intersection is top or bottom of rect.\n if (dy < 0) {\n h = -h;\n }\n sx = h * dx / dy;\n sy = h;\n } else {\n // Intersection is left or right of rect.\n if (dx < 0) {\n w = -w;\n }\n sx = w;\n sy = w * dy / dx;\n }\n\n return { x: x + sx, y: y + sy };\n}\n\n/*\n * Given a DAG with each node assigned \"rank\" and \"order\" properties, this\n * function will produce a matrix with the ids of each node.\n */\nfunction buildLayerMatrix(g) {\n var layering = _.map(_.range(maxRank(g) + 1), function() { return []; });\n _.forEach(g.nodes(), function(v) {\n var node = g.node(v);\n var rank = node.rank;\n if (!_.isUndefined(rank)) {\n layering[rank][node.order] = v;\n }\n });\n return layering;\n}\n\n/*\n * Adjusts the ranks for all nodes in the graph such that all nodes v have\n * rank(v) >= 0 and at least one node w has rank(w) = 0.\n */\nfunction normalizeRanks(g) {\n var min = _.min(_.map(g.nodes(), function(v) { return g.node(v).rank; }));\n _.forEach(g.nodes(), function(v) {\n var node = g.node(v);\n if (_.has(node, \"rank\")) {\n node.rank -= min;\n }\n });\n}\n\nfunction removeEmptyRanks(g) {\n // Ranks may not start at 0, so we need to offset them\n var offset = _.min(_.map(g.nodes(), function(v) { return g.node(v).rank; }));\n\n var layers = [];\n _.forEach(g.nodes(), function(v) {\n var rank = g.node(v).rank - offset;\n if (!layers[rank]) {\n layers[rank] = [];\n }\n layers[rank].push(v);\n });\n\n var delta = 0;\n var nodeRankFactor = g.graph().nodeRankFactor;\n _.forEach(layers, function(vs, i) {\n if (_.isUndefined(vs) && i % nodeRankFactor !== 0) {\n --delta;\n } else if (delta) {\n _.forEach(vs, function(v) { g.node(v).rank += delta; });\n }\n });\n}\n\nfunction addBorderNode(g, prefix, rank, order) {\n var node = {\n width: 0,\n height: 0\n };\n if (arguments.length >= 4) {\n node.rank = rank;\n node.order = order;\n }\n return addDummyNode(g, \"border\", node, prefix);\n}\n\nfunction maxRank(g) {\n return _.max(_.map(g.nodes(), function(v) {\n var rank = g.node(v).rank;\n if (!_.isUndefined(rank)) {\n return rank;\n }\n }));\n}\n\n/*\n * Partition a collection into two groups: `lhs` and `rhs`. If the supplied\n * function returns true for an entry it goes into `lhs`. Otherwise it goes\n * into `rhs.\n */\nfunction partition(collection, fn) {\n var result = { lhs: [], rhs: [] };\n _.forEach(collection, function(value) {\n if (fn(value)) {\n result.lhs.push(value);\n } else {\n result.rhs.push(value);\n }\n });\n return result;\n}\n\n/*\n * Returns a new function that wraps `fn` with a timer. The wrapper logs the\n * time it takes to execute the function.\n */\nfunction time(name, fn) {\n var start = _.now();\n try {\n return fn();\n } finally {\n console.log(name + \" time: \" + (_.now() - start) + \"ms\");\n }\n}\n\nfunction notime(name, fn) {\n return fn();\n}\n","module.exports = \"0.8.5\";\n","/*! @license DOMPurify 2.3.10 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.3.10/LICENSE */\n\n(function (global, factory) {\n typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\n typeof define === 'function' && define.amd ? define(factory) :\n (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DOMPurify = factory());\n})(this, (function () { 'use strict';\n\n function _typeof(obj) {\n \"@babel/helpers - typeof\";\n\n return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) {\n return typeof obj;\n } : function (obj) {\n return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n }, _typeof(obj);\n }\n\n function _setPrototypeOf(o, p) {\n _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n\n return _setPrototypeOf(o, p);\n }\n\n function _isNativeReflectConstruct() {\n if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n if (Reflect.construct.sham) return false;\n if (typeof Proxy === \"function\") return true;\n\n try {\n Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));\n return true;\n } catch (e) {\n return false;\n }\n }\n\n function _construct(Parent, args, Class) {\n if (_isNativeReflectConstruct()) {\n _construct = Reflect.construct;\n } else {\n _construct = function _construct(Parent, args, Class) {\n var a = [null];\n a.push.apply(a, args);\n var Constructor = Function.bind.apply(Parent, a);\n var instance = new Constructor();\n if (Class) _setPrototypeOf(instance, Class.prototype);\n return instance;\n };\n }\n\n return _construct.apply(null, arguments);\n }\n\n function _toConsumableArray(arr) {\n return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();\n }\n\n function _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) return _arrayLikeToArray(arr);\n }\n\n function _iterableToArray(iter) {\n if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter);\n }\n\n function _unsupportedIterableToArray(o, minLen) {\n if (!o) return;\n if (typeof o === \"string\") return _arrayLikeToArray(o, minLen);\n var n = Object.prototype.toString.call(o).slice(8, -1);\n if (n === \"Object\" && o.constructor) n = o.constructor.name;\n if (n === \"Map\" || n === \"Set\") return Array.from(o);\n if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);\n }\n\n function _arrayLikeToArray(arr, len) {\n if (len == null || len > arr.length) len = arr.length;\n\n for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];\n\n return arr2;\n }\n\n function _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n }\n\n var hasOwnProperty = Object.hasOwnProperty,\n setPrototypeOf = Object.setPrototypeOf,\n isFrozen = Object.isFrozen,\n getPrototypeOf = Object.getPrototypeOf,\n getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;\n var freeze = Object.freeze,\n seal = Object.seal,\n create = Object.create; // eslint-disable-line import/no-mutable-exports\n\n var _ref = typeof Reflect !== 'undefined' && Reflect,\n apply = _ref.apply,\n construct = _ref.construct;\n\n if (!apply) {\n apply = function apply(fun, thisValue, args) {\n return fun.apply(thisValue, args);\n };\n }\n\n if (!freeze) {\n freeze = function freeze(x) {\n return x;\n };\n }\n\n if (!seal) {\n seal = function seal(x) {\n return x;\n };\n }\n\n if (!construct) {\n construct = function construct(Func, args) {\n return _construct(Func, _toConsumableArray(args));\n };\n }\n\n var arrayForEach = unapply(Array.prototype.forEach);\n var arrayPop = unapply(Array.prototype.pop);\n var arrayPush = unapply(Array.prototype.push);\n var stringToLowerCase = unapply(String.prototype.toLowerCase);\n var stringMatch = unapply(String.prototype.match);\n var stringReplace = unapply(String.prototype.replace);\n var stringIndexOf = unapply(String.prototype.indexOf);\n var stringTrim = unapply(String.prototype.trim);\n var regExpTest = unapply(RegExp.prototype.test);\n var typeErrorCreate = unconstruct(TypeError);\n function unapply(func) {\n return function (thisArg) {\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n\n return apply(func, thisArg, args);\n };\n }\n function unconstruct(func) {\n return function () {\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n return construct(func, args);\n };\n }\n /* Add properties to a lookup table */\n\n function addToSet(set, array, transformCaseFunc) {\n transformCaseFunc = transformCaseFunc ? transformCaseFunc : stringToLowerCase;\n\n if (setPrototypeOf) {\n // Make 'in' and truthy checks like Boolean(set.constructor)\n // independent of any properties defined on Object.prototype.\n // Prevent prototype setters from intercepting set as a this value.\n setPrototypeOf(set, null);\n }\n\n var l = array.length;\n\n while (l--) {\n var element = array[l];\n\n if (typeof element === 'string') {\n var lcElement = transformCaseFunc(element);\n\n if (lcElement !== element) {\n // Config presets (e.g. tags.js, attrs.js) are immutable.\n if (!isFrozen(array)) {\n array[l] = lcElement;\n }\n\n element = lcElement;\n }\n }\n\n set[element] = true;\n }\n\n return set;\n }\n /* Shallow clone an object */\n\n function clone(object) {\n var newObject = create(null);\n var property;\n\n for (property in object) {\n if (apply(hasOwnProperty, object, [property])) {\n newObject[property] = object[property];\n }\n }\n\n return newObject;\n }\n /* IE10 doesn't support __lookupGetter__ so lets'\n * simulate it. It also automatically checks\n * if the prop is function or getter and behaves\n * accordingly. */\n\n function lookupGetter(object, prop) {\n while (object !== null) {\n var desc = getOwnPropertyDescriptor(object, prop);\n\n if (desc) {\n if (desc.get) {\n return unapply(desc.get);\n }\n\n if (typeof desc.value === 'function') {\n return unapply(desc.value);\n }\n }\n\n object = getPrototypeOf(object);\n }\n\n function fallbackValue(element) {\n console.warn('fallback value for', element);\n return null;\n }\n\n return fallbackValue;\n }\n\n var html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']); // SVG\n\n var svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']);\n var svgFilters = freeze(['feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence']); // List of SVG elements that are disallowed by default.\n // We still need to know them so that we can do namespace\n // checks properly in case one wants to add them to\n // allow-list.\n\n var svgDisallowed = freeze(['animate', 'color-profile', 'cursor', 'discard', 'fedropshadow', 'font-face', 'font-face-format', 'font-face-name', 'font-face-src', 'font-face-uri', 'foreignobject', 'hatch', 'hatchpath', 'mesh', 'meshgradient', 'meshpatch', 'meshrow', 'missing-glyph', 'script', 'set', 'solidcolor', 'unknown', 'use']);\n var mathMl$1 = freeze(['math', 'menclose', 'merror', 'mfenced', 'mfrac', 'mglyph', 'mi', 'mlabeledtr', 'mmultiscripts', 'mn', 'mo', 'mover', 'mpadded', 'mphantom', 'mroot', 'mrow', 'ms', 'mspace', 'msqrt', 'mstyle', 'msub', 'msup', 'msubsup', 'mtable', 'mtd', 'mtext', 'mtr', 'munder', 'munderover']); // Similarly to SVG, we want to know all MathML elements,\n // even those that we disallow by default.\n\n var mathMlDisallowed = freeze(['maction', 'maligngroup', 'malignmark', 'mlongdiv', 'mscarries', 'mscarry', 'msgroup', 'mstack', 'msline', 'msrow', 'semantics', 'annotation', 'annotation-xml', 'mprescripts', 'none']);\n var text = freeze(['#text']);\n\n var html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'pattern', 'placeholder', 'playsinline', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'xmlns', 'slot']);\n var svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'targetx', 'targety', 'transform', 'transform-origin', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']);\n var mathMl = freeze(['accent', 'accentunder', 'align', 'bevelled', 'close', 'columnsalign', 'columnlines', 'columnspan', 'denomalign', 'depth', 'dir', 'display', 'displaystyle', 'encoding', 'fence', 'frame', 'height', 'href', 'id', 'largeop', 'length', 'linethickness', 'lspace', 'lquote', 'mathbackground', 'mathcolor', 'mathsize', 'mathvariant', 'maxsize', 'minsize', 'movablelimits', 'notation', 'numalign', 'open', 'rowalign', 'rowlines', 'rowspacing', 'rowspan', 'rspace', 'rquote', 'scriptlevel', 'scriptminsize', 'scriptsizemultiplier', 'selection', 'separator', 'separators', 'stretchy', 'subscriptshift', 'supscriptshift', 'symmetric', 'voffset', 'width', 'xmlns']);\n var xml = freeze(['xlink:href', 'xml:id', 'xlink:title', 'xml:space', 'xmlns:xlink']);\n\n var MUSTACHE_EXPR = seal(/\\{\\{[\\w\\W]*|[\\w\\W]*\\}\\}/gm); // Specify template detection regex for SAFE_FOR_TEMPLATES mode\n\n var ERB_EXPR = seal(/<%[\\w\\W]*|[\\w\\W]*%>/gm);\n var DATA_ATTR = seal(/^data-[\\-\\w.\\u00B7-\\uFFFF]/); // eslint-disable-line no-useless-escape\n\n var ARIA_ATTR = seal(/^aria-[\\-\\w]+$/); // eslint-disable-line no-useless-escape\n\n var IS_ALLOWED_URI = seal(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\\-]+(?:[^a-z+.\\-:]|$))/i // eslint-disable-line no-useless-escape\n );\n var IS_SCRIPT_OR_DATA = seal(/^(?:\\w+script|data):/i);\n var ATTR_WHITESPACE = seal(/[\\u0000-\\u0020\\u00A0\\u1680\\u180E\\u2000-\\u2029\\u205F\\u3000]/g // eslint-disable-line no-control-regex\n );\n var DOCTYPE_NAME = seal(/^html$/i);\n\n var getGlobal = function getGlobal() {\n return typeof window === 'undefined' ? null : window;\n };\n /**\n * Creates a no-op policy for internal use only.\n * Don't export this function outside this module!\n * @param {?TrustedTypePolicyFactory} trustedTypes The policy factory.\n * @param {Document} document The document object (to determine policy name suffix)\n * @return {?TrustedTypePolicy} The policy created (or null, if Trusted Types\n * are not supported).\n */\n\n\n var _createTrustedTypesPolicy = function _createTrustedTypesPolicy(trustedTypes, document) {\n if (_typeof(trustedTypes) !== 'object' || typeof trustedTypes.createPolicy !== 'function') {\n return null;\n } // Allow the callers to control the unique policy name\n // by adding a data-tt-policy-suffix to the script element with the DOMPurify.\n // Policy creation with duplicate names throws in Trusted Types.\n\n\n var suffix = null;\n var ATTR_NAME = 'data-tt-policy-suffix';\n\n if (document.currentScript && document.currentScript.hasAttribute(ATTR_NAME)) {\n suffix = document.currentScript.getAttribute(ATTR_NAME);\n }\n\n var policyName = 'dompurify' + (suffix ? '#' + suffix : '');\n\n try {\n return trustedTypes.createPolicy(policyName, {\n createHTML: function createHTML(html) {\n return html;\n },\n createScriptURL: function createScriptURL(scriptUrl) {\n return scriptUrl;\n }\n });\n } catch (_) {\n // Policy creation failed (most likely another DOMPurify script has\n // already run). Skip creating the policy, as this will only cause errors\n // if TT are enforced.\n console.warn('TrustedTypes policy ' + policyName + ' could not be created.');\n return null;\n }\n };\n\n function createDOMPurify() {\n var window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal();\n\n var DOMPurify = function DOMPurify(root) {\n return createDOMPurify(root);\n };\n /**\n * Version label, exposed for easier checks\n * if DOMPurify is up to date or not\n */\n\n\n DOMPurify.version = '2.3.10';\n /**\n * Array of elements that DOMPurify removed during sanitation.\n * Empty if nothing was removed.\n */\n\n DOMPurify.removed = [];\n\n if (!window || !window.document || window.document.nodeType !== 9) {\n // Not running in a browser, provide a factory function\n // so that you can pass your own Window\n DOMPurify.isSupported = false;\n return DOMPurify;\n }\n\n var originalDocument = window.document;\n var document = window.document;\n var DocumentFragment = window.DocumentFragment,\n HTMLTemplateElement = window.HTMLTemplateElement,\n Node = window.Node,\n Element = window.Element,\n NodeFilter = window.NodeFilter,\n _window$NamedNodeMap = window.NamedNodeMap,\n NamedNodeMap = _window$NamedNodeMap === void 0 ? window.NamedNodeMap || window.MozNamedAttrMap : _window$NamedNodeMap,\n HTMLFormElement = window.HTMLFormElement,\n DOMParser = window.DOMParser,\n trustedTypes = window.trustedTypes;\n var ElementPrototype = Element.prototype;\n var cloneNode = lookupGetter(ElementPrototype, 'cloneNode');\n var getNextSibling = lookupGetter(ElementPrototype, 'nextSibling');\n var getChildNodes = lookupGetter(ElementPrototype, 'childNodes');\n var getParentNode = lookupGetter(ElementPrototype, 'parentNode'); // As per issue #47, the web-components registry is inherited by a\n // new document created via createHTMLDocument. As per the spec\n // (http://w3c.github.io/webcomponents/spec/custom/#creating-and-passing-registries)\n // a new empty registry is used when creating a template contents owner\n // document, so we use that as our parent document to ensure nothing\n // is inherited.\n\n if (typeof HTMLTemplateElement === 'function') {\n var template = document.createElement('template');\n\n if (template.content && template.content.ownerDocument) {\n document = template.content.ownerDocument;\n }\n }\n\n var trustedTypesPolicy = _createTrustedTypesPolicy(trustedTypes, originalDocument);\n\n var emptyHTML = trustedTypesPolicy ? trustedTypesPolicy.createHTML('') : '';\n var _document = document,\n implementation = _document.implementation,\n createNodeIterator = _document.createNodeIterator,\n createDocumentFragment = _document.createDocumentFragment,\n getElementsByTagName = _document.getElementsByTagName;\n var importNode = originalDocument.importNode;\n var documentMode = {};\n\n try {\n documentMode = clone(document).documentMode ? document.documentMode : {};\n } catch (_) {}\n\n var hooks = {};\n /**\n * Expose whether this browser supports running the full DOMPurify.\n */\n\n DOMPurify.isSupported = typeof getParentNode === 'function' && implementation && typeof implementation.createHTMLDocument !== 'undefined' && documentMode !== 9;\n var MUSTACHE_EXPR$1 = MUSTACHE_EXPR,\n ERB_EXPR$1 = ERB_EXPR,\n DATA_ATTR$1 = DATA_ATTR,\n ARIA_ATTR$1 = ARIA_ATTR,\n IS_SCRIPT_OR_DATA$1 = IS_SCRIPT_OR_DATA,\n ATTR_WHITESPACE$1 = ATTR_WHITESPACE;\n var IS_ALLOWED_URI$1 = IS_ALLOWED_URI;\n /**\n * We consider the elements and attributes below to be safe. Ideally\n * don't add any new ones but feel free to remove unwanted ones.\n */\n\n /* allowed element names */\n\n var ALLOWED_TAGS = null;\n var DEFAULT_ALLOWED_TAGS = addToSet({}, [].concat(_toConsumableArray(html$1), _toConsumableArray(svg$1), _toConsumableArray(svgFilters), _toConsumableArray(mathMl$1), _toConsumableArray(text)));\n /* Allowed attribute names */\n\n var ALLOWED_ATTR = null;\n var DEFAULT_ALLOWED_ATTR = addToSet({}, [].concat(_toConsumableArray(html), _toConsumableArray(svg), _toConsumableArray(mathMl), _toConsumableArray(xml)));\n /*\n * Configure how DOMPUrify should handle custom elements and their attributes as well as customized built-in elements.\n * @property {RegExp|Function|null} tagNameCheck one of [null, regexPattern, predicate]. Default: `null` (disallow any custom elements)\n * @property {RegExp|Function|null} attributeNameCheck one of [null, regexPattern, predicate]. Default: `null` (disallow any attributes not on the allow list)\n * @property {boolean} allowCustomizedBuiltInElements allow custom elements derived from built-ins if they pass CUSTOM_ELEMENT_HANDLING.tagNameCheck. Default: `false`.\n */\n\n var CUSTOM_ELEMENT_HANDLING = Object.seal(Object.create(null, {\n tagNameCheck: {\n writable: true,\n configurable: false,\n enumerable: true,\n value: null\n },\n attributeNameCheck: {\n writable: true,\n configurable: false,\n enumerable: true,\n value: null\n },\n allowCustomizedBuiltInElements: {\n writable: true,\n configurable: false,\n enumerable: true,\n value: false\n }\n }));\n /* Explicitly forbidden tags (overrides ALLOWED_TAGS/ADD_TAGS) */\n\n var FORBID_TAGS = null;\n /* Explicitly forbidden attributes (overrides ALLOWED_ATTR/ADD_ATTR) */\n\n var FORBID_ATTR = null;\n /* Decide if ARIA attributes are okay */\n\n var ALLOW_ARIA_ATTR = true;\n /* Decide if custom data attributes are okay */\n\n var ALLOW_DATA_ATTR = true;\n /* Decide if unknown protocols are okay */\n\n var ALLOW_UNKNOWN_PROTOCOLS = false;\n /* Output should be safe for common template engines.\n * This means, DOMPurify removes data attributes, mustaches and ERB\n */\n\n var SAFE_FOR_TEMPLATES = false;\n /* Decide if document with ... should be returned */\n\n var WHOLE_DOCUMENT = false;\n /* Track whether config is already set on this instance of DOMPurify. */\n\n var SET_CONFIG = false;\n /* Decide if all elements (e.g. style, script) must be children of\n * document.body. By default, browsers might move them to document.head */\n\n var FORCE_BODY = false;\n /* Decide if a DOM `HTMLBodyElement` should be returned, instead of a html\n * string (or a TrustedHTML object if Trusted Types are supported).\n * If `WHOLE_DOCUMENT` is enabled a `HTMLHtmlElement` will be returned instead\n */\n\n var RETURN_DOM = false;\n /* Decide if a DOM `DocumentFragment` should be returned, instead of a html\n * string (or a TrustedHTML object if Trusted Types are supported) */\n\n var RETURN_DOM_FRAGMENT = false;\n /* Try to return a Trusted Type object instead of a string, return a string in\n * case Trusted Types are not supported */\n\n var RETURN_TRUSTED_TYPE = false;\n /* Output should be free from DOM clobbering attacks? */\n\n var SANITIZE_DOM = true;\n /* Keep element content when removing element? */\n\n var KEEP_CONTENT = true;\n /* If a `Node` is passed to sanitize(), then performs sanitization in-place instead\n * of importing it into a new Document and returning a sanitized copy */\n\n var IN_PLACE = false;\n /* Allow usage of profiles like html, svg and mathMl */\n\n var USE_PROFILES = {};\n /* Tags to ignore content of when KEEP_CONTENT is true */\n\n var FORBID_CONTENTS = null;\n var DEFAULT_FORBID_CONTENTS = addToSet({}, ['annotation-xml', 'audio', 'colgroup', 'desc', 'foreignobject', 'head', 'iframe', 'math', 'mi', 'mn', 'mo', 'ms', 'mtext', 'noembed', 'noframes', 'noscript', 'plaintext', 'script', 'style', 'svg', 'template', 'thead', 'title', 'video', 'xmp']);\n /* Tags that are safe for data: URIs */\n\n var DATA_URI_TAGS = null;\n var DEFAULT_DATA_URI_TAGS = addToSet({}, ['audio', 'video', 'img', 'source', 'image', 'track']);\n /* Attributes safe for values like \"javascript:\" */\n\n var URI_SAFE_ATTRIBUTES = null;\n var DEFAULT_URI_SAFE_ATTRIBUTES = addToSet({}, ['alt', 'class', 'for', 'id', 'label', 'name', 'pattern', 'placeholder', 'role', 'summary', 'title', 'value', 'style', 'xmlns']);\n var MATHML_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';\n var SVG_NAMESPACE = 'http://www.w3.org/2000/svg';\n var HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';\n /* Document namespace */\n\n var NAMESPACE = HTML_NAMESPACE;\n var IS_EMPTY_INPUT = false;\n /* Parsing of strict XHTML documents */\n\n var PARSER_MEDIA_TYPE;\n var SUPPORTED_PARSER_MEDIA_TYPES = ['application/xhtml+xml', 'text/html'];\n var DEFAULT_PARSER_MEDIA_TYPE = 'text/html';\n var transformCaseFunc;\n /* Keep a reference to config to pass to hooks */\n\n var CONFIG = null;\n /* Ideally, do not touch anything below this line */\n\n /* ______________________________________________ */\n\n var formElement = document.createElement('form');\n\n var isRegexOrFunction = function isRegexOrFunction(testValue) {\n return testValue instanceof RegExp || testValue instanceof Function;\n };\n /**\n * _parseConfig\n *\n * @param {Object} cfg optional config literal\n */\n // eslint-disable-next-line complexity\n\n\n var _parseConfig = function _parseConfig(cfg) {\n if (CONFIG && CONFIG === cfg) {\n return;\n }\n /* Shield configuration object from tampering */\n\n\n if (!cfg || _typeof(cfg) !== 'object') {\n cfg = {};\n }\n /* Shield configuration object from prototype pollution */\n\n\n cfg = clone(cfg);\n PARSER_MEDIA_TYPE = // eslint-disable-next-line unicorn/prefer-includes\n SUPPORTED_PARSER_MEDIA_TYPES.indexOf(cfg.PARSER_MEDIA_TYPE) === -1 ? PARSER_MEDIA_TYPE = DEFAULT_PARSER_MEDIA_TYPE : PARSER_MEDIA_TYPE = cfg.PARSER_MEDIA_TYPE; // HTML tags and attributes are not case-sensitive, converting to lowercase. Keeping XHTML as is.\n\n transformCaseFunc = PARSER_MEDIA_TYPE === 'application/xhtml+xml' ? function (x) {\n return x;\n } : stringToLowerCase;\n /* Set configuration parameters */\n\n ALLOWED_TAGS = 'ALLOWED_TAGS' in cfg ? addToSet({}, cfg.ALLOWED_TAGS, transformCaseFunc) : DEFAULT_ALLOWED_TAGS;\n ALLOWED_ATTR = 'ALLOWED_ATTR' in cfg ? addToSet({}, cfg.ALLOWED_ATTR, transformCaseFunc) : DEFAULT_ALLOWED_ATTR;\n URI_SAFE_ATTRIBUTES = 'ADD_URI_SAFE_ATTR' in cfg ? addToSet(clone(DEFAULT_URI_SAFE_ATTRIBUTES), // eslint-disable-line indent\n cfg.ADD_URI_SAFE_ATTR, // eslint-disable-line indent\n transformCaseFunc // eslint-disable-line indent\n ) // eslint-disable-line indent\n : DEFAULT_URI_SAFE_ATTRIBUTES;\n DATA_URI_TAGS = 'ADD_DATA_URI_TAGS' in cfg ? addToSet(clone(DEFAULT_DATA_URI_TAGS), // eslint-disable-line indent\n cfg.ADD_DATA_URI_TAGS, // eslint-disable-line indent\n transformCaseFunc // eslint-disable-line indent\n ) // eslint-disable-line indent\n : DEFAULT_DATA_URI_TAGS;\n FORBID_CONTENTS = 'FORBID_CONTENTS' in cfg ? addToSet({}, cfg.FORBID_CONTENTS, transformCaseFunc) : DEFAULT_FORBID_CONTENTS;\n FORBID_TAGS = 'FORBID_TAGS' in cfg ? addToSet({}, cfg.FORBID_TAGS, transformCaseFunc) : {};\n FORBID_ATTR = 'FORBID_ATTR' in cfg ? addToSet({}, cfg.FORBID_ATTR, transformCaseFunc) : {};\n USE_PROFILES = 'USE_PROFILES' in cfg ? cfg.USE_PROFILES : false;\n ALLOW_ARIA_ATTR = cfg.ALLOW_ARIA_ATTR !== false; // Default true\n\n ALLOW_DATA_ATTR = cfg.ALLOW_DATA_ATTR !== false; // Default true\n\n ALLOW_UNKNOWN_PROTOCOLS = cfg.ALLOW_UNKNOWN_PROTOCOLS || false; // Default false\n\n SAFE_FOR_TEMPLATES = cfg.SAFE_FOR_TEMPLATES || false; // Default false\n\n WHOLE_DOCUMENT = cfg.WHOLE_DOCUMENT || false; // Default false\n\n RETURN_DOM = cfg.RETURN_DOM || false; // Default false\n\n RETURN_DOM_FRAGMENT = cfg.RETURN_DOM_FRAGMENT || false; // Default false\n\n RETURN_TRUSTED_TYPE = cfg.RETURN_TRUSTED_TYPE || false; // Default false\n\n FORCE_BODY = cfg.FORCE_BODY || false; // Default false\n\n SANITIZE_DOM = cfg.SANITIZE_DOM !== false; // Default true\n\n KEEP_CONTENT = cfg.KEEP_CONTENT !== false; // Default true\n\n IN_PLACE = cfg.IN_PLACE || false; // Default false\n\n IS_ALLOWED_URI$1 = cfg.ALLOWED_URI_REGEXP || IS_ALLOWED_URI$1;\n NAMESPACE = cfg.NAMESPACE || HTML_NAMESPACE;\n\n if (cfg.CUSTOM_ELEMENT_HANDLING && isRegexOrFunction(cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck)) {\n CUSTOM_ELEMENT_HANDLING.tagNameCheck = cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck;\n }\n\n if (cfg.CUSTOM_ELEMENT_HANDLING && isRegexOrFunction(cfg.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)) {\n CUSTOM_ELEMENT_HANDLING.attributeNameCheck = cfg.CUSTOM_ELEMENT_HANDLING.attributeNameCheck;\n }\n\n if (cfg.CUSTOM_ELEMENT_HANDLING && typeof cfg.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements === 'boolean') {\n CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements = cfg.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements;\n }\n\n if (SAFE_FOR_TEMPLATES) {\n ALLOW_DATA_ATTR = false;\n }\n\n if (RETURN_DOM_FRAGMENT) {\n RETURN_DOM = true;\n }\n /* Parse profile info */\n\n\n if (USE_PROFILES) {\n ALLOWED_TAGS = addToSet({}, _toConsumableArray(text));\n ALLOWED_ATTR = [];\n\n if (USE_PROFILES.html === true) {\n addToSet(ALLOWED_TAGS, html$1);\n addToSet(ALLOWED_ATTR, html);\n }\n\n if (USE_PROFILES.svg === true) {\n addToSet(ALLOWED_TAGS, svg$1);\n addToSet(ALLOWED_ATTR, svg);\n addToSet(ALLOWED_ATTR, xml);\n }\n\n if (USE_PROFILES.svgFilters === true) {\n addToSet(ALLOWED_TAGS, svgFilters);\n addToSet(ALLOWED_ATTR, svg);\n addToSet(ALLOWED_ATTR, xml);\n }\n\n if (USE_PROFILES.mathMl === true) {\n addToSet(ALLOWED_TAGS, mathMl$1);\n addToSet(ALLOWED_ATTR, mathMl);\n addToSet(ALLOWED_ATTR, xml);\n }\n }\n /* Merge configuration parameters */\n\n\n if (cfg.ADD_TAGS) {\n if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) {\n ALLOWED_TAGS = clone(ALLOWED_TAGS);\n }\n\n addToSet(ALLOWED_TAGS, cfg.ADD_TAGS, transformCaseFunc);\n }\n\n if (cfg.ADD_ATTR) {\n if (ALLOWED_ATTR === DEFAULT_ALLOWED_ATTR) {\n ALLOWED_ATTR = clone(ALLOWED_ATTR);\n }\n\n addToSet(ALLOWED_ATTR, cfg.ADD_ATTR, transformCaseFunc);\n }\n\n if (cfg.ADD_URI_SAFE_ATTR) {\n addToSet(URI_SAFE_ATTRIBUTES, cfg.ADD_URI_SAFE_ATTR, transformCaseFunc);\n }\n\n if (cfg.FORBID_CONTENTS) {\n if (FORBID_CONTENTS === DEFAULT_FORBID_CONTENTS) {\n FORBID_CONTENTS = clone(FORBID_CONTENTS);\n }\n\n addToSet(FORBID_CONTENTS, cfg.FORBID_CONTENTS, transformCaseFunc);\n }\n /* Add #text in case KEEP_CONTENT is set to true */\n\n\n if (KEEP_CONTENT) {\n ALLOWED_TAGS['#text'] = true;\n }\n /* Add html, head and body to ALLOWED_TAGS in case WHOLE_DOCUMENT is true */\n\n\n if (WHOLE_DOCUMENT) {\n addToSet(ALLOWED_TAGS, ['html', 'head', 'body']);\n }\n /* Add tbody to ALLOWED_TAGS in case tables are permitted, see #286, #365 */\n\n\n if (ALLOWED_TAGS.table) {\n addToSet(ALLOWED_TAGS, ['tbody']);\n delete FORBID_TAGS.tbody;\n } // Prevent further manipulation of configuration.\n // Not available in IE8, Safari 5, etc.\n\n\n if (freeze) {\n freeze(cfg);\n }\n\n CONFIG = cfg;\n };\n\n var MATHML_TEXT_INTEGRATION_POINTS = addToSet({}, ['mi', 'mo', 'mn', 'ms', 'mtext']);\n var HTML_INTEGRATION_POINTS = addToSet({}, ['foreignobject', 'desc', 'title', 'annotation-xml']); // Certain elements are allowed in both SVG and HTML\n // namespace. We need to specify them explicitly\n // so that they don't get erroneously deleted from\n // HTML namespace.\n\n var COMMON_SVG_AND_HTML_ELEMENTS = addToSet({}, ['title', 'style', 'font', 'a', 'script']);\n /* Keep track of all possible SVG and MathML tags\n * so that we can perform the namespace checks\n * correctly. */\n\n var ALL_SVG_TAGS = addToSet({}, svg$1);\n addToSet(ALL_SVG_TAGS, svgFilters);\n addToSet(ALL_SVG_TAGS, svgDisallowed);\n var ALL_MATHML_TAGS = addToSet({}, mathMl$1);\n addToSet(ALL_MATHML_TAGS, mathMlDisallowed);\n /**\n *\n *\n * @param {Element} element a DOM element whose namespace is being checked\n * @returns {boolean} Return false if the element has a\n * namespace that a spec-compliant parser would never\n * return. Return true otherwise.\n */\n\n var _checkValidNamespace = function _checkValidNamespace(element) {\n var parent = getParentNode(element); // In JSDOM, if we're inside shadow DOM, then parentNode\n // can be null. We just simulate parent in this case.\n\n if (!parent || !parent.tagName) {\n parent = {\n namespaceURI: HTML_NAMESPACE,\n tagName: 'template'\n };\n }\n\n var tagName = stringToLowerCase(element.tagName);\n var parentTagName = stringToLowerCase(parent.tagName);\n\n if (element.namespaceURI === SVG_NAMESPACE) {\n // The only way to switch from HTML namespace to SVG\n // is via