paper.js/test/tests/Interactions.js

/*
 * Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
 * http://paperjs.org/
 *
 * Copyright (c) 2011 - 2020, Jürg Lehni & Jonathan Puckey
 * http://juerglehni.com/ & https://puckey.studio/
 *
 * Distributed under the MIT license. See LICENSE file for details.
 *
 * All rights reserved.
 */

/**
 * These tests are focused on user interactions.
 * They trigger events and check callbacks.
 * Warning: when running tests locally from `gulp test:browser` command, don't
 * move your mouse over the window because that could perturbate tests
 * execution.
 */
QUnit.module('Interactions');

//
// Mouse
//
test('Item#onMouseDown()', function(assert) {
    var done = assert.async();
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.fillColor = 'red';
    var point = new Point(5, 5);
    item.onMouseDown = function(event) {
        equals(event.type, 'mousedown');
        equals(event.point, point);
        equals(event.target, item);
        equals(event.currentTarget, item);
        equals(event.delta, null);
        done();
    };
    triggerMouseEvent('mousedown', point);
});

test('Item#onMouseDown() with stroked item', function(assert) {
    var done = assert.async();
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.strokeColor = 'red';
    var point = new Point(0, 0);
    item.onMouseDown = function(event) {
        equals(event.type, 'mousedown');
        equals(event.point, point);
        equals(event.target, item);
        equals(event.currentTarget, item);
        equals(event.delta, null);
        done();
    };
    triggerMouseEvent('mousedown', point);
});

test('Item#onMouseDown() is not triggered when item is not filled', function(assert) {
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.onMouseDown = function(event) {
        throw 'this should not be called';
    };
    triggerMouseEvent('mousedown', new Point(5, 5));
    expect(0);
});

test('Item#onMouseDown() is not triggered when item is not visible', function(assert) {
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.fillColor = 'red';
    item.visible = false;
    item.onMouseDown = function(event) {
        throw 'this should not be called';
    };
    triggerMouseEvent('mousedown', new Point(5, 5));
    expect(0);
});

test('Item#onMouseDown() is not triggered when item is locked', function(assert) {
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.fillColor = 'red';
    item.locked = true;
    item.onMouseDown = function(event) {
        throw 'this should not be called';
    };
    triggerMouseEvent('mousedown', new Point(5, 5));
    expect(0);
});

test('Item#onMouseDown() is not triggered when another item is in front', function(assert) {
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.fillColor = 'red';
    var item2 = item.clone();
    item.onMouseDown = function(event) {
        throw 'this should not be called';
    };
    triggerMouseEvent('mousedown', new Point(5, 5));
    expect(0);
});

test('Item#onMouseDown() is not triggered if event target is document', function(assert) {
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.fillColor = 'red';
    item.onMouseDown = function(event) {
        throw 'this should not be called';
    };
    triggerMouseEvent('mousedown', new Point(5, 5), document);
    expect(0);
});

test('Item#onMouseMove()', function(assert) {
    var done = assert.async();
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.fillColor = 'red';
    var point = new Point(5, 5);
    item.onMouseMove = function(event) {
        equals(event.type, 'mousemove');
        equals(event.point, point);
        equals(event.target, item);
        equals(event.currentTarget, item);
        equals(event.delta, null);
        done();
    };
    triggerMouseEvent('mousemove', point);
});

test('Item#onMouseMove() is not re-triggered if point is the same', function(assert) {
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.fillColor = 'red';
    var point = new Point(5, 5);
    var counter = 0;
    item.onMouseMove = function(event) {
        equals(true, true);
    };
    triggerMouseEvent('mousemove', point);
    triggerMouseEvent('mousemove', point);
    expect(1);
});

test('Item#onMouseUp()', function(assert) {
    var done = assert.async();
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.fillColor = 'red';
    var point = new Point(5, 5);
    item.onMouseUp = function(event) {
        equals(event.type, 'mouseup');
        equals(event.point, point);
        equals(event.target, item);
        equals(event.currentTarget, item);
        equals(event.delta, new Point(0, 0));
        done();
    };
    triggerMouseEvent('mousedown', point);
    triggerMouseEvent('mouseup', point);
});

test('Item#onMouseUp() is only triggered after mouse down', function(assert) {
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.fillColor = 'red';
    item.onMouseUp = function(event) {
        throw 'this should not be called';
    };
    triggerMouseEvent('mouseup', new Point(5, 5));
    expect(0);
});

test('Item#onClick()', function(assert) {
    var done = assert.async();
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.fillColor = 'red';
    var point = new Point(5, 5);
    item.onClick = function(event) {
        equals(event.type, 'click');
        equals(event.point, point);
        equals(event.target, item);
        equals(event.currentTarget, item);
        equals(event.delta, new Point(0, 0));
        done();
    };
    triggerMouseEvent('mousedown', point);
    triggerMouseEvent('mouseup', point);
});

test('Item#onClick() is not triggered if up point is not on item', function(assert) {
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.fillColor = 'red';
    item.onClick = function(event) {
        throw 'this should not be called';
    };
    triggerMouseEvent('mousedown', new Point(5, 5));
    triggerMouseEvent('mouseup', new Point(15, 15));
    expect(0);
});

test('Item#onClick() is not triggered if down point is not on item', function(assert) {
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.fillColor = 'red';
    item.onClick = function(event) {
        throw 'this should not be called';
    };
    triggerMouseEvent('mousedown', new Point(15, 15));
    triggerMouseEvent('mouseup', new Point(5, 5));
    expect(0);
});

test('Item#onDoubleClick()', function(assert) {
    var done = assert.async();
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.fillColor = 'red';
    var point = new Point(5, 5);
    item.onDoubleClick = function(event) {
        equals(event.type, 'doubleclick');
        equals(event.point, point);
        equals(event.target, item);
        equals(event.currentTarget, item);
        equals(event.delta, new Point(0, 0));
        done();
    };
    triggerMouseEvent('mousedown', point);
    triggerMouseEvent('mouseup', point);
    triggerMouseEvent('mousedown', point);
    triggerMouseEvent('mouseup', point);
});

test('Item#onDoubleClick() is not triggered if both clicks are not on same item', function(assert) {
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.fillColor = 'red';
    var item2 = item.clone().translate(5);
    item.onDoubleClick = function(event) {
        throw 'this should not be called';
    };
    triggerMouseEvent('mousedown', new Point(5, 5));
    triggerMouseEvent('mouseup', new Point(5, 5));
    triggerMouseEvent('mousedown', new Point(6, 6));
    triggerMouseEvent('mouseup', new Point(6, 6));
    expect(0);
});

test('Item#onDoubleClick() is not triggered if time between both clicks is too long', function(assert) {
    var done = assert.async();
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.fillColor = 'red';
    var point = new Point(5, 5);
    item.onDoubleClick = function(event) {
        throw 'this should not be called';
    };
    triggerMouseEvent('mousedown', point);
    triggerMouseEvent('mouseup', point);
    setTimeout(function() {
        triggerMouseEvent('mousedown', point);
        triggerMouseEvent('mouseup', point);
        done();
    }, 301);
    expect(0);
});

test('Item#onMouseEnter()', function(assert) {
    var done = assert.async();
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.fillColor = 'red';
    var point = new Point(5, 5);
    item.onMouseEnter = function(event) {
        equals(event.type, 'mouseenter');
        equals(event.point, point);
        equals(event.target, item);
        equals(event.currentTarget, item);
        equals(event.delta, null);
        done();
    };
    triggerMouseEvent('mousemove', point);
});

test('Item#onMouseEnter() is only re-triggered after mouse leave', function(assert) {
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.fillColor = 'red';
    item.onMouseEnter = function(event) {
        equals(true, true);
    };
    // enter
    triggerMouseEvent('mousemove', new Point(5, 5));
    triggerMouseEvent('mousemove', new Point(6, 6));
    triggerMouseEvent('mousemove', new Point(7, 7));
    // leave
    triggerMouseEvent('mousemove', new Point(11, 11));
    // re-enter
    triggerMouseEvent('mousemove', new Point(10, 10));
    expect(2);
});

test('Item#onMouseLeave()', function(assert) {
    var done = assert.async();
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.fillColor = 'red';
    var point1 = new Point(5, 5);
    var point2 = new Point(15, 15);
    item.onMouseLeave = function(event) {
        equals(event.type, 'mouseleave');
        equals(event.point, point2);
        equals(event.target, item);
        equals(event.currentTarget, item);
        equals(event.delta, null);
        done();
    };
    triggerMouseEvent('mousemove', point1);
    triggerMouseEvent('mousemove', point2);
});

test('Item#onMouseDrag()', function(assert) {
    var done = assert.async();
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.fillColor = 'red';
    var point1 = new Point(5, 5);
    var point2 = new Point(15, 15);
    item.onMouseDrag = function(event) {
        equals(event.type, 'mousedrag');
        equals(event.point, point2);
        equals(event.target, item);
        equals(event.currentTarget, item);
        equals(event.delta, new Point(10, 10));
        done();
    };
    triggerMouseEvent('mousedown', point1);
    triggerMouseEvent('mousemove', point2);
});

test('Item#onMouseDrag() is not triggered after mouse up', function(assert) {
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.fillColor = 'red';
    item.onMouseDrag = function(event) {
        equals(true, true);
    };
    triggerMouseEvent('mousedown', new Point(5, 5));
    triggerMouseEvent('mousemove', new Point(6, 6));
    triggerMouseEvent('mouseup', new Point(7, 7));
    triggerMouseEvent('mousemove', new Point(8, 8));
    expect(1);
});

test('Item#onMouseDrag() is not triggered if mouse down was on another item', function(assert) {
    var item = new Path.Rectangle(new Point(0, 0), new Size(10));
    item.fillColor = 'red';
    var item2 = item.clone().translate(10);
    item2.onMouseDrag = function(event) {
        throw 'this should not be called';
    };
    triggerMouseEvent('mousedown', new Point(5, 5));
    triggerMouseEvent('mousemove', new Point(11, 11));
    expect(0);
});