new(drag): Add restrictToPath as a Drag parameter #1379
Conversation
Allow the user to pass an SVGGeometryElement to restrict the drag area to following the path of an SVG. Useful for constrining the drag of an object to a curved line.
|
@williaster Hardly had the last drag enhancement merged when I realised I needed another way to constrain my drag. This PR adds a way to constrain drag to an SVGGeometry like Jittery.drag.movWith the constraint applied, the drag becomes much smoother. Screen.Recording.2021-11-23.at.4.57.57.pm.movThis should work even if the path is nested deeply within the SVG, as it applies a transform based on the parent SVG it is relative to. |
Calculate and cache sample points along restrictToPath. This turns out to be fairly tricky as the path is a ref and we need to use the getTotalLength function as an estimate to when the path has changed. Remove getParentSvg. Turns out we can just use the DOMMatrix from the path element itself, saving the need to traverse the DOM. Fix bug with summing points for offset, rather than finding the difference.
|
Unsure of what the issues with Happo are. Also, only now realised that I totally don't need to even use these Oh well, I think this is still a useful feature, especially if only making changes with |
There was a problem hiding this comment.
Hey @valtism 👋 sorry for such a long time getting this in. Glad you found another workaround so weren't blocked by it, but agree it's useful so happy to land it. I had one small docs nit but can commit it my self with the UI if you're over it!
As always, thanks for the great contribution ❤️
| x: number; | ||
| y: number; | ||
| }>({ x: 0, y: 0 }); | ||
| const [dragStartPointerOffset, setDragStartPointerOffset] = useState<Point>( |
There was a problem hiding this comment.
thanks for making Point more consistent (rather than mixing { x, y } objects)
| const samples = []; | ||
| const pathLength = restrictToPath.getTotalLength(); | ||
| for (let sampleLength = 0; sampleLength <= pathLength; sampleLength += precision) { | ||
| const sample = restrictToPath.getPointAtLength(sampleLength); |
There was a problem hiding this comment.
hmm, looks like the returned DOMPoint is not supported in IE, tho .getPointAtLength supposedly is for SVGPathElements (not SVGGeometryElement generally) and I'm pretty sure we use it elsewhere. also IE end of life is in June 2022 so maybe no need to worry about it 🎉
|
also, no happo problems – sometimes with chrome version changes we get some spurious diffs because font rendering looks different or something. |
Complete sentence for docs Co-authored-by: Chris Williams <williaster@users.noreply.github.com>
williaster
changed the title
|
thanks again! |
|
🎉 This PR is included in version |
🚀 Enhancements
Allow the user to pass an SVGGeometryElement to restrict the drag area
to following the path of an SVG.
Useful for constraining the drag of an object to a curved line.