diff --git a/lib/cli.js b/lib/cli.js index df627ff681..1c17f13b46 100644 --- a/lib/cli.js +++ b/lib/cli.js @@ -1,21 +1,21 @@ -var fs = require('fs'), - exec = require('child_process').exec, - chalk = require('chalk'), - which = require('which'), - parseArgs = require('minimist'), - semver = require('semver'), - path = require('path') +var fs = require('fs') +var exec = require('child_process').exec +var chalk = require('chalk') +var which = require('which') +var parseArgs = require('minimist') +var semver = require('semver') +var path = require('path') var PHANTOM_VERSION = '^2.1.0' -var info = chalk.blue.bold, - note = chalk.green.bold +var info = chalk.blue.bold +// var note = chalk.green.bold module.exports = (function () { - return new cli() + return new Cli() }()) -function cli (options) { +function Cli (options) { this.options = { alias: { help: 'h', @@ -37,7 +37,7 @@ function cli (options) { this.errors = [] this.message = null - this.helpMessage = [, + this.helpMessage = [ info('Usage: mermaid [options] ...'), '', 'file The mermaid description file to be rendered', @@ -60,10 +60,10 @@ function cli (options) { return this } -cli.prototype.parse = function (argv, next) { +Cli.prototype.parse = function (argv, next) { this.errors = [] // clear errors - var options = parseArgs(argv, this.options), - phantom + var options = parseArgs(argv, this.options) + // var phantom if (options.version) { var pkg = require('../package.json') @@ -138,7 +138,7 @@ cli.prototype.parse = function (argv, next) { } options.phantomPath = path next( - this.errors.length > 0 ? this.errors : null + this.errors.length > 0 ? this.errors : null , this.message , options ) @@ -147,12 +147,12 @@ cli.prototype.parse = function (argv, next) { } function createCheckPhantom (_phantomPath) { - var phantomPath = _phantomPath, - phantomVersion + var phantomPath = _phantomPath + // var phantomVersion return function checkPhantom (_next) { - var next = _next || function () {}, - err + var next = _next || function () { } + var err if (typeof phantomPath === 'undefined') { try { @@ -186,7 +186,7 @@ function createCheckPhantom (_phantomPath) { next(new Error('Could not find phantomjs at the specified path.')) } else if (!semver.satisfies(stdout, PHANTOM_VERSION)) { next(new Error( - 'mermaid requires phantomjs ' + + 'mermaid requires phantomjs ' + PHANTOM_VERSION + ' to be installed, found version ' + stdout diff --git a/lib/index.js b/lib/index.js index 0fdc20769a..d5ff5acd43 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,7 +1,7 @@ -var os = require('os'), - fs = require('fs'), - path = require('path'), - spawn = require('child_process').spawn +// var os = require('os') +// var fs = require('fs') +var path = require('path') +var spawn = require('child_process').spawn var mkdirp = require('mkdirp') @@ -10,22 +10,22 @@ var phantomscript = path.join(__dirname, 'phantomscript.js') module.exports = { process: processMermaid } function processMermaid (files, _options, _next) { - var options = _options || {}, - outputDir = options.outputDir || process.cwd(), - outputSuffix = options.outputSuffix || '', - next = _next || function () {}, - phantomArgs = [ - phantomscript, - outputDir, - options.png, - options.svg, - options.css, - options.sequenceConfig, - options.ganttConfig, - options.verbose, - options.width, - outputSuffix - ] + var options = _options || {} + var outputDir = options.outputDir || process.cwd() + var outputSuffix = options.outputSuffix || '' + var next = _next || function () { } + var phantomArgs = [ + phantomscript, + outputDir, + options.png, + options.svg, + options.css, + options.sequenceConfig, + options.ganttConfig, + options.verbose, + options.width, + outputSuffix + ] files.forEach(function (file) { phantomArgs.push(file) @@ -35,7 +35,7 @@ function processMermaid (files, _options, _next) { if (err) { throw err } - phantom = spawn(options.phantomPath, phantomArgs) + var phantom = spawn(options.phantomPath, phantomArgs) phantom.on('exit', next) diff --git a/lib/phantomscript.js b/lib/phantomscript.js index 04078d844d..1874233371 100644 --- a/lib/phantomscript.js +++ b/lib/phantomscript.js @@ -6,13 +6,13 @@ * https://github.com/filamentgroup/grunticon */ -phantom.onError = function (msg, trace) { +window.phantom.onError = function (msg, trace) { var msgStack = ['PHANTOM ERROR: ' + msg] if (trace && trace.length) { msgStack.push('TRACE:') trace.forEach(function (t) { msgStack.push( - ' -> ' + + ' -> ' + (t.file || t.sourceURL) + ': ' + t.line + @@ -21,32 +21,32 @@ phantom.onError = function (msg, trace) { }) } system.stderr.write(msgStack.join('\n')) - phantom.exit(1) + window.phantom.exit(1) } -var system = require('system'), - fs = require('fs'), - webpage = require('webpage') +var system = require('system') +var fs = require('fs') +var webpage = require('webpage') -var page = webpage.create(), - files = system.args.slice(10, system.args.length), - width = system.args[8] +var page = webpage.create() +var files = system.args.slice(10, system.args.length) +var width = system.args[8] if (typeof width === 'undefined' || width === 'undefined') { width = 1200 } var options = { - outputDir: system.args[1], - png: system.args[2] === 'true', - svg: system.args[3] === 'true', - css: fs.read(system.args[4]), - sequenceConfig: system.args[5] !== 'null' ? JSON.parse(fs.read(system.args[5])) : {}, - ganttConfig: system.args[6] !== 'null' ? JSON.parse(fs.read(system.args[6])) : {}, - verbose: system.args[7] === 'true', - width: width, - outputSuffix: system.args[9] - }, - log = logger(options.verbose) + outputDir: system.args[1], + png: system.args[2] === 'true', + svg: system.args[3] === 'true', + css: fs.read(system.args[4]), + sequenceConfig: system.args[5] !== 'null' ? JSON.parse(fs.read(system.args[5])) : {}, + ganttConfig: system.args[6] !== 'null' ? JSON.parse(fs.read(system.args[6])) : {}, + verbose: system.args[7] === 'true', + width: width, + outputSuffix: system.args[9] +} +var log = logger(options.verbose) options.sequenceConfig.useMaxWidth = false page.content = [ @@ -69,12 +69,12 @@ page.onConsoleMessage = function (msg, lineNum, sourceId) { console.log('Num files to execute : ' + files.length) files.forEach(function (file) { - var contents = fs.read(file), - filename = file.split(fs.separator).slice(-1), - oParser = new DOMParser(), - oDOM, - svgContent, - allElements + var contents = fs.read(file) + var filename = file.split(fs.separator).slice(-1) + var oParser = new window.DOMParser() + var oDOM + var svgContent + var allElements console.log('ready to execute png: ' + filename + '.png ') @@ -112,7 +112,7 @@ files.forEach(function (file) { } if (options.svg) { - var serialize = new XMLSerializer() + var serialize = new window.XMLSerializer() fs.write(outputPath + '.svg' , serialize.serializeToString(oDOM) + '\n' , 'w' @@ -121,15 +121,15 @@ files.forEach(function (file) { } }) -phantom.exit() +window.phantom.exit() function logger (_verbose) { var verbose = _verbose return function (_message, _level) { - var level = level, - message = _message, - log + var level = _level + var message = _message + var log log = level === 'error' ? system.stderr : system.stdout @@ -149,7 +149,7 @@ function traverse (obj) { if (node && node.hasChildNodes()) { var child = node.firstChild while (child) { - if (child.nodeType === 1 && child.nodeName != 'SCRIPT') { + if (child.nodeType === 1 && child.nodeName !== 'SCRIPT') { tree.push(child) visit(child) } @@ -163,13 +163,13 @@ function traverse (obj) { function resolveSVGElement (element) { var prefix = { - xmlns: 'http://www.w3.org/2000/xmlns/', - xlink: 'http://www.w3.org/1999/xlink', - svg: 'http://www.w3.org/2000/svg' - }, - doctype = '' + xmlns: 'http://www.w3.org/2000/xmlns/', + xlink: 'http://www.w3.org/1999/xlink', + svg: 'http://www.w3.org/2000/svg' + } + // var doctype = '' element.setAttribute('version', '1.1') // removing attributes so they aren't doubled up @@ -187,48 +187,48 @@ function resolveSVGElement (element) { function setSVGStyle (svg, css) { if (!css || !svg) { return } var styles = svg.getElementsByTagName('style') - if (!styles || styles.length == 0) { return } + if (!styles || styles.length === 0) { return } styles[0].textContent = css } function resolveForeignObjects (element) { - return - var children, - textElement, - textSpan - - if (element.tagName === 'foreignObject') { - textElement = document.createElement('text') - textSpan = document.createElement('tspan') - textSpan.setAttribute( - 'style' - , 'font-size: 11.5pt; font-family: "sans-serif";' - ) - textSpan.setAttribute('x', 0) - textSpan.setAttribute('y', 14.5) - textSpan.textContent = element.textContent - - textElement.appendChild(textSpan) - element.parentElement.appendChild(textElement) - element.parentElement.removeChild(element) - } + // return + // var children + // var textElement + // var textSpan + + // if (element.tagName === 'foreignObject') { + // textElement = document.createElement('text') + // textSpan = document.createElement('tspan') + // textSpan.setAttribute( + // 'style' + // , 'font-size: 11.5pt; font-family: "sans-serif";' + // ) + // textSpan.setAttribute('x', 0) + // textSpan.setAttribute('y', 14.5) + // textSpan.textContent = element.textContent + + // textElement.appendChild(textSpan) + // element.parentElement.appendChild(textElement) + // element.parentElement.removeChild(element) + // } } // The sandboxed function that's executed in-page by phantom function executeInPage (data) { - var xmlSerializer = new XMLSerializer(), - contents = data.contents, - sequenceConfig = JSON.stringify(data.sequenceConfig), - ganttConfig = JSON.stringify(data.ganttConfig).replace(/"(function.*})"/, '$1'), - toRemove, - el, - elContent, - svg, - svgValue, - boundingBox, - width, - height, - confWidth = data.confWidth + var xmlSerializer = new window.XMLSerializer() + var contents = data.contents + var sequenceConfig = JSON.stringify(data.sequenceConfig) + var ganttConfig = JSON.stringify(data.ganttConfig).replace(/"(function.*})"/, '$1') + // var toRemove + // var el + // var elContent + var svg + var svgValue + var boundingBox + var width + var height + var confWidth = data.confWidth var toRemove = document.getElementsByClassName('mermaid') if (toRemove && toRemove.length) { @@ -244,17 +244,17 @@ function executeInPage (data) { var config = { sequenceDiagram: JSON.parse(sequenceConfig), - flowchart: {useMaxWidth: false}, + flowchart: { useMaxWidth: false }, logLevel: 1 } - mermaid.initialize(config) + window.mermaid.initialize(config) var sc = document.createElement('script') sc.appendChild(document.createTextNode('mermaid.ganttConfig = ' + ganttConfig + ';')) document.body.appendChild(sc) - mermaid.init() + window.mermaid.init() svg = document.querySelector('svg') diff --git a/src/diagrams/classDiagram/classDb.js b/src/diagrams/classDiagram/classDb.js index d7ab0adf5c..33dd068ee7 100644 --- a/src/diagrams/classDiagram/classDb.js +++ b/src/diagrams/classDiagram/classDb.js @@ -4,12 +4,12 @@ var log = Logger.Log var relations = [] var classes -var idCache +// var idCache classes = { } // Functions to be run after graph rendering -var funs = [] +// var funs = [] /** * Function called by parser when a node definition has been found. * @param id diff --git a/src/diagrams/classDiagram/classRenderer.js b/src/diagrams/classDiagram/classRenderer.js index 913f6402ab..0640b653ee 100644 --- a/src/diagrams/classDiagram/classRenderer.js +++ b/src/diagrams/classDiagram/classRenderer.js @@ -367,9 +367,9 @@ module.exports.draw = function (text, id) { } var relations = cDDb.getRelations() - var i = 0 + // var i = 0 relations.forEach(function (relation) { - i = i + 1 + // i = i + 1 log.info('tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation)) g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), {relation: relation}) }) diff --git a/src/diagrams/classDiagram/classRenderer.spec.js b/src/diagrams/classDiagram/classRenderer.spec.js index b3a5a5721f..41b5154eb4 100644 --- a/src/diagrams/classDiagram/classRenderer.spec.js +++ b/src/diagrams/classDiagram/classRenderer.spec.js @@ -17,12 +17,12 @@ // var classRenderer = proxyquire('./classRenderer', { '../../d3': d3 }); // var testDom = require('testdom')('
'); -var classRenderer = require('./classRenderer') -var parser = require('./parser/classDiagram').parser +// var classRenderer = require('./classRenderer') +// var parser = require('./parser/classDiagram').parser describe('class diagram, ', function () { describe('when rendering a classDiagram', function () { - var conf + // var conf beforeEach(function () { /// /parser.yy = require('./classDb'); /// /parser.yy.clear(); @@ -101,8 +101,8 @@ describe('class diagram, ', function () { }) }) it('it should handle one actor', function () { - var str = 'classDiagram\n' + - 'Class01 --|> Class02' + // var str = 'classDiagram\n' + + // 'Class01 --|> Class02' // classRenderer.draw(str,'tst'); diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js index 6b2a21756f..821a25bc94 100644 --- a/src/diagrams/flowchart/flowRenderer.js +++ b/src/diagrams/flowchart/flowRenderer.js @@ -29,7 +29,7 @@ exports.addVertices = function (vert, g) { var styleFromStyleArr = function (styleStr, arr) { var i - // Create a compound style definition from the style definitions found for the node in the graph definition + // Create a compound style definition from the style definitions found for the node in the graph definition for (i = 0; i < arr.length; i++) { if (typeof arr[i] !== 'undefined') { styleStr = styleStr + arr[i] + ';' @@ -39,32 +39,32 @@ exports.addVertices = function (vert, g) { return styleStr } - // Iterate through each item in the vertice object (containing all the vertices found) in the graph definition + // Iterate through each item in the vertice object (containing all the vertices found) in the graph definition keys.forEach(function (id) { var vertice = vert[id] var verticeText - /** - * Variable for storing the classes for the vertice - * @type {string} - */ + /** + * Variable for storing the classes for the vertice + * @type {string} + */ var classStr = '' - // log.debug(vertice.classes); + // log.debug(vertice.classes); if (vertice.classes.length > 0) { classStr = vertice.classes.join(' ') } - /** - * Variable for storing the extracted style for the vertice - * @type {string} - */ + /** + * Variable for storing the extracted style for the vertice + * @type {string} + */ var style = '' - // Create a compound style definition from the style definitions found for the node in the graph definition + // Create a compound style definition from the style definitions found for the node in the graph definition style = styleFromStyleArr(style, vertice.styles) - // Use vertice id as text in the box if no text is provided by the graph definition + // Use vertice id as text in the box if no text is provided by the graph definition if (typeof vertice.text === 'undefined') { verticeText = vertice.id } else { @@ -74,11 +74,11 @@ exports.addVertices = function (vert, g) { var labelTypeStr = '' if (conf.htmlLabels) { labelTypeStr = 'html' - verticeText = verticeText.replace(/fa:fa[\w\-]+/g, function (s) { + verticeText = verticeText.replace(/fa:fa[\w-]+/g, function (s) { return '' }) } else { - var svg_label = document.createElementNS('http://www.w3.org/2000/svg', 'text') + var svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text') var rows = verticeText.split(/
/) @@ -89,20 +89,20 @@ exports.addVertices = function (vert, g) { tspan.setAttribute('dy', '1em') tspan.setAttribute('x', '1') tspan.textContent = rows[j] - svg_label.appendChild(tspan) + svgLabel.appendChild(tspan) } labelTypeStr = 'svg' - verticeText = svg_label + verticeText = svgLabel - // verticeText = verticeText.replace(//g, '\n'); - // labelTypeStr = 'text'; + // verticeText = verticeText.replace(//g, '\n'); + // labelTypeStr = 'text'; } var radious = 0 var _shape = '' - // Set the shape based parameters + // Set the shape based parameters switch (vertice.type) { case 'round': radious = 5 @@ -128,14 +128,14 @@ exports.addVertices = function (vert, g) { break case 'group': _shape = 'rect' - // Need to create a text node if using svg labels, see #367 + // Need to create a text node if using svg labels, see #367 verticeText = conf.htmlLabels ? '' : document.createElementNS('http://www.w3.org/2000/svg', 'text') break default: _shape = 'rect' } - // Add the node - g.setNode(vertice.id, {labelType: labelTypeStr, shape: _shape, label: verticeText, rx: radious, ry: radious, 'class': classStr, style: style, id: vertice.id}) + // Add the node + g.setNode(vertice.id, { labelType: labelTypeStr, shape: _shape, label: verticeText, rx: radious, ry: radious, 'class': classStr, style: style, id: vertice.id }) }) } @@ -156,7 +156,7 @@ exports.addEdges = function (edges, g) { cnt++ var edgeData = {} - // Set link type for rendering + // Set link type for rendering if (edge.type === 'arrow_open') { edgeData.arrowhead = 'none' } else { @@ -215,7 +215,7 @@ exports.addEdges = function (edges, g) { edgeData.label = edge.text.replace(/
/g, '\n') } } - // Add the edge to the graph + // Add the edge to the graph g.setEdge(edge.start, edge.end, edgeData, cnt) }) } @@ -234,15 +234,15 @@ exports.getClasses = function (text, isDot) { } parser.yy = graph - // Parse the graph definition + // Parse the graph definition parser.parse(text) var classes = graph.getClasses() - // Add default class if undefined + // Add default class if undefined if (typeof (classes.default) === 'undefined') { - classes.default = {id: 'default'} - // classes.default.styles = ['fill:#ffa','stroke:#666','stroke-width:3px']; + classes.default = { id: 'default' } + // classes.default.styles = ['fill:#ffa','stroke:#666','stroke-width:3px']; classes.default.styles = [] classes.default.clusterStyles = ['rx:4px', 'fill: rgb(255, 255, 222)', 'rx: 4px', 'stroke: rgb(170, 170, 51)', 'stroke-width: 1px'] classes.default.nodeLabelStyles = ['fill:#000', 'stroke:none', 'font-weight:300', 'font-family:"Helvetica Neue",Helvetica,Arial,sans-serf', 'font-size:14px'] @@ -267,34 +267,34 @@ exports.draw = function (text, id, isDot) { } parser.yy = graph - // Parse the graph definition + // Parse the graph definition try { parser.parse(text) } catch (err) { log.debug('Parsing failed') } - // Fetch the default direction, use TD if none was found + // Fetch the default direction, use TD if none was found var dir dir = graph.getDirection() if (typeof dir === 'undefined') { dir = 'TD' } - // Create the input mermaid.graph + // Create the input mermaid.graph var g = new dagreD3.graphlib.Graph({ multigraph: true, compound: true }) - .setGraph({ - rankdir: dir, - marginx: 20, - marginy: 20 + .setGraph({ + rankdir: dir, + marginx: 20, + marginy: 20 - }) - .setDefaultEdgeLabel(function () { - return {} - }) + }) + .setDefaultEdgeLabel(function () { + return {} + }) var subG var subGraphs = graph.getSubGraphs() @@ -304,10 +304,10 @@ exports.draw = function (text, id, isDot) { graph.addVertex(subG.id, subG.title, 'group', undefined) } - // Fetch the verices/nodes and edges/links from the parsed graph definition + // Fetch the verices/nodes and edges/links from the parsed graph definition var vert = graph.getVertices() - // log.debug(vert); + // log.debug(vert); var edges = graph.getEdges() i = 0 @@ -318,166 +318,167 @@ exports.draw = function (text, id, isDot) { d3.selectAll('cluster').append('text') for (j = 0; j < subG.nodes.length; j++) { - // log.debug('Setting node',subG.nodes[j],' to subgraph '+id); + // log.debug('Setting node',subG.nodes[j],' to subgraph '+id); g.setParent(subG.nodes[j], subG.id) } } exports.addVertices(vert, g) exports.addEdges(edges, g) - // Create the renderer - var render = new dagreD3.render() + // Create the renderer + var Render = dagreD3.render + var render = new Render() - // Add custom shape for rhombus type of boc (decision) + // Add custom shape for rhombus type of boc (decision) render.shapes().question = function (parent, bbox, node) { - var w = bbox.width, - h = bbox.height, - s = (w + h) * 0.8, - points = [ - {x: s / 2, y: 0}, - {x: s, y: -s / 2}, - {x: s / 2, y: -s}, - {x: 0, y: -s / 2} - ] + var w = bbox.width + var h = bbox.height + var s = (w + h) * 0.8 + var points = [ + { x: s / 2, y: 0 }, + { x: s, y: -s / 2 }, + { x: s / 2, y: -s }, + { x: 0, y: -s / 2 } + ] var shapeSvg = parent.insert('polygon', ':first-child') - .attr('points', points.map(function (d) { - return d.x + ',' + d.y - }).join(' ')) - .attr('rx', 5) - .attr('ry', 5) - .attr('transform', 'translate(' + (-s / 2) + ',' + (s * 2 / 4) + ')') + .attr('points', points.map(function (d) { + return d.x + ',' + d.y + }).join(' ')) + .attr('rx', 5) + .attr('ry', 5) + .attr('transform', 'translate(' + (-s / 2) + ',' + (s * 2 / 4) + ')') node.intersect = function (point) { return dagreD3.intersect.polygon(node, points, point) } return shapeSvg } - // Add custom shape for box with inverted arrow on left side + // Add custom shape for box with inverted arrow on left side render.shapes().rect_left_inv_arrow = function (parent, bbox, node) { - var w = bbox.width, - h = bbox.height, - points = [ - {x: -h / 2, y: 0}, - {x: w, y: 0}, - {x: w, y: -h}, - {x: -h / 2, y: -h}, - {x: 0, y: -h / 2} - ] + var w = bbox.width + var h = bbox.height + var points = [ + { x: -h / 2, y: 0 }, + { x: w, y: 0 }, + { x: w, y: -h }, + { x: -h / 2, y: -h }, + { x: 0, y: -h / 2 } + ] var shapeSvg = parent.insert('polygon', ':first-child') - .attr('points', points.map(function (d) { - return d.x + ',' + d.y - }).join(' ')) - .attr('transform', 'translate(' + (-w / 2) + ',' + (h * 2 / 4) + ')') + .attr('points', points.map(function (d) { + return d.x + ',' + d.y + }).join(' ')) + .attr('transform', 'translate(' + (-w / 2) + ',' + (h * 2 / 4) + ')') node.intersect = function (point) { return dagreD3.intersect.polygon(node, points, point) } return shapeSvg } - // Add custom shape for box with inverted arrow on right side + // Add custom shape for box with inverted arrow on right side render.shapes().rect_right_inv_arrow = function (parent, bbox, node) { - var w = bbox.width, - h = bbox.height, - points = [ - {x: 0, y: 0}, - {x: w + h / 2, y: 0}, - {x: w, y: -h / 2}, - {x: w + h / 2, y: -h}, - {x: 0, y: -h} - ] + var w = bbox.width + var h = bbox.height + var points = [ + { x: 0, y: 0 }, + { x: w + h / 2, y: 0 }, + { x: w, y: -h / 2 }, + { x: w + h / 2, y: -h }, + { x: 0, y: -h } + ] var shapeSvg = parent.insert('polygon', ':first-child') - .attr('points', points.map(function (d) { - return d.x + ',' + d.y - }).join(' ')) - .attr('transform', 'translate(' + (-w / 2) + ',' + (h * 2 / 4) + ')') + .attr('points', points.map(function (d) { + return d.x + ',' + d.y + }).join(' ')) + .attr('transform', 'translate(' + (-w / 2) + ',' + (h * 2 / 4) + ')') node.intersect = function (point) { return dagreD3.intersect.polygon(node, points, point) } return shapeSvg } - // Add our custom arrow - an empty arrowhead + // Add our custom arrow - an empty arrowhead render.arrows().none = function normal (parent, id, edge, type) { var marker = parent.append('marker') - .attr('id', id) - .attr('viewBox', '0 0 10 10') - .attr('refX', 9) - .attr('refY', 5) - .attr('markerUnits', 'strokeWidth') - .attr('markerWidth', 8) - .attr('markerHeight', 6) - .attr('orient', 'auto') + .attr('id', id) + .attr('viewBox', '0 0 10 10') + .attr('refX', 9) + .attr('refY', 5) + .attr('markerUnits', 'strokeWidth') + .attr('markerWidth', 8) + .attr('markerHeight', 6) + .attr('orient', 'auto') var path = marker.append('path') - .attr('d', 'M 0 0 L 0 0 L 0 0 z') + .attr('d', 'M 0 0 L 0 0 L 0 0 z') dagreD3.util.applyStyle(path, edge[type + 'Style']) } - // Override normal arrowhead defined in d3. Remove style & add class to allow css styling. + // Override normal arrowhead defined in d3. Remove style & add class to allow css styling. render.arrows().normal = function normal (parent, id, edge, type) { var marker = parent.append('marker') - .attr('id', id) - .attr('viewBox', '0 0 10 10') - .attr('refX', 9) - .attr('refY', 5) - .attr('markerUnits', 'strokeWidth') - .attr('markerWidth', 8) - .attr('markerHeight', 6) - .attr('orient', 'auto') - - var path = marker.append('path') - .attr('d', 'M 0 0 L 10 5 L 0 10 z') - .attr('class', 'arrowheadPath') - .style('stroke-width', 1) - .style('stroke-dasharray', '1,0') + .attr('id', id) + .attr('viewBox', '0 0 10 10') + .attr('refX', 9) + .attr('refY', 5) + .attr('markerUnits', 'strokeWidth') + .attr('markerWidth', 8) + .attr('markerHeight', 6) + .attr('orient', 'auto') + + marker.append('path') + .attr('d', 'M 0 0 L 10 5 L 0 10 z') + .attr('class', 'arrowheadPath') + .style('stroke-width', 1) + .style('stroke-dasharray', '1,0') } - // Set up an SVG group so that we can translate the final graph. + // Set up an SVG group so that we can translate the final graph. var svg = d3.select('#' + id) - // svgGroup = d3.select('#' + id + ' g'); + // svgGroup = d3.select('#' + id + ' g'); - // Run the renderer. This is what draws the final graph. + // Run the renderer. This is what draws the final graph. var element = d3.select('#' + id + ' g') render(element, g) - // var tip = d3.tip().html(function(d) { return d; }); + // var tip = d3.tip().html(function(d) { return d; }); element.selectAll('g.node') - .attr('title', function () { - return graph.getTooltip(this.id) - }) - -/* - var xPos = document.querySelectorAll('.clusters rect')[0].x.baseVal.value; - var width = document.querySelectorAll('.clusters rect')[0].width.baseVal.value; - var cluster = d3.selectAll('.cluster'); - var te = cluster.append('text'); - te.attr('x', xPos+width/2); - te.attr('y', 12); - //te.stroke('black'); - te.attr('id', 'apa12'); - te.style('text-anchor', 'middle'); - te.text('Title for cluster'); -*/ + .attr('title', function () { + return graph.getTooltip(this.id) + }) + + /* + var xPos = document.querySelectorAll('.clusters rect')[0].x.baseVal.value; + var width = document.querySelectorAll('.clusters rect')[0].width.baseVal.value; + var cluster = d3.selectAll('.cluster'); + var te = cluster.append('text'); + te.attr('x', xPos+width/2); + te.attr('y', 12); + //te.stroke('black'); + te.attr('id', 'apa12'); + te.style('text-anchor', 'middle'); + te.text('Title for cluster'); + */ if (conf.useMaxWidth) { - // Center the graph + // Center the graph svg.attr('height', '100%') svg.attr('width', conf.width) - // svg.attr('viewBox', svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height); + // svg.attr('viewBox', svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height); svg.attr('viewBox', '0 0 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20)) svg.attr('style', 'max-width:' + (g.graph().width + 20) + 'px;') } else { - // Center the graph + // Center the graph svg.attr('height', g.graph().height) if (typeof conf.width === 'undefined') { svg.attr('width', g.graph().width) } else { svg.attr('width', conf.width) } - // svg.attr('viewBox', svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height); + // svg.attr('viewBox', svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height); svg.attr('viewBox', '0 0 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20)) } - // Index nodes + // Index nodes graph.indexNodes('subGraph' + i) for (i = 0; i < subGraphs.length; i++) { @@ -485,7 +486,7 @@ exports.draw = function (text, id, isDot) { if (subG.title !== 'undefined') { var clusterRects = document.querySelectorAll('#' + id + ' #' + subG.id + ' rect') - // log.debug('looking up: #' + id + ' #' + subG.id) + // log.debug('looking up: #' + id + ' #' + subG.id) var clusterEl = document.querySelectorAll('#' + id + ' #' + subG.id) var xPos = clusterRects[0].x.baseVal.value @@ -503,20 +504,20 @@ exports.draw = function (text, id, isDot) { if (typeof subG.title === 'undefined') { te.text('Undef') } else { - // te.text(subGraphs[subGraphs.length-i-1].title); + // te.text(subGraphs[subGraphs.length-i-1].title); te.text(subG.title) } } } - // Add label rects for non html labels + // Add label rects for non html labels if (!conf.htmlLabels) { var labels = document.querySelectorAll('#' + id + ' .edgeLabel .label') - var i - for (i = 0; i < labels.length; i++) { + var k + for (k = 0; k < labels.length; k++) { var label = labels[i] - // Get dimensions of label + // Get dimensions of label var dim = label.getBBox() var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')