Implemented undo/redo
This commit is contained in:
parent
698644c3a7
commit
cfc49dc435
@ -10,6 +10,7 @@
|
|||||||
- Copy: `CmdOrCtrl+C`
|
- Copy: `CmdOrCtrl+C`
|
||||||
- Paste: `CmdOrCtrl+V`
|
- Paste: `CmdOrCtrl+V`
|
||||||
- Undo: `CmdOrCtrl+Z`
|
- Undo: `CmdOrCtrl+Z`
|
||||||
|
- Redo: `CmdOrCtrl+Shift+Z`
|
||||||
- Delete: `Backspace`
|
- Delete: `Backspace`
|
||||||
- Move Up: `Up`
|
- Move Up: `Up`
|
||||||
- Move Down: `Down`
|
- Move Down: `Down`
|
||||||
|
@ -22,6 +22,7 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved
|
|||||||
- Copy: `CmdOrCtrl+C`
|
- Copy: `CmdOrCtrl+C`
|
||||||
- Paste: `CmdOrCtrl+V`
|
- Paste: `CmdOrCtrl+V`
|
||||||
- Undo: `CmdOrCtrl+Z`
|
- Undo: `CmdOrCtrl+Z`
|
||||||
|
- Redo: `CmdOrCtrl+Shift+Z`
|
||||||
- Delete: `Backspace`
|
- Delete: `Backspace`
|
||||||
- Move Up: `Up`
|
- Move Up: `Up`
|
||||||
- Move Down: `Down`
|
- Move Down: `Down`
|
||||||
@ -51,7 +52,7 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved
|
|||||||
- Control Points: `J`
|
- Control Points: `J`
|
||||||
- Expert Mode: `:`
|
- Expert Mode: `:`
|
||||||
|
|
||||||
<img src='https://cdn.rawgit.com/hundredrabbits/Dotgrid/master/LAYOUT.svg?v=2' width="600"/>
|
<img src='https://cdn.rawgit.com/hundredrabbits/Dotgrid/master/LAYOUT.svg?v=3' width="600"/>
|
||||||
|
|
||||||
## Extras
|
## Extras
|
||||||
|
|
||||||
|
2
main.js
2
main.js
@ -33,8 +33,6 @@ app.on('ready', () =>
|
|||||||
|
|
||||||
app.win.loadURL(`file://${__dirname}/sources/index.html`);
|
app.win.loadURL(`file://${__dirname}/sources/index.html`);
|
||||||
|
|
||||||
app.win.toggleDevTools();
|
|
||||||
|
|
||||||
app.win.on('closed', () => {
|
app.win.on('closed', () => {
|
||||||
win = null
|
win = null
|
||||||
app.quit()
|
app.quit()
|
||||||
|
@ -2,6 +2,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<script type="text/javascript" src="scripts/lib/theme.js"></script>
|
<script type="text/javascript" src="scripts/lib/theme.js"></script>
|
||||||
<script type="text/javascript" src="scripts/lib/controller.js"></script>
|
<script type="text/javascript" src="scripts/lib/controller.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_line.js"></script>
|
<script type="text/javascript" src="scripts/path_line.js"></script>
|
||||||
@ -13,7 +14,6 @@
|
|||||||
<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/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/history.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"/>
|
||||||
<link rel="stylesheet" type="text/css" href="links/main.css"/>
|
<link rel="stylesheet" type="text/css" href="links/main.css"/>
|
||||||
|
@ -241,14 +241,12 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.segments = this.history.prev();
|
this.segments = this.history.prev();
|
||||||
console.log(this.history.a)
|
|
||||||
this.draw();
|
this.draw();
|
||||||
}
|
}
|
||||||
|
|
||||||
this.redo = function()
|
this.redo = function()
|
||||||
{
|
{
|
||||||
this.segments = this.history.next();
|
this.segments = this.history.next();
|
||||||
console.log(this.history.a)
|
|
||||||
this.draw();
|
this.draw();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -281,6 +279,22 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
|
|||||||
this.draw();
|
this.draw();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.translate = function(t)
|
||||||
|
{
|
||||||
|
for(id in dotgrid.segments){
|
||||||
|
var segment = dotgrid.segments[id];
|
||||||
|
if(segment.from && segment.from.is_equal(dotgrid.translation.from)){ segment.from = new Pos(-dotgrid.translation.to.x,dotgrid.translation.to.y)}
|
||||||
|
if(segment.to && segment.to.is_equal(dotgrid.translation.from)){ segment.to = new Pos(-dotgrid.translation.to.x,dotgrid.translation.to.y)}
|
||||||
|
if(segment.end && segment.end.is_equal(dotgrid.translation.from)){ segment.end = new Pos(-dotgrid.translation.to.x,dotgrid.translation.to.y)}
|
||||||
|
}
|
||||||
|
|
||||||
|
dotgrid.history.push(dotgrid.segments);
|
||||||
|
dotgrid.translation = null;
|
||||||
|
dotgrid.reset();
|
||||||
|
|
||||||
|
dotgrid.draw();
|
||||||
|
}
|
||||||
|
|
||||||
// STROKE
|
// STROKE
|
||||||
|
|
||||||
this.draw_line = function()
|
this.draw_line = function()
|
||||||
@ -449,22 +463,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.translate = function(t)
|
|
||||||
{
|
|
||||||
for(id in dotgrid.segments){
|
|
||||||
var segment = dotgrid.segments[id];
|
|
||||||
if(segment.from && segment.from.is_equal(dotgrid.translation.from)){ segment.from = new Pos(-dotgrid.translation.to.x,dotgrid.translation.to.y)}
|
|
||||||
if(segment.to && segment.to.is_equal(dotgrid.translation.from)){ segment.to = new Pos(-dotgrid.translation.to.x,dotgrid.translation.to.y)}
|
|
||||||
if(segment.end && segment.end.is_equal(dotgrid.translation.from)){ segment.end = new Pos(-dotgrid.translation.to.x,dotgrid.translation.to.y)}
|
|
||||||
}
|
|
||||||
|
|
||||||
dotgrid.translation = null;
|
|
||||||
dotgrid.reset();
|
|
||||||
dotgrid.history.push(dotgrid.segments);
|
|
||||||
|
|
||||||
dotgrid.draw();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.preview = function(operation)
|
this.preview = function(operation)
|
||||||
{
|
{
|
||||||
if(from && to && operation == "line"){
|
if(from && to && operation == "line"){
|
||||||
|
@ -1,40 +0,0 @@
|
|||||||
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; }
|
|
||||||
}
|
|
40
sources/scripts/lib/history.js
Normal file
40
sources/scripts/lib/history.js
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
function History()
|
||||||
|
{
|
||||||
|
this.index = 0;
|
||||||
|
this.a = [];
|
||||||
|
|
||||||
|
this.push = function(data)
|
||||||
|
{
|
||||||
|
if(this.index < this.a.length-1){
|
||||||
|
this.fork();
|
||||||
|
}
|
||||||
|
this.index = this.a.length;
|
||||||
|
this.a = this.a.slice(0,this.index);
|
||||||
|
this.a.push(copy(data));
|
||||||
|
}
|
||||||
|
|
||||||
|
this.fork = function()
|
||||||
|
{
|
||||||
|
this.a = this.a.slice(0,this.index+1);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.pop = function()
|
||||||
|
{
|
||||||
|
return this.a.pop();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.prev = function()
|
||||||
|
{
|
||||||
|
this.index = clamp(this.index-1,0,this.a.length-1);
|
||||||
|
return copy(this.a[this.index]);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.next = function()
|
||||||
|
{
|
||||||
|
this.index = clamp(this.index+1,0,this.a.length-1);
|
||||||
|
return copy(this.a[this.index]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function copy(data){ return data.slice(0); }
|
||||||
|
function clamp(v, min, max) { return v < min ? min : v > max ? max : v; }
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user