How to use the @egjs/axes.PanInput function in @egjs/axes

*
				 * viewer.on({
				 *	"imageError" : function(evt) {
				 *		// Error handling
				 *		console.log(e.imageUrl);
				 *	}
				 * });
				 */
				this.trigger("imageError", {
					imageUrl: evt.imageUrl
				});
			}
		});

		// Init Axes
		this._panInput = new PanInput(this._el, {
			scale: [this._panScale, this._panScale]
		});
		this._axes = new Axes({
			angle: {
				range: [0, 359],
				circular: true
			}
		}).on({
			"change": evt => {
				const curr = Math.floor(evt.pos.angle / (360 / this._frameCount));
				const frameIndex = this._frameCount - curr - 1;

				this._sprites.setFrameIndex(frameIndex);

				/**
				 * An event that occurs when the image index is changed by the user's left / right panning

const scrollArea = state.scrollArea;
    const horizontal = options.horizontal;

    this.axes = new Axes({
      flick: {
        range: [scrollArea.prev, scrollArea.next],
        circular: options.circular,
        bounce: [0, 0], // will be updated in resize()
      },
    }, {
      easing: options.panelEffect,
      deceleration: options.deceleration,
      interruptable: true,
    });

    this.panInput = new PanInput(this.viewportElement, {
      inputType: options.inputType,
      thresholdAngle: options.thresholdAngle,
      scale: options.horizontal ? [-1, 0] : [0, -1],
    });

    this.axes.connect(horizontal ? ["flick", ""] : ["", "flick"], this.panInput);
  }

var state = this.state;
    var options = this.options;
    var scrollArea = state.scrollArea;
    var horizontal = options.horizontal;
    this.axes = new Axes({
      flick: {
        range: [scrollArea.prev, scrollArea.next],
        circular: options.circular,
        bounce: [0, 0]
      }
    }, {
      easing: options.panelEffect,
      deceleration: options.deceleration,
      interruptable: true
    });
    this.panInput = new PanInput(this.viewportElement, {
      inputType: options.inputType,
      thresholdAngle: options.thresholdAngle,
      scale: options.horizontal ? [-1, 0] : [0, -1]
    });
    this.axes.connect(horizontal ? ["flick", ""] : ["", "flick"], this.panInput);
  };

_bindEvents(bind) {
		const options = this.options;
		const $wrapper = this.$wrapper;
		const axesInst = this._axesInst;

		if (bind) {
			this._panInput = new PanInput($wrapper, {
				inputType: options.inputType,
				thresholdAngle: options.thresholdAngle,
				scale: this._getDataByDirection([-1, 0])
			});

			axesInst.on({
				hold: this._holdHandler.bind(this),
				change: this._changeHandler.bind(this),
				release: this._releaseHandler.bind(this),
				animationStart: this._animationStartHandler.bind(this),
				animationEnd: this._animationEndHandler.bind(this)
			}).connect(this._getDataByDirection(["flick", ""]), this._panInput);
		} else {
			this.disableInput();
			axesInst.off();
		}

_proto._bindEvents = function _bindEvents(bind) {
      var options = this.options;
      var $wrapper = this.$wrapper;
      var axesInst = this._axesInst;

      if (bind) {
        this._panInput = new PanInput($wrapper, {
          inputType: options.inputType,
          thresholdAngle: options.thresholdAngle,
          scale: this._getDataByDirection([-1, 0])
        });
        axesInst.on({
          hold: this._holdHandler.bind(this),
          change: this._changeHandler.bind(this),
          release: this._releaseHandler.bind(this),
          animationStart: this._animationStartHandler.bind(this),
          animationEnd: this._animationEndHandler.bind(this)
        }).connect(this._getDataByDirection(["flick", ""]), this._panInput);
      } else {
        this.disableInput();
        axesInst.off();
      }
    };