Improve Layer name editing. Closes #3319

src/navigator/view/ItemView.js

@@ -1,5 +1,5 @@
 import { isUndefined, isString, bindAll } from 'underscore';
-import { getModel } from 'utils/mixins';
+import { getModel, isEscKey, isEnterKey } from 'utils/mixins';
 import Backbone from 'backbone';
 import ComponentView from 'dom_components/view/ComponentView';
 import { eventDrag } from 'dom_components/model/Component';
@@ -18,6 +18,7 @@ export default Backbone.View.extend({
     'mouseover [data-toggle-select]': 'handleHover',
     'mouseout [data-toggle-select]': 'handleHoverOut',
     'dblclick [data-name]': 'handleEdit',
+    'keydown [data-name]': 'handleEditKey',
     'focusout [data-name]': 'handleEditEnd'
   },
 
@@ -163,6 +164,7 @@ export default Backbone.View.extend({
     const inputEl = this.getInputName();
     inputEl[inputProp] = true;
     inputEl.focus();
+    document.execCommand('selectAll', false, null);
     em && em.setEditing(1);
     $el
       .find(`.${this.inputNameCls}`)
@@ -170,6 +172,11 @@ export default Backbone.View.extend({
       .addClass(clsEdit);
   },
 
+  handleEditKey(ev) {
+    ev.stopPropagation();
+    (isEscKey(ev) || isEnterKey(ev)) && this.handleEditEnd(ev);
+  },
+
   /**
    * Handle with the end of editing of the component name
    */

src/utils/mixins.js

@@ -210,6 +210,7 @@ const getPointerEvent = ev =>
 const getKeyCode = ev => ev.which || ev.keyCode;
 const getKeyChar = ev => String.fromCharCode(getKeyCode(ev));
 const isEscKey = ev => getKeyCode(ev) === 27;
+const isEnterKey = ev => getKeyCode(ev) === 13;
 const isObject = val =>
   val !== null && !Array.isArray(val) && typeof val === 'object';
 const isEmptyObj = val => Object.keys(val).length <= 0;
@@ -236,6 +237,7 @@ export {
   getKeyCode,
   getKeyChar,
   isEscKey,
+  isEnterKey,
   getElement,
   shallowDiff,
   normalizeFloat,