Kinetic JS: Is there a callback after adding layers to a stage?

Question

I've got a loop that I run from a JSON feed. Everything loads fine. Items are on the screen, but I want to run some code as soon as my loop is finished. I placed the code immediate after my loop (in this case a jQuery .map). It doesn't recognize that the loop has completed and that I'm finished adding items to the stage. If I throw a delay of 1 second, suddenly it recognizes that the items have been loaded to the stage.

Is there a callback that will tell me that the stage is ready or my items have been loaded?

I know there has to be a better way but this is all my burnt out brain has come up with.

$.map(jItem, function (jItem1, itemType1) {
    var thisItem = new WordDetails();
    thisItem.id = jItem1.id;
    thisItem.word = jItem1.word;
    thisItem.commentCount = jItem1.commentCount;
    thisItem.journalCount = jItem1.journalCount;
    thisItem.favorite = jItem1.favorite;

    oWords.Randoms[itemType1] = thisItem;

    //Kinetic Setup
    var group = new Kinetic.Group({
        draggable: true,
        width: 149, height: 170,
        x: 100 * itemType1,
        y: 50 * itemType1,
        id: 'word_' + thisItem.word,
        name: 'wordGroup'
    });
    layer = new Kinetic.Layer({ name: 'wordLayer' });

    var imageObj = new Image();
    imageObj.onload = function () {
        var _image = new Kinetic.Image({
            image: imageObj
        });

        var _text = new Kinetic.Text({
            y: 75,
            width: 149,
            text: thisItem.word,
            fontSize: 21,
            fontFamily: 'Arial',
            fontStyle: 'bold',
            fill: '#FFF',
            width: 149,
            align: 'center',
            shadowColor: 'black',
            shadowBlur: 3,
            shadowOffset: [2, 2],
            shadowOpacity: 0.8
        });

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

        group.on('dragmove touchmove', function (e) {

        });

        group.on('mouseover', function (e) {
            //verlicon($(this).attr('id'));
        });
    };
    imageObj.src = '/images/leaf_md.png';
});

**//This is the code that needs to run after the loop has completed.**
setTimeout(function () {
    var _children = stage.getChildren();
    var wordGroups = stage.get(".wordGroup");
    for (var i = 0; i < wordGroups.length; i++) {  // for each single shape
        for (var j = 0; j < wordGroups.length; j++) { //check each other shape
            if (i != j) { //skip if shape is the same
                if (checkCollide(wordGroups[i].getX(), wordGroups[i].getY(), wordGroups[j].getX(), wordGroups[j].getY(), wordGroups[j].getWidth(), wordGroups[j].getHeight()))
                    alert('top left corner collided');
            }
        }
    }
}, 1000);

Thanks for the help.

score 0 · Answer 1 · answered Nov 19 '13 at 23:16

Kinetic lets you fire custom events, so...

// after your loop code, fire a custom event

stage.fire("iamdoneloading");

// and respond by doing your time-sensitive code

stage.on("iamdoneloading",function(){

    var _children = stage.getChildren();

    ...  

}

Kinetic JS: Is there a callback after adding layers to a stage?

1 Answers1