From f6c78345bea8b0c84925d333f13c1286523a5ad3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=A7=84=EC=9A=B0?= <jw.kim@nhnent.com>
Date: Tue, 2 Oct 2018 15:39:43 +0900
Subject: [PATCH] fix: Backspace does not work at text editing

---
 src/js/graphics.js       | 13 ++++++++++---
 src/js/imageEditor.js    | 19 +++++++++++++++----
 test/imageEditor.spec.js | 15 +++++++++++++++
 3 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/js/graphics.js b/src/js/graphics.js
index af32f71ae..dd41ca807 100644
--- a/src/js/graphics.js
+++ b/src/js/graphics.js
@@ -389,11 +389,18 @@ class Graphics {
 
     /**
      * To data url from canvas
-     * @param {string} type - A DOMString indicating the image format. The default type is image/png.
+     * @param {Object} options - options for toDataURL
+     *   @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png"
+     *   @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg.
+     *   @param {Number} [options.multiplier=1] Multiplier to scale by
+     *   @param {Number} [options.left] Cropping left offset. Introduced in fabric v1.2.14
+     *   @param {Number} [options.top] Cropping top offset. Introduced in fabric v1.2.14
+     *   @param {Number} [options.width] Cropping width. Introduced in fabric v1.2.14
+     *   @param {Number} [options.height] Cropping height. Introduced in fabric v1.2.14
      * @returns {string} A DOMString containing the requested data URI.
      */
-    toDataURL(type) {
-        return this._canvas && this._canvas.toDataURL(type);
+    toDataURL(options) {
+        return this._canvas && this._canvas.toDataURL(options);
     }
 
     /**
diff --git a/src/js/imageEditor.js b/src/js/imageEditor.js
index dfa3004db..96f756273 100644
--- a/src/js/imageEditor.js
+++ b/src/js/imageEditor.js
@@ -295,6 +295,10 @@ class ImageEditor {
      */
     /* eslint-disable complexity */
     _onKeyDown(e) {
+        const activeObject = this._graphics.getActiveObject();
+        const activeObjectGroup = this._graphics.getActiveGroupObject();
+        const existRemoveObject = activeObject || activeObjectGroup;
+
         if ((e.ctrlKey || e.metaKey) && e.keyCode === keyCodes.Z) {
             // There is no error message on shortcut when it's empty
             this.undo()['catch'](() => {});
@@ -305,7 +309,7 @@ class ImageEditor {
             this.redo()['catch'](() => {});
         }
 
-        if ((e.keyCode === keyCodes.BACKSPACE || e.keyCode === keyCodes.DEL)) {
+        if (((e.keyCode === keyCodes.BACKSPACE || e.keyCode === keyCodes.DEL) && existRemoveObject)) {
             e.preventDefault();
             this.removeActiveObject();
         }
@@ -1226,7 +1230,14 @@ class ImageEditor {
 
     /**
      * Get data url
-     * @param {string} type - A DOMString indicating the image format. The default type is image/png.
+     * @param {Object} options - options for toDataURL
+     *   @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png"
+     *   @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg.
+     *   @param {Number} [options.multiplier=1] Multiplier to scale by
+     *   @param {Number} [options.left] Cropping left offset. Introduced in fabric v1.2.14
+     *   @param {Number} [options.top] Cropping top offset. Introduced in fabric v1.2.14
+     *   @param {Number} [options.width] Cropping width. Introduced in fabric v1.2.14
+     *   @param {Number} [options.height] Cropping height. Introduced in fabric v1.2.14
      * @returns {string} A DOMString containing the requested data URI
      * @example
      * imgEl.src = imageEditor.toDataURL();
@@ -1235,8 +1246,8 @@ class ImageEditor {
      *      imageEditor.addImageObject(imgUrl);
      * });
      */
-    toDataURL(type) {
-        return this._graphics.toDataURL(type);
+    toDataURL(options) {
+        return this._graphics.toDataURL(options);
     }
 
     /**
diff --git a/test/imageEditor.spec.js b/test/imageEditor.spec.js
index 83a02c457..8bdf02730 100644
--- a/test/imageEditor.spec.js
+++ b/test/imageEditor.spec.js
@@ -6,6 +6,7 @@
 import snippet from 'tui-code-snippet';
 import Promise from 'core-js/library/es6/promise';
 import ImageEditor from '../src/js/imageEditor';
+import consts from '../src/js/consts';
 
 describe('ImageEditor', () => {
     // hostnameSent module scope variable can not be reset.
@@ -58,6 +59,20 @@ describe('ImageEditor', () => {
             });
         });
 
+        it('`preventDefault` of BACKSPACE key events should not be executed when object is selected state.', () => {
+            const spyCallback = jasmine.createSpy();
+
+            spyOn(imageEditor._graphics, 'getActiveObject').and.returnValue(null);
+            spyOn(imageEditor._graphics, 'getActiveGroupObject').and.returnValue(null);
+
+            imageEditor._onKeyDown({
+                keyCode: consts.keyCodes.BACKSPACE,
+                preventDefault: spyCallback
+            });
+
+            expect(spyCallback).not.toHaveBeenCalled();
+        });
+
         describe('removeActiveObject()', () => {
             it('_removeObjectStream should be executed when group exists.', () => {
                 spyOn(imageEditor._graphics, 'getActiveObject');