[META] Momentum and currentDelta support for gestures

[runspired]

deltaX and deltaY currently represent the distance from the origin event. This is great for simple CSS transforms and the like, but more event context is needed to build gestures with physics.

Example issue/PR #748

I propose hammer should expose something akin to originDeltas and currentDeltas.
I think that any actual momentum calculation is better left to a plugin or individual implementation, but that's up for debate.

[runspired]

Related: #728

[runspired]

Also related: #730

[runspired]

PR #717 has a fix for #718 that helps with sensitivity when detecting swipes.

[runspired]

As with #748, this is going to go in a Minor release as it's not an actual bug and represents an additional behavior.

[linonetwo]

For minimap usage, to fix

deltaX and deltaY currently represent the distance from the origin event.

Currently, you will need to track the current location manually:

  onDragOrPan: function ({ deltaX, deltaY }) {
    if (this.props.onPanTo) {
      // Calculate where event pans to, in editor coordinates
      var x = this.state.panStartPoint[0];
      var y = this.state.panStartPoint[1];
      var panscale = 1 / this.props.viewscale;
      const speedupFactorX = this.props.viewrectangle[2] / this.props.width * 2;
      const speedupFactorY = this.props.viewrectangle[3] / this.props.height * 2;
      x -= deltaX / panscale * speedupFactorX;
      y -= deltaY / panscale * speedupFactorY;
      var panTo = { x: Math.round(x), y: Math.round(y) };
      this.props.onPanTo(panTo, event);
    }
  },
  onTrackStart(event) {
    this.state.panStartPoint[0] = -this.props.viewrectangle[0];
    this.state.panStartPoint[1] = -this.props.viewrectangle[1];
    this._topElement.addEventListener('panmove', this.onTrack);
    this._topElement.addEventListener('panend', this.onTrackEnd);
  },
  onTrack(event) {
    this.onDragOrPan({
      deltaX: event.gesture.deltaX,
      deltaY: event.gesture.deltaY,
    });
  },
  onTrackEnd(event) {
    // Don't click app (unselect)
    event.stopPropagation();
    this._topElement.removeEventListener('panmove', this.onTrack);
    this._topElement.removeEventListener('panend', this.onTrackEnd);
  },
  _setupEvents: function() {
    this.hammer = new Hammer.Manager(this._topElement, {
      domEvents: true,
      inputClass: hammerhacks.Input,
      recognizers: [
        [Hammer.Tap],
        [Hammer.Pan, { direction: Hammer.DIRECTION_ALL, threshold: 5 }],
      ],
    });
    this.hammer.on('tap', (event) => this.props.onTap(event));
    this._topElement.addEventListener('panstart', (event) => this.onTrackStart(event));
  }

note that the

domEvents: true,

make this._topElement.addEventListener('panstart', possible, which is not a native dom event nor a react event.