How to use the hammerjs.Pan function in hammerjs

switch (element[0].nodeName) {
            case 'rect':
                x = 'x';
                y = 'y';
                break;
            case 'circle':
                x = 'cx';
                y = 'cy';
                break;
        }

        // Events
        hammerSurface = new Hammer(markingSurface.svg);
        hammerElement = new Hammer.Manager(element[0]);
        hammerElement.add(new Hammer.Press({ time: 5 }));
        hammerElement.add(new Hammer.Pan({ direction: Hammer.DIRECTION_ALL }));
        hammerElement.on('press', startDrag);

        // Methods
        function getPoint(event) {
            event = event.srcEvent || event;
            return toolUtils.getPoint(angular.element(markingSurface.svg), event);
        }

        function startDrag(hammerEvent) {
            $rootScope.$broadcast('markingTools:disable');
            markingSurfaceWasEnabled = markingSurface.$isEnabled();
            if (markingSurfaceWasEnabled) {
                $rootScope.$broadcast('panZoom:disable');
            }
            hammerSurface.on('panmove', moveDrag);
            hammerSurface.on('panend', endDrag);

this.current_pane = 0;

        this.slideCallback = this.next;

        this.setPaneDimensions();

        $(window).on("load resize orientationchange", function() {
            this.setPaneDimensions();
            this.setState({ slide_width: $(window).width() });
        }.bind(this));

        if(this.pane_count > 1){

            var mc = new Hammer.Manager(element, { drag_lock_to_axis: true } );

            mc.add( new Hammer.Pan( { threshold: 0, direction: Hammer.DIRECTION_HORIZONTAL }) );
            mc.add( new Hammer.Swipe( { threshold: 1 }) ).recognizeWith( mc.get('pan') );

            mc.on("panend pancancel panleft panright swipeleft swiperight", this.handleHammer);

            /* From Modernizr */
            function whichTransitionEvent(){
                var t;
                var el = document.createElement('fakeelement');
                var transitions = {
                  'transition':'transitionend',
                  'OTransition':'oTransitionEnd',
                  'MozTransition':'transitionend',
                  'WebkitTransition':'webkitTransitionEnd'
                }

                for(t in transitions){

listenForSwipeDown (swipeableElementRef) {

		if (swipeableElementRef === this.currentSwipeableElementRef) {
			// don't set hammer up for the same element more than once
			return;
		}

		this.hammer = new Hammer.Manager(swipeableElementRef);
		this.hammer.add(new Hammer.Pan({
			direction: Hammer.DIRECTION_DOWN,
			threshold: 0
		}) );

		this.hammer.on('pan', (ev) => {
			if (this.props.swipeEnabled) {
				handleSwipeDown(ev, this.props.onSwipeEnd, swipeableElementRef);
			}
		});

		this.currentSwipeableElementRef = swipeableElementRef;
	}

_scrollTimeout = setTimeout(function() {
				if (typeof zoomOptions.onZoomComplete === 'function') {
					zoomOptions.onZoomComplete({chart: chartInstance});
				}
			}, 250);

			// Prevent the event from triggering the default behavior (eg. Content scrolling).
			if (event.cancelable) {
				event.preventDefault();
			}
		};

		if (Hammer) {
			var mc = new Hammer.Manager(node);
			mc.add(new Hammer.Pinch());
			mc.add(new Hammer.Pan({
				threshold: panThreshold
			}));

			// Hammer reports the total scaling. We need the incremental amount
			var currentPinchScaling;
			var handlePinch = function(e) {
				var diff = 1 / (currentPinchScaling) * e.scale;
				var rect = e.target.getBoundingClientRect();
				var offsetX = e.center.x - rect.left;
				var offsetY = e.center.y - rect.top;
				var center = {
					x: offsetX,
					y: offsetY
				};

				// fingers position difference

if (event.deltaY < 0) {
					doZoom(chartInstance, 1.1, 1.1, center);
				} else {
					doZoom(chartInstance, 0.909, 0.909, center);
				}
				// Prevent the event from triggering the default behavior (eg. Content scrolling).
				event.preventDefault();
			};

			node.addEventListener('wheel', chartInstance.zoom._wheelHandler);
		}

		if (Hammer) {
			var mc = new Hammer.Manager(node);
			mc.add(new Hammer.Pinch());
			mc.add(new Hammer.Pan({
				threshold: panThreshold
			}));

			// Hammer reports the total scaling. We need the incremental amount
			var currentPinchScaling;
			var handlePinch = function(e) {
				var diff = 1 / (currentPinchScaling) * e.scale;
				var rect = e.target.getBoundingClientRect();
				var offsetX = e.center.x - rect.left;
				var offsetY = e.center.y - rect.top;
				var center = {
					x: offsetX,
					y: offsetY
				};

				// fingers position difference

componentDidMount() {
    const mc = new Hammer.Manager(this.base);
    mc.add(new Hammer.Pan);

    mc.on('pan', this._onPan);
    mc.on('panend', this._onPanEnd);
  }

componentDidMount: function() {
        this.hammer = new Hammer.Manager(ReactDOM.findDOMNode(this));
        this.hammer.add(new Hammer.Pan({threshold: 0}));

        var events = [
            ['panstart panend pancancel panmove', this.handlePan],
            ['swipestart swipeend swipecancel swipemove',
             this.handleSwipe]
        ];

        events.forEach(function(data) {
            if (data[0] && data[1]) {
                this.hammer.on(data[0], data[1]);
            }
        }, this);

        this.resetPosition();
        window.addEventListener('resize', this.resetPosition);
    },

listenForSwipeDown (expandedPlayerRef) {
			this.hammer = new Hammer.Manager(expandedPlayerRef);
			this.hammer.add(new Hammer.Pan({
				direction: Hammer.DIRECTION_DOWN,
				threshold: 0
			}) );
			this.hammer.on('pan', (ev) => {
				const onSwipeEnd = playerActions.onMinimise;
				handleSwipeDown(ev, onSwipeEnd, expandedPlayerRef);
			});

			this.expandedPlayerListensSwipe = expandedPlayerRef;
		}

componentDidMount() {
    const mcLeft  = new Hammer.Manager(this._leftSpot);
    const mcRight = new Hammer.Manager(this._rightSpot);
    mcLeft.add(new Hammer.Pan);
    mcRight.add(new Hammer.Pan);
    mcLeft.get('pan').set({ direction: Hammer.DIRECTION_HORIZONTAL });
    mcRight.get('pan').set({ direction: Hammer.DIRECTION_HORIZONTAL });

    mcRight.on('pan', (e) => { this._pan(e, 'right'); });
    mcRight.on('panend', (e) => { this._panEnd(e, 'right'); });

    mcLeft.on('pan', (e) => { this._pan(e, 'left'); });
    mcLeft.on('panend', (e) => { this._panEnd(e, 'left'); });
  }

listeners() {
        var mc = new Hammer.Manager(this.canvas)
        mc.add(new Hammer.Pan({
            direction: Hammer.DIRECTION_VERTICAL,
            threshold: 1
        }))

        mc.add( new Hammer.Tap({ event: 'doubletap', taps: 2 }) );

        mc.on('panstart', event => {
            if (this.$p.y_transform) {
                this.zoom = this.$p.y_transform.zoom
            } else {
                this.zoom = 1.0
            }
            this.drug = {
                y: event.center.y,
                z: this.zoom
            }