konva/test/unit/DragAndDrop-test.js

suite('DragAndDrop', function() {

    // ======================================================
    test('test drag and drop properties and methods', 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: 'green',
                stroke: 'black',
                strokeWidth: 4,
                name: 'myCircle'
            });

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

        setTimeout(function() {

            layer.draw();

            // test defaults
            assert.equal(circle.draggable(), false);

            //change properties
            circle.setDraggable(true);


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

            layer.draw();

            showHit(layer);

            // test new properties
            assert.equal(circle.getDraggable(), true);

            done();

        }, 50);
    });

    // ======================================================
    test('multiple drag and drop sets with setDraggable()', 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'
        });

        circle.setDraggable(true);
        assert.equal(circle.getDraggable(), true);
        circle.setDraggable(true);
        assert.equal(circle.getDraggable(), true);
        circle.setDraggable(false);
        assert.equal(!circle.getDraggable(), true);

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

    // ======================================================
    test('right click is not for dragging', function() {
         var stage = addStage();
        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);

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

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

        assert(circle.isDragging(), 'dragging is ok');

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

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

        stage.simulateMouseMove({
            x: 311,
            y: 112,
            button: 2
        });

        assert(circle.isDragging() === false, 'no dragging with right click');

        stage.simulateMouseUp({
            x: 291,
            y: 112,
            button: 2
        });
    });

    // ======================================================
    test('while dragging do not draw hit', function() {
        var stage = addStage();

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

        var layer = new Konva.Layer();
        stage.add(layer);

        var dragLayer = new Konva.Layer();
        stage.add(dragLayer);

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

        dragLayer.add(circle);
        dragLayer.draw();

        var rect = new Konva.Rect({
            fill: 'green',
            stroke: 'black',
            strokeWidth: 4,
            name: 'myCircle',
            width : 50,
            height : 50,
            draggable: true
        });
        layer.add(rect);
        layer.draw();

        var shape = layer.getIntersection({
            x : 2,
            y : 2
        });

        assert.equal(shape, rect, 'rect is detected');

        stage.simulateMouseDown({
            x: stage.width() / 2,
            y: stage.height() / 2
        });


        stage.simulateMouseMove({
            x: stage.width() / 2 + 5,
            y: stage.height() / 2
        });

        // redraw layer. hit must be not touched for not dragging layer
        layer.draw();
        shape = layer.getIntersection({
            x : 2,
            y : 2
        });
        assert.equal(shape, rect, 'rect is still detected');

        assert(circle.isDragging(), 'dragging is ok');

        dragLayer.draw();
        shape = dragLayer.getIntersection({
            x : stage.width() / 2,
            y : stage.height() / 2
        });
        // as dragLayer under dragging we should not able to detect intersect
        assert.equal(!!shape, false, 'circle is not detected');


        stage.simulateMouseUp({
            x: 291,
            y: 112 + top
        });

    });

    // ======================================================
    test('it is possible to change layer while dragging', function() {
        var stage = addStage();

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

        var startDragLayer = new Konva.Layer();
        stage.add(startDragLayer);

        var endDragLayer = new Konva.Layer();
        stage.add(endDragLayer);

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

        startDragLayer.add(circle);
        startDragLayer.draw();

        var rect = new Konva.Rect({
            fill: 'green',
            stroke: 'black',
            strokeWidth: 4,
            name: 'myCircle',
            width : 50,
            height : 50,
            draggable: true
        });
        endDragLayer.add(rect);
        endDragLayer.draw();

        stage.simulateMouseDown({
            x: stage.width() / 2,
            y: stage.height() / 2
        });


        stage.simulateMouseMove({
            x: stage.width() / 2 + 5,
            y: stage.height() / 2
        });

        // change layer while dragging circle
        circle.moveTo(endDragLayer);
        // move rectange for test hit update
        rect.moveTo(startDragLayer);
        startDragLayer.draw();

        assert.equal(Konva.DD.anim.getLayers()[0], endDragLayer, 'drag layer should be switched');


        var shape = startDragLayer.getIntersection({
            x : 2,
            y : 2
        });
        assert.equal(shape, rect, 'rect is detected');

        assert(circle.isDragging(), 'dragging is ok');

        endDragLayer.draw();
        shape = endDragLayer.getIntersection({
            x : stage.width() / 2,
            y : stage.height() / 2
        });
        // as endDragLayer under dragging we should not able to detect intersect
        assert.equal(!!shape, false, 'circle is not detected');


        stage.simulateMouseUp({
            x: 291,
            y: 112 + top
        });

    });
});