events rewrite, fix types

test/unit/Layer-test.ts

@@ -243,56 +243,6 @@ describe('Layer', function () {
     );
   });
 
-  // ======================================================
-  it('layer getIntersection() with selector', function () {
-    var stage = addStage();
-    var layer = new Konva.Layer({
-      name: 'layer',
-    });
-
-    var group = new Konva.Group({
-      name: 'group',
-    });
-
-    var circle = new Konva.Circle({
-      x: stage.width() / 2,
-      y: stage.height() / 2,
-      radius: 70,
-      strokeWidth: 4,
-      fill: 'red',
-      stroke: 'black',
-    });
-
-    group.add(circle);
-    layer.add(group);
-    stage.add(layer);
-
-    assert.equal(
-      layer.getIntersection(
-        { x: stage.width() / 2, y: stage.height() / 2 },
-        'Circle'
-      ),
-      circle,
-      'intersection with shape selector'
-    );
-    assert.equal(
-      layer.getIntersection(
-        { x: stage.width() / 2, y: stage.height() / 2 },
-        '.group'
-      ),
-      group,
-      'intersection with group selector'
-    );
-    assert.equal(
-      layer.getIntersection(
-        { x: stage.width() / 2, y: stage.height() / 2 },
-        'Stage'
-      ),
-      stage,
-      'intersection with stage selector'
-    );
-  });
-
   // ======================================================
   it('set layer visibility', function () {
     var stage = addStage();

test/unit/MouseEvents-test.ts

@@ -12,139 +12,6 @@ import {
 } from './test-utils';
 
 describe('MouseEvents', function () {
-  // ======================================================
-  it('stage content mouse events', function (done) {
-    var stage = addStage();
-    var layer = new Konva.Layer();
-    var circle = new Konva.Circle({
-      x: 100,
-      y: 100,
-      radius: 70,
-      fill: 'green',
-      stroke: 'black',
-      strokeWidth: 4,
-      name: 'myCircle',
-    });
-
-    layer.add(circle);
-    stage.add(layer);
-
-    var circleMousedown = 0;
-    var circleMouseup = 0;
-    var stageContentMousedown = 0;
-    var stageContentMouseup = 0;
-    var stageContentMousemove = 0;
-    var stageContentMouseout = 0;
-    var stageContentMouseover = 0;
-    var stageContentClick = 0;
-    var stageContentDblClick = 0;
-
-    circle.on('mousedown', function () {
-      circleMousedown++;
-    });
-
-    circle.on('mouseup', function () {
-      circleMouseup++;
-    });
-
-    stage.on('contentMousedown', function () {
-      stageContentMousedown++;
-    });
-
-    stage.on('contentMouseup', function () {
-      stageContentMouseup++;
-    });
-
-    stage.on('contentMousemove', function () {
-      stageContentMousemove++;
-    });
-
-    stage.on('contentMouseout', function () {
-      stageContentMouseout++;
-    });
-
-    stage.on('contentMouseover', function () {
-      stageContentMouseover++;
-    });
-
-    stage.on('contentClick', function () {
-      //console.log('click');
-      stageContentClick++;
-    });
-
-    stage.on('contentDblclick', function () {
-      //console.log('dbl click');
-      stageContentDblClick++;
-    });
-
-    simulateMouseDown(stage, {
-      x: 100,
-      y: 100,
-    });
-
-    simulateMouseUp(stage, {
-      x: 100,
-      y: 100,
-    });
-
-    assert.equal(circleMousedown, 1);
-    assert.equal(circleMouseup, 1);
-    assert.equal(stageContentMousedown, 1);
-    assert.equal(stageContentMouseup, 1);
-    assert.equal(stageContentClick, 1);
-
-    simulateMouseDown(stage, {
-      x: 1,
-      y: 1,
-    });
-    simulateMouseUp(stage, {
-      x: 1,
-      y: 1,
-    });
-
-    assert.equal(stageContentMousedown, 2);
-    assert.equal(stageContentMouseup, 2);
-
-    // trigger double click
-    simulateMouseDown(stage, {
-      x: 1,
-      y: 1,
-    });
-    simulateMouseUp(stage, {
-      x: 1,
-      y: 1,
-    });
-
-    assert.equal(stageContentMousedown, 3);
-    assert.equal(stageContentMouseup, 3);
-    //assert.equal(stageContentDblClick, 1);
-
-    setTimeout(function () {
-      simulateMouseMove(stage, {
-        x: 200,
-        y: 1,
-      });
-
-      assert.equal(stageContentMousemove, 1);
-
-      stage._mouseleave({
-        offsetX: 0,
-        offsetY: 0,
-      });
-
-      assert.equal(stageContentMouseout, 1);
-
-      stage._mouseover({
-        offsetX: 0,
-        offsetY: 0,
-      });
-
-      assert.equal(stageContentMouseover, 1);
-
-      done();
-    }, 20);
-  });
-
   // ======================================================
   it('remove shape with onclick', function () {
     var stage = addStage();
@@ -443,6 +310,54 @@ describe('MouseEvents', function () {
     }, 20);
   });
 
+  it.skip('mouseleave and mouseenter', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer({
+      throttle: 999,
+    });
+    var circle = new Konva.Circle({
+      x: 100,
+      y: 100,
+      radius: 70,
+      strokeWidth: 4,
+      fill: 'red',
+      stroke: 'black',
+    });
+    layer.add(circle);
+    stage.add(layer);
+
+    var mouseenter = 0;
+    circle.on('mouseenter', () => {
+      mouseenter += 1;
+    });
+
+    var mouseleave = 0;
+    circle.on('mouseleave', () => {
+      mouseleave += 1;
+    });
+
+    simulateMouseMove(stage, {
+      x: 10,
+      y: 10,
+    });
+    simulateMouseMove(stage, {
+      x: 100,
+      y: 100,
+    });
+    simulateMouseMove(stage, {
+      x: 100,
+      y: 100,
+    });
+    assert.equal(mouseenter, 1);
+    assert.equal(mouseleave, 0);
+    simulateMouseMove(stage, {
+      x: 10,
+      y: 10,
+    });
+    assert.equal(mouseenter, 1);
+    assert.equal(mouseleave, 1);
+  });
+
   // ======================================================
   it('mousedown mouseup mouseover mouseout mousemove click dblclick', function (done) {
     var stage = addStage();
@@ -2045,7 +1960,7 @@ describe('MouseEvents', function () {
       y: 15,
     });
 
-    assert.equal(bigClicks, 0, 'single click on big rect');
+    assert.equal(bigClicks, 0, 'single click on big rect (1)');
     assert.equal(smallClicks, 0, 'no  click on small rect');
     assert.equal(smallDblClicks, 0, 'no dblclick on small rect');
 
@@ -2059,7 +1974,7 @@ describe('MouseEvents', function () {
         y: 100,
       });
 
-      assert.equal(bigClicks, 0, 'single click on big rect');
+      assert.equal(bigClicks, 0, 'single click on big rect (2)');
       assert.equal(smallClicks, 1, 'single click on small rect');
       assert.equal(smallDblClicks, 0, 'no dblclick on small rect');
 
@@ -2073,7 +1988,7 @@ describe('MouseEvents', function () {
           y: 100,
         });
 
-        assert.equal(bigClicks, 0, 'single click on big rect');
+        assert.equal(bigClicks, 0, 'single click on big rect (3)');
         assert.equal(smallClicks, 2, 'second click on small rect');
         assert.equal(smallDblClicks, 1, 'single dblclick on small rect');
 
@@ -2097,9 +2012,10 @@ describe('MouseEvents', function () {
       clientX: 10,
       clientY: 10 + top,
       button: 0,
+      type: 'mouseenter',
     };
 
-    stage._mouseenter(evt);
+    stage._pointerenter(evt);
 
     assert.equal(mouseenterCount, 1, 'mouseenterCount should be 1');
   });
@@ -2119,9 +2035,10 @@ describe('MouseEvents', function () {
       clientX: 0,
       clientY: 0 + top,
       button: 0,
+      type: 'mouseleave',
     };
 
-    stage._mouseleave(evt);
+    stage._pointerleave(evt);
 
     assert.equal(mouseleave, 1, 'mouseleave should be 1');
   });
@@ -2178,9 +2095,10 @@ describe('MouseEvents', function () {
       clientX: 200,
       clientY: -5 + top,
       button: 0,
+      type: 'mouseleave',
     };
 
-    stage._mouseleave(evt);
+    stage._pointerleave(evt);
 
     assert.equal(circleMouseleave, 1, 'circleMouseleave should be 1');
     assert.equal(circleMouseout, 1, 'circleMouseout should be 1');
@@ -2294,16 +2212,20 @@ describe('MouseEvents', function () {
       clientX: 10,
       clientY: 10 + top,
       button: 0,
+      type: 'mouseenter',
     };
 
-    stage._mouseenter(evt);
+    stage._pointerenter(evt);
 
     simulateMouseMove(stage, {
       x: 10,
       y: 10,
     });
 
-    stage._mouseleave(evt);
+    stage._pointerleave({
+      ...evt,
+      type: 'mouseleave',
+    });
 
     assert.equal(mouseenter, 1, 'mouseenter should be 1');
   });

test/unit/PointerEvents-test.ts

@@ -8,9 +8,7 @@ import {
   simulatePointerUp,
 } from './test-utils';
 
-// TODO: restore it!
 describe.skip('PointerEvents', function () {
-  Konva._pointerEventsEnabled = true;
   // ======================================================
   it('pointerdown pointerup pointermove', function (done) {
     var stage = addStage();
@@ -51,8 +49,6 @@ describe.skip('PointerEvents', function () {
     simulatePointerDown(stage, {
       x: 289,
       y: 100,
-      pointerId: 1,
-      preventDefault: function () {},
     });
 
     assert(pointerdown, '1) pointerdown should be true');
@@ -61,8 +57,8 @@ describe.skip('PointerEvents', function () {
 
     // pointerup circle
     simulatePointerUp(stage, {
-      touches: [],
-      preventDefault: function () {},
+      x: 289,
+      y: 100,
     });
 
     assert(pointerdown, '2) pointerdown should be true');
@@ -71,13 +67,8 @@ describe.skip('PointerEvents', function () {
 
     // pointerdown circle
     simulatePointerDown(stage, {
-      touches: [
-        {
-          x: 289,
-          y: 100,
-        },
-      ],
-      preventDefault: function () {},
+      x: 289,
+      y: 100,
     });
 
     assert(pointerdown, '3) pointerdown should be true');
@@ -86,8 +77,8 @@ describe.skip('PointerEvents', function () {
 
     // pointerup circle to triger dbltap
     simulatePointerUp(stage, {
-      touches: [],
-      preventDefault: function () {},
+      x: 289,
+      y: 100,
     });
     // end drag is tied to document mouseup and pointerup event
     // which can't be simulated.  call _endDrag manually
@@ -100,13 +91,8 @@ describe.skip('PointerEvents', function () {
     setTimeout(function () {
       // pointermove circle
       simulatePointerMove(stage, {
-        touches: [
-          {
-            x: 290,
-            y: 100,
-          },
-        ],
-        preventDefault: function () {},
+        x: 290,
+        y: 100,
       });
 
       assert(pointerdown, '5) pointerdown should be true');
@@ -118,7 +104,7 @@ describe.skip('PointerEvents', function () {
   });
 
   // ======================================================
-  it('pointer capture', function (done) {
+  it.skip('pointer capture', function (done) {
     var stage = addStage();
     var layer = new Konva.Layer();
     var circle = new Konva.Circle({
@@ -172,17 +158,15 @@ describe.skip('PointerEvents', function () {
     layer.add(circle2);
     stage.add(layer);
 
-    var top = stage.content.getBoundingClientRect().top;
-
     // on circle 2 to confirm it works
     simulatePointerDown(stage, {
       x: 289,
-      y: 10 + top,
+      y: 10,
       pointerId: 0,
       preventDefault: function () {},
     });
 
-    assert(otherDownCount === 1, '6) otherDownCount should be 1');
+    assert.equal(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');
@@ -190,12 +174,12 @@ describe.skip('PointerEvents', function () {
     // on circle with capture
     simulatePointerDown(stage, {
       x: 289,
-      y: 100 + top,
+      y: 100,
       pointerId: 1,
       preventDefault: function () {},
     });
 
-    assert(otherDownCount === 1, '7) otherDownCount should be 1');
+    assert.equal(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');
@@ -203,12 +187,12 @@ describe.skip('PointerEvents', function () {
     // second pointerdown
     simulatePointerDown(stage, {
       x: 289,
-      y: 10 + top,
-      pointerId: 1,
+      y: 10,
+      pointerId: 2,
       preventDefault: function () {},
     });
 
-    assert(otherDownCount === 1, '8) otherDownCount should be 1');
+    assert.equal(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');
@@ -217,9 +201,8 @@ describe.skip('PointerEvents', function () {
       // pointermove over circle 2
       simulatePointerMove(stage, {
         x: 290,
-        y: 10 + top,
+        y: 10,
         pointerId: 1,
-        preventDefault: function () {},
       });
 
       assert(otherDownCount === 1, '9) otherDownCount should be 1');
@@ -232,7 +215,7 @@ describe.skip('PointerEvents', function () {
 
       simulatePointerDown(stage, {
         x: 289,
-        y: 10 + top,
+        y: 10,
         pointerId: 1,
         preventDefault: function () {},
       });

test/unit/Stage-test.ts

@@ -309,56 +309,6 @@ describe('Stage', function () {
     );
   });
 
-  // ======================================================
-  it('layer getIntersection() with selector', function () {
-    var stage = addStage();
-    var layer = new Konva.Layer({
-      name: 'layer',
-    });
-
-    var group = new Konva.Group({
-      name: 'group',
-    });
-
-    var circle = new Konva.Circle({
-      x: stage.width() / 2,
-      y: stage.height() / 2,
-      radius: 70,
-      strokeWidth: 4,
-      fill: 'red',
-      stroke: 'black',
-    });
-
-    group.add(circle);
-    layer.add(group);
-    stage.add(layer);
-
-    assert.equal(
-      stage.getIntersection(
-        { x: stage.width() / 2, y: stage.height() / 2 },
-        'Circle'
-      ),
-      circle,
-      'intersection with shape selector'
-    );
-    assert.equal(
-      stage.getIntersection(
-        { x: stage.width() / 2, y: stage.height() / 2 },
-        '.group'
-      ),
-      group,
-      'intersection with group selector'
-    );
-    assert.equal(
-      stage.getIntersection(
-        { x: stage.width() / 2, y: stage.height() / 2 },
-        'Stage'
-      ),
-      stage,
-      'intersection with stage selector'
-    );
-  });
-
   // ======================================================
   it('stage getIntersection() edge detection', function () {
     var stage = addStage();
@@ -1190,9 +1140,10 @@ describe('Stage', function () {
       }
     });
 
-    stage._mouseover({
+    stage._pointerover({
       clientX: 0,
       clientY: 0,
+      type: 'mouseover',
     });
 
     assert.equal(mouseover, 1, 'initial over');
@@ -1267,7 +1218,7 @@ describe('Stage', function () {
     stage.on('mouseout', function () {
       count += 1;
     });
-    stage._mouseleave({});
+    stage._pointerleave({ type: 'mouseleave' });
     assert.equal(count, 2);
   });
 

test/unit/TouchEvents-test.ts

@@ -9,77 +9,6 @@ import {
 } from './test-utils';
 
 describe('TouchEvents', function () {
-  // ======================================================
-  it('stage content touch events', function () {
-    var stage = addStage();
-    var layer = new Konva.Layer();
-    var circle = new Konva.Circle({
-      x: 100,
-      y: 100,
-      radius: 70,
-      fill: 'green',
-      stroke: 'black',
-      strokeWidth: 4,
-      name: 'myCircle',
-    });
-
-    layer.add(circle);
-    stage.add(layer);
-
-    var circleTouchstart = 0;
-    var circleTouchend = 0;
-    var stageContentTouchstart = 0;
-    var stageContentTouchend = 0;
-    var stageContentTouchmove = 0;
-    var stageContentTap = 0;
-    var stageContentDbltap = 0;
-
-    circle.on('touchstart', function () {
-      circleTouchstart++;
-    });
-
-    circle.on('touchend', function () {
-      circleTouchend++;
-    });
-
-    stage.on('contentTouchstart', function () {
-      stageContentTouchstart++;
-    });
-
-    stage.on('contentTouchend', function () {
-      stageContentTouchend++;
-    });
-
-    stage.on('contentTouchmove', function () {
-      stageContentTouchmove++;
-    });
-
-    stage.on('contentTap', function () {
-      stageContentTap++;
-    });
-
-    stage.on('contentDbltap', function () {
-      stageContentDbltap++;
-    });
-
-    simulateTouchStart(stage, [{ x: 100, y: 100, id: 0 }]);
-
-    simulateTouchEnd(stage, [], [{ x: 100, y: 100, id: 0 }]);
-    assert.equal(circleTouchstart, 1, '1');
-    assert.equal(circleTouchend, 1, '2');
-    assert.equal(stageContentTouchstart, 1, '3');
-    assert.equal(stageContentTouchend, 1, '4');
-    assert.equal(stageContentDbltap, 0, '5');
-
-    simulateTouchStart(stage, [{ x: 1, y: 1, id: 0 }]);
-
-    simulateTouchEnd(stage, [], [{ x: 1, y: 1, id: 0 }]);
-
-    assert.equal(stageContentTouchstart, 2, '6');
-    assert.equal(stageContentTouchend, 2, '7');
-    assert.equal(stageContentDbltap, 1, '8');
-  });
-
   // ======================================================
   it('touchstart touchend touchmove tap dbltap', function (done) {
     var stage = addStage();
@@ -282,26 +211,14 @@ describe('TouchEvents', function () {
     stage.add(layer);
 
     var circleTouchend = 0;
-    var stageContentTouchstart = 0;
-    var stageContentTouchend = 0;
 
     circle.on('touchend', function () {
       circleTouchend++;
     });
 
-    stage.on('contentTouchstart', function () {
-      stageContentTouchstart++;
-    });
-
-    stage.on('contentTouchend', function () {
-      stageContentTouchend++;
-    });
-
     simulateTouchStart(stage, [{ x: 1, y: 1, id: 0 }]);
     simulateTouchEnd(stage, [], [{ x: 100, y: 100, id: 0 }]);
 
-    assert.equal(stageContentTouchstart, 1);
-    assert.equal(stageContentTouchend, 1);
     assert.equal(circleTouchend, 1);
   });
 
@@ -554,7 +471,7 @@ describe('TouchEvents', function () {
   });
 
   it('can capture touch events', function () {
-    Konva.captureTouchEventsEnabled = true;
+    Konva.capturePointerEventsEnabled = true;
     var stage = addStage();
     var layer = new Konva.Layer();
     stage.add(layer);
@@ -641,7 +558,7 @@ describe('TouchEvents', function () {
     assert.equal(circle1.hasPointerCapture(0), false);
     assert.equal(circle1.hasPointerCapture(1), false);
 
-    Konva.captureTouchEventsEnabled = false;
+    Konva.capturePointerEventsEnabled = false;
   });
 
   it('tap and double tap should trigger just once on stage', function () {

test/unit/test-utils.ts

@@ -24,7 +24,9 @@ afterEach(function () {
   var isManual = this.currentTest.parent.title === 'Manual';
 
   Konva.stages.forEach(function (stage) {
-    clearTimeout(stage.dblTimeout);
+    clearTimeout(stage._mouseDblTimeout);
+    clearTimeout(stage._touchDblTimeout);
+    clearTimeout(stage._pointerDblTimeout);
   });
 
   if (!isFailed && !isManual) {
@@ -177,37 +179,43 @@ export function showHit(layer) {
 }
 
 export function simulateMouseDown(stage, pos) {
+  // simulatePointerDown(stage, pos);
   var top = isNode ? 0 : stage.content.getBoundingClientRect().top;
 
-  stage._mousedown({
+  stage._pointerdown({
     clientX: pos.x,
     clientY: pos.y + top,
     button: pos.button || 0,
+    type: 'mousedown',
   });
 }
 
 export function simulateMouseMove(stage, pos) {
+  // simulatePointerMove(stage, pos);
   var top = isNode ? 0 : stage.content.getBoundingClientRect().top;
   var evt = {
     clientX: pos.x,
     clientY: pos.y + top,
     button: pos.button || 0,
+    type: 'mousemove',
   };
 
-  stage._mousemove(evt);
+  stage._pointermove(evt);
   Konva.DD._drag(evt);
 }
 
 export function simulateMouseUp(stage, pos) {
+  // simulatePointerUp(stage, pos);
   var top = isNode ? 0 : stage.content.getBoundingClientRect().top;
   var evt = {
     clientX: pos.x,
     clientY: pos.y + top,
     button: pos.button || 0,
+    type: 'mouseup',
   };
 
   Konva.DD._endDragBefore(evt);
-  stage._mouseup(evt);
+  stage._pointerup(evt);
   Konva.DD._endDragAfter(evt);
 }
 
@@ -242,9 +250,10 @@ export function simulateTouchStart(stage, pos, changed?) {
   var evt = {
     touches: touches,
     changedTouches: changedTouches,
+    type: 'touchstart',
   };
 
-  stage._touchstart(evt);
+  stage._pointerdown(evt);
 }
 
 export function simulateTouchMove(stage, pos, changed?) {
@@ -278,9 +287,10 @@ export function simulateTouchMove(stage, pos, changed?) {
   var evt = {
     touches: touches,
     changedTouches: changedTouches,
+    type: 'touchmove',
   };
 
-  stage._touchmove(evt);
+  stage._pointermove(evt);
   Konva.DD._drag(evt);
 }
 
@@ -315,10 +325,11 @@ export function simulateTouchEnd(stage, pos, changed?) {
   var evt = {
     touches: touches,
     changedTouches: changedTouches,
+    type: 'touchend',
   };
 
   Konva.DD._endDragBefore(evt);
-  stage._touchend(evt);
+  stage._pointerup(evt);
   Konva.DD._endDragAfter(evt);
 }
 
@@ -329,6 +340,7 @@ export function simulatePointerDown(stage: Stage, pos) {
     clientY: pos.y + top,
     button: pos.button || 0,
     pointerId: pos.pointerId || 1,
+    type: 'pointerdown',
   } as any);
 }
 
@@ -339,6 +351,7 @@ export function simulatePointerMove(stage: Stage, pos) {
     clientY: pos.y + top,
     button: pos.button || 0,
     pointerId: pos.pointerId || 1,
+    type: 'pointermove',
   };
 
   stage._pointermove(evt as any);
@@ -346,13 +359,13 @@ export function simulatePointerMove(stage: Stage, pos) {
 }
 
 export function simulatePointerUp(stage: Stage, pos) {
-  debugger;
   var top = isNode ? 0 : stage.content.getBoundingClientRect().top;
   var evt = {
     clientX: pos.x,
     clientY: pos.y + top,
     button: pos.button || 0,
     pointerId: pos.pointerId || 1,
+    type: 'pointerup',
   };
 
   Konva.DD._endDragBefore(evt);