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

fix: don't update based on parent offset on mount #920

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

Conversation

dan-cooke
Copy link

  • I'm not sure if this will work for all use cases, but for me it is workig much better, before this fix there was an issue when the component position was stored externally and the component is remounted with a defaultPos - it will jump by the parent offset pixels, which just isn't right. In my eyes it should just use the exact position passed to it from consumers as the starting position, if a consumer wants to use the absolute value they can pass that, otherwise the position they use lastX lastY for example is relative to the parent anyway. So whats the point of applying this offset to those values?

Proposed solution

Tradeoffs

Testing Done

* I'm not sure if this will work for all use cases, but for me it is workig much better, before this fix
there was an issue when the component position was stored externally and the component is remounted with a
defaultPos - it will jump by the parent offset pixels, which just isn't right. In my eyes it should just use
the exact position passed to it from consumers as the starting position, if a consumer wants to use the absolute
value they can pass that, otherwise the position they use `lastX` `lastY` for example is relative to the parent
anyway. So whats the point of applying this offset to those values?
@bokuweb
Copy link
Owner

bokuweb commented Apr 20, 2024

@dan-cooke Thanks! I'll check it.

src/index.tsx Outdated
@@ -636,6 +662,8 @@ export class Rnd extends React.PureComponent<Props, State> {
const pos = this.state.resizing ? undefined : draggablePosition;
const dragAxisOrUndefined = this.state.resizing ? "both" : dragAxis;

console.log(defaultValue, pos);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dan-cooke Please remove this line.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed

@bokuweb
Copy link
Owner

bokuweb commented Apr 21, 2024

@dan-cooke Thanks. I fixed #910, It was due to a different cause.so I don't understand your issue. Could you provide a reproduction in CodeSandbox if possible?"

If the following actions are taken, will the problem be resolved?

  componentDidMount() {
    if (this.props.position) return; // <- skip if position passed.
    this.updateOffsetFromParent();
    const { left, top } = this.offsetFromParent;
    const { x, y } = this.getDraggablePosition();
    this.draggable.setState({
      x: x - left,
      y: y - top,
    });
    // HACK: Apply position adjustment
    this.forceUpdate();
  }

@dan-cooke
Copy link
Author

dan-cooke commented Apr 21, 2024 via email

@enzoferey
Copy link

enzoferey commented Nov 11, 2024

@bokuweb I landed here while implemented the following use case =>

I want to render the component within a Portal and pass as bounds another element on the page.

I landed on this PR after some search on the repo issues and PRs, and I can confirm adding if (this.props.position) return; as the first statement inside the componentDidMount solves the issue originally intended in this PR.

However, it doesn't solve my use case. After some research and patching of the library (using patch-package), I figured out it's because the library is not prepared to have the parent node of Rnd outside the tree of the bounds element. In our case, returning this.props.bounds instead of this.resizable && this.resizable.parentNode here makes it work since what we actually want is the node to be inside the portal but as considered as a child of the bounds element. We didn't see any issue with both dragging and resizing, so it might be useful to introduce some prop that handles this use case.

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.

3 participants