-
{{name}}
- {{{pageBlock.html}}}
+
{{block.name}}
+ {{{block.pageBlock.html}}}
- {{#if output}}
+ {{#if block.output}}
Output
diff --git a/client/src/pageInteraction/dragDrop.js b/client/src/pageInteraction/dragDrop.js
index e69de29..35e17f7 100644
--- a/client/src/pageInteraction/dragDrop.js
+++ b/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;
+});
diff --git a/client/src/pageInteraction/index.js b/client/src/pageInteraction/index.js
index 8b7db60..d977d62 100644
--- a/client/src/pageInteraction/index.js
+++ b/client/src/pageInteraction/index.js
@@ -1 +1,2 @@
require("./setupBlocks.js");
+require("./dragDrop.js");
diff --git a/client/src/pageInteraction/setupBlocks.js b/client/src/pageInteraction/setupBlocks.js
index 235f00c..ad12bb7 100644
--- a/client/src/pageInteraction/setupBlocks.js
+++ b/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]
+ }));
}
diff --git a/client/src/styles.scss b/client/src/styles.scss
index f14a36d..13dda0e 100644
--- a/client/src/styles.scss
+++ b/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;
diff --git a/package.json b/package.json
index 3d7843d..ca63827 100644
--- a/package.json
+++ b/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"
}