Enable canvas to listen canvas drag

src/canvas/view/CanvasView.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone';
-import { on, off, getElement } from 'utils/mixins';
+import { on, off, getElement, getKeyChar } from 'utils/mixins';
 const FrameView = require('./FrameView');
 const $ = Backbone.$;
 let timerZoom;
@@ -18,7 +18,7 @@ module.exports = Backbone.View.extend({
   },
 
   initialize(o) {
-    _.bindAll(this, 'renderBody', 'onFrameScroll', 'clearOff');
+    _.bindAll(this, 'renderBody', 'onFrameScroll', 'clearOff', 'onKeyPress');
     on(window, 'scroll resize', this.clearOff);
     this.config = o.config || {};
     this.em = this.config.em || {};
@@ -27,16 +27,44 @@ module.exports = Backbone.View.extend({
     this.className = this.config.stylePrefix + 'canvas';
     this.listenTo(this.em, 'change:canvasOffset', this.clearOff);
     this.listenTo(this.em, 'change:zoom', this.onZoomChange);
+    this.toggleListeners(1);
     this.frame = new FrameView({
       model: this.model.get('frame'),
       config: this.config
     });
   },
 
-  onWheel(ev) {
+  remove() {
-    if (ev.ctrlKey || ev.metaKey) {
+    Backbone.View.prototype.remove.apply(this, arguments);
+    this.toggleListeners();
+  },
+
+  toggleListeners(enable) {
+    const method = enable ? 'on' : 'off';
+    const methods = { on, off };
+    methods[method](document, 'keypress', this.onKeyPress);
+  },
+
+  onKeyPress(ev) {
+    const { em } = this;
+    const key = getKeyChar(ev);
+
+    if (key === ' ' && em.getZoomDecimal() !== 1) {
+      this.preventDefault(ev);
+      em.get('Editor').runCommand('core:canvas-drag');
+    }
+  },
+
+  preventDefault(ev) {
+    if (ev) {
       ev.preventDefault();
       ev._parentEvent && ev._parentEvent.preventDefault();
+    }
+  },
+
+  onWheel(ev) {
+    if (ev.ctrlKey || ev.metaKey) {
+      this.preventDefault(ev);
       const { em } = this;
       const delta = Math.max(-1, Math.min(1, ev.wheelDelta || -ev.detail));
       const zoom = em.get('zoom');
@@ -242,7 +270,7 @@ module.exports = Backbone.View.extend({
       };
 
       [
-        { event: 'keydown keyup', class: 'KeyboardEvent' },
+        { event: 'keydown keyup keypress', class: 'KeyboardEvent' },
         { event: 'wheel', class: 'WheelEvent' }
       ].forEach(obj =>
         obj.event.split(' ').forEach(event => {

src/commands/index.js

@@ -26,7 +26,7 @@
  * @module Commands
  */
 
-import { isFunction, isUndefined } from 'underscore';
+import { isFunction } from 'underscore';
 import CommandAbstract from './view/CommandAbstract';
 
 module.exports = () => {
@@ -239,11 +239,13 @@ module.exports = () => {
      * myCommand.run();
      * */
     get(id) {
-      var el = commands[id];
+      let el = commands[id];
 
-      if (typeof el == 'function') {
+      if (isFunction(el)) {
         el = new el(c);
         commands[id] = el;
+      } else if (!el) {
+        em.logWarning(`'${id}' command not found`);
       }
 
       return el;

src/commands/view/SelectComponent.js

@@ -3,7 +3,6 @@ import { on, off, getUnitFromValue } from 'utils/mixins';
 
 const ToolbarView = require('dom_components/view/ToolbarView');
 const Toolbar = require('dom_components/model/Toolbar');
-const key = require('keymaster');
 const $ = require('backbone').$;
 let showOffsets;
 
@@ -44,7 +43,7 @@ module.exports = {
    * @private
    * */
   toggleSelectComponent(enable) {
-    const em = this.em;
+    const { em } = this;
     const method = enable ? 'on' : 'off';
     const methods = { on, off };
     const body = this.getCanvasBody();

src/utils/mixins.js

@@ -126,7 +126,16 @@ const getModel = (el, $) => {
  * @param  {Event} ev
  * @return {Event}
  */
-const getPointerEvent = (ev) => ev.touches && ev.touches[0] ? ev.touches[0] : ev;
+const getPointerEvent = ev =>
+  ev.touches && ev.touches[0] ? ev.touches[0] : ev;
+
+/**
+ * Get cross-browser keycode
+ * @param  {Event} ev
+ * @return {Number}
+ */
+const getKeyCode = ev => ev.which || ev.keyCode;
+const getKeyChar = ev => String.fromCharCode(getKeyCode(ev));
 
 export {
   on,
@@ -136,9 +145,11 @@ export {
   matches,
   getModel,
   camelCase,
+  getKeyCode,
+  getKeyChar,
   getElement,
   shallowDiff,
   normalizeFloat,
   getPointerEvent,
-  getUnitFromValue,
+  getUnitFromValue
 };