How to use the hammerjs.Pinch function in hammerjs

taps: 2,
      time: 250,
      interval: 450,
      threshold: 5,
      posThreshold: 50
    }));

    // pan
    hm.add(new Pan({
      event: 'pan',
      pointers: 0,
      threshold: 0
    }));

    // pinch
    hm.add(new Pinch({
      event: 'pinch',
      pointers: 2,
      threshold: 0.1 // Set a minimal thresold on pinch event, to be detected after pan
    }));
    hm.get('pinch').recognizeWith(hm.get('pan'));
  }

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;

            this.onClick(V(e.center.x, e.center.y));
        });
    }

attach(element: HTMLElement) {
    if (!this._elementManager) {
      // Initialize each gesture.
      let pinch = new Hammer.Pinch();
      let pan = new Hammer.Pan();
      pinch.recognizeWith(pan);

      // Initialize the element and manager.
      this._element = element;
      this._elementManager = new Hammer.Manager(element);

      // Attach each gesture and event.
      this._elementManager.add([pinch, pan]);
      this._elementManager.on('pan pinch', ev => this._move(ev));
      this._elementManager.on('panend pinchend', ev => this._end(ev));
    }
  }

_bindEvt: function() {
    SimuScroll.superclass._bindEvt.call(this);
    var self = this;
    if (self.__isEvtBind) return;
    self.__isEvtBind = true;
    var pinch = new Hammer.Pinch();
    self.mc.add(pinch);
    self.on('touchstart mousedown', self._ontouchstart, self);
    self.on('touchmove', self._ontouchmove, self);
    self.on('tap', self._ontap, self);
    self.on('panstart', self._onpanstart, self);
    self.on('pan', self._onpan, self);
    self.on('panend', self._onpanend, self);
    // window resize
    window.addEventListener('resize', function(e) {
      setTimeout(function() {
        self.resetSize();
        self.boundryCheck(0);
        self.render();
      }, 100);
    }, self);

listeners() {

        var hamster = Hamster(this.canvas)
        hamster.wheel((event, delta) => this.mousezoom(-delta * 50, event))

        var mc = new Hammer.Manager(this.canvas)
        mc.add(new Hammer.Pan())
        mc.add(new Hammer.Tap())
        mc.add(new Hammer.Pinch())
        mc.get('pinch').set({ enable: true })

        mc.on('panstart', event => {
            if (this.cursor.scroll_lock) return
            let tfrm = this.$p.y_transform
            this.drug = {
                x: event.center.x + this.offset_x,
                y: event.center.y + this.offset_y,
                r: this.range.slice(),
                t: this.range[1] - this.range[0],
                o: tfrm ?
                    (tfrm.offset || 0) : 0,
                y_r: tfrm && tfrm.range ?
                    tfrm.range.slice() : undefined
            }
            this.comp.$emit('cursor-changed', {

import React from 'react';
import PropTypes from 'prop-types';
import Animate from 'rc-animate';
import Hammer from 'hammerjs';
import classnames from 'classnames';
import ReactDOM from 'react-dom';
import Slide from '../Slide';
import Mask from './Mask';

const pinch = new Hammer.Pinch();


class PopupView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: props.current,
    };
  }

  componentDidMount() {
    this.bindHammer();
  }

  componentWillReceiveProps(nextProps) {
    if (!this.props.visible && nextProps.visible) {

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)
        })
    }