Allow the main view hold keyboard focus

public/red/ui/palette.js

@@ -169,6 +169,7 @@ RED.palette = (function() {
                 container:'body'
             });
             $(d).click(function() {
+                RED.view.focus();
                 var help = '<div class="node-help">'+($("script[data-help-name|='"+d.type+"']").html()||"")+"</div>";
                 $("#tab-info").html(help);
             });
@@ -176,7 +177,8 @@ RED.palette = (function() {
                 helper: 'clone',
                 appendTo: 'body',
                 revert: true,
-                revertDuration: 50
+                revertDuration: 50,
+                start: function() {RED.view.focus();}
             });
 
             setLabel(nt,$(d),label);

public/red/ui/sidebar.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2013 IBM Corp.
+ * Copyright 2013, 2015 IBM Corp.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -60,9 +60,8 @@ RED.sidebar = (function() {
                     $("#sidebar").width(0);
                     RED.menu.setSelected("btn-sidebar",true);
                     RED.view.resize();
+                    eventHandler.emit("resize");
                 }
-
-                
                 sidebarSeparator.width = $("#sidebar").width();
             },
             drag: function(event,ui) {
@@ -102,7 +101,7 @@ RED.sidebar = (function() {
 
                 sidebar_tabs.resize();
                 RED.view.resize();
-                    
+                eventHandler.emit("resize");
             },
             stop:function(event,ui) {
                 RED.view.resize();
@@ -117,6 +116,7 @@ RED.sidebar = (function() {
                 }
                 $("#sidebar-separator").css("left","auto");
                 $("#sidebar-separator").css("right",($("#sidebar").width()+13)+"px");
+                eventHandler.emit("resize");
             }
     });
     
@@ -127,6 +127,7 @@ RED.sidebar = (function() {
             $("#main-container").removeClass("sidebar-closed");
             sidebar_tabs.resize();
         }
+        eventHandler.emit("resize");
     }
     
     function showSidebar(id) {
@@ -145,13 +146,33 @@ RED.sidebar = (function() {
         RED.sidebar.info.show();
     }
     
+    var eventHandler = (function() {
+        var handlers = {};
+        
+        return {
+            on: function(evt,func) {
+                handlers[evt] = handlers[evt]||[];
+                handlers[evt].push(func);
+            },
+            emit: function(evt,arg) {
+                if (handlers[evt]) {
+                    for (var i=0;i<handlers[evt].length;i++) {
+                        handlers[evt][i](arg);
+                    }
+                    
+                }
+            }
+        }
+    })();
+    
     return {
         init: init,
         addTab: addTab,
         removeTab: removeTab,
         show: showSidebar,
         containsTab: containsTab,
-        toggleSidebar: toggleSidebar
+        toggleSidebar: toggleSidebar,
+        on: eventHandler.on
     }
     
 })();

public/red/ui/view.js

@@ -67,8 +67,12 @@ RED.view = (function() {
         .append("svg:svg")
         .attr("width", space_width)
         .attr("height", space_height)
+        .attr("tabindex",1)
         .attr("pointer-events", "all")
-        .style("cursor","crosshair");
+        .style("cursor","crosshair")
+        .on("mousedown", function() {
+            this.focus();
+        });
         
     var vis = outer
         .append('svg:g')
@@ -1064,6 +1068,7 @@ RED.view = (function() {
     }
 
     function nodeMouseDown(d) {
+        focusView();
         //var touch0 = d3.event;
         //var pos = [touch0.pageX,touch0.pageY];
         //RED.touch.radialMenu.show(d3.select(this),pos);
@@ -1319,7 +1324,7 @@ RED.view = (function() {
                             .attr("height",node_height-12)
                             .attr("fill",function(d) { return d._def.color;})
                             .attr("cursor","pointer")
-                            .on("mousedown",function(d) {if (!lasso) { d3.select(this).attr("fill-opacity",0.2);d3.event.preventDefault(); d3.event.stopPropagation();}})
+                            .on("mousedown",function(d) {if (!lasso) {focusView();d3.select(this).attr("fill-opacity",0.2);d3.event.preventDefault(); d3.event.stopPropagation();}})
                             .on("mouseup",function(d) {if (!lasso) { d3.select(this).attr("fill-opacity",0.4);d3.event.preventDefault();d3.event.stopPropagation();}})
                             .on("mouseover",function(d) {if (!lasso) { d3.select(this).attr("fill-opacity",0.4);}})
                             .on("mouseout",function(d) {if (!lasso) {
@@ -1656,6 +1661,7 @@ RED.view = (function() {
                     selected_link = mousedown_link;
                     updateSelection();
                     redraw();
+                    focusView();
                     d3.event.stopPropagation();
                 })
                 .on("touchstart",function(d) {
@@ -1664,6 +1670,7 @@ RED.view = (function() {
                     selected_link = mousedown_link;
                     updateSelection();
                     redraw();
+                    focusView();
                     d3.event.stopPropagation();
                 });
             l.append("svg:path").attr("class","link_outline link_path");
@@ -1734,6 +1741,10 @@ RED.view = (function() {
         }
     }
     
+    function focusView() {
+        $("#chart svg").focus();
+    }
+
     /**
      * Imports a new collection of nodes from a JSON String.
      *  - all get new IDs assigned
@@ -2058,6 +2069,7 @@ RED.view = (function() {
         RED.keyboard.remove(/* ESCAPE */ 27);
     }
 
+    
     $('#chart').on("dragenter",function(event) {
         if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1) {
             $("#dropTarget").css({display:'table'});
@@ -2119,6 +2131,7 @@ RED.view = (function() {
                 setDirty(d);
             }
         },
+        focus: focusView,
         importNodes: importNodes,
         resize: function() {
             workspace_tabs.resize();

public/style.css

@@ -259,7 +259,9 @@ span.deploy-button-group.open > #btn-deploy.disabled + a {
    left:0px;
    right:0px;
 }
-
+#chart svg:focus {
+    outline: none;
+}
 #workspace-toolbar {
     display: none;
     position: absolute;