Fixed undo/redo
This commit is contained in:
parent
4781eb8040
commit
d119160773
@ -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"/>
|
||||
|
@ -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();
|
||||
}
|
||||
|
||||
|
@ -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; }
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
@ -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 [];
|
||||
}
|
||||
}
|
@ -1,5 +0,0 @@
|
||||
function Project()
|
||||
{
|
||||
this.layers = [];
|
||||
|
||||
}
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user