Hammer JS

Hammerjs 를 이용한 Gesture

Install

npm i hammerjs
npm i --save-dev @types/hammerjs

app.module.ts

import { NgModule, Injectable } from '@angular/core';
import { BrowserModule, HammerModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import * as Hammer from 'hammerjs';
......

@Injectable()
export class HammerConfig extends HammerGestureConfig {
  override overrides = <any> {
    // I will only use the swap gesture so
    // I will deactivate the others to avoid overlaps
    'pinch': { enable: false },
    'pan': { direction: Hammer.DIRECTION_ALL, threshold: 0 },
    'rotate': { enable: false },
  }
}

......
@NgModule({
  .....
  imports: [
    .....
    BrowserModule,
    HammerModule, // BrowserModule 다음에 HammerModule을 import 시킨다.
  ],
  providers: [
  ....
  {
    provide: HAMMER_GESTURE_CONFIG,
    useClass: HammerConfig
  },

  ]

Pan

swipe 와 pan의 가장 큰차이점음 이벤트의 발생시점 일 것이다. swipe는 액션의 끝에서 시작하는 반면 pan은 액션이 어느정도 진행동안에 일어난다.
pan을 이용하여 drag 기능을 만들 수 있다.

<Element
  (pan)="onPan($event)"
  (panstart)="onPanStart($event)"
  (panmove)="onPanMove($event)"
  (panend)="onPanEnd($event)"
  (pancancel)="onPanCancel($event)"
  (panleft)="onPanLeft($event)"
  (panright)="onPanRight($event)"
  (panup)="onPanUp($event)"
  (pandown)="onPanDown($event)"
>

Pinch

<Element
  (pinch)="onPinch($event)"
  (pinchstart)="onPinchStart($event)"
  (pinchmove)="onPinchMove($event)"
  (pinchend)="onPinchEnd($event)"
  (pinchcancel)="onPinchCancel($event)"
  (pinchin)="onPinchIn($event)"
  (pinchout)="onPinchOut($event)"
>

Press

press 될때 이벤트 하나 pressup될때 이벤트 하나이므로 쌍으로 처리하는 것이 좋다

<Element
  (press)="onPress($event)"
  (pressup)="onPressUp($event)"
>

Rotate

<Element
  (rotate)="onRotate($event)"
  (rotatestart)="onRotateStart($event)"
  (rotatemove)="onRotateMove($event)"
  (rotateend)="onRotateEnd($event)"
  (rotatecancel)="onRotateCancel($event)"
>

Tap

<Element
  (tap)="onTap($event)"
>

Swipe

swipe 이후에 액션 발생
app.module.ts

@Injectable()
export class HammerConfig extends HammerGestureConfig {
  override overrides = <any> {
    'swipe': { enable: true, direction: Hammer.DIRECTION_ALL, threshold: 1, velocity:0.1 },
  }
}

html

(swipe)="onSwipe($event)"
(swipeleft)="onSwipeLeft($event)"
(swiperight)="onSwipeRight($event)"
(swipeup)="onSwipeUp($event)"
(swipedown)="onSwipeDown($event)"