Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: load-image init event error #75

Merged
merged 2 commits into from
Oct 19, 2018
Merged

fix: load-image init event error #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9380cc6
fix: load-image init event error
jinwoo-kim-nhn Oct 18, 2018
2fc211d
apply codereview
jinwoo-kim-nhn Oct 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions src/js/action.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
));
Expand Down
58 changes: 41 additions & 17 deletions src/js/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ const BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION = '1300';
* @param {Boolean} [option.menuBarPosition=bottom] - Let
* @param {Boolean} [option.applyCropSelectionStyle=false] - Let
* @param {Objecdt} actions - ui action instance
* @ignore
*/
class Ui {
constructor(element, options, actions) {
Expand All @@ -59,6 +58,7 @@ class Ui {
this._subMenuElement = null;
this._makeUiElement(element);
this._setUiSize();
this._initMenuEvent = false;

this._els = {
'undo': this._menuElement.querySelector('#tie-btn-undo'),
Expand All @@ -77,6 +77,7 @@ class Ui {
* Set Default Selection for includeUI
* @param {Object} option - imageEditor options
* @returns {Object} - extends selectionStyle option
* @ignore
*/
setUiDefaultSelectionStyle(option) {
return snippet.extend({
Expand Down Expand Up @@ -113,6 +114,7 @@ class Ui {
if (uiSize) {
this._setUiSize(uiSize);
}

const {width, height} = this._getEditorDimension();
const editorElementStyle = this._editorElement.style;
const {menuBarPosition} = this.options;
Expand All @@ -139,6 +141,7 @@ class Ui {
/**
* Change undo button status
* @param {Boolean} enableStatus - enabled status
* @ignore
*/
changeUndoButtonStatus(enableStatus) {
if (enableStatus) {
Expand All @@ -151,6 +154,7 @@ class Ui {
/**
* Change redo button status
* @param {Boolean} enableStatus - enabled status
* @ignore
*/
changeRedoButtonStatus(enableStatus) {
if (enableStatus) {
Expand All @@ -163,6 +167,7 @@ class Ui {
/**
* Change reset button status
* @param {Boolean} enableStatus - enabled status
* @ignore
*/
changeResetButtonStatus(enableStatus) {
if (enableStatus) {
Expand All @@ -175,6 +180,7 @@ class Ui {
/**
* Change delete-all button status
* @param {Boolean} enableStatus - enabled status
* @ignore
*/
changeDeleteAllButtonEnabled(enableStatus) {
if (enableStatus) {
Expand All @@ -187,6 +193,7 @@ class Ui {
/**
* Change delete button status
* @param {Boolean} enableStatus - enabled status
* @ignore
*/
changeDeleteButtonEnabled(enableStatus) {
if (enableStatus) {
Expand Down Expand Up @@ -385,35 +392,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>
Expand All @@ -428,7 +451,7 @@ class Ui {

/**
* get editor area element
* @returns {Object} loadimage optionk
* @returns {Object} load image option
* @private
*/
_getLoadImage() {
Expand All @@ -440,6 +463,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) {
Expand Down
39 changes: 27 additions & 12 deletions test/ui.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ describe('UI', () => {
beforeEach(() => {
uiOptions = {
loadImage: {
path: '',
path: 'mockImagePath',
name: ''
},
menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'],
Expand All @@ -21,6 +21,7 @@ describe('UI', () => {
};
ui = new UI(document.createElement('div'), uiOptions, {});
});

describe('_changeMenu()', () => {
beforeEach(() => {
ui.submenu = 'shape';
Expand Down Expand Up @@ -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 = {
Expand All @@ -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()', () => {
Expand Down