chore: publish v1.10.22

CHANGELOG.md

@@ -1,3 +1,7 @@
+## v1.10.22
+
+- fix(actions/gesture): fix error when inertia is enabled for gestures #995
+
 ## v1.10.21
 
 - fix(actions/drop): fix regression with drop event targets #1016

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interactjs/_dev",
-  "version": "1.10.21",
+  "version": "1.10.22",
   "private": true,
   "directories": {
     "bin": "./bin"
@@ -30,6 +30,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/register": "^7.17.7",
     "@babel/runtime": "^7.18.3",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/user-event": "^14.5.1",
     "@types/jest": "27",
     "@types/node": "^17.0.42",
     "@types/react": "^18.0.12",

packages/@interactjs/actions/drag/plugin.ts

@@ -190,6 +190,8 @@ const drag: Plugin = {
   getCursor () {
     return 'move'
   },
+
+  filterEventType: (type: string) => type.search('drag') === 0,
 }
 
 export default drag

packages/@interactjs/actions/drop/plugin.ts

@@ -261,7 +261,7 @@ function install (scope: Scope) {
   defaults.actions.drop = drop.defaults
 }
 
-function collectDrops ({ interactables }: Scope, draggableElement: Element) {
+function collectDropzones ({ interactables }: Scope, draggableElement: Element) {
   const drops: ActiveDrop[] = []
 
   // collect all dropzones and their elements which qualify for a drop
@@ -281,16 +281,7 @@ function collectDrops ({ interactables }: Scope, draggableElement: Element) {
       continue
     }
 
-    // query for new elements if necessary
-    const dropElements = (
-      is.string(dropzone.target)
-        ? dropzone._context.querySelectorAll(dropzone.target)
-        : is.array(dropzone.target)
-          ? dropzone.target
-          : [dropzone.target]
-    ) as Element[]
-
-    for (const dropzoneElement of dropElements) {
+    for (const dropzoneElement of dropzone.getAllElements()) {
       if (dropzoneElement !== draggableElement) {
         drops.push({
           dropzone,
@@ -321,7 +312,7 @@ function fireActivationEvents (activeDrops: ActiveDrop[], event: DropEvent) {
 // dynamicDrop is true
 function getActiveDrops (scope: Scope, dragElement: Element) {
   // get dropzones and their elements that could receive the draggable
-  const activeDrops = collectDrops(scope, dragElement)
+  const activeDrops = collectDropzones(scope, dragElement)
 
   for (const activeDrop of activeDrops) {
     activeDrop.rect = activeDrop.dropzone.getRect(activeDrop.element)
@@ -716,6 +707,9 @@ const drop: Plugin = {
   getDrop,
   getDropEvents,
   fireDropEvents,
+
+  filterEventType: (type: string) => type.search('drag') === 0 || type.search('drop') === 0,
+
   defaults: {
     enabled: false,
     accept: null as never,

packages/@interactjs/actions/gesture/plugin.ts

@@ -132,7 +132,7 @@ function updateGestureProps ({ interaction, iEvent, phase }: GestureSignalArg) {
 
     interaction.gesture.startDistance = iEvent.distance
     interaction.gesture.startAngle = iEvent.angle
-  } else if (ending) {
+  } else if (ending || interaction.pointers.length < 2) {
     const prevEvent = interaction.prevEvent as GestureEvent
 
     iEvent.distance = prevEvent.distance
@@ -200,6 +200,8 @@ const gesture: Plugin = {
   getCursor () {
     return ''
   },
+
+  filterEventType: (type: string) => type.search('gesture') === 0,
 }
 
 export default gesture

packages/@interactjs/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interactjs/actions",
-  "version": "1.10.21",
+  "version": "1.10.22",
   "main": "index",
   "module": "index",
   "type": "module",
@@ -10,11 +10,11 @@
     "directory": "packages/@interactjs/actions"
   },
   "peerDependencies": {
-    "@interactjs/core": "1.10.21",
-    "@interactjs/utils": "1.10.21"
+    "@interactjs/core": "1.10.22",
+    "@interactjs/utils": "1.10.22"
   },
   "optionalDependencies": {
-    "@interactjs/interact": "1.10.21"
+    "@interactjs/interact": "1.10.22"
   },
   "publishConfig": {
     "access": "public"

packages/@interactjs/actions/resize/plugin.ts

@@ -514,6 +514,8 @@ const resize: Plugin = {
     return result
   },
 
+  filterEventType: (type: string) => type.search('resize') === 0,
+
   defaultMargin: null as number,
 }
 

packages/@interactjs/auto-scroll/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interactjs/auto-scroll",
-  "version": "1.10.21",
+  "version": "1.10.22",
   "main": "index",
   "module": "index",
   "type": "module",
@@ -10,10 +10,10 @@
     "directory": "packages/@interactjs/auto-scroll"
   },
   "peerDependencies": {
-    "@interactjs/utils": "1.10.21"
+    "@interactjs/utils": "1.10.22"
   },
   "optionalDependencies": {
-    "@interactjs/interact": "1.10.21"
+    "@interactjs/interact": "1.10.22"
   },
   "publishConfig": {
     "access": "public"

packages/@interactjs/auto-start/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interactjs/auto-start",
-  "version": "1.10.21",
+  "version": "1.10.22",
   "main": "index",
   "module": "index",
   "type": "module",
@@ -10,11 +10,11 @@
     "directory": "packages/@interactjs/auto-start"
   },
   "peerDependencies": {
-    "@interactjs/core": "1.10.21",
-    "@interactjs/utils": "1.10.21"
+    "@interactjs/core": "1.10.22",
+    "@interactjs/utils": "1.10.22"
   },
   "optionalDependencies": {
-    "@interactjs/interact": "1.10.21"
+    "@interactjs/interact": "1.10.22"
   },
   "publishConfig": {
     "access": "public"

packages/@interactjs/core/InteractStatic.ts

@@ -4,11 +4,11 @@ import type { Context, EventTypes, Listener, ListenersArg, Target } from '@inter
 import browser from '@interactjs/utils/browser'
 import * as domUtils from '@interactjs/utils/domUtils'
 import is from '@interactjs/utils/is'
+import isNonNativeEvent from '@interactjs/utils/isNonNativeEvent'
 import { warnOnce } from '@interactjs/utils/misc'
 import * as pointerUtils from '@interactjs/utils/pointerUtils'
 
 import type { Interactable } from './Interactable'
-import isNonNativeEvent from './isNonNativeEvent'
 import type { Options } from './options'
 
 declare module '@interactjs/core/InteractStatic' {
@@ -74,7 +74,7 @@ export function createInteractStatic (scope: Scope): _InteractStatic {
    * @return {Interactable}
    */
   const interact = ((target: Target, options: Options) => {
-    let interactable = scope.interactables.get(target, options)
+    let interactable = scope.interactables.getExisting(target, options)
 
     if (!interactable) {
       interactable = scope.interactables.new(target, options)

packages/@interactjs/core/Interactable.spec.ts

@@ -37,23 +37,18 @@ describe('core/Interactable', () => {
   })
 
   test('Interactable unset correctly', () => {
-    const scope = helpers.mockScope() as any
+    const scope = helpers.mockScope()
 
     const div = scope.document.createElement('div')
     const interactable = scope.interactables.new(div)
 
-    const mappingInfo = div[scope.id][0]
-
-    scope.fire('interactable:unset', { interactable })
+    expect(div[scope.id]).toHaveLength(1)
 
-    // unset mappingInfo context
-    expect(mappingInfo.context).toBeNull()
+    interactable.unset()
 
-    // unset mappingInfo interactable
-    expect(mappingInfo.interactable).toBeNull()
-
-    // unset target are removed
+    // clears target mapping
     expect(div[scope.id]).toHaveLength(0)
+
     div.remove()
   })
 

packages/@interactjs/core/Interactable.ts

@@ -19,16 +19,21 @@ import clone from '@interactjs/utils/clone'
 import { getElementRect, matchesUpTo, nodeContains, trySelector } from '@interactjs/utils/domUtils'
 import extend from '@interactjs/utils/extend'
 import is from '@interactjs/utils/is'
+import isNonNativeEvent from '@interactjs/utils/isNonNativeEvent'
 import normalizeListeners from '@interactjs/utils/normalizeListeners'
 import { getWindow } from '@interactjs/utils/window'
 
 import { Eventable } from './Eventable'
-import isNonNativeEvent from './isNonNativeEvent'
 import type { ActionDefaults, Defaults, OptionsArg, PerActionDefaults, Options } from './options'
 
 type IgnoreValue = string | Element | boolean
 type DeltaSource = 'page' | 'client'
 
+const enum OnOffMethod {
+  On,
+  Off,
+}
+
 /** */
 export class Interactable implements Partial<Eventable> {
   /** @internal */ get _defaults (): Defaults {
@@ -83,12 +88,17 @@ export class Interactable implements Partial<Eventable> {
   }
 
   updatePerActionListeners (actionName: ActionName, prev: Listeners | undefined, cur: Listeners | undefined) {
+    const actionFilter = (this._actions.map[actionName] as { filterEventType?: (type: string) => boolean })
+      ?.filterEventType
+    const filter = (type: string) =>
+      (actionFilter == null || actionFilter(type)) && isNonNativeEvent(type, this._actions)
+
     if (is.array(prev) || is.object(prev)) {
-      this.off(actionName, prev)
+      this._onOff(OnOffMethod.Off, actionName, prev, undefined, filter)
     }
 
     if (is.array(cur) || is.object(cur)) {
-      this.on(actionName, cur)
+      this._onOff(OnOffMethod.On, actionName, cur, undefined, filter)
     }
   }
 
@@ -237,6 +247,21 @@ export class Interactable implements Partial<Eventable> {
     return this.options.deltaSource
   }
 
+  /** @internal */
+  getAllElements (): Element[] {
+    const { target } = this
+
+    if (is.string(target)) {
+      return Array.from(this._context.querySelectorAll(target))
+    }
+
+    if (is.func(target) && (target as any).getAllElements) {
+      return (target as any).getAllElements()
+    }
+
+    return is.element(target) ? [target] : []
+  }
+
   /**
    * Gets the selector context Node of the Interactable. The default is
    * `window.document`.
@@ -309,14 +334,19 @@ export class Interactable implements Partial<Eventable> {
     return this
   }
 
-  _onOff (method: 'on' | 'off', typeArg: EventTypes, listenerArg?: ListenersArg | null, options?: any) {
+  _onOff (
+    method: OnOffMethod,
+    typeArg: EventTypes,
+    listenerArg?: ListenersArg | null,
+    options?: any,
+    filter?: (type: string) => boolean,
+  ) {
     if (is.object(typeArg) && !is.array(typeArg)) {
       options = listenerArg
       listenerArg = null
     }
 
-    const addRemove = method === 'on' ? 'add' : 'remove'
-    const listeners = normalizeListeners(typeArg, listenerArg)
+    const listeners = normalizeListeners(typeArg, listenerArg, filter)
 
     for (let type in listeners) {
       if (type === 'wheel') {
@@ -326,11 +356,11 @@ export class Interactable implements Partial<Eventable> {
       for (const listener of listeners[type]) {
         // if it is an action event type
         if (isNonNativeEvent(type, this._actions)) {
-          this.events[method](type, listener)
+          this.events[method === OnOffMethod.On ? 'on' : 'off'](type, listener)
         }
         // delegated event
         else if (is.string(this.target)) {
-          this._scopeEvents[`${addRemove}Delegate` as 'addDelegate' | 'removeDelegate'](
+          this._scopeEvents[method === OnOffMethod.On ? 'addDelegate' : 'removeDelegate'](
             this.target,
             this._context,
             type,
@@ -340,7 +370,12 @@ export class Interactable implements Partial<Eventable> {
         }
         // remove listener from this Interactable's element
         else {
-          this._scopeEvents[addRemove](this.target, type, listener, options)
+          this._scopeEvents[method === OnOffMethod.On ? 'add' : 'remove'](
+            this.target,
+            type,
+            listener,
+            options,
+          )
         }
       }
     }
@@ -359,7 +394,7 @@ export class Interactable implements Partial<Eventable> {
    * @return {Interactable} This Interactable
    */
   on (types: EventTypes, listener?: ListenersArg, options?: any) {
-    return this._onOff('on', types, listener, options)
+    return this._onOff(OnOffMethod.On, types, listener, options)
   }
 
   /**
@@ -373,7 +408,7 @@ export class Interactable implements Partial<Eventable> {
    * @return {Interactable} This Interactable
    */
   off (types: string | string[] | EventTypes, listener?: ListenersArg, options?: any) {
-    return this._onOff('off', types, listener, options)
+    return this._onOff(OnOffMethod.Off, types, listener, options)
   }
 
   /**
@@ -401,6 +436,11 @@ export class Interactable implements Partial<Eventable> {
     }
 
     for (const setting in options) {
+      if (setting === 'getRect') {
+        this.rectChecker(options.getRect)
+        continue
+      }
+
       if (is.func((this as any)[setting])) {
         ;(this as any)[setting](options[setting as keyof typeof options])
       }
@@ -438,7 +478,7 @@ export class Interactable implements Partial<Eventable> {
         }
       }
     } else {
-      this._scopeEvents.remove(this.target as Node, 'all')
+      this._scopeEvents.remove(this.target, 'all')
     }
   }
 }