How to use the cornerstone-tools.pan function in cornerstone-tools

moveImg = /* istanbul ignore next */ () => {
    const { touchMode } = this.state;
    const cornerstoneElement = this.getImgBlock();
    if (touchMode) {
      this.setState({ touchMode: false });
      this.swiper.allowTouchMove = false;
      cornerstoneTools.mouseInput.enable(cornerstoneElement);
      cornerstoneTools.pan.activate(cornerstoneElement, 1);
      cornerstoneTools.wwwc.disable(cornerstoneElement)
    } else {
      this.setState({ touchMode: true });
      this.swiper.allowTouchMove = true;
      this.disableCornerstoneTools(cornerstoneElement)
    }
  };

_disable_all_tools: function (element) {
        // helper function used by the tool button handlers to disable the active tool
        // before making a new tool active
        ctools.wwwc.deactivate(element, 1);
        ctools.pan.deactivate(element, 2); // 2 is middle mouse button
        ctools.zoom.deactivate(element, 4); // 4 is right mouse button
        ctools.length.deactivate(element, 1);
        ctools.ellipticalRoi.deactivate(element, 1);
        ctools.rectangleRoi.deactivate(element, 1);
        ctools.angle.deactivate(element, 1);
        ctools.highlight.deactivate(element, 1);
        ctools.freehand.deactivate(element, 1);
        ctools.probe.deactivate(element, 1);

    },
    activate_tool: function () {

export default {
  defaults: {
    [ToolTypes.Mouse]: {
      [MouseButtons.Left]: 'wwwc',
      [MouseButtons.Middle]: 'pan',
      [MouseButtons.Right]: 'zoom',
    },
    [ToolTypes.MouseWheel]: {
      // Dummy binding value of true since mouse wheels don't
      // have specific bind slots.
      true: 'stackScroll',
    },
  },
  definitions: {
    pan: {
      tool: cornerstoneTools.pan,
      type: ToolTypes.Mouse,
      binding: MouseButtons.Middle,
      icon: 'arrows-alt',
      activateArgs: ['binding'],
      deactivateArgs: ['binding'],
    },
    zoom: {
      tool: cornerstoneTools.zoom,
      type: ToolTypes.Mouse,
      binding: MouseButtons.Right,
      icon: 'search-plus',
      activateArgs: ['binding'],
      deactivateArgs: ['binding'],
    },
    wwwc: {
      // When using a bundled cornerstone tool, be sure to name

};

      // Enable Inputs
      cornerstoneTools.mouseInput.enable(canvas);
      cornerstoneTools.mouseWheelInput.enable(canvas);
      cornerstoneTools.touchInput.enable(canvas);

      // Set the stack as tool state
      cornerstoneTools.addStackStateManager(canvas, ["stack"]);
      cornerstoneTools.addToolState(canvas, "stack", canvasStack);
      cornerstoneTools.stackScrollWheel.activate(canvas); // Mouse wheel
      cornerstoneTools.scrollIndicator.enable(canvas); // Position indicator

      // Mouse
      cornerstoneTools.wwwc.activate(canvas, 1); // left click
      cornerstoneTools.pan.activate(canvas, 2); // middle click
      cornerstoneTools.zoom.activate(canvas, 4); // right click

      // Touch / Gesture
      cornerstoneTools.wwwcTouchDrag.activate(canvas); // - Drag
      cornerstoneTools.zoomTouchPinch.activate(canvas); // - Pinch
      cornerstoneTools.panMultiTouch.activate(canvas); // - Multi (x2)
    },
    /*

_setup_tools: function () {
        ctools.mouseInput.enable(this.viewer);
        ctools.mouseWheelInput.enable(this.viewer);
        ctools.wwwc.activate(this.viewer, 1); // Left Click
        ctools.pan.activate(this.viewer, 2); // Middle Click
        ctools.zoom.activate(this.viewer, 4); // Right Click
        ctools.zoomWheel.activate(this.viewer); // Mouse Wheel
    },
    _disable_all_tools: function (element) {

disableCornerstoneTools = (cornerstoneElement) => {
    cornerstoneTools.mouseInput.disable(cornerstoneElement);
    cornerstoneTools.pan.disable(cornerstoneElement);
    cornerstoneTools.wwwc.disable(cornerstoneElement);
  };