Mostly added import/export

client/src/blocks/frequency.js

@@ -63,13 +63,11 @@ module.exports =  {
       //first
       topGroups = topGroupsByFrequency(getFrequency(getFirstLetters(input, parseInt(block.properties.type))));
     }
-    block.properties.chartTop.data.labels = topGroups.labels;
-    block.properties.chartTop.data.datasets[0] = {
+    $(block.elem).data("chartTop").data.labels = topGroups.labels;
+    $(block.elem).data("chartTop").data.datasets[0] = {
       data: topGroups.values
     };
-    block.properties.chartTop.update();
-
-    return input;
+    $(block.elem).data("chartTop").update();
   },
   size: { //update static widths in HTML as well
     height: 400,
@@ -78,10 +76,10 @@ module.exports =  {
   pageBlock: {
     html: `
       <select>
-      <option value="1">Single Letters</option>
-      <option value="2">Digraphs</option>
-      <option value="3">Trigraphs</option>
-      <option value="first">1st Letter</option>
+        <option value="1">Single Letters</option>
+        <option value="2">Digraphs</option>
+        <option value="3">Trigraphs</option>
+        <option value="first">1st Letter</option>
       </select>
       <span class="topHidden">
         <div class="canvasContainer">
@@ -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();
     }

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: "<input type='text' name='input'></input>",
     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");
       });
     }

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){

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

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");
+}

client/src/diagram/index.js

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

client/src/index.html

@@ -4,7 +4,9 @@
   </head>
   <body>
     <div id="header">
-      Header will go here
+      <a href="#" id="import">Open File</a>
+      <a href="#" id="export">Save</a>
+      <input type="file" id="importUpload"></input>
     </div>
     <div id="blocks">
     </div>

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");

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])
+})

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;

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

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

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();

client/src/styles.scss

@@ -9,6 +9,12 @@ body{
   flex-direction: column;
 }
 
+#header{
+  #importUpload{
+    display: none;
+  }
+}
+
 #blocks{
   display: flex;
   flex-direction: row;

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"
   }
 }