add extjs 6.0.1 sources

[extjs.git] / extjs / packages / charts / src / draw / sprite / Path.js

/**\r
 * @class Ext.draw.sprite.Path\r
 * @extends Ext.draw.sprite.Sprite\r
 *\r
 * A sprite that represents a path.\r
 *\r
 *     @example\r
 *     Ext.create({\r
 *        xtype: 'draw', \r
 *        renderTo: document.body,\r
 *        width: 600,\r
 *        height: 400,\r
 *        sprites: [{\r
 *            type: 'path',\r
 *            path: 'M20,30 c0,-50 75,50 75,0 c0,-50 -75,50 -75,0',\r
 *            fillStyle: '#1F6D91'\r
 *        }]\r
 *     });\r
 */\r
Ext.define('Ext.draw.sprite.Path', {\r
    extend: 'Ext.draw.sprite.Sprite',\r
    requires: [\r
        'Ext.draw.Draw',\r
        'Ext.draw.Path'\r
    ],\r
    alias: [\r
        'sprite.path',\r
        'Ext.draw.Sprite'\r
    ],\r
    type: 'path',\r
    isPath: true,\r
\r
    inheritableStatics: {\r
        def: {\r
            processors: {\r
                /**\r
                 * @cfg {String} path The SVG based path string used by the sprite.\r
                 */\r
                path: function (n, o) {\r
                    if (!(n instanceof Ext.draw.Path)) {\r
                        n = new Ext.draw.Path(n);\r
                    }\r
                    return n;\r
                }\r
            },\r
            aliases: {\r
                d: 'path'\r
            },\r
            triggers: {\r
                path: 'bbox'\r
            },\r
            updaters: {\r
                path: function (attr) {\r
                    var path = attr.path;\r
                    if (!path || path.bindAttr !== attr) {\r
                        path = new Ext.draw.Path();\r
                        path.bindAttr = attr;\r
                        attr.path = path;\r
                    }\r
                    path.clear();\r
                    this.updatePath(path, attr);\r
                    this.scheduleUpdater(attr, 'bbox', ['path']);\r
                }\r
            }\r
        }\r
    },\r
\r
    updatePlainBBox: function (plain) {\r
        if (this.attr.path) {\r
            this.attr.path.getDimension(plain);\r
        }\r
    },\r
\r
    updateTransformedBBox: function (transform) {\r
        if (this.attr.path) {\r
            this.attr.path.getDimensionWithTransform(this.attr.matrix, transform);\r
        }\r
    },\r
\r
    render: function (surface, ctx) {\r
        var mat = this.attr.matrix,\r
            attr = this.attr;\r
\r
        if (!attr.path || attr.path.params.length === 0) {\r
            return;\r
        }\r
        mat.toContext(ctx);\r
        ctx.appendPath(attr.path);\r
        ctx.fillStroke(attr);\r
\r
        //<debug>\r
        var debug = attr.debug || this.statics().debug || Ext.draw.sprite.Sprite.debug;\r
        if (debug) {\r
            debug.bbox && this.renderBBox(surface, ctx);\r
            debug.xray && this.renderXRay(surface, ctx);\r
        }\r
        //</debug>\r
    },\r
\r
    //<debug>\r
    renderXRay: function (surface, ctx) {\r
        var attr = this.attr,\r
            mat = attr.matrix,\r
            imat = attr.inverseMatrix,\r
            path = attr.path,\r
            commands = path.commands,\r
            params = path.params,\r
            ln = commands.length,\r
            twoPi = Math.PI * 2,\r
            size = 2,\r
            i, j;\r
\r
        mat.toContext(ctx);\r
        ctx.beginPath();\r
        for (i = 0, j = 0; i < ln; i++) {\r
            switch (commands[i]) {\r
                case 'M':\r
                    ctx.moveTo(params[j] - size, params[j + 1] - size);\r
                    ctx.rect(params[j] - size, params[j + 1] - size, size * 2, size * 2);\r
                    j += 2;\r
                    break;\r
                case 'L':\r
                    ctx.moveTo(params[j] - size, params[j + 1] - size);\r
                    ctx.rect(params[j] - size, params[j + 1] - size, size * 2, size * 2);\r
                    j += 2;\r
                    break;\r
                case 'C':\r
                    ctx.moveTo(params[j] + size, params[j + 1]);\r
                    ctx.arc(params[j], params[j + 1], size, 0, twoPi, true);\r
                    j += 2;\r
                    ctx.moveTo(params[j] + size, params[j + 1]);\r
                    ctx.arc(params[j], params[j + 1], size, 0, twoPi, true);\r
                    j += 2;\r
                    ctx.moveTo(params[j] + size * 2, params[j + 1]);\r
                    ctx.rect(params[j] - size, params[j + 1] - size, size * 2, size * 2);\r
                    j += 2;\r
                    break;\r
                default:\r
            }\r
        }\r
        imat.toContext(ctx);\r
        ctx.strokeStyle = 'black';\r
        ctx.strokeOpacity = 1;\r
        ctx.lineWidth = 1;\r
        ctx.stroke();\r
\r
        mat.toContext(ctx);\r
        ctx.beginPath();\r
        for (i = 0, j = 0; i < ln; i++) {\r
            switch (commands[i]) {\r
                case 'M':\r
                    ctx.moveTo(params[j], params[j + 1]);\r
                    j += 2;\r
                    break;\r
                case 'L':\r
                    ctx.moveTo(params[j], params[j + 1]);\r
                    j += 2;\r
                    break;\r
                case 'C':\r
                    ctx.lineTo(params[j], params[j + 1]);\r
                    j += 2;\r
                    ctx.moveTo(params[j], params[j + 1]);\r
                    j += 2;\r
                    ctx.lineTo(params[j], params[j + 1]);\r
                    j += 2;\r
                    break;\r
                default:\r
            }\r
        }\r
        imat.toContext(ctx);\r
        ctx.lineWidth = 0.5;\r
        ctx.stroke();\r
    },\r
    //</debug>\r
\r
    /**\r
     * Update the path.\r
     * @param {Ext.draw.Path} path An empty path to draw on using path API.\r
     * @param {Object} attr The attribute object. Note: DO NOT use the `sprite.attr` instead of this\r
     * if you want to work with instancing.\r
     */\r
    updatePath: function (path, attr) {}\r
});