-
Notifications
You must be signed in to change notification settings - Fork 32
자신만의 eg.Axes InputType은 어떻게 만드는가?
InputType은 connect 메소드의 첫번째 파라미터로 전달된 observer의 3개의 메소드를 통해 사용자 입력의 변화량을 전달한다.
Typescript를 사용하는 경우 IInputTypeObserver로 정의된 Observer를 사용할 수 있다.
https://github.com/naver/egjs-axes/blob/master/src/inputType/InputType.tsinterface IInputTypeObserver { options: AxesOption; get(inputType: IInputType): Axis; hold(inputType: IInputType, event); change(inputType: IInputType, event, offset: Axis); release(inputType: IInputType, event, offset: Axis, duration?: number); }
사용자 입력의 시작을 eg.Axes에게 알려준다.
- inputType: 구현한 InputType을 전달한다.
- event: 사용자 입력에서 발생한 이벤트 객체를 전달한다.
observer.hold(this, event);
사용자 입력의 변화량을 eg.Axes에게 알려준다.
- inputType: 구현한 InputType을 전달한다.
- event: 사용자 입력에서 발생한 이벤트 객체를 전달한다.
- offset: eg.Axes와 연결된 축의 변화량을 전달한다.
observer.change(this, event, {
"x": 10,
"y": 0
});
사용자 입력의 종료를 eg.Axes에게 알려준다.
- inputType: 구현한 InputType을 전달한다.
- event: 사용자 입력에서 발생한 이벤트 객체를 전달한다.
- offset: eg.Axes와 연결된 축의 변화량을 전달한다.
- duration: 애니메이션 이동시간을 전달한다.
- release 시점의 축의 변화량이 많은 경우 eg.Axes는 계산된 애니메이션 이동시간으로 좌표를 애니메이션 한다. 만약 축의 변화량이 많지 않은 경우에는 애니메이션 되지 않는다.
- 의도적으로 애니메이션으로 좌표를 이용하고자 한다면 duration 값을 명시한다.
// Animation is decided by eg.Axes.
observer.release(this, event, {
"x": 100,
"y": 0
});
// Increase the x-axis value by 10 for 3 seconds.
observer.release(this, event, {
"x": 10,
"y": 0
}, 3000);
InputType과 맵핑된 축정보를 얻을수 있다.
- inputType: 구현한 InputType을 전달한다.
observer.get(this); // {x: 20}
eg.Axes의 InputType 클래스는 다음 속성과 메소드를 꼭! 구현해야만 한다.
Typescript를 사용하는 경우 IInputType 인터페이스를 구현한 객체를 InputType으로 사용 할 수 있다.
https://github.com/naver/egjs-axes/blob/master/src/inputType/InputType.tsinterface IInputType { axes: string[]; element: HTMLElement; mapAxes(axes: string[]); connect(observer: IInputTypeObserver): IInputType; disconnect(); destroy(); }
만드는 InputType의 생성자는 다음의 형태를 권장한다.
new BlaInput(elemenet, options);
생성자에서는 사용자 입력을 받을 대상 엘리먼트와 옵션을 설정하고, 그외 내부적으로 사용될 속성들을 지정한다.
constructor(el, options) {
this.element = $(el);
this.options = {
...{
scale: 1,
throttle: 100
}, ...options
};
// ...
}
사용자 입력을 받을 수 있는 이벤트를 등록한다. eg.Axes에의해 axes.connect가 호출되는 시점에 불려진다.
connect(observer) {
this.element.addEventListener("wheel", this.onWheel);
return this;
}
eg.Axes의 축 정보를 axes 속성에 저장한다. eg.Axes에의해 axes.connect가 호출되는 시점에 불려진다.
mapAxes(axes) {
this.axes = axes;
}
사용자의 입력을 받을 수 있는 이벤트를 해제한다. eg.Axes에의해 axes.disconnect가 호출되는 시점에 불려진다.
disconnect() {
this.element.removeEventListener("wheel", this.onWheel);
return this;
}
InputType을 소멸한다.
-
element: HTMLElement
- 사용자의 입력 데이터가 발생하는 대상 HTMLElement
-
axes: string[]
- eg.Axes의 축의 키값을 string 배열로 저장한다.
- InputType의 mapAxes 메소드에서 값을 설정한다. 또한, eg.Axes 내부에서도 사용된다.