Add offsetParent prop for alternative offset calculations

[aeneasr]

Allows nodes to use the body as origin instead of the parent. This is useful, when the parent's position is changing. When used, resolves #170

This issue was introduced by a398097

please 👀

[aeneasr]

The issue with the failing tests is that React has changed the way propType warnings are being thrown. It now provides a backtrace. On master the tests fail likewise. I am not sure how to fix this, because there are different error messages being thrown:

Expected spy error to have been called with

[ 'Warning: Failed prop type: Invalid prop transform passed to Draggable - do not set this, set it on the child.' ]

but actual calls were

[ 'Warning: Failed prop type: Invalid prop transform passed to Draggable - do not set this, set it on the child.

        in Draggable' ],

[ 'Warning: Failed prop type: Invalid prop transform passed to DraggableCore - do not set this, set it on the child.

        in DraggableCore (created by Draggable)

        in Draggable' ].

The only way I can think of right now is to replace toHaveBeenCalledWith with toHaveBeenCalled

[acusti]

The tests are fixed by #176

[aeneasr]

ah thanks, I will rebase once merged

[STRML]

Thanks for this, I am reviewing. I'm looking for a simpler solution, though. Will get back to you shortly.

[STRML]

I'd prefer an offsetParent prop rather than this boolean so it can be generic to the user's needs.

[aeneasr]

@STRML sounds good, will do!

[aeneasr]

Ok, it's rebased and `offsetParent chang eis included, thanks for the review :)

[STRML]

This isn't a bool. Unfortunately there's no dom node propType so it should be something like:

offsetParent: function(props, propName) {
  if (process.browser && props[propName] && props[propName].nodeType !== 1) {
    throw new Error("Draggable's offsetParent must be a DOM Node.");
  }
}

[aeneasr]

Ah right, sorry I overlooked when changing that.

[STRML]

Please rebase again as #176 was merged.

[aeneasr]

Sorry, I updated the code quite hasty previously. Everything should be ok now, I hope. Thanks for your patience

[STRML]

This condition will always be true.

I'm going to refactor this a bit and push. Thanks for the contribution.

[aeneasr]

Perfect, thank you!

[aeneasr]

Ah right this should be offsetParent === document.body

[STRML]

Yep, but we can't even use document.body, we have to use node.ownerDocument.

Almost done, just writing a test to verify.

[STRML]

Pushed in #179!

[aeneasr]

Thanks @STRML !!

[JohnyGemityg]

Hi everybody,

can someone help me please how to use this feature? How can i pass html node, when it is not rendered yet?

  <GraphElement
            id={element.id}
            key={element.id}
            posX={element.cords.x}
            posY={element.cords.y}
            parrentOffset={ReactDom.findDOMNode(this)} // Will work after rerender ....
            onElementJointDragStart={() => this.props.onJointDragStart(element.id)}
            onElementJointDragMove={(event, data) => this.props.onJointDragMove(element.id, { x: data.x, y: data.y })}
          />

Thanks

[acusti]

Like you pointed out, you need the parent to have been mounted before you can pass the node as parentOffset. Best method is to get the ref via the callback form, then either set the ref on state to trigger a rerender or use this.forceUpdate. Something like:

setRef = (ref) => {
  this.rootRef = ref;
  this.forceUpdate();
},

render() {
  // First comes your parent html; I just put a div as an example
  return (
    <div className="parent" ref={this.setRef}>
      { this.rootRef ? (
        <GraphElement
            id={element.id}
            key={element.id}
            posX={element.cords.x}
            posY={element.cords.y}
            parentOffset={this.rootRef}
            onElementJointDragStart={() => this.props.onJointDragStart(element.id)}
            onElementJointDragMove={(event, data) => this.props.onJointDragMove(element.id, { x: data.x, y: data.y })}
        />
      ) : null }
    </div>
  );
}

[JohnyGemityg]

Thank you for quick replay.

It works. I just added a condition to prevent a loop.

setRef(ref) {
    if (this.graphDom === undefined) {
      this.graphDom = ref;
      this.forceUpdate();
    }
  }

But I am not sure if this is the correct way how to work with react.

[STRML]

Usually you do something like this:

componentDidMount() {
  this.setState({mounted: true});
}

render() {
  ...
  ref="graphElement"
  parentOffset={this.state.mounted ? this.refs.graphElement : null}
  ...
}

[acusti]

String refs are discouraged because of lack of composability / HOC flexibility (reference)

[rhalff]

Also wonder whether you actually need to pass the parentOffset.

The drag handler will also receive deltaX and deltaY and is probably what you need to calculate a new position.

onDrag (ev, data) {

  ....

  const coords = {
     x: old.x + data.deltaX,
     y: old.y + data.deltaY
  }
}

[JohnyGemityg]

Thank you all for your tips and tricks. I think ref should be a function. Toggle the mounted variable in state seems to be a good solution. I need this cause I have draggable elements within another draggable element and all shoud have the same parentOffset.