Merge branch 'master' into stable

CHANGELOG.md

@@ -1,3 +1,7 @@
+## v1.4.12
+
+ - fixed errors from calling `interaction.stop()` in start event (#725)
+
 ## v1.4.11
 
  - fixed hold events (#730)

README.md

@@ -2,17 +2,17 @@
 
 <h2>
   JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+).
-  <br><br>
-
-  <div align="center">
-  <a href="https://gitter.im/taye/interact.js"><img src="https://badges.gitter.im/Join%20Chat.svg" alt="Gitter"></a>
-  <a href="https://www.jsdelivr.com/package/npm/interactjs"><img src="https://data.jsdelivr.com/v1/package/npm/interactjs/badge" alt="jsDelivr"></a>
-  <a href="https://travis-ci.org/taye/interact.js"><img src="https://travis-ci.org/taye/interact.js.svg?branch=master" alt="Build Status"></a>
-  <a href="https://codeclimate.com/github/taye/interact.js/maintainability"><img src="https://api.codeclimate.com/v1/badges/0168aeaeed781a949088/maintainability.svg" alt="Maintainability"></a>
-  <a href="https://codeclimate.com/github/taye/interact.js/code?sort=-test_coverage"><img src="https://codeclimate.com/github/taye/interact.js/badges/coverage.svg" alt="Test Coverage"></a>
-  </div>
 </h2>
 
+<div align="center">
+<a href="https://gitter.im/taye/interact.js"><img src="https://badges.gitter.im/Join%20Chat.svg" alt="Gitter"></a>
+<a href="https://www.jsdelivr.com/package/npm/interactjs"><img src="https://data.jsdelivr.com/v1/package/npm/interactjs/badge" alt="jsDelivr"></a>
+<a href="https://travis-ci.org/taye/interact.js"><img src="https://travis-ci.org/taye/interact.js.svg?branch=master" alt="Build Status"></a>
+<a href="https://codeclimate.com/github/taye/interact.js/maintainability"><img src="https://api.codeclimate.com/v1/badges/0168aeaeed781a949088/maintainability.svg" alt="Maintainability"></a>
+<a href="https://codeclimate.com/github/taye/interact.js/code?sort=-test_coverage"><img src="https://codeclimate.com/github/taye/interact.js/badges/coverage.svg" alt="Test Coverage"></a>
+</div>
+<br>
+
 Features include:
 
  - **inertia** and **snapping**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interactjs/_dev",
-  "version": "1.4.11",
+  "version": "1.4.12",
   "private": true,
   "workspaces": [
     ".",

packages/actions/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@interactjs/actions",
-  "version": "1.4.11",
+  "version": "1.4.12",
   "peerDependencies": {
-    "@interactjs/core": "1.4.11",
-    "@interactjs/utils": "1.4.11"
+    "@interactjs/core": "1.4.12",
+    "@interactjs/utils": "1.4.12"
   },
   "publishConfig": {
     "access": "public"

packages/actions/resize.ts

@@ -1,6 +1,9 @@
 import { ActionProps, Interaction } from '@interactjs/core/Interaction'
 import { ActionName, Scope } from '@interactjs/core/scope'
-import * as utils from '@interactjs/utils'
+import * as arr from '@interactjs/utils/arr'
+import * as dom from '@interactjs/utils/domUtils'
+import extend from '@interactjs/utils/extend'
+import * as is from '@interactjs/utils/is'
 
 export type EdgeName = 'top' | 'left' | 'bottom' | 'right'
 
@@ -129,7 +132,7 @@ function install (scope: Scope) {
 
   actions[ActionName.Resize] = resize
   actions.names.push(ActionName.Resize)
-  utils.arr.merge(actions.eventTypes, [
+  arr.merge(actions.eventTypes, [
     'resizestart',
     'resizemove',
     'resizeinertiastart',
@@ -175,15 +178,15 @@ const resize = {
   ) {
     if (!rect) { return null }
 
-    const page = utils.extend({}, interaction.coords.cur.page)
+    const page = extend({}, interaction.coords.cur.page)
     const options = interactable.options
 
     if (options.resize.enabled) {
       const resizeOptions = options.resize
       const resizeEdges: { [edge: string]: boolean } = { left: false, right: false, top: false, bottom: false }
 
       // if using resize.edges
-      if (utils.is.object(resizeOptions.edges)) {
+      if (is.object(resizeOptions.edges)) {
         for (const edge in resizeEdges) {
           resizeEdges[edge] = checkResizeEdge(edge,
             resizeOptions.edges[edge],
@@ -247,28 +250,28 @@ const resize = {
 }
 
 function resizable (interactable: Interact.Interactable, options: Interact.OrBoolean<Interact.ResizableOptions> | boolean, scope: Scope) {
-  if (utils.is.object(options)) {
+  if (is.object(options)) {
     interactable.options.resize.enabled = options.enabled !== false
     interactable.setPerAction('resize', options)
     interactable.setOnEvents('resize', options)
 
-    if (utils.is.string(options.axis) && /^x$|^y$|^xy$/.test(options.axis)) {
+    if (is.string(options.axis) && /^x$|^y$|^xy$/.test(options.axis)) {
       interactable.options.resize.axis = options.axis
     }
     else if (options.axis === null) {
       interactable.options.resize.axis = scope.defaults.actions.resize.axis
     }
 
-    if (utils.is.bool(options.preserveAspectRatio)) {
+    if (is.bool(options.preserveAspectRatio)) {
       interactable.options.resize.preserveAspectRatio = options.preserveAspectRatio
     }
-    else if (utils.is.bool(options.square)) {
+    else if (is.bool(options.square)) {
       interactable.options.resize.square = options.square
     }
 
     return interactable
   }
-  if (utils.is.bool(options)) {
+  if (is.bool(options)) {
     interactable.options.resize.enabled = options
 
     return interactable
@@ -283,8 +286,8 @@ function checkResizeEdge (name: string, value: any, page: Interact.Point, elemen
   // true value, use pointer coords and element rect
   if (value === true) {
     // if dimensions are negative, "switch" edges
-    const width  = utils.is.number(rect.width) ? rect.width  : rect.right  - rect.left
-    const height = utils.is.number(rect.height) ? rect.height : rect.bottom - rect.top
+    const width  = is.number(rect.width) ? rect.width  : rect.right  - rect.left
+    const height = is.number(rect.height) ? rect.height : rect.bottom - rect.top
 
     // don't use margin greater than half the relevent dimension
     margin = Math.min(margin, (name === 'left' || name === 'right' ? width : height) / 2)
@@ -306,13 +309,13 @@ function checkResizeEdge (name: string, value: any, page: Interact.Point, elemen
   }
 
   // the remaining checks require an element
-  if (!utils.is.element(element)) { return false }
+  if (!is.element(element)) { return false }
 
-  return utils.is.element(value)
+  return is.element(value)
   // the value is an element to use as a resize handle
     ? value === element
     // otherwise check if element matches value as selector
-    : utils.dom.matchesUpTo(element, value, interactableElement)
+    : dom.matchesUpTo(element, value, interactableElement)
 }
 
 function initCursors (browser: typeof import ('@interactjs/utils/browser').default) {
@@ -360,7 +363,7 @@ function start ({ iEvent, interaction }: Interact.SignalArg) {
    * on the active edges and the edge being interacted with.
    */
   if (resizeOptions.square || resizeOptions.preserveAspectRatio) {
-    const linkedEdges = utils.extend({}, interaction.prepared.edges)
+    const linkedEdges = extend({}, interaction.prepared.edges)
 
     linkedEdges.top    = linkedEdges.top    || (linkedEdges.left   && !linkedEdges.bottom)
     linkedEdges.left   = linkedEdges.left   || (linkedEdges.top    && !linkedEdges.right)
@@ -380,9 +383,9 @@ function start ({ iEvent, interaction }: Interact.SignalArg) {
 
   interaction.resizeRects = {
     start     : startRect,
-    current   : utils.extend({}, startRect),
-    inverted  : utils.extend({}, startRect),
-    previous  : utils.extend({}, startRect),
+    current   : extend({}, startRect),
+    inverted  : extend({}, startRect),
+    previous  : extend({}, startRect),
     delta     : {
       left: 0,
       right : 0,
@@ -411,10 +414,10 @@ function move ({ iEvent, interaction }) {
   const current    = interaction.resizeRects.current
   const inverted   = interaction.resizeRects.inverted
   const deltaRect  = interaction.resizeRects.delta
-  const previous   = utils.extend(interaction.resizeRects.previous, inverted)
+  const previous   = extend(interaction.resizeRects.previous, inverted)
   const originalEdges = edges
 
-  const eventDelta = utils.extend({}, iEvent.delta)
+  const eventDelta = extend({}, iEvent.delta)
 
   if (resizeOptions.preserveAspectRatio || resizeOptions.square) {
     // `resize.preserveAspectRatio` takes precedence over `resize.square`
@@ -440,7 +443,7 @@ function move ({ iEvent, interaction }) {
 
   if (invertible) {
     // if invertible, copy the current rect
-    utils.extend(inverted, current)
+    extend(inverted, current)
 
     if (invert === 'reposition') {
       // swap edge values if necessary to keep width/height positive

packages/auto-scroll/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@interactjs/auto-scroll",
-  "version": "1.4.11",
+  "version": "1.4.12",
   "peerDependencies": {
-    "@interactjs/utils": "1.4.11"
+    "@interactjs/utils": "1.4.12"
   },
   "publishConfig": {
     "access": "public"

packages/auto-start/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@interactjs/auto-start",
-  "version": "1.4.11",
+  "version": "1.4.12",
   "peerDependencies": {
-    "@interactjs/core": "1.4.11",
-    "@interactjs/utils": "1.4.11"
+    "@interactjs/core": "1.4.12",
+    "@interactjs/utils": "1.4.12"
   },
   "devDependencies": {
-    "@interactjs/actions": "1.4.11"
+    "@interactjs/actions": "1.4.12"
   },
   "publishConfig": {
     "access": "public"

packages/core/Interaction.spec.ts

@@ -1,4 +1,6 @@
 import test from '@interactjs/_dev/test/test'
+import drag from '@interactjs/actions/drag'
+import autoStart from '@interactjs/auto-start/base'
 import pointerUtils from '@interactjs/utils/pointerUtils'
 import Signals from '@interactjs/utils/Signals'
 import InteractEvent from './InteractEvent'
@@ -402,22 +404,25 @@ test('Interaction.start', (t) => {
 })
 
 test('stop interaction from start event', (t) => {
-  const scope = helpers.mockScope()
+  const {
+    interaction,
+    interactable,
+    target,
+  } = helpers.testEnv({ plugins: [drag, autoStart] })
 
-  const interaction = scope.interactions.new({})
-  const interactable = helpers.mockInteractable()
+  let stoppedBeforeStartFired
 
-  interaction.interactable = interactable
-  interaction.element = interactable.element
-  interaction.prepared = { name: 'TEST' }
+  interactable.on('dragstart', (event) => {
+    stoppedBeforeStartFired = interaction._stopped
 
-  interactable.events.on('TESTstart', (event) => {
     event.interaction.stop()
   })
 
-  interaction._signals.fire('action-start', { interaction, event: {} })
+  interaction.start({ name: 'drag' }, interactable, target as HTMLElement)
 
+  t.notOk(stoppedBeforeStartFired, '!interaction._stopped in start listener')
   t.notOk(interaction.interacting(), 'interaction can be stopped from start event listener')
+  t.ok(interaction._stopped, 'interaction._stopped after stop() in start listener')
 
   t.end()
 })

packages/core/Interaction.ts

@@ -85,6 +85,7 @@ export class Interaction<T extends ActionName = any> {
   pointerWasMoved = false
   _interacting = false
   _ending = false
+  _stopped = true
   _proxy: _InteractionProxy = null
 
   simulation = null
@@ -196,11 +197,12 @@ export class Interaction<T extends ActionName = any> {
     this.element      = element
     this.rect         = interactable.getRect(element)
     this.edges        = this.prepared.edges
+    this._stopped     = false
     this._interacting = this._doPhase({
       interaction: this,
       event: this.downEvent,
       phase: EventPhase.Start,
-    })
+    }) && !this._stopped
 
     return this._interacting
   }
@@ -370,6 +372,7 @@ export class Interaction<T extends ActionName = any> {
     this.interactable = this.element = null
 
     this._interacting = false
+    this._stopped = true
     this.prepared.name = this.prevEvent = null
   }
 

packages/core/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@interactjs/core",
-  "version": "1.4.11",
+  "version": "1.4.12",
   "peerDependencies": {
-    "@interactjs/dev-tools": "1.4.11",
-    "@interactjs/utils": "1.4.11"
+    "@interactjs/dev-tools": "1.4.12",
+    "@interactjs/utils": "1.4.12"
   },
   "devDependencies": {
-    "@interactjs/actions": "1.4.11",
-    "@interactjs/auto-start": "1.4.11"
+    "@interactjs/actions": "1.4.12",
+    "@interactjs/auto-start": "1.4.12"
   },
   "publishConfig": {
     "access": "public"

packages/dev-tools/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@interactjs/dev-tools",
-  "version": "1.4.11",
+  "version": "1.4.12",
   "dependencies": {
-    "@interactjs/utils": "1.4.11"
+    "@interactjs/utils": "1.4.12"
   },
   "devDependencies": {
-    "@interactjs/actions": "1.4.11",
-    "@interactjs/core": "1.4.11"
+    "@interactjs/actions": "1.4.12",
+    "@interactjs/core": "1.4.12"
   },
   "publishConfig": {
     "access": "public"

packages/inertia/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@interactjs/inertia",
-  "version": "1.4.11",
+  "version": "1.4.12",
   "peerDependencies": {
-    "@interactjs/core": "1.4.11",
-    "@interactjs/modifiers": "1.4.11",
-    "@interactjs/utils": "1.4.11"
+    "@interactjs/core": "1.4.12",
+    "@interactjs/modifiers": "1.4.12",
+    "@interactjs/utils": "1.4.12"
   },
   "devDependencies": {
-    "@interactjs/actions": "1.4.11"
+    "@interactjs/actions": "1.4.12"
   },
   "publishConfig": {
     "access": "public"

packages/interact/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@interactjs/interact",
-  "version": "1.4.11",
+  "version": "1.4.12",
   "peerDependencies": {
-    "@interactjs/actions": "1.4.11",
-    "@interactjs/auto-scroll": "1.4.11",
-    "@interactjs/auto-start": "1.4.11",
-    "@interactjs/core": "1.4.11",
-    "@interactjs/dev-tools": "1.4.11",
-    "@interactjs/inertia": "1.4.11",
-    "@interactjs/modifiers": "1.4.11",
-    "@interactjs/pointer-events": "1.4.11",
-    "@interactjs/reflow": "1.4.11",
-    "@interactjs/utils": "1.4.11"
+    "@interactjs/actions": "1.4.12",
+    "@interactjs/auto-scroll": "1.4.12",
+    "@interactjs/auto-start": "1.4.12",
+    "@interactjs/core": "1.4.12",
+    "@interactjs/dev-tools": "1.4.12",
+    "@interactjs/inertia": "1.4.12",
+    "@interactjs/modifiers": "1.4.12",
+    "@interactjs/pointer-events": "1.4.12",
+    "@interactjs/reflow": "1.4.12",
+    "@interactjs/utils": "1.4.12"
   },
   "publishConfig": {
     "access": "public"