Pointer events.

[nickretallack]

I annotated these based on the pointer events spec. I tested it out and was able to register these event handlers in reason-react and log the event fields. However, I wasn't able to test any advanced features because reason-react doesn't implement Element.setPointerCapture. This is implemented in bs-webapi though, so I tried importing that package, but it had an incompatible type for pointerId.

I don't know how I can make these two packages compatible unless reason-react treats bs-webapi as a dependency and references its custom type. @peterpme can we do that?

[nickretallack]

Example usage:

[@react.component]
let make = () => {
  <div
    onGotPointerCapture={_ => Js.log("Captured")}
    onLostPointerCapture={_ => Js.log("Lost")}
    onPointerDown={event => {
      Js.log(ReactEvent.Pointer.pointerId(event));
      Webapi.Dom.Element.setPointerCapture(
        ReactEvent.Pointer.pointerId(event),
        Webapi.Dom.EventTarget.unsafeAsElement(
          ReactEvent.Pointer.target(event),
        ),
      );
    }}
    onPointerMove={event => {Js.log(ReactEvent.Pointer.movementX(event))}}>
    {React.string("hello")}
  </div>;
};

If you hover over "hello" it will emit your movements. If you click and drag on "hello" it will continue to emit your movements for the duration of your drag. Cool, huh?

Unfortunately this code doesn't actually work unless I change ReactEvent.Pointer.target to return a Dom.eventTarget like the comments say it should. But then I'd have to change all events to do that, which would be a backward-incompatible change. Is there any work-around for this in the meantime? Should we fix these types?

[nickretallack]

Oh, I suppose this works.

[@react.component]
let make = () => {
  <div
    onGotPointerCapture={_ => Js.log("Captured")}
    onLostPointerCapture={_ => Js.log("Lost")}
    onPointerDown={event => {
      ReactEvent.Pointer.target(event)##setPointerCapture(
        ReactEvent.Pointer.pointerId(event),
      )
    }}
    onPointerMove={event => {Js.log(ReactEvent.Pointer.movementX(event))}}>
    {React.string("hello")}
  </div>;
};

[nickretallack]

Can we merge this now?

[rickyvetter]

This looks awesome. Thanks!