konva/test/functional/PointerEvents-test.js

/* eslint-disable max-nested-callbacks */
// TODO: repair it
suite.skip('PointerEvents', function () {
  Konva._pointerEventsEnabled = true;
  // ======================================================
  test('pointerdown pointerup pointermove', function (done) {
    var stage = addStage();
    var layer = new Konva.Layer();
    var circle = new Konva.Circle({
      x: stage.getWidth() / 2,
      y: stage.getHeight() / 2,
      radius: 70,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 4,
    });

    // mobile events
    var pointerdown = false;
    var pointerup = false;
    var pointermove = false;

    /*
     * mobile
     */
    circle.on('pointerdown', function () {
      pointerdown = true;
    });

    circle.on('pointerup', function () {
      pointerup = true;
    });

    circle.on('pointermove', function () {
      pointermove = true;
    });

    layer.add(circle);
    stage.add(layer);

    var top = stage.content.getBoundingClientRect().top;

    // touchstart circle
    stage._pointerdown({
      clientX: 289,
      clientY: 100 + top,
      pointerId: 1,
      preventDefault: function () {},
    });

    assert(pointerdown, '1) pointerdown should be true');
    assert(!pointermove, '1) pointermove should be false');
    assert(!pointerup, '1) pointerup should be false');

    // pointerup circle
    stage._pointerup({
      touches: [],
      preventDefault: function () {},
    });

    assert(pointerdown, '2) pointerdown should be true');
    assert(!pointermove, '2) pointermove should be false');
    assert(pointerup, '2) pointerup should be true');

    // pointerdown circle
    stage._pointerdown({
      touches: [
        {
          clientX: 289,
          clientY: 100 + top,
        },
      ],
      preventDefault: function () {},
    });

    assert(pointerdown, '3) pointerdown should be true');
    assert(!pointermove, '3) pointermove should be false');
    assert(pointerup, '3) pointerup should be true');

    // pointerup circle to triger dbltap
    stage._pointerup({
      touches: [],
      preventDefault: function () {},
    });
    // end drag is tied to document mouseup and pointerup event
    // which can't be simulated.  call _endDrag manually
    //Konva.DD._endDrag();

    assert(pointerdown, '4) pointerdown should be true');
    assert(!pointermove, '4) pointermove should be false');
    assert(pointerup, '4) pointerup should be true');

    setTimeout(function () {
      // pointermove circle
      stage._pointermove({
        touches: [
          {
            clientX: 290,
            clientY: 100 + top,
          },
        ],
        preventDefault: function () {},
      });

      assert(pointerdown, '5) pointerdown should be true');
      assert(pointermove, '5) pointermove should be true');
      assert(pointerup, '5) pointerup should be true');

      done();
    }, 17);
  });

  // ======================================================
  test('pointer capture', function (done) {
    var stage = addStage();
    var layer = new Konva.Layer();
    var circle = new Konva.Circle({
      x: stage.getWidth() / 2,
      y: stage.getHeight() / 2,
      radius: 70,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 4,
    });

    var circle2 = new Konva.Circle({
      x: stage.getWidth() / 2,
      y: 20,
      radius: 20,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 4,
    });

    // mobile events
    var downCount = 0;
    var otherDownCount = 0;

    var pointerup = false;
    var pointermove = false;

    circle2.on('pointerdown', function () {
      otherDownCount++;
    });

    circle.on('pointerdown', function (event) {
      downCount++;
      this.setPointerCapture(event.pointerId);
    });

    circle.on('pointerup', function (evt) {
      assert(this.hasPointerCapture(evt.pointerId), 'circle released capture');
      pointerup = true;
    });

    circle.on('pointermove', function (evt) {
      assert(this.hasPointerCapture(evt.pointerId), 'circle has capture');
      pointermove = true;
    });

    layer.add(circle);
    layer.add(circle2);
    stage.add(layer);

    var top = stage.content.getBoundingClientRect().top;

    // on circle 2 to confirm it works
    stage._pointerdown({
      clientX: 289,
      clientY: 10 + top,
      pointerId: 0,
      preventDefault: function () {},
    });

    assert(otherDownCount === 1, '6) otherDownCount should be 1');
    assert(downCount === 0, '6) downCount should be 0');
    assert(!pointermove, '6) pointermove should be false');
    assert(!pointerup, '6) pointerup should be false');

    // on circle with capture
    stage._pointerdown({
      clientX: 289,
      clientY: 100 + top,
      pointerId: 1,
      preventDefault: function () {},
    });

    assert(otherDownCount === 1, '7) otherDownCount should be 1');
    assert(downCount === 1, '7) downCount should be 1');
    assert(!pointermove, '7) pointermove should be false');
    assert(!pointerup, '7) pointerup should be true');

    // second pointerdown
    stage._pointerdown({
      clientX: 289,
      clientY: 10 + top,
      pointerId: 1,
      preventDefault: function () {},
    });

    assert(otherDownCount === 1, '8) otherDownCount should be 1');
    assert(downCount === 2, '8) pointerdown should be 2');
    assert(!pointermove, '8) pointermove should be false');
    assert(!pointerup, '8) pointerup should be true');

    setTimeout(function () {
      // pointermove over circle 2
      stage._pointermove({
        clientX: 290,
        clientY: 10 + top,
        pointerId: 1,
        preventDefault: function () {},
      });

      assert(otherDownCount === 1, '9) otherDownCount should be 1');
      assert(pointermove, '9) pointermove should be true');

      stage._pointerup({
        pointerId: 1,
        preventDefault: function () {},
      });

      stage._pointerdown({
        clientX: 289,
        clientY: 10 + top,
        pointerId: 1,
        preventDefault: function () {},
      });

      assert(otherDownCount === 2, '10) otherDownCount should be 1');
      assert(pointerup, '10) pointerup should be true');

      done();
    }, 17);
  });
});