extjs-gpl/packages/charts/src/draw/sprite/Line.js

GPL licensed version of Sencha Ext JS

/**
 * A sprite that represents a line.
 *
 *     @example
 *     Ext.create({
 *        xtype: 'draw', 
 *        renderTo: document.body,
 *        width: 600,
 *        height: 400,
 *        sprites: [{
 *            type: 'line',
 *            fromX: 20,
 *            fromY: 20,
 *            toX: 120,
 *            toY: 120,
 *            strokeStyle: '#1F6D91',
 *            lineWidth: 3
 *        }]
 *     });
 */
Ext.define('Ext.draw.sprite.Line', {
    extend: 'Ext.draw.sprite.Sprite',
    alias: 'sprite.line',
    type: 'line',

    inheritableStatics: {
        def: {
            processors: {
                fromX: 'number',
                fromY: 'number',
                toX: 'number',
                toY: 'number'
            },

            defaults: {
                fromX: 0,
                fromY: 0,
                toX: 1,
                toY: 1,
                strokeStyle: 'black'
            },

            aliases: {
                x1: 'fromX',
                y1: 'fromY',
                x2: 'toX',
                y2: 'toY'
            }
        }
    },

    updateLineBBox: function (bbox, isTransform, x1, y1, x2, y2) {
        var attr = this.attr,
            matrix = attr.matrix,
            halfLineWidth = attr.lineWidth / 2,
            fromX, fromY, toX, toY,
            dx, dy,
            p;

        if (isTransform) {
            p = matrix.transformPoint([x1, y1]);
            x1 = p[0];
            y1 = p[1];

            p = matrix.transformPoint([x2, y2]);
            x2 = p[0];
            y2 = p[1];
        }

        fromX = Math.min(x1, x2);
        toX   = Math.max(x1, x2);

        fromY = Math.min(y1, y2);
        toY   = Math.max(y1, y2);

        var angle = Math.atan2(toX - fromX, toY - fromY),
            sin = Math.sin(angle),
            cos = Math.cos(angle),
            dx = halfLineWidth * cos,
            dy = halfLineWidth * sin;

        // Offset start and end points of the line by half its thickness,
        // while accounting for line's angle.
        fromX -= dx;
        fromY -= dy;
        toX += dx;
        toY += dy;

        bbox.x = fromX;
        bbox.y = fromY;
        bbox.width = toX - fromX;
        bbox.height = toY - fromY;
    },

    updatePlainBBox: function (plain) {
        var attr = this.attr;

        this.updateLineBBox(plain, false, attr.fromX, attr.fromY, attr.toX, attr.toY);
    },

    updateTransformedBBox: function (transform, plain) {
        var attr = this.attr;

        this.updateLineBBox(transform, true, attr.fromX, attr.fromY, attr.toX, attr.toY);
    },

    render: function (surface, ctx) {
        var attr = this.attr,
            matrix = this.attr.matrix;

        matrix.toContext(ctx);

        ctx.beginPath();
        ctx.moveTo(attr.fromX, attr.fromY);
        ctx.lineTo(attr.toX, attr.toY);
        ctx.stroke();

        //<debug>
        var debug = attr.debug || this.statics().debug || Ext.draw.sprite.Sprite.debug;
        if (debug) {
            // This assumes no part of the sprite is rendered after this call.
            // If it is, we need to re-apply transformations.
            // But the bounding box should always be rendered as is, untransformed.
            this.attr.inverseMatrix.toContext(ctx);
            debug.bbox && this.renderBBox(surface, ctx);
        }
        //</debug>
    }
});