CODEWITHSUNDEEP
javascriptraphael
tapio.jaakkola
tapio.jaakkola

Reputation: 53

Invoking methods of a function-object given to a raphael object constructor as a callback function

My application has similar structure to the example below. I need interface to create canvases dynamically. As I create these raphael objects I give them canvasActions as parameter.

If I create new canvas-object with the createCanvas-method the object set to canvases-table is of type Raphael and seems I can't use the canvasActions assigned to it. So the problem is I can't use methods in interface returned by canvasActions-function.

What changes do I have to make in order to invoke methods assigned to a particular Raphael object?

var myApp = (function() {
    var canvasActions = function() {

        var actionInterface = function() {
            //returns interface object
        }();

        return actionInterface;
    }

    var myAppInterface = function {
        var canvases = [];
        var appInterface = {
            createCanvas: function(contextElementId, width, height) {
                 canvases[canvases.length] = Raphael(contextElementId, width, height, canvasActions);
            },
            getCanvas: function(index) {
                return canvases[index]; 
            }
        }
        return appInterface;
    }();

    return myAppInterface;

}());

Upvotes: 0

Views: 198

Answers (2)

Kevin Nelson
Kevin Nelson

Reputation: 7663

it looks like you're not having problems with having canvasActions() referring to the wrong instance, but that you're simply having problems calling canvasActions at all once you've placed it into the Raphael object. Is that correct?

I'm not at all familiar with Raphael. But I wanted to give you a better answer. However, when I look through the docs, I don't see a 4th parameter callback being used anywhere in Raphael constructors. Instead, I always see this:

var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);

If you are not able to use a callback defined by Raphael, then you could always add your own, like so (substituting paper with your indexed array):

var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
paper.performActions = canvasActions;

Then, you should be able to use:

myApp.getCanvas(0).performActions();

Upvotes: 0

Eliran Malka
Eliran Malka

Reputation: 16263

the callback parameter is just that - a callback method invoked once the document is ready. it is not meant to be referred and used otherwise.

if you wish to add functionality to the paper, use Raphael.fn to augment the built in functions of the Raphael object.

Example:

Raphael.fn.canvasActions = {
    move: function () {
        // ...
    },
    repaint: function () {
        // ...
    }
    // etc.
};

// ...

appInterface.getCanvas(5).canvasActions.repaint();

References:

Upvotes: 1

Related Questions