# Yahoo! UI Library

### charts 3.3.0

Yahoo! UI Library > charts > graphics-canvas.js (source view)
Search:
Filters Show Private Show Protected Show Deprecated

    /**
     * CanvasGraphics is a fallback drawing api used for basic drawing operations when SVG is not available.
     *
     * @class CanvasGraphics
     * @constructor
     */
    Y.CanvasGraphic = Y.Base.create("graphic",  Y.CanvasDrawingUtil, [], {
        autoSize: true,

        /**
         * Sets the size of the graphics object.
         *
         * @method setSize
         * @param w {Number} width to set for the instance.
         * @param h {Number} height to set for the instance.
         */
        setSize: function(w, h) {
            if(this.autoSize)
            {
                if(w > this.node.getAttribute("width"))
                {
                    this.node.style.width = w + "px";
                    this._canvas.style.width = w + "px";
                    this._canvas.width = w;
                    this.node.setAttribute("width", w);
                }
                if(h > this.node.getAttribute("height"))
                {
                    this.node.style.height = h + "px";
                    this._canvas.style.height = h + "px";
                    this._canvas.height = h;
                    this.node.setAttribute("height", h);
                }
            }
        },

        /**
         * Updates the size of the graphics object
         *
         * @method _trackSize
         * @param {Number} w width
         * @param {Number} h height
         * @private
         */
        _trackSize: function(w, h) {
            if (w > this._width) {
                this._width = w;
            }
            if (h > this._height) {
                this._height = h;
            }
            this.setSize(w, h);
        },

        /**
         * Sets the positon of the graphics object.
         *
         * @method setPosition
         * @param {Number} x x-coordinate for the object.
         * @param {Number} y y-coordinate for the object.
         */
        setPosition: function(x, y)
        {
            this.node.style.left = x + "px";
            this.node.style.top = y + "px";
        },

        /**
         * Adds the graphics node to the dom.
         *
         * @method render
         * @param {HTMLElement} parentNode node in which to render the graphics node into.
         */
        render: function(node) {
            node = node || Y.config.doc.body;
            this.node = document.createElement("div");
            this.node.style.width = node.offsetWidth + "px";
            this.node.style.height = node.offsetHeight + "px";
            this.node.style.display = "block";
            this.node.style.position = "absolute";
            this.node.style.left = node.getStyle("left");
            this.node.style.top = node.getStyle("top");
            this.node.style.pointerEvents = "none";
            node.appendChild(this.node);
            this.node.appendChild(this._canvas);
            this._canvas.width = node.offsetWidth > 0 ? node.offsetWidth : 100;
            this._canvas.height = node.offsetHeight > 0 ? node.offsetHeight : 100;
            this._canvas.style.position = "absolute";

            return this;
        },

        /**
         * Shows and and hides a the graphic instance.
         *
         * @method toggleVisible
         * @param val {Boolean} indicates whether the instance should be visible.
         */
        toggleVisible: function(val)
        {
            this.node.style.visibility = val ? "visible" : "hidden";
        },

        /**
         * Creates a graphic node
         *
         * @method _createGraphicNode
         * @param {String} type node type to create
         * @param {String} pe specified pointer-events value
         * @return HTMLElement
         * @private
         */
        _createGraphicNode: function(pe)
        {
            var node = Y.config.doc.createElement('canvas');
            node.style.pointerEvents = pe || "none";
            if(!this._graphicsList)
            {
                this._graphicsList = [];
            }
            this._graphicsList.push(node);
            return node;
        },

        /**
         * Removes all nodes.
         *
         * @method destroy
         */
        destroy: function()
        {
            this._removeChildren(this.node);
            if(this.node && this.node.parentNode)
            {
                this.node.parentNode.removeChild(this.node);
            }
        },

        /**
         * Removes all child nodes.
         *
         * @method _removeChildren
         * @param {HTMLElement} node
         * @private
         */
        _removeChildren: function(node)
        {
            if(node.hasChildNodes())
            {
                var child;
                while(node.firstChild)
                {
                    child = node.firstChild;
                    this._removeChildren(child);
                    node.removeChild(child);
                }
            }
        },

        /**
         * @private
         * Reference to the node for the graphics object
         */
        node: null
    });

    if(DRAWINGAPI == "canvas")
    {
        Y.Graphic = Y.CanvasGraphic;
    }

Copyright © 2011 Yahoo! Inc. All rights reserved.