suite('MouseEvents', function () {
  // ======================================================
  test('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 = (circleMouseup = stageContentMousedown = stageContentMouseup = stageContentMousemove = stageContentMouseout = stageContentMouseover = stageContentClick = stageContentDblClick = 0);

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

    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++;
    });

    stage.simulateMouseDown({
      x: 100,
      y: 100,
    });

    stage.simulateMouseUp({
      x: 100,
      y: 100,
    });

    assert.equal(circleMousedown, 1);
    assert.equal(circleMouseup, 1);
    assert.equal(stageContentMousedown, 1);
    assert.equal(stageContentMouseup, 1);
    assert.equal(stageContentClick, 1);

    stage.simulateMouseDown({
      x: 1,
      y: 1,
    });
    stage.simulateMouseUp({
      x: 1,
      y: 1,
    });

    assert.equal(stageContentMousedown, 2);
    assert.equal(stageContentMouseup, 2);

    // trigger double click
    stage.simulateMouseDown({
      x: 1,
      y: 1,
    });
    stage.simulateMouseUp({
      x: 1,
      y: 1,
    });

    assert.equal(stageContentMousedown, 3);
    assert.equal(stageContentMouseup, 3);
    //assert.equal(stageContentDblClick, 1);

    setTimeout(function () {
      stage.simulateMouseMove({
        x: 200,
        y: 1,
      });

      assert.equal(stageContentMousemove, 1);

      stage._mouseout({
        offsetX: 0,
        offsetY: 0,
      });

      assert.equal(stageContentMouseout, 1);

      stage._mouseover({
        offsetX: 0,
        offsetY: 0,
      });

      assert.equal(stageContentMouseover, 1);

      done();
    }, 20);
  });

  // ======================================================
  test('remove shape with onclick', function () {
    var stage = addStage();

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

    var layer = new Konva.Layer();

    var circle = new Konva.Circle({
      x: stage.getWidth() / 2,
      y: stage.getHeight() / 2,
      radius: 70,
      fill: 'green',
      stroke: 'black',
      strokeWidth: 4,
      name: 'myCircle',
      draggable: true,
    });

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

    function remove() {
      circle.remove();
      layer.draw();
    }

    circle.on('click', function () {
      setTimeout(remove, 0);
    });

    stage.simulateMouseDown({
      x: 291,
      y: 112,
    });

    stage.simulateMouseUp({
      x: 291,
      y: 112,
    });
    Konva.DD._endDragAfter({ dragEndNode: circle });
  });

  // ======================================================
  test('test listening true/false with clicks', function () {
    var stage = addStage();

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

    var layer = new Konva.Layer();

    var circle = new Konva.Circle({
      x: stage.getWidth() / 2,
      y: stage.getHeight() / 2,
      radius: 70,
      fill: 'green',
      stroke: 'black',
      strokeWidth: 4,
      name: 'myCircle',
    });

    var clickCount = 0;

    circle.on('click', function () {
      clickCount++;
    });

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

    // -----------------------------------
    stage.simulateMouseDown({
      x: 291,
      y: 112,
    });
    stage.simulateMouseUp({
      x: 291,
      y: 112,
    });
    assert.equal(clickCount, 1, 'should be 1 click');

    // -----------------------------------
    circle.setListening(false);
    stage.simulateMouseDown({
      x: 291,
      y: 112,
    });
    stage.simulateMouseUp({
      x: 291,
      y: 112,
    });
    assert.equal(
      clickCount,
      1,
      'should be 1 click even though another click occurred'
    );

    // -----------------------------------
    circle.setListening(true);
    stage.simulateMouseDown({
      x: 291,
      y: 112,
    });
    stage.simulateMouseUp({
      x: 291,
      y: 112,
    });
    assert.equal(clickCount, 2, 'should be 2 clicks');
  });

  // ======================================================
  test('click mapping', function () {
    var stage = addStage();
    var layer = new Konva.Layer({
      sceneFunc: function () {
        var context = this.getContext();
        context.beginPath();
        context.moveTo(200, 50);
        context.lineTo(420, 80);
        context.quadraticCurveTo(300, 100, 260, 170);
        context.closePath();
        context.fillStyle = 'blue';
        context.fill(context);
      },
    });

    var redCircle = new Konva.Circle({
      x: stage.getWidth() / 2,
      y: stage.getHeight() / 2,
      radius: 70,
      fill: 'red',
    });

    var greenCircle = new Konva.Circle({
      x: 400,
      y: stage.getHeight() / 2,
      radius: 70,
      fill: 'green',
    });

    var redClicks = 0;
    var greenClicks = 0;

    redCircle.on('click', function () {
      //console.log('clicked redCircle');
      redClicks++;
    });

    greenCircle.on('click', function () {
      //console.log('clicked greenCircle');
      greenClicks++;
    });

    layer.add(redCircle);
    layer.add(greenCircle);

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

    showHit(layer);

    // mousedown and mouseup on red circle
    stage.simulateMouseDown({
      x: 284,
      y: 113,
    });

    stage.simulateMouseUp({
      x: 284,
      y: 113,
    });

    assert.equal(redClicks, 1, 'red circle should have 1 click');
    assert.equal(greenClicks, 0, 'green circle should have 0 clicks');

    // mousedown and mouseup on green circle
    stage.simulateMouseDown({
      x: 397,
      y: 108,
    });

    stage.simulateMouseUp({
      x: 397,
      y: 108,
    });

    assert.equal(redClicks, 1, 'red circle should have 1 click');
    assert.equal(greenClicks, 1, 'green circle should have 1 click');

    // mousedown red circle and mouseup on green circle
    stage.simulateMouseDown({
      x: 284,
      y: 113,
    });

    stage.simulateMouseUp({
      x: 397,
      y: 108,
    });

    assert.equal(redClicks, 1, 'red circle should still have 1 click');
    assert.equal(greenClicks, 1, 'green circle should still have 1 click');
  });

  // ======================================================
  test('text events', function () {
    var stage = addStage();
    var layer = new Konva.Layer();
    var text = new Konva.Text({
      x: 290,
      y: 111,
      fontFamily: 'Calibri',
      fontSize: 30,
      fill: 'red',
      text: 'Testing 123',
      draggable: true,
    });

    var click = false;

    text.on('click', function () {
      //console.log('text click');
      click = true;
    });

    layer.add(text);
    stage.add(layer);

    showHit(layer);

    stage.simulateMouseDown({
      x: 300,
      y: 120,
    });

    stage.simulateMouseUp({
      x: 300,
      y: 120,
    });

    assert.equal(
      click,
      true,
      'click event should have been fired when mousing down and then up on text'
    );
  });

  // ======================================================
  test('modify fill stroke and stroke width on hover with circle', function (done) {
    var stage = addStage();
    var layer = new Konva.Layer({
      throttle: 999,
    });
    var circle = new Konva.Circle({
      x: 380,
      y: stage.getHeight() / 2,
      radius: 70,
      strokeWidth: 4,
      fill: 'red',
      stroke: 'black',
    });

    circle.on('mouseover', function () {
      this.setFill('yellow');
      this.setStroke('purple');
      this.setStrokeWidth(20);
      //console.log('mouseover')
      layer.draw();
    });

    circle.on('mouseout', function () {
      this.setFill('red');
      this.setStroke('black');
      this.setStrokeWidth(4);
      //console.log('mouseout')
      layer.draw();
    });

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

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

    assert.equal(circle.getFill(), 'red', 'circle fill should be red');
    assert.equal(circle.getStroke(), 'black', 'circle stroke should be black');

    setTimeout(function () {
      stage.simulateMouseMove({
        x: 377,
        y: 101,
      });

      assert.equal(circle.getFill(), 'yellow', 'circle fill should be yellow');
      assert.equal(
        circle.getStroke(),
        'purple',
        'circle stroke should be purple'
      );

      setTimeout(function () {
        // move mouse back out of circle
        stage.simulateMouseMove({
          x: 157,
          y: 138,
        });

        assert.equal(circle.getFill(), 'red', 'circle fill should be red');
        assert.equal(
          circle.getStroke(),
          'black',
          'circle stroke should be black'
        );
        done();
      }, 20);
    }, 20);
  });

  // ======================================================
  test('mousedown mouseup mouseover mouseout mousemove click dblclick', 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,
    });

    // desktop events
    var mousedown = false;
    var mouseup = false;
    var click = false;
    var dblclick = false;
    var mouseover = false;
    var mouseout = false;
    var mousemove = false;

    circle.on('mousedown', function () {
      mousedown = true;
      //log('mousedown');
    });

    circle.on('mouseup', function () {
      mouseup = true;
      //log('mouseup');
    });

    circle.on('mouseover', function () {
      mouseover = true;
      //log('mouseover');
    });

    circle.on('mouseout', function () {
      mouseout = true;
      //log('mouseout');
    });

    circle.on('mousemove', function () {
      mousemove = true;
      //log('mousemove');
    });

    circle.on('click', function () {
      click = true;
      //log('click');
    });

    circle.on('dblclick', function () {
      dblclick = true;
      //log('dblclick');
    });

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

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

    setTimeout(function () {
      // move mouse to center of circle to trigger mouseover
      stage.simulateMouseMove({
        x: 290,
        y: 100,
      });

      assert(mouseover, '1) mouseover should be true');
      assert(mousemove, '1) mousemove should be true');
      assert(!mousedown, '1) mousedown should be false');
      assert(!mouseup, '1) mouseup should be false');
      assert(!click, '1) click should be false');
      assert(!dblclick, '1) dblclick should be false');
      assert(!mouseout, '1) mouseout should be false');

      setTimeout(function () {
        // move mouse again inside circle to trigger mousemove
        stage.simulateMouseMove({
          x: 290,
          y: 100,
        });

        assert(mouseover, '2) mouseover should be true');
        assert(mousemove, '2) mousemove should be true');
        assert(!mousedown, '2) mousedown should be false');
        assert(!mouseup, '2) mouseup should be false');
        assert(!click, '2) click should be false');
        assert(!dblclick, '2) dblclick should be false');
        assert(!mouseout, '2) mouseout should be false');

        // mousedown inside circle
        stage.simulateMouseDown({
          x: 290,
          y: 100,
        });

        assert(mouseover, '3) mouseover should be true');
        assert(mousemove, '3) mousemove should be true');
        assert(mousedown, '3) mousedown should be true');
        assert(!mouseup, '3) mouseup should be false');
        assert(!click, '3) click should be false');
        assert(!dblclick, '3) dblclick should be false');
        assert(!mouseout, '3) mouseout should be false');

        // mouseup inside circle
        stage.simulateMouseUp({
          x: 290,
          y: 100,
        });

        assert(mouseover, '4) mouseover should be true');
        assert(mousemove, '4) mousemove should be true');
        assert(mousedown, '4) mousedown should be true');
        assert(mouseup, '4) mouseup should be true');
        assert(click, '4) click should be true');
        assert(!dblclick, '4) dblclick should be false');
        assert(!mouseout, '4) mouseout should be false');

        // mousedown inside circle
        stage.simulateMouseDown({
          x: 290,
          y: 100,
        });

        assert(mouseover, '5) mouseover should be true');
        assert(mousemove, '5) mousemove should be true');
        assert(mousedown, '5) mousedown should be true');
        assert(mouseup, '5) mouseup should be true');
        assert(click, '5) click should be true');
        assert(!dblclick, '5) dblclick should be false');
        assert(!mouseout, '5) mouseout should be false');

        // mouseup inside circle to trigger double click
        stage.simulateMouseUp({
          x: 290,
          y: 100,
        });

        assert(mouseover, '6) mouseover should be true');
        assert(mousemove, '6) mousemove should be true');
        assert(mousedown, '6) mousedown should be true');
        assert(mouseup, '6) mouseup should be true');
        assert(click, '6) click should be true');
        assert(dblclick, '6) dblclick should be true');
        assert(!mouseout, '6) mouseout should be false');

        setTimeout(function () {
          // move mouse outside of circle to trigger mouseout
          stage.simulateMouseMove({
            x: 0,
            y: 100,
          });

          assert(mouseover, '7) mouseover should be true');
          assert(mousemove, '7) mousemove should be true');
          assert(mousedown, '7) mousedown should be true');
          assert(mouseup, '7) mouseup should be true');
          assert(click, '7) click should be true');
          assert(dblclick, '7) dblclick should be true');
          assert(mouseout, '7) mouseout should be true');
          done();
        }, 20);
      }, 20);
    }, 20);
  });

  // ======================================================
  test('test group mousedown events', function () {
    var stage = addStage();
    var layer = new Konva.Layer();
    var group = new Konva.Group();

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

    var greenCircle = new Konva.Circle({
      x: stage.getWidth() / 2,
      y: stage.getHeight() / 2,
      radius: 40,
      strokeWidth: 4,
      fill: 'green',
      stroke: 'black',
      name: 'green',
    });

    group.add(redCircle);
    group.add(greenCircle);

    layer.add(group);
    stage.add(layer);

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

    var groupMousedowns = 0;
    var greenCircleMousedowns = 0;

    group.on('mousedown', function () {
      groupMousedowns++;
    });

    greenCircle.on('mousedown', function () {
      greenCircleMousedowns++;
    });

    stage.simulateMouseDown({
      x: 285,
      y: 100,
    });

    assert.equal(groupMousedowns, 1, 'groupMousedowns should be 1');
    assert.equal(greenCircleMousedowns, 1, 'greenCircleMousedowns should be 1');

    stage.simulateMouseDown({
      x: 332,
      y: 139,
    });

    assert.equal(groupMousedowns, 2, 'groupMousedowns should be 2');
    assert.equal(greenCircleMousedowns, 1, 'greenCircleMousedowns should be 1');

    stage.simulateMouseDown({
      x: 285,
      y: 92,
    });

    assert.equal(groupMousedowns, 3, 'groupMousedowns should be 3');
    assert.equal(greenCircleMousedowns, 2, 'greenCircleMousedowns should be 2');

    stage.simulateMouseDown({
      x: 221,
      y: 146,
    });

    //assert.equal(groupMousedowns, 4, 'groupMousedowns should be 4');
    assert.equal(greenCircleMousedowns, 2, 'greenCircleMousedowns should be 2');
  });

  // ======================================================
  test('test mousedown events with antialiasing', function () {
    var stage = addStage();
    var layer = new Konva.Layer();
    var group = new Konva.Group();

    var greenCircle = new Konva.Circle({
      x: 50,
      y: 50,
      radius: 50,
      fill: 'green',
      name: 'green',
    });

    var groupMousedowns = 0;
    group.add(greenCircle);
    layer.add(group);

    group.cache();
    group.scale({
      x: 5,
      y: 5,
    });
    group.on('mousedown', function () {
      groupMousedowns++;
    });

    stage.add(layer);
    layer.draw();

    var top = stage.content.getBoundingClientRect().top;
    stage.simulateMouseDown({
      x: 135,
      y: 30,
    });

    assert.equal(groupMousedowns, 1, 'groupMousedowns should be 1');
  });
  test('test mousemove events with antialiasing', function () {
    var stage = addStage();
    var layer = new Konva.Layer();

    var group = new Konva.Group({
      name: 'group',
    });
    var rect1 = new Konva.Rect({
      x: 0,
      y: 0,
      width: 100,
      height: 100,
      fill: 'red',
    });

    var rect2 = new Konva.Rect({
      x: 50,
      y: 0,
      width: 70,
      height: 70,
      rotation: 45,
      fill: 'green',
    });
    group.add(rect1).add(rect2);
    layer.add(group);
    group.scaleX(5);
    group.scaleY(5);
    var mouseenterCount = 0;
    group.on('mouseenter', function () {
      mouseenterCount++;
    });

    stage.add(layer);

    var top = stage.content.getBoundingClientRect().top;
    // move mouse slowly
    for (var i = 99; i < 129; i++) {
      stage.simulateMouseMove({
        x: i,
        y: 135,
      });
    }
    assert.equal(mouseenterCount, 1, 'mouseenterCount should be 1');
  });

  // ======================================================
  test('group mouseenter events', function (done) {
    var stage = addStage();
    var layer = new Konva.Layer();
    var group = new Konva.Group({
      name: 'group',
    });

    var redMouseenters = 0;
    var redMouseleaves = 0;
    var greenMouseenters = 0;
    var greenMouseleaves = 0;
    var groupMouseenters = 0;
    var groupMouseleaves = 0;

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

    var greenCircle = new Konva.Circle({
      x: stage.getWidth() / 2,
      y: stage.getHeight() / 2,
      radius: 40,
      strokeWidth: 4,
      fill: 'green',
      stroke: 'black',
      name: 'green',
    });

    group.on('mouseenter', function () {
      groupMouseenters++;
      //console.log('group over')
    });

    group.on('mouseleave', function () {
      groupMouseleaves++;
      //console.log('group out')
    });

    redCircle.on('mouseenter', function () {
      redMouseenters++;
      //console.log('red over')
    });

    redCircle.on('mouseleave', function () {
      redMouseleaves++;
      //console.log('red out')
    });

    greenCircle.on('mouseenter', function () {
      greenMouseenters++;
      //console.log('green over')
    });

    greenCircle.on('mouseleave', function () {
      greenMouseleaves++;
      //console.log('green out')
    });

    group.add(redCircle);
    group.add(greenCircle);

    layer.add(group);
    stage.add(layer);

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

    setTimeout(function () {
      // move mouse outside of circles
      stage.simulateMouseMove({
        x: 177,
        y: 146,
      });

      assert.equal(redMouseenters, 0, 'redMouseenters should be 0');
      assert.equal(redMouseleaves, 0, 'redMouseleaves should be 0');
      assert.equal(greenMouseenters, 0, 'greenMouseenters should be 0');
      assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
      assert.equal(groupMouseenters, 0, 'groupMouseenters should be 0');
      assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');

      setTimeout(function () {
        // move mouse inside of red circle
        stage.simulateMouseMove({
          x: 236,
          y: 145,
        });

        //console.log('groupMouseenters=' + groupMouseenters);

        assert.equal(redMouseenters, 1, 'redMouseenters should be 1');
        assert.equal(redMouseleaves, 0, 'redMouseleaves should be 0');
        assert.equal(greenMouseenters, 0, 'greenMouseenters should be 0');
        assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
        assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
        assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');

        setTimeout(function () {
          // move mouse inside of green circle
          stage.simulateMouseMove({
            x: 284,
            y: 118,
          });

          assert.equal(redMouseenters, 1, 'redMouseenters should be 1');
          assert.equal(redMouseleaves, 1, 'redMouseleaves should be 1');
          assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
          assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
          assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
          assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');

          setTimeout(function () {
            // move mouse back to red circle

            stage.simulateMouseMove({
              x: 345,
              y: 105,
            });

            assert.equal(redMouseenters, 2, 'redMouseenters should be 2');
            assert.equal(redMouseleaves, 1, 'redMouseleaves should be 1');
            assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
            assert.equal(greenMouseleaves, 1, 'greenMouseleaves should be 1');
            assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
            assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');

            setTimeout(function () {
              // move mouse outside of circles
              stage.simulateMouseMove({
                x: 177,
                y: 146,
              });

              assert.equal(redMouseenters, 2, 'redMouseenters should be 2');
              assert.equal(redMouseleaves, 2, 'redMouseleaves should be 2');
              assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
              assert.equal(greenMouseleaves, 1, 'greenMouseleaves should be 1');
              assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
              assert.equal(groupMouseleaves, 1, 'groupMouseleaves should be 1');

              //document.body.appendChild(layer.bufferCanvas.element)

              //layer.bufferCanvas.element.style.marginTop = '220px';

              done();
            }, 20);
          }, 20);
        }, 20);
      }, 20);
    }, 20);
  });

  // ======================================================
  test('test mouseleave with multiple groups', function () {
    var stage = addStage();
    var layer = new Konva.Layer({
      id: 'layer',
    });

    var rect1 = new Konva.Rect({
      x: 0,
      y: 0,
      width: 100,
      height: 100,
      fill: 'red',
      id: 'redRect',
    });

    var rect2 = new Konva.Rect({
      x: 50,
      y: 0,
      width: 70,
      height: 70,
      rotation: 45,
      fill: 'green',
      id: 'greenRect',
    });

    var group = new Konva.Group({
      id: 'group1',
    });
    var group2 = new Konva.Group({
      id: 'group2',
    });
    group.add(rect1);
    group2.add(rect2);
    group.add(group2);
    layer.add(group);
    stage.add(layer);
    layer.draw();

    var groupMouseenter = 0;
    var groupMouseleave = 0;
    var groupMouseover = 0;
    var groupMouseout = 0;

    var group2Mouseleave = 0;
    var group2Mouseenter = 0;
    var group2Mouseover = 0;
    var group2Mouseout = 0;

    group.on('mouseenter', function () {
      groupMouseenter += 1;
    });
    group.on('mouseleave', function () {
      groupMouseleave += 1;
    });
    group.on('mouseover', function () {
      groupMouseover += 1;
    });
    group.on('mouseout', function () {
      groupMouseout += 1;
    });

    group2.on('mouseenter', function () {
      group2Mouseenter += 1;
    });
    group2.on('mouseleave', function () {
      group2Mouseleave += 1;
    });
    group2.on('mouseover', function () {
      group2Mouseover += 1;
    });
    group2.on('mouseout', function () {
      group2Mouseout += 1;
    });

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

    stage.simulateMouseMove({
      x: 10,
      y: 10,
    });
    assert.equal(groupMouseenter, 1, 'move1 : group mouseenter should trigger');
    assert.equal(
      group2Mouseenter,
      0,
      'move1 : group2 mouseenter should not trigger'
    );

    assert.equal(
      groupMouseleave,
      0,
      'move1 : group mouseleave should not trigger'
    );
    assert.equal(
      group2Mouseleave,
      0,
      'move1 : group2 mouseleave should not trigger'
    );

    assert.equal(groupMouseover, 1, 'move1 : group mouseover should trigger');
    assert.equal(
      group2Mouseover,
      0,
      'move1 : group2 mouseover should not trigger'
    );

    assert.equal(groupMouseout, 0, 'move1 : group mouseout should not trigger');
    assert.equal(
      group2Mouseout,
      0,
      'move1 : group2 mouseout should not trigger'
    );

    stage.simulateMouseMove({
      x: 50,
      y: 50,
    });
    assert.equal(
      groupMouseenter,
      1,
      'move2 : group mouseenter should not trigger'
    );
    assert.equal(
      group2Mouseenter,
      1,
      'move2 : group2 mouseenter should trigger'
    );

    assert.equal(
      groupMouseleave,
      0,
      'move2 : group mouseleave should not trigger'
    );
    assert.equal(
      group2Mouseleave,
      0,
      'move2 : group2 mouseleave should not trigger'
    );

    assert.equal(groupMouseover, 2, 'move2 : group mouseover should trigger');
    assert.equal(group2Mouseover, 1, 'move2 : group2 mouseover should trigger');

    assert.equal(groupMouseout, 1, 'move2 : group mouseout should trigger');
    assert.equal(
      group2Mouseout,
      0,
      'move2 : group2 mouseout should not trigger'
    );

    stage.simulateMouseMove({
      x: 10,
      y: 10,
    });
    assert.equal(
      groupMouseenter,
      1,
      'move3 : group mouseenter should not trigger'
    );
    assert.equal(
      group2Mouseenter,
      1,
      'move3 : group2 mouseenter should not trigger'
    );

    assert.equal(
      groupMouseleave,
      0,
      'move3 : group mouseleave should not trigger'
    );
    assert.equal(
      group2Mouseleave,
      1,
      'move3 : group2 mouseleave should trigger'
    );

    assert.equal(groupMouseover, 3, 'move3 : group mouseover should trigger');
    assert.equal(group2Mouseover, 1, 'move3 : group2 mouseover should trigger');

    assert.equal(groupMouseout, 2, 'move3 : group mouseout should trigger');
    assert.equal(group2Mouseout, 1, 'move3 : group2 mouseout should trigger');

    stage.simulateMouseMove({
      x: 50,
      y: 50,
    });

    assert.equal(groupMouseenter, 1, 'move4 : mouseenter should not trigger');
    assert.equal(
      group2Mouseenter,
      2,
      'move4 : group2 mouseenter should trigger'
    );

    assert.equal(
      groupMouseleave,
      0,
      'move4 : group mouseleave should not trigger'
    );
    assert.equal(
      group2Mouseleave,
      1,
      'move4 : group2 mouseleave should not trigger'
    );

    assert.equal(groupMouseover, 4, 'move1 : group mouseover should trigger');
    assert.equal(group2Mouseover, 2, 'move1 : group2 mouseover should trigger');

    assert.equal(groupMouseout, 3, 'move4 : group mouseout should trigger');
    assert.equal(
      group2Mouseout,
      1,
      'move4 : group2 mouseout should not trigger'
    );
  });

  // ======================================================
  test('test mouseleave with multiple groups 2', function () {
    var stage = addStage();
    var layer = new Konva.Layer();
    stage.add(layer);

    var group1 = new Konva.Group({ name: 'group1' });
    layer.add(group1);

    var bigRect = new Konva.Rect({
      x: 0,
      y: 0,
      width: 200,
      height: 200,
      fill: 'green',
    });
    group1.add(bigRect);

    var group21 = new Konva.Group({ name: 'group21' });
    layer.add(group21);

    var group22 = new Konva.Group({ name: 'group22' });
    group21.add(group22);

    var smallShape = new Konva.Rect({
      x: 50,
      y: 50,
      width: 100,
      height: 100,
      fill: 'red',
    });
    group22.add(smallShape);
    stage.draw();

    var group1Mouseenter = 0;
    var group1Mouseleave = 0;
    var group1Mouseover = 0;
    var group1Mouseout = 0;

    var group21Mouseenter = 0;
    var group21Mouseleave = 0;
    var group21Mouseover = 0;
    var group21Mouseout = 0;

    var group22Mouseenter = 0;
    var group22Mouseleave = 0;
    var group22Mouseover = 0;
    var group22Mouseout = 0;

    group1.on('mouseenter', function () {
      group1Mouseenter += 1;
    });
    group1.on('mouseleave', function () {
      group1Mouseleave += 1;
    });
    group1.on('mouseover', function () {
      group1Mouseover += 1;
    });
    group1.on('mouseout', function () {
      group1Mouseout += 1;
    });

    group21.on('mouseenter', function () {
      group21Mouseenter += 1;
    });
    group21.on('mouseleave', function () {
      group21Mouseleave += 1;
    });
    group21.on('mouseover', function () {
      group21Mouseover += 1;
    });
    group21.on('mouseout', function () {
      group21Mouseout += 1;
    });

    group22.on('mouseenter', function () {
      group22Mouseenter += 1;
    });
    group22.on('mouseleave', function () {
      group22Mouseleave += 1;
    });
    group22.on('mouseover', function () {
      group22Mouseover += 1;
    });
    group22.on('mouseout', function () {
      group22Mouseout += 1;
    });

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

    stage.simulateMouseMove({
      x: 10,
      y: 10,
    });

    assert.equal(
      group1Mouseenter,
      1,
      'move1 : group1 mouseenter should trigger'
    );

    stage.simulateMouseMove({
      x: 60,
      y: 60,
    });
    assert.equal(
      group21Mouseenter,
      1,
      'move2 : group21 mouseenter should trigger'
    );
    assert.equal(
      group22Mouseenter,
      1,
      'move2 : group22 mouseenter should trigger'
    );
    assert.equal(
      group1Mouseleave,
      1,
      'move2 : group1 mouseleave should trigger'
    );

    stage.simulateMouseMove({
      x: 10,
      y: 10,
    });

    assert.equal(
      group21Mouseleave,
      1,
      'move3 : group21 mouseleave should trigger'
    );
    assert.equal(
      group22Mouseleave,
      1,
      'move3 : group22 mouseleave should trigger'
    );
    assert.equal(
      group1Mouseenter,
      2,
      'move3 : group1 mouseenter should trigger'
    );
  });

  // ======================================================
  test('test mouseleave and mouseenter on deep nesting', function () {
    var stage = addStage();
    var layer = new Konva.Layer();
    stage.add(layer);

    // top group
    var group = new Konva.Group({
      x: 0,
      y: 0,
      width: stage.width(),
      height: stage.height(),
      name: 'top-group',
    });
    layer.add(group);

    // circle inside top group
    var circle = new Konva.Circle({
      x: 50,
      y: 50,
      radius: 50,
      fill: 'green',
    });
    group.add(circle);

    // two level nesting
    var group2 = new Konva.Group({
      x: 0,
      y: 0,
      name: 'group-2',
    });
    group.add(group2);

    var group3 = new Konva.Group({
      x: 0,
      y: 0,
      name: 'group-3',
    });
    group2.add(group3);

    // circle inside deep group
    var circle2 = new Konva.Circle({
      x: 50,
      y: 50,
      radius: 20,
      fill: 'white',
    });
    group3.add(circle2);

    layer.draw();

    var mouseenter = 0;
    var mouseleave = 0;
    group.on('mouseenter', function () {
      mouseenter += 1;
    });
    group.on('mouseleave', function () {
      mouseleave += 1;
    });
    // move to big circle
    stage.simulateMouseMove({
      x: 20,
      y: 20,
    });
    assert.equal(mouseenter, 1, 'first enter big circle');
    assert.equal(mouseleave, 0, 'no leave on first move');

    // move to small inner circle
    stage.simulateMouseMove({
      x: 50,
      y: 50,
    });
    assert.equal(mouseenter, 1, 'enter small circle');
    assert.equal(mouseleave, 0, 'no leave on second move');

    // move to big circle
    stage.simulateMouseMove({
      x: 20,
      y: 20,
    });
    assert.equal(mouseenter, 1, 'second enter big circle');
    assert.equal(mouseleave, 0, 'no leave on third move');

    // move out of group
    stage.simulateMouseMove({
      x: 0,
      y: 0,
    });
    assert.equal(mouseenter, 1, 'mouseenter = 1 at the end');
    assert.equal(mouseleave, 1, 'first mouseleave');
  });

  // ======================================================
  test('test dblclick to a wrong target', function () {
    var stage = addStage();
    var layer = new Konva.Layer();
    stage.add(layer);

    var leftRect = new Konva.Rect({
      x: 0,
      y: 0,
      width: 100,
      height: 100,
      fill: 'red',
    });
    layer.add(leftRect);

    var rightRect = new Konva.Rect({
      x: 100,
      y: 0,
      width: 100,
      height: 100,
      fill: 'blue',
    });
    layer.add(rightRect);

    stage.draw();

    var leftRectSingleClick = 0;
    var rightRectSingleClick = 0;
    var rightRectDblClick = 0;

    leftRect.on('click', function () {
      leftRectSingleClick++;
    });
    rightRect.on('click', function () {
      rightRectSingleClick++;
    });
    rightRect.on('dblclick', function () {
      rightRectDblClick++;
    });

    stage.simulateMouseDown({
      x: 50,
      y: 50,
    });
    stage.simulateMouseUp({
      x: 50,
      y: 50,
    });
    assert.equal(leftRectSingleClick, 1, 'leftRect trigger a click');

    stage.simulateMouseDown({
      x: 150,
      y: 50,
    });
    stage.simulateMouseUp({
      x: 150,
      y: 50,
    });
    assert.equal(rightRectSingleClick, 1, 'rightRect trigger a click');
    assert.equal(rightRectDblClick, 0, 'rightRect dblClick should not trigger');
  });

  // ======================================================
  test('test mouseleave + mouseenter with deep nesting', function () {
    var stage = addStage();
    var layer = new Konva.Layer();
    stage.add(layer);

    var leftRect = new Konva.Rect({
      x: 0,
      y: 0,
      width: 100,
      height: 100,
      fill: 'green',
    });
    layer.add(leftRect);

    var rightGrandParentGroup = new Konva.Group({
      name: 'rightGrandParentGroup',
    });
    layer.add(rightGrandParentGroup);

    var rightParentGroup = new Konva.Group({ name: 'rightParentGroup' });
    rightGrandParentGroup.add(rightParentGroup);

    var rightRect = new Konva.Rect({
      x: 100,
      y: 0,
      width: 100,
      height: 100,
      fill: 'red',
    });
    rightParentGroup.add(rightRect);
    stage.draw();

    var leftRectMouseenter = 0;
    var leftRectMouseleave = 0;
    var leftRectMouseover = 0;
    var leftRectMouseout = 0;

    var rightGrandParentGroupMouseenter = 0;
    var rightGrandParentGroupMouseleave = 0;
    var rightGrandParentGroupMouseover = 0;
    var rightGrandParentGroupMouseout = 0;

    var rightParentGroupMouseenter = 0;
    var rightParentGroupMouseleave = 0;
    var rightParentGroupMouseover = 0;
    var rightParentGroupMouseout = 0;

    var rightRectMouseenter = 0;
    var rightRectMouseleave = 0;
    var rightRectMouseover = 0;
    var rightRectMouseout = 0;

    leftRect.on('mouseenter', function () {
      leftRectMouseenter += 1;
    });
    leftRect.on('mouseleave', function () {
      leftRectMouseleave += 1;
    });
    leftRect.on('mouseover', function () {
      leftRectMouseover += 1;
    });
    leftRect.on('mouseout', function () {
      leftRectMouseout += 1;
    });

    rightGrandParentGroup.on('mouseenter', function () {
      rightGrandParentGroupMouseenter += 1;
    });
    rightGrandParentGroup.on('mouseleave', function () {
      rightGrandParentGroupMouseleave += 1;
    });
    rightGrandParentGroup.on('mouseover', function () {
      rightGrandParentGroupMouseover += 1;
    });
    rightGrandParentGroup.on('mouseout', function () {
      rightGrandParentGroupMouseout += 1;
    });

    rightParentGroup.on('mouseenter', function () {
      rightParentGroupMouseenter += 1;
    });
    rightParentGroup.on('mouseleave', function () {
      rightParentGroupMouseleave += 1;
    });
    rightParentGroup.on('mouseover', function () {
      rightParentGroupMouseover += 1;
    });
    rightParentGroup.on('mouseout', function () {
      rightParentGroupMouseout += 1;
    });

    rightRect.on('mouseenter', function () {
      rightRectMouseenter += 1;
    });
    rightRect.on('mouseleave', function () {
      rightRectMouseleave += 1;
    });
    rightRect.on('mouseover', function () {
      rightRectMouseover += 1;
    });
    rightRect.on('mouseout', function () {
      rightRectMouseout += 1;
    });

    stage.simulateMouseMove({
      x: 50,
      y: 50,
    });

    assert.equal(
      leftRectMouseenter,
      1,
      'move1 : leftRectMouseenter mouseenter should trigger'
    );

    stage.simulateMouseMove({
      x: 150,
      y: 50,
    });

    assert.equal(
      leftRectMouseleave,
      1,
      'move2 : leftRectMouseleave mouseleave should trigger'
    );
    assert.equal(
      rightRectMouseenter,
      1,
      'move2 : rightRect mouseenter should trigger'
    );
    assert.equal(
      rightParentGroupMouseenter,
      1,
      'move2 : rightParentGroup mouseenter should trigger'
    );
    assert.equal(
      rightGrandParentGroupMouseenter,
      1,
      'move2 : rightGrandParentGroup mouseenter should trigger'
    );

    stage.simulateMouseMove({
      x: 50,
      y: 50,
    });

    assert.equal(
      rightRectMouseleave,
      1,
      'move3 : rightRect mouseleave should trigger'
    );
    assert.equal(
      rightParentGroupMouseleave,
      1,
      'move3 : rightParentGroup mouseleave should trigger'
    );
    assert.equal(
      rightGrandParentGroupMouseleave,
      1,
      'move3 : rightGrandParentGroup mouseleave should trigger'
    );

    assert.equal(
      leftRectMouseenter,
      2,
      'move3 : leftRectMouseenter mouseenter should trigger'
    );
  });

  // ======================================================
  test('test event bubbling', function () {
    var stage = addStage();
    var layer = new Konva.Layer();
    var circle = new Konva.Circle({
      x: 380,
      y: stage.getHeight() / 2,
      radius: 70,
      strokeWidth: 4,
      fill: 'red',
      stroke: 'black',
      id: 'myCircle',
    });

    var group1 = new Konva.Group();
    var group2 = new Konva.Group();

    /*
     *   stage
     *     |
     *   layer
     *     |
     *  group2
     *     |
     *  group1
     *     |
     *  circle
     */

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

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

    // events array
    var e = [];

    circle.on('click', function () {
      e.push('circle');
    });
    group1.on('click', function () {
      e.push('group1');
    });
    group2.on('click', function () {
      e.push('group2');
    });
    layer.on('click', function (evt) {
      //console.log(evt)
      assert.equal(evt.target.id(), 'myCircle');
      assert.equal(evt.type, 'click');
      e.push('layer');
    });
    stage.on('click', function (evt) {
      e.push('stage');
    });
    // click on circle
    stage.simulateMouseDown({
      x: 374,
      y: 114,
    });
    stage.simulateMouseUp({
      x: 374,
      y: 114,
    });
    Konva.DD._endDragAfter({ dragEndNode: circle });

    assert.equal(
      e.toString(),
      'circle,group1,group2,layer,stage',
      'problem with event bubbling'
    );
  });

  // ======================================================
  test('test custom circle hit function', function (done) {
    var stage = addStage();
    var layer = new Konva.Layer();
    var circle = new Konva.Circle({
      x: 380,
      y: stage.getHeight() / 2,
      radius: 70,
      strokeWidth: 4,
      fill: 'red',
      stroke: 'black',
      hitFunc: function (context) {
        var _context = context._context;

        _context.beginPath();
        _context.arc(0, 0, this.getRadius() + 100, 0, Math.PI * 2, true);
        _context.closePath();
        context.fillStrokeShape(this);
      },
    });

    circle.setDraggable(true);

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

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

    var mouseovers = 0;
    var mouseouts = 0;

    circle.on('mouseover', function () {
      mouseovers++;
    });

    circle.on('mouseout', function () {
      mouseouts++;
    });

    setTimeout(function () {
      // move mouse far outside circle
      stage.simulateMouseMove({
        x: 113,
        y: 112,
      });

      setTimeout(function () {
        assert.equal(mouseovers, 0, '1) mouseovers should be 0');
        assert.equal(mouseouts, 0, '1) mouseouts should be 0');

        stage.simulateMouseMove({
          x: 286,
          y: 118,
        });

        assert.equal(mouseovers, 1, '2) mouseovers should be 1');
        assert.equal(mouseouts, 0, '2)mouseouts should be 0');

        setTimeout(function () {
          stage.simulateMouseMove({
            x: 113,
            y: 112,
          });

          assert.equal(mouseovers, 1, '3) mouseovers should be 1');
          assert.equal(mouseouts, 1, '3) mouseouts should be 1');

          showHit(layer);

          // set drawBufferFunc with setter

          circle.hitFunc(function (context) {
            var _context = context._context;
            _context.beginPath();
            _context.arc(0, 0, this.getRadius() - 50, 0, Math.PI * 2, true);
            _context.closePath();
            context.fillStrokeShape(this);
          });

          layer.getHitCanvas().getContext().clear();
          layer.drawHit();

          setTimeout(function () {
            // move mouse far outside circle
            stage.simulateMouseMove({
              x: 113,
              y: 112,
            });

            assert.equal(mouseovers, 1, '4) mouseovers should be 1');
            assert.equal(mouseouts, 1, '4) mouseouts should be 1');

            setTimeout(function () {
              stage.simulateMouseMove({
                x: 286,
                y: 118,
              });

              assert.equal(mouseovers, 1, '5) mouseovers should be 1');
              assert.equal(mouseouts, 1, '5) mouseouts should be 1');

              setTimeout(function () {
                stage.simulateMouseMove({
                  x: 321,
                  y: 112,
                });

                assert.equal(mouseovers, 1, '6) mouseovers should be 1');
                assert.equal(mouseouts, 1, '6) mouseouts should be 1');

                setTimeout(function () {
                  // move to center of circle
                  stage.simulateMouseMove({
                    x: 375,
                    y: 112,
                  });

                  assert.equal(mouseovers, 2, '7) mouseovers should be 2');
                  assert.equal(mouseouts, 1, '7) mouseouts should be 1');

                  done();
                }, 20);
              }, 20);
            }, 20);
          }, 20);
        }, 20);
      }, 20);
    }, 20);
  });

  test('change ratio for hit graph', function () {
    var stage = addStage();
    var layer = new Konva.Layer();
    var circle = new Konva.Circle({
      x: stage.width() / 2,
      y: stage.height() / 2,
      radius: 50,
      stroke: 'black',
      fill: 'red',
      strokeWidth: 5,
      draggable: true,
    });

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

    layer.getHitCanvas().setPixelRatio(0.5);

    layer.draw();
    var shape = layer.getIntersection({
      x: stage.width() / 2 - 55,
      y: stage.height() / 2 - 55,
    });
    assert.equal(!!shape, false, 'no shape here');
    shape = layer.getIntersection({
      x: stage.width() / 2 + 55,
      y: stage.height() / 2 + 55,
    });
    assert.equal(!!shape, false, 'no shape here');
    shape = layer.getIntersection({
      x: stage.width() / 2,
      y: stage.height() / 2,
    });
    assert.equal(shape, circle);
  });

  test('double click after click should trigger event', function (done) {
    var stage = addStage();
    var layer = new Konva.Layer();
    stage.add(layer);

    var bigRect = new Konva.Rect({
      x: 0,
      y: 0,
      width: 200,
      height: 200,
      fill: 'yellow',
    });
    layer.add(bigRect);

    var smallShape = new Konva.Circle({
      x: 100,
      y: 100,
      width: 100,
      fill: 'red',
    });
    layer.add(smallShape);
    layer.draw();

    var bigClicks = 0;
    var smallClicks = 0;
    var smallDblClicks = 0;

    bigRect.on('click', function () {
      bigClicks += 1;
    });

    smallShape.on('click', function () {
      smallClicks += 1;
    });

    smallShape.on('dblclick', function () {
      smallDblClicks += 1;
    });

    stage.simulateMouseDown({
      x: 10,
      y: 10,
    });
    stage.simulateMouseUp({
      x: 10,
      y: 10,
    });

    assert.equal(bigClicks, 1, 'single click on big rect');
    assert.equal(smallClicks, 0, 'no  click on small rect');
    assert.equal(smallDblClicks, 0, 'no dblclick on small rect');

    setTimeout(function () {
      stage.simulateMouseDown({
        x: 100,
        y: 100,
      });
      stage.simulateMouseUp({
        x: 100,
        y: 100,
      });

      assert.equal(bigClicks, 1, 'single click on big rect');
      assert.equal(smallClicks, 1, 'single click on small rect');
      assert.equal(smallDblClicks, 0, 'no dblclick on small rect');

      setTimeout(function () {
        stage.simulateMouseDown({
          x: 100,
          y: 100,
        });
        stage.simulateMouseUp({
          x: 100,
          y: 100,
        });

        assert.equal(bigClicks, 1, 'single click on big rect');
        assert.equal(smallClicks, 2, 'second click on small rect');
        assert.equal(smallDblClicks, 1, 'single dblclick on small rect');

        done();
      });
    });
  });

  test('click on stage and second click on shape should not trigger double click (check after dblclick)', function (done) {
    var stage = addStage();
    var layer = new Konva.Layer();
    stage.add(layer);

    var bigRect = new Konva.Rect({
      x: 50,
      y: 50,
      width: 200,
      height: 200,
      fill: 'yellow',
    });
    layer.add(bigRect);

    layer.draw();

    var bigClicks = 0;
    var bigDblClicks = 0;

    // make dblclick
    stage.simulateMouseDown({
      x: 100,
      y: 100,
    });
    stage.simulateMouseUp({
      x: 100,
      y: 100,
    });
    stage.simulateMouseDown({
      x: 100,
      y: 100,
    });
    stage.simulateMouseUp({
      x: 100,
      y: 100,
    });

    bigRect.on('click', function () {
      bigClicks += 1;
    });

    bigRect.on('dblclick', function () {
      bigDblClicks += 1;
    });

    stage.simulateMouseDown({
      x: 10,
      y: 10,
    });
    stage.simulateMouseUp({
      x: 10,
      y: 10,
    });

    assert.equal(bigClicks, 0);
    assert.equal(bigDblClicks, 0);

    stage.simulateMouseDown({
      x: 100,
      y: 100,
    });
    stage.simulateMouseUp({
      x: 100,
      y: 100,
    });

    assert.equal(bigClicks, 1);
    assert.equal(bigDblClicks, 0);

    done();
  });

  test('double click after drag should trigger event', function (done) {
    var stage = addStage();
    var layer = new Konva.Layer();
    stage.add(layer);

    var bigRect = new Konva.Rect({
      x: 0,
      y: 0,
      width: 200,
      height: 200,
      fill: 'yellow',
      draggable: true,
    });
    layer.add(bigRect);

    var smallShape = new Konva.Circle({
      x: 100,
      y: 100,
      width: 100,
      fill: 'red',
    });
    layer.add(smallShape);
    layer.draw();

    var bigClicks = 0;
    var smallClicks = 0;
    var smallDblClicks = 0;

    bigRect.on('click', function () {
      bigClicks += 1;
    });

    smallShape.on('click', function () {
      smallClicks += 1;
    });

    smallShape.on('dblclick', function () {
      smallDblClicks += 1;
    });

    stage.simulateMouseDown({
      x: 10,
      y: 10,
    });
    stage.simulateMouseMove({
      x: 15,
      y: 15,
    });
    stage.simulateMouseUp({
      x: 15,
      y: 15,
    });

    assert.equal(bigClicks, 0, 'single click on big rect');
    assert.equal(smallClicks, 0, 'no  click on small rect');
    assert.equal(smallDblClicks, 0, 'no dblclick on small rect');

    setTimeout(function () {
      stage.simulateMouseDown({
        x: 100,
        y: 100,
      });
      stage.simulateMouseUp({
        x: 100,
        y: 100,
      });

      assert.equal(bigClicks, 0, 'single click on big rect');
      assert.equal(smallClicks, 1, 'single click on small rect');
      assert.equal(smallDblClicks, 0, 'no dblclick on small rect');

      setTimeout(function () {
        stage.simulateMouseDown({
          x: 100,
          y: 100,
        });
        stage.simulateMouseUp({
          x: 100,
          y: 100,
        });

        assert.equal(bigClicks, 0, 'single click on big rect');
        assert.equal(smallClicks, 2, 'second click on small rect');
        assert.equal(smallDblClicks, 1, 'single dblclick on small rect');

        done();
      }, 5);
    });
  });

  test('test mouseenter on empty stage', function () {
    var stage = addStage();
    var layer = new Konva.Layer();
    stage.add(layer);

    var mouseenterCount = 0;
    stage.on('mouseenter', function () {
      mouseenterCount += 1;
    });

    var top = stage.content.getBoundingClientRect().top;
    var evt = {
      clientX: 10,
      clientY: 10 + top,
      button: 0,
    };

    stage._mouseenter(evt);

    assert.equal(mouseenterCount, 1, 'mouseenterCount should be 1');
  });

  test('test mouseleave on empty stage', function () {
    var stage = addStage();
    var layer = new Konva.Layer();
    stage.add(layer);

    var mouseleave = 0;
    stage.on('mouseleave', function () {
      mouseleave += 1;
    });

    var top = stage.content.getBoundingClientRect().top;
    var evt = {
      clientX: 0,
      clientY: 0 + top,
      button: 0,
    };

    stage._mouseout(evt);

    assert.equal(mouseleave, 1, 'mouseleave should be 1');
  });

  test('test mouseleave from the shape', function () {
    var stage = addStage();
    var layer = new Konva.Layer();
    stage.add(layer);

    var circle = new Konva.Circle({
      fill: 'red',
      radius: 100,
      x: 200,
      y: 0,
    });
    layer.add(circle);
    layer.draw();

    var mouseleave = 0;
    stage.on('mouseleave', function () {
      mouseleave += 1;
    });

    var mouseout = 0;
    stage.on('mouseout', function () {
      mouseout += 1;
    });

    var circleMouseleave = 0;
    circle.on('mouseleave', function () {
      circleMouseleave += 1;
    });

    var circleMouseout = 0;
    circle.on('mouseout', function () {
      circleMouseout += 1;
    });

    var layerMouseleave = 0;
    layer.on('mouseleave', function () {
      layerMouseleave += 1;
    });

    var layerMouseout = 0;
    layer.on('mouseout', function () {
      layerMouseout += 1;
    });

    // move into a circle
    stage.simulateMouseMove({ x: 200, y: 5 });

    var top = stage.content.getBoundingClientRect().top;
    var evt = {
      clientX: 200,
      clientY: -5 + top,
      button: 0,
    };

    stage._mouseout(evt);

    assert.equal(circleMouseleave, 1, 'circleMouseleave should be 1');
    assert.equal(circleMouseout, 1, 'circleMouseout should be 1');
    assert.equal(layerMouseleave, 1, 'layerMouseleave should be 1');
    assert.equal(layerMouseout, 1, 'layerMouseout should be 1');
    assert.equal(mouseleave, 1, 'mouseleave should be 1');
    assert.equal(mouseout, 1, 'mouseout should be 1');
  });

  test('should not trigger mouseenter on stage when we go to the shape from empty space', function () {
    var stage = addStage();
    var layer = new Konva.Layer();
    stage.add(layer);

    var rect = new Konva.Rect({
      width: 50,
      height: 50,
      fill: 'red',
    });
    layer.add(rect);

    layer.draw();

    var mouseenter = 0;
    stage.on('mouseenter', function () {
      debugger;
      mouseenter += 1;
    });

    stage.simulateMouseMove({
      x: 100,
      y: 100,
    });

    stage.simulateMouseMove({
      x: 25,
      y: 25,
    });

    assert.equal(mouseenter, 0, 'mouseenter should be 1');
  });

  test('should not trigger mouseleave after shape destroy', function () {
    var stage = addStage();
    var layer = new Konva.Layer();
    stage.add(layer);

    var rect = new Konva.Rect({
      width: 50,
      height: 50,
      fill: 'red',
    });
    layer.add(rect);

    layer.draw();

    var mouseout = 0;
    var mouseleave = 0;
    stage.on('mouseout', function () {
      mouseout += 1;
    });

    rect.on('mouseout', function () {
      mouseout += 1;
    });

    stage.on('mouseleave', function () {
      mouseleave += 1;
    });

    rect.on('mouseleave', function () {
      mouseleave += 1;
    });

    stage.simulateMouseMove({
      x: 10,
      y: 10,
    });

    rect.destroy();
    layer.draw();
    stage.simulateMouseMove({
      x: 20,
      y: 20,
    });
    assert.equal(mouseout, 0);
    assert.equal(mouseleave, 0);
  });

  test('should not trigger mouseenter on stage twice when we go to the shape directly', function () {
    var stage = addStage();
    var layer = new Konva.Layer();
    stage.add(layer);

    var rect = new Konva.Rect({
      width: 50,
      height: 50,
      fill: 'red',
    });
    layer.add(rect);

    layer.draw();

    var mouseenter = 0;
    stage.on('mouseenter', function () {
      mouseenter += 1;
    });

    var top = stage.content.getBoundingClientRect().top;
    var evt = {
      clientX: 10,
      clientY: 10 + top,
      button: 0,
    };

    stage._mouseenter(evt);

    stage.simulateMouseMove({
      x: 10,
      y: 10,
    });

    stage._mouseout(evt);

    assert.equal(mouseenter, 1, 'mouseenter should be 1');
  });

  test('should trigger mouse events if we set Konva.hitOnDragEnabled = true', function () {
    Konva.hitOnDragEnabled = true;
    var stage = addStage();
    var layer = new Konva.Layer();
    stage.add(layer);

    var rect = new Konva.Rect({
      width: 50,
      height: 50,
      fill: 'red',
      draggable: true,
    });
    layer.add(rect);

    layer.draw();

    var mousemove = 0;
    rect.on('mousemove', function () {
      mousemove += 1;
    });

    stage.simulateMouseDown({
      x: 10,
      y: 10,
    });

    stage.simulateMouseMove({
      x: 20,
      y: 20,
    });
    stage.simulateMouseMove({
      x: 30,
      y: 30,
    });
    stage.simulateMouseUp({
      x: 30,
      y: 30,
    });

    assert.equal(mousemove, 2, 'mousemove should be 2');
    Konva.hitOnDragEnabled = false;
  });

  test('test scaled with CSS stage', function () {
    var stage = addStage();

    stage.container().style.transform = 'scale(0.5)';
    stage.container().style.transformOrigin = 'left top';
    var layer = new Konva.Layer();
    stage.add(layer);

    var rect = new Konva.Rect({
      width: 50,
      height: 50,
      fill: 'red',
      draggable: true,
    });
    layer.add(rect);

    layer.draw();

    var clicks = 0;
    rect.on('click', function () {
      clicks += 1;
    });

    stage.simulateMouseDown({
      x: 40,
      y: 40,
    });

    stage.simulateMouseUp({
      x: 40,
      y: 40,
    });

    // should not register this click this click, because the stage is scaled
    assert.equal(clicks, 0, 'clicks not triggered');
    assert.deepEqual(stage.getPointerPosition(), { x: 80, y: 80 });

    // try touch too
    stage.simulateTouchStart({
      x: 30,
      y: 30,
    });
    stage.simulateTouchEnd({
      x: 30,
      y: 30,
    });
    assert.deepEqual(stage.getPointerPosition(), { x: 60, y: 60 });
  });
});