Merge branch 'master' into production

Author: lja1018

apps/image-editor/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "tui-image-editor",
   "author": "NHN. FE Development Lab <[email protected]>",
-  "version": "3.14.0",
+  "version": "3.14.1",
   "license": "MIT",
   "repository": {
     "type": "git",

apps/image-editor/package.json

@@ -32,6 +32,16 @@ const DEFAULT_HORIZONTAL_SCROLL_RATIO = {
   BORDER_RADIUS: 0.003,
 };
 const DEFAULT_ZOOM_LEVEL = 1.0;
+const {
+  ZOOM_CHANGED,
+  ADD_TEXT,
+  TEXT_EDITING,
+  OBJECT_MODIFIED,
+  KEY_DOWN,
+  KEY_UP,
+  HAND_STARTED,
+  HAND_STOPPED,
+} = eventNames;
 
 /**
  * Zoom components
@@ -88,8 +98,8 @@ class Zoom extends Component {
       moveHand: this._onMouseMoveWithHandMode.bind(this),
       stopHand: this._onMouseUpWithHandMode.bind(this),
       zoomChanged: this._changeScrollState.bind(this),
-      keydown: this._onKeyDown.bind(this),
-      keyup: this._onKeyUp.bind(this),
+      keydown: this._startHandModeWithSpaceBar.bind(this),
+      keyup: this._endHandModeWithSpaceBar.bind(this),
     };
 
     const canvas = this.getCanvas();
@@ -114,19 +124,38 @@ class Zoom extends Component {
      */
     this._horizontalScroll = new fabric.Rect(DEFAULT_SCROLL_OPTION);
 
-    canvas.on(eventNames.ZOOM_CHANGED, this._listeners.zoomChanged);
+    canvas.on(ZOOM_CHANGED, this._listeners.zoomChanged);
 
-    fabric.util.addListener(document, 'keydown', this._listeners.keydown);
-    fabric.util.addListener(document, 'keyup', this._listeners.keyup);
+    this.graphics.on(ADD_TEXT, this._startTextEditingHandler.bind(this));
+    this.graphics.on(TEXT_EDITING, this._startTextEditingHandler.bind(this));
+    this.graphics.on(OBJECT_MODIFIED, this._stopTextEditingHandler.bind(this));
+    fabric.util.addListener(document, KEY_DOWN, this._listeners.keydown);
+    fabric.util.addListener(document, KEY_UP, this._listeners.keyup);
   }
 
   /**
-   * Keydown event handler
+   * Handler when you started editing text
+   * @private
+   */
+  _startTextEditingHandler() {
+    this.isTextEditing = true;
+  }
+
+  /**
+   * Handler when you stopped editing text
+   * @private
+   */
+  _stopTextEditingHandler() {
+    this.isTextEditing = false;
+  }
+
+  /**
+   * Handler who turns on hand mode when the space bar is down
    * @param {KeyboardEvent} e - Event object
    * @private
    */
-  _onKeyDown(e) {
-    if (this.withSpace) {
+  _startHandModeWithSpaceBar(e) {
+    if (this.withSpace || this.isTextEditing) {
       return;
     }
 
@@ -138,11 +167,11 @@ class Zoom extends Component {
   }
 
   /**
-   * Keyup event handler
+   * Handler who turns off hand mode when space bar is up
    * @param {KeyboardEvent} e - Event object
    * @private
    */
-  _onKeyUp(e) {
+  _endHandModeWithSpaceBar(e) {
     if (e.keyCode === keyCodes.SPACE) {
       e.preventDefault();
       this.withSpace = false;
@@ -239,7 +268,7 @@ class Zoom extends Component {
     canvas.selection = false;
     canvas.defaultCursor = 'grab';
 
-    canvas.fire(eventNames.HAND_STARTED);
+    canvas.fire(HAND_STARTED);
   }
 
   /**
@@ -257,7 +286,7 @@ class Zoom extends Component {
 
     this._startHandPoint = null;
 
-    canvas.fire(eventNames.HAND_STOPPED);
+    canvas.fire(HAND_STOPPED);
   }
 
   /**
@@ -657,7 +686,7 @@ class Zoom extends Component {
    * @param {number} zoomLevel - 'zoomChanged' event params
    */
   _fireZoomChanged(canvas, zoomLevel) {
-    canvas.fire(eventNames.ZOOM_CHANGED, { viewport: canvas.calcViewportBoundaries(), zoomLevel });
+    canvas.fire(ZOOM_CHANGED, { viewport: canvas.calcViewportBoundaries(), zoomLevel });
   }
 
   /**

apps/image-editor/src/js/component/zoom.js

@@ -167,6 +167,8 @@ export const eventNames = {
   ZOOM_CHANGED: 'zoomChanged',
   HAND_STARTED: 'handStarted',
   HAND_STOPPED: 'handStopped',
+  KEY_DOWN: 'keydown',
+  KEY_UP: 'keyup',
 };
 
 /**

apps/image-editor/src/js/consts.js

@@ -1,6 +1,6 @@
 {
   "name": "@toast-ui/react-image-editor",
-  "version": "3.14.0",
+  "version": "3.14.1",
   "description": "TOAST UI Image-Editor for React",
   "main": "dist/toastui-react-image-editor.js",
   "files": [
@@ -53,6 +53,6 @@
   },
   "dependencies": {
     "fabric": "^4.2.0",
-    "tui-image-editor": "^3.14.0"
+    "tui-image-editor": "^3.14.1"
   }
 }

apps/react-image-editor/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@toast-ui/vue-image-editor",
-  "version": "3.14.0",
+  "version": "3.14.1",
   "description": "TOAST UI Image-Editor for Vue",
   "main": "dist/toastui-vue-image-editor.js",
   "files": [
@@ -43,6 +43,6 @@
   },
   "dependencies": {
     "fabric": "^4.2.0",
-    "tui-image-editor": "^3.14.0"
+    "tui-image-editor": "^3.14.1"
   }
 }

apps/react-image-editor/package.json

@@ -2,5 +2,5 @@
   "packages": [
     "apps/*"
   ],
-  "version": "3.14.0"
+  "version": "3.14.1"
 }