Fixed undo/redo

This commit is contained in:
Devine Lu Linvega 2018-02-06 19:34:45 +13:00
parent 4781eb8040
commit d119160773
9 changed files with 20 additions and 219 deletions

View File

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

View File

@ -6,8 +6,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.history = new History(); this.history = new History();
this.guide = new Guide(); this.guide = new Guide();
this.render = new Render(); this.render = new Render();
this.serializer = new Serializer();
this.project = new Project();
this.tool = new Tool(); this.tool = new Tool();
this.width = width; 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() this.save = function()
{ {
if(this.segments.length == 0){ return; }
this.scale = 1 this.scale = 1
this.draw(); 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; } if (fileName === undefined){ return; }
fs.writeFile(fileName+".svg", svg); fs.writeFile(fileName+".svg", svg);
fs.writeFile(fileName+'.png', dotgrid.render.buffer()); 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() 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) => { fs.readFile(paths[0], 'utf-8', (err, data) => {
if(err){ alert("An error ocurred reading the file :" + err.message); return; } 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(); 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(); var reader = new FileReader();
reader.onload = function(e){ 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(); dotgrid.draw();
}; };
reader.readAsText(file); 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; 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/html', svg);
e.clipboardData.setData('text/svg+xml', 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; return;
} }
this.serializer.deserialize(data); dotgrid.tool.import(data);
this.draw(); this.draw();
} }

View File

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

View File

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

View File

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

View File

@ -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 [];
}
}

View File

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

View File

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

View File

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