In Kinetic.js, prototyping node doesn't effect all children?

Question

http://jsfiddle.net/VTK7K/

Kinetic.Node.prototype.test = function() {
    alert('worked');
};

var d = new Kinetic.Image({});
d.test();

I'm attempting to add a prototypal method to Kinetic.Node so that it will be available to all objects that extend it, this seems to not work with some objects, and does work for others.

Am I doing something wrong?

Answer 1

Problem is that all methods are copied during creation of the Kinetic objects, and then the connection seems forgotten:

// v4.3.1, l. 54
Kinetic.Global.extend(Kinetic.SceneCanvas, Kinetic.Canvas);

// v4.3.1, l. 785
extend: function(c1, c2) {
    for(var key in c2.prototype) {
        if(!( key in c1.prototype)) {
            c1.prototype[key] = c2.prototype[key];
        }
    }
},

One possibility is to use KineticJS's own extension mechanism to copy additional prototype entries to the ctor functions inside the Kinetic hash:

var KineticMixin = function() {};
KineticMixin.prototype = {
    doSomething : function () { console.log("yo-ho-ho"); }
};

for(var key in Kinetic) {
    if(Kinetic.Type._isFunction(Kinetic[key])) {
        Kinetic.Global.extend(Kinetic[key], KineticMixin);
    }
}

var d = new Kinetic.Image({});
d.doSomething();

If the ctor function to extend already has an entry with that name, it'l be ignored. So it might be a good idea to copy and modify the extend function to account for that. And just running over all keys in the Kinetic object seems like something not to do. Perhaps being explicit there is a better way.

Answer 2

Prototypes are declared when object is defined. When it is instantiated, it does nothing related to prototypes in KineticJS, afaik.

To redefine the prototypes of objects, you can run the following again to add additional prototype of Kinetic.Node.

Kinetic.Global.extend(Kinetic.Container, Kinetic.Node);
Kinetic.Global.extend(Kinetic.Shape, Kinetic.Node);
Kinetic.Global.extend(Kinetic.Group, Kinetic.Container);
Kinetic.Global.extend(Kinetic.Layer, Kinetic.Container);
Kinetic.Global.extend(Kinetic.Stage, Kinetic.Container);
Kinetic.Global.extend(Kinetic.Circle, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Ellipse, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Image, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Line, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Path, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Polygon, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Rect, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.RegularPolygon, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Sprite, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Star, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Text, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.TextPath, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Wedge, Kinetic.Shape);