Merge pull request #625 from taye/modifiers-array

Per-action modifiers array

README.md

@@ -46,11 +46,13 @@ var pixelSize = 16;
 interact('.rainbow-pixel-canvas')
   .origin('self')
   .draggable({
-    snap: {
-        targets: [ interact.createSnapGrid({
+    modifiers: [
+      interact.modifiers.snap({
+        targets: [ interact.snappers.grid({
           x: pixelSize, y: pixelSize
-        }) ]
-    },
+        }) ],
+      }),
+    ],
     // allow multiple drags on the same element
     maxPerElement: Infinity
   })

packages/_dev/test/helpers.js

@@ -115,4 +115,10 @@ export function mockInteractable (props) {
     props);
 }
 
+export function getProps (src, props) {
+  return props.reduce((acc, prop) => {
+    acc[prop] = src[prop];
+    return acc;
+  }, {});
+}
 export { _ };

packages/inertia/index.js

@@ -80,7 +80,6 @@ function resume ({ interaction, event, pointer, eventTarget }, scope) {
           interaction, event, interaction.prepared.name, 'resume', interaction.element);
 
         interaction._fireEvent(resumeEvent);
-        modifiers.resetStatuses(interaction.modifiers.statuses, scope.modifiers);
 
         utils.pointer.copyCoords(interaction.coords.prev, interaction.coords.cur);
         break;
@@ -120,15 +119,15 @@ function release ({ interaction, event }, scope) {
   const modifierArg = {
     interaction,
     pageCoords: utils.extend({}, interaction.coords.cur.page),
-    statuses: {},
+    statuses: inertiaPossible && interaction.modifiers.statuses.map(
+      modifierStatus => utils.extend({}, modifierStatus)
+    ),
     preEnd: true,
     requireEndOnly: true,
   };
 
   // smoothEnd
   if (inertiaPossible && !inertia) {
-    modifiers.resetStatuses(modifierArg.statuses, scope.modifiers);
-
     modifierResult = modifiers.setAll(modifierArg, scope.modifiers);
 
     if (modifierResult.shouldMove && modifierResult.locked) {
@@ -163,8 +162,6 @@ function release ({ interaction, event }, scope) {
     modifierArg.pageCoords.x += status.xe;
     modifierArg.pageCoords.y += status.ye;
 
-    modifiers.resetStatuses(modifierArg.statuses, scope.modifiers);
-
     modifierResult = modifiers.setAll(modifierArg, scope.modifiers);
 
     status.modifiedXe += modifierResult.delta.x;

packages/interact/index.js

@@ -6,6 +6,7 @@ import inertia from '@interactjs/inertia';
 import * as pointerEvents from '@interactjs/pointerEvents';
 import * as autoStart from '@interactjs/autoStart';
 import * as actions from '@interactjs/actions';
+import modifiersBase from '@interactjs/modifiers/base';
 import * as modifiers from '@interactjs/modifiers';
 import * as snappers from '@interactjs/utils/snappers';
 import autoScroll from '@interactjs/autoScroll';
@@ -29,11 +30,19 @@ export function init (window) {
   interact.use(actions);
 
   // snap, resize, etc.
-  interact.use(modifiers);
-
+  interact.use(modifiersBase);
+  interact.modifiers = modifiers;
   interact.snappers = snappers;
   interact.createSnapGrid = interact.snappers.grid;
 
+  // for backwrads compatibility
+  for (const type in modifiers) {
+    const { _defaults, _methods } = modifiers[type];
+
+    _defaults._methods = _methods;
+    scope.defaults.perAction[type] = _defaults;
+  }
+
   // autoScroll
   interact.use(autoScroll);
 

packages/modifiers/README.md

@@ -0,0 +1,25 @@
+# modifiers
+
+Use modifiers to change the coordinates of drag, resize and gesture events.
+
+The `options` object passed to the action methods can have a `modifiers` array
+which will be applied to events of that action type.
+
+```js
+// create a restrict modifier to prevent dragging an element out of its parent
+const restrictToParent = interact.modifiers.restrict({
+  restriction: 'parent',
+  elementRect: { left: 0, right: 0, top: 1, bottom: 1 },
+})
+
+// create a snap modifier which changes the event coordinates to the closest
+// corner of a grid
+const snap100x100 = interact.modifiers.snap({
+  targets: [interact.snappers.grid({ x: 100, y: 100 })],
+}),
+
+// apply the restrict and then the snap modifiers to drag events
+interact(target).draggable({
+  modifiers: [restrictToParent, snap100x100],
+})
+```