From e1951faae8f16455cf55669ff21e569490079e05 Mon Sep 17 00:00:00 2001
From: Tim Stallard <code@timstallard.me.uk>
Date: Tue, 21 Feb 2017 13:25:27 +0000
Subject: [PATCH] Dragging stuff sort of works

---
 client/src/blocks/index.js             |  3 +-
 client/src/blocks/template.js          |  3 +-
 client/src/pageInteraction/dragDrop.js |  3 +-
 client/src/pageInteraction/index.js    |  1 +
 client/src/pageInteraction/joining.js  | 82 ++++++++++++++++++++++++++
 client/src/styles.scss                 |  5 ++
 6 files changed, 94 insertions(+), 3 deletions(-)
 create mode 100644 client/src/pageInteraction/joining.js

diff --git a/client/src/blocks/index.js b/client/src/blocks/index.js
index 901eefd..18f7ca6 100644
--- a/client/src/blocks/index.js
+++ b/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")
 }
diff --git a/client/src/blocks/template.js b/client/src/blocks/template.js
index d99312c..f1f4b13 100644
--- a/client/src/blocks/template.js
+++ b/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){
diff --git a/client/src/pageInteraction/dragDrop.js b/client/src/pageInteraction/dragDrop.js
index 2cc4117..c773119 100644
--- a/client/src/pageInteraction/dragDrop.js
+++ b/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 = $(
diff --git a/client/src/pageInteraction/index.js b/client/src/pageInteraction/index.js
index d977d62..b270caf 100644
--- a/client/src/pageInteraction/index.js
+++ b/client/src/pageInteraction/index.js
@@ -1,2 +1,3 @@
 require("./setupBlocks.js");
 require("./dragDrop.js");
+require("./joining.js");
diff --git a/client/src/pageInteraction/joining.js b/client/src/pageInteraction/joining.js
new file mode 100644
index 0000000..29d641b
--- /dev/null
+++ b/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
+      );
+    }
+  }
+}
diff --git a/client/src/styles.scss b/client/src/styles.scss
index 13dda0e..e89be10 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -60,4 +60,9 @@ body{
   .block{
     position: absolute;
   }
+  .line{
+    border-top: 2px solid black;
+    position: absolute;
+    z-index: 1;
+  }
 }