add radio controls, add shader target, export format uses radio controls and is saved to local storage, move tool binding from control.js to tool.js

8 files changed, 156 insertions, 104 deletions

diff --git a/css/sally.css b/css/sally.css
index 093971d..6d65e28 100644
--- a/css/sally.css
+++ b/css/sally.css
@@ -51,6 +51,15 @@ a:link, a:visited {text-decoration: none; color: #3b3740}
 .tool.hidden {
   visibility: hidden;
 }
+.tool.radio {
+  margin: 0 8px 0 0;
+}
+.tool.radio.focused {
+  color: #000;
+
+  background-color: #6d6d6d;
+  box-shadow: none;
+}
 .transparent {
   background-color: transparent;
   background-image: url(../img/gray-dither.gif);
diff --git a/image_metadata.html b/image_metadata.html
index ed3fffd..73e61c8 100644
--- a/image_metadata.html
+++ b/image_metadata.html
@@ -25,12 +25,6 @@ for (var i=0, name; name=doms[i]; i++){
   dom[name] = document.getElementById(name)
 }
 
-var insert_colorcode = function(cc, chunks){
-  var chunk = PNG.make_itxt_chunk('colorcode', cc, chunks)
-  // assume we wanna insert the chunk very last, just in front of the end chunk
-  chunks.splice(chunks.length - 1, 0, chunk)
-}
-
 var log_clear = function(){
   dom.log.innerHTML = ""
 }
diff --git a/index.html b/index.html
index ec5a288..3ba197b 100644
--- a/index.html
+++ b/index.html
@@ -54,11 +54,7 @@
       </div>
             
       <div id="import_rapper">
-        <span id="format_group">
-          <input type="radio" name="import_format" id="import_ascii"><label for="import_ascii">ascii</label>
-          <input type="radio" name="import_format" id="import_irssi"><label for="import_irssi">irssi</label>
-          <input type="radio" name="import_format" id="import_mirc"><label for="import_mirc">mirc</label>
-        </span>
+        <span id="format_el">ascii *irssi mirc</span>
         <span id="import_buttons">
           <button id="import_button">import colorcode</button>
           <button id="import_html">import sally</button>
@@ -72,7 +68,8 @@
       </div>
 
       <div id="shader_rapper">
-        <span id="animate_checkbox" class="tool">_ animate</span><br>
+        <span id="animate_checkbox" class="tool">_ animate</span>
+        to <span id="shader_target_el">*canvas brush selection</span><br>
         <textarea id="shader_textarea"></textarea>
       </div>
     </div>
@@ -90,7 +87,7 @@
   lex.bg = hue((x+y*y+t/10)/20)
   lex.fg = colors.white
   lex.char = " "
-  lex.opacity = 1
+  // lex.opacity = 1
 </script>
 <script src="js/vendor/colorcode.js"></script>
 <script src="js/vendor/dataUriToBlob.js"></script>
diff --git a/js/clipboard.js b/js/clipboard.js
index 0ac2150..6016678 100644
--- a/js/clipboard.js
+++ b/js/clipboard.js
@@ -8,9 +8,9 @@ var clipboard = (function () {
     canvas_r: document.createElement("canvas"),
 
     bind: function () {
-      import_ascii.addEventListener("change", exports.setFormat("ascii"))
-      import_irssi.addEventListener("change", exports.setFormat("irssi"))
-      import_mirc.addEventListener("change", exports.setFormat("mirc"))
+//      import_ascii.addEventListener("change", exports.setFormat("ascii"))
+//      import_irssi.addEventListener("change", exports.setFormat("irssi"))
+//      import_mirc.addEventListener("change", exports.setFormat("mirc"))
       import_button.addEventListener("click", exports.import_colorcode)
       import_html.addEventListener("click", exports.import_html)
       export_button.addEventListener("click", exports.export_data)
@@ -19,7 +19,7 @@ var clipboard = (function () {
       import_textarea.addEventListener("focus", exports.focus)
       import_textarea.addEventListener("blur", exports.blur)
       import_textarea.addEventListener('paste', exports.paste)
-      import_irssi.setAttribute("checked", true)
+//      import_irssi.setAttribute("checked", true)
     },
     setFormat: function (name) {
       return function () {
@@ -49,7 +49,7 @@ var clipboard = (function () {
       focus()
       clipboard.importing = false
       import_buttons.style.display = "none"
-      export_button.style.display = format_group.style.display = "inline-block"
+      // export_button.style.display = format_group.style.display = "inline-block"
       clipboard.export_data()
     },
 
@@ -202,7 +202,8 @@ var clipboard = (function () {
     },
     export_data: function () {
       var output
-      switch (clipboard.format) {
+      // switch (clipboard.format) {
+      switch (controls.save_format.value) {
         case 'ascii':
           output = canvas.ascii()
           break
diff --git a/js/shader.js b/js/shader.js
index 2c30896..81a1ec5 100644
--- a/js/shader.js
+++ b/js/shader.js
@@ -20,9 +20,9 @@ var shader = (function(){
   }
   exports.run = function(canvas){
     var t = +new Date
-    var shader_canvas = selection.hidden ? canvas : selection.canvas;
-    var w = shader_canvas.w, h = shader_canvas.h
-    shader_canvas.forEach(function(lex, x, y){
+    shader.canvas = shader.canvas || canvas
+    var w = shader.canvas.w, h = shader.canvas.h
+    shader.canvas.forEach(function(lex, x, y){
       fn(lex, x, y, w, h, t)
       lex.build()
     })
diff --git a/js/tool.js b/js/tool.js
index b1a52f0..e75bf8d 100644
--- a/js/tool.js
+++ b/js/tool.js
@@ -1,9 +1,18 @@
 var Tool = Model({
-  init: function (span) {
-    this.el = span
-    this.lex = new Lex (span)
-    this.name = span.innerHTML
-    this.span = span
+  init: function (el) {
+    this.el = el
+    this.lex = new Lex (el)
+    this.name = el.innerHTML
+  },
+  bind: function(){
+    var tool = this
+    tool.el.addEventListener('mousedown', function(e){
+      tool.focus()
+    })
+    if (tool.memorable) {
+      // console.log(tool.name, localStorage.getItem("ascii.tools." + tool.name) )
+      tool.use( localStorage.getItem("ascii.tools." + tool.name) == "true" )
+    }
   },
   use: function(){},
   done: function(){},
@@ -11,19 +20,18 @@ var Tool = Model({
     // focused && focused.blur()
     current_tool && current_tool.blur()
     current_tool = this
-    this.span.classList.add('focused')
+    this.el.classList.add('focused')
     this.use()
     if (this.name != 'shader' && is_desktop) { cursor_input.focus() }
   },
   blur: function(){
     current_tool = null
-    this.span.classList.remove('focused')
+    this.el.classList.remove('focused')
     this.done()
   }
 })
 
 var FileTool = Tool.extend({
-  
   focus: function(){
     if (current_filetool === this) {
       this.blur()
@@ -31,20 +39,87 @@ var FileTool = Tool.extend({
     }
     current_filetool && current_filetool.blur()
     current_filetool = this
-    this.span.classList.add('focused')
+    this.el.classList.add('focused')
     this.use()
     if (this.name != 'shader' && is_desktop) { cursor_input.focus() }
   },
   blur: function(){
     current_filetool = null
-    this.span.classList.remove('focused')
+    this.el.classList.remove('focused')
     this.done()
   }
 })
 
+var RadioItem = Tool.extend({
+  init: function(group, el){
+    this.group = group
+    this.el = el
+  },
+  focus: function(){
+    this.el.classList.add('focused')
+  },
+  blur: function(){
+    this.el.classList.remove('focused')
+  },
+  bind: function(){
+    var control = this
+    this.el.addEventListener('mousedown', function(){
+      control.group.use(control)
+    })
+  }
+})
+
+var RadioGroup = Tool.extend({
+  init: function(el){
+    this.el = el
+    this.controls = {}
+    var names = el.innerHTML.split(' ')
+    el.innerHTML = ''
+    var group = this
+    names.forEach(function(value){
+      var el = document.createElement('span')
+      el.classList.add('radio','tool')
+      var control = new RadioItem(group, el)
+      if (value.substr(0,1) === '*') {
+        control.value = value = value.substr(1)
+        group.use(control)
+      }
+      control.value = el.innerHTML = value
+      group.controls[value] = control
+      group.el.appendChild(el)
+    })
+  },
+  use: function(control){
+    if (typeof control === 'string') {
+      control = this.controls[control]
+    }
+    this.selected_control && this.selected_control.blur()
+    this.value = control.value
+    this.selected_control = control
+    control.focus()
+    control.use()
+    if (this.memorable){
+      localStorage.setItem("ascii.tools." + this.name, this.value)
+    } 
+  },
+  bind: function(){
+    var tool = this
+    for (var n in this.controls){
+      this.controls[n].bind()
+    }
+    if (tool.memorable) {
+      var value = localStorage.getItem("ascii.tools." + tool.name)
+      if (value) tool.use(value)
+    }
+  }
+})
+
+
+
+
 var Checkbox = Tool.extend({
-  init: function (span){
-    this.__init(span)
+  init: function (el){
+    this.__init(el)
     var name = this.name.replace(/^[x_] /,"")
     var state = localStorage.getItem("ascii." + name) || this.name[0] == "x"
     this.name = name
@@ -59,42 +134,29 @@ var Checkbox = Tool.extend({
 
 var BlurredCheckbox = Checkbox.extend({
   focus: function(){
-    // if (current_filetool && current_filetool.name == "shader") {
-    //   shader.toggle(false)
-    //   current_tool.blur()
-    //   current_tool = controls.circle
-    // }
     this.use()
-    // if (this.name != 'shader' && is_desktop) { cursor_input.focus() }
   },
   blur: function(){
-    this.span.classList.remove('focused')
+    this.el.classList.remove('focused')
     this.done()
   }
 })
 
 var BlurredTool = Tool.extend({
   focus: function(){
-    // if (current_filetool && current_filetool.name == "shader") {
-    //   shader.toggle(false)
-    //   current_tool.blur()
-    //   current_tool = controls.circle
-    // }
     this.use()
-    // if (this.name != 'shader' && is_desktop) { cursor_input.focus() }
   },
   blur: function(){
-    this.span.classList.remove('focused')
+    this.el.classList.remove('focused')
     this.done()
   }
 })
 
 var HiddenCheckbox = BlurredCheckbox.extend({
-  init: function (span){
-    this.el = span
-    this.lex = new Lex (span)
-    this.name = span.innerHTML
-    this.span = span
+  init: function (el){
+    this.el = el
+    this.lex = new Lex (el)
+    this.name = el.innerHTML
     var state = this.name[0] == "o"
     this.update(state)
   },
diff --git a/js/ui/controls.js b/js/ui/controls.js
index ca6770f..a21e293 100644
--- a/js/ui/controls.js
+++ b/js/ui/controls.js
@@ -129,7 +129,14 @@ var controls = (function(){
     clipboard.show()
     clipboard.import_mode()
   }
-  
+ 
+  controls.save_format = new RadioGroup(format_el)
+  controls.save_format.name = 'save_format'
+  controls.save_format.memorable = true
+  var cs = controls.save_format.controls
+  cs.mirc.use = cs.irssi.use = cs.ascii.use = function(){
+    clipboard.export_data()
+  }
   //
 
   var ShaderTool = FileTool.extend({
@@ -160,7 +167,13 @@ var controls = (function(){
     // controls.shader.focus()
     controls.shader.use(true)
   }
- 
+
+  controls.shader_target = new RadioGroup(shader_target_el)
+  var cs = controls.shader_target.controls
+  cs.canvas.use = function(){ shader.canvas = canvas }
+  cs.brush.use = function(){ shader.canvas = brush }
+  cs.selection.use = function(){ shader.canvas = selection.canvas }
+
   controls.experimental_palette = new HiddenCheckbox (experimental_palette_toggle)
   controls.experimental_palette.use = function(state){
     var state = palette.experimental()
@@ -227,6 +240,14 @@ var controls = (function(){
   // bind  
   
   controls.bind = function(){
+
+    for (var n in controls){
+      var control = controls[n]
+      if (typeof control === 'object' && 'bind' in control){
+        control.bind()
+      }
+    }
+
     [
       controls.brush_w,
       controls.brush_h,
@@ -237,38 +258,6 @@ var controls = (function(){
         lex.focus()
       })
     });
-    
-    [
-      controls.square,
-      controls.circle,
-      controls.cross,
-      controls.text,
-      controls.fill,
-      controls.select,
-      controls.undo,
-      controls.redo,
-      controls.clear,
-      controls.grid,
-      controls.webcam,
-      controls.fg,
-      controls.bg,
-      controls.char,
-      controls.rotate,
-      controls.vertical,
-      controls.shader,
-      controls.animate,
-      controls.save,
-      controls.load,
-      controls.experimental_palette
-    ].forEach(function(tool){
-      tool.span.addEventListener('mousedown', function(e){
-        tool.focus()
-      })
-      if (tool.memorable) {
-      console.log(tool.name, localStorage.getItem("ascii.tools." + tool.name) )
-				tool.use( localStorage.getItem("ascii.tools." + tool.name) == "true" )
-      }
-    })
 
     controls.brush_w.key = keys.single_numeral_key(controls.brush_w, function(w){ brush.resize(w, brush.h) })
     controls.brush_w.raw_key = keys.arrow_key(function(w){ brush.size_add(w, 0) })
diff --git a/js/undo.js b/js/undo.js
index 44b137a..35a27d9 100644
--- a/js/undo.js
+++ b/js/undo.js
@@ -34,10 +34,10 @@ var update_dom = function(){
 }
 
 // state is an undo or redo state that might contain these props
-// {lexs: {'0,0': LexState, ...},
-//  focus: {x:, y: },
-//  size: {w:, h: },
-//  rects: [{x:, y:, w:, h:, lexs: [LexState, ...]}, ...]
+// {  lexs: {'0,0': LexState, ...},    // for sparse lex changes (eg brush, fill)
+//    focus: {x:, y: },
+//    size: {w:, h: },
+//    rects: [{x:, y:, w:, h:, lexs: [LexState, ...]}, ...]
 // }
 var new_state = function(){
   var state = {lexs:{}};
@@ -132,24 +132,24 @@ var restore_state = function(state){
 
   if (make_redo){
     state.redo = new_redo()
-  }
 
-  // copy saved rects that intersect with current canvas size
-  // important to do this before resizing canvas
-  if (make_redo && 'rects' in state){
-    for (var ri=0, rect; rect=state.rects[ri]; ri++){
-      if (rect.x >= canvas.w ||
-          rect.y >= canvas.h) continue;
-      var w = Math.min(rect.w, canvas.w - rect.x)
-      var h = Math.min(rect.h, canvas.h - rect.y)
-      save_rect(rect.x, rect.y, w, h, state.redo)
+    // copy saved rects that intersect with current canvas size
+    // important to do this before resizing canvas
+    if ('rects' in state){
+      for (var ri=0, rect; rect=state.rects[ri]; ri++){
+        if (rect.x >= canvas.w ||
+            rect.y >= canvas.h) continue;
+        var w = Math.min(rect.w, canvas.w - rect.x)
+        var h = Math.min(rect.h, canvas.h - rect.y)
+        save_rect(rect.x, rect.y, w, h, state.redo)
+      }
+    }
+    if ('size' in state){
+      save_resize(state.size.w, state.size.h, canvas.w, canvas.h, state.redo)
     }
   }
 
   if ('size' in state){
-    if (make_redo){
-      save_resize(state.size.w, state.size.h, canvas.w, canvas.h, state.redo)
-    }
     canvas.resize(state.size.w, state.size.h, true);
   }