Feature Suggestion: Retrieving Value from `position` Property

xhluca / dash-draggable

react-draggable in Python

Other

19 stars 5 forks source link

Feature Suggestion: Retrieving Value from `position` Property #3

Closed SterlingButters closed 5 years ago

SterlingButters commented 5 years ago

It appears that callback's to theposition property only allow you to set the property with position data, not retrieve position data. This could be very useful in the following example:

ezgif com-video-to-gif

You can see that it would be useful here to create a callback that stores the last 2 positions and makes a comparison and if position_before != position_after then the button logic is ignored.

Also I plan to create a callback between a Store component and the Position property of this component so that even if the user exits the app, their layout remains the same.

xhluca commented 5 years ago

That would be interesting. I think that you can probably use the onDrag event listener and update dash_draggable's position prop using the position prop from Draggable.

Check out the react-draggable docs here: https://www.npmjs.com/package/react-draggable

Feel free to open a PR if you feel this would be a good addition!

SterlingButters commented 5 years ago

@xhlulu Hoping you might take a look at my branch JSON Cycle Error I feel like everything is set up right. I'm brand new to react so I've never seen this error before and I don't know how to resolve it.

The goal is to get DeltaX and DeltaY to use these for the comparison

UPDATE: Interesting... I just realized that I probably want to use the onStop property instead of the onDrag but I really get an odd result - the element is "stuck" to the mouse... And the JSON error is still there too -.- what is going on...

xhluca commented 5 years ago

https://github.com/SterlingButters/dash-draggable/blob/da870d076012627b3558f051dec93bfc07373cdc/src/lib/components/dash_draggable.react.js#L16-L20

I believe that the node property of data here is not JSON serializable... which means it can't be passed to setProps. Could you try to just pass everything except node, and construct a new object that is passed to setProps? E.g.

this.props.setProps({
  lastX: data.lastX,
  lastY: data.lastY,
  ...
})

SterlingButters commented 5 years ago

Great suggestion! Let me try that out! Still new but taking notes as I go!

UPDATE: IT WORKS! Awesome! I'll fix it up nice and submit a PR

Just a side question: If node is not JSON serializable, how can children be of PropType node

SterlingButters commented 5 years ago

Also, interestingly, deltaX and deltaY are always returning 0. Not sure why - this is in the console.log before setting them as props so idk

UPDATE: Think I got it

SterlingButters commented 5 years ago

@xhlulu So sorry, I meant to merge that last PR to my own fork first - I wanted you to review before I merged - good news is it works haha I'll just delete my fork so I don't do that again

xhluca commented 5 years ago

This if fine! Feel free to close this issue if there isn't more to update :)