Fixed undo/redo

sources/index.html

@@ -5,15 +5,10 @@
     <script type="text/javascript" src="scripts/lib/history.js"></script>
 
     <script type="text/javascript" src="scripts/pos.js"></script>
-    <script type="text/javascript" src="scripts/path_arc.js"></script>
-    <script type="text/javascript" src="scripts/path_bezier.js"></script>
-    <script type="text/javascript" src="scripts/path_close.js"></script>
     <script type="text/javascript" src="scripts/dotgrid.js"></script>
     <script type="text/javascript" src="scripts/guide.js"></script>
     <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/project.js"></script>
     <script type="text/javascript" src="scripts/tool.js"></script>
     <link rel="stylesheet" type="text/css" href="links/reset.css"/>
     <link rel="stylesheet" type="text/css" href="links/fonts.css"/>

sources/scripts/dotgrid.js

@@ -6,8 +6,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
   this.history = new History();
   this.guide = new Guide();
   this.render = new Render();
-  this.serializer = new Serializer();
-  this.project = new Project();
   this.tool = new Tool();
 
   this.width = width;
@@ -177,7 +175,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
 
   this.save = function()
   {
-    if(this.segments.length == 0){ return; }
     this.scale = 1
     this.draw();
 
@@ -189,7 +186,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
       if (fileName === undefined){ return; }
       fs.writeFile(fileName+".svg", svg);
       fs.writeFile(fileName+'.png', dotgrid.render.buffer());
-      fs.writeFile(fileName+'.dot', JSON.stringify(dotgrid.serializer.serialize()));
+      fs.writeFile(fileName+'.dot', dotgrid.tool.export());
       dotgrid.draw()
     });
   }
@@ -202,7 +199,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
 
     fs.readFile(paths[0], 'utf-8', (err, data) => {
       if(err){ alert("An error ocurred reading the file :" + err.message); return; }
-      dotgrid.serializer.deserialize(JSON.parse(data.toString().trim()));
+      dotgrid.tool.import(JSON.parse(data.toString().trim()));
       dotgrid.draw();
     });
   }
@@ -439,7 +436,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
 
     var reader = new FileReader();
     reader.onload = function(e){
-      dotgrid.serializer.deserialize(JSON.parse(e.target.result.toString().trim()));
+      dotgrid.tool.import(JSON.parse(e.target.result.toString().trim()));
       dotgrid.draw();
     };
     reader.readAsText(file);
@@ -456,7 +453,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
 
     var svg = dotgrid.svg_el.outerHTML;
 
-    e.clipboardData.setData('text/plain', JSON.stringify(dotgrid.serializer.serialize()));
+    e.clipboardData.setData('text/plain', dotgrid.tool.export());
     e.clipboardData.setData('text/html', svg);
     e.clipboardData.setData('text/svg+xml', svg);
   }
@@ -471,7 +468,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
       return;
     }
 
-    this.serializer.deserialize(data);
+    dotgrid.tool.import(data);
     this.draw();
   }
 

sources/scripts/lib/history.js

@@ -17,6 +17,10 @@ function History()
     this.index = this.a.length;
     this.a = this.a.slice(0,this.index);
     this.a.push(copy(data));
+
+    if(this.a.length > 20){
+      this.a.shift();
+    }
   }
 
   this.fork = function()
@@ -41,6 +45,6 @@ function History()
     return copy(this.a[this.index]);
   }
 
-  function copy(data){ return data ? data.slice(0) : []; }
+  function copy(data){ return data ? JSON.parse(JSON.stringify(data)) : []; }
   function clamp(v, min, max) { return v < min ? min : v > max ? max : v; }
 }

sources/scripts/path_arc.js

@@ -1,48 +0,0 @@
-function Path_Arc(from,to,orientation,end)
-{
-  this.__serialized_name__ = "Path_Arc";
-  this.name = "arc";
-
-  this.from = from;
-  this.to = to;
-  this.orientation = orientation;
-  this.end = end;
-
-  this.to_segment = function(prev)
-  {
-    var html = ""
-
-    if(!prev || (!prev.to && !prev.end)){
-      html += "M"+this.from.scale(dotgrid.scale)+" ";  
-    }
-    else if(prev){
-      if(prev.end){
-        if(!prev.end.is_equal(this.from)){
-          html += "M"+this.from.scale(dotgrid.scale)+" ";  
-        }         
-      }
-      else if(prev.to){
-        if(!prev.to.is_equal(this.from)){
-          html += "M"+this.from.scale(dotgrid.scale)+" "; 
-        }
-      }
-    }
-
-    html += "A"+this.to.sub(this.from).scale(dotgrid.scale)+" 0 "+orientation+" "+this.to.scale(dotgrid.scale)+" ";
-
-    if(this.end){
-      html += "A"+this.end.sub(this.to).scale(dotgrid.scale)+" 0 "+orientation+" "+this.end.scale(dotgrid.scale)+" ";
-    }
-
-    return html 
-  }
-
-  this.handles = function()
-  {
-    var a = [];
-    if(this.from){ a.push(this.from); }
-    if(this.to){ a.push(this.to); }
-    if(this.end){ a.push(this.end); }
-    return a;
-  }
-}

sources/scripts/path_bezier.js

@@ -1,42 +0,0 @@
-function Path_Bezier(from,to,end)
-{
-  this.__serialized_name__ = "Path_Bezier";
-  this.name = "bezier";
-  
-  this.from = from;
-  this.to = to;
-  this.end = end;
-
-  this.to_segment = function(prev)
-  {
-    var html = ""
-    if(!this.end){ return ""; }
-
-    if(!prev || (!prev.to && !prev.end)){
-      html += "M"+this.from.scale(dotgrid.scale)+" ";  
-    }
-    else if(prev){
-      if(prev.end){
-        if(!prev.end.is_equal(this.from)){
-          html += "M"+this.from.scale(dotgrid.scale)+" ";  
-        }         
-      }
-      else if(prev.to){
-        if(!prev.to.is_equal(this.from)){
-          html += "M"+this.from.scale(dotgrid.scale)+" "; 
-        }
-      }
-    }
-
-    return html += "Q"+this.to.scale(dotgrid.scale)+" "+this.end.scale(dotgrid.scale)+" "
-  }
-
-  this.handles = function()
-  {
-    var a = [];
-    if(this.from){ a.push(this.from); }
-    if(this.to){ a.push(this.to); }
-    if(this.end){ a.push(this.end); }
-    return a;
-  }
-}

sources/scripts/path_close.js

@@ -1,15 +0,0 @@
-function Path_Close()
-{
-  this.__type_ = "Path_Close";
-  this.name = "close";
-  
-  this.to_segment = function(prev)
-  {
-    return "Z ";
-  }
-
-  this.handles = function()
-  {
-    return [];
-  }
-}

sources/scripts/project.js

@@ -1,5 +0,0 @@
-function Project()
-{
-  this.layers = [];
-  
-}

sources/scripts/serializer.js

@@ -1,95 +0,0 @@
-function Serializer()
-{
-  var __data_segments__ = 0;
-  var __data_thickness__ = 1;
-  var __data_linecap__ = 2;
-  var __data_color__ = 3;
-  var __data_mirror_index__ = 4;
-  var __data_fill__ = 5;
-
-  this.serialize = function()
-  {
-    // Store the data in an array.
-    // This keeps away the property names, which just clutter up everything.
-    var data = [
-      [],
-      dotgrid.thickness,
-      dotgrid.linecap,
-      dotgrid.color,
-      dotgrid.mirror_index,
-      dotgrid.fill
-    ];
-
-    for (var id in dotgrid.segments) {
-      data[__data_segments__][id] = this.serialize_segment(dotgrid.segments[id]);
-    }
-
-    return { dotgrid: data };
-  }
-
-  this.deserialize = function(data)
-  {
-    data = data.dotgrid;
-    if (!data)
-      return;
-    
-    if (data[__data_segments__]) {
-      for (var id in data[__data_segments__]) {
-        data[__data_segments__][id] = this.deserialize_segment(data[__data_segments__][id]);
-      }
-    }
-
-    var d = (index, fallback) => index < data.length ? data[index] : fallback;
-
-    dotgrid.segments = d(__data_segments__, []);
-    dotgrid.thickness = d(__data_thickness__, 10);
-    dotgrid.linecap = d(__data_linecap__, "square");
-    dotgrid.color = d(__data_color__, "#000000");
-    dotgrid.mirror_index = d(__data_mirror_index__, 0);
-    dotgrid.fill = d(__data_fill__, false);
-  }
-
-  this.serialize_segment = function(s) {
-    // Return falsy values (null, 0, false, "", ...) directly.
-    if (!s) return s;
-
-    var data = [";"];
-    // Get rid of non-serializable stuff (i.e. functions).
-    s = JSON.parse(JSON.stringify(s));
-    // Store everything in arrays instead of objects, saving characters.
-    for (var id in s) {
-      // Skip the non-serialzied path name.
-      if (s.__serialized_name__ && id === "name")
-        continue;
-      
-        var prop = s[id];
-
-      if (typeof(prop) === "object") {
-        prop = this.serialize_segment(prop);
-      }
-
-      data.push(prop);
-    }
-    return data;
-  }
-
-  this.deserialize_segment = function(data) {
-    var name = data.splice(0, 2)[1];
-
-    // Unserialize anything that's serialized.
-    for (var id in data) {
-      var prop = data[id];
-
-      if (prop && typeof(prop) === "object" && prop.length && prop[0] === ";") {
-        prop = this.deserialize_segment(prop);
-      }
-
-      data[id] = prop;
-    }
-
-    var s = {};
-    window[name].apply(s, data);
-    return s;
-  }
-
-}

sources/scripts/tool.js

@@ -156,4 +156,14 @@ function Tool()
     this.layers = dotgrid.history.next();
     dotgrid.draw();    
   }
+
+  this.export = function()
+  {
+    return JSON.stringify(this.layers, null, 2);
+  }
+
+  this.import = function(layers)
+  {
+    this.layers = layers;
+  }
 }