-
-
Notifications
You must be signed in to change notification settings - Fork 325
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
FIX: #454 #455
base: master
Are you sure you want to change the base?
FIX: #454 #455
Conversation
Component change the Y / X position when Drag stops even though dragging is restricted to X/Y axis
@chathuraa Thanks for your great work :) Looks good. I'd like to ask you one more favor, could you please add reproduced case to storybook. |
Sure thing, I'll give it a go, this will be my 1st story book. :).
…On Thu, 4 Oct. 2018, 9:54 am bokuweb, ***@***.***> wrote:
@chathuraa <https://github.com/chathuraa> Thanks for your great work :)
Looks good. I'd like to ask you one more favor, could you please add
reproduced case to storybook.
https://codesandbox.io/s/j1vj3j90ov
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#455 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ACTfwd6xhn2mJzDjFtnyR-VMKK2VxYltks5uhU5GgaJpZM4XF0gA>
.
|
@@ -497,10 +497,32 @@ export class Rnd extends React.Component<Props, State> { | |||
const { left, top } = this.getOffsetFromParent(); | |||
let draggablePosition; | |||
if (position) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@chathuraa Sorry, could you please separate these block to another function or method like createNewPosition
🙏
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey @bokuweb ,
I had to update some tests, I couldnt figure out the reason for '8px' discrepancy. I managed to get pretty much everything working. apart from the uncontrolled bounds.
Thanks,
Chat.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ahhh..Is it due to default margin? If you set html, body { padding: 0, margin: 0 };
to ./fixture.url
, will the results be as you expected?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey @bokuweb,
oh okay, that makes sense. I've updated the getOffsetFromParent and the tests so the padding and margins become irrelevant.
The update on the getOffsetFromParent, seems to cause an issue with uncontrolled bounds. I cant seems to find where the issue is. Any suggestions?
Thanks,
Chat.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I do not understand what is issue. Why not try applying changes with you only when using position props
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tried that. however the issue was there on almost every where the getOffsetFromParent been used.
ie:
componentDidMount,
dragStart,
onDrag,
onDragStop,
etc
So decided to update the function to return left/top based on axis restrictions, rather than setting the logic on each function.
Re: the bounds, it only affecting the uncontrolled bounds. all the other scenarios including controlled bounds are working.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmmmm, I'll try to fix it 🙏 So, this issue is complex....
Yep will do.
…On Thu, 4 Oct. 2018, 3:43 pm bokuweb, ***@***.***> wrote:
***@***.**** requested changes on this pull request.
------------------------------
In src/index.tsx
<#455 (comment)>:
> @@ -497,10 +497,32 @@ export class Rnd extends React.Component<Props, State> {
const { left, top } = this.getOffsetFromParent();
let draggablePosition;
if (position) {
@chathuraa <https://github.com/chathuraa> Sorry, could you please
separate these block to another function or method like createNewPosition
🙏
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#455 (review)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ACTfwSK9NAHsBlHFRs_roGAcB9K0Cd84ks5uhZ_5gaJpZM4XF0gA>
.
|
Added a story for axis restriction
@@ -1,5 +1,5 @@ | |||
import React from "react"; | |||
import Rnd from "../../src"; | |||
import { Rnd } from "../../src"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks :)
@@ -0,0 +1,102 @@ | |||
import React from "react"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great 👍
It seems to be. Cause of the issue is adding/subtracting left and top. And
getoffset.... is dependency for most of the other methods.
Adding and subtracting should be based on each scenario, I can't figure out
the relationship between the uncontrolled bounds and getoffset....
Thanks
…On Mon, 8 Oct. 2018, 11:09 am bokuweb, ***@***.***> wrote:
***@***.**** commented on this pull request.
------------------------------
In src/index.tsx
<#455 (comment)>:
> @@ -497,10 +497,32 @@ export class Rnd extends React.Component<Props, State> {
const { left, top } = this.getOffsetFromParent();
let draggablePosition;
if (position) {
Hmmmm, I'll try to fix it 🙏 So, this issue is complex....
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#455 (comment)>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/ACTfwbUufhjvx6YVne2CRuVvEkF_Tzmcks5uipedgaJpZM4XF0gA>
.
|
Any chance to get this PR mergered? |
For enyone facing same issue, there is workaround. note: when I did set grid vertical value to 0 while using controlled state. Drag start behave really wierdly. |
Hello? |
Component change the Y position when Drag stops even though dragging is restricted to X axis