자신만의 eg.Axes InputType은 어떻게 만드는가?

InputType은 어떻게 eg.Axes에 사용자의 입력을 전달하는가?

InputType은 connect 메소드의 첫번째 파라미터로 전달된 observer의 3개의 메소드를 통해 사용자 입력의 변화량을 전달한다.

Typescript를 사용하는 경우 IInputTypeObserver로 정의된 Observer를 사용할 수 있다.
https://github.com/naver/egjs-axes/blob/master/src/inputType/InputType.ts

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

1. hold(inputType: IInputType, event)

사용자 입력의 시작을 eg.Axes에게 알려준다.

• inputType: 구현한 InputType을 전달한다.
• event: 사용자 입력에서 발생한 이벤트 객체를 전달한다.

observer.hold(this, event);

2. change(inputType: IInputType, event, offset: Axis)

사용자 입력의 변화량을 eg.Axes에게 알려준다.

• inputType: 구현한 InputType을 전달한다.
• event: 사용자 입력에서 발생한 이벤트 객체를 전달한다.
• offset: eg.Axes와 연결된 축의 변화량을 전달한다.

observer.change(this, event, {
  "x": 10,
  "y": 0
});

3. release(inputType: IInputType, event, offset: Axis, duration?: number)

사용자 입력의 종료를 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);

4. get(inputType: IInputType): Axis

InputType과 맵핑된 축정보를 얻을수 있다.

• inputType: 구현한 InputType을 전달한다.

observer.get(this); // {x: 20}

Custom InputType 구현 대상

eg.Axes의 InputType 클래스는 다음 속성과 메소드를 꼭! 구현해야만 한다.

Typescript를 사용하는 경우 IInputType 인터페이스를 구현한 객체를 InputType으로 사용 할 수 있다.
https://github.com/naver/egjs-axes/blob/master/src/inputType/InputType.ts

interface IInputType {
  axes: string[];
  element: HTMLElement;
  mapAxes(axes: string[]);
  connect(observer: IInputTypeObserver): IInputType;
  disconnect();
  destroy();
}

Method

1. Constrouctor

만드는 InputType의 생성자는 다음의 형태를 권장한다.

new BlaInput(elemenet, options);

생성자에서는 사용자 입력을 받을 대상 엘리먼트와 옵션을 설정하고, 그외 내부적으로 사용될 속성들을 지정한다.

constructor(el, options) {
  this.element = $(el);
  this.options = {
    ...{
       scale: 1,
       throttle: 100
    }, ...options
  };
  // ...
}

2. connect(observer: IInputTypeObserver): IInputType 필수

사용자 입력을 받을 수 있는 이벤트를 등록한다. eg.Axes에의해 axes.connect가 호출되는 시점에 불려진다.

connect(observer) {
    this.element.addEventListener("wheel", this.onWheel);
    return this;
}

3. mapAxes(axes: string[]); 필수

eg.Axes의 축 정보를 axes 속성에 저장한다. eg.Axes에의해 axes.connect가 호출되는 시점에 불려진다.

mapAxes(axes) {
   this.axes = axes;
}

4. disconnect() 필수

사용자의 입력을 받을 수 있는 이벤트를 해제한다. eg.Axes에의해 axes.disconnect가 호출되는 시점에 불려진다.

disconnect() {
    this.element.removeEventListener("wheel", this.onWheel);
    return this;
}

5. destroy()

InputType을 소멸한다.

Property

• element: HTMLElement

  • 사용자의 입력 데이터가 발생하는 대상 HTMLElement

• axes: string[]

  • eg.Axes의 축의 키값을 string 배열로 저장한다.
  • InputType의 mapAxes 메소드에서 값을 설정한다. 또한, eg.Axes 내부에서도 사용된다.