@@ -113,17 +111,17 @@ module.exports = {
var standardFrequency = standardFrequencies[block.properties.type];
var standardGroups = topGroupsByFrequency(standardFrequency, true);
- block.properties.chartBottom.data.labels = standardGroups.labels;
- block.properties.chartBottom.data.datasets[0] = {
+ $(block.elem).data("chartBottom").data.labels = standardGroups.labels;
+ $(block.elem).data("chartBottom").data.datasets[0] = {
data: standardGroups.values
};
- block.properties.chartBottom.update();
+ $(block.elem).data("chartBottom").update();
events.emit("inputChanged");
});
var Chart = require("chart.js");
- block.properties.chartTop = new Chart(
+ $(block.elem).data("chartTop", new Chart(
$(block.elem).find(".chart.top"),
{
type: "bar",
@@ -137,8 +135,8 @@ module.exports = {
}
}
}
- );
- block.properties.chartBottom = new Chart(
+ ));
+ $(block.elem).data("chartBottom", new Chart(
$(block.elem).find(".chart.bottom"),
{
type: "bar",
@@ -158,7 +156,7 @@ module.exports = {
}]
}
}
- );
+ ));
$(block.elem).find("select").change();
}
diff --git a/client/src/blocks/input.js b/client/src/blocks/input.js
index 5c5010b..c443a12 100644
--- a/client/src/blocks/input.js
+++ b/client/src/blocks/input.js
@@ -6,12 +6,16 @@ module.exports = {
},
output: true,
execute: function({}, block){
- return block.elem.find("input[name='input']").val();
+ return block.properties.value;
},
pageBlock: {
html: "
",
js: function(block){
+ if(block.properties.value){
+ block.elem.find("input[name='input']").val(block.properties.value);
+ }
$(block.elem).find("input[name='input']").keyup(function(){
+ block.properties.value = block.elem.find("input[name='input']").val();
events.emit("inputChanged");
});
}
diff --git a/client/src/blocks/vigenereDecode.js b/client/src/blocks/vigenereDecode.js
index 498d39e..0336a99 100644
--- a/client/src/blocks/vigenereDecode.js
+++ b/client/src/blocks/vigenereDecode.js
@@ -2,7 +2,7 @@ module.exports = {
name: "Vigenere Decode",
inputs: {
cipherText: "Ciphertext",
- key: "key"
+ key: "Key"
},
output: true,
execute: function({cipherText, key}, elem){
diff --git a/client/src/diagram/export.js b/client/src/diagram/export.js
new file mode 100644
index 0000000..a570a2f
--- /dev/null
+++ b/client/src/diagram/export.js
@@ -0,0 +1,9 @@
+module.exports = function(){
+ var diagram = require("./index.js");
+ return JSON.stringify(diagram, function(key, value){
+ if(key == "elem"){
+ return undefined;
+ }
+ return value;
+ });
+}
diff --git a/client/src/diagram/import.js b/client/src/diagram/import.js
new file mode 100644
index 0000000..f1331f5
--- /dev/null
+++ b/client/src/diagram/import.js
@@ -0,0 +1,12 @@
+var diagram = require("./index.js");
+var events = require("../events.js");
+var $ = require("jquery");
+
+module.exports = function(newDiagram){
+ Object.assign(diagram, JSON.parse(newDiagram));
+ $("#workspace>*").remove();
+ for(var block of diagram.state){
+ require("../pageInteraction/addBlockToPage.js")(block);
+ }
+ events.emit("diagramImport");
+}
diff --git a/client/src/diagram.js b/client/src/diagram/index.js
similarity index 68%
rename from client/src/diagram.js
rename to client/src/diagram/index.js
index 1e76915..197c5b3 100644
--- a/client/src/diagram.js
+++ b/client/src/diagram/index.js
@@ -1,5 +1,5 @@
module.exports = {
- name: "",
+ name: "New Diagram",
state: [],
snapshots: []
};
diff --git a/client/src/index.html b/client/src/index.html
index 781d609..1d7a762 100644
--- a/client/src/index.html
+++ b/client/src/index.html
@@ -4,7 +4,9 @@
diff --git a/client/src/index.js b/client/src/index.js
index 5a2dd84..8fc4183 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -1,7 +1,10 @@
require("./styles.scss");
require("./pageInteraction");
require("./outputCalculation.js");
+require("./menu.js");
//for lazy debugging, remove when done
-window.diagram = require("./diagram.js");
+window.diagram = require("./diagram");
window.$ = require("jquery");
+window.exportDiagram = require("./diagram/export.js");
+window.importDiagram = require("./diagram/import.js");
diff --git a/client/src/menu.js b/client/src/menu.js
new file mode 100644
index 0000000..21f2505
--- /dev/null
+++ b/client/src/menu.js
@@ -0,0 +1,21 @@
+var $ = require("jquery");
+
+$("#header>a#export").click(function(){
+ var fileSaver = require("file-saver");
+ var exported = require("./diagram/export.js")();
+ var exportedBlob = new Blob([exported], {type: "text/plain;chartset=utf-8"})
+ fileSaver.saveAs(exportedBlob, diagram.name + ".json");
+});
+
+$("#header>a#import").click(function(){
+ $("#header>#importUpload").click();
+});
+
+$("#header>#importUpload").change(function(){
+ var reader = new FileReader();
+ reader.onload = function(){
+ require("./diagram/import.js")(reader.result);
+ }
+ reader.readAsText(this.files[0]);
+ //console.log($("#header>#importUpload")[0].files[0])
+})
diff --git a/client/src/outputCalculation.js b/client/src/outputCalculation.js
index ffc6c2c..3a60eed 100644
--- a/client/src/outputCalculation.js
+++ b/client/src/outputCalculation.js
@@ -1,4 +1,4 @@
-var diagram = require("./diagram.js");
+var diagram = require("./diagram");
var events = require("./events.js");
var blocks = require("./blocks");
@@ -14,7 +14,10 @@ function resolveOutput(block, cache){
}
}
- var output = blocks[block.type].execute(inputValues, block);
+ var output = "";
+ if(Object.keys(blocks[block.type].inputs).length == Object.keys(inputValues).length){
+ var output = blocks[block.type].execute(inputValues, block);
+ }
cache[block.id] = output;
return output;
@@ -30,5 +33,6 @@ function calculateOutputBlocks(){
events.subscribe("inputChanged", calculateOutputBlocks);
events.subscribe("newJoin", calculateOutputBlocks);
+events.subscribe("diagramImport", calculateOutputBlocks);
window.calculate = calculateOutputBlocks;
diff --git a/client/src/pageInteraction/addBlockToPage.js b/client/src/pageInteraction/addBlockToPage.js
new file mode 100644
index 0000000..63fed70
--- /dev/null
+++ b/client/src/pageInteraction/addBlockToPage.js
@@ -0,0 +1,24 @@
+var blocks = require("../blocks");
+
+module.exports = function(newBlock){
+ var newBlockElement = $(
+ require("./block.hbs")({
+ block: blocks[newBlock.type],
+ instance: newBlock
+ })
+ ).appendTo("#workspace");
+ newBlock.elem = newBlockElement;
+ if(blocks[newBlock.type].size){
+ newBlockElement.css({
+ height: blocks[newBlock.type].size.height,
+ width: blocks[newBlock.type].size.width
+ });
+ }
+ if(newBlock.position){
+ newBlockElement.css({
+ top: newBlock.position.y,
+ left: newBlock.position.x
+ });
+ }
+ blocks[newBlock.type].pageBlock.js(newBlock);
+}
diff --git a/client/src/pageInteraction/dragDrop.js b/client/src/pageInteraction/dragDrop.js
index adeaee9..675b3d9 100644
--- a/client/src/pageInteraction/dragDrop.js
+++ b/client/src/pageInteraction/dragDrop.js
@@ -1,5 +1,5 @@
var blocks = require("../blocks");
-var diagram = require("../diagram.js");
+var diagram = require("../diagram");
var events = require("../events.js");
var $ = require("jquery");
var uuid = require("node-uuid");
@@ -36,20 +36,7 @@ $("#blocks").on("mousedown", ".block>.main,.block>.inputs", function(event){
properties: {}
}
diagram.state.push(newBlock);
- var newBlockElement = $(
- require("./block.hbs")({
- block: blocks[newBlock.type],
- instance: newBlock
- })
- ).appendTo("#workspace");
- newBlock.elem = newBlockElement;
- if(blocks[newBlock.type].size){
- newBlockElement.css({
- height: blocks[newBlock.type].size.height,
- width: blocks[newBlock.type].size.width
- });
- }
- blocks[newBlock.type].pageBlock.js(newBlock);
+ require("./addBlockToPage.js")(newBlock);
blockPositionChange(event);
});
diff --git a/client/src/pageInteraction/joining.js b/client/src/pageInteraction/joining.js
index 2f3f4bd..9401090 100644
--- a/client/src/pageInteraction/joining.js
+++ b/client/src/pageInteraction/joining.js
@@ -1,5 +1,5 @@
var blocks = require("../blocks");
-var diagram = require("../diagram.js");
+var diagram = require("../diagram");
var events = require("../events.js");
var $ = require("jquery");
@@ -58,6 +58,7 @@ $("#workspace").on("mouseup", ".block>.inputs>div", function(event){
events.subscribe("blockMove", drawJoiningLines);
events.subscribe("blockDelete", drawJoiningLines);
+events.subscribe("diagramImport", drawJoiningLines);
function drawJoiningLines(){
$(".line").remove();
diff --git a/client/src/styles.scss b/client/src/styles.scss
index 019dc72..9aff098 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -9,6 +9,12 @@ body{
flex-direction: column;
}
+#header{
+ #importUpload{
+ display: none;
+ }
+}
+
#blocks{
display: flex;
flex-direction: row;
diff --git a/package.json b/package.json
index 8732372..3fb29e9 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,9 @@
},
"homepage": "https://github.com/TimStallard/CryptoAssist#readme",
"devDependencies": {
+ "chart.js": "^2.5.0",
"css-loader": "^0.26.1",
+ "file-saver": "^1.3.3",
"handlebars": "^4.0.6",
"handlebars-loader": "^1.4.0",
"html-webpack-plugin": "^2.28.0",
@@ -29,7 +31,6 @@
"style-loader": "^0.13.1",
"uuid": "^3.0.1",
"webpack": "^2.2.1",
- "webpack-dev-server": "^2.3.0",
- "chart.js": "^2.5.0"
+ "webpack-dev-server": "^2.3.0"
}
}