v1.4.12

packages/core/Interaction.d.ts

@@ -52,6 +52,7 @@ export declare class Interaction<T extends ActionName = any> {
     pointerWasMoved: boolean;
     _interacting: boolean;
     _ending: boolean;
+    _stopped: boolean;
     _proxy: _InteractionProxy;
     simulation: any;
     readonly pointerMoveTolerance: number;

packages/interactjs/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**

packages/interactjs/dist/api/Interactable.html

@@ -2982,7 +2982,7 @@ <h4 class="name" id="resizable"><span class="type-signature"></span>resizable<sp
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="packages_actions_resize.ts.html">packages/actions/resize.ts</a>, <a href="packages_actions_resize.ts.html#line81">line 81</a>
+        <a href="packages_actions_resize.ts.html">packages/actions/resize.ts</a>, <a href="packages_actions_resize.ts.html#line84">line 84</a>
     </li></ul></dd>
 
 

packages/interactjs/dist/api/packages_actions_resize.ts.html

@@ -43,7 +43,10 @@ <h1 class="page-title">packages/actions/resize.ts</h1>
         <article>
             <pre class="prettyprint source linenums"><code>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'
 
@@ -172,7 +175,7 @@ <h1 class="page-title">packages/actions/resize.ts</h1>
 
   actions[ActionName.Resize] = resize
   actions.names.push(ActionName.Resize)
-  utils.arr.merge(actions.eventTypes, [
+  arr.merge(actions.eventTypes, [
     'resizestart',
     'resizemove',
     'resizeinertiastart',
@@ -218,15 +221,15 @@ <h1 class="page-title">packages/actions/resize.ts</h1>
   ) {
     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],
@@ -290,28 +293,28 @@ <h1 class="page-title">packages/actions/resize.ts</h1>
 }
 
 function resizable (interactable: Interact.Interactable, options: Interact.OrBoolean&lt;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) &amp;&amp; /^x$|^y$|^xy$/.test(options.axis)) {
+    if (is.string(options.axis) &amp;&amp; /^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
@@ -326,8 +329,8 @@ <h1 class="page-title">packages/actions/resize.ts</h1>
   // 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)
@@ -349,13 +352,13 @@ <h1 class="page-title">packages/actions/resize.ts</h1>
   }
 
   // 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) {
@@ -403,7 +406,7 @@ <h1 class="page-title">packages/actions/resize.ts</h1>
    * 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   &amp;&amp; !linkedEdges.bottom)
     linkedEdges.left   = linkedEdges.left   || (linkedEdges.top    &amp;&amp; !linkedEdges.right)
@@ -423,9 +426,9 @@ <h1 class="page-title">packages/actions/resize.ts</h1>
 
   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,
@@ -454,10 +457,10 @@ <h1 class="page-title">packages/actions/resize.ts</h1>
   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`
@@ -483,7 +486,7 @@ <h1 class="page-title">packages/actions/resize.ts</h1>
 
   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/interactjs/dist/api/packages_core_Interaction.ts.html

@@ -128,6 +128,7 @@ <h1 class="page-title">packages/core/Interaction.ts</h1>
   pointerWasMoved = false
   _interacting = false
   _ending = false
+  _stopped = true
   _proxy: _InteractionProxy = null
 
   simulation = null
@@ -239,11 +240,12 @@ <h1 class="page-title">packages/core/Interaction.ts</h1>
     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,
-    })
+    }) &amp;&amp; !this._stopped
 
     return this._interacting
   }
@@ -413,6 +415,7 @@ <h1 class="page-title">packages/core/Interaction.ts</h1>
     this.interactable = this.element = null
 
     this._interacting = false
+    this._stopped = true
     this.prepared.name = this.prevEvent = null
   }