diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index 7619d6e06..028c3a0c1 100644 --- a/src/canvas/view/CanvasView.js +++ b/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) { - if (ev.ctrlKey || ev.metaKey) { + remove() { + 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 => { diff --git a/src/commands/index.js b/src/commands/index.js index b6f319247..434a01fe5 100644 --- a/src/commands/index.js +++ b/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; diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index db4b4a5c7..af97f9f54 100644 --- a/src/commands/view/SelectComponent.js +++ b/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(); diff --git a/src/utils/mixins.js b/src/utils/mixins.js index e8915d9e8..77c9189fc 100644 --- a/src/utils/mixins.js +++ b/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 };