Added inline inputs (blocks still need updating)

src/blocks/caesar.js

@@ -1,8 +1,14 @@
 module.exports =  {
   name: "Caesar",
   inputs: {
-    text: "Text",
-    shift: "Shift"
+    text: {
+      name: "Text"
+    },
+    shift: {
+      name: "Shift",
+      inline: true,
+      type: "number"
+    }
   },
   output: true,
   execute: function({text, shift}, elem){

src/blocks/output.js

@@ -1,7 +1,9 @@
 module.exports =  {
   name: "Output",
   inputs: {
-    input: "Input"
+    input: {
+      name: "Input"
+    }
   },
   output: false,
   execute: function({input}, block){

src/outputCalculation.js

@@ -5,12 +5,17 @@ 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]];
+    if(block.inputs[input].joined){ //if it's joined to something else
+      if(block.inputs[input].joined in cache){ //if output of other block is already in cache
+        inputValues[input] = cache[block.inputs[input].joined];
+      }
+      else{
+        var inputBlock = diagram.state.filter((diagramBlock)=>(diagramBlock.id == block.inputs[input].joined))[0]; //find block instance
+        inputValues[input] = resolveOutput(inputBlock, cache); //calculate and store output
+      }
     }
-    else{
-      var inputBlock = diagram.state.filter((diagramBlock)=>(diagramBlock.id == block.inputs[input]))[0];
-      inputValues[input] = resolveOutput(inputBlock, cache);
+    else if(block.inputs[input].value){ //if value is already set, just save that
+      inputValues[input] = block.inputs[input].value;
     }
   }
 

src/pageInteraction/addBlockToPage.js

@@ -1,4 +1,5 @@
 var blocks = require("../blocks");
+var events = require("../events");
 
 module.exports = function(newBlock){
   var newBlockElement = $(
@@ -7,14 +8,26 @@ module.exports = function(newBlock){
       instance: newBlock
     })
   ).appendTo("#workspace");
+  newBlockElement.find(".inputs input").keyup(function(){
+    //when input field is updated, save the value to the block object and emit event for updates
+    var inputId = $(this).parent().attr("id");
+    if(!newBlock.inputs[inputId]){
+      newBlock.inputs[inputId] = {};
+    }
+    newBlock.inputs[inputId].value = $(this).val();
+    events.emit("inputChanged");
+  });
   newBlock.elem = newBlockElement;
   if(blocks[newBlock.type].size){
+    //if the block declaration contains a non-standard size, resize it
     newBlockElement.css({
       height: blocks[newBlock.type].size.height,
       width: blocks[newBlock.type].size.width
     });
   }
   if(newBlock.position){
+    //if this block instance already has a position, place it there
+    //this will only be used for importing
     newBlockElement.css({
       top: newBlock.position.y,
       left: newBlock.position.x

src/pageInteraction/block.hbs

@@ -1,7 +1,12 @@
 <div class="block" data-type="{{block.type}}" id="{{instance.id}}">
   <div class="inputs">
-    {{#each block.inputs as |desc name|}}
-      <div id="{{name}}">{{desc}}</div>
+    {{#each block.inputs as |input id|}}
+      <div id="{{id}}">
+        {{input.name}}
+        {{#if input.inline}}
+          <input type="{{input.type}}" size="4" value="{{lookup (lookup ../instance.inputs id) "value"}}"></input>
+        {{/if}}
+      </div>
     {{/each}}
   </div>
   <div class="main">

src/pageInteraction/dragDrop.js

@@ -32,7 +32,15 @@ $("#blocks").on("mousedown", ".block>.main,.block>.inputs", function(event){
       y: event.pageY - $(this).parent().offset().top
     },
     type: $(this).parent().data("type"),
-    inputs: {},
+    inputs:
+      Object.keys(blocks[$(this).parent().data("type")].inputs) //get block ids
+      .reduce((inputs, input)=>{ //turn this into an object
+        inputs[input] = {
+          joined: "",
+          value: ""
+        };
+        return inputs;
+      }, {}),
     properties: {}
   }
   diagram.state.push(newBlock);

src/pageInteraction/joining.js

@@ -50,7 +50,7 @@ $("#workspace").on("mouseup", ".block>.inputs>div", function(event){
     endBlock = $(this).parent().parent().attr("id");
     endInput = $(this).attr("id");
     var endBlockInstance = diagram.state.filter((block)=>(block.id == endBlock))[0];
-    endBlockInstance.inputs[endInput] = startBlock;
+    endBlockInstance.inputs[endInput].joined = startBlock;
     drawJoiningLines();
     events.emit("newJoin");
   }
@@ -62,7 +62,7 @@ $("#workspace").on("mousedown", ".block>.inputs>div", function(event){
     var blockId = $(this).parent().parent().attr("id")
     var input = $(this).attr("id");
     var block = diagram.state.filter((block)=>(block.id == blockId))[0];
-    delete block.inputs[input];
+    block.inputs[input].joined = "";
     drawJoiningLines();
     events.emit("joinRemove");
   }
@@ -76,25 +76,27 @@ function drawJoiningLines(){
   $(".line").remove();
   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"));
-      }
+      if(endBlock.inputs[input].joined){
+        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"));
+        }
 
-      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
-      );
+        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
+        );
+      }
     }
   }
 }

src/styles.scss

@@ -45,6 +45,9 @@ body{
       text-align: center;
       padding-top: 5px;
       padding-bottom: 5px;
+      >input{
+        width: 40px;
+      }
     }
   }
   .main{