컬러피커 인스턴스 객체로 만드는 방식에 대하여..

[easylogic]

컬러피커 인스턴스 객체로 만드는 방식에 대하여..

[easylogic]

좋은 말씀 감사합니다.

일단 컬러 라이브러리를 @easylogic/color 로 분리해놓은 상태라 colorpicker 도 이걸 쓰는 방법으로 구조를 맞추면 함수를 외부로 빼지 않아도 됩니다. @easylogic/image-filter, @easylogic/gl-filter 도 모두 빠진 상태라 순수하게 컬러피커 코드만 남겨두는 걸로 하면 될 것 같습니다.

컬러 피커 생성 방법은 방법2) 를 기본으로 하고, create 함수는 deprecated 된 함수로 남겨두면 될 것 같아요.

[redgoose-dev]

export 함수 하나로 변경하고 속에 create()메서드를 임시로 두는 방식으로 겉부분 구조를 조금 바꿔볼께요.

[easylogic]

^^ 그럼 new 로 먼저 적용하시죠.

중간에 react, vue 래퍼만들면 어짜피 감싸는거라 상관 없을 것 같고

현재 native 로 그대로 쓰는 곳이 거의 없을 거라... 괜찮습니다. ^^

[redgoose-dev]

리엑트나 뷰 래퍼는 그들에 맞는 규칙으로 감싸서 사용하는 것일테니 나중에 umd로 뽑아낼때 좀 테스트가 필요할것입니다. ㅎㅎ
핸재 둔 부분이 코드로 옵션 디폴트값들을 배치하고 노출하는 메서드나 값들을 조절할 수 있을거라는 생각이 들어 조절할 여지를 두었습니다.

[easylogic]

넵, ^^ 그대로 진행하면 될 것 같습니다.

[redgoose-dev]

방법1은 객체고, 방법2는 클래스나 함수의 성격을 가지고 있는데 두개 다 사용할 수 있는 방법이 있을까요?
둘다 사용하기 힘들면 일단 create()부분은 빼둘 생각이긴 합니다.

1fcd113 커밋해서 적용은 해뒀습니다.
https://github.com/easylogic/colorpicker/blob/master/src/colorpicker/index.js

[easylogic]

colorpicker/src/colorpicker/index.js

Lines 7 to 27 in 1fcd113

	function ColorPicker(options) {
	let core;
	// merge options
	options = Object.assign({}, this.defaults, options);
	// switch theme
	switch (options.type) {
	case 'circle':
	core = new CircleColorPicker(options);
	break;
	case 'ring':
	core = new RingColorPicker(options);
	break;
	default:
	core = new Default(options);
	break;
	}
	return core;
	}

export 를 클래스를 그대로 해주시면 외부에서 new 로 쓰면 되는데요.

이건 취사 선택의 문제인 것 같아요.

https://github.com/casesandberg/react-color

여기 같은 경우는 React 컴포넌트 그대로 들어가는거라 개별로 분리 되어 있는데요.

사용할때 해당 컬러피커 스타일을 그대로 가지고 와서 쓰느냐 아님 그냥 파라미터로 지정해서 쓰느냐인데 ^^

보통 어떻게 쓰는게 좋을까요?

[redgoose-dev]

사용법에 따른 취향인거 같긴 합니다. ㅎㅎ
일단 테마는 얼추 거의 다 정리는 한거 같습니다. (한개만 만들면 끝나겠네요..)
방금 커밋한 방식으로 사용하는 법은

const picker = new ColorPicker({
  container: document.getElementById('basic'),
});

이런 모습이 됩니다. 개인적으로 new로 인스턴스 객체로 만들어 사용하는것을 선호하긴 합니다. ㅎㅎ

방식이 변하면 기존 버전에서 마이그레이션이 필요하게 되어버리죠. 이게 좀 걱정이긴 합니다만.. 나중에 닥치게 되는 일이겠죠 ㅋ