Implemented output calculation (yay)

client/src/blocks/concat.js

@@ -0,0 +1,15 @@
+module.exports =  {
+  name: "Concat",
+  inputs: {
+    str1: "String 1",
+    str2: "String 2"
+  },
+  output: true,
+  execute: function({str1, str2}, block){
+    return str1 + str2;
+  },
+  pageBlock: {
+    html: "",
+    js: function(){}
+  }
+}

client/src/blocks/index.js

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

client/src/blocks/input.js

@@ -1,13 +1,19 @@
+var events = require("../events.js");
+
 module.exports =  {
   name: "Input",
   inputs: {
   },
   output: true,
   execute: function({}, block){
-    return block.find("input[name='input']").val();
+    return block.elem.find("input[name='input']").val();
   },
   pageBlock: {
     html: "<input type='text' name='input'></input>",
-    js: function(){}
+    js: function(block){
+      $(block.elem).find("input[name='input']").keyup(function(){
+        events.emit("inputChanged");
+      });
+    }
   }
 }

client/src/blocks/output.js

@@ -5,7 +5,7 @@ module.exports =  {
   },
   output: false,
   execute: function({input}, block){
-    $(elem).find("div.output").html(input1);
+    $(block.elem).find("span.output").html(input);
   },
   pageBlock: {
     html: "<span class='output'></span>",

client/src/index.js

@@ -1,5 +1,6 @@
 require("./styles.scss");
 require("./pageInteraction");
+require("./outputCalculation.js");
 
 //for lazy debugging, remove when done
 window.diagram = require("./diagram.js");

client/src/outputCalculation.js

@@ -0,0 +1,34 @@
+var diagram = require("./diagram.js");
+var events = require("./events.js");
+var blocks = require("./blocks");
+
+function resolveOutput(block, cache){
+  var inputValues = {};
+  for(var input in block.inputs){
+    if(block.inputs[input] in cache){
+      inputValues[input] = cache[block.inputs[input]];
+    }
+    else{
+      var inputBlock = diagram.state.filter((diagramBlock)=>(diagramBlock.id == block.inputs[input]))[0];
+      inputValues[input] = resolveOutput(inputBlock, cache);
+    }
+  }
+
+  var output = blocks[block.type].execute(inputValues, block);
+  cache[block.id] = output;
+
+  return output;
+}
+
+function calculateOutputBlocks(){
+  var cache = {};
+  var outputBlocks = diagram.state.filter((block)=>(block.type == "output"));
+  for(var block of outputBlocks){
+    resolveOutput(block, cache);
+  }
+}
+
+events.subscribe("inputChanged", calculateOutputBlocks);
+events.subscribe("newJoin", calculateOutputBlocks);
+
+window.calculate = calculateOutputBlocks;

client/src/pageInteraction/dragDrop.js

@@ -41,6 +41,8 @@ $("#blocks").on("mousedown", ".block>.main,.block>.inputs", function(event){
       instance: newBlock
     })
   ).appendTo("#workspace");
+  newBlock.elem = newBlockElement;
+  blocks[newBlock.type].pageBlock.js(newBlock);
   blockPositionChange(event);
 });
 

client/src/pageInteraction/joining.js

@@ -52,6 +52,7 @@ $("#workspace").on("mouseup", ".block>.inputs>div", function(event){
     var endBlockInstance = diagram.state.filter((block)=>(block.id == endBlock))[0];
     endBlockInstance.inputs[endInput] = startBlock;
     drawJoiningLines();
+    events.emit("newJoin");
   }
 });