[@visx/drag] Enhancement to limit dx and dy

[agoldis]

Trying to enhance the library to limit dx and dy values for useDrag, motivation being limit the allowed distance for drag operation.

For example, without dx restrictions:

currents-2024-08-05-16.05.56.mp4

After the suggested change:

currents-2024-08-05-16.04.55.mp4

I wanted to confirm my naive implementation before opening a PR:

• add new options for restrict

restrict?: {
    xMin?: number;
    xMax?: number;
    yMin?: number;
    yMax?: number;
    dxMax?: number; // new 
    dyMax?: number; // new 
    dxMin?: number; // new 
    dyMin?: number; // new 
};

• change https://github.com/airbnb/visx/blob/master/packages/visx-drag/src/useDrag.ts#L183 with something like this:

let dx = dragPoint.x - x;
let dy= dragPoint.y - y;
if ( typeof restrict.dxMax === "number" && _dx > restrict.dxMax) {
  dx =  restrict.dxMax;
}
if (typeof restrict.dyMax === "number" && _dy > restrict.dyMax) {
  dy = restrict.dyMax;
}
if (typeof restrict.dxMin === "number" && _dx < restrict.dxMin) {
  dx =  restrict.dxMin;
}
if (typeof restrict.dyMin === "number" && _dy < restrict.dyMin) {
  dy =  restrict.dyMin;
}

return {
  ...currState,
  dx,
  dy,
};

Would appreciate weighing in on this approach.

[joeldodich]

This would be really nice to have.

[agoldis]

@joeldodich

@visx+drag+3.3.0.patch

[williaster]

sorry for the slow reply, this looks reasonable to me! happy to review a PR if you're still interested.