Keylines directive

Data

{"nodes":[{"name":"NJA","title":"NJA","id":8},{"desc":"Jet planes that go really fast.","name":"Hawker 800XP","title":"Hawker 800XP","id":29},{"name":"Some Conference","title":"Some Conference","id":4},{"name":"Jackie","title":"Jackie","id":25},{"contents":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sollicitudin, massa at faucibus porta, nulla ligula condimentum erat, in mattis dolor justo et nunc. Praesent quis ex sit amet est elementum ornare vel sit amet metus. Suspendisse accumsan sapien sed nisi finibus, ac feugiat nulla vehicula. Proin rhoncus in orci vel eleifend. Integer in nisl in sem varius commodo sed eget leo. Phasellus faucibus libero id neque rhoncus, id vestibulum diam bibendum. Proin tincidunt elit non tristique feugiat. Nulla pretium eros in tortor venenatis, in scelerisque est auctor. Integer sed auctor nisi. Suspendisse potenti. Suspendisse potenti. Nunc sed fringilla ligula.\n\nNulla tempor efficitur arcu accumsan mollis. Nulla porttitor ullamcorper nisi, non cursus justo tincidunt a. Aenean non lobortis mauris, sit amet tristique urna. Aenean suscipit, ipsum id ultrices aliquam, libero dui gravida sapien, vestibulum molestie neque lacus faucibus nunc. Etiam nec aliquet elit. Phasellus vitae efficitur quam. Vestibulum porta bibendum ex in vestibulum. Ut porttitor lectus velit, sit amet sagittis urna vestibulum vel. Maecenas molestie venenatis arcu eu blandit. In faucibus orci nec aliquet commodo. Phasellus condimentum velit nisi, ac pellentesque purus tristique eu. Sed feugiat urna quis lacus sollicitudin consectetur. In vitae euismod quam, nec aliquet diam. Ut varius urna vehicula ex sagittis pellentesque. Etiam feugiat turpis quis nisi sagittis, in porttitor augue sodales.\n\nVestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu blandit leo, eu malesuada ligula. Proin justo sapien, accumsan sed malesuada nec, semper at lacus. Praesent imperdiet dolor quam, eget hendrerit purus tempor at. Fusce varius egestas ultricies. Aliquam sit amet semper mauris. Aliquam scelerisque tortor at dui vulputate, quis convallis est congue. Nulla sit amet venenatis ipsum, a ultricies turpis. Fusce auctor, lorem et iaculis accumsan, eros massa elementum tortor, eu aliquam ipsum felis eget est. Phasellus vel volutpat turpis.","src":"FAA lunch and learn","id":7},{"location":"Columbus","name":"Alice","title":"Alice","id":28},{"serial":"1234","id":10},{"name":"CE-560XL","title":"CE-560XL","id":9},{"desc":"dsfsdfdsf","name":"dsfdsfdsf","title":"dsfdsfdsf","id":30},{"type":"Communication","requirement":"Optional","isInternal":false,"desc":"This is nothing but a simple radio","name":"Simple Radio","title":"Simple Radio","id":3},{"desc":"Test","name":"Test","title":"Test","id":24},{"name":"FAA","title":"FAA","id":6}],"links":[{"source":0,"target":6},{"source":2,"target":9},{"source":2,"target":4},{"source":3,"target":5},{"source":5,"target":3},{"source":6,"target":7},{"company":"NJA","source":9,"target":6},{"source":10,"target":3},{"source":11,"target":2}]}

gistfile1.js

//This is extremely hacky but it is what keylines wants
app.factory('keylines', function(Restangular){
    KeyLines.paths({
        assets: 'keylines/assets/',
        flash: {
          swf: 'keylines/swf/keylines.swf',
          swfObject: 'keylines/js/swfobject.js',
          expressInstall: 'keylines/swf/expressInstall.swf'
        }
    });
    window.onresize = function(event) {
      KeyLines.setSize('kl', window.innerWidth, 500);
      chart.zoom('fit');
    };

    var chart, targeti, lastId, idCounter = 0, objs, links;
    function render(){
      Restangular.one('graph').get().then(function(result){
        links = result.links.map(function(link, i){
           return {
              type: 'link',
              id: i+":"+link.source+":"+link.target,
              id1: link.source,
              id2: link.target,
              w: 5,
              a2: true
           }
        });
        //var plane = '\f072'
        objs = result.nodes.map(function(n, i){
          return {
            t : n.title,
            u : 'images/sky8.png',
            id : i,
            type : 'node'
          }
        })
        //FIXME Is this function blocking? 
        // I think this is only working because browser JS is single threaded 
        // Should add promise here instead
        KeyLines.create('kl', createChart);
      });
    }
    function createChart(err, cchart) {
        chart = cchart;
        chart.options({
            hover:5
        });
        chart.bind('mousedown', startLinkCreation);
        chart.bind('hover', hover);
        chart.load({
            type: 'LinkChart',
            items: objs.concat(links),
        }, function(){
            chart.zoom('fit', {}, applyStandardLayout);
        });
        KeyLines.setSize('kl', window.innerWidth, 500);
    };

    // A lot of this was ganked from http://eval.keylines.com/source-drawing.js.htm
    function hover(id, x, y, sub){
         // in case the cursor is hovering a node, add the icon
         console.log("Hovering");
          var hoveringItem = chart.getItem(id);
          if(id && hoveringItem.type === 'node'){
             lastId = id;
             chart.setProperties({id: id, g:[{p: 'ne', t: '+', c: 'green'}]});
          } else {
             removePlusIcon();
          } 
    };
    function applyStandardLayout(evt) {
      chart.layout('standard');
      if(evt){
        evt.preventDefault();
      }
    }
    function removePlusIcon(){
      if(lastId){
        chart.setProperties({id: lastId, g: null });
      }  
    }
    function startLinkCreation(id, x, y, button, sub){
      // if the node has the plus icon on the top-right corner...
      if(sub === 'ne'){
        idCounter++;
        createLink(id, idCounter);
        // remember to return TRUE in this case to prevent default behaviour
        return true;
      }
      // otherwise just drag the node...
    }
    function createLink(nodeId, newLinkId){
      // Define the style of the new link
      var newLinkStyle = {
        c: 'rgb(255, 127, 127)',
        w: 5,
        a2: true // want it directed to the new node?
      };
      // create the link and remove the + icon at the end in an case
      chart.createLink(nodeId, newLinkId, {style: newLinkStyle}, function(linkedId, x, y){
        console.log(linkedId);
        if(linkedId){
          var fromNode = chart.getItem(nodeId);
          var toNode = chart.getItem(linkedId);
          if(fromNode && toNode){
            //great we have them both so now we are ready to save.
            console.log("Linking from "+fromNode.name+" to "+toNode.name);
            var relation = {
              startName : fromNode.name,
              endName : toNode.name
            }
            var promise = Restangular.one('relate').post('', JSON.stringify(relation));
            promise.then(function(obj){
              d3.renderGraph();
            });    
             
          }
          else{
            console.log("One side of the link is missing");
          }
        }
        else{
          console.log("No line created");
        }
        removePlusIcon();
      });
    }
    return {
      renderGraph: render,
    }
});
app.directive('dfKeylines', function(keylines){
  return {
    restrict: 'EA',
    scope: {},
    templateUrl: "main/angular/keylines/keylines.jade",
    controller: function($scope, d3){
    },
    controllerAs:"ctrl",
    link: function(){
      keylines.renderGraph();
    }
  }
})