From 698644c3a767a6eb3a339f4eac23f26ce6b00137 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 31 Jan 2018 22:10:48 +1300 Subject: [PATCH] Progress on undo/redo --- main.js | 2 + sources/index.html | 1 + sources/scripts/dotgrid.js | 76 +++++++++++++++++++++++++++----------- sources/scripts/history.js | 40 ++++++++++++++++++++ 4 files changed, 97 insertions(+), 22 deletions(-) create mode 100644 sources/scripts/history.js diff --git a/main.js b/main.js index 00eab11..8be41ae 100644 --- a/main.js +++ b/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() diff --git a/sources/index.html b/sources/index.html index 4097e4f..8dfff92 100644 --- a/sources/index.html +++ b/sources/index.html @@ -13,6 +13,7 @@ + diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js index 3212ffa..ef73b9e 100644 --- a/sources/scripts/dotgrid.js +++ b/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(); + dotgrid.draw(); + return; } - else{ - dotgrid.segments.pop(); + + 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; } - dotgrid.draw(); + + 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 } diff --git a/sources/scripts/history.js b/sources/scripts/history.js new file mode 100644 index 0000000..91bc1a1 --- /dev/null +++ b/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; } +} \ No newline at end of file