How to create a custom InputType

How does InputType pass your input to eg.Axes?

InputType passes the amount of user input change via the three methods of observer passed as the first parameter of the connect method.

If you use Typescript, you can use the Observer defined by IInputTypeObserver.
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)

Tells eg.Axes the start of user input.

• inputType: pass the implemented InputType.
• event: pass the event object that originated from user input.

observer.hold(this, event);

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

Tells eg.Axes the amount of change in user input.

• inputType: pass the implemented InputType.
• event: pass the event object that originated from user input.
• offset: pass the amount of change in the axis associated with eg.Axes.

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

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

Tells eg.Axes the end of user input.

• inputType: pass the implemented InputType.
• event: pass the event object that originated from user input.
• offset: pass the amount of change in the axis associated with eg.Axes.
• duration: pass the animation moving time.
  • If there is a large amount of change in the axis at the time of release, eg.Axes animates the coordinates with the calculated movement time of the animation. if the amount of change of the axis is not large, animation is not performed.
  • Specify the duration value if you intentionally use the coordinates in animation.

// 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

Returns the axis information mapped to InputType.

• inputType: pass the implemented InputType.

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

What to implement in InputType.

The InputType class of eg.Axes must implement the following properties and methods.

If you use Typescript, you can use an InputType as an object that implements the IInputType interface.
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

The following types of InputType constructors are recommended.

new BlaInput(elemenet, options);

The constructor specifies the target element to receive user input, and specifies the options and other internally used properties.

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

2. connect(observer: IInputTypeObserver): IInputType required

Register an event that can receive user input. It is called by eg.Axes when axes.connect is called.

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

3. mapAxes(axes: string[]); required

The axis information of eg.Axes is stored in the axes property. It is called by eg.Axes when axes.connect is called.

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

4. disconnect() required

Releases events that can receive user input. It is called by eg.Axes when axes.disconnect is called.

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

5. destroy()

It destroys InputType.

Property

• element: HTMLElement

  • The target HTMLElement for which the user's input data occurs.

• axes: string[]

  • Stores the key value of the axis of eg.Axes as a string array.
  • Set the value in the mapAxes method of InputType. It is also used inside eg.Axes.