lint

docs/api-reference/event-manager.md

@@ -12,8 +12,8 @@ import {EventManager} from 'mjolnir.js';
 const eventManager = new EventManager(target, options);
 ```
 
-* `target` (HTMLElement) - DOM element on which event handlers will be registered.
-* `options` (object) - Options
+- `target` (HTMLElement) - DOM element on which event handlers will be registered.
+- `options` (object) - Options
   - `events` (object) - A map from event names to their handler functions, to register on init.
   - `recognizers` (RecognizerTuple[]) - Gesture recognizers. See [Recognize Gestures](#recognize-gestures) section below for usage.
   - `touchAction` (string) - Allow browser default touch actions. See [touch-action CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action). Use 'compute' to automatically set as the least restrictive value to support the recognizers. Default `'compute'`.
@@ -30,7 +30,7 @@ Tears down internal event management implementations.
 eventManager.destroy();
 ```
 
-*Note: It is recommended to call `destroy` when done since `EventManager` adds event listeners to `window`.*
+_Note: It is recommended to call `destroy` when done since `EventManager` adds event listeners to `window`._
 
 ### on
 
@@ -45,10 +45,10 @@ eventManager.on(eventMap, options);
 - `handler` ((event: MjolnirEvent) => void) - The function to be called on `event`.
 - `eventMap` (object) - A map from event names to their handler functions
 - `options` (object, optional)
-  + `srcElement` (HTMLElement) - The source element of this event. If provided, only events that are targeting this element or its decendants will invoke the handler. If ignored, default to the root element of the event manager. Events are propagated up the DOM tree.
-  + `priority` (number) - Handlers targeting the same `srcElement` will be executed by their priorities (higher numbers first). Handlers with the same priority will be executed in the order of registration. Default `0`.
+  - `srcElement` (HTMLElement) - The source element of this event. If provided, only events that are targeting this element or its decendants will invoke the handler. If ignored, default to the root element of the event manager. Events are propagated up the DOM tree.
+  - `priority` (number) - Handlers targeting the same `srcElement` will be executed by their priorities (higher numbers first). Handlers with the same priority will be executed in the order of registration. Default `0`.
 
-*Note: Unlike the DOM event system, developers are responsible of deregistering event handlers when `srcElement` is removed.*
+_Note: Unlike the DOM event system, developers are responsible of deregistering event handlers when `srcElement` is removed._
 
 ### once
 
@@ -111,23 +111,25 @@ eventManager.watch('dblClick', evt => evt.stopPropagation(), {srcElement: <child
 - `'contextmenu'`
 
 Remarks:
+
 - Keyboard events are fired when focus is on the EventManager's target element or its decendants, unless typing into a text input.
 
 ### Recognize gestures
 
 To emit gesture events from user input, the application should pass a list of recognizers to the `EventManager` constructor.
 Each item in the `recognizers` list can be one of:
+
 - A recognizer class, e.g. `Pan`
 - A recognizer instance, e.g. `new Pan({pointers: 2})`
 - An array in the following form:
-  + `RecognizerClass` - A recognizer class
-  + `options` (object, optional) - An object that is the recognizer options
-  + `recognizeWith` (string | string[], optional) - Allow another gesture to be recognized simultaneously with this one. For example an interaction can trigger pinch and rotate at the same time.
-  + `requireFailure` (string | string[], optional) - Another recognizer is mutually exclusive with this one. For example an interaction could be singletap or doubletap; pan-horizontal or pan-vertical; but never both.
+  - `RecognizerClass` - A recognizer class
+  - `options` (object, optional) - An object that is the recognizer options
+  - `recognizeWith` (string | string[], optional) - Allow another gesture to be recognized simultaneously with this one. For example an interaction can trigger pinch and rotate at the same time.
+  - `requireFailure` (string | string[], optional) - Another recognizer is mutually exclusive with this one. For example an interaction could be singletap or doubletap; pan-horizontal or pan-vertical; but never both.
 - An object with the following field:
-  + `recognizer` - A recognizer instance
-  + `recognizeWith` (string[], optional) - Allow another gesture to be recognized simultaneously with this one. For example an interaction can trigger pinch and rotate at the same time.
-  + `requireFailure` (string[], optional) - Another recognizer is mutually exclusive with this one. For example an interaction could be singletap or doubletap; pan-horizontal or pan-vertical; but never both.
+  - `recognizer` - A recognizer instance
+  - `recognizeWith` (string[], optional) - Allow another gesture to be recognized simultaneously with this one. For example an interaction can trigger pinch and rotate at the same time.
+  - `requireFailure` (string[], optional) - Another recognizer is mutually exclusive with this one. For example an interaction could be singletap or doubletap; pan-horizontal or pan-vertical; but never both.
 
 The following recognizers are available for use:
 
@@ -138,7 +140,6 @@ The following recognizers are available for use:
 - [Swipe](./swipe.md)
 - [Tap](./tap.md)
 
-
 ## Source
 
-https://github.com/visgl/mjolnir.js/blob/master/src/event-manager.ts
+https://github.com/visgl/mjolnir.js/blob/master/src/event-manager.ts

docs/api-reference/pan.md

@@ -9,14 +9,12 @@ import {EventManager, Pan, InputDirection} from 'mjolnir.js';
 
 const eventManager = new EventManager({
   // ...
-  recognizers: [
-    new Pan({direction: InputDirection.Horizontal})
-  ]
+  recognizers: [new Pan({direction: InputDirection.Horizontal})]
 });
 ```
 
-* `options` (object, optional) - Options
-  - `event` (string) -	Name of the event. Default `'pan'`.
+- `options` (object, optional) - Options
+  - `event` (string) - Name of the event. Default `'pan'`.
   - `pointers` (number) - Required pointers. Default `1`.
   - `threshold` (number) - Minimal pan distance required before recognizing. Default `10`.
   - `direction` {InputDirection} - Direction of the panning. Default `InputDirection.All`.

docs/api-reference/pinch.md

@@ -9,14 +9,12 @@ import {EventManager, Pinch} from 'mjolnir.js';
 
 const eventManager = new EventManager({
   // ...
-  recognizers: [
-    new Pinch({pointers: 2})
-  ]
+  recognizers: [new Pinch({pointers: 2})]
 });
 ```
 
-* `options` (object, optional) - Options
-  - `event` (string) -	Name of the event. Default `'pinch'`.
+- `options` (object, optional) - Options
+  - `event` (string) - Name of the event. Default `'pinch'`.
   - `pointers` (number) - Required pointers, with a minimal of 2. Default `2`.
   - `threshold` (number) - Minimal scale before recognizing. Default `0`.
 
@@ -30,7 +28,6 @@ const eventManager = new EventManager({
 - pinchin
 - pinchout
 
-
 ## Source
 
 https://github.com/visgl/mjolnir.js/blob/master/src/hammerjs/recognizers/pinch.ts

docs/api-reference/press.md

@@ -9,14 +9,12 @@ import {EventManager, Press} from 'mjolnir.js';
 
 const eventManager = new EventManager({
   // ...
-  recognizers: [
-    new Press({time: 500})
-  ]
+  recognizers: [new Press({time: 500})]
 });
 ```
 
-* `options` (object, optional) - Options
-  - `event` (string) -	Name of the event. Default `'press'`.
+- `options` (object, optional) - Options
+  - `event` (string) - Name of the event. Default `'press'`.
   - `pointers` (number) - Required pointers. Default `1`.
   - `threshold` (number) - Minimal movement that is allowed while pressing. Default `9`.
   - `time` (number) - Minimal press time in ms. Default `251`.
@@ -26,7 +24,6 @@ const eventManager = new EventManager({
 - press
 - pressup
 
-
 ## Source
 
 https://github.com/visgl/mjolnir.js/blob/master/src/hammerjs/recognizers/press.ts

docs/api-reference/rotate.md

@@ -9,14 +9,12 @@ import {EventManager, Rotate} from 'mjolnir.js';
 
 const eventManager = new EventManager({
   // ...
-  recognizers: [
-    new Rotate({pointers: 2})
-  ]
+  recognizers: [new Rotate({pointers: 2})]
 });
 ```
 
-* `options` (object, optional) - Options
-  - `event` (string) -	Name of the event. Default `'rotate'`.
+- `options` (object, optional) - Options
+  - `event` (string) - Name of the event. Default `'rotate'`.
   - `pointers` (number) - Required pointers, with a minimal of 2. Default `2`.
   - `threshold` (number) - Minimal rotation before recognizing. Default `0`.
 

docs/api-reference/swipe.md

@@ -9,14 +9,12 @@ import {EventManager, InputDirection, Swipe} from 'mjolnir.js';
 
 const eventManager = new EventManager({
   // ...
-  recognizers: [
-    new Swipe({direction: InputDirection.Horizontal})
-  ]
+  recognizers: [new Swipe({direction: InputDirection.Horizontal})]
 });
 ```
 
-* `options` (object, optional) - Options
-  - `event` (string) -	Name of the event. Default `'swipe'`.
+- `options` (object, optional) - Options
+  - `event` (string) - Name of the event. Default `'swipe'`.
   - `pointers` (number) - Required pointers. Default `1`.
   - `threshold` (number) - Minimal distance required before recognizing. Default `10`.
   - `direction` {InputDirection} - Direction of the panning. Default `InputDirection.All`.
@@ -30,7 +28,6 @@ const eventManager = new EventManager({
 - swipeup
 - swipedown
 
-
 ## Source
 
 https://github.com/visgl/mjolnir.js/blob/master/src/hammerjs/recognizers/swipe.ts

docs/api-reference/tap.md

@@ -4,7 +4,6 @@ Recognized when the pointer is doing a small tap/click. Multiple taps are recogn
 
 If an Tap recognizer has a failing requirement, it waits the interval time before emitting the event. This is because if you want to only trigger a doubletap, the recognizer needs to see if any other taps are coming in. Use [requireFailure](./event-manager.md#recognize-gesture) to distinguish single tap events from double tap.
 
-
 ## Constructor
 
 ```ts
@@ -19,8 +18,8 @@ const eventManager = new EventManager({
 });
 ```
 
-* `options` (object, optional) - Options
-  - `event` (string) -	Name of the event. Default `'tap'`.
+- `options` (object, optional) - Options
+  - `event` (string) - Name of the event. Default `'tap'`.
   - `pointers` (number) - Required pointers. Default `1`.
   - `taps` (number) - Amount of taps required. Default `1`.
   - `interval` (number) - Maximum time in ms between multiple taps. Default `300`.

docs/api-reference/types.md

@@ -30,7 +30,6 @@
 - `stopPropagation` (() => void) - Do not invoke handlers registered for any ancestors in the DOM tree.
 - `stopImmediatePropagation` (() => void) - Do not invoke any other handlers registered for the same element or its ancestors.
 
-
 ### MjolnirPointerEvent
 
 Emitted by `pointer*` events. Extends `MjolnirEvent` with the following fields:
@@ -40,7 +39,6 @@ Emitted by `pointer*` events. Extends `MjolnirEvent` with the following fields:
 - `rightButton` (boolean) - Flag indicating whether the right mouse button is involved during the event
 - `pointerType` (string) - A string indicating the type of input (e.g. `'mouse'`, `'touch'`, `'pen'`)
 
-
 ### MjolnirGestureEvent
 
 Emitted by recognizers (`Pan`, `Rotate` etc.). Extends `MjolnirEvent` with the following fields:
@@ -63,7 +61,6 @@ Emitted by recognizers (`Pan`, `Rotate` etc.). Extends `MjolnirEvent` with the f
 - `middleButton` (boolean) - Flag indicating whether the middle mouse button is involved during the event
 - `rightButton` (boolean) - Flag indicating whether the right mouse button is involved during the event
 
-
 ### MjolnirWheelEvent
 
 Emitted by the `wheel` event. Extends `MjolnirEvent` with the following fields:

docs/get-started.md

@@ -48,10 +48,8 @@ const eventManager = new EventManager(document.getElementById('container'), {
 eventManager.destroy();
 ```
 
-
 ## Using with React
 
-
 ```tsx
 import React, {useRef, useEffect} from 'react';
 import {EventManager, Pinch, Pan} from 'mjolnir.js';
@@ -78,4 +76,4 @@ function App() {
 }
 ```
 
-*Note that React's event chain is independent from that of mjolnir.js'. Therefore, a `click` event handler registered with mjolnir.js cannot be blocked by calling `stopPropagation` on a React `onClick` event.*
+_Note that React's event chain is independent from that of mjolnir.js'. Therefore, a `click` event handler registered with mjolnir.js cannot be blocked by calling `stopPropagation` on a React `onClick` event._

docs/upgrade-guide.md

@@ -2,7 +2,7 @@
 
 ## From 2.x to 3.0
 
-- `EventManager` no longer comes with a default set of recognizers. Specify `options.recognizers` to emit gesture events. 
+- `EventManager` no longer comes with a default set of recognizers. Specify `options.recognizers` to emit gesture events.
 - `EventManager`'s `recognizerOptions` prop is removed.
 - Element must be supplied when constructing `EventManager` and cannot be reassigned. To change the event target, destroy the existing event manager instance and construct a new one.
 - Hammer.js is no longer a dependency. Due to the lack of maintenance on the legacy hammerjs project, mjolnir.js has ported it to TypeScript and incorporated it into the code base. To configure recognizers (Pan, Pinch etc.), directly import them from `mjolnir.js`. For details, see the documentation of each recognizer.

src/event-manager.ts

@@ -19,6 +19,16 @@ import {EventRegistrar, HandlerOptions} from './utils/event-registrar';
 
 type RecognizerConstructor = {new (options: any): Recognizer};
 
+type RecognizerTupleNormalized = {
+  recognizer: Recognizer;
+  /** Allow another gesture to be recognized simultaneously with this one.
+   * For example an interaction can trigger pinch and rotate at the same time. */
+  recognizeWith?: string[];
+  /** Another recognizer is mutually exclusive with this one.
+   * For example an interaction could be singletap or doubletap; pan-horizontal or pan-vertical; but never both. */
+  requireFailure?: string[];
+};
+
 export type RecognizerTuple =
   | Recognizer
   | RecognizerConstructor
@@ -35,16 +45,6 @@ export type RecognizerTuple =
       requireFailure?: string | string[]
     ];
 
-type RecognizerTupleNormalized = {
-  recognizer: Recognizer;
-  /** Allow another gesture to be recognized simultaneously with this one.
-   * For example an interaction can trigger pinch and rotate at the same time. */
-  recognizeWith?: string[];
-  /** Another recognizer is mutually exclusive with this one.
-   * For example an interaction could be singletap or doubletap; pan-horizontal or pan-vertical; but never both. */
-  requireFailure?: string[];
-};
-
 export type EventManagerOptions = {
   /** Event listeners */
   events?: MjolnirEventHandlers;
@@ -170,7 +170,7 @@ export class EventManager {
   on(events: MjolnirEventHandlers, opts?: HandlerOptions): void;
   on<EventT extends MjolnirEvent>(
     event: EventT['type'],
-    handler: (event: EventT) => void,
+    handler: (ev: EventT) => void,
     opts?: HandlerOptions
   ): void;
 
@@ -183,7 +183,7 @@ export class EventManager {
   once(events: MjolnirEventHandlers, opts?: HandlerOptions): void;
   once<EventT extends MjolnirEvent>(
     event: EventT['type'],
-    handler: (event: EventT) => void,
+    handler: (ev: EventT) => void,
     opts?: HandlerOptions
   ): void;
 
@@ -198,7 +198,7 @@ export class EventManager {
   watch(events: MjolnirEventHandlers, opts?: HandlerOptions): void;
   watch<EventT extends MjolnirEvent>(
     event: EventT['type'],
-    handler: (event: EventT) => void,
+    handler: (ev: EventT) => void,
     opts?: HandlerOptions
   ): void;
 
@@ -210,7 +210,7 @@ export class EventManager {
    * Deregister a previously-registered event handler.
    */
   off(events: MjolnirEventHandlers): void;
-  off<EventT extends MjolnirEvent>(event: EventT['type'], handler: (event: EventT) => void): void;
+  off<EventT extends MjolnirEvent>(event: EventT['type'], handler: (ev: EventT) => void): void;
 
   off(event: any, handler?: any) {
     this._removeEventHandler(event, handler);
@@ -249,8 +249,8 @@ export class EventManager {
       // @ts-ignore
       opts = handler;
       // If `event` is a map, call `on()` for each entry.
-      for (const [eventName, handler] of Object.entries(event)) {
-        this._addEventHandler(eventName, handler!, opts, once, passive);
+      for (const [eventName, eventHandler] of Object.entries(event)) {
+        this._addEventHandler(eventName, eventHandler!, opts, once, passive);
       }
       return;
     }
@@ -282,8 +282,8 @@ export class EventManager {
   private _removeEventHandler(event: string | MjolnirEventHandlers, handler?: MjolnirEventHandler) {
     if (typeof event !== 'string') {
       // If `event` is a map, call `off()` for each entry.
-      for (const [eventName, handler] of Object.entries(event)) {
-        this._removeEventHandler(eventName, handler);
+      for (const [eventName, eventHandler] of Object.entries(event)) {
+        this._removeEventHandler(eventName, eventHandler);
       }
       return;
     }
@@ -315,7 +315,7 @@ export class EventManager {
   }
 
   private _getRecognizerName(event: string): string | undefined {
-    return this.manager.recognizers.find(recognizer => {
+    return this.manager.recognizers.find((recognizer) => {
       return recognizer.getEventNames().includes(event);
     })?.options.event;
   }

src/hammerjs/input/compute-input-data.ts

@@ -62,8 +62,8 @@ export function computeInputData(manager: Manager, input: RawInput): HammerInput
   input.maxPointers = !session.prevInput
     ? input.pointers.length
     : input.pointers.length > session.prevInput.maxPointers
-    ? input.pointers.length
-    : session.prevInput.maxPointers;
+      ? input.pointers.length
+      : session.prevInput.maxPointers;
 
   // find the correct target
   let target = manager.element!;

src/hammerjs/input/types.ts

@@ -64,6 +64,13 @@ export type RawInput = {
   isFinal?: boolean;
 };
 
+/**
+ * Emitted input event */
+export type HammerInput = Omit<Required<RawInput>, 'isFirst' | 'isFinal'> & {
+  /** Number of consecutive taps recognized. Populated if emitted by TapRecognizer */
+  tapCount?: number;
+};
+
 /**
  * Simplified HammerInput object retained in memory to help event processing */
 export type SimpleInput = {
@@ -92,10 +99,3 @@ export type Session = {
 
   prevented?: boolean;
 };
-
-/**
- * Emitted input event */
-export type HammerInput = Omit<Required<RawInput>, 'isFirst' | 'isFinal'> & {
-  /** Number of consecutive taps recognized. Populated if emitted by TapRecognizer */
-  tapCount?: number;
-};