Skip to content

Commit

Permalink
ajout undo redo
Browse files Browse the repository at this point in the history
  • Loading branch information
Daome committed Feb 19, 2012
1 parent e51d69f commit 7cf0f7a
Show file tree
Hide file tree
Showing 4 changed files with 306 additions and 136 deletions.
2 changes: 2 additions & 0 deletions css/index.css
View file
Expand Up @@ -53,6 +53,8 @@ span.tip{
margin-left:auto;
margin-right:auto;
width:90%;
}
#app{
text-align: center;
}
.nav{
Expand Down
Binary file added img/emptycell.gif
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
148 changes: 110 additions & 38 deletions js/faviconbuilder.coffee
View file
Expand Up @@ -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:{}
Expand Down Expand Up @@ -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
Expand All @@ -113,9 +116,9 @@ class App.Utils.Iterator extends Array
true
else
false
###


###
App.Utils.Iterator = do->
Iterator = ->
array = Array.apply(this,arguments)
Expand All @@ -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)->
Expand All @@ -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
Expand All @@ -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])->
Expand All @@ -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}' "
Expand All @@ -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
Expand All @@ -234,6 +271,7 @@ class App.Views.Grid
e.datas.element.className += " #{@emptyCellStyle}"



setDrawMode:(event)=>
@drawMode = event.datas
setPenColor:(color)=>
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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")
Expand All @@ -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)
Expand All @@ -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()
Expand All @@ -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()
Expand Down

0 comments on commit 7cf0f7a

Please sign in to comment.