Merge pull request #620 from taye/feat-snap-edges

snapEdges modifier

packages/core/Interactable.js

@@ -210,7 +210,7 @@ class Interactable {
     return this;
   }
 
-  _onOffMultiple (method, typeArg, listenerArg, options) {
+  _onOff (method, typeArg, listenerArg, options) {
     if (is.object(typeArg) && !is.array(typeArg)) {
       options = listenerArg;
       listenerArg = null;
@@ -252,7 +252,7 @@ class Interactable {
    * @return {Interactable} This Interactable
    */
   on (types, listener, options) {
-    return this._onOffMultiple('on', types, listener, options);
+    return this._onOff('on', types, listener, options);
   }
 
   /**
@@ -266,7 +266,7 @@ class Interactable {
    * @return {Interactable} This Interactable
    */
   off (types, listener, options) {
-    return this._onOffMultiple('off', types, listener, options);
+    return this._onOff('off', types, listener, options);
   }
 
   /**

packages/modifiers/base.js

@@ -31,7 +31,7 @@ function init (scope) {
   interactions.signals.on('before-action-move', arg => setCurCoords(arg, scope.modifiers));
 }
 
-function setOffsets (arg, modifiers) {
+function startAll (arg, modifiers) {
   const { interaction, pageCoords: page } = arg;
   const { target, element, modifiers: { startOffset } } = interaction;
   const rect = target.getRect(element);
@@ -56,12 +56,13 @@ function setOffsets (arg, modifiers) {
 
   for (const modifierName of modifiers.names) {
     arg.options = target.options[interaction.prepared.name][modifierName];
+    arg.status = arg.statuses[modifierName];
 
     if (!arg.options) {
       continue;
     }
 
-    interaction.modifiers.offsets[modifierName] = modifiers[modifierName].setOffset(arg);
+    interaction.modifiers.offsets[modifierName] = modifiers[modifierName].start(arg);
   }
 }
 
@@ -138,7 +139,7 @@ function start ({ interaction, phase }, modifiers, pageCoords) {
     requireEndOnly: false,
   };
 
-  setOffsets(arg, modifiers);
+  startAll(arg, modifiers);
   resetStatuses(arg.statuses, modifiers);
 
   arg.pageCoords = extend({}, interaction.coords.start.page);
@@ -211,7 +212,7 @@ function shouldDo (options, preEnd, requireEndOnly) {
 
 export default {
   init,
-  setOffsets,
+  startAll,
   setAll,
   resetStatuses,
   start,

packages/modifiers/index.js

@@ -1,6 +1,7 @@
 import modifiers from './base';
 import snap from './snap';
 import snapSize from './snapSize';
+import snapEdges from './snapEdges';
 import restrict from './restrict';
 import restrictEdges from './restrictEdges';
 import restrictSize from './restrictSize';
@@ -9,6 +10,7 @@ function init (scope) {
   modifiers.init(scope);
   snap.init(scope);
   snapSize.init(scope);
+  snapEdges.init(scope);
   restrict.init(scope);
   restrictEdges.init(scope);
   restrictSize.init(scope);
@@ -18,6 +20,7 @@ export {
   modifiers,
   snap,
   snapSize,
+  snapEdges,
   restrict,
   restrictEdges,
   restrictSize,

packages/modifiers/restrict.js

@@ -14,7 +14,7 @@ function init (scope) {
   defaults.perAction.restrict = restrict.defaults;
 }
 
-function setOffset ({ rect, startOffset, options }) {
+function start ({ rect, startOffset, options }) {
   const elementRect = options && options.elementRect;
   const offset = {};
 
@@ -80,7 +80,7 @@ function getRestrictionRect (value, interaction, page) {
 
 const restrict = {
   init,
-  setOffset,
+  start,
   set,
   getRestrictionRect,
   defaults: {

packages/modifiers/restrictEdges.js

@@ -29,7 +29,7 @@ function init (scope) {
   defaults.perAction.restrictEdges = restrictEdges.defaults;
 }
 
-function setOffset ({ interaction, options }) {
+function start ({ interaction, options }) {
   const startOffset = interaction.modifiers.startOffset;
   let offset;
 
@@ -104,7 +104,7 @@ const restrictEdges = {
   noInner,
   noOuter,
   getRestrictionRect,
-  setOffset,
+  start,
   set,
   defaults: {
     enabled: false,

packages/modifiers/restrictSize.js

@@ -28,8 +28,8 @@ function init (scope) {
   defaults.perAction.restrictSize = restrictSize.defaults;
 }
 
-function setOffset ({ interaction }) {
-  return restrictEdges.setOffset({ interaction });
+function start ({ interaction }) {
+  return restrictEdges.start({ interaction });
 }
 
 function set (arg) {
@@ -74,7 +74,7 @@ function set (arg) {
 
 const restrictSize = {
   init,
-  setOffset,
+  start,
   set,
   defaults: {
     enabled: false,

packages/modifiers/snap.js

@@ -13,7 +13,7 @@ function init (scope) {
   defaults.perAction.snap = snap.defaults;
 }
 
-function setOffset ({ interaction, interactable, element, rect, startOffset, options }) {
+function start ({ interaction, interactable, element, rect, startOffset, options }) {
   const offsets = [];
   const optionsOrigin = utils.rect.rectToXY(utils.rect.resolveRectLike(options.origin));
   const origin = optionsOrigin || utils.getOriginXY(interactable, element, interaction.prepared.name);
@@ -150,7 +150,7 @@ function set ({ interaction, modifiedCoords, status, phase, options, offset: off
 
 const snap = {
   init,
-  setOffset,
+  start,
   set,
   defaults: {
     enabled: false,

packages/modifiers/snapEdges.js

@@ -0,0 +1,75 @@
+/**
+ * @module modifiers/snapEdges
+ *
+ * @description
+ * This module allows snapping of the edges of targets during resize
+ * interactions.
+ *
+ * @example
+ * interact(target).resizable({
+ *   snapEdges: {
+ *     targets: [interact.snappers.grid({ x: 100, y: 50 })],
+ *   },
+ * });
+ *
+ * interact(target).resizable({
+ *   snapEdges: {
+ *     targets: [
+ *       interact.snappers.grid({
+ *        top: 50,
+ *        left: 50,
+ *        bottom: 100,
+ *        right: 100,
+ *       }),
+ *     ],
+ *   },
+ * });
+ */
+
+import clone from '@interactjs/utils/clone';
+import extend from '@interactjs/utils/extend';
+import snapSize from './snapSize';
+
+function init (scope) {
+  const {
+    modifiers,
+    defaults,
+  } = scope;
+
+  modifiers.snapEdges = snapEdges;
+  modifiers.names.push('snapEdges');
+
+  defaults.perAction.snapEdges = snapEdges.defaults;
+}
+
+function start (arg) {
+  const edges = arg.interaction.prepared.edges;
+
+  if (!edges) { return null; }
+
+  arg.status.targetFields = arg.status.targetFields || [
+    [edges.left ? 'left' : 'right', edges.top ? 'top' : 'bottom'],
+  ];
+
+  return snapSize.start(arg);
+}
+
+function set (arg) {
+  return snapSize.set(arg);
+}
+
+function modifyCoords (arg) {
+  snapSize.modifyCoords(arg);
+}
+
+const snapEdges = {
+  init,
+  start,
+  set,
+  modifyCoords,
+  defaults: extend(clone(snapSize.defaults), {
+    offset: { x: 0, y: 0 },
+  }),
+};
+
+export default snapEdges;

packages/modifiers/snapSize.js

@@ -17,33 +17,39 @@ function init (scope) {
   defaults.perAction.snapSize = snapSize.defaults;
 }
 
-function setOffset (arg) {
-  const { interaction, options } = arg;
+function start (arg) {
+  const { interaction, status, options } = arg;
   const edges = interaction.prepared.edges;
 
-  if (!edges) { return; }
+  if (!edges) { return null; }
 
   arg.options = {
     relativePoints: [{
       x: edges.left? 0 : 1,
       y: edges.top ? 0 : 1,
     }],
     origin: { x: 0, y: 0 },
-    offset: 'self',
+    offset: options.offset || 'self',
     range: options.range,
   };
 
-  const offsets = snap.setOffset(arg);
+  status.targetFields = status.targetFields || [
+    ['width', 'height'],
+    ['x', 'y'],
+  ];
+
+  const offsets = snap.start(arg);
   arg.options = options;
 
   return offsets;
 }
 
 function set (arg) {
-  const { interaction, options, offset, modifiedCoords } = arg;
-  const page = extend({}, modifiedCoords);
-  const relativeX = page.x - offset[0].x;
-  const relativeY = page.y - offset[0].y;
+  const { interaction, status, options, offset, modifiedCoords } = arg;
+  const relative = {
+    x: modifiedCoords.x - offset[0].x,
+    y: modifiedCoords.y - offset[0].y,
+  };
 
   arg.options = extend({}, options);
   arg.options.targets = [];
@@ -52,17 +58,21 @@ function set (arg) {
     let target;
 
     if (is.func(snapTarget)) {
-      target = snapTarget(relativeX, relativeY, interaction);
+      target = snapTarget(relative.x, relative.y, interaction);
     }
     else {
       target = snapTarget;
     }
 
     if (!target) { continue; }
 
-    if ('width' in target && 'height' in target) {
-      target.x = target.width;
-      target.y = target.height;
+    for (const [xField, yField] of status.targetFields) {
+      if (xField in target || yField in target) {
+        target.x = target[xField];
+        target.y = target[yField];
+
+        break;
+      }
     }
 
     arg.options.targets.push(target);
@@ -73,13 +83,14 @@ function set (arg) {
 
 const snapSize = {
   init,
-  setOffset,
+  start,
   set,
   defaults: {
     enabled: false,
     endOnly: false,
     range  : Infinity,
     targets: null,
+    offset: null,
     offsets: null,
   },
 };

packages/modifiers/tests/restrictEdges.js

@@ -68,7 +68,7 @@ test('restrictEdges', t => {
     'outer restriction is applied correctly with offset'
   );
 
-  // setOffset
+  // start
   interaction.modifiers = {};
   interaction.modifiers.startOffset = { top: 5, left: 10, bottom: -8, right: -16 };
   interaction.target = {
@@ -80,9 +80,9 @@ test('restrictEdges', t => {
   options.offset = 'self';
 
   t.deepEqual(
-    restrictEdges.setOffset(arg),
+    restrictEdges.start(arg),
     { top: 505, left: 910, bottom: 508, right: 916 },
-    'setOffset gets x/y from selector string'
+    'start gets x/y from selector string'
   );
 
   t.end();