How to use the hammerjs.Manager function in hammerjs

setTimeout(function() {
      forEach(mouseEvents, function(e) {
        domEvent.unbind(node, e, stopEvent, true);
      });
    }, 500);
  }

  domEvent.bind(node, 'touchstart', stopMouse, true);
  domEvent.bind(node, 'touchend', allowMouse, true);
  domEvent.bind(node, 'touchcancel', allowMouse, true);

  // A touch event recognizer that handles
  // touch events only (we know, we can already handle
  // mouse events out of the box)

  var recognizer = new Hammer.Manager(node, {
    inputClass: Hammer.TouchInput,
    recognizers: []
  });


  var tap = new Hammer.Tap();
  var pan = new Hammer.Pan({ threshold: 10 });
  var press = new Hammer.Press();
  var pinch = new Hammer.Pinch();

  var doubleTap = new Hammer.Tap({ event: 'doubletap', taps: 2 });

  pinch.requireFailure(pan);
  pinch.requireFailure(press);

  recognizer.add([ pan, press, pinch, doubleTap, tap ]);

/* Mapping directions to event names */
    throwDirectionToEventName = {};
    throwDirectionToEventName[Direction.LEFT] = 'throwoutleft';
    throwDirectionToEventName[Direction.RIGHT] = 'throwoutright';
    throwDirectionToEventName[Direction.UP] = 'throwoutup';
    throwDirectionToEventName[Direction.DOWN] = 'throwoutdown';

    springThrowIn.setRestSpeedThreshold(0.05);
    springThrowIn.setRestDisplacementThreshold(0.05);

    springThrowOut.setRestSpeedThreshold(0.05);
    springThrowOut.setRestDisplacementThreshold(0.05);

    throwOutDistance = config.throwOutDistance(config.minThrowOutDistance, config.maxThrowOutDistance);

    mc = new Hammer.Manager(targetElement, {
      recognizers: [
        [
          Hammer.Pan,
          {
            threshold: 2
          }
        ]
      ]
    });

    if (prepend) {
      Card.prependToParent(targetElement);
    } else {
      Card.appendToParent(targetElement);
    }

{point, index} = this.props;

      let y = point.y + e.deltaY,
          returnValue = y;

      if ( y < resize.top - resize.panY ) {
        returnValue = resize.top - resize.panY;
      } else if ( y > C.CURVE_SIZE + resize.bottom - resize.panY ) {
        returnValue = C.CURVE_SIZE + resize.bottom - resize.panY;
      }

      return roundTo( returnValue, 5*C.CURVE_PERCENT, 2*C.CURVE_PERCENT ) - point.y;
    }

    const el = this.base.querySelector('#js-point-touch'),
          mc = propagating(new Hammer.Manager(el));

    mc.add(new Hammer.Pan({ threshold: 0 }));

    mc
      .on('pan', (e) => {
        const {point, index} = this.props;
        store.dispatch({
          type: 'POINT_TRANSLATE',
          data: { x: getTempX(e), y: getTempY(e), index }
        });
        e.stopPropagation();
      })
      .on('panend', (e) => {
        const {point, index} = this.props;
        // fire translate end and save it to the store
        store.dispatch({

private setupHammer(): void {
        // Pinch to zoom
        const touchManager = new Hammer.Manager(this.canvas, {recognizers: []});
        let lastScale = 1;

        touchManager.add(new Hammer.Pinch());
        touchManager.on("pinch", (e) => {
            this.callListeners("zoom", lastScale/e.scale, this.mousePos);
            lastScale = e.scale;
        });
        touchManager.on("pinchend", (_) => {
            lastScale = 1;
        });

        touchManager.add(new Hammer.Tap());
        touchManager.on("tap", (e) => {
            if (e.pointerType == "mouse")
                return;

init() {

        this.hammer = new Hammer.Manager(this.el, { touchAction: 'pan-y' })
        this.hammer.add(new Hammer.Swipe({
            direction: Hammer.DIRECTION_HORIZONTAL
        }))
        this.hammer.on('swipe', this.onSwipe)
    }

export function pinchZoom(el: HTMLElement) {
  let mc = new Hammer.Manager(el);
  let pinch = new Hammer.Pinch();
  let pan = new Hammer.Pan();

  pinch.recognizeWith(pan);
  mc.add([pinch, pan]);

  let adjustScale = 1;
  let adjustDeltaX = 0;
  let adjustDeltaY = 0;

  let currentScale = 0;
  let currentDeltaX = 0;
  let currentDeltaY = 0;
  let panDelay = 0;

  mc.on('pan pinch', ev => {

eventEmitter = Sister();
      springSystem = stack.springSystem();
      springThrowIn = springSystem.createSpring(250, 10);
      springThrowOut = springSystem.createSpring(500, 20);
      lastThrow = {};
      lastTranslate = {x: 0, y: 0};

      springThrowIn.setRestSpeedThreshold(0.05);
      springThrowIn.setRestDisplacementThreshold(0.05);

      springThrowOut.setRestSpeedThreshold(0.05);
      springThrowOut.setRestDisplacementThreshold(0.05);

      throwOutDistance = config.throwOutDistance(config.minThrowOutDistance, config.maxThrowOutDistance);

      mc = new Hammer.Manager(targetElement, {
        recognizers: [
          [Hammer.Pan, {threshold: 2}]
        ]
      });

      Card.appendToParent(targetElement);

      eventEmitter.on('_panstart', function () {
        Card.appendToParent(targetElement);

        eventEmitter.trigger('dragstart', {
          target: targetElement
        });
      });

      eventEmitter.on('_panmove', function (e) {

componentDidMount () {
    const {store} = this.context;
    const mc = propagating(new Hammer.Manager(this.base));
    mc.add(new Hammer.Tap);

    mc.on('tap', (e) => { store.dispatch({ type: 'CODE_TAP' }); });
  }
}

componentDidMount() {
    const mc  = new Hammer.Manager(this._dot);
    mc.add(new Hammer.Pan);
    mc.add(new Hammer.Tap);
    mc.get('pan').set({ direction: Hammer.DIRECTION_HORIZONTAL });

    mc.on('pan', this._pan);
    mc.on('panend', this._panEnd);
    mc.on('tap', this._tap);
  }

this.svg = this.container.selectOrAppend('svg.tree-designer');
        this.svg.attr('width', this.availableWidth).attr('height', this.availableHeight);

        this.mainGroup = this.svg.selectOrAppend('g.main-group');
        this.updateMargin();


        if (!this.config.width) {
            d3.select(window)
                .on("resize.tree-designer", function () {
                    self.updatePlottingRegionSize();
                    self.redrawDiagramTitle();
                });
        }

        var mc = new Hammer.Manager(this.svg.node(), {touchAction : 'auto'});
        mc.add(new Hammer.Press({
            pointerType: 'touch'
        }));

        mc.add(new Hammer.Pinch({
            pointerType: 'touch'
        }));

        var cancel;
        mc.on('pinchstart', function(){
            self.disableBrush();
        })
        mc.on('pinch', function(){
            cancel = Utils.waitForFinalEvent(()=>self.enableBrush(), 'pinchend', 5000)
        })
    }