Custom bounding, render, and scaling

[amosjyng]

Hey, thanks for making this great project! I had to customize it slightly for my own use case. Just letting you see what I did in case you're interested in incorporating this upstream.

Changes made:

• Existing option to use an arbitrary HTMLElement as DragBounds doesn't appear to be documented, so I added that
• Add function as input type for DragBounds. This is because the variable bound to an HTMLElement will be undefined until the component mounts, and therefore cannot be passed in directly to neodrag at component mount time
• Allow for custom render function. I have multiple elements that must be moved at the same time, that are already positioned using the left attribute. I'd rather keep the existing CSS instead of moving to transform, and I also need to coordinate changing the positioning for multiple elements simultaneously with no lag
• Allow for custom inverseScale. I am using the skew transform on my element, which results in an inverseScale of about 0.84. Since I am using a controlled element, I would need to apply the inverse of this scaling when programmatically controlling the element. Instead of doing that, it's simpler for me to just work in regular pixel units and disable the scaling calculations altogether.

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: e954f974d69131bbbda844e63240f9b35a5ef3d0

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel[bot]]

@amosjyng is attempting to deploy a commit to the Purus Projects Team on Vercel.

A member of the Team first needs to authorize it.

[PuruVJ]

Hi, thanks for this! And sorry for the delay

Some questions:

• Why render method? If its for applying any and all changes, transform can do that. Rather than returning values you can directly mutate the node(node.style.left = offsetX), and return null
• inverseScale can again be implemented within transform

Other than that, does keeping bounds not a function cause errors? Even if its null in the beginning, it can be populated when the bound element is mounted

[amosjyng]

Hey, thanks for responding!

• Good point, I think you're right. I need to modify more than one node at a time, so applying styles to the dragged node itself is insufficient. But I can do the same thing I'm doing inside of the transform function instead, so long as I avoid returning a string.
• I don't think inverseScale can be applied within transform because the computation happens before transform is called, and information about the original values is lost.
• Good point, I'll have to actually try this out with onMount instead, but I think you're right