Is there anyway to clear the position information?

[webdobe]

First thank you for the great library!

I am opening a new one as it is a separate issue I think.

I have a setup where I am dividing the page into a grid. I need the position within each grid item. Each grid item is wrapped in a ReactCursorPosition.

When I drag these grid items around. The get position outside gets updated to isOutside... but it isn't. I just dragged the element to a new position.

What I would like to do is a either be able to reset the cursor after a drop. OR I think we could probably run init() if the position is outside.

So:

key: 'getIsPositionOutside',
        value: function getIsPositionOutside(position) {
            var x = position.x,
                y = position.y;
            var _elementOffset = this.elementOffset,
                elx = _elementOffset.x,
                ely = _elementOffset.y;
            var _state$elementDimensi = this.state.elementDimensions,
                elw = _state$elementDimensi.width,
                elh = _state$elementDimensi.height;

            var outside = x < elx || x > elx + elw || y < ely || y > ely + elh

            if (outside) {
                this.init();
            }

            return outside;
        }

Maybe I am doing something wrong? Or is this a bug? or am I asking for a feature?

[ethanselzer]

Hi @webdobe, Thanks for opening this issue. I will think about your proposal and post back with my thoughts.

[webdobe]

I really don't think my proposal is great.. I was more showing what I need to do to fix my issue. I think it would just be good to force a init() or a reset of the element. Maybe a reset property that a dev could return a boolean to trigger it or not.

[ethanselzer]

Hi @webdobe,

Here is a suggestion that might work for your use case. I will try to make a working example of it soon and post a link here.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.setRef = this.setRef.bind(this);
  }

  setRef(ref) {
    this.initReactCursorPosition = ref.init;
  }

  resetReactCursorPosition() {
    this.initReactCursorPosition();
  }

  render() {
    return (
      <ReactCursorPosition 
        className="example"
        ref={this.setRef}
       >
        <PositionLabel />
      </ReactCursorPosition>
    );
  }
}

Execute the method resetReactCursorPosition when the component has stopped moving or at a time of your choosing.

Please let me know your thoughts and thanks again for opening this issue!

[webdobe]

@ethanselzer When setting this.initReactCursorPosition = ref.init; the init function is not exposed. After I added _this.init = _this.init.bind(_this); to the _class function. It was exposed and it seems that this is working at this point.

[ethanselzer]

@webdobe I'm glad you got it working! Is it a solution to your use case or just a step toward a solution? Could you paste a snippet of your code changes into a comment so I can see what you did?

[webdobe]

@ethanselzer Well, I think it is a solution for my needs, but react-cursor-position needs to have code to expose init. Otherwise it won't work at all.

So around line 50 I added: _this.init = _this.init.bind(_this);

[ethanselzer]

@webdobe - Thanks for your input. In the code I posted above, the implementation is external to the react-cursor-position package. The important thing to notice in the code I posted is ref={this.setRef}. Please have another look.

[webdobe]

I am doing this.

I get: Uncaught TypeError: Cannot read property 'init' of null

If I then:

setRef(ref) {
   if (ref && ref.init) {
      this.initReactCursorPosition = ref.init;
   }
  }

I can call resetReactCursorPosition() within on onPositionChanged() and I get: Uncaught TypeError: this.getDocumentRelativeElementOffset is not a function

[ethanselzer]

Okay thanks for the information. I will research this further and try to create a working example.

[ethanselzer]

@webdobe Here is a working example of using a ref to call init on react-cursor-position. To demonstrate it, click the button named "Move" and then click the button named "Reset". react-cursor-position does not recalculate until the pointer (mouse or touch) is moved. Once the pointer is moved, position and isOutside props should be correct.

I'm considering creating a reset feature that would reset the position and recalculate the pointer position. reset would be called from a ref.

Please let me know your thoughts. Thanks!

[webdobe]

@ethanselzer Yes I think this is working. The key difference was the binding of init.

Thank you so much!

[ethanselzer]

@webdobe - I'm so glad it is working! Thanks again for opening the issue and raising my awareness to your use case. I will update the documentation accordingly.

If you find react-cursor-position useful, please consider staring it on GitHub. Staring helps to grow the project which benefits everyone who uses it

Thanks! Ethan