FabricThinkocracy

by tchalvakspam

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="http://fabricjs.com/lib/prism.js"></script>
<script src="http://fabricjs.com/lib/fabric.js"></script>
<script src="http://fabricjs.com/js/master.js"></script>
<link rel="stylesheet" href="http://mindsoon.com/thinko/css/styles.css">
<canvas id="canvas"></canvas>
<script>
   $().ready(function(){
    init();
   });
</script>

JavaScript

function setCanvasOnActions(c){
  c.on({
    'object:moving': function(e) {
      var found = false;
      e.target.setCoords();
      c.forEachObject(function(obj) {
        if (e.target.intersectsWithObject(obj) && obj != e.target && e.target.type == "text" && !found) {
          c.s2 = obj;
          obj.fill = "blue";
          found = true;
        } else obj.fill = "black";
      });

           // This is where the code should go that moves lines
           // along with the idea that's being dragged, but I
           // can't seem to match the lines to the ideas...

      if (!found) c.s2 = null;
      c.renderAll();
    },
    'object:selected': function(e) {
      c.s1 = e.target;
    },
    'mouse:up': function(e) {
      // TO DO: Make new link connection here
    }
  });
}

function getIdeaCoords(c,id){
  c.forEachObject(function(idea) {
    if (idea.type=="text" && idea.id == id) {
      x = idea.left + (idea.width/2);
      y = idea.top + (idea.height/2);
    }
  });
  return [x,y];
}

function addLinksToIdeas(c,json){
  c.forEachObject(function(idea) {
    if (idea.type=="text"){
      var obj = JSON.parse(json);
      for(i = 0; i < obj.links.length; i++) {
        if (obj.links[i].ideas[0] == idea.id || obj.links[i].ideas[1] == idea.id) {
          idea.links.push(obj.links[i].id);
        }
      }
    }
  });
}

function createLinks(c,json){
  var obj = JSON.parse(json);
  for(i = 0; i < obj.links.length; i++) {
    coor1 = getIdeaCoords(c,obj.links[i].ideas[0]);
    coor2 = getIdeaCoords(c,obj.links[i].ideas[1]);
    coords = coor1.concat(coor2);
    var link = new fabric.Line(coords, {
      fill: '#C6C6C6',
      stroke: '#C6C6C6',
      strokeWidth: 1,
      selectable: false
    });

         // if I put data here like:
         // link.id = obj.links[i].id;
         // then it doesn't render anymore
         
    c.add(link);
  }
}

function createIdeas(c,json){
  var obj = JSON.parse(json);
  for(i = 0; i < obj.ideas.length; i++) {
   ...