@visx/drag - npm Package Compare versions

Comparing version 2.5.0 to 2.6.0

esm/Drag.js

@@ -23,3 +23,4 @@ import _pt from "prop-types";
       isDragging = _ref.isDragging,
-      restrict = _ref.restrict;
+      restrict = _ref.restrict,
+      restrictToPath = _ref.restrictToPath;
   var drag = useDrag({
@@ -36,3 +37,4 @@ resetOnStart: resetOnStart,
     isDragging: isDragging,
-    restrict: restrict
+    restrict: restrict,
+    restrictToPath: restrictToPath
   });
@@ -39,0 +41,0 @@ return /*#__PURE__*/React.createElement(React.Fragment, null, drag.isDragging && captureDragArea && /*#__PURE__*/React.createElement("rect", {

esm/useDrag.js

 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { Point, subtractPoints, sumPoints } from '@visx/point';
 import { localPoint } from '@visx/event';
 import useStateWithCallback from './util/useStateWithCallback';
-import clampNumber from './util/clampNumber';
+import restrictPoint from './util/restrictPoint';
+import useSamplesAlongPath from './util/useSamplesAlongPath';
 
@@ -24,3 +26,4 @@ /** Hook for dragging, returns a `UseDrag` object. */
       _ref$restrict = _ref.restrict,
-      restrict = _ref$restrict === void 0 ? {} : _ref$restrict;
+      restrict = _ref$restrict === void 0 ? {} : _ref$restrict,
+      restrictToPath = _ref.restrictToPath;
 
@@ -34,12 +37,2 @@ // use ref to detect prop changes
   });
-  var xMin = restrict.xMin,
-      xMax = restrict.xMax,
-      yMin = restrict.yMin,
-      yMax = restrict.yMax;
-  var clampX = useCallback(function (num) {
-    return clampNumber(num, xMin != null ? xMin : -Infinity, xMax != null ? xMax : Infinity);
-  }, [xMax, xMin]);
-  var clampY = useCallback(function (num) {
-    return clampNumber(num, yMin != null ? yMin : -Infinity, yMax != null ? yMax : Infinity);
-  }, [yMax, yMin]);
 
@@ -57,6 +50,6 @@ var _useStateWithCallback = useStateWithCallback({
 
-  var _useState = useState({
+  var _useState = useState(new Point({
     x: 0,
     y: 0
-  }),
+  })),
       dragStartPointerOffset = _useState[0],
@@ -93,18 +86,24 @@ setDragStartPointerOffset = _useState[1]; // if prop position changes, update state
   }, [dragState.isDragging, isDragging, setDragStateWithCallback]);
+  var restrictToPathSamples = useSamplesAlongPath(restrictToPath);
   var handleDragStart = useCallback(function (event) {
     event.persist();
     setDragStateWithCallback(function (currState) {
-      var currentPoint = {
-        x: (currState.x || 0) + currState.dx,
-        y: (currState.y || 0) + currState.dy
-      };
-      var eventPoint = localPoint(event) || {
+      // eslint-disable-next-line no-shadow
+      var _currState$x = currState.x,
+          x = _currState$x === void 0 ? 0 : _currState$x,
+          _currState$y = currState.y,
+          y = _currState$y === void 0 ? 0 : _currState$y,
+          dx = currState.dx,
+          dy = currState.dy;
+      var currentPoint = new Point({
+        x: (x || 0) + dx,
+        y: (y || 0) + dy
+      });
+      var eventPoint = localPoint(event) || new Point({
         x: 0,
         y: 0
-      };
+      });
       var point = snapToPointer ? eventPoint : currentPoint;
-      setDragStartPointerOffset({
-        x: currentPoint.x - eventPoint.x,
-        y: currentPoint.y - eventPoint.y
-      });
+      var dragPoint = restrictPoint(point, restrictToPathSamples, restrict);
+      setDragStartPointerOffset(subtractPoints(currentPoint, eventPoint));
       return {
@@ -114,4 +113,4 @@ isDragging: true,
         dy: resetOnStart ? 0 : currState.dy,
-        x: resetOnStart ? clampX(point.x) : clampX(point.x) - currState.dx,
-        y: resetOnStart ? clampY(point.y) : clampY(point.y) - currState.dy
+        x: resetOnStart ? dragPoint.x : dragPoint.x - currState.dx,
+        y: resetOnStart ? dragPoint.y : dragPoint.y - currState.dy
       };
@@ -123,15 +122,22 @@ }, onDragStart && function (currState) {
     });
-  }, [clampX, clampY, onDragStart, resetOnStart, setDragStateWithCallback, snapToPointer]);
+  }, [onDragStart, resetOnStart, restrict, restrictToPathSamples, setDragStateWithCallback, snapToPointer]);
   var handleDragMove = useCallback(function (event) {
     event.persist();
     setDragStateWithCallback(function (currState) {
-      var point = localPoint(event) || {
+      if (!currState.isDragging) return currState; // eslint-disable-next-line no-shadow
+
+      var _currState$x2 = currState.x,
+          x = _currState$x2 === void 0 ? 0 : _currState$x2,
+          _currState$y2 = currState.y,
+          y = _currState$y2 === void 0 ? 0 : _currState$y2;
+      var pointerPoint = localPoint(event) || new Point({
         x: 0,
         y: 0
-      };
-      return currState.isDragging ? _extends({}, currState, {
-        isDragging: true,
-        dx: snapToPointer ? clampX(point.x) - (currState.x || 0) : clampX(point.x + dragStartPointerOffset.x) - (currState.x || 0),
-        dy: snapToPointer ? clampY(point.y) - (currState.y || 0) : clampY(point.y + dragStartPointerOffset.y) - (currState.y || 0)
-      }) : currState;
+      });
+      var point = snapToPointer ? pointerPoint : sumPoints(pointerPoint, dragStartPointerOffset);
+      var dragPoint = restrictPoint(point, restrictToPathSamples, restrict);
+      return _extends({}, currState, {
+        dx: dragPoint.x - x,
+        dy: dragPoint.y - y
+      });
     }, onDragMove && function (currState) {
@@ -142,3 +148,3 @@ if (currState.isDragging) onDragMove(_extends({}, currState, {
     });
-  }, [setDragStateWithCallback, onDragMove, snapToPointer, dragStartPointerOffset.x, dragStartPointerOffset.y, clampX, clampY]);
+  }, [setDragStateWithCallback, onDragMove, snapToPointer, dragStartPointerOffset, restrictToPathSamples, restrict]);
   var handleDragEnd = useCallback(function (event) {
@@ -145,0 +151,0 @@ event.persist();

lib/Drag.d.ts

@@ -16,3 +16,3 @@ import React from 'react';
 };
-export default function Drag({ captureDragArea, snapToPointer, children, dx, dy, height, onDragEnd, onDragMove, onDragStart, resetOnStart, width, x, y, isDragging, restrict, }: DragProps): JSX.Element;
+export default function Drag({ captureDragArea, snapToPointer, children, dx, dy, height, onDragEnd, onDragMove, onDragStart, resetOnStart, width, x, y, isDragging, restrict, restrictToPath, }: DragProps): JSX.Element;
 //# sourceMappingURL=Drag.d.ts.map

lib/Drag.js

@@ -32,3 +32,4 @@ "use strict";
       isDragging = _ref.isDragging,
-      restrict = _ref.restrict;
+      restrict = _ref.restrict,
+      restrictToPath = _ref.restrictToPath;
   var drag = (0, _useDrag.default)({
@@ -45,3 +46,4 @@ resetOnStart: resetOnStart,
     isDragging: isDragging,
-    restrict: restrict
+    restrict: restrict,
+    restrictToPath: restrictToPath
   });
@@ -48,0 +50,0 @@ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, drag.isDragging && captureDragArea && /*#__PURE__*/_react.default.createElement("rect", {

lib/useDrag.d.ts

@@ -35,2 +35,4 @@ import React from 'react';
     };
+    /** Limit drag to an SVG path. Overrides `restrict` constraints. */
+    restrictToPath?: SVGGeometryElement | null;
 };
@@ -58,3 +60,3 @@ export declare type DragState = {
 /** Hook for dragging, returns a `UseDrag` object. */
-export default function useDrag({ resetOnStart, snapToPointer, onDragEnd, onDragMove, onDragStart, x, y, dx, dy, isDragging, restrict, }?: UseDragOptions | undefined): UseDrag;
+export default function useDrag({ resetOnStart, snapToPointer, onDragEnd, onDragMove, onDragStart, x, y, dx, dy, isDragging, restrict, restrictToPath, }?: UseDragOptions | undefined): UseDrag;
 //# sourceMappingURL=useDrag.d.ts.map

lib/useDrag.js

@@ -8,2 +8,4 @@ "use strict";
 
+var _point = require("@visx/point");
+
 var _event = require("@visx/event");
@@ -13,4 +15,6 @@
 
-var _clampNumber = _interopRequireDefault(require("./util/clampNumber"));
+var _restrictPoint = _interopRequireDefault(require("./util/restrictPoint"));
 
+var _useSamplesAlongPath = _interopRequireDefault(require("./util/useSamplesAlongPath"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,3 +40,4 @@
       _ref$restrict = _ref.restrict,
-      restrict = _ref$restrict === void 0 ? {} : _ref$restrict;
+      restrict = _ref$restrict === void 0 ? {} : _ref$restrict,
+      restrictToPath = _ref.restrictToPath;
 
@@ -46,12 +51,2 @@ // use ref to detect prop changes
   });
-  var xMin = restrict.xMin,
-      xMax = restrict.xMax,
-      yMin = restrict.yMin,
-      yMax = restrict.yMax;
-  var clampX = (0, _react.useCallback)(function (num) {
-    return (0, _clampNumber.default)(num, xMin != null ? xMin : -Infinity, xMax != null ? xMax : Infinity);
-  }, [xMax, xMin]);
-  var clampY = (0, _react.useCallback)(function (num) {
-    return (0, _clampNumber.default)(num, yMin != null ? yMin : -Infinity, yMax != null ? yMax : Infinity);
-  }, [yMax, yMin]);
 
@@ -69,6 +64,6 @@ var _useStateWithCallback = (0, _useStateWithCallback2.default)({
 
-  var _useState = (0, _react.useState)({
+  var _useState = (0, _react.useState)(new _point.Point({
     x: 0,
     y: 0
-  }),
+  })),
       dragStartPointerOffset = _useState[0],
@@ -105,18 +100,24 @@ setDragStartPointerOffset = _useState[1]; // if prop position changes, update state
   }, [dragState.isDragging, isDragging, setDragStateWithCallback]);
+  var restrictToPathSamples = (0, _useSamplesAlongPath.default)(restrictToPath);
   var handleDragStart = (0, _react.useCallback)(function (event) {
     event.persist();
     setDragStateWithCallback(function (currState) {
-      var currentPoint = {
-        x: (currState.x || 0) + currState.dx,
-        y: (currState.y || 0) + currState.dy
-      };
-      var eventPoint = (0, _event.localPoint)(event) || {
+      // eslint-disable-next-line no-shadow
+      var _currState$x = currState.x,
+          x = _currState$x === void 0 ? 0 : _currState$x,
+          _currState$y = currState.y,
+          y = _currState$y === void 0 ? 0 : _currState$y,
+          dx = currState.dx,
+          dy = currState.dy;
+      var currentPoint = new _point.Point({
+        x: (x || 0) + dx,
+        y: (y || 0) + dy
+      });
+      var eventPoint = (0, _event.localPoint)(event) || new _point.Point({
         x: 0,
         y: 0
-      };
+      });
       var point = snapToPointer ? eventPoint : currentPoint;
-      setDragStartPointerOffset({
-        x: currentPoint.x - eventPoint.x,
-        y: currentPoint.y - eventPoint.y
-      });
+      var dragPoint = (0, _restrictPoint.default)(point, restrictToPathSamples, restrict);
+      setDragStartPointerOffset((0, _point.subtractPoints)(currentPoint, eventPoint));
       return {
@@ -126,4 +127,4 @@ isDragging: true,
         dy: resetOnStart ? 0 : currState.dy,
-        x: resetOnStart ? clampX(point.x) : clampX(point.x) - currState.dx,
-        y: resetOnStart ? clampY(point.y) : clampY(point.y) - currState.dy
+        x: resetOnStart ? dragPoint.x : dragPoint.x - currState.dx,
+        y: resetOnStart ? dragPoint.y : dragPoint.y - currState.dy
       };
@@ -135,15 +136,22 @@ }, onDragStart && function (currState) {
     });
-  }, [clampX, clampY, onDragStart, resetOnStart, setDragStateWithCallback, snapToPointer]);
+  }, [onDragStart, resetOnStart, restrict, restrictToPathSamples, setDragStateWithCallback, snapToPointer]);
   var handleDragMove = (0, _react.useCallback)(function (event) {
     event.persist();
     setDragStateWithCallback(function (currState) {
-      var point = (0, _event.localPoint)(event) || {
+      if (!currState.isDragging) return currState; // eslint-disable-next-line no-shadow
+
+      var _currState$x2 = currState.x,
+          x = _currState$x2 === void 0 ? 0 : _currState$x2,
+          _currState$y2 = currState.y,
+          y = _currState$y2 === void 0 ? 0 : _currState$y2;
+      var pointerPoint = (0, _event.localPoint)(event) || new _point.Point({
         x: 0,
         y: 0
-      };
-      return currState.isDragging ? _extends({}, currState, {
-        isDragging: true,
-        dx: snapToPointer ? clampX(point.x) - (currState.x || 0) : clampX(point.x + dragStartPointerOffset.x) - (currState.x || 0),
-        dy: snapToPointer ? clampY(point.y) - (currState.y || 0) : clampY(point.y + dragStartPointerOffset.y) - (currState.y || 0)
-      }) : currState;
+      });
+      var point = snapToPointer ? pointerPoint : (0, _point.sumPoints)(pointerPoint, dragStartPointerOffset);
+      var dragPoint = (0, _restrictPoint.default)(point, restrictToPathSamples, restrict);
+      return _extends({}, currState, {
+        dx: dragPoint.x - x,
+        dy: dragPoint.y - y
+      });
     }, onDragMove && function (currState) {
@@ -154,3 +162,3 @@ if (currState.isDragging) onDragMove(_extends({}, currState, {
     });
-  }, [setDragStateWithCallback, onDragMove, snapToPointer, dragStartPointerOffset.x, dragStartPointerOffset.y, clampX, clampY]);
+  }, [setDragStateWithCallback, onDragMove, snapToPointer, dragStartPointerOffset, restrictToPathSamples, restrict]);
   var handleDragEnd = (0, _react.useCallback)(function (event) {
@@ -157,0 +165,0 @@ event.persist();

package.json

 {
   "name": "@visx/drag",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "visx drag",
@@ -38,6 +38,7 @@ "sideEffects": false,
     "@types/react": "*",
-    "@visx/event": "2.1.2",
+    "@visx/event": "2.6.0",
+    "@visx/point": "2.6.0",
     "prop-types": "^15.5.10"
   },
-  "gitHead": "321858d188aa2552e1d309cfa86867342d625785"
+  "gitHead": "d147e4b194c81e8e53fe0fdc8c6f5630e8deb7aa"
 }

No alert changes

Improved metrics

Total package byte prevSize

41949

increased by38.64%

Number of package files

39

increased by44.44%

Lines of code

743

increased by30.58%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Added@visx/point@2.6.0

• + Added@visx/event@2.6.0(transitive)

• + Added@visx/point@2.6.0(transitive)

• - Removed@visx/event@2.1.2(transitive)

• - Removed@visx/point@2.1.0(transitive)

• Updated@visx/event@2.6.0