Working joining + events system

client/src/events.js

@@ -0,0 +1,17 @@
+var subscriptions = {};
+
+module.exports = {
+  subscribe: function(event, callback){
+    if(!subscriptions[event]){
+      subscriptions[event] = [];
+    }
+    subscriptions[event].push(callback);
+  },
+  emit: function(event, data){
+    if(subscriptions[event]){
+      for(var callback of subscriptions[event]){
+        callback(data);
+      }
+    }
+  }
+};

client/src/pageInteraction/dragDrop.js

@@ -1,5 +1,6 @@
 var blocks = require("../blocks");
 var diagram = require("../diagram.js");
+var events = require("../events.js");
 var $ = require("jquery");
 var uuid = require("node-uuid");
 
@@ -13,6 +14,8 @@ function blockPositionChange(event){
       left: block.position.x,
       top: block.position.y,
     });
+
+    events.emit("blockMove");
   }
 }
 
@@ -61,15 +64,23 @@ $(document).on("mousemove", function(event){
   blockPositionChange(event);
 });
 
-$("#workspace").on("mousedown", ".block", 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){
-      if(diagram.state[i].id == $(this).attr("id")){
+      if(diagram.state[i].id == $(this).parent().attr("id")){
         diagram.state.splice(i, 1);
       }
     }
-    $(this).remove();
+    for(var block of diagram.state){
+      for(var input in block.inputs){
+        if(block.inputs[input] == $(this).parent().attr("id")){
+          delete block.inputs[input];
+        }
+      }
+    }
+    $(this).parent().remove();
+    events.emit("blockDelete");
   }
 });
 

client/src/pageInteraction/joining.js

@@ -1,5 +1,6 @@
 var blocks = require("../blocks");
 var diagram = require("../diagram.js");
+var events = require("../events.js");
 var $ = require("jquery");
 
 function moveLine(elem, a, b, c, d){
@@ -11,7 +12,7 @@ function moveLine(elem, a, b, c, d){
   $(elem).css({
     left: x,
     top: y,
-    width: l - 2,
+    width: l,
     transform: "rotate(" + theta + "rad)"
   });
 }
@@ -33,7 +34,7 @@ $("#workspace").on("mousedown", ".block>.output", function(event){
 $(document).on("mousemove", function(event){
   if(dragging){
     lineEnd = [event.pageX - $("#workspace").offset().left, event.pageY - $("#workspace").offset().top];
-    moveLine($(".line"), lineStart[0], lineStart[1], lineEnd[0], lineEnd[1]);
+    moveLine($("#joiningLine"), lineStart[0], lineStart[1], lineEnd[0], lineEnd[1]);
   }
 });
 
@@ -48,14 +49,17 @@ $("#workspace").on("mouseup", ".block>.inputs>div", function(event){
   if(dragging){
     endBlock = $(this).parent().parent().attr("id");
     endInput = $(this).attr("id");
-    console.log(startBlock, endBlock, endInput);
     var endBlockInstance = diagram.state.filter((block)=>(block.id == endBlock))[0];
     endBlockInstance.inputs[endInput] = startBlock;
     drawJoiningLines();
   }
 });
 
+events.subscribe("blockMove", drawJoiningLines);
+events.subscribe("blockDelete", drawJoiningLines);
+
 function drawJoiningLines(){
+  $(".line").remove();
   for(var endBlock of diagram.state){
     for(var input in endBlock.inputs){
       startBlockId = endBlock.inputs[input];

client/src/styles.scss

@@ -64,5 +64,6 @@ body{
     border-top: 2px solid black;
     position: absolute;
     z-index: 1;
+    pointer-events: none;
   }
 }