Uncaught TypeError: Cannot call method 'addToRedrawQueue' ..

Board index » YUI 3.x: » Using YUI 3.x Components

Page 1 of 1

[ 3 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

Stuart Grimshaw

Username: Stubbs
Joined: Sun Jun 10, 2012 6:36 am
Posts: 11
GitHub: Stubbs
Gists: Stubbs
IRC: Stubbs

Tags:

Uncaught TypeError: Cannot call method 'addToRedrawQueue' ..

Posted: Sun Jun 10, 2012 7:08 am

+0-

I've created a simple shape that I want to draw when a user presses the mouse button, when I'm getting the following error.

Quote:

Uncaught TypeError: Cannot call method 'addToRedrawQueue' of undefined

The code to draw the shape looks like this:

Code:

YUI().use('graphics', 'node', 'base', function(Y) {

    FC.PlayerIcon = Y.Base.create('playerIcon', Y.Shape, [], {
        _draw: function() {
            this.clear();
            this.moveTo(0,0);
            this.lineTo(5,5);
            this.moveTo(0,5);
            this.lineTo(5,0);
            this.end();
        }

    }, {
        // Static methods/properties
        ATTRS : Y.mix({
            stroke: {
                weight: 2
            },
            color: "#fff"
        }, Y.Shape.ATTRS)
    })
});

and the following to set up an event :

Code:

    Y.one('#canvas').on('click', function(e) {
        newThing = new FC.PlayerIcon({
            x: e.pageX,
            y: e.pageY
        });
    });

I've pasted the source for both files in full

here

Click here to see the revision history on this Gist.

Tripp Bridges

YUI Developer

Username: tripp
Joined: Wed Jan 07, 2009 1:54 pm
Posts: 440
GitHub: tripp
Gists: tripp

Tags:

Re: Uncaught TypeError: Cannot call method 'addToRedrawQueue

Posted: Sun Jun 10, 2012 3:35 pm

+1-

In the Graphics module, shapes are typically created through the addShape method of Graphic instance.
http://yuilibrary.com/yui/docs/graphics/#creating-shapes

That said, as of 3.5, I have added the ability to create shapes as standalone objects. It's tested but it has not been documented outside of some api documentation on a private method. I have filed a ticket to ensure this gets documented:
http://yuilibrary.com/projects/yui3/ticket/2532393

When creating standalone shapes, you need to pass a node reference to the graphic attribute. (under the hood, the shape will create a graphic instance rendered into the node and then add the shape instance.) I have updated your example to render the shape into the #canvas element.

Code:

    Y.one("#canvas").on("click", function(e) {
        var icon = new FC.PlayerIcon({
            x: e.pageX,
            y: e.pageY,
            graphic: e.currentTarget 
        });
    });

In your custom class, I am not sure if you are trying to override the stroke attribute to have a default weight of 2 and default color of #fff or if you are trying have a stroke with a default weight of 2 and fill with a default color of #fff. Below is updated code to accomplish either. In both cases, I have updated the mix method with merge set to true so that you only override what is specified. Additionally, based on your _draw method, I have the ATTRS extending the ATTRS for Path. Path elements size based on the drawing operations while Shape elements are sized explicitly by the width/height attributes.

stroke with default weight of 2 and default color of #fff

Code:

        // Static methods/properties
        ATTRS : Y.mix({
            stroke: {
                valueFn: function() {
                    return {
                        weight: 2,
                        dashstyle: "none",
                        color: "#fff",
                        opacity: 1.0
                    };
                }
            }
        }, Y.Path.ATTRS, false, false, null, 0, true)

stroke with default weight of 2 and fill with default color of #fff

Code:

        // Static methods/properties
        ATTRS : Y.mix({
            stroke: {
                valueFn: function() {
                    return {
                        weight: 2,
                        dashstyle: "none",
                        color: "#000",
                        opacity: 1.0
                    };
                }
            },
            fill: {
                valueFn: function() {
                    return {
                        color: "#fff",
                        type: "solid",
                        opacity: 1,
                        cx: 0.5,
                        cy: 0.5,
                        fx: 0.5,
                        fy: 0.5,
                        r: 0.5
                    };
                }
            }
        }, Y.Path.ATTRS, false, false, null, 0, true)

Thanks,
Tripp

Stuart Grimshaw

Username: Stubbs
Joined: Sun Jun 10, 2012 6:36 am
Posts: 11
GitHub: Stubbs
Gists: Stubbs
IRC: Stubbs

Re: Uncaught TypeError: Cannot call method 'addToRedrawQueue

Posted: Mon Jun 11, 2012 2:06 pm

+0-

Brilliant thanks!

Page 1 of 1

[ 3 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum