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

jinwoo-kim-nhn · 2020-02-10T06:12:38Z

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

Did "imageEditor.destroy()" but the UI is still active. #334
imageEditor.destroy() 시 UI는 destroy처리가 안되어 있음

작업내용

destroy 코드 추가

junghwan-park · 2020-02-18T02:19:36Z

src/js/ui/crop.js

+ destroy() {
+ this._removeEvent();
+ snippet.forEach(this, (value, key) => {
+ this[key] = null;


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

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

junghwan-park · 2020-02-18T02:20:57Z

src/js/ui/filter.js

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

- this.handler = {
+ this.eventHandler = {


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

junghwan-park · 2020-02-18T02:46:06Z

src/js/ui/shape.js

 /**
 * 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);


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

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

junghwan-park · 2020-02-18T02:46:36Z

src/js/ui/rotate.js

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


rotationAngleChanged 는 어떨까요?

넵 반영하겠습니다.

junghwan-park

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

dongsik-yoo

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

dongsik-yoo · 2020-02-18T02:29:03Z

src/js/ui.js

@@ -1,4 +1,5 @@
 import snippet from 'tui-code-snippet';
+import {helpMenus as HELP_MENUS} from './consts';


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

dongsik-yoo · 2020-02-18T02:30:32Z

src/js/ui.js

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

+ _addMenuEvent() {


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

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

dongsik-yoo · 2020-02-18T02:30:53Z

src/js/ui.js

+ });
+ }
+
+ _removeLoadEvent() {


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

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

dongsik-yoo · 2020-02-18T02:34:10Z

src/js/ui.js

+ this._destroyAllMenu();
+ this._selectedElement.innerHTML = '';
+
+ snippet.forEach(this, (value, key) => {


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

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

dongsik-yoo · 2020-02-18T02:41:56Z

src/js/ui/draw.js

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


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

dongsik-yoo · 2020-02-18T02:44:59Z

src/js/ui/filter.js

+ }
+
+ _destroyToolInstance() {
+ this._els.removewhiteDistanceRange.destroy();


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

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

dongsik-yoo · 2020-02-18T02:46:17Z

src/js/ui/icon.js

@@ -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),


오타있습니다. _registeIconHandler에 r이 빠졌어요.

넵 감사합니다.

dongsik-yoo · 2020-02-18T02:50:24Z

src/js/ui/shape.js

 this.actions = actions;

- this._els.shapeSelectButton.addEventListener('click', this._changeShapeHandler.bind(this));
+ this._els.shapeSelectButton.addEventListener('click', this.eventHandler.shapeSelect);


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

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

dongsik-yoo · 2020-02-18T02:54:18Z

src/js/ui/text.js

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


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);

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

* fix: remove instance for ui - prototype complete * added test and some refactor * apply codereview * apply codereview - 2 * fixed test for icon 404 warning message

jinwoo-kim-nhn and others added 3 commits February 10, 2020 15:11

fix: remove instance for ui - prototype complete

cd9df0c

added test and some refactor

cfaf266

Merge branch 'master' into fix/instancdDestroyForUi

e7c80ae

jinwoo-kim-nhn changed the title ~~fix: remove instance for ui - prototype complete~~ fix: remove instance for ui (fixed #334) Feb 17, 2020

junghwan-park reviewed Feb 18, 2020

View reviewed changes

dongsik-yoo reviewed Feb 18, 2020

View reviewed changes

jinwoo-kim-nhn added 3 commits February 18, 2020 16:39

apply codereview

575f9e5

apply codereview - 2

ed6ea42

fixed test for icon 404 warning message

622ad8e

jinwoo-kim-nhn merged commit 752a6dc into master Feb 18, 2020

jinwoo-kim-nhn deleted the fix/instancdDestroyForUi branch March 20, 2020 08:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jinwoo-kim-nhn commented Feb 10, 2020 •

edited

Loading

junghwan-park Feb 18, 2020

junghwan-park Feb 18, 2020

junghwan-park Feb 18, 2020 •

edited

Loading

junghwan-park Feb 18, 2020 •

edited

Loading

jinwoo-kim-nhn Feb 18, 2020

junghwan-park Feb 18, 2020

jinwoo-kim-nhn Feb 18, 2020

junghwan-park left a comment •

edited

Loading

dongsik-yoo left a comment

dongsik-yoo Feb 18, 2020

dongsik-yoo Feb 18, 2020

jinwoo-kim-nhn Feb 18, 2020

dongsik-yoo Feb 18, 2020

jinwoo-kim-nhn Feb 18, 2020

dongsik-yoo Feb 18, 2020

jinwoo-kim-nhn Feb 18, 2020

dongsik-yoo Feb 18, 2020

dongsik-yoo Feb 18, 2020

jinwoo-kim-nhn Feb 18, 2020

dongsik-yoo Feb 18, 2020

jinwoo-kim-nhn Feb 18, 2020

dongsik-yoo Feb 18, 2020

jinwoo-kim-nhn Feb 18, 2020

dongsik-yoo Feb 18, 2020

jinwoo-kim-nhn Feb 18, 2020

		@@ -1,4 +1,5 @@
		import snippet from 'tui-code-snippet';
		import {helpMenus as HELP_MENUS} from './consts';

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

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

Conversation

jinwoo-kim-nhn commented Feb 10, 2020 • edited Loading

Please check if the PR fulfills these requirements

Description

issue

작업내용

Choose a reason for hiding this comment

Choose a reason for hiding this comment

junghwan-park Feb 18, 2020 • edited Loading

Choose a reason for hiding this comment

junghwan-park Feb 18, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

junghwan-park left a comment • edited Loading

Choose a reason for hiding this comment

dongsik-yoo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jinwoo-kim-nhn commented Feb 10, 2020 •

edited

Loading

junghwan-park Feb 18, 2020 •

edited

Loading

junghwan-park Feb 18, 2020 •

edited

Loading

junghwan-park left a comment •

edited

Loading