KineticJS - How to transition 2 shapes at once?

Question

Here is the code: http://jsfiddle.net/MTDpC/

function drawArrow(firstShape, lastShape){

        var group = new Kinetic.Group();
        group.previousShape = firstShape;
        group.nextShape = lastShape;

        var beginX = group.previousShape.getX() + group.previousShape.getChildren()[0].getWidth() / 2;
        var beginY = group.previousShape.getY() + group.previousShape.getChildren()[0].getHeight();
        var endX = group.nextShape.getX() + group.nextShape.getChildren()[0].getWidth() / 2;
        var endY = group.nextShape.getY() - 8;

        var linha = new Kinetic.Line({
            points: [ beginX, beginY, endX, endY],
            name: 'linha',
            stroke: '#555',
            strokeWidth: 4,
            lineCap: 'butt'
        });

        var seta = new Kinetic.RegularPolygon({
            x: endX,
            y: endY,
            sides: 3,
            radius: 4,
            fill: '#555',
            stroke: '#555',
            strokeWidth: 4,
            name: 'seta'
        });
        seta.rotateDeg(180);

        group.add(seta);
        group.add(linha);

        firstShape.arrow = group;
        lastShape.arrow = group;

        group.reposition = function(){
            var beginX = this.previousShape.getX() + this.previousShape.getChildren()[0].getWidth() / 2;
            var beginY = this.previousShape.getY() + this.previousShape.getChildren()[0].getHeight();
            var endX = this.nextShape.getX() + this.nextShape.getChildren()[0].getWidth() / 2;
            var endY = this.nextShape.getY() - 8;
            this.get('.linha')[0].transitionTo({
                points:[ beginX, beginY, endX, endY],
                duration: 0.0000001,
            });

            this.get('.seta')[0].transitionTo({
                x: endX,
                y: endY,
                duration: 0.0000001,
            });
        };

        return group;
    }

    function getProcess (processText, x, y, width) {

        var group = new Kinetic.Group();

        var complexText = new Kinetic.Text({
            text: processText + '\nX: ' + x + '\nY: ' + y,
            fontSize: 12,
            fontFamily: 'Calibri',
            fill: '#555',
            padding: 20,
            align: 'center',
            name: 'Texto-Processo'
        });

        var rect = new Kinetic.Rect({
            stroke: '#555',
            strokeWidth: 5,
            fill: '#ddd',
            width: complexText.getWidth(),
            height: complexText.getHeight(),
            shadowColor: 'black',
            shadowBlur: 10,
            shadowOffset: [10, 10],
            shadowOpacity: 0.2,
            cornerRadius: 10,
            name: 'Quadro-Processo'
        });

        group.add(rect);
        group.add(complexText);

        group.setDraggable(true);
        group.on('mouseover', function() {
            document.body.style.cursor = 'pointer';
        });
        group.on('mouseout', function() {
            document.body.style.cursor = 'default';
        });     

        group.on('dragmove', function(){
            group.getChildren()[1].setText(this.customText + "\nX: " + this.getX() + "\nY: " + this.getY());
            group.arrow.reposition();
            group.arrow.draw();
        });


        group.setX(x);
        group.setY(y);
        group.customText = processText;
        return group;
    }
var stage = new Kinetic.Stage({
        container: 'container',
        width: 800,
        height: 600,
        id: 'myCanvas'
    });

    var layer = new Kinetic.Layer();

    var processo = getProcess('Processo de Teste de canvas 1', (stage.getWidth() / 2) - 100,  10 , 100);
    processo.setId('canvas1');
    layer.add(processo);

    var processo2 = getProcess('Processo de Teste de canvas 2', (stage.getWidth() / 2) -100, processo.getY() + 300, processo.getX());
    layer.add(processo2);

    layer.add(drawArrow(processo, processo2));

    // add the layer to the stage
    stage.add(layer);

When one of the boxes are dragged, the arrow connecting them moves too. As the arrow was made using 2 shapes, I want to know if is there some way to use .transtionTo at the same time, because you can see some delay between the line and the triangle that forms the arrrow when you move the bottom box.

Answer 1

The problem is that the transitionTo function does not support transitioning points. Also, each time you move the object, you are creating a new transition object... which is extremely slow. You do not need transitions for this, transitions are only useful for animating things automatically when the user is not meant to control them.

Try this instead:

    this.get('.linha')[0].setPoints([beginX, beginY, endX, endY]);
    this.get('.seta')[0].setPosition(endX,endY);
    this.getLayer().draw();
    /* this.get('.linha')[0].transitionTo({ //cant transition points
        points: [beginX, beginY, endX, endY],
        duration: 0.0000001,
    }); 

    this.get('.seta')[0].transitionTo({ // lags because everytime you move, a new transition is created, no this would be extremely slow
        x: endX,
        y: endY,
        duration: 0.0000001,
    });
    */

http://jsfiddle.net/MTDpC/1/

works fast eh?