feat(keyboard): remove explicit binding

lib/features/keyboard/Keyboard.js

@@ -3,9 +3,7 @@ import {
 } from 'min-dash';
 
 import {
-  closest as domClosest,
-  event as domEvent,
-  matches as domMatches
+  event as domEvent
 } from 'min-dom';
 
 import {
@@ -18,10 +16,11 @@ import {
 var KEYDOWN_EVENT = 'keyboard.keydown',
     KEYUP_EVENT = 'keyboard.keyup';
 
-var HANDLE_MODIFIER_ATTRIBUTE = 'input-handle-modified-keys';
-
 var DEFAULT_PRIORITY = 1000;
 
+var compatMessage = 'Explicit binding of keyboard to an element got removed. For more information, see https://github.com/bpmn-io/diagram-js/issues/661';
+
+
 /**
  * A keyboard abstraction that may be activated and
  * deactivated by users at will, consuming key events
@@ -40,16 +39,18 @@ var DEFAULT_PRIORITY = 1000;
  *
  * All events contain one field which is node.
  *
- * A default binding for the keyboard may be specified via the
- * `keyboard.bindTo` configuration option.
+ * Specify the initial keyboard binding state via the
+ * `keyboard.bind=true|false` configuration option.
  *
  * @param {Config} config
  * @param {EventBus} eventBus
  */
-export default function Keyboard(config, eventBus) {
+export default function Keyboard(config, canvas, eventBus) {
   var self = this;
 
   this._config = config || {};
+
+  this._canvas = canvas;
   this._eventBus = eventBus;
 
   this._keydownHandler = this._keydownHandler.bind(this);
@@ -63,22 +64,22 @@ export default function Keyboard(config, eventBus) {
   });
 
   eventBus.on('diagram.init', function() {
-    self._fire('init');
-  });
+    if (self._config.bindTo) {
+      throw new Error('unsupported configuration <keyboard.bindTo>: ' + compatMessage);
+    }
 
-  eventBus.on('attach', function() {
-    if (config && config.bindTo) {
-      self.bind(config.bindTo);
+    if (self._config.bind !== false) {
+      self.bind();
     }
-  });
 
-  eventBus.on('detach', function() {
-    self.unbind();
+    self._fire('init');
   });
+
 }
 
 Keyboard.$inject = [
   'config.keyboard',
+  'canvas',
   'eventBus'
 ];
 
@@ -109,34 +110,19 @@ Keyboard.prototype._keyHandler = function(event, type) {
 };
 
 Keyboard.prototype._isEventIgnored = function(event) {
-  return isInput(event.target) && this._isModifiedKeyIgnored(event);
-};
-
-Keyboard.prototype._isModifiedKeyIgnored = function(event) {
-  if (!isCmd(event)) {
-    return true;
-  }
-
-  var allowedModifiers = this._getAllowedModifiers(event.target);
-  return allowedModifiers.indexOf(event.key) === -1;
+  return false;
 };
 
-Keyboard.prototype._getAllowedModifiers = function(element) {
-  var modifierContainer = domClosest(element, '[' + HANDLE_MODIFIER_ATTRIBUTE + ']', true);
+Keyboard.prototype.bind = function(node) {
 
-  if (!modifierContainer || (this._node && !this._node.contains(modifierContainer))) {
-    return [];
+  if (node) {
+    throw new Error('unsupported argument <node>: ' + compatMessage);
   }
 
-  return modifierContainer.getAttribute(HANDLE_MODIFIER_ATTRIBUTE).split(',');
-};
-
-Keyboard.prototype.bind = function(node) {
-
   // make sure that the keyboard is only bound once to the DOM
   this.unbind();
 
-  this._node = node;
+  node = this._node = this._canvas._svg;
 
   // bind key events
   domEvent.bind(node, 'keydown', this._keydownHandler, true);
@@ -193,12 +179,4 @@ Keyboard.prototype.removeListener = function(listener, type) {
 Keyboard.prototype.hasModifier = hasModifier;
 Keyboard.prototype.isCmd = isCmd;
 Keyboard.prototype.isShift = isShift;
-Keyboard.prototype.isKey = isKey;
-
-
-
-// helpers ///////
-
-function isInput(target) {
-  return target && (domMatches(target, 'input, textarea') || target.contentEditable === 'true');
-}
+Keyboard.prototype.isKey = isKey;