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

    });

    // ======================================================
    test('removing parent of draggable node should not throw error', function() {
        var stage = addStage();
        var layer = new Konva.Layer();
        stage.add(layer);
        var circle = new Konva.Circle({
            x: 380,
            y: stage.getHeight() / 2,
            radius: 70,
            strokeWidth: 4,
            fill: 'red',
            stroke: 'black',
            draggable: true
        });

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

        circle.startDrag();
        try {
          layer.destroy();
          assert.equal(true, true, 'no error, that is very good');
        } catch (e) {
          assert.equal(true, false, 'error happened');
        }
    });

    test('update hit on stage drag end', function(done) {
        var stage = addStage();

        stage.draggable(true);

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

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

        layer.add(circle);
        layer.draw();

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



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

        setTimeout(function() {
            assert.equal(stage.isDragging(), true);


            stage.simulateMouseUp({
              x: stage.width() / 2 - 50,
              y: stage.height() / 2
            });

            var shape = layer.getIntersection({
              x: stage.width() / 2 + 5,
              y: stage.height() / 2
            });

            assert.equal(shape, circle);
            done();
        }, 50);

    });

    test('removing shape while drag and drop should no throw error', 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
        });

        circle.remove();

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


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

    test('destroying shape while drag and drop should no throw error', 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
        });

        circle.destroy();

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


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