Progress on undo/redo

main.js

@@ -33,6 +33,8 @@ app.on('ready', () =>
 
   app.win.loadURL(`file://${__dirname}/sources/index.html`);
 
+  app.win.toggleDevTools();
+  
   app.win.on('closed', () => {
     win = null
     app.quit()

sources/index.html

@@ -13,6 +13,7 @@
     <script type="text/javascript" src="scripts/render.js"></script>
     <script type="text/javascript" src="scripts/serializer.js"></script>
     <script type="text/javascript" src="scripts/interface.js"></script>
+    <script type="text/javascript" src="scripts/history.js"></script>
     <link rel="stylesheet" type="text/css" href="links/reset.css"/>
     <link rel="stylesheet" type="text/css" href="links/fonts.css"/>
     <link rel="stylesheet" type="text/css" href="links/main.css"/>

sources/scripts/dotgrid.js

@@ -3,6 +3,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
   this.controller = new Controller();
   this.theme = new Theme();
   this.interface = new Interface();
+  this.history = new History();
 
   this.width = width;
   this.height = height;
@@ -49,7 +50,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
 
   this.path = document.createElementNS("http://www.w3.org/2000/svg", "path");
   this.segments = [];
-  this.scale = 1
+  this.scale = 1;
 
   this.install = function()
   {  
@@ -146,7 +147,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     this.controller.add("default","Edit","Copy",() => { document.execCommand('copy'); },"CmdOrCtrl+C");
     this.controller.add("default","Edit","Paste",() => { document.execCommand('paste'); },"CmdOrCtrl+V");
     this.controller.add("default","Edit","Undo",() => { dotgrid.undo(); },"CmdOrCtrl+Z");
-    this.controller.add("default","Edit","Delete",() => { dotgrid.undo(); },"Backspace");
+    this.controller.add("default","Edit","Redo",() => { dotgrid.redo(); },"CmdOrCtrl+Shift+Z");
+    this.controller.add("default","Edit","Delete",() => { dotgrid.delete(); },"Backspace");
     this.controller.add("default","Edit","Move Up",() => { dotgrid.mod_move(new Pos(0,-15)); },"Up");
     this.controller.add("default","Edit","Move Down",() => { dotgrid.mod_move(new Pos(0,15)); },"Down");
     this.controller.add("default","Edit","Move Left",() => { dotgrid.mod_move(new Pos(-15,0)); },"Left");
@@ -183,7 +185,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     window.addEventListener('drop', dotgrid.drag);
 
     dotgrid.set_size({width:300,height:300});
-    this.draw();
+    
+    this.new();
   }
 
   // FILE
@@ -191,6 +194,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
   this.new = function()
   {
     dotgrid.segments = [];
+    dotgrid.history.push(dotgrid.segments)
     dotgrid.draw();
   }
 
@@ -232,11 +236,49 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
   {
     if(from || to || end){
       dotgrid.reset();
-    }
-    else{
-      dotgrid.segments.pop();
-    }
       dotgrid.draw();
+      return;
+    }
+
+    this.segments = this.history.prev();
+    console.log(this.history.a)
+    this.draw();
+  }
+
+  this.redo = function()
+  {
+    this.segments = this.history.next();
+    console.log(this.history.a)
+    this.draw();    
+  }
+
+  this.delete = function()
+  {
+    if(from || to || end){
+      dotgrid.reset();
+      dotgrid.draw();
+      return;
+    }
+
+    this.segments.pop();
+    dotgrid.history.push(dotgrid.segments);
+    this.draw();    
+  }
+
+  this.delete_at = function(pos)
+  {
+    var segs = [];
+
+    for(id in this.segments){
+      var s = this.segments[id];
+      if(s.from && s.from.is_equal(pos)){ continue; }
+      if(s.to && s.to.is_equal(pos)){ continue; }
+      if(s.end && s.end.is_equal(pos)){ continue; }
+      segs.push(s);
+    }
+    this.segments = segs;
+    dotgrid.history.push(dotgrid.segments);
+    this.draw();
   }
 
   // STROKE
@@ -250,6 +292,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     end = end ? new Pos(end.x * -1,end.y).sub(dotgrid.offset) : null;
 
     dotgrid.segments.push(new Path_Line(from,to,end));
+    dotgrid.history.push(dotgrid.segments);
 
     dotgrid.reset();
     dotgrid.draw();
@@ -265,6 +308,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     end = end ? new Pos(end.x * -1,end.y).sub(dotgrid.offset) : null;
 
     dotgrid.segments.push(new Path_Arc(from,to,orientation,end));
+    dotgrid.history.push(dotgrid.segments);
 
     dotgrid.reset();
     dotgrid.draw();
@@ -280,6 +324,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     end = new Pos(end.x * -1,end.y).sub(dotgrid.offset)
 
     dotgrid.segments.push(new Path_Bezier(from,to,end));
+    dotgrid.history.push(dotgrid.segments);
 
     dotgrid.reset();
     dotgrid.draw();
@@ -292,6 +337,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     if(dotgrid.segments[dotgrid.segments.length-1].name == "close"){ return; }
 
     dotgrid.segments.push(new Path_Close());
+    dotgrid.history.push(dotgrid.segments);
 
     dotgrid.reset();
     dotgrid.draw();
@@ -357,7 +403,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
 
     dotgrid.translation = null;
 
-    this.add_point(pos)
+    this.add_point(pos);
     this.draw();
   }
 
@@ -414,6 +460,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
 
     dotgrid.translation = null;
     dotgrid.reset();
+    dotgrid.history.push(dotgrid.segments);
 
     dotgrid.draw();
   }
@@ -469,21 +516,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     cursor_end.style.top = Math.floor(end.y*this.scale + this.grid_height);
   }
 
-  this.delete_at = function(pos)
-  {
-    var segs = [];
-
-    for(id in this.segments){
-      var s = this.segments[id];
-      if(s.from && s.from.is_equal(pos)){ continue; }
-      if(s.to && s.to.is_equal(pos)){ continue; }
-      if(s.end && s.end.is_equal(pos)){ continue; }
-      segs.push(s);
-    }
-    this.segments = segs;
-    this.draw();
-  }
-
   this.mod_thickness = function(mod,step = false)
   {
     if(!mod){ mod = 1; this.thickness = this.thickness > 30 ? 1 : this.thickness }

sources/scripts/history.js

@@ -0,0 +1,40 @@
+function History()
+{
+  this.index = 0;
+  this.a = [];
+
+  this.push = function(data)
+  {
+    var d = data.slice(0);
+    if(this.index != this.a.length){
+      this.a = this.a.slice(0,this.index);
+    }
+    this.a.push(d);
+    this.index = this.a.length;
+    console.log(`history: ${this.index}/${this.a.length}`)
+  }
+
+  this.pop = function()
+  {
+    console.log(`history: ${this.index}/${this.a.length}`)
+    return this.a.pop();
+  }
+
+  this.prev = function()
+  {
+    this.index = clamp(this.index-1,0,this.a.length-1);
+    console.log(`history: ${this.index}/${this.a.length}`)
+    return this.a[this.index].slice(0);
+  }
+
+  this.next = function()
+  {
+    this.index = clamp(this.index+1,0,this.a.length-1);
+    console.log(`history: ${this.index}/${this.a.length}`)
+    return this.a[this.index].slice(0);
+  }
+
+  function copy(data){ return JSON.parse(JSON.stringify(data)); }
+
+  function clamp(v, min, max) { return v < min ? min : v > max ? max : v; }
+}