Dragging stuff sort of works

client/src/blocks/index.js

@@ -1,4 +1,5 @@
 module.exports = {
   input: require("./input.js"),
-  output: require("./output.js")
+  output: require("./output.js"),
+  template: require("./template.js")
 }

client/src/blocks/template.js

@@ -1,7 +1,8 @@
 module.exports =  {
   name: "Example Block",
   inputs: {
-    input1: "Input 1"
+    input1: "Input 1",
+    input2: "Input 2"
   },
   output: true,
   execute: function({input1}, elem){

client/src/pageInteraction/dragDrop.js

@@ -28,7 +28,8 @@ $("#blocks").on("mousedown", ".block>.main,.block>.inputs", function(event){
       x: event.pageX - $(this).parent().offset().left,
       y: event.pageY - $(this).parent().offset().top
     },
-    type: $(this).parent().data("type")
+    type: $(this).parent().data("type"),
+    inputs: {}
   }
   diagram.state.push(newBlock);
   var newBlockElement = $(

client/src/pageInteraction/index.js

@@ -1,2 +1,3 @@
 require("./setupBlocks.js");
 require("./dragDrop.js");
+require("./joining.js");

client/src/pageInteraction/joining.js

@@ -0,0 +1,82 @@
+var blocks = require("../blocks");
+var diagram = require("../diagram.js");
+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 x = (a + c - l) / 2;
+  var y = (b + d) / 2;
+  var theta = Math.asin(2 * (y - b) / l);
+  $(elem).css({
+    left: x,
+    top: y,
+    width: l - 2,
+    transform: "rotate(" + theta + "rad)"
+  });
+}
+
+var lineStart = [0, 0];
+var lineEnd = [0, 0];
+var dragging = false;
+var startBlock = "";
+var endBlock = "";
+var endInput = "";
+
+$("#workspace").on("mousedown", ".block>.output", function(event){
+  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];
+});
+
+$(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]);
+  }
+});
+
+$(document).on("mouseup", function(event){
+  if(dragging){
+    dragging = false;
+    $("#joiningLine").remove();
+  }
+});
+
+$("#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();
+  }
+});
+
+function drawJoiningLines(){
+  for(var endBlock of diagram.state){
+    for(var input in endBlock.inputs){
+      startBlockId = endBlock.inputs[input];
+      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"));
+      }
+
+      outputElem = $("#" + startBlock.id).find(".output").eq(0);
+      inputElem = $("#" + endBlock.id).find(".inputs>#" + input).eq(0);
+      moveLine(
+        line,
+        startBlock.position.x + (outputElem.outerWidth()/2),
+        startBlock.position.y + outputElem.position().top + outputElem.outerHeight(),
+        endBlock.position.x + inputElem.position().left + (inputElem.outerWidth()/2),
+        endBlock.position.y
+      );
+    }
+  }
+}

client/src/styles.scss

@@ -60,4 +60,9 @@ body{
   .block{
     position: absolute;
   }
+  .line{
+    border-top: 2px solid black;
+    position: absolute;
+    z-index: 1;
+  }
 }