Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom bounding, render, and scaling #135

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

amosjyng
Copy link

@amosjyng amosjyng commented Sep 21, 2023

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
Copy link

changeset-bot bot commented Sep 21, 2023

⚠️ No Changeset found

Latest commit: e954f97

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
Copy link

vercel bot commented Sep 21, 2023

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

A member of the Team first needs to authorize it.

@amosjyng amosjyng changed the title Custom bounding and render Custom bounding, render, and scaling Sep 21, 2023
@PuruVJ
Copy link
Owner

PuruVJ commented Apr 9, 2024

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants