Downgrade Dagre and embedd it in nomnoml

Since the latest version (0.7.1) of Dagre caused so many undesireable
effects, going back to the older version and embedding it within nomnoml
instead seems like a better option. The size of `nomnoml.js` went from 40k
to 80k as a result (note: Dagre istelf embeds graphlib).

bower.json

@@ -30,8 +30,7 @@
  "design/"
  ],
  "dependencies": {
- "lodash": "~3.7.0",
- "dagre": "~0.7.1"
+ "lodash": "~3.7.0"
  },
  "resolutions": {
  "lodash": "~3.7.0"

gulpfile.js

@@ -6,6 +6,7 @@ var footer = require('gulp-footer');
 var nomnomlFiles = [
  'lib/_skanaar.js',
  'lib/skanaar.canvas.js',
+ 'lib/dagre.min.js',
  'nomnoml.vectorMath.js',
  'nomnoml.jison.js',
  'nomnoml.parser.js',
@@ -15,10 +16,10 @@ var nomnomlFiles = [
 ];
 var hdr = [
  '(function (nomnomlFactory) {',
- '\tif (typeof define === "function" && define.amd) define([\'lodash\', \'dagre\'], nomnomlFactory);',
- //'\telse if (typeof module === "object" && module.exports) module.exports = nomnomlFactory(_, dagre);', // future support for CommonJS perhaps
- '\telse this.nomnoml = nomnomlFactory(_, dagre);',
- '})(function (_, dagre) {',
+ '\tif (typeof define === "function" && define.amd) define([\'lodash\'], nomnomlFactory);',
+ //'\telse if (typeof module === "object" && module.exports) module.exports = nomnomlFactory(_);', // future support for CommonJS perhaps
+ '\telse this.nomnoml = nomnomlFactory(_);',
+ '})(function (_) {',
  ''
 ].join('\n');
 var ftr = [

index.html

@@ -221,10 +221,9 @@ <h2>Usage</h2>
 
  <script src="lib/zepto.min.js"></script>
  <script src="bower_components/lodash/lodash.js"></script>
- <script src="bower_components/graphlib/dist/graphlib.core.js"></script>
- <script src="bower_components/dagre/dist/dagre.core.js"></script>
  <script src="lib/_skanaar.js"></script>
  <script src="lib/skanaar.canvas.js"></script>
+ <script src="lib/dagre.min.js"></script>
  <script src="nomnoml.vectorMath.js"></script>
  <script src="nomnoml.jison.js"></script>
  <script src="nomnoml.parser.js"></script>

lib/skanaar.canvas.js

@@ -11,11 +11,11 @@ skanaar.Canvas = function (canvas, callbacks){
  y: event.clientY - e.getBoundingClientRect().top - e.clientTop + e.scrollTop
  }
  }
- 
+
  canvas.addEventListener("mousedown", function (event){
  if (callbacks.mousedown) callbacks.mousedown(mouseEventToPos(event))
  })
- 
+
  canvas.addEventListener("mouseup", function (event){
  if (callbacks.mouseup) callbacks.mouseup(mouseEventToPos(event))
  })
@@ -68,7 +68,7 @@ skanaar.Canvas = function (canvas, callbacks){
  ctx.beginPath()
  if (arguments.length === 2)
  ctx.arc(x.x, x.y, y, 0, twopi)
- else 
+ else
  ctx.arc(x, y, r, 0, twopi)
  return chainable
  },
@@ -140,4 +140,4 @@ skanaar.Canvas = function (canvas, callbacks){
  return grad
  }
  }
-}
+}; // semi-colon added because minfied dagre comes after when compiling nomnoml.js and starts with '(' which js interprets as executing this function.

nomnoml.layouter.js

@@ -17,14 +17,12 @@ nomnoml.Compartment = function (lines, nodes, relations){
 
 nomnoml.layout = function (measurer, config, ast){
  function runDagre(input){
- input.setGraph({
- ranksep: config.spacing,
- nodesep: config.spacing,
- edgesep: config.spacing,
- rankdir: config.direction
- })
- dagre.layout(input)
- return input
+ return dagre.layout()
+ .rankSep(config.spacing)
+ .nodeSep(config.spacing)
+ .edgeSep(config.spacing)
+ .rankDir(config.direction)
+ .run(input)
  }
  function measureLines(lines, fontWeight){
  if (!lines.length)
@@ -45,29 +43,25 @@ nomnoml.layout = function (measurer, config, ast){
 
  _.each(c.nodes, layoutClassifier)
 
- var g = new dagre.graphlib.Graph({ directed: true, multigraph: true })
- //g.setGraph({})
- //g.setDefaultEdgeLabel(function () { return {} })
+ var g = new dagre.Digraph()
  _.each(c.nodes, function (e){
- g.setNode(e.name, { width: e.width, height: e.height })
+ g.addNode(e.name, { width: e.width, height: e.height })
  })
  _.each(c.relations, function (r){
- g.setEdge(r.start, r.end, {}, r.id)
+ g.addEdge(r.id, r.start, r.end)
  })
  var dLayout = runDagre(g)
 
  var rels = _.indexBy(c.relations, 'id')
  var nodes = _.indexBy(c.nodes, 'name')
  function toPoint(o){ return {x:o.x, y:o.y} }
- _.each(dLayout.nodes(), function(n) {
- var node = dLayout.node(n)
- nodes[n].x = node.x
- nodes[n].y = node.y
+ dLayout.eachNode(function(u, value) {
+ nodes[u].x = value.x
+ nodes[u].y = value.y
  })
- _.each(dLayout.edges(), function(e) {
- var edge = dLayout.edge(e)
- var start = nodes[e.v], end = nodes[e.w]
- rels[e.name].path = _.map(edge.points, toPoint)
+ dLayout.eachEdge(function(e, u, v, value) {
+ var start = nodes[u], end = nodes[v]
+ rels[e].path = _.map(_.flatten([start, value.points, end]), toPoint)
  })
  var graph = dLayout.graph()
  var graphHeight = graph.height ? graph.height + 2*config.gutter : 0

nomnoml.renderer.js

@@ -201,10 +201,10 @@ nomnoml.render = function (graphics, config, compartment, setFont){
  var startNode = _.findWhere(compartment.nodes, {name:r.start})
  var endNode = _.findWhere(compartment.nodes, {name:r.end})
 
- var start = _.first(r.path)
- var end = _.last(r.path)
+ var start = rectIntersection(r.path[1], _.first(r.path), startNode)
+ var end = rectIntersection(r.path[r.path.length-2], _.last(r.path), endNode)
 
- var path = r.path
+ var path = _.flatten([start, _.tail(_.initial(r.path)), end])
  var fontSize = config.fontSize
 
  g.ctx.fillStyle = config.stroke
@@ -241,6 +241,18 @@ nomnoml.render = function (graphics, config, compartment, setFont){
  drawArrowEnd(_.first(tokens), path.reverse(), start)
  }
 
+ function rectIntersection(p1, p2, rect){
+ if(rect.width == 0 && rect.height == 0) return p2
+ var v = vm.diff(p1, p2)
+ for(var t=1; t>=0; t-= 0.01){
+ var p = vm.mult(v, t)
+ if(Math.abs(p.x) <= rect.width/2+config.edgeMargin &&
+ Math.abs(p.y) <= rect.height/2+config.edgeMargin)
+ return vm.add(p2, p)
+ }
+ return p2
+ }
+
  function drawArrow(path, isOpen, arrowPoint, diamond){
  var size = (config.spacing - 2*config.edgeMargin) * config.arrowSize / 30
  var v = vm.diff(path[path.length-2], _.last(path))

test/requirejs.usecase.html

@@ -32,14 +32,7 @@
  require.config({
  baseUrl: '../bower_components',
  paths: {
- dagre: 'dagre/dist/dagre.core',
- graphlib: 'graphlib/dist/graphlib.core',
- //underscore: 'lodash/lodash',
  lodash: 'lodash/lodash'
- },
- shim: {
- graphlib: ['lodash'],
- dagre: ['graphlib', 'lodash']
  }
  });
  require(['../dist/nomnoml'], function (nomnoml) {

test/standalone.usecase.html

@@ -6,8 +6,6 @@
  <link rel="shortcut icon" type="image/png" href="favicon.png">
  <script src="../lib/zepto.min.js"></script>
  <script src="../bower_components/lodash/lodash.js"></script>
- <script src="../bower_components/graphlib/dist/graphlib.core.js"></script>
- <script src="../bower_components/dagre/dist/dagre.core.js"></script>
  <script src="../dist/nomnoml.js"></script>
 </head>
 <body>