-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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
Conversation
src/js/ui/crop.js
Outdated
destroy() { | ||
this._removeEvent(); | ||
snippet.forEach(this, (value, key) => { | ||
this[key] = null; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
crop 객체의 모든 프로퍼티를 null
로 초기화 해도 문제가 없을까요?
There was a problem hiding this comment.
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 = { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이름 바뀐게 훨씬 좋네요 ㅎㅎ 👍
src/js/ui/shape.js
Outdated
/** | ||
* 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); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
shapeTypeSelected
가 더 자연스럽지 않을까요?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
넵 맞습니다 감사합니다.ㅎㅎ
src/js/ui/rotate.js
Outdated
// {rotate, setAngle} | ||
this.actions = actions; | ||
this._els.rotateButton.addEventListener('click', this._changeRotateForButton.bind(this)); | ||
this._els.rotateButton.addEventListener('click', this.eventHandler.changeRotate); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
rotationAngleChanged
는 어떨까요?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
넵 반영하겠습니다.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이벤트 핸들러의 이름들이 조금은 와닿지 않는 것 같습니다.
이벤트가 끝나고 실행되는 핸들러들이라면
rotationAngleChanged
, shapeTypeSelected
처럼 이벤트 실행 시점에 맞게 네이밍을 하면 어떨까요?
There was a problem hiding this comment.
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
@@ -1,4 +1,5 @@ | |||
import snippet from 'tui-code-snippet'; | |||
import {helpMenus as HELP_MENUS} from './consts'; |
There was a problem hiding this comment.
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() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
여기는 JSDOC 주석이 빠졌네요. 없어도 되나요?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
넵 이부분도;; 수정하겠습니다.
}); | ||
} | ||
|
||
_removeLoadEvent() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 함수로 주석이 없습니다. 필요한 부분이면 추가해야 할거 같아요.
There was a problem hiding this comment.
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) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
모든 프러퍼티를 초기화하는 코드는 유틸로 빼도 될거 같습니다. 꽤 자주 등장하는 코드 패턴이네요.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
넵 반영하겠습니다. 감사합니다.
src/js/ui/draw.js
Outdated
*/ | ||
_removeEvent() { | ||
this._els.lineSelectButton.removeEventListener('click', this.eventHandler.changeDrawType); | ||
this._els.drawColorpicker.off(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
사소한 거지만 'ColorPicker' 대문자가 되어야 할 것 같아요.
src/js/ui/filter.js
Outdated
} | ||
|
||
_destroyToolInstance() { | ||
this._els.removewhiteDistanceRange.destroy(); |
There was a problem hiding this comment.
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()
호출은 메뉴가 추가될 때 까먹기 쉬울거 같아요. 배열로 관리해서 루프를 돌리면 코드도 깔끔해 지고 유지보수고 좋지 않을까요?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
넵 코드도 줄고 깔끔해질것 같네요 반영해보겠습니다
src/js/ui/icon.js
Outdated
@@ -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), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
오타있습니다. _registeIconHandler
에 r
이 빠졌어요.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
넵 감사합니다.
src/js/ui/shape.js
Outdated
this.actions = actions; | ||
|
||
this._els.shapeSelectButton.addEventListener('click', this._changeShapeHandler.bind(this)); | ||
this._els.shapeSelectButton.addEventListener('click', this.eventHandler.shapeSelect); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
CustomEvent.on 쓰는 부분과 native의 addEventListener를 둘다 사용하니까 코드 관리하기 까다롭지 않으세요? 많은 곳에서 꽤 신경써서 해야 할 것 같은데요.
There was a problem hiding this comment.
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 = { |
There was a problem hiding this comment.
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);
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
라인이 몇줄 더 생겼지만.. 열 길이가 확 줄어들어 보기가 편해졌네요. 비슷하게 되어 있는곳 찾아서 고쳐보도록 하겠습니다.
Please check if the PR fulfills these requirements
fix #xxx[,#xxx]
, where "xxx" is the issue number)Description
issue
작업내용