3 files changed, 52 insertions, 21 deletions

diff --git a/js/app.js b/js/app.js
index a98ee84..f73a447 100644
--- a/js/app.js
+++ b/js/app.js
@@ -7,7 +7,8 @@ var filling = false
 var changed = false
 var focused
 
-var canvas, tools, palette, controls, brush, mode, current_tool, current_canvas
+var canvas, tools, palette, controls, brush, mode 
+var current_tool, current_filetool, current_canvas
 
 function init () {
   build()
@@ -44,9 +45,16 @@ function bind () {
   
   window.addEventListener('mouseup', function(e){
     dragging = erasing = false
-    if (current_tool.name != 'shader' && current_tool.name != 'load' && current_tool.name != 'save' && is_desktop) {
+    // if (current_filetool.name != 'shader' && current_filetool.name != 'load' && current_filetool.name != 'save' && is_desktop) {
+      // cursor_input.focus()
+    // }
+    
+    var ae = document.activeElement
+
+    if (ae !== shader_textarea && ae !== import_textarea) {
       cursor_input.focus()
     }
+
     if (selecting) {
       selection.up(e)
     }
@@ -56,11 +64,11 @@ function bind () {
   })
   
   window.addEventListener('mousedown', function(e){
-    if (current_tool.name != 'shader' && is_desktop) { cursor_input.focus() }
+    // if (current_filetool.name != 'shader' && is_desktop) { cursor_input.focus() }
   })
 
   document.addEventListener('DOMContentLoaded', function(){
-    if (current_tool.name != 'shader' && is_desktop) { cursor_input.focus() }
+    if (is_desktop) { cursor_input.focus() }
     document.body.classList.remove('loading')
   })
   
diff --git a/js/tool.js b/js/tool.js
index 360e79f..c3fc67c 100644
--- a/js/tool.js
+++ b/js/tool.js
@@ -22,6 +22,27 @@ var Tool = Model({
   }
 })
 
+var FileTool = Tool.extend({
+  
+  focus: function(){
+    if (current_filetool === this) {
+      this.blur()
+      return
+    }
+    current_filetool && current_filetool.blur()
+    current_filetool = this
+    this.span.classList.add('focused')
+    this.use()
+    console.log("focus")
+    if (this.name != 'shader' && is_desktop) { cursor_input.focus() }
+  },
+  blur: function(){
+    current_filetool = null
+    this.span.classList.remove('focused')
+    this.done()
+  }
+})
+
 var Checkbox = Tool.extend({
   init: function (span){
     this.__init(span)
@@ -39,13 +60,13 @@ var Checkbox = Tool.extend({
 
 var BlurredCheckbox = Checkbox.extend({
   focus: function(){
-    if (current_tool.name == "shader") {
-      shader.toggle(false)
-      current_tool.blur()
-      current_tool = controls.circle
-    }
+    // 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() }
+    // if (this.name != 'shader' && is_desktop) { cursor_input.focus() }
   },
   blur: function(){
     this.span.classList.remove('focused')
@@ -55,13 +76,13 @@ var BlurredCheckbox = Checkbox.extend({
 
 var BlurredTool = Tool.extend({
   focus: function(){
-    if (current_tool.name == "shader") {
-      shader.toggle(false)
-      current_tool.blur()
-      current_tool = controls.circle
-    }
+    // 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() }
+    // if (this.name != 'shader' && is_desktop) { cursor_input.focus() }
   },
   blur: function(){
     this.span.classList.remove('focused')
diff --git a/js/ui/controls.js b/js/ui/controls.js
index d89c7f6..141bc9a 100644
--- a/js/ui/controls.js
+++ b/js/ui/controls.js
@@ -64,7 +64,7 @@ var controls = (function(){
     }
   }
 
-  controls.webcam = new BlurredTool (webcam_el)
+  controls.webcam = new FileTool (webcam_el)
   controls.webcam.load = function(){
     this.loaded = true
     webcam_close.addEventListener("click", function(){ controls.webcam.blur() })
@@ -101,7 +101,7 @@ var controls = (function(){
     this.update( state )
   }
 
-  ClipboardTool = Tool.extend({
+  ClipboardTool = FileTool.extend({
     blur: function(){
       this.__blur()
       clipboard.hide()
@@ -114,13 +114,14 @@ var controls = (function(){
   }
   controls.load = new ClipboardTool (load_el)
   controls.load.use = function(){
+    // console.log("use")
     clipboard.show()
     clipboard.import_mode()
   }
   
   //
 
-  var ShaderTool = Tool.extend({
+  var ShaderTool = FileTool.extend({
     active: false,
     use: function(state){
       this.active = typeof state == "boolean" ? state : ! this.active
@@ -130,6 +131,7 @@ var controls = (function(){
       } else {
         shader_rapper.style.display = "none"
       }
+      console.log("use", this.active)
     },
     done: function(){
       this.use(false)
@@ -141,11 +143,11 @@ var controls = (function(){
     var fn = shader.build(shader_textarea.value)
     fn && shader.run(canvas)
   })
-  controls.animate = new Checkbox (animate_checkbox)
+  controls.animate = new BlurredCheckbox (animate_checkbox)
   controls.animate.use = function(state){
     var state = shader.toggle()
     this.update(state)
-    controls.shader.focus()
+    // controls.shader.focus()
     controls.shader.use(true)
   }