Connector points in RaphaelJS

Essentially we commonly use not just x, y, width and height of elements, but usually nine other useful coordinates. Which is why I wrote getABox(), and this is the demo of its powers. Read more here: http://terryyoung.blogspot.com/2011/08/connector-points-in-raphaeljs.html

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<p>This is a prototype of connector points on shapes in RaphaelJS.</p>

<p>Mouse over, drag and just fool around.</p>

<br>

<div id="SVG_GETABOX_HOLDER_1" class="SVG_GETABOX_HOLDER"></div>

CSS

/***********************************************************************
Common styles
***********************************************************************/

.SVG_GETABOX_HOLDER {

-moz-border-radius:       10px;
-webkit-border-radius:    10px;
border:                   solid 1px #2b333c;
background-color:         #dcdfe4;
width:                    640px;
height:                   200px;

}

JavaScript

/**
 * @blog     http://terryyoung.blogspot.com/2011/08/connector-points-in-raphaeljs.html
 */


/**
 * Simplifies something like this:
 *
 * this.ox = this.type == 'rect' ? this.attr('x') : this.attr('cx');
 * this.oy = this.type == 'rect' ? this.attr('y') : this.attr('cy');
 *
 * to this:
 *
 * el.o();    // and better, it supports chaining
 *
 * @copyright   Terry Young <terryyounghk [at] gmail.com>
 * @license     WTFPL Version 2 ( http://en.wikipedia.org/wiki/WTFPL )
 */
Raphael.el.is = function (type) { return this.type == (''+type).toLowerCase(); };
Raphael.el.x = function () { return this.is('circle') ? this.attr('cx') : this.attr('x'); };
Raphael.el.y = function () { return this.is('circle') ? this.attr('cy') : this.attr('y'); };
Raphael.el.o = function () { this.ox = this.x(); this.oy = this.y(); return this; };


/**
 *
 * getABox() for RaphaelJS - getBBox() On Steroids
 * More routine, pre-calculated values that getBBox() doesn't provide
 *
 * @author      Terry Young <terryyounghk [at] gmail.com>
 * @license     WTFPL Version 2 ( http://en.wikipedia.org/wiki/WTFPL )
 *
 */
Raphael.el.getABox = function ()
{
    var b = this.getBBox(); // thanks, I'll take it from here...

    var o =
    {
        // we'd still return what the original getBBox() provides us with
        x:              b.x,
        y:              b.y,
        width:          b.width,
        height:         b.height,

        // now we can actually pre-calculate the following into properties that are more readible for humans
        // x coordinates have three points: left edge, centered, and right edge
        xLeft:          b.x,
        xCenter:        b.x + b.width / 2,
        xRight:         b.x + b.width,


        // y coordinates have three points: top edge, middle, and bottom edge
        yTop:           b.y,
        yMiddle:        b.y + b.height / 2,
        yBottom:        b.y + b.height
    };


    // now we can produce a 3x3 combination of the above to derive 9 x,y...