How to use the hammerjs.DIRECTION_ALL function in hammerjs

const initTouchEvents = function() {
  gS.$emit('optionsUpdate', "showHints", false); //HACK: mouseover interferes with mousedown during hinting somehow
  // get a reference to top canvas element
  var stage = document.getElementById('sketchlive');
  // create a manager for that element
  mc = new Hammer.Manager(stage);
  var Pan = new Hammer.Pan({
    direction: Hammer.DIRECTION_ALL,
    threshold: 0
  });
  console.log("init touchevents");
  mc.add(Pan);
  mc.on('panstart', function(e) {
    var fakeEv = {clientX: e.center.x,
                  clientY: e.center.y,
                  preventDefault: e.preventDefault};
    dispatchMouseDown(fakeEv);
  });
  mc.on('panmove', function(e) {
    var fakeEv = {clientX: e.center.x,
                  clientY: e.center.y,
                  preventDefault: e.preventDefault};
    dispatchMouseMove(fakeEv);
  });

import * as Hammer from 'hammerjs';
import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { ServiceWorkerModule } from '@angular/service-worker';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { QuicklinkModule, QuicklinkStrategy } from 'ngx-quicklink';
import { CoreModule } from '@ngx-starter-kit/core';

import { environment } from '@env/environment';

export class MyHammerConfig extends HammerGestureConfig {
  overrides = {
    // override hammerjs default configuration
    pan: { direction: Hammer.DIRECTION_ALL },
    swipe: { direction: Hammer.DIRECTION_ALL },
  };
}

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    QuicklinkModule,
    RouterModule.forRoot(
      [
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', loadChildren: '@ngx-starter-kit/home#HomeModule', data: { preload: true } },
        { path: 'dashboard', loadChildren: '@ngx-starter-kit/dashboard#DashboardModule', data: { preload: true } },
        { path: 'admin', loadChildren: '@ngx-starter-kit/admin#AdminModule', data: { preload: false } },
        {
          path: '404',

var model = new Model();

  var hammerDomain = new Hammer(canvasDomain);
  var hammerRange = new Hammer(canvasRange);

  // Improve usability by tweaking the recognizers
  hammerDomain.get('swipe').set({ enable: false });
  hammerDomain.get('pan').set({
    threshold: 5,
    direction: Hammer.DIRECTION_ALL
  });
  hammerRange.get('swipe').set({ enable: false });
  hammerRange.get('pan').set({
    threshold: 5,
    direction: Hammer.DIRECTION_ALL
  });

  (function defineHowToCreateDomainPoints() {
    // Input; point creation
    hammerDomain.on('tap', function (ev) {
      // Transform to canvas coordinates
      var cr = canvasDomain.getBoundingClientRect();
      var x = ev.center.x - cr.left;
      var y = ev.center.y - cr.top;

      model.addToDomain(x, y);
    });

    hammerDomain.on('press', function (ev) {
      // Transform to canvas coordinates
      var cr = canvasDomain.getBoundingClientRect();

private addEventListenerOnMap() {
    const $containter = this.mapService.getMapContainer();
    if ($containter) {
      const hammertime = new Hammer($containter);
      hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
      hammertime.get('pinch').set({ enable: true });

      // hammertime.on('panstart', this.onPanstart);
      // hammertime.on('panmove', this.onPanmove);
      // hammertime.on('panend', this.onPanend);
      // hammertime.on('pinch', this.onPinch);
      $containter.addEventListener('mousemove', this.onHover);
      $containter.addEventListener('click', this.onHover);
      $containter.addEventListener('mousedown', this.onHover);
      $containter.addEventListener('mouseup', this.onHover);
      $containter.addEventListener('dblclick', this.onHover);
      $containter.addEventListener('contextmenu', this.onHover);

      this.hammertime = hammertime;

      // TODO: 根据场景注册事件到 L7 canvas 上

CarouselComponent.prototype.initEventsPan = function () {
        var hammertime = new Hammer(this.carouselElm.nativeElement);
        hammertime.on('pan', this.rotate.bind(this));
        hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL, threshold: 0 });
    };
    CarouselComponent.prototype.rotate = function (e) {

(function setupGestures () {
    var pan = new Hammer.Pan({
      direction: Hammer.DIRECTION_ALL, threshold: 0, pointers: 0
    })
    var pinch = new Hammer.Pinch({
      direction: Hammer.DIRECTION_ALL, threshold: 0, pointers: 0
    })
    var rotate = new Hammer.Rotate({
      direction: Hammer.DIRECTION_ALL, threshold: 0, pointers: 0
    })
    pan.recognizeWith(pinch)
    pinch.recognizeWith(rotate)
    hammertime.add(pan)
    hammertime.add(pinch)
    hammertime.add(rotate)
  }())

_initHammer() {
        this._hammer = new Hammer(this.el);
        this._hammer.get('pinch').set({ enable: true });
        this._hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL });
    }

protected initHeaderMovement() {
        if (this.header && this.ths) {
            const mc = new Hammer(this.header!.nativeElement);
            mc.add(new Hammer.Pan({direction: Hammer.DIRECTION_ALL, threshold: 1}));

            interface Box {
                left: number;
                width: number;
                element: HTMLElement;
                directive: TableColumnDirective;
            }

            const THsBoxes: Box[] = [];

            let element: HTMLElement | undefined;
            let elementCells: HTMLElement[] = [];
            let originalPosition = -1;
            let foundBox: Box | undefined;
            let rowCells: {cells: HTMLElement[]}[] = [];

(function setupGestures () {
    var pan = new Hammer.Pan({
      direction: Hammer.DIRECTION_ALL, threshold: 0, pointers: 0
    })
    var pinch = new Hammer.Pinch({
      direction: Hammer.DIRECTION_ALL, threshold: 0, pointers: 0
    })
    var rotate = new Hammer.Rotate({
      direction: Hammer.DIRECTION_ALL, threshold: 0, pointers: 0
    })
    pan.recognizeWith(pinch)
    pinch.recognizeWith(rotate)
    hammertime.add(pan)
    hammertime.add(pinch)
    hammertime.add(rotate)
  }())