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

*		// 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
				 * @ko 사용자의 좌우 Panning 에 의해 이미지 인덱스가 변경되었을때 발생하는 이벤트
				 * @name eg.view360.SpinViewer#change
				 * @event

width: utils.getUnitValue(sizeValue[0]),
				height: utils.getUnitValue(sizeValue[1]),
				boxSizing: "border-box",
				top: 0,
				left: 0
			});
		});

		if (this._addClonePanels()) {
			panelCount = panel.count = (
				panel.$list = utils.toArray(this.$container.children)
			).length;
		}

		// create Axes instance
		this._axesInst = new Axes({
			flick: {
				range: [0, panel.size * (panelCount - 1)],
				bounce
			}
		}, {
			easing: options.panelEffect,
			deceleration: options.deceleration,
			interruptable: false
		});

		this._setDefaultPanel(options.defaultIndex);
	}

private setAxesInstance(): void {
    const state = this.state;
    const options = this.options;

    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],
    });

__proto.setAxesInstance = function () {
    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);

beforeEach(() => {
				moveKeyInput = new MoveKeyInput(document.body, {scale:[1, 1]});
				axes = new Axes({
					yaw: {range: [0, 20]},
					pitch: {range: [0, 20]}
				})
				.on({
					change: e => {
						changed = true;
						deltaYaw = e.delta.yaw;
						deltaPitch = e.delta.pitch;
					}
				}).connect(["yaw", "pitch"], moveKeyInput);
			});

beforeEach(() => {
				tiltMotionInput = new TiltMotionInput(document.body);
				axes = new Axes({
					yaw: {range: [-180, 180]},
					pitch: {range: [-110, 110]}
				}, {}, {
					yaw: 0,
					pitch: 0
				})
				.connect(["yaw", "pitch"], tiltMotionInput);
			});

events[name.replace("on", "").toLowerCase()] = props[name];
            }
        }

        const propsAxis = this.props.axis;

        for (const name in propsAxis) {
            if (Array.isArray(propsAxis[name])) {
                axis[name] = {
                    range: propsAxis[name],
                };
            } else {
                axis[name] = propsAxis[name];
            }
        }
        this.axes = new NativeAxes(axis, options);
        for (const name in events) {
            this.axes.on(name, events[name]);
        }
        this.axes.on("change", this.onChange.bind(this));
        this.axes.on("hold", this.onHold.bind(this));
        this.axes.on("release", this.onRelease.bind(this));
        const pos = this.axes.get();

        this.state = {
            pos,
            delta: toZeroAxis(this.axes.axis),
            holding: false,
            isTrusted: false,
        };
    }
    onChange(e) {

_initAxes(opt) {
		const yRange = this._updateYawRange(opt.yawRange, opt.fov, opt.aspectRatio);
		const pRange = this._updatePitchRange(opt.pitchRange, opt.fov, opt.showPolePoint);
		const useRotation = opt.gyroMode === GYRO_MODE.VR;

		this.axesPanInput = new RotationPanInput(this._element, {useRotation});
		this.axesWheelInput = new WheelInput(this._element, {scale: -4});
		this.axesTiltMotionInput = null;
		this.axesPinchInput = SUPPORT_TOUCH ? new PinchInput(this._element, {scale: -1}) : null;
		this.axesMoveKeyInput = new MoveKeyInput(this._element, {scale: [-6, 6]});

		this.axes = new Axes({
			yaw: {
				range: yRange,
				circular: YawPitchControl.isCircular(yRange),
				bounce: [0, 0]
			},
			pitch: {
				range: pRange,
				circular: YawPitchControl.isCircular(pRange),
				bounce: [0, 0]
			},
			fov: {
				range: opt.fovRange,
				circular: [false, false],
				bounce: [0, 0]
			},
		}, {

constructor(props: any) {
        super(props);

        this.state = { ...this.state, ...this.initScene(this.props.scene, false) };

        this.keycon = new KeyController()
            .keydown("alt", () => {
                this.setState({ alt: true });
            })
            .keyup("alt", () => {
                this.setState({ alt: false });
            });
        this.axes = new Axes(
            {
                zoom: {
                    range: [1, Infinity],
                },
            },
            {},
            { zoom: 1 },
        );
    }
    public render() {