Fixed bug with block structure, added comments

src/events.js

@@ -1,7 +1,7 @@
 var subscriptions = {};
 
 module.exports = {
-  subscribe: function(event, callback){
+  subscribe: function(event, callback){ //adding a new subscription
     if(!subscriptions[event]){
       subscriptions[event] = [];
     }
@@ -9,7 +9,7 @@ module.exports = {
   },
   emit: function(event, data){
     if(subscriptions[event]){
-      for(var callback of subscriptions[event]){
+      for(var callback of subscriptions[event]){ //loop through and call all subscriptions
         callback(data);
       }
     }

src/index.js

@@ -1,3 +1,4 @@
+//require components of project
 require("./styles.scss");
 require("./pageInteraction");
 require("./outputCalculation.js");

src/menu.js

@@ -2,7 +2,7 @@ var $ = require("jquery");
 var events = require("./events.js");
 var diagram = require("./diagram");
 
-$("#header>a#export").click(function(){
+$("#header>a#export").click(function(){ //export button clicked
   var fileSaver = require("file-saver");
   var exported = require("./diagram/export.js")();
   var exportedBlob = new Blob([exported], {type: "text/plain;chartset=utf-8"})
@@ -10,25 +10,26 @@ $("#header>a#export").click(function(){
 });
 
 $("#header>a#import").click(function(){
-  $("#header>#importUpload").click();
+  $("#header>#importUpload").click(); //on import button click, trigger file open dialog
 });
 
-$("#header>#importUpload").change(function(){
+$("#header>#importUpload").change(function(){ //when a file is selected
   var reader = new FileReader();
   reader.onload = function(){
     require("./diagram/import.js")(reader.result);
   }
-  reader.readAsText(this.files[0]);
+  reader.readAsText(this.files[0]); //read the file as text, this will call the above function when complete
 });
 
 $("#header>a#projectName").click(function(){
   do{
     diagram.name = prompt("Please enter a name for the diagram", diagram.name);
   }
-  while(!diagram.name);
+  while(!diagram.name); //keep asking for a new name until a valid one is entered
   $("#header>a#projectName").html(diagram.name);
 });
 
 events.subscribe("diagramImport", function(){
+  //update displayed name when new diagram imported
   $("#header>a#projectName").html(diagram.name);
 });

src/pageInteraction/dragDrop.js

@@ -4,18 +4,19 @@ var events = require("../events.js");
 var $ = require("jquery");
 var uuid = require("node-uuid");
 
-function blockPositionChange(event){
+function blockPositionChange(event){ //fired when a block is moved or added
   var block = diagram.state.filter((block)=>(block.dragging))[0];
   if(block){
+    //change position to the event coordinates plus the offset, factoring in the relative positioning of the items on the workspace
     block.position.x = event.pageX - $("#workspace").position().left - block.offset.x;
     block.position.y = event.pageY - $("#workspace").position().top - block.offset.y;
 
-    $("#workspace>.block#" + block.id).css({
+    $("#workspace>.block#" + block.id).css({ //apply new position to element
       left: block.position.x,
       top: block.position.y,
     });
 
-    events.emit("blockMove");
+    events.emit("blockMove"); //trigger redraw of lines
   }
 }
 
@@ -33,7 +34,7 @@ $("#blocks").on("mousedown", ".block>.main,.block>.inputs", function(event){
     },
     type: $(this).parent().data("type"),
     inputs:
-      Object.keys(blocks[$(this).parent().data("type")].inputs) //get block ids
+      Object.keys(blocks[$(this).parent().data("type")].inputs) //get input ids
       .reduce((inputs, input)=>{ //turn this into an object
         inputs[input] = {
           joined: "",
@@ -48,11 +49,11 @@ $("#blocks").on("mousedown", ".block>.main,.block>.inputs", function(event){
   blockPositionChange(event);
 });
 
-$("#workspace").on("mousedown", ".block>.main,.block>.inputs", function(event){
+$("#workspace").on("mousedown", ".block>.main,.block>.inputs", function(event){ //drag start
   if(event.which == 1){ //check left mouse button
-    var block = diagram.state.filter((block)=>(block.id == $(this).parent().attr("id")))[0];
+    var block = diagram.state.filter((block)=>(block.id == $(this).parent().attr("id")))[0]; //find block
     block.dragging = true;
-    block.offset.x = event.pageX - $(this).parent().offset().left;
+    block.offset.x = event.pageX - $(this).parent().offset().left; //calculate offset of block from mouse
     block.offset.y = event.pageY - $(this).parent().offset().top;
     blockPositionChange(event);
   }
@@ -71,20 +72,16 @@ $(document).on("mousemove", function(event){
 $("#workspace").on("mousedown", ".block>.main", function(event){
   if(event.which == 3){ //right mouse button, delete
     event.preventDefault();
-    for(var i in diagram.state){
+    diagram.state = diagram.state.filter((block)=>(block.id != $(this).parent().attr("id"))); //delete block from array
-      if(diagram.state[i].id == $(this).parent().attr("id")){
+    for(var block of diagram.state){ //break relatioships
-        diagram.state.splice(i, 1);
-      }
-    }
-    for(var block of diagram.state){
       for(var input in block.inputs){
-        if(block.inputs[input] == $(this).parent().attr("id")){
+        if(block.inputs[input].joined == $(this).parent().attr("id")){
-          delete block.inputs[input];
+          block.inputs[input].joined = "";
         }
       }
     }
-    $(this).parent().remove();
+    $(this).parent().remove(); //delete element
-    events.emit("blockDelete");
+    events.emit("blockDelete"); //redraw lines
   }
 });
 

src/pageInteraction/joining.js

@@ -5,11 +5,13 @@ var $ = require("jquery");
 
 function moveLine(elem, a, b, c, d){
   [[a, b], [c, d]] = [[a, b], [c, d]].sort((a, b)=>(a[0] - b[0])); //swap coords based on x-value, a will always be smaller than b
-  var l = Math.sqrt(Math.pow(a  - c, 2) + Math.pow(d - b, 2));
+  var l = Math.sqrt(Math.pow(a  - c, 2) + Math.pow(d - b, 2)); //get length of line
+  //calculate coords
   var x = (a + c - l) / 2;
   var y = (b + d) / 2;
+  //calculate angle - note, JS uses rads by default
   var theta = Math.asin(2 * (y - b) / l);
-  $(elem).css({
+  $(elem).css({ //apply these to the element
     left: x,
     top: y,
     width: l,
@@ -17,6 +19,7 @@ function moveLine(elem, a, b, c, d){
   });
 }
 
+//global vars for storing state of drag
 var lineStart = [0, 0];
 var lineEnd = [0, 0];
 var dragging = false;
@@ -24,15 +27,15 @@ var startBlock = "";
 var endBlock = "";
 var endInput = "";
 
-$("#workspace").on("mousedown", ".block>.output", function(event){
+$("#workspace").on("mousedown", ".block>.output", function(event){ //drag start
   dragging = true;
   $("#workspace").append("<div class='line' id='joiningLine'></div>");
   startBlock = $(this).parent().attr("id");
-  lineStart = [event.pageX - $("#workspace").offset().left, event.pageY - $("#workspace").offset().top];
+  lineStart = [event.pageX - $("#workspace").offset().left, event.pageY - $("#workspace").offset().top]; //calculate + store line start coords
 });
 
 $(document).on("mousemove", function(event){
-  if(dragging){
+  if(dragging){ //mouse move, so update line
     lineEnd = [event.pageX - $("#workspace").offset().left, event.pageY - $("#workspace").offset().top];
     moveLine($("#joiningLine"), lineStart[0], lineStart[1], lineEnd[0], lineEnd[1]);
   }
@@ -41,16 +44,20 @@ $(document).on("mousemove", function(event){
 $(document).on("mouseup", function(event){
   if(dragging){
     dragging = false;
-    $("#joiningLine").remove();
+    $("#joiningLine").remove(); //delete the line being drawn - new line will be placed if valid
   }
 });
 
 $("#workspace").on("mouseup", ".block>.inputs>div", function(event){
+  //store relationship from drag
+  //this will execute before the previous function, since this is bound to a deeper element and events bubble up the DOM
   if(dragging){
+    //bound to the input div, so this will refer to the input element - parent of parent is block elemnet
     endBlock = $(this).parent().parent().attr("id");
     endInput = $(this).attr("id");
-    var endBlockInstance = diagram.state.filter((block)=>(block.id == endBlock))[0];
+    var endBlockInstance = diagram.state.filter((block)=>(block.id == endBlock))[0]; //find actual block object from ID
     endBlockInstance.inputs[endInput].joined = startBlock;
+    //draw lines for link
     drawJoiningLines();
     events.emit("newJoin");
   }
@@ -68,6 +75,7 @@ $("#workspace").on("mousedown", ".block>.inputs>div", function(event){
   }
 });
 
+//redraw lines when stuff happens
 events.subscribe("blockMove", drawJoiningLines);
 events.subscribe("blockDelete", drawJoiningLines);
 events.subscribe("diagramImport", drawJoiningLines);
@@ -76,17 +84,12 @@ function drawJoiningLines(){
   $(".line").remove();
   for(var endBlock of diagram.state){
     for(var input in endBlock.inputs){
-      if(endBlock.inputs[input].joined){
+      if(endBlock.inputs[input].joined){ //loop through every joined input of every block
         startBlockId = endBlock.inputs[input].joined;
         startBlock = diagram.state.filter((block)=>(block.id == startBlockId))[0];
         lineId = startBlock.id + "-" + endBlock.id + "-" + input;
-        if($("#" + lineId).length){
-          var line = $("#" + lineId)
-        }
-        else{
-          var line = $("<div class='line' id='" + lineId + "'></div>").appendTo($("#workspace"));
-        }
 
+        var line = $("<div class='line' id='" + lineId + "'></div>").appendTo($("#workspace"));
         outputElem = $("#" + startBlock.id).find(".output").eq(0);
         inputElem = $("#" + endBlock.id).find(".inputs>#" + input).eq(0);
         moveLine(

src/pageInteraction/setupBlocks.js

@@ -1,8 +1,9 @@
 var $ = require("jquery");
 var blocks = require("../blocks");
-for(var block of Object.keys(blocks)){
+for(var block of Object.keys(blocks)){ //loop through each block model
   blocks[block].type = block;
-  $("#blocks").append(require("./block.hbs")({
+  //type is used to identify block type for instances, so in this case will be the model we want to show
+  $("#blocks").append(require("./block.hbs")({ //generate these from the template, add to page
     block: blocks[block]
   }));
 }

webpack/base.conf.js

@@ -35,5 +35,3 @@ module.exports = {
     ]
   }
 }
-
-//SASS code from https://github.com/jtangelder/sass-loader licensed under MIT, see https://github.com/jtangelder/sass-loader/blob/master/LICENSE