Turn to Bower dependencies and upgrade Dagre

Many things happen in this commit and they are all intermingled in ways
they are hard to separate.

 - Start using Bower for dependencies, reason being to make nomnoml itself
   a bower package.
 - Upgrade Dagre from 0.4.5 to 0.7.1, reason being that the older version
   wasn't a bower package and didn't support RequireJS, the new version
   has both of these features.
 - Switch from using Underscore to using Lo-Dash, because Dagre depends on
   Lo-Dash it was just nicer if nomnoml switched to that as well.

Known issues:

 - With the upgrade of Dagre the layout doesn't come out exactly the same.
   The upgrade also messes with the rendering of relation arrows.

.gitignore

@@ -2,4 +2,5 @@ nomnoml.sublime-project
 nomnoml.sublime-workspace
 codemirror/*
 node_modules/
+bower_components/
 dist/

README.md

@@ -9,7 +9,7 @@ Created by <a href="mailto:[email protected]">Daniel Kallin</a>.</p>
 
 - [jison](http:https://zaach.github.io/jison/)
 - [dagre](https://github.com/cpettitt/dagre)
-- [underscore](http:https://underscorejs.org)
+- [lodash](http:https://lodash.com)
 - [typicons](http:https://typicons.com/)
 - [zepto](http:https://zeptojs.com/)
 - [solarized](http:https://ethanschoonover.com/solarized)
@@ -85,4 +85,4 @@ This is how the Decorator pattern looks like in nomnoml syntax:
  #spacing: 40
  #stroke: #33322E
  #title: filename
- #zoom: 1
+ #zoom: 1

bower.json

@@ -0,0 +1,42 @@
+{
+ "name": "nomnoml",
+ "main": "dist/nomnoml.js",
+ "version": "0.0.0",
+ "homepage": "https://github.com/skanaar/nomnoml",
+ "authors": [
+ "Daniel Kallin <[email protected]>"
+ ],
+ "description": "Generates UML diagrams from text.",
+ "moduleType": [
+ "amd",
+ "globals"
+ ],
+ "keywords": [
+ "uml"
+ ],
+ "license": "MIT",
+ "ignore": [
+ "**/.*",
+ "*.css",
+ "*.md",
+ "*.js",
+ "*.png",
+ "*.json",
+ "node_modules/",
+ "bower_components/",
+ "test/",
+ "img/",
+ "lib/",
+ "design/"
+ ],
+ "dependencies": {
+ "lodash": "~3.7.0",
+ "dagre": "~0.7.1"
+ },
+ "resolutions": {
+ "lodash": "~3.7.0"
+ },
+ "devDependencies": {
+ "requirejs": "~2.1.17"
+ }
+}

gulpfile.js

@@ -15,7 +15,7 @@ var nomnomlFiles = [
 ];
 var hdr = [
  '(function (nomnomlFactory) {',
- '\tif (typeof define === "function" && define.amd) define([\'underscore\', \'dagre\'], 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) {',

index.html

@@ -88,7 +88,7 @@ <h2>Directives</h2>
  <p>Nomnoml was made possible by the cool projects
  <a target="_blank" href="http:https://zaach.github.io/jison/">jison</a>,
  <a target="_blank" href="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/cpettitt/dagre">dagre</a>,
- <a target="_blank" href="http:https://underscorejs.org">underscore</a>,
+ <a target="_blank" href="http:https://lodash.com">lodash</a>,
  <a target="_blank" href="http:https://typicons.com/">typicons</a> ,
  <a target="_blank" href="http:https://zeptojs.com/">zepto</a> and
  <a target="_blank" href="http:https://ethanschoonover.com/solarized">solarized</a>.
@@ -220,8 +220,9 @@ <h2>Usage</h2>
 [<actor>Sailor] - [<usecase>shiver me;timbers]</script>
 
  <script src="lib/zepto.min.js"></script>
- <script src="lib/underscore.js"></script>
- <script src="lib/dagre.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="nomnoml.vectorMath.js"></script>

nomnoml.layouter.js

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

test/index.html

@@ -10,8 +10,9 @@
  <script src="lib/jasmine-2.0.0/boot.js"></script>
 
  <script src="../lib/zepto.min.js"></script>
- <script src="../lib/underscore.js"></script>
- <script src="../lib/dagre.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="../nomnoml.vectorMath.js"></script>