Implemented snapshots
This commit is contained in:
		
							
								
								
									
										12
									
								
								src/diagram/addSnapshot.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										12
									
								
								src/diagram/addSnapshot.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,12 @@
 | 
			
		||||
var diagram = require("./index.js");
 | 
			
		||||
var events = require("../events.js");
 | 
			
		||||
 | 
			
		||||
module.exports = function(snapshotName){
 | 
			
		||||
  var state = JSON.parse(require("./export.js")()).state;
 | 
			
		||||
  diagram.snapshots.push({
 | 
			
		||||
    date: new Date().getTime(),
 | 
			
		||||
    name: snapshotName,
 | 
			
		||||
    state: state
 | 
			
		||||
  });
 | 
			
		||||
  events.emit("snapshotsChanged");
 | 
			
		||||
}
 | 
			
		||||
@@ -4,9 +4,5 @@ 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");
 | 
			
		||||
  require("./updateState.js")();
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										11
									
								
								src/diagram/updateState.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										11
									
								
								src/diagram/updateState.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,11 @@
 | 
			
		||||
var diagram = require("./index.js");
 | 
			
		||||
var events = require("../events.js");
 | 
			
		||||
var $ = require("jquery");
 | 
			
		||||
 | 
			
		||||
module.exports = function(){
 | 
			
		||||
  $("#workspace>*").remove(); //remove old lines + block
 | 
			
		||||
  for(var block of diagram.state){ //add blocks to page
 | 
			
		||||
    require("../pageInteraction/addBlockToPage.js")(block);
 | 
			
		||||
  }
 | 
			
		||||
  events.emit("diagramImport"); //trigger line re-draw
 | 
			
		||||
}
 | 
			
		||||
@@ -1,11 +1,16 @@
 | 
			
		||||
var subscriptions = {};
 | 
			
		||||
 | 
			
		||||
module.exports = {
 | 
			
		||||
  subscribe: function(event, callback){
 | 
			
		||||
    if(!subscriptions[event]){
 | 
			
		||||
      subscriptions[event] = [];
 | 
			
		||||
  subscribe: function(events, callback){
 | 
			
		||||
    if(!Array.isArray(events)){ //if not an array, make it a single item array
 | 
			
		||||
      events = [events];
 | 
			
		||||
    }
 | 
			
		||||
    for(var event of events){
 | 
			
		||||
      if(!subscriptions[event]){
 | 
			
		||||
        subscriptions[event] = [];
 | 
			
		||||
      }
 | 
			
		||||
      subscriptions[event].push(callback);
 | 
			
		||||
    }
 | 
			
		||||
    subscriptions[event].push(callback);
 | 
			
		||||
  },
 | 
			
		||||
  emit: function(event, data){
 | 
			
		||||
    if(subscriptions[event]){
 | 
			
		||||
 
 | 
			
		||||
@@ -3,12 +3,18 @@
 | 
			
		||||
    <title>Cryptography Assistant</title>
 | 
			
		||||
  </head>
 | 
			
		||||
  <body>
 | 
			
		||||
    <div id="header">
 | 
			
		||||
      <a href="#" id="projectName">New Diagram</a>
 | 
			
		||||
      <a href="#" id="import">Open File</a>
 | 
			
		||||
      <a href="#" id="export">Save</a>
 | 
			
		||||
      <input type="file" id="importUpload"></input>
 | 
			
		||||
    </div>
 | 
			
		||||
    <ul id="header">
 | 
			
		||||
      <li><a href="#" id="projectName">New Diagram</a></li>
 | 
			
		||||
      <li><a href="#" id="import">Open File</a></li>
 | 
			
		||||
      <li><a href="#" id="export">Save</a></li>
 | 
			
		||||
      <li>
 | 
			
		||||
        <a href="#" id="snapshotsLink">Snapshots</a>
 | 
			
		||||
        <ul id="snapshots">
 | 
			
		||||
          <li><a href="#" id="addSnapshot">Add Snapshot</a></li>
 | 
			
		||||
        </ul>
 | 
			
		||||
      </li>
 | 
			
		||||
    </ul>
 | 
			
		||||
    <input type="file" id="importUpload"></input>
 | 
			
		||||
    <div id="blocks">
 | 
			
		||||
    </div>
 | 
			
		||||
    <div id="workspace">
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										34
									
								
								src/menu.js
									
									
									
									
									
								
							
							
						
						
									
										34
									
								
								src/menu.js
									
									
									
									
									
								
							@@ -2,18 +2,18 @@ var $ = require("jquery");
 | 
			
		||||
var events = require("./events.js");
 | 
			
		||||
var diagram = require("./diagram");
 | 
			
		||||
 | 
			
		||||
$("#header>a#export").click(function(){
 | 
			
		||||
$("#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 a#import").click(function(){
 | 
			
		||||
  $("#importUpload").click();
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
$("#header>#importUpload").change(function(){
 | 
			
		||||
$("#importUpload").change(function(){
 | 
			
		||||
  var reader = new FileReader();
 | 
			
		||||
  reader.onload = function(){
 | 
			
		||||
    require("./diagram/import.js")(reader.result);
 | 
			
		||||
@@ -32,3 +32,29 @@ $("#header>a#projectName").click(function(){
 | 
			
		||||
events.subscribe("diagramImport", function(){
 | 
			
		||||
  $("#header>a#projectName").html(diagram.name);
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
$("#header a#addSnapshot").click(function(){
 | 
			
		||||
  var name = prompt("Please enter a name for the snapshot");
 | 
			
		||||
  require("./diagram/addSnapshot.js")(name);
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
events.subscribe(["snapshotsChanged", "diagramImport"], function(){
 | 
			
		||||
  $("#snapshots>.snapshot").remove();
 | 
			
		||||
  diagram.snapshots.sort((a, b)=>(b.date - a.date));
 | 
			
		||||
  for(var i in diagram.snapshots){
 | 
			
		||||
    var date = new Date(diagram.snapshots[i].date);
 | 
			
		||||
    $("#snapshots").append(
 | 
			
		||||
      `<li class="snapshot"><a href="#" data-i="${i}">${date.getDay()}/${date.getMonth()}/${date.getFullYear()} ${date.getHours()}:${date.getMinutes()} - ${diagram.snapshots[i].name}</a></li>`
 | 
			
		||||
    );
 | 
			
		||||
  }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
$("#header #snapshots").on("click", ".snapshot>a", function(){
 | 
			
		||||
  var snapshot = diagram.snapshots[parseInt($(this).data("i"))]
 | 
			
		||||
  var newSnapshotName = prompt("Reverting to this snapshot will cause you to lose your current work. If you would like to make a snapshot of your current workspace, please enter a name for it:");
 | 
			
		||||
  if(newSnapshotName){
 | 
			
		||||
    require("./diagram/addSnapshot.js")(newSnapshotName);
 | 
			
		||||
  }
 | 
			
		||||
  diagram.state = JSON.parse(JSON.stringify(snapshot.state));
 | 
			
		||||
  require("./diagram/updateState.js")();
 | 
			
		||||
});
 | 
			
		||||
 
 | 
			
		||||
@@ -9,10 +9,8 @@ body{
 | 
			
		||||
  flex-direction: column;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
#header{
 | 
			
		||||
  #importUpload{
 | 
			
		||||
    display: none;
 | 
			
		||||
  }
 | 
			
		||||
#importUpload{
 | 
			
		||||
  display: none;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
#blocks{
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user