Skip to content

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

Son Chan Uk edited this page Aug 24, 2017 · 12 revisions

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

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

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 내부에서도 사용된다.