fix: load-image init event error

* fix: load-image init event error * apply codereview
nhn · Oct 19, 2018 · 76dba9d · 76dba9d
1 parent bae6855
commit 76dba9d
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 31 deletions.
diff --git a/src/js/action.js b/src/js/action.js
@@ -84,10 +84,11 @@ export default {
  }
 
  this.ui.initializeImgUrl = URL.createObjectURL(file);
- this.loadImageFromFile(file).then(() => {
+ this.loadImageFromFile(file).then(sizeValue => {
  exitCropOnAction();
  this.clearUndoStack();
- this.ui.resizeEditor();
+ this.ui.activeMenuEvent();
+ this.ui.resizeEditor({imageSize: sizeValue});
  })['catch'](message => (
  Promise.reject(message)
  ));

diff --git a/src/js/ui.js b/src/js/ui.js
@@ -41,7 +41,6 @@ const BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION = '1300';
  * @param {string} options.uiSize.width - width of ui
  * @param {string} options.uiSize.height - height of ui
  * @param {Objecdt} actions - ui action instance
- * @ignore
  */
 class Ui {
  constructor(element, options, actions) {
@@ -62,6 +61,7 @@ class Ui {
  this._subMenuElement = null;
  this._makeUiElement(element);
  this._setUiSize();
+ this._initMenuEvent = false;
 
  this._els = {
  'undo': this._menuElement.querySelector('#tie-btn-undo'),
@@ -80,6 +80,7 @@ class Ui {
  * Set Default Selection for includeUI
  * @param {Object} option - imageEditor options
  * @returns {Object} - extends selectionStyle option
+ * @ignore
  */
  setUiDefaultSelectionStyle(option) {
  return snippet.extend({
@@ -116,6 +117,7 @@ class Ui {
  if (uiSize) {
  this._setUiSize(uiSize);
  }
+
  const {width, height} = this._getEditorDimension();
  const editorElementStyle = this._editorElement.style;
  const {menuBarPosition} = this.options;
@@ -142,6 +144,7 @@ class Ui {
  /**
  * Change undo button status
  * @param {Boolean} enableStatus - enabled status
+ * @ignore
  */
  changeUndoButtonStatus(enableStatus) {
  if (enableStatus) {
@@ -154,6 +157,7 @@ class Ui {
  /**
  * Change redo button status
  * @param {Boolean} enableStatus - enabled status
+ * @ignore
  */
  changeRedoButtonStatus(enableStatus) {
  if (enableStatus) {
@@ -166,6 +170,7 @@ class Ui {
  /**
  * Change reset button status
  * @param {Boolean} enableStatus - enabled status
+ * @ignore
  */
  changeResetButtonStatus(enableStatus) {
  if (enableStatus) {
@@ -178,6 +183,7 @@ class Ui {
  /**
  * Change delete-all button status
  * @param {Boolean} enableStatus - enabled status
+ * @ignore
  */
  changeDeleteAllButtonEnabled(enableStatus) {
  if (enableStatus) {
@@ -190,6 +196,7 @@ class Ui {
  /**
  * Change delete button status
  * @param {Boolean} enableStatus - enabled status
+ * @ignore
  */
  changeDeleteButtonEnabled(enableStatus) {
  if (enableStatus) {
@@ -388,35 +395,51 @@ class Ui {
  /**
  * get editor area element
  * @returns {HTMLElement} editor area html element
+ * @ignore
  */
  getEditorArea() {
  return this._editorElement;
  }
 
+ /**
+ * Add event for menu items
+ * @ignore
+ */
+ activeMenuEvent() {
+ if (this._initMenuEvent) {
+ return;
+ }
+
+ this._addHelpActionEvent('undo');
+ this._addHelpActionEvent('redo');
+ this._addHelpActionEvent('reset');
+ this._addHelpActionEvent('delete');
+ this._addHelpActionEvent('deleteAll');
+
+ this._addDownloadEvent();
+
+ snippet.forEach(this.options.menu, menuName => {
+ this._addMenuEvent(menuName);
+ this._addSubMenuEvent(menuName);
+ });
+ this._initMenu();
+ this._initMenuEvent = true;
+ }
+
  /**
  * Init canvas
+ * @ignore
  */
  initCanvas() {
  const loadImageInfo = this._getLoadImage();
- if (loadImageInfo) {
+ if (loadImageInfo.path) {
  this._actions.main.initLoadImage(loadImageInfo.path, loadImageInfo.name).then(() => {
- this._addHelpActionEvent('undo');
- this._addHelpActionEvent('redo');
- this._addHelpActionEvent('reset');
- this._addHelpActionEvent('delete');
- this._addHelpActionEvent('deleteAll');
-
- this._addDownloadEvent();
- this._addLoadEvent();
-
- snippet.forEach(this.options.menu, menuName => {
- this._addMenuEvent(menuName);
- this._addSubMenuEvent(menuName);
- });
- this._initMenu();
+ this.activeMenuEvent();
  });
  }
 
+ this._addLoadEvent();
+
  const gridVisual = document.createElement('div');
  gridVisual.className = 'tui-image-editor-grid-visual';
  const grid = `<table>
@@ -431,7 +454,7 @@ class Ui {
 
  /**
  * get editor area element
- * @returns {Object} loadimage optionk
+ * @returns {Object} load image option
  * @private
  */
  _getLoadImage() {
@@ -443,6 +466,7 @@ class Ui {
  * @param {string} menuName - menu name
  * @param {boolean} toggle - whether toogle or not
  * @param {boolean} discardSelection - discard selection
+ * @ignore
  */
  changeMenu(menuName, toggle = true, discardSelection = true) {
  if (!this._submenuChangeTransection) {

diff --git a/test/ui.spec.js b/test/ui.spec.js
@@ -12,7 +12,7 @@ describe('UI', () => {
  beforeEach(() => {
  uiOptions = {
  loadImage: {
- path: '',
+ path: 'mockImagePath',
  name: ''
  },
  menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'],
@@ -21,6 +21,7 @@ describe('UI', () => {
  };
  ui = new UI(document.createElement('div'), uiOptions, {});
  });
+
  describe('_changeMenu()', () => {
  beforeEach(() => {
  ui.submenu = 'shape';
@@ -65,8 +66,10 @@ describe('UI', () => {
  });
 
  describe('initCanvas()', () => {
- it('When initCanvas is executed, some internal methods must be run as required.', done => {
- const promise = new Promise(resolve => {
+ let promise;
+
+ beforeEach(() => {
+ promise = new Promise(resolve => {
  resolve();
  });
  ui._editorElement = {
@@ -75,24 +78,36 @@ describe('UI', () => {
  ui._actions.main = {
  initLoadImage: jasmine.createSpy('initLoadImage').and.returnValue(promise)
  };
+ });
 
- spyOn(ui, '_addDownloadEvent');
+ it('When initCanvas is executed, some internal methods must be run as required.', done => {
+ spyOn(ui, 'activeMenuEvent');
  spyOn(ui, '_addLoadEvent');
- spyOn(ui, '_addMenuEvent');
- spyOn(ui, '_addSubMenuEvent');
- spyOn(ui, '_addHelpActionEvent');
- spyOn(ui, '_initMenu');
 
  ui.initCanvas();
  promise.then(() => {
- expect(ui._addDownloadEvent).toHaveBeenCalled();
+ expect(ui.activeMenuEvent).toHaveBeenCalled();
  expect(ui._addLoadEvent).toHaveBeenCalled();
- expect(ui._addMenuEvent).toHaveBeenCalled();
- expect(ui._addSubMenuEvent).toHaveBeenCalled();
- expect(ui._addHelpActionEvent).toHaveBeenCalled();
  done();
  });
  });
+
+ it('`initLoadImage()` should not be run when has not image path.', () => {
+ spyOn(ui, '_getLoadImage').and.returnValue({path: ''});
+
+ ui.initCanvas();
+
+ expect(ui._actions.main.initLoadImage).not.toHaveBeenCalled();
+ });
+
+ it('`_AddLoadEvent()` should be executed even if there is no image path.', () => {
+ spyOn(ui, '_getLoadImage').and.returnValue({path: ''});
+ spyOn(ui, '_addLoadEvent');
+
+ ui.initCanvas();
+
+ expect(ui._addLoadEvent).toHaveBeenCalled();
+ });
  });
 
  describe('_setEditorPosition()', () => {