mermaid

<!DOCTYPE html> <html> <head> <title>svgDraw.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/svgDraw.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="#svgDraw.js">svgDraw.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="svgDraw.js"> <h1> <a href="#svgDraw.js" name="svgDraw.js" class="pilcrow">¶</a>svgDraw.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-12-20. </div> <div class="body"> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre>var log = require('../../logger').create(); exports.drawRect = function(elem , rectData){ var rectElem = elem.append("rect"); rectElem.attr("x", rectData.x); rectElem.attr("y", rectData.y); rectElem.attr("fill", rectData.fill); rectElem.attr("stroke", rectData.stroke); rectElem.attr("width", rectData.width); rectElem.attr("height", rectData.height); rectElem.attr("rx", rectData.rx); rectElem.attr("ry", rectData.ry); if(typeof rectData.class !== 'undefined'){ rectElem.attr("class", rectData.class); } return rectElem; }; exports.drawText = function(elem, textData, width) { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2" id="section-2">¶</a> </div> Remove and ignore br:s </td> <td class="code highlight"><div class="highlight"><pre> var nText = textData.text.replace(/<br\/?>/ig,' '); var textElem = elem.append('text'); textElem.attr('x', textData.x); textElem.attr('y', textData.y); textElem.style('text-anchor', textData.anchor); textElem.attr('fill', textData.fill); if (typeof textData.class !== 'undefined') { textElem.attr("class", textData.class); } </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3" id="section-3">¶</a> </div> <div class="dox"> <div class="summary">textData.text.split(/<br\/?>/ig).forEach(function(rowText){ var span = textElem.append('tspan'); span.attr('x', textData.x +textData.textMargin); span.attr('dy', textData.dy); span.text(rowText); }); </div> <div class="body"> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre> var span = textElem.append('tspan'); span.attr('x', textData.x); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4" id="section-4">¶</a> </div> span.attr('dy', textData.dy); </td> <td class="code highlight"><div class="highlight"><pre> span.text(nText); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5" id="section-5">¶</a> </div> if(typeof textElem.textwrap !== 'undefined'){ textElem.textwrap({ x: textData.x, // bounding box is 300 pixels from the left y: textData.y, // bounding box is 400 pixels from the top width: width, // bounding box is 500 pixels across height: 1800 // bounding box is 600 pixels tall }, textData.textMargin); } </td> <td class="code highlight"><div class="highlight"><pre> return textElem; }; exports.drawLabel = function(elem , txtObject){ var rectData = exports.getNoteRect(); rectData.x = txtObject.x; rectData.y = txtObject.y; rectData.width = 50; rectData.height = 20; rectData.fill = '#526e52'; rectData.stroke = 'none'; rectData.class = 'labelBox'; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6" id="section-6">¶</a> </div> rectData.color = 'white'; </td> <td class="code highlight"><div class="highlight"><pre> exports.drawRect(elem, rectData); txtObject.y = txtObject.y + txtObject.labelMargin; txtObject.x = txtObject.x + 0.5*txtObject.labelMargin; txtObject.fill = 'white'; exports.drawText(elem, txtObject); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7" id="section-7">¶</a> </div> return textElem; </td> <td class="code highlight"><div class="highlight"><pre> }; var actorCnt = -1; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8" id="section-8">¶</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> exports.drawActor = function(elem, left, verticalPos, description,conf){ var center = left + (conf.width/2); var g = elem.append("g"); if(verticalPos === 0) { actorCnt++; g.append("line") .attr("id", 'actor'+actorCnt) .attr("x1", center) .attr("y1", 5) .attr("x2", center) .attr("y2", 2000) .attr("class", 'actor-line') .attr("stroke-width", '0.5px') .attr("stroke", '#999'); } var rect = exports.getNoteRect(); rect.x = left; rect.y = verticalPos; rect.fill = '#eaeaea'; rect.width = conf.width; rect.height = conf.height; rect.class = 'actor'; rect.rx = 3; rect.ry = 3; exports.drawRect(g, rect); g.append("text") // text label for the x axis .attr("x", center) .attr("y", verticalPos + (conf.height/2)+5) .attr('class','actor') .style("text-anchor", "middle") .text(description) ; }; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9" id="section-9">¶</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 list 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> exports.drawLoop = function(elem,bounds,labelText, conf){ var g = elem.append("g"); var drawLoopLine = function(startx,starty,stopx,stopy){ g.append("line") .attr("x1", startx) .attr("y1", starty) .attr("x2", stopx ) .attr("y2", stopy ) .attr("stroke-width", 2) .attr("stroke", "#526e52") .attr('class','loopLine'); }; drawLoopLine(bounds.startx, bounds.starty, bounds.stopx , bounds.starty); drawLoopLine(bounds.stopx , bounds.starty, bounds.stopx , bounds.stopy ); drawLoopLine(bounds.startx, bounds.stopy , bounds.stopx , bounds.stopy ); drawLoopLine(bounds.startx, bounds.starty, bounds.startx, bounds.stopy ); if(typeof bounds.elsey !== 'undefined'){ drawLoopLine(bounds.startx, bounds.elsey, bounds.stopx, bounds.elsey ); } var txt = exports.getTextObj(); txt.text = labelText; txt.x = bounds.startx; txt.y = bounds.starty; txt.labelMargin = 1.5 * conf.boxMargin; txt.class = 'labelText'; txt.fill = 'white'; exports.drawLabel(g,txt); txt = exports.getTextObj(); txt.text = '[ ' + bounds.title + ' ]'; txt.x = bounds.startx + (bounds.stopx - bounds.startx)/2; txt.y = bounds.starty + 1.5 * conf.boxMargin; txt.anchor = 'middle'; txt.class = 'loopText'; exports.drawText(g,txt); if(typeof bounds.elseText !== 'undefined') { txt.text = '[ ' + bounds.elseText + ' ]'; txt.y = bounds.elsey + 1.5 * conf.boxMargin; exports.drawText(g, txt); } }; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10" id="section-10">¶</a> </div> <div class="dox"> <div class="summary">Setup arrow head and define the marker. The result is appended to the svg. </div> <div class="body"> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre> exports.insertArrowHead = function(elem){ elem.append("defs").append("marker") .attr("id", "arrowhead") .attr("refX", 5) .attr("refY", 2) .attr("markerWidth", 6) .attr("markerHeight", 4) .attr("orient", "auto") .append("path") .attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead }; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11" id="section-11">¶</a> </div> <div class="dox"> <div class="summary">Setup arrow head and define the marker. The result is appended to the svg. </div> <div class="body"> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre> exports.insertArrowCrossHead = function(elem){ var defs = elem.append("defs"); var marker = defs.append("marker") .attr("id", "crosshead") .attr("markerWidth", 15) .attr("markerHeight", 8) .attr("orient", "auto") .attr("refX", 16) .attr("refY", 4); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12" id="section-12">¶</a> </div> The arrow </td> <td class="code highlight"><div class="highlight"><pre> marker.append("path") .attr("fill",'black') .attr("stroke",'#000000') .style("stroke-dasharray", ("0, 0")) .attr("stroke-width",'1px') .attr("d", "M 9,2 V 6 L16,4 Z"); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13" id="section-13">¶</a> </div> The cross </td> <td class="code highlight"><div class="highlight"><pre> marker.append("path") .attr("fill",'none') .attr("stroke",'#000000') .style("stroke-dasharray", ("0, 0")) .attr("stroke-width",'1px') .attr("d", "M 0,1 L 6,7 M 6,1 L 0,7") ; //this is actual shape for arrowhead }; exports.getTextObj = function(){ var txt = { x: 0, y: 0, 'fill':'black', 'text-anchor': 'start', style: '#666', width: 100, height: 100, textMargin:0, rx: 0, ry: 0 }; return txt; }; exports.getNoteRect = function(){ var rect = { x : 0, y : 0, fill : '#EDF2AE', stroke : '#666', width : 100, anchor : 'start', height : 100, rx : 0, ry : 0 }; return rect; }; </pre></div> </td> </tr> </tbody> </table> </div> </body> </html>