mermaid

<!DOCTYPE html> <html> <head> <title>sequenceRenderer.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="../../../doc-style.css" /> <script src="../../../doc-filelist.js"></script> <script> var relativeDir = "../../../", thisFile = "Users/knut/Documents/source/mermaid/src/diagrams/sequenceDiagram/sequenceRenderer.js", defaultSidebar = true; </script> <script src="../../../doc-script.js"></script> <script src="../../../mermaid.js"></script> <link rel="stylesheet" href="../../../mermaid.css" /> </head> <body> <div id="sidebar_wrapper"> <div id="sidebar_switch"> Files Headings </div> <div id="tree"></div> <div id="headings"> <div class="heading h1"> <a href="#sequenceRenderer.js">sequenceRenderer.js</a> </div> </div> </div> <div id="sidebar-toggle"></div> <div id="container"><div class="background highlight"></div> <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="docs"> <div class="pilwrap" id="sequenceRenderer.js"> <h1> <a href="#sequenceRenderer.js" name="sequenceRenderer.js" class="pilcrow">¶</a>sequenceRenderer.js </h1> </div> </td> <td class="code highlight"></td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1" id="section-1">¶</a> </div> <div class="dox"> <div class="summary">Created by knut on 14-11-23. </div> <div class="body"> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre>var sq = require('./parser/sequenceDiagram').parser; sq.yy = require('./sequenceDb'); var svgDraw = require('./svgDraw'); var d3 = require('../../d3'); var log = require('../../logger').create(); var conf = { diagramMarginX:50, diagramMarginY:10, </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2" id="section-2">¶</a> </div> Margin between actors </td> <td class="code highlight"><div class="highlight"><pre> actorMargin:50, </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3" id="section-3">¶</a> </div> Width of actor moxes </td> <td class="code highlight"><div class="highlight"><pre> width:150, </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4" id="section-4">¶</a> </div> Height of actor boxes </td> <td class="code highlight"><div class="highlight"><pre> height:65, </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5" id="section-5">¶</a> </div> Margin around loop boxes </td> <td class="code highlight"><div class="highlight"><pre> boxMargin:10, boxTextMargin:5, noteMargin:10, </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6" id="section-6">¶</a> </div> Space between messages </td> <td class="code highlight"><div class="highlight"><pre> messageMargin:35, </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7" id="section-7">¶</a> </div> mirror actors under diagram </td> <td class="code highlight"><div class="highlight"><pre> mirrorActors:false, </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8" id="section-8">¶</a> </div> Depending on css styling this might need adjustment Prolongs the edge of the diagram downwards </td> <td class="code highlight"><div class="highlight"><pre> bottomMarginAdj:1 }; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9" id="section-9">¶</a> </div> var bb = getBBox("path"); </td> <td class="code highlight"><div class="highlight"><pre> exports.bounds = { data:{ startx:undefined, stopx :undefined, starty:undefined, stopy :undefined, }, verticalPos:0, list: [], init : function(){ this.list = []; this.data = { startx:undefined, stopx :undefined, starty:undefined, stopy :undefined, }; this.verticalPos =0; }, updateVal : function (obj,key,val,fun){ if(typeof obj[key] === 'undefined'){ obj[key] = val; }else{ obj[key] = fun(val,obj[key]); } }, updateLoops:function(startx,starty,stopx,stopy){ var _self = this; var cnt = 0; this.list.forEach(function(loop){ cnt++; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10" id="section-10">¶</a> </div> The loop list is a stack so the biggest margins in the beginning of the list </td> <td class="code highlight"><div class="highlight"><pre> var n = _self.list.length-cnt+1; _self.updateVal(loop, 'startx',startx - n*conf.boxMargin, Math.min); _self.updateVal(loop, 'starty',starty - n*conf.boxMargin, Math.min); _self.updateVal(loop, 'stopx' ,stopx + n*conf.boxMargin, Math.max); _self.updateVal(loop, 'stopy' ,stopy + n*conf.boxMargin, Math.max); _self.updateVal(exports.bounds.data,'startx',startx - n*conf.boxMargin ,Math.min); _self.updateVal(exports.bounds.data,'starty',starty - n*conf.boxMargin ,Math.min); _self.updateVal(exports.bounds.data,'stopx' ,stopx + n*conf.boxMargin ,Math.max); _self.updateVal(exports.bounds.data,'stopy' ,stopy + n*conf.boxMargin ,Math.max); }); }, insert:function(startx,starty,stopx,stopy){ var _startx, _starty, _stopx, _stopy; _startx = Math.min(startx,stopx); _stopx = Math.max(startx,stopx); _starty = Math.min(starty,stopy); _stopy = Math.max(starty,stopy); this.updateVal(exports.bounds.data,'startx',_startx,Math.min); this.updateVal(exports.bounds.data,'starty',_starty,Math.min); this.updateVal(exports.bounds.data,'stopx' ,_stopx ,Math.max); this.updateVal(exports.bounds.data,'stopy' ,_stopy ,Math.max); this.updateLoops(_startx,_starty,_stopx,_stopy); }, newLoop:function(title){ this.list.push({startx:undefined,starty:this.verticalPos,stopx:undefined,stopy:undefined, title:title}); }, endLoop:function(){ var loop = this.list.pop(); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11" id="section-11">¶</a> </div> loop.stopy = exports.bounds.getVerticalPos(); </td> <td class="code highlight"><div class="highlight"><pre> return loop; }, addElseToLoop:function(message){ var loop = this.list.pop(); loop.elsey = exports.bounds.getVerticalPos(); loop.elseText = message; this.list.push(loop); }, bumpVerticalPos:function(bump){ this.verticalPos = this.verticalPos + bump; this.data.stopy = this.verticalPos; }, getVerticalPos:function(){ return this.verticalPos; }, getBounds:function(){ return this.data; } }; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12" id="section-12">¶</a> </div> <div class="dox"> <div class="summary">Draws an actor in the diagram with the attaced line </div> <div class="body"> </div> <div class="details"> <div class="dox_tag_title">Params</div> <div class="dox_tag_detail"> center <ul> <li>The center of the the actor</li> </ul> </div> <div class="dox_tag_detail"> pos The position if the actor in the liost of actors </div> <div class="dox_tag_detail"> description The text in the box </div> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre> var drawNote = function(elem, startx, verticalPos, msg){ var rect = svgDraw.getNoteRect(); rect.x = startx; rect.y = verticalPos; rect.width = conf.width; rect.class = 'note'; var g = elem.append('g'); var rectElem = svgDraw.drawRect(g, rect); var textObj = svgDraw.getTextObj(); textObj.x = startx; textObj.y = verticalPos-13; textObj.textMargin = conf.noteMargin; textObj.dy = '1em'; textObj.text = msg.message; textObj.class = 'noteText'; var textElem = svgDraw.drawText(g,textObj, conf.width-conf.noteMargin); var textHeight = textElem[0][0].getBBox().height; if(textHeight > conf.width){ textElem.remove(); g = elem.append("g"); textElem = svgDraw.drawText(g,textObj, 2*conf.width); textHeight = textElem[0][0].getBBox().height; rectElem.attr('width',2*conf.width); exports.bounds.insert(startx, verticalPos, startx + 2*conf.width, verticalPos + 2*conf.noteMargin + textHeight); }else{ exports.bounds.insert(startx, verticalPos, startx + conf.width, verticalPos + 2*conf.noteMargin + textHeight); } rectElem.attr('height',textHeight+ 2*conf.noteMargin); exports.bounds.bumpVerticalPos(textHeight+ 2*conf.noteMargin); }; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13" id="section-13">¶</a> </div> <div class="dox"> <div class="summary">Draws a message </div> <div class="body"> </div> <div class="details"> <div class="dox_tag_title">Params</div> <div class="dox_tag_detail"> elem </div> <div class="dox_tag_detail"> startx </div> <div class="dox_tag_detail"> stopx </div> <div class="dox_tag_detail"> verticalPos </div> <div class="dox_tag_detail"> txtCenter </div> <div class="dox_tag_detail"> msg </div> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre> var drawMessage = function(elem, startx, stopx, verticalPos, msg){ var g = elem.append("g"); var txtCenter = startx + (stopx-startx)/2; var textElem = g.append("text") // text label for the x axis .attr("x", txtCenter) .attr("y", verticalPos - 7) .style("text-anchor", "middle") .attr("class", "messageText") .text(msg.message); var textWidth; if(typeof textElem[0][0].getBBox !== 'undefined'){ textWidth = textElem[0][0].getBBox().width; } else{ </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14" id="section-14">¶</a> </div> textWidth = getBBox(textElem).width; //.getComputedTextLength() </td> <td class="code highlight"><div class="highlight"><pre> textWidth = textElem[0][0].getBoundingClientRect(); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15" id="section-15">¶</a> </div> textWidth = textElem[0][0].getComputedTextLength(); </td> <td class="code highlight"><div class="highlight"><pre> } var line; if(startx===stopx){ line = g.append("path") .attr('d', 'M ' +startx+ ','+verticalPos+' C ' +(startx+60)+ ','+(verticalPos-10)+' ' +(startx+60)+ ',' + (verticalPos+30)+' ' +startx+ ','+(verticalPos+20)); exports.bounds.bumpVerticalPos(30); var dx = Math.max(textWidth/2,100); exports.bounds.insert(startx-dx, exports.bounds.getVerticalPos() -10, stopx+dx, exports.bounds.getVerticalPos()); }else{ line = g.append("line"); line.attr("x1", startx); line.attr("y1", verticalPos); line.attr("x2", stopx); line.attr("y2", verticalPos); exports.bounds.insert(startx, exports.bounds.getVerticalPos() -10, stopx, exports.bounds.getVerticalPos()); } </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16" id="section-16">¶</a> </div> Make an SVG Container Draw the line </td> <td class="code highlight"><div class="highlight"><pre> if (msg.type === sq.yy.LINETYPE.DOTTED || msg.type === sq.yy.LINETYPE.DOTTED_CROSS || msg.type === sq.yy.LINETYPE.DOTTED_OPEN) { line.style("stroke-dasharray", ("3, 3")); line.attr("class", "messageLine1"); } else { line.attr("class", "messageLine0"); } line.attr("stroke-width", 2); line.attr("stroke", "black"); line.style("fill", "none"); // remove any fill colour if (msg.type === sq.yy.LINETYPE.SOLID || msg.type === sq.yy.LINETYPE.DOTTED){ line.attr("marker-end", "url(#arrowhead)"); } if (msg.type === sq.yy.LINETYPE.SOLID_CROSS || msg.type === sq.yy.LINETYPE.DOTTED_CROSS){ line.attr("marker-end", "url(#crosshead)"); } }; module.exports.drawActors <spa