diff options
| -rw-r--r-- | css/sally.css | 11 | ||||
| -rw-r--r-- | js/app.js | 1 | ||||
| -rw-r--r-- | js/color.js | 1 | ||||
| -rw-r--r-- | js/lex.js | 10 | ||||
| -rw-r--r-- | js/matrix.js | 5 | ||||
| -rw-r--r-- | js/ui/brush.js | 5 | ||||
| -rw-r--r-- | js/ui/controls.js | 2 | ||||
| -rw-r--r-- | js/ui/palette.js | 3 | ||||
| -rw-r--r-- | js/util.js | 1 |
9 files changed, 30 insertions, 9 deletions
diff --git a/css/sally.css b/css/sally.css index 2034715..46a67bb 100644 --- a/css/sally.css +++ b/css/sally.css @@ -46,6 +46,17 @@ a:link, a:visited {text-decoration: none; color: #3b3740} .tool { cursor: pointer; } +.transparent { + background-color: transparent; + background-image: url(../img/gray-dither.gif); + background-size: 16px 16px; +} + +@media (-webkit-min-device-pixel-ratio: 2) { + .transparent { + background-size: 4px 4px; + } +} .rapper { cursor: crosshair; } body.grid span { border-right: 1px solid #444; border-top: 1px solid #444; border-bottom: 1px solid #444; } body.grid div { border-top: 1px solid #444; border-left: 1px solid #444; } @@ -5,6 +5,7 @@ var erasing = false var selecting = false var filling = false var changed = false +var fillColor = 1 // black var focused var canvas, tools, palette, controls, brush, mode, current_tool, current_canvas diff --git a/js/color.js b/js/color.js index a61cdf2..9dbd3e1 100644 --- a/js/color.js +++ b/js/color.js @@ -1,6 +1,7 @@ var color_names = ("white black dark-blue green red dark-red purple orange " + "yellow lime teal cyan blue magenta dark-gray light-gray").split(" "); + var all_color_hue_order = "dark-red red orange yellow lime green teal cyan blue dark-blue purple magenta black dark-gray light-gray white".split(" "); var all_color_inv_order = "cyan teal blue dark-blue purple magenta dark-red red orange yellow lime green white light-gray dark-gray black".split(" "); var color_hue_order = "dark-red red orange yellow lime cyan teal blue dark-blue purple magenta".split(" "); @@ -17,7 +17,7 @@ Lex.prototype.build = function(){ this.span.innerHTML = this.html() } Lex.prototype.css = function(){ - if (this.opacity == 0 && ! this.char) return "fabb" + if (this.opacity == 0) return "transparent f" + letters[mod(this.fg,16)] return "f" + letters[mod(this.fg,16)] + "b" + letters[mod(this.bg,16)] } Lex.prototype.html = function(){ @@ -72,10 +72,10 @@ Lex.prototype.clone = function () { return lex } Lex.prototype.erase = function (){ - this.fg = colors.white - this.bg = colors.black + this.fg = fillColor + this.bg = fillColor this.char = " " - this.opacity = 0 + this.opacity = 1 this.build() } Lex.prototype.fill = function(fg, bg){ @@ -94,7 +94,7 @@ Lex.prototype.ne = function(lex){ return ! this.eq(lex) } Lex.prototype.clear = function(){ - this.bg = 1 + this.bg = fillColor this.fg = 0 this.char = " " this.opacity = 0 diff --git a/js/matrix.js b/js/matrix.js index b1d80f6..59bad86 100644 --- a/js/matrix.js +++ b/js/matrix.js @@ -39,7 +39,7 @@ Matrix.prototype.assign = function (mat) { this.demolish() this.w = mat.w this.h = mat.h - this.f = function(){} +// this.f = function(){} this.initialize(function(x,y){ var el = mat.getCell(x,y).clone() el.build() @@ -83,6 +83,9 @@ Matrix.prototype.focusLex = function(y,x){ Matrix.prototype.clear = function(){ this.forEach(function(lex,x,y){ lex.clear() }) } +Matrix.prototype.erase = function(){ + this.forEach(function(lex,x,y){ lex.erase() }) +} Matrix.prototype.fill = function(fg, bg){ this.fg = fg this.bg = bg diff --git a/js/ui/brush.js b/js/ui/brush.js index 4cf7495..f05d6cc 100644 --- a/js/ui/brush.js +++ b/js/ui/brush.js @@ -29,9 +29,10 @@ var brush = (function(){ dragging = true erasing = (e.which == "3" || e.ctrlKey) if (erasing) { - lex.clear() + lex.erase() } else { + fillColor = brush.bg lex.fill(brush.fg, brush.bg) } lex.focus() @@ -43,7 +44,7 @@ var brush = (function(){ } erasing = (e.which == "3" || e.ctrlKey) if (erasing) { - lex.clear() + lex.erase() } else { lex.fill(brush.fg, brush.bg) diff --git a/js/ui/controls.js b/js/ui/controls.js index 9ea58f5..8293a32 100644 --- a/js/ui/controls.js +++ b/js/ui/controls.js @@ -87,7 +87,7 @@ var controls = (function(){ controls.clear = new Tool (clear_el) controls.clear.use = function(){ - canvas.clear() + canvas.erase() } controls.grid = new Checkbox (grid_el) diff --git a/js/ui/palette.js b/js/ui/palette.js index 04f56c2..e03e17b 100644 --- a/js/ui/palette.js +++ b/js/ui/palette.js @@ -21,6 +21,9 @@ var palette = (function(){ if (! brush.modified) { brush.generate() } + if (filling) { + fillColor = lex.bg + } }) }) @@ -148,6 +148,7 @@ function elastic (t) { return ( e * Math.pow( 2, - 10 * t ) * Math.sin( ( t - f / 4 ) * ( 2 * Math.PI ) / f ) + 1 ); } + Model=function a(b,c,d,e){function f(){var a=this,f={};a.on=function(a,b){(f[a]|| (f[a]=[])).push(b)},a.trigger=function(a,b){for(var c=f[a],d=0;c&&d<c.length;)c [d++](b)},a.off=function(a,b){for(d=f[a]||[];b&&(c=d.indexOf(b))>-1;)d.splice(c |