Permalink
Browse files

ajout undo redo

  • Loading branch information...
Daome
Daome committed Feb 19, 2012
1 parent e51d69f commit 7cf0f7ad8d3a1ff5ae60ccb871acc24bdbf6018f
Showing with 306 additions and 136 deletions.
  1. +2 −0 css/index.css
  2. BIN img/emptycell.gif
  3. +110 −38 js/faviconbuilder.coffee
  4. +194 −98 js/faviconbuilder.js
View
@@ -53,6 +53,8 @@ span.tip{
margin-left:auto;
margin-right:auto;
width:90%;
+}
+#app{
text-align: center;
}
.nav{
View
Binary file not shown.
View
@@ -19,6 +19,10 @@
console?= #console mock object
log:->
+Array.prototype.split = (index)->
+ if index < this.length
+ q = this.length-index
+ return this.splice(index,q)
# namespaces #
App = {
Views:{}
@@ -93,8 +97,7 @@ class App.Utils.DefaultMenu
{label:"Restore from local",action:"restorefromlocal",title:"Restore previously saved icon.",datas:{}}
{label:"thickbox test",action:"showthickbox",title:"Show thick box , just a javascript CSS test , no special functionalities"}
]
-
-###
+
class App.Utils.Iterator extends Array
constructor:->
@push i for i in arguments
@@ -113,9 +116,9 @@ class App.Utils.Iterator extends Array
true
else
false
-###
+###
App.Utils.Iterator = do->
Iterator = ->
array = Array.apply(this,arguments)
@@ -137,6 +140,34 @@ App.Utils.Iterator = do->
return Iterator
+
+App.Utils.Iterator = do ->
+ Iterator = ->
+ #Array.apply(this,arguments)
+ this.push(i) for i in arguments
+ iter = 0
+ @reset = ->
+ iter = 0
+ @getIndex = ->
+ iter
+ @getValue= ->
+ this[iter]
+ @next= ->
+ this[++iter] if iter < this.length-1
+ @previous= ->
+ this[--iter] if iter>0
+ @hasNext= ->
+ return if this[iter+1] then true else return false
+ @hasPrevious= ->
+ return if this[iter-1]then true else return false
+ return this
+
+ Iterator.prototype = new Array()
+ Iterator.prototype.constructor = Array
+ return Iterator
+###
+
+
### MODELS ###
class App.Models.Color
constructor:(@title="Eraser",@color=null,@alpha=1)->
@@ -160,7 +191,7 @@ class App.Models.Grid
for i in [0...@rows]
@grid[i] ?= []
for j in [0... @columns]
- console.log @grid[i][j]
+ #console.log @grid[i][j]
@grid[i][j]?= new App.Models.Cell()
fillCell:(params)->
@grid[params.row][params.column].color = params.color.color
@@ -179,7 +210,7 @@ class App.Models.ColorSelector
constructor:(@colors= new App.Utils.DefaultColors().colors)->
class App.Models.CanvasPreview
- constructor:(@targetId,@gridModel,@factor=4)->
+ constructor:(@targetId,@applicationModel,@factor=4)->
class App.Models.FactorSelector
constructor:(@targetId,@factor,@selectors=[1,2,3,4])->
@@ -191,24 +222,28 @@ class App.Models.Menu
removeItem:(item)->
@items.splice(@items.indexOf(item),1)
+class App.Models.History
+ constructor:(@iterator = new App.Utils.Iterator())->
+
### VIEWS ###
class App.Views.Cell
class App.Views.Grid
- constructor:(@divTargetId,@gridModel=new App.Models.Grid(),@cellStyle="cell",@emptyCellStyle="emptyCell",@pen={})->
+ constructor:(@divTargetId,@applicationModel,@cellStyle="cell",@emptyCellStyle="emptyCell",@pen={})->
@drawMode = false
@eventDispatcher = new App.Utils.EventDispatcher(this)
@eventDispatcher.addListener("drawmodechange",@setDrawMode)
@divTargetId.classes = @divTargetId.className
render:->
+ gridModel = @applicationModel.gridModel
@divTargetId.innerHTML = ""
- @divTargetId.className = " #{@divTargetId.classes } _#{@gridModel.columns}"
+ @divTargetId.className = " #{@divTargetId.classes } _#{gridModel.columns}"
@el = ""
- for row in [0...@gridModel.rows]
- for column in [0...@gridModel.columns]
+ for row in [0...gridModel.rows]
+ for column in [0...gridModel.columns]
element = " <div name='cell' "
- if @gridModel.grid[row][column].color != null and @gridModel.grid[row][column].color != ""
- element+= " style='background-color:#{@gridModel.grid[row][column].color}' "
+ if gridModel.grid[row][column].color != null and gridModel.grid[row][column].color != ""
+ element+= " style='background-color:#{gridModel.grid[row][column].color}' "
else
element+= " class='#{@emptyCellStyle}' "
element+= " data-row='#{row}' data-column='#{column}' "
@@ -218,13 +253,15 @@ class App.Views.Grid
@divTargetId.onmouseup =(e)=>
@drawMode = false
@eventDispatcher.dispatch(new App.Utils.Event("renderpreview"),{})
+ @eventDispatcher.dispatch(new App.Utils.Event("pushinhistory"),{})
@divTargetId.onmousemove = @divTargetId.onmousedown = (e)=>
if e.type == "mousedown" then @drawMode = true
if e.target.getAttribute("name")=="cell" and @drawMode == true
@eventDispatcher.dispatch(new App.Utils.Event("clickcell"),{element:e.target,tool:"pen",width:2,color:@pen.color,row:e.target.getAttribute("data-row"),column:e.target.getAttribute("data-column")})
return false
return this
fillCell:(e)-> # speed up the grid rendering when filling one cell
+ console.log "fillCell",e
color = e.datas.color.color
if ["",undefined].indexOf(color) < 0
e.datas.element.style.backgroundColor = color
@@ -234,6 +271,7 @@ class App.Views.Grid
e.datas.element.className += " #{@emptyCellStyle}"
+
setDrawMode:(event)=>
@drawMode = event.datas
setPenColor:(color)=>
@@ -282,7 +320,7 @@ class App.Views.Title
e.currentTarget.style.border = ""
@model.value = if e.currentTarget.innerText.trim() != "" then e.currentTarget.innerText.trim() else @model.value
@eventDispatcher.dispatch(new App.Utils.Event("titlechanged"),@model.value)
- return false
+
@model.onkeypress
return this
@@ -312,24 +350,25 @@ class App.Views.ColorSelector
class App.Views.CanvasPreview
constructor:(@model)->
render:(localFactor)->
+ gridModel = @model.applicationModel.gridModel
localFactor?=@model.factor
@model.targetId.innerHTML=""
canvas = document.createElement("canvas")
- canvas.setAttribute("width",@model.factor*@model.gridModel.rows)
- canvas.setAttribute("height",@model.factor*@model.gridModel.columns)
+ canvas.setAttribute("width",@model.factor*gridModel.rows)
+ canvas.setAttribute("height",@model.factor*gridModel.columns)
@model.targetId.appendChild(canvas)
ctx = canvas.getContext("2d")
pointWidth = pointHeight = @model.factor
- for i in [0...@model.gridModel.rows]
- for j in [0...@model.gridModel.columns]
+ for i in [0...gridModel.rows]
+ for j in [0...gridModel.columns]
x = j*@model.factor
y = i*@model.factor
- if @model.gridModel.grid[i][j].color==null or @model.gridModel.grid[i][j].color==""
+ if gridModel.grid[i][j].color==null or gridModel.grid[i][j].color==""
ctx.fillStyle = "#FFFFFF"
ctx.globalAlpha = 0
else
- ctx.fillStyle = @model.gridModel.grid[i][j].color
- ctx.globalAlpha = @model.gridModel.grid[i][j].alpha
+ ctx.fillStyle = gridModel.grid[i][j].color
+ ctx.globalAlpha = gridModel.grid[i][j].alpha
ctx.fillRect(x,y,@model.factor,@model.factor)
@el=@model.targetId.innerHTML
@@ -380,7 +419,7 @@ class App.Controllers.Application
### MAIN ###
class Main
constructor:->
- version = 0.1
+ @version = 0.1
@thickbox = document.getElementById("thickbox")
$target = document.getElementById("target")
$canvasPreview = document.getElementById("canvasPreview")
@@ -392,27 +431,26 @@ class Main
defaultColor = "#000000"
### MODELS ###
@applicationModel = new App.Models.Application()
+ @historyModel = new App.Models.History()
@colorSelectorModel = new App.Models.ColorSelector()
- @gridModel = new App.Models.Grid(16,16,0.1,"new grid")
+ @applicationModel.gridModel = new App.Models.Grid(16,16,0.1,"new grid")
@titleModel = new App.Models.Title("new grid",$title)
- @canvasPreviewModel = new App.Models.CanvasPreview($canvasPreview,@gridModel)
+ @canvasPreviewModel = new App.Models.CanvasPreview($canvasPreview,@applicationModel)
@factorSelectorModel = new App.Models.FactorSelector($factorSelector,@canvasPreviewModel.factor)
@menuModel = new App.Models.Menu(new App.Utils.DefaultMenu().items,$menu)
+ @applicationModel.historyModel = @historyModel
@applicationModel.colorSelectorModel = @colorSelectorModel
- @applicationModel.gridModel = @gridModel
@applicationModel.titleModel = @titleModel
@applicationModel.canvasPreviewModel = @canvasPreviewModel
@applicationModel.factorSelectorModel = @factorSelectorModel
@applicationModel.menuModel = @menuModel
- #App.Models.Application.favIconGridModel = @gridModel
- ### CONTROLLERS ###
### VIEWS ###
@applicationView = new App.Views.Application($target,@applicationModel)
@colorSelectorView = new App.Views.ColorSelector($colorSelector,@colorSelectorModel)
@colorSelectorView.eventDispatcher.addListener("colorchange",@oncolorchange)
@canvasPreviewView = new App.Views.CanvasPreview(@canvasPreviewModel)
@factorSelectorView = new App.Views.FactorSelector(@factorSelectorModel)
- @gridView = new App.Views.Grid($target,@gridModel)
+ @gridView = new App.Views.Grid($target,@applicationModel)
@titleView = new App.Views.Title(@titleModel)
@gridView.setPenColor(@applicationModel.currentColor)
@menuView = new App.Views.Menu(@menuModel)
@@ -430,15 +468,42 @@ class Main
@menuView.eventDispatcher.addListener("savetolocal",@savetolocal)
@menuView.eventDispatcher.addListener("restorefromlocal",@restoreFromLocal)
@menuView.eventDispatcher.addListener("showthickbox",@showThickbox)
+ @menuView.eventDispatcher.addListener("undo",@undo)
+ @menuView.eventDispatcher.addListener("redo",@redo)
@factorSelectorView.eventDispatcher.addListener("selectfactor",@selecFactor)
@gridView.eventDispatcher.addListener("renderpreview",@renderPreview) # rendercanvas preview
@gridView.eventDispatcher.addListener("updateviews",@updateViews)
@gridView.eventDispatcher.addListener("clickcell",@clickcell) # user draw on a cell in the grid
+ @gridView.eventDispatcher.addListener("pushinhistory",@pushInHistory) # push grid state in history
@titleView.eventDispatcher.addListener("titlechanged",@titleChange) # title of grid edited
+
+ @pushInHistory()
+
+ pushInHistory:(e)=>
+ console.log "push in history","iter = ",@historyModel.iterator.iter,"length = ",@historyModel.iterator.length
+
+ if @historyModel.iterator.hasNext()
+ console.log "iterator has next"
+ console.log @historyModel.iterator.split()
+ @historyModel.iterator.push(JSON.parse(JSON.stringify(@applicationModel.gridModel)))
+ @historyModel.iterator.iter = @historyModel.iterator.length-1
+
+ console.log "pushed in history","iter = ",@historyModel.iterator.iter,"length = ",@historyModel.iterator.length
+ undo:(e)=>
+ console.log "undo"
+ if @historyModel.iterator.hasPrevious()
+ @applicationModel.gridModel.grid = @historyModel.iterator.previous().grid
+ @updateViews()
+ redo:(e)=>
+ console.log "redo"
+ if @historyModel.iterator.hasNext()
+ @applicationModel.gridModel.grid = @historyModel.iterator.next().grid
+ @applicationView.render()
clickcell:(e)=>
- @gridModel.fillCell(e.datas)
+ @applicationModel.gridModel.fillCell(e.datas)
@gridView.fillCell(e)
titleChange:(e)=>
+ @applicationModel.gridModel.title = e.datas
@updateViews()
renderPreview:(e)=>
@canvasPreviewView.render()
@@ -450,22 +515,29 @@ class Main
window.open(@canvasPreviewModel.targetId.getElementsByTagName('canvas')[0].toDataURL("image/png"))
changegridsize:(e)=>
console.log "changegridsize",e.datas
- @gridModel.rows = e.datas.rows
- @gridModel.columns= e.datas.columns
- @gridModel.fillGridBlank()
+ @applicationModel.gridModel.rows = e.datas.rows
+ @applicationModel.gridModel.columns= e.datas.columns
+ @applicationModel.gridModel.fillGridBlank()
@applicationView.render()
emptygrid:=>
- @gridModel.emptyGrid()
- @gridView.render()
+ @applicationModel.gridModel.emptyGrid()
+ @applicationView.render()
savetolocal:=>
- (localStorage["faviconbuilderGrid"] = JSON.stringify(@gridModel)) and alert("Icon saved to local storage")
+ backups = []
+ if localStorage["faviconbuilderGrid"]
+ backups = JSON.parse(localStorage["faviconbuilderGrid"])
+ backups.push(@applicationModel.gridModel)
+ backups.version = @version
+ (localStorage["faviconbuilderGrid"] = JSON.stringify(backups)) and alert("Icon saved to local storage")
restoreFromLocal:=>
if localStorage["faviconbuilderGrid"]!=null
- gridModel = JSON.parse(localStorage["faviconbuilderGrid"])
- @gridModel.grid = gridModel.grid
- @gridModel.rows = gridModel.rows
- @gridModel.columns = gridModel.columns
- @gridModel.version = gridModel.version
+ backups = JSON.parse(localStorage["faviconbuilderGrid"])
+ gridModel = backups[backups.length-1]
+ @applicationModel.gridModel.grid = gridModel.grid
+ @applicationModel.gridModel.rows = gridModel.rows
+ @applicationModel.gridModel.columns = gridModel.columns
+ @applicationModel.gridModel.version = gridModel.version
+ @applicationModel.titleModel.value = gridModel.title
@updateViews()
updateViews:=>
@applicationView.render()
Oops, something went wrong.

0 comments on commit 7cf0f7a

Please sign in to comment.