Tim/CryptoAssist
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fixed bug with block structure, added comments

Browse Source
This commit is contained in:
Tim Stallard 2017-03-10 17:06:50 +00:00
parent af06e2e066
commit 66d7f0ae46
7 changed files with 43 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/events.js
View File

@ -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);
}
}

1
src/index.js
View File

@ -1,3 +1,4 @@
//require components of project
require("./styles.scss");
require("./pageInteraction");
require("./outputCalculation.js");

11
src/menu.js
View File

@ -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);
});

31
src/pageInteraction/dragDrop.js
View File

@ -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
}
});

31
src/pageInteraction/joining.js
View File

@ -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("<div class='line' id='joiningLine'></div>");
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 = $("<div class='line' id='" + lineId + "'></div>").appendTo($("#workspace"));
}
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(

5
src/pageInteraction/setupBlocks.js
View File

@ -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]
}));
}

2
webpack/base.conf.js
View File

@ -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