@visx/drag
Advanced tools
Comparing version 2.5.0 to 2.6.0
@@ -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", { |
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(); |
@@ -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 |
@@ -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", { |
@@ -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 |
@@ -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(); |
{ | ||
"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" | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
41949
39
743
5
+ 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