Got dragging working

client/src/blocks/input.js

@@ -4,7 +4,7 @@ module.exports =  {
   },
   output: true,
   execute: function({}, block){
-    block.find("input[name='input']").val();
+    return block.find("input[name='input']").val();
   },
   pageBlock: {
     html: "<input type='text' name='input'></input>",

client/src/diagram.js

@@ -0,0 +1,5 @@
+module.exports = {
+  name: "",
+  state: [],
+  snapshots: []
+};

client/src/document.js

@@ -1 +0,0 @@
-module.exports = {};

client/src/index.js

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

client/src/pageInteraction/block.hbs

@@ -1,16 +1,16 @@
-<div class="block">
+<div class="block" data-type="{{block.type}}" id="{{instance.id}}">
   <div class="inputs">
-    {{#each inputs as |desc name|}}
+    {{#each block.inputs as |desc name|}}
       <div id="{{name}}">{{desc}}</div>
     {{/each}}
   </div>
   <div class="main">
     <div>
-      <div class="title">{{name}}</div>
-      {{{pageBlock.html}}}
+      <div class="title">{{block.name}}</div>
+      {{{block.pageBlock.html}}}
     </div>
   </div>
-  {{#if output}}
+  {{#if block.output}}
     <div class="output">
       Output
     </div>

client/src/pageInteraction/dragDrop.js

@@ -0,0 +1,77 @@
+var blocks = require("../blocks");
+var diagram = require("../diagram.js");
+var $ = require("jquery");
+var uuid = require("node-uuid");
+
+function blockPositionChange(event){
+  for(var block of diagram.state.filter((block)=>(block.dragging))){
+    block.position.x = event.pageX - $("#workspace").position().left - block.offset.x;
+    block.position.y = event.pageY - $("#workspace").position().top - block.offset.y;
+
+    $("#workspace>.block#" + block.id).css({
+      left: block.position.x,
+      top: block.position.y,
+    });
+  }
+}
+
+$("#blocks").on("mousedown", ".block>.main,.block>.inputs", function(event){
+  var newBlock = {
+    id: uuid.v4(),
+    position: {
+      x: 0,
+      y: 0
+    },
+    dragging: true,
+    offset: {
+      x: event.pageX - $(this).parent().offset().left,
+      y: event.pageY - $(this).parent().offset().top
+    },
+    type: $(this).parent().data("type")
+  }
+  diagram.state.push(newBlock);
+  var newBlockElement = $(
+    require("./block.hbs")({
+      block: blocks[newBlock.type],
+      instance: newBlock
+    })
+  ).appendTo("#workspace");
+  blockPositionChange(event);
+});
+
+$("#workspace").on("mousedown", ".block>.main,.block>.inputs", function(event){
+  if(event.which == 1){ //check left mouse button
+    var block = diagram.state.filter((block)=>(block.id == $(this).parent().attr("id")))[0];
+    block.dragging = true;
+    block.offset.x = event.pageX - $(this).parent().offset().left;
+    block.offset.y = event.pageY - $(this).parent().offset().top;
+    blockPositionChange(event);
+  }
+});
+
+$("#workspace").on("mouseup", ".block>.main,.block>.inputs", function(event){
+  diagram.state.filter((block)=>(block.id == $(this).parent().attr("id")))[0].dragging = false;
+});
+
+
+$(document).on("mousemove", function(event){
+  event.preventDefault();
+  blockPositionChange(event);
+});
+
+$("#workspace").on("mousedown", ".block", 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")){
+        diagram.state.splice(i, 1);
+      }
+    }
+    $(this).remove();
+  }
+});
+
+$(document).on("contextmenu", function(event){
+  event.preventDefault();
+  return false;
+});

client/src/pageInteraction/index.js

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

client/src/pageInteraction/setupBlocks.js

@@ -1,5 +1,8 @@
 var $ = require("jquery");
 var blocks = require("../blocks");
 for(var block of Object.keys(blocks)){
-  $("#blocks").append(require("./block.hbs")(blocks[block]));
+  blocks[block].type = block;
+  $("#blocks").append(require("./block.hbs")({
+    block: blocks[block]
+  }));
 }

client/src/styles.scss

@@ -23,6 +23,7 @@ body{
   border: 1px solid black;
   display: flex;
   flex-direction: column;
+  background-color: white;
   .inputs{
     display: flex;
     flex-direction: row;

package.json

@@ -24,8 +24,10 @@
     "html-webpack-plugin": "^2.28.0",
     "jquery": "^3.1.1",
     "node-sass": "^4.5.0",
+    "node-uuid": "^1.4.7",
     "sass-loader": "^6.0.1",
     "style-loader": "^0.13.1",
+    "uuid": "^3.0.1",
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0"
   }