save custom brushes

8 files changed, 81 insertions, 18 deletions

diff --git a/css/sally.css b/css/sally.css
index 6fe1bd2..2034715 100644
--- a/css/sally.css
+++ b/css/sally.css
@@ -40,7 +40,7 @@ a:link, a:visited {text-decoration: none; color: #3b3740}
     white-space:pre-wrap;
     word-wrap: break-word;
 }
-.block {
+.block:nth-child(n+2) {
     padding-left: 30px;
 }
 .tool {
@@ -56,7 +56,7 @@ body.loading { opacity: 0; }
 body { transition: 0.1s linear; }
 .focused { box-shadow: inset 1px 0 2px white, inset -1px 0 2px white, inset 0 1px 2px white, inset 0 -1px 2px white; }
 #import_textarea { font-size: 9pt; }
-textarea { font-size:12pt; width: 42%; height: 300px; background: #333; color: #0f0; border: 0; font-family: 'FixedsysExcelsior301Regular'; outline: 0; border: 1px solid #333; background:#010;}
+textarea { font-size:12pt; width: 37%; height: 300px; background: #333; color: #0f0; border: 0; font-family: 'FixedsysExcelsior301Regular'; outline: 0; border: 1px solid #333; background:#010;}
 #shader_rapper { display: none; }
 #import_rapper { display: none; }
 #cursor_input { position: fixed; top: 0; right: 0; width:30px; opacity: 0; }
@@ -73,4 +73,8 @@ textarea { font-size:12pt; width: 42%; height: 300px; background: #333; color: #
 .selector_el.creating div {
   display: none;
 }
-
+.custom {
+	float: left;
+	margin-right: 5px;
+	margin-bottom: 5px;
+}
diff --git a/index.html b/index.html
index 9ce5a7e..f92662f 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,10 @@
   </div>
 
   <div style="clear:both">
-    <div id="palette_rapper" class="rapper"></div>
+    <div class="block">
+			<div id="palette_rapper"></div><br>
+			<div id="custom_rapper"></div>
+		</div>
     <div id="brush_container" class="block">
       <div id="brush_rapper">
       </div>
@@ -16,6 +19,8 @@
       <span id="fg_checkbox" class="tool">x fg</span><br>
       <span id="bg_checkbox" class="tool">x bg</span><br>
       <span id="char_checkbox" class="tool">x char</span><br>
+      <br>
+			<span id="add_custom_el" class="tool">+ add</span>
     </div>
     <div id="tools_rapper" class="block">
       <span id="square_el" class="tool">square</span><br>
@@ -84,6 +89,7 @@
 
 <script src="js/ui/brush.js"></script>
 <script src="js/ui/canvas.js"></script>
+<script src="js/ui/custom.js"></script>
 <script src="js/ui/keys.js"></script>
 <script src="js/ui/controls.js"></script>
 <script src="js/ui/palette.js"></script>
diff --git a/js/blit.js b/js/blit.js
index 05fdcb8..ac8cb42 100644
--- a/js/blit.js
+++ b/js/blit.js
@@ -5,7 +5,7 @@ var blit = (function(){
     B.forEach(function(lex, u, v){
       var cell = A.getCell(u+x, v+y)
       if (cell && lex.opacity > 0) {
-        cell.clone(lex)
+        cell.assign(lex)
       }
     })
   }
@@ -14,7 +14,7 @@ var blit = (function(){
     B.forEach(function(lex, u, v){
       var cell = A.getCell(u+x, v+y)
       if (cell && cell.opacity == 0) {
-        cell.clone(lex)
+        cell.assign(lex)
       }
     })
   }
@@ -24,7 +24,7 @@ var blit = (function(){
     B.forEach(function(lex, u, v){
       var cell = A.getCell(u+x, v+y)
       if (cell) {
-        lex.clone(cell)
+        lex.assign(cell)
       }
     })
   }
@@ -33,7 +33,7 @@ var blit = (function(){
     B.forEach(function(lex, u, v){
       var cell = A.getCell(u+x, v+y)
       if (cell) {
-        cell.clone(lex)
+        cell.assign(lex)
       }
     })
   }
diff --git a/js/draw.js b/js/draw.js
index 4b03254..4de9980 100644
--- a/js/draw.js
+++ b/js/draw.js
@@ -55,7 +55,7 @@ var draw = (function(){
   
   function fill (lex, x, y) {
     var q = [ [x,y] ]
-    var target = canvas.aa[y][x].copy()
+    var target = canvas.aa[y][x].clone()
     var n, w = 0, e = 0, j = 0
     var kk = 0
     // gets into a weird infinite loop if we don't break here.. :\
@@ -84,7 +84,7 @@ var draw = (function(){
         }
       }
       for (var i = w; i <= e; i++) {
-        canvas.aa[j][i].clone(lex)
+        canvas.aa[j][i].assign(lex)
         if (j > 0 && canvas.aa[j-1][i].eq(target)) {
           q.push([ i, j-1 ])
         }
diff --git a/js/lex.js b/js/lex.js
index 12976d5..fca7777 100644
--- a/js/lex.js
+++ b/js/lex.js
@@ -51,8 +51,7 @@ Lex.prototype.mirc = function(){
     return "\x03" + (this.fg&15) + "," + (this.bg&15) + char
   }
 }
-Lex.prototype.clone = function (lex){
-  if (lex.opacity == 0) return
+Lex.prototype.assign = function (lex){
   this.fg = lex.fg
   this.bg = lex.bg
   this.char = lex.char
@@ -67,9 +66,9 @@ Lex.prototype.paint = function (lex){
   this.opacity = 1
   this.build()
 }
-Lex.prototype.copy = function () {
+Lex.prototype.clone = function () {
   var lex = new Lex (0,0)
-  lex.clone(this)
+  lex.assign(this)
   return lex
 }
 Lex.prototype.erase = function (){
diff --git a/js/matrix.js b/js/matrix.js
index 732820e..b1d80f6 100644
--- a/js/matrix.js
+++ b/js/matrix.js
@@ -6,8 +6,8 @@ function Matrix (w,h,f){
   this.f = f
   this.initialize()
 }
-Matrix.prototype.initialize = function(){
-  var w = this.w || 1, h = this.h || 1, f = this.f
+Matrix.prototype.initialize = function(f){
+  var w = this.w || 1, h = this.h || 1, f = f || this.f
   var aa = new Array (h)
   for (var y = 0; y < h; y++) {
     aa[y] = new Array (w)
@@ -23,9 +23,34 @@ Matrix.prototype.rebuild = function (){
   this.append()
   this.bind()
   this.generate && this.generate()
-  // the focused character might disappear after resizing
+  // the focused character might disappear after resizing..
   focused = canvas.aa[0][0]
 }
+Matrix.prototype.clone = function () {
+	var base = this
+	var clone = new Matrix(this.w, this.h, function(x,y){
+		return base.getCell(x,y).clone()
+	})
+	clone.f = this.f
+	return clone
+}
+Matrix.prototype.assign = function (mat) {
+	var base = this
+	this.demolish()
+	this.w = mat.w
+	this.h = mat.h
+	this.f = function(){}
+	this.initialize(function(x,y){
+		var el = mat.getCell(x,y).clone()
+		el.build()
+		return el
+	})
+  this.append()
+  this.bind()
+  focused = canvas.aa[0][0]
+	return this
+}
+
 Matrix.prototype.bind = function () {}
 Matrix.prototype.demolish = function (){
   this.forEach(function(lex){
@@ -94,7 +119,7 @@ Matrix.prototype.region = function(w,h,x,y) {
   return mat
 }
 Matrix.prototype.setCell = function(lex,x,y){
-  this.aa[y] && this.aa[y][x] && this.aa[y][x].clone(lex)
+  this.aa[y] && this.aa[y][x] && this.aa[y][x].assign(lex)
 }
 Matrix.prototype.getCell = function(x,y){
   if (this.aa[y] && this.aa[y][x]) return this.aa[y][x]
diff --git a/js/ui/controls.js b/js/ui/controls.js
index 661f881..9ea58f5 100644
--- a/js/ui/controls.js
+++ b/js/ui/controls.js
@@ -254,6 +254,11 @@ var controls = (function(){
       controls.canvas_height.build()
       canvas.resize(canvas.w, h)
     }
+    
+		add_custom_el.addEventListener("click", function(){
+			custom.clone()
+		})
+
   }
 
   function int_key (f) {
diff --git a/js/ui/custom.js b/js/ui/custom.js
new file mode 100644
index 0000000..a758d48
--- /dev/null
+++ b/js/ui/custom.js
@@ -0,0 +1,24 @@
+var custom = (function(){
+
+  var exports = {}
+  
+  exports.clone = function (){
+    var new_brush = brush.clone()
+    var rapper = document.createElement("div")
+    rapper.className = "custom"
+    new_brush.append(rapper)
+    custom_rapper.appendChild(rapper)
+    // store in localstorage?
+    rapper.addEventListener("click", function(){
+      // load this brush
+      exports.load(new_brush)
+    })
+  }
+  
+  exports.load = function(new_brush){
+    brush.assign( new_brush )
+  }
+  
+  return exports
+
+})()