From 66d7f0ae46283620f9d7d5f1a87e9ca9b10ae2e9 Mon Sep 17 00:00:00 2001 From: Tim Stallard Date: Fri, 10 Mar 2017 17:06:50 +0000 Subject: [PATCH] Fixed bug with block structure, added comments --- src/events.js | 4 ++-- src/index.js | 1 + src/menu.js | 11 ++++++----- src/pageInteraction/dragDrop.js | 31 ++++++++++++++---------------- src/pageInteraction/joining.js | 31 ++++++++++++++++-------------- src/pageInteraction/setupBlocks.js | 5 +++-- webpack/base.conf.js | 2 -- 7 files changed, 43 insertions(+), 42 deletions(-) diff --git a/src/events.js b/src/events.js index 6403f48..5e306f6 100644 --- a/src/events.js +++ b/src/events.js @@ -1,7 +1,7 @@ var subscriptions = {}; module.exports = { - subscribe: function(event, callback){ + subscribe: function(event, callback){ //adding a new subscription if(!subscriptions[event]){ subscriptions[event] = []; } @@ -9,7 +9,7 @@ module.exports = { }, emit: function(event, data){ if(subscriptions[event]){ - for(var callback of subscriptions[event]){ + for(var callback of subscriptions[event]){ //loop through and call all subscriptions callback(data); } } diff --git a/src/index.js b/src/index.js index 8fc4183..8ec9a6b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,4 @@ +//require components of project require("./styles.scss"); require("./pageInteraction"); require("./outputCalculation.js"); diff --git a/src/menu.js b/src/menu.js index cd595f2..044f8ba 100644 --- a/src/menu.js +++ b/src/menu.js @@ -2,7 +2,7 @@ var $ = require("jquery"); var events = require("./events.js"); var diagram = require("./diagram"); -$("#header>a#export").click(function(){ +$("#header>a#export").click(function(){ //export button clicked var fileSaver = require("file-saver"); var exported = require("./diagram/export.js")(); var exportedBlob = new Blob([exported], {type: "text/plain;chartset=utf-8"}) @@ -10,25 +10,26 @@ $("#header>a#export").click(function(){ }); $("#header>a#import").click(function(){ - $("#header>#importUpload").click(); + $("#header>#importUpload").click(); //on import button click, trigger file open dialog }); -$("#header>#importUpload").change(function(){ +$("#header>#importUpload").change(function(){ //when a file is selected var reader = new FileReader(); reader.onload = function(){ require("./diagram/import.js")(reader.result); } - reader.readAsText(this.files[0]); + reader.readAsText(this.files[0]); //read the file as text, this will call the above function when complete }); $("#header>a#projectName").click(function(){ do{ diagram.name = prompt("Please enter a name for the diagram", diagram.name); } - while(!diagram.name); + while(!diagram.name); //keep asking for a new name until a valid one is entered $("#header>a#projectName").html(diagram.name); }); events.subscribe("diagramImport", function(){ + //update displayed name when new diagram imported $("#header>a#projectName").html(diagram.name); }); diff --git a/src/pageInteraction/dragDrop.js b/src/pageInteraction/dragDrop.js index 50c4c1a..db67fd5 100644 --- a/src/pageInteraction/dragDrop.js +++ b/src/pageInteraction/dragDrop.js @@ -4,18 +4,19 @@ var events = require("../events.js"); var $ = require("jquery"); var uuid = require("node-uuid"); -function blockPositionChange(event){ +function blockPositionChange(event){ //fired when a block is moved or added var block = diagram.state.filter((block)=>(block.dragging))[0]; if(block){ + //change position to the event coordinates plus the offset, factoring in the relative positioning of the items on the workspace 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({ + $("#workspace>.block#" + block.id).css({ //apply new position to element left: block.position.x, top: block.position.y, }); - events.emit("blockMove"); + events.emit("blockMove"); //trigger redraw of lines } } @@ -33,7 +34,7 @@ $("#blocks").on("mousedown", ".block>.main,.block>.inputs", function(event){ }, type: $(this).parent().data("type"), inputs: - Object.keys(blocks[$(this).parent().data("type")].inputs) //get block ids + Object.keys(blocks[$(this).parent().data("type")].inputs) //get input ids .reduce((inputs, input)=>{ //turn this into an object inputs[input] = { joined: "", @@ -48,11 +49,11 @@ $("#blocks").on("mousedown", ".block>.main,.block>.inputs", function(event){ blockPositionChange(event); }); -$("#workspace").on("mousedown", ".block>.main,.block>.inputs", function(event){ +$("#workspace").on("mousedown", ".block>.main,.block>.inputs", function(event){ //drag start if(event.which == 1){ //check left mouse button - var block = diagram.state.filter((block)=>(block.id == $(this).parent().attr("id")))[0]; + var block = diagram.state.filter((block)=>(block.id == $(this).parent().attr("id")))[0]; //find block block.dragging = true; - block.offset.x = event.pageX - $(this).parent().offset().left; + block.offset.x = event.pageX - $(this).parent().offset().left; //calculate offset of block from mouse block.offset.y = event.pageY - $(this).parent().offset().top; blockPositionChange(event); } @@ -71,20 +72,16 @@ $(document).on("mousemove", function(event){ $("#workspace").on("mousedown", ".block>.main", function(event){ if(event.which == 3){ //right mouse button, delete event.preventDefault(); - for(var i in diagram.state){ - if(diagram.state[i].id == $(this).parent().attr("id")){ - diagram.state.splice(i, 1); - } - } - for(var block of diagram.state){ + diagram.state = diagram.state.filter((block)=>(block.id != $(this).parent().attr("id"))); //delete block from array + for(var block of diagram.state){ //break relatioships for(var input in block.inputs){ - if(block.inputs[input] == $(this).parent().attr("id")){ - delete block.inputs[input]; + if(block.inputs[input].joined == $(this).parent().attr("id")){ + block.inputs[input].joined = ""; } } } - $(this).parent().remove(); - events.emit("blockDelete"); + $(this).parent().remove(); //delete element + events.emit("blockDelete"); //redraw lines } }); diff --git a/src/pageInteraction/joining.js b/src/pageInteraction/joining.js index 882228d..0c2d5cc 100644 --- a/src/pageInteraction/joining.js +++ b/src/pageInteraction/joining.js @@ -5,11 +5,13 @@ 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 l = Math.sqrt(Math.pow(a - c, 2) + Math.pow(d - b, 2)); //get length of line + //calculate coords var x = (a + c - l) / 2; var y = (b + d) / 2; + //calculate angle - note, JS uses rads by default var theta = Math.asin(2 * (y - b) / l); - $(elem).css({ + $(elem).css({ //apply these to the element left: x, top: y, width: l, @@ -17,6 +19,7 @@ function moveLine(elem, a, b, c, d){ }); } +//global vars for storing state of drag var lineStart = [0, 0]; var lineEnd = [0, 0]; var dragging = false; @@ -24,15 +27,15 @@ var startBlock = ""; var endBlock = ""; var endInput = ""; -$("#workspace").on("mousedown", ".block>.output", function(event){ +$("#workspace").on("mousedown", ".block>.output", function(event){ //drag start dragging = true; $("#workspace").append("
"); startBlock = $(this).parent().attr("id"); - lineStart = [event.pageX - $("#workspace").offset().left, event.pageY - $("#workspace").offset().top]; + lineStart = [event.pageX - $("#workspace").offset().left, event.pageY - $("#workspace").offset().top]; //calculate + store line start coords }); $(document).on("mousemove", function(event){ - if(dragging){ + if(dragging){ //mouse move, so update line lineEnd = [event.pageX - $("#workspace").offset().left, event.pageY - $("#workspace").offset().top]; moveLine($("#joiningLine"), lineStart[0], lineStart[1], lineEnd[0], lineEnd[1]); } @@ -41,16 +44,20 @@ $(document).on("mousemove", function(event){ $(document).on("mouseup", function(event){ if(dragging){ dragging = false; - $("#joiningLine").remove(); + $("#joiningLine").remove(); //delete the line being drawn - new line will be placed if valid } }); $("#workspace").on("mouseup", ".block>.inputs>div", function(event){ + //store relationship from drag + //this will execute before the previous function, since this is bound to a deeper element and events bubble up the DOM if(dragging){ + //bound to the input div, so this will refer to the input element - parent of parent is block elemnet endBlock = $(this).parent().parent().attr("id"); endInput = $(this).attr("id"); - var endBlockInstance = diagram.state.filter((block)=>(block.id == endBlock))[0]; + var endBlockInstance = diagram.state.filter((block)=>(block.id == endBlock))[0]; //find actual block object from ID endBlockInstance.inputs[endInput].joined = startBlock; + //draw lines for link drawJoiningLines(); events.emit("newJoin"); } @@ -68,6 +75,7 @@ $("#workspace").on("mousedown", ".block>.inputs>div", function(event){ } }); +//redraw lines when stuff happens events.subscribe("blockMove", drawJoiningLines); events.subscribe("blockDelete", drawJoiningLines); events.subscribe("diagramImport", drawJoiningLines); @@ -76,17 +84,12 @@ function drawJoiningLines(){ $(".line").remove(); for(var endBlock of diagram.state){ for(var input in endBlock.inputs){ - if(endBlock.inputs[input].joined){ + if(endBlock.inputs[input].joined){ //loop through every joined input of every block 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 = $("
").appendTo($("#workspace")); - } + var line = $("
").appendTo($("#workspace")); outputElem = $("#" + startBlock.id).find(".output").eq(0); inputElem = $("#" + endBlock.id).find(".inputs>#" + input).eq(0); moveLine( diff --git a/src/pageInteraction/setupBlocks.js b/src/pageInteraction/setupBlocks.js index ad12bb7..6855402 100644 --- a/src/pageInteraction/setupBlocks.js +++ b/src/pageInteraction/setupBlocks.js @@ -1,8 +1,9 @@ var $ = require("jquery"); var blocks = require("../blocks"); -for(var block of Object.keys(blocks)){ +for(var block of Object.keys(blocks)){ //loop through each block model blocks[block].type = block; - $("#blocks").append(require("./block.hbs")({ + //type is used to identify block type for instances, so in this case will be the model we want to show + $("#blocks").append(require("./block.hbs")({ //generate these from the template, add to page block: blocks[block] })); } diff --git a/webpack/base.conf.js b/webpack/base.conf.js index 92d0d93..89222f1 100644 --- a/webpack/base.conf.js +++ b/webpack/base.conf.js @@ -35,5 +35,3 @@ module.exports = { ] } } - -//SASS code from https://github.com/jtangelder/sass-loader licensed under MIT, see https://github.com/jtangelder/sass-loader/blob/master/LICENSE