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.

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

fix: remove instance for ui (fixed #334) #332

Merged
merged 6 commits into from
Feb 18, 2020

Conversation

jinwoo-kim-nhn
Copy link
Contributor

@jinwoo-kim-nhn jinwoo-kim-nhn commented Feb 10, 2020

Please check if the PR fulfills these requirements

  • It's submitted to right branch according to our branching model
  • It's right issue type on title
  • When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
  • The commit message follows our guidelines
  • Tests for the changes have been added (for bug fixes/features)
  • Docs have been added/updated (for bug fixes/features)
  • It does not introduce a breaking change or has description for the breaking change

Description

issue

작업내용

  • destroy 코드 추가

@jinwoo-kim-nhn jinwoo-kim-nhn changed the title fix: remove instance for ui - prototype complete fix: remove instance for ui (fixed #334) Feb 17, 2020
destroy() {
this._removeEvent();
snippet.forEach(this, (value, key) => {
this[key] = null;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

crop 객체의 모든 프로퍼티를 null로 초기화 해도 문제가 없을까요?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아... 이 메서드가 수행되는 시점에는 이미지에디터 인스턴스가 destroy 되는 시점이겠군요 ㅎㅎ 괜찮을 것 같네요.

@@ -119,7 +129,7 @@ class Filter extends Submenu {
const changeFilterStateForRange =
filterName => (value, isLast) => this._changeFilterState(applyFilter, filterName, isLast);

this.handler = {
this.eventHandler = {
Copy link
Member

@junghwan-park junghwan-park Feb 18, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이름 바뀐게 훨씬 좋네요 ㅎㅎ 👍

/**
* Add event for shape
* @param {Object} actions - actions for shape
* @param {Function} actions.changeShape - change shape mode
* @param {Function} actions.setDrawingShape - set dreawing shape
*/
addEvent(actions) {
this.eventHandler.shapeSelect = this._changeShapeHandler.bind(this);
Copy link
Member

@junghwan-park junghwan-park Feb 18, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shapeTypeSelected가 더 자연스럽지 않을까요?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 맞습니다 감사합니다.ㅎㅎ

// {rotate, setAngle}
this.actions = actions;
this._els.rotateButton.addEventListener('click', this._changeRotateForButton.bind(this));
this._els.rotateButton.addEventListener('click', this.eventHandler.changeRotate);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rotationAngleChanged 는 어떨까요?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 반영하겠습니다.

Copy link
Member

@junghwan-park junghwan-park left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이벤트 핸들러의 이름들이 조금은 와닿지 않는 것 같습니다.
이벤트가 끝나고 실행되는 핸들러들이라면
rotationAngleChanged, shapeTypeSelected 처럼 이벤트 실행 시점에 맞게 네이밍을 하면 어떨까요?

Copy link
Contributor

@dongsik-yoo dongsik-yoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[02/18] 리뷰 완료입니다.수고하셨습니다. 혹시 모르니 개발자 도구에서 이벤트 리스너가 남아있는지 확인해 보면 좋겠어요.
image

src/js/ui.js Outdated
@@ -1,4 +1,5 @@
import snippet from 'tui-code-snippet';
import {helpMenus as HELP_MENUS} from './consts';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

상수이면 내보내기 이름을 HELP_MENUS로 하는게 더 깔끔할 것 같아요.

@@ -376,6 +410,23 @@ class Ui {
this[menuName].addEvent(this._actions[menuName]);
}

_addMenuEvent() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기는 JSDOC 주석이 빠졌네요. 없어도 되나요?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 이부분도;; 수정하겠습니다.

});
}

_removeLoadEvent() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 함수로 주석이 없습니다. 필요한 부분이면 추가해야 할거 같아요.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 ㅎㅎ 빼먹었네요 수정하겠습니다.

src/js/ui.js Outdated
this._destroyAllMenu();
this._selectedElement.innerHTML = '';

snippet.forEach(this, (value, key) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

모든 프러퍼티를 초기화하는 코드는 유틸로 빼도 될거 같습니다. 꽤 자주 등장하는 코드 패턴이네요.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 반영하겠습니다. 감사합니다.

*/
_removeEvent() {
this._els.lineSelectButton.removeEventListener('click', this.eventHandler.changeDrawType);
this._els.drawColorpicker.off();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

사소한 거지만 'ColorPicker' 대문자가 되어야 할 것 같아요.

}

_destroyToolInstance() {
this._els.removewhiteDistanceRange.destroy();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this._els[name].off()destory() 호출은 메뉴가 추가될 때 까먹기 쉬울거 같아요. 배열로 관리해서 루프를 돌리면 코드도 깔끔해 지고 유지보수고 좋지 않을까요?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 코드도 줄고 깔끔해질것 같네요 반영해보겠습니다

@@ -41,11 +52,25 @@ class Icon extends Submenu {
* @param {Function} actions.changeColor - change icon color
*/
addEvent(actions) {
this.actions = actions;
this.eventHandler = {
registerIcon: this._registeIconHandler.bind(this),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오타있습니다. _registeIconHandlerr이 빠졌어요.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 감사합니다.

this.actions = actions;

this._els.shapeSelectButton.addEventListener('click', this._changeShapeHandler.bind(this));
this._els.shapeSelectButton.addEventListener('click', this.eventHandler.shapeSelect);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CustomEvent.on 쓰는 부분과 native의 addEventListener를 둘다 사용하니까 코드 관리하기 까다롭지 않으세요? 많은 곳에서 꽤 신경써서 해야 할 것 같은데요.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

맞습니다;; 이 부분은 selector 에서 리턴할때 인터페이스를 맞추는 기능으로 감싸면 될것 같은 생각이 드네요.. 좀더 생각해서 저번에 나왔던 이슈인 classList 사용시 닷(.) 체이닝 길이가 길어지는 부분과 함께 리팩토링 이슈로 만들어서 따로 처리 하겠습니다.

/**
* Add event for text
* @param {Object} actions - actions for text
* @param {Function} actions.changeTextStyle - change text style
*/
addEvent(actions) {
this.eventHandler = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shorthand property names를 사용한 이런 코드 패턴은 어떠세요?

const setTextEffect = this._setTextEffectHandler.bind(this);
const setTextAlign = this._setTextAlignHandler.bind(this);

this.eventHandler = {
  setTextEffect, 
  setTextAlign
};

this._els.textAlignButton.addEventListener('click', setTextEffect);
this._els.textAlignButton.addEventListener('click', setTextAlign);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

라인이 몇줄 더 생겼지만.. 열 길이가 확 줄어들어 보기가 편해졌네요. 비슷하게 되어 있는곳 찾아서 고쳐보도록 하겠습니다.

@jinwoo-kim-nhn jinwoo-kim-nhn merged commit 752a6dc into master Feb 18, 2020
@jinwoo-kim-nhn jinwoo-kim-nhn deleted the fix/instancdDestroyForUi branch March 20, 2020 08:12
HerlinMatos pushed a commit to EveryMundo/tui.image-editor that referenced this pull request Jul 2, 2020
* fix: remove instance for ui - prototype complete

* added test and some refactor

* apply codereview

* apply codereview - 2

* fixed test for icon 404 warning message
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants