From 0eb57f97cd76fd869e1363ce889407ad5575d566 Mon Sep 17 00:00:00 2001 From: Tim Redfern Date: Tue, 3 Jan 2012 11:33:27 +0000 Subject: first commit --- g.raphael.js | 1657 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1657 insertions(+) create mode 100644 g.raphael.js (limited to 'g.raphael.js') diff --git a/g.raphael.js b/g.raphael.js new file mode 100644 index 0000000..a017899 --- /dev/null +++ b/g.raphael.js @@ -0,0 +1,1657 @@ + + + + + + + + + g.raphael.js at master from DmitryBaranovskiy/g.raphael - GitHub + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + +
+

+ DmitryBaranovskiy / + g.raphael +

+ + + + + + +
+ + + + + + + + + + + +
+ + + + + +
+ + + + + + + + +
+ + + + + + + +

Latest commit to the master branch

+ +
+

+ Adding minified files + +

+
+ commit 1828dc5665 + +
+ + rzurad + authored + +
+
+
+ + + +
+ +
+ g.raphael / g.raphael.js + + + + + + + + + + + + + +
+ +
+
+ + +
+
+
+
+ Txt + 100644 + 888 lines (782 sloc) + 28.174 kb +
+ +
+
+ + + + + +
+ 
1
+2
+3
+4
+5
+6
+7
+8
+9
+10
+11
+12
+13
+14
+15
+16
+17
+18
+19
+20
+21
+22
+23
+24
+25
+26
+27
+28
+29
+30
+31
+32
+33
+34
+35
+36
+37
+38
+39
+40
+41
+42
+43
+44
+45
+46
+47
+48
+49
+50
+51
+52
+53
+54
+55
+56
+57
+58
+59
+60
+61
+62
+63
+64
+65
+66
+67
+68
+69
+70
+71
+72
+73
+74
+75
+76
+77
+78
+79
+80
+81
+82
+83
+84
+85
+86
+87
+88
+89
+90
+91
+92
+93
+94
+95
+96
+97
+98
+99
+100
+101
+102
+103
+104
+105
+106
+107
+108
+109
+110
+111
+112
+113
+114
+115
+116
+117
+118
+119
+120
+121
+122
+123
+124
+125
+126
+127
+128
+129
+130
+131
+132
+133
+134
+135
+136
+137
+138
+139
+140
+141
+142
+143
+144
+145
+146
+147
+148
+149
+150
+151
+152
+153
+154
+155
+156
+157
+158
+159
+160
+161
+162
+163
+164
+165
+166
+167
+168
+169
+170
+171
+172
+173
+174
+175
+176
+177
+178
+179
+180
+181
+182
+183
+184
+185
+186
+187
+188
+189
+190
+191
+192
+193
+194
+195
+196
+197
+198
+199
+200
+201
+202
+203
+204
+205
+206
+207
+208
+209
+210
+211
+212
+213
+214
+215
+216
+217
+218
+219
+220
+221
+222
+223
+224
+225
+226
+227
+228
+229
+230
+231
+232
+233
+234
+235
+236
+237
+238
+239
+240
+241
+242
+243
+244
+245
+246
+247
+248
+249
+250
+251
+252
+253
+254
+255
+256
+257
+258
+259
+260
+261
+262
+263
+264
+265
+266
+267
+268
+269
+270
+271
+272
+273
+274
+275
+276
+277
+278
+279
+280
+281
+282
+283
+284
+285
+286
+287
+288
+289
+290
+291
+292
+293
+294
+295
+296
+297
+298
+299
+300
+301
+302
+303
+304
+305
+306
+307
+308
+309
+310
+311
+312
+313
+314
+315
+316
+317
+318
+319
+320
+321
+322
+323
+324
+325
+326
+327
+328
+329
+330
+331
+332
+333
+334
+335
+336
+337
+338
+339
+340
+341
+342
+343
+344
+345
+346
+347
+348
+349
+350
+351
+352
+353
+354
+355
+356
+357
+358
+359
+360
+361
+362
+363
+364
+365
+366
+367
+368
+369
+370
+371
+372
+373
+374
+375
+376
+377
+378
+379
+380
+381
+382
+383
+384
+385
+386
+387
+388
+389
+390
+391
+392
+393
+394
+395
+396
+397
+398
+399
+400
+401
+402
+403
+404
+405
+406
+407
+408
+409
+410
+411
+412
+413
+414
+415
+416
+417
+418
+419
+420
+421
+422
+423
+424
+425
+426
+427
+428
+429
+430
+431
+432
+433
+434
+435
+436
+437
+438
+439
+440
+441
+442
+443
+444
+445
+446
+447
+448
+449
+450
+451
+452
+453
+454
+455
+456
+457
+458
+459
+460
+461
+462
+463
+464
+465
+466
+467
+468
+469
+470
+471
+472
+473
+474
+475
+476
+477
+478
+479
+480
+481
+482
+483
+484
+485
+486
+487
+488
+489
+490
+491
+492
+493
+494
+495
+496
+497
+498
+499
+500
+501
+502
+503
+504
+505
+506
+507
+508
+509
+510
+511
+512
+513
+514
+515
+516
+517
+518
+519
+520
+521
+522
+523
+524
+525
+526
+527
+528
+529
+530
+531
+532
+533
+534
+535
+536
+537
+538
+539
+540
+541
+542
+543
+544
+545
+546
+547
+548
+549
+550
+551
+552
+553
+554
+555
+556
+557
+558
+559
+560
+561
+562
+563
+564
+565
+566
+567
+568
+569
+570
+571
+572
+573
+574
+575
+576
+577
+578
+579
+580
+581
+582
+583
+584
+585
+586
+587
+588
+589
+590
+591
+592
+593
+594
+595
+596
+597
+598
+599
+600
+601
+602
+603
+604
+605
+606
+607
+608
+609
+610
+611
+612
+613
+614
+615
+616
+617
+618
+619
+620
+621
+622
+623
+624
+625
+626
+627
+628
+629
+630
+631
+632
+633
+634
+635
+636
+637
+638
+639
+640
+641
+642
+643
+644
+645
+646
+647
+648
+649
+650
+651
+652
+653
+654
+655
+656
+657
+658
+659
+660
+661
+662
+663
+664
+665
+666
+667
+668
+669
+670
+671
+672
+673
+674
+675
+676
+677
+678
+679
+680
+681
+682
+683
+684
+685
+686
+687
+688
+689
+690
+691
+692
+693
+694
+695
+696
+697
+698
+699
+700
+701
+702
+703
+704
+705
+706
+707
+708
+709
+710
+711
+712
+713
+714
+715
+716
+717
+718
+719
+720
+721
+722
+723
+724
+725
+726
+727
+728
+729
+730
+731
+732
+733
+734
+735
+736
+737
+738
+739
+740
+741
+742
+743
+744
+745
+746
+747
+748
+749
+750
+751
+752
+753
+754
+755
+756
+757
+758
+759
+760
+761
+762
+763
+764
+765
+766
+767
+768
+769
+770
+771
+772
+773
+774
+775
+776
+777
+778
+779
+780
+781
+782
+783
+784
+785
+786
+787
+788
+789
+790
+791
+792
+793
+794
+795
+796
+797
+798
+799
+800
+801
+802
+803
+804
+805
+806
+807
+808
+809
+810
+811
+812
+813
+814
+815
+816
+817
+818
+819
+820
+821
+822
+823
+824
+825
+826
+827
+828
+829
+830
+831
+832
+833
+834
+835
+836
+837
+838
+839
+840
+841
+842
+843
+844
+845
+846
+847
+848
+849
+850
+851
+852
+853
+854
+855
+856
+857
+858
+859
+860
+861
+862
+863
+864
+865
+866
+867
+868
+869
+870
+871
+872
+873
+874
+875
+876
+877
+878
+879
+880
+881
+882
+883
+884
+885
+886
+887
+888
+
+ 		+ 
/*!
 * g.Raphael 0.5 - Charting library, based on Raphaël
 *
 * Copyright (c) 2009 Dmitry Baranovskiy (http://g.raphaeljs.com)
 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
 */

/*
 * Tooltips on Element prototype
 */
/*\
 * Element.popup
 [ method ]
 **
 * Puts the context Element in a 'popup' tooltip. Can also be used on sets.
 **
 > Parameters
 **
 - dir (string) location of Element relative to the tail: `'down'`, `'left'`, `'up'` [default], or `'right'`.
 - size (number) amount of bevel/padding around the Element, as well as half the width and height of the tail [default: `5`]
 - x (number) x coordinate of the popup's tail [default: Element's `x` or `cx`]
 - y (number) y coordinate of the popup's tail [default: Element's `y` or `cy`]
 **
 = (object) path element of the popup
 > Usage
 | paper.circle(50, 50, 5).attr({
 |     stroke: "#fff",
 |     fill: "0-#c9de96-#8ab66b:44-#398235"
 | }).popup();
 \*/
Raphael.el.popup = function (dir, size, x, y) {
    var paper = this.paper || this[0].paper,
        bb, xy, center, cw, ch;

    if (!paper) return;

    switch (this.type) {
        case 'text':
        case 'circle':
        case 'ellipse': center = true; break;
        default: center = false;
    }

    dir = dir == null ? 'up' : dir;
    size = size || 5;
    bb = this.getBBox();

    x = typeof x == 'number' ? x : (center ? bb.x + bb.width / 2 : bb.x);
    y = typeof y == 'number' ? y : (center ? bb.y + bb.height / 2 : bb.y);
    cw = Math.max(bb.width / 2 - size, 0);
    ch = Math.max(bb.height / 2 - size, 0);

    this.translate(x - bb.x - (center ? bb.width / 2 : 0), y - bb.y - (center ? bb.height / 2 : 0));
    bb = this.getBBox();

    var paths = {
        up: [
            'M', x, y,
            'l', -size, -size, -cw, 0,
            'a', size, size, 0, 0, 1, -size, -size,
            'l', 0, -bb.height,
            'a', size, size, 0, 0, 1, size, -size,
            'l', size * 2 + cw * 2, 0,
            'a', size, size, 0, 0, 1, size, size,
            'l', 0, bb.height,
            'a', size, size, 0, 0, 1, -size, size,
            'l', -cw, 0,
            'z'
        ].join(','),
        down: [
            'M', x, y,
            'l', size, size, cw, 0,
            'a', size, size, 0, 0, 1, size, size,
            'l', 0, bb.height,
            'a', size, size, 0, 0, 1, -size, size,
            'l', -(size * 2 + cw * 2), 0,
            'a', size, size, 0, 0, 1, -size, -size,
            'l', 0, -bb.height,
            'a', size, size, 0, 0, 1, size, -size,
            'l', cw, 0,
            'z'
        ].join(','),
        left: [
            'M', x, y,
            'l', -size, size, 0, ch,
            'a', size, size, 0, 0, 1, -size, size,
            'l', -bb.width, 0,
            'a', size, size, 0, 0, 1, -size, -size,
            'l', 0, -(size * 2 + ch * 2),
            'a', size, size, 0, 0, 1, size, -size,
            'l', bb.width, 0,
            'a', size, size, 0, 0, 1, size, size,
            'l', 0, ch,
            'z'
        ].join(','),
        right: [
            'M', x, y,
            'l', size, -size, 0, -ch,
            'a', size, size, 0, 0, 1, size, -size,
            'l', bb.width, 0,
            'a', size, size, 0, 0, 1, size, size,
            'l', 0, size * 2 + ch * 2,
            'a', size, size, 0, 0, 1, -size, size,
            'l', -bb.width, 0,
            'a', size, size, 0, 0, 1, -size, -size,
            'l', 0, -ch,
            'z'
        ].join(',')
    };

    xy = {
        up: { x: -!center * (bb.width / 2), y: -size * 2 - (center ? bb.height / 2 : bb.height) },
        down: { x: -!center * (bb.width / 2), y: size * 2 + (center ? bb.height / 2 : bb.height) },
        left: { x: -size * 2 - (center ? bb.width / 2 : bb.width), y: -!center * (bb.height / 2) },
        right: { x: size * 2 + (center ? bb.width / 2 : bb.width), y: -!center * (bb.height / 2) }
    }[dir];

    this.translate(xy.x, xy.y);
    return paper.path(paths[dir]).attr({ fill: "#000", stroke: "none" }).insertBefore(this.node ? this : this[0]);
};

/*\
 * Element.tag
 [ method ]
 **
 * Puts the context Element in a 'tag' tooltip. Can also be used on sets.
 **
 > Parameters
 **
 - angle (number) angle of orientation in degrees [default: `0`]
 - r (number) radius of the loop [default: `5`]
 - x (number) x coordinate of the center of the tag loop [default: Element's `x` or `cx`]
 - y (number) y coordinate of the center of the tag loop [default: Element's `x` or `cx`]
 **
 = (object) path element of the tag
 > Usage
 | paper.circle(50, 50, 15).attr({
 |     stroke: "#fff",
 |     fill: "0-#c9de96-#8ab66b:44-#398235"
 | }).tag(60);
 \*/
Raphael.el.tag = function (angle, r, x, y) {
    var d = 3,
        paper = this.paper || this[0].paper;

    if (!paper) return;

    var p = paper.path().attr({ fill: '#000', stroke: '#000' }),
        bb = this.getBBox(),
        dx, R, center, tmp;

    switch (this.type) {
        case 'text':
        case 'circle':
        case 'ellipse': center = true; break;
        default: center = false;
    }

    angle = angle || 0;
    x = typeof x == 'number' ? x : (center ? bb.x + bb.width / 2 : bb.x);
    y = typeof y == 'number' ? y : (center ? bb.y + bb.height / 2 : bb.y);
    r = r == null ? 5 : r;
    R = .5522 * r;

    if (bb.height >= r * 2) {
        p.attr({
            path: [
                "M", x, y + r,
                "a", r, r, 0, 1, 1, 0, -r * 2, r, r, 0, 1, 1, 0, r * 2,
                "m", 0, -r * 2 -d,
                "a", r + d, r + d, 0, 1, 0, 0, (r + d) * 2,
                "L", x + r + d, y + bb.height / 2 + d,
                "l", bb.width + 2 * d, 0, 0, -bb.height - 2 * d, -bb.width - 2 * d, 0,
                "L", x, y - r - d
            ].join(",")
        });
    } else {
        dx = Math.sqrt(Math.pow(r + d, 2) - Math.pow(bb.height / 2 + d, 2));
        p.attr({
            path: [
                "M", x, y + r,
                "c", -R, 0, -r, R - r, -r, -r, 0, -R, r - R, -r, r, -r, R, 0, r, r - R, r, r, 0, R, R - r, r, -r, r,
                "M", x + dx, y - bb.height / 2 - d,
                "a", r + d, r + d, 0, 1, 0, 0, bb.height + 2 * d,
                "l", r + d - dx + bb.width + 2 * d, 0, 0, -bb.height - 2 * d,
                "L", x + dx, y - bb.height / 2 - d
            ].join(",")
        });
    }

    angle = 360 - angle;
    p.rotate(angle, x, y);

    if (this.attrs) {
        //elements
        this.attr(this.attrs.x ? 'x' : 'cx', x + r + d + (!center ? this.type == 'text' ? bb.width : 0 : bb.width / 2)).attr('y', center ? y : y - bb.height / 2);
        this.rotate(angle, x, y);
        angle > 90 && angle < 270 && this.attr(this.attrs.x ? 'x' : 'cx', x - r - d - (!center ? bb.width : bb.width / 2)).rotate(180, x, y);
    } else {
        //sets
        if (angle > 90 && angle < 270) {
            this.translate(x - bb.x - bb.width - r - d, y - bb.y - bb.height / 2);
            this.rotate(angle - 180, bb.x + bb.width + r + d, bb.y + bb.height / 2);
        } else {
            this.translate(x - bb.x + r + d, y - bb.y - bb.height / 2);
            this.rotate(angle, bb.x - r - d, bb.y + bb.height / 2); 
        }
    }

    return p.insertBefore(this.node ? this : this[0]);
};

/*\
 * Element.drop
 [ method ]
 **
 * Puts the context Element in a 'drop' tooltip. Can also be used on sets.
 **
 > Parameters
 **
 - angle (number) angle of orientation in degrees [default: `0`]
 - x (number) x coordinate of the drop's point [default: Element's `x` or `cx`]
 - y (number) y coordinate of the drop's point [default: Element's `x` or `cx`]
 **
 = (object) path element of the drop
 > Usage
 | paper.circle(50, 50, 8).attr({
 |     stroke: "#fff",
 |     fill: "0-#c9de96-#8ab66b:44-#398235"
 | }).drop(60);
 \*/
Raphael.el.drop = function (angle, x, y) {
    var bb = this.getBBox(),
        paper = this.paper || this[0].paper,
        center, size, p, dx, dy;

    if (!paper) return;

    switch (this.type) {
        case 'text':
        case 'circle':
        case 'ellipse': center = true; break;
        default: center = false;
    }

    angle = angle || 0;

    x = typeof x == 'number' ? x : (center ? bb.x + bb.width / 2 : bb.x);
    y = typeof y == 'number' ? y : (center ? bb.y + bb.height / 2 : bb.y);
    size = Math.max(bb.width, bb.height) + Math.min(bb.width, bb.height);
    p = paper.path([
        "M", x, y,
        "l", size, 0,
        "A", size * .4, size * .4, 0, 1, 0, x + size * .7, y - size * .7,
        "z"
    ]).attr({fill: "#000", stroke: "none"}).rotate(22.5 - angle, x, y);

    angle = (angle + 90) * Math.PI / 180;
    dx = (x + size * Math.sin(angle)) - (center ? 0 : bb.width / 2);
    dy = (y + size * Math.cos(angle)) - (center ? 0 : bb.height / 2);

    this.attrs ?
        this.attr(this.attrs.x ? 'x' : 'cx', dx).attr(this.attrs.y ? 'y' : 'cy', dy) :
        this.translate(dx - bb.x, dy - bb.y);

    return p.insertBefore(this.node ? this : this[0]);
};

/*\
 * Element.flag
 [ method ]
 **
 * Puts the context Element in a 'flag' tooltip. Can also be used on sets.
 **
 > Parameters
 **
 - angle (number) angle of orientation in degrees [default: `0`]
 - x (number) x coordinate of the flag's point [default: Element's `x` or `cx`]
 - y (number) y coordinate of the flag's point [default: Element's `x` or `cx`]
 **
 = (object) path element of the flag
 > Usage
 | paper.circle(50, 50, 10).attr({
 |     stroke: "#fff",
 |     fill: "0-#c9de96-#8ab66b:44-#398235"
 | }).flag(60);
 \*/
Raphael.el.flag = function (angle, x, y) {
    var d = 3,
        paper = this.paper || this[0].paper;

    if (!paper) return;

    var p = paper.path().attr({ fill: '#000', stroke: '#000' }),
        bb = this.getBBox(),
        h = bb.height / 2,
        center;

    switch (this.type) {
        case 'text':
        case 'circle':
        case 'ellipse': center = true; break;
        default: center = false;
    }

    angle = angle || 0;
    x = typeof x == 'number' ? x : (center ? bb.x + bb.width / 2 : bb.x);
    y = typeof y == 'number' ? y : (center ? bb.y + bb.height / 2: bb.y);

    p.attr({
        path: [
            "M", x, y,
            "l", h + d, -h - d, bb.width + 2 * d, 0, 0, bb.height + 2 * d, -bb.width - 2 * d, 0,
            "z"
        ].join(",")
    });

    angle = 360 - angle;
    p.rotate(angle, x, y);

    if (this.attrs) {
        //elements
        this.attr(this.attrs.x ? 'x' : 'cx', x + h + d + (!center ? this.type == 'text' ? bb.width : 0 : bb.width / 2)).attr('y', center ? y : y - bb.height / 2);
        this.rotate(angle, x, y);
        angle > 90 && angle < 270 && this.attr(this.attrs.x ? 'x' : 'cx', x - h - d - (!center ? bb.width : bb.width / 2)).rotate(180, x, y);
    } else {
        //sets
        if (angle > 90 && angle < 270) {
            this.translate(x - bb.x - bb.width - h - d, y - bb.y - bb.height / 2);
            this.rotate(angle - 180, bb.x + bb.width + h + d, bb.y + bb.height / 2);
        } else {
            this.translate(x - bb.x + h + d, y - bb.y - bb.height / 2);
            this.rotate(angle, bb.x - h - d, bb.y + bb.height / 2);
        }
    }

    return p.insertBefore(this.node ? this : this[0]);
};

/*\
 * Element.label
 [ method ]
 **
 * Puts the context Element in a 'label' tooltip. Can also be used on sets.
 **
 = (object) path element of the label.
 > Usage
 | paper.circle(50, 50, 10).attr({
 |     stroke: "#fff",
 |     fill: "0-#c9de96-#8ab66b:44-#398235"
 | }).label();
 \*/
Raphael.el.label = function () {
    var bb = this.getBBox(),
        paper = this.paper || this[0].paper,
        r = Math.min(20, bb.width + 10, bb.height + 10) / 2;

    if (!paper) return;

    return paper.rect(bb.x - r / 2, bb.y - r / 2, bb.width + r, bb.height + r, r).attr({ stroke: 'none', fill: '#000' }).insertBefore(this.node ? this : this[0]);
};

/*\
 * Element.blob
 [ method ]
 **
 * Puts the context Element in a 'blob' tooltip. Can also be used on sets.
 **
 > Parameters
 **
 - angle (number) angle of orientation in degrees [default: `0`]
 - x (number) x coordinate of the blob's tail [default: Element's `x` or `cx`]
 - y (number) y coordinate of the blob's tail [default: Element's `x` or `cx`]
 **
 = (object) path element of the blob
 > Usage
 | paper.circle(50, 50, 8).attr({
 |     stroke: "#fff",
 |     fill: "0-#c9de96-#8ab66b:44-#398235"
 | }).blob(60);
 \*/
Raphael.el.blob = function (angle, x, y) {
    var bb = this.getBBox(),
        rad = Math.PI / 180,
        paper = this.paper || this[0].paper,
        p, center, size;

    if (!paper) return;

    switch (this.type) {
        case 'text':
        case 'circle':
        case 'ellipse': center = true; break;
        default: center = false;
    }

    p = paper.path().attr({ fill: "#000", stroke: "none" });
    angle = (+angle + 1 ? angle : 45) + 90;
    size = Math.min(bb.height, bb.width);
    x = typeof x == 'number' ? x : (center ? bb.x + bb.width / 2 : bb.x);
    y = typeof y == 'number' ? y : (center ? bb.y + bb.height / 2 : bb.y);

    var w = Math.max(bb.width + size, size * 25 / 12),
        h = Math.max(bb.height + size, size * 25 / 12),
        x2 = x + size * Math.sin((angle - 22.5) * rad),
        y2 = y + size * Math.cos((angle - 22.5) * rad),
        x1 = x + size * Math.sin((angle + 22.5) * rad),
        y1 = y + size * Math.cos((angle + 22.5) * rad),
        dx = (x1 - x2) / 2,
        dy = (y1 - y2) / 2,
        rx = w / 2,
        ry = h / 2,
        k = -Math.sqrt(Math.abs(rx * rx * ry * ry - rx * rx * dy * dy - ry * ry * dx * dx) / (rx * rx * dy * dy + ry * ry * dx * dx)),
        cx = k * rx * dy / ry + (x1 + x2) / 2,
        cy = k * -ry * dx / rx + (y1 + y2) / 2;

    p.attr({
        x: cx,
        y: cy,
        path: [
            "M", x, y,
            "L", x1, y1,
            "A", rx, ry, 0, 1, 1, x2, y2,
            "z"
        ].join(",")
    });

    this.translate(cx - bb.x - bb.width / 2, cy - bb.y - bb.height / 2);

    return p.insertBefore(this.node ? this : this[0]);
};

/*
 * Tooltips on Paper prototype
 */
/*\
 * Paper.label
 [ method ]
 **
 * Puts the given `text` into a 'label' tooltip. The text is given a default style according to @g.txtattr. See @Element.label
 **
 > Parameters
 **
 - x (number) x coordinate of the center of the label
 - y (number) y coordinate of the center of the label
 - text (string) text to place inside the label
 **
 = (object) set containing the label path and the text element
 > Usage
 | paper.label(50, 50, "$9.99");
 \*/
Raphael.fn.label = function (x, y, text) {
    var set = this.set();

    text = this.text(x, y, text).attr(Raphael.g.txtattr);
    return set.push(text.label(), text);
};

/*\
 * Paper.popup
 [ method ]
 **
 * Puts the given `text` into a 'popup' tooltip. The text is given a default style according to @g.txtattr. See @Element.popup
 *
 * Note: The `dir` parameter has changed from g.Raphael 0.4.1 to 0.5. The options `0`, `1`, `2`, and `3` has been changed to `'down'`, `'left'`, `'up'`, and `'right'` respectively.
 **
 > Parameters
 **
 - x (number) x coordinate of the popup's tail
 - y (number) y coordinate of the popup's tail
 - text (string) text to place inside the popup
 - dir (string) location of the text relative to the tail: `'down'`, `'left'`, `'up'` [default], or `'right'`.
 - size (number) amount of padding around the Element [default: `5`]
 **
 = (object) set containing the popup path and the text element
 > Usage
 | paper.popup(50, 50, "$9.99", 'down');
 \*/
Raphael.fn.popup = function (x, y, text, dir, size) {
    var set = this.set();

    text = this.text(x, y, text).attr(Raphael.g.txtattr);
    return set.push(text.popup(dir, size), text);
};

/*\
 * Paper.tag
 [ method ]
 **
 * Puts the given text into a 'tag' tooltip. The text is given a default style according to @g.txtattr. See @Element.tag
 **
 > Parameters
 **
 - x (number) x coordinate of the center of the tag loop
 - y (number) y coordinate of the center of the tag loop
 - text (string) text to place inside the tag
 - angle (number) angle of orientation in degrees [default: `0`]
 - r (number) radius of the loop [default: `5`]
 **
 = (object) set containing the tag path and the text element
 > Usage
 | paper.tag(50, 50, "$9.99", 60);
 \*/
Raphael.fn.tag = function (x, y, text, angle, r) {
    var set = this.set();

    text = this.text(x, y, text).attr(Raphael.g.txtattr);
    return set.push(text.tag(angle, r), text);
};

/*\
 * Paper.flag
 [ method ]
 **
 * Puts the given `text` into a 'flag' tooltip. The text is given a default style according to @g.txtattr. See @Element.flag
 **
 > Parameters
 **
 - x (number) x coordinate of the flag's point
 - y (number) y coordinate of the flag's point
 - text (string) text to place inside the flag
 - angle (number) angle of orientation in degrees [default: `0`]
 **
 = (object) set containing the flag path and the text element
 > Usage
 | paper.flag(50, 50, "$9.99", 60);
 \*/
Raphael.fn.flag = function (x, y, text, angle) {
    var set = this.set();

    text = this.text(x, y, text).attr(Raphael.g.txtattr);
    return set.push(text.flag(angle), text);
};

/*\
 * Paper.drop
 [ method ]
 **
 * Puts the given text into a 'drop' tooltip. The text is given a default style according to @g.txtattr. See @Element.drop
 **
 > Parameters
 **
 - x (number) x coordinate of the drop's point
 - y (number) y coordinate of the drop's point
 - text (string) text to place inside the drop
 - angle (number) angle of orientation in degrees [default: `0`]
 **
 = (object) set containing the drop path and the text element
 > Usage
 | paper.drop(50, 50, "$9.99", 60);
 \*/
Raphael.fn.drop = function (x, y, text, angle) {
    var set = this.set();

    text = this.text(x, y, text).attr(Raphael.g.txtattr);
    return set.push(text.drop(angle), text);
};

/*\
 * Paper.blob
 [ method ]
 **
 * Puts the given text into a 'blob' tooltip. The text is given a default style according to @g.txtattr. See @Element.blob
 **
 > Parameters
 **
 - x (number) x coordinate of the blob's tail
 - y (number) y coordinate of the blob's tail
 - text (string) text to place inside the blob
 - angle (number) angle of orientation in degrees [default: `0`]
 **
 = (object) set containing the blob path and the text element
 > Usage
 | paper.blob(50, 50, "$9.99", 60);
 \*/
Raphael.fn.blob = function (x, y, text, angle) {
    var set = this.set();

    text = this.text(x, y, text).attr(Raphael.g.txtattr);
    return set.push(text.blob(angle), text);
};

/**
 * Brightness functions on the Element prototype
 */
/*\
 * Element.lighter
 [ method ]
 **
 * Makes the context element lighter by increasing the brightness and reducing the saturation by a given factor. Can be called on Sets.
 **
 > Parameters
 **
 - times (number) adjustment factor [default: `2`]
 **
 = (object) Element
 > Usage
 | paper.circle(50, 50, 20).attr({
 |     fill: "#ff0000",
 |     stroke: "#fff",
 |     "stroke-width": 2
 | }).lighter(6);
 \*/
Raphael.el.lighter = function (times) {
    times = times || 2;

    var fs = [this.attrs.fill, this.attrs.stroke];

    this.fs = this.fs || [fs[0], fs[1]];

    fs[0] = Raphael.rgb2hsb(Raphael.getRGB(fs[0]).hex);
    fs[1] = Raphael.rgb2hsb(Raphael.getRGB(fs[1]).hex);
    fs[0].b = Math.min(fs[0].b * times, 1);
    fs[0].s = fs[0].s / times;
    fs[1].b = Math.min(fs[1].b * times, 1);
    fs[1].s = fs[1].s / times;

    this.attr({fill: "hsb(" + [fs[0].h, fs[0].s, fs[0].b] + ")", stroke: "hsb(" + [fs[1].h, fs[1].s, fs[1].b] + ")"});
    return this;
};

/*\
 * Element.darker
 [ method ]
 **
 * Makes the context element darker by decreasing the brightness and increasing the saturation by a given factor. Can be called on Sets.
 **
 > Parameters
 **
 - times (number) adjustment factor [default: `2`]
 **
 = (object) Element
 > Usage
 | paper.circle(50, 50, 20).attr({
 |     fill: "#ff0000",
 |     stroke: "#fff",
 |     "stroke-width": 2
 | }).darker(6);
 \*/
Raphael.el.darker = function (times) {
    times = times || 2;

    var fs = [this.attrs.fill, this.attrs.stroke];

    this.fs = this.fs || [fs[0], fs[1]];

    fs[0] = Raphael.rgb2hsb(Raphael.getRGB(fs[0]).hex);
    fs[1] = Raphael.rgb2hsb(Raphael.getRGB(fs[1]).hex);
    fs[0].s = Math.min(fs[0].s * times, 1);
    fs[0].b = fs[0].b / times;
    fs[1].s = Math.min(fs[1].s * times, 1);
    fs[1].b = fs[1].b / times;

    this.attr({fill: "hsb(" + [fs[0].h, fs[0].s, fs[0].b] + ")", stroke: "hsb(" + [fs[1].h, fs[1].s, fs[1].b] + ")"});
    return this;
};

/*\
 * Element.resetBrightness
 [ method ]
 **
 * Resets brightness and saturation levels to their original values. See @Element.lighter and @Element.darker. Can be called on Sets.
 **
 = (object) Element
 > Usage
 | paper.circle(50, 50, 20).attr({
 |     fill: "#ff0000",
 |     stroke: "#fff",
 |     "stroke-width": 2
 | }).lighter(6).resetBrightness();
 \*/
Raphael.el.resetBrightness = function () {
    if (this.fs) {
        this.attr({ fill: this.fs[0], stroke: this.fs[1] });
        delete this.fs;
    }
    return this;
};

//alias to set prototype
(function () {
    var brightness = ['lighter', 'darker', 'resetBrightness'],
        tooltips = ['popup', 'tag', 'flag', 'label', 'drop', 'blob'];

    for (var f in tooltips) (function (name) {
        Raphael.st[name] = function () {
            return Raphael.el[name].apply(this, arguments);
        };
    })(tooltips[f]);

    for (var f in brightness) (function (name) {
        Raphael.st[name] = function () {
            for (var i = 0; i < this.length; i++) {
                this[i][name].apply(this[i], arguments);
            }

            return this;
        };
    })(brightness[f]);
})();

//chart prototype for storing common functions
Raphael.g = {
    /*\
     * g.shim
     [ object ]
     **
     * An attribute object that charts will set on all generated shims (shims being the invisible objects that mouse events are bound to)
     **
     > Default value
     | { stroke: 'none', fill: '#000', 'fill-opacity': 0 }
     \*/
    shim: { stroke: 'none', fill: '#000', 'fill-opacity': 0 },

    /*\
     * g.txtattr
     [ object ]
     **
     * An attribute object that charts and tooltips will set on any generated text
     **
     > Default value
     | { font: '12px Arial, sans-serif', fill: '#fff' }
     \*/  
    txtattr: { font: '12px Arial, sans-serif', fill: '#fff' },

    /*\
     * g.colors
     [ array ]
     **
     * An array of color values that charts will iterate through when drawing chart data values.
     **
     \*/
    colors: (function () {
            var hues = [.6, .2, .05, .1333, .75, 0],
                colors = [];

            for (var i = 0; i < 10; i++) {
                if (i < hues.length) {
                    colors.push('hsb(' + hues[i] + ',.75, .75)');
                } else {
                    colors.push('hsb(' + hues[i - hues.length] + ', 1, .5)');
                }
            }

            return colors;
    })(),
    
    snapEnds: function(from, to, steps) {
        var f = from,
            t = to;

        if (f == t) {
            return {from: f, to: t, power: 0};
        }

        function round(a) {
            return Math.abs(a - .5) < .25 ? ~~(a) + .5 : Math.round(a);
        }

        var d = (t - f) / steps,
            r = ~~(d),
            R = r,
            i = 0;

        if (r) {
            while (R) {
                i--;
                R = ~~(d * Math.pow(10, i)) / Math.pow(10, i);
            }

            i ++;
        } else {
            while (!r) {
                i = i || 1;
                r = ~~(d * Math.pow(10, i)) / Math.pow(10, i);
                i++;
            }

            i && i--;
        }

        t = round(to * Math.pow(10, i)) / Math.pow(10, i);

        if (t < to) {
            t = round((to + .5) * Math.pow(10, i)) / Math.pow(10, i);
        }

        f = round((from - (i > 0 ? 0 : .5)) * Math.pow(10, i)) / Math.pow(10, i);
        return { from: f, to: t, power: i };
    },

    axis: function (x, y, length, from, to, steps, orientation, labels, type, dashsize, paper) {
        dashsize = dashsize == null ? 2 : dashsize;
        type = type || "t";
        steps = steps || 10;
        paper = arguments[arguments.length-1] //paper is always last argument

        var path = type == "|" || type == " " ? ["M", x + .5, y, "l", 0, .001] : orientation == 1 || orientation == 3 ? ["M", x + .5, y, "l", 0, -length] : ["M", x, y + .5, "l", length, 0],
            ends = this.snapEnds(from, to, steps),
            f = ends.from,
            t = ends.to,
            i = ends.power,
            j = 0,
            txtattr = { font: "11px 'Fontin Sans', Fontin-Sans, sans-serif" },
            text = paper.set(),
            d;

        d = (t - f) / steps;

        var label = f,
            rnd = i > 0 ? i : 0;
            dx = length / steps;

        if (+orientation == 1 || +orientation == 3) {
            var Y = y,
                addon = (orientation - 1 ? 1 : -1) * (dashsize + 3 + !!(orientation - 1));

            while (Y >= y - length) {
                type != "-" && type != " " && (path = path.concat(["M", x - (type == "+" || type == "|" ? dashsize : !(orientation - 1) * dashsize * 2), Y + .5, "l", dashsize * 2 + 1, 0]));
                text.push(paper.text(x + addon, Y, (labels && labels[j++]) || (Math.round(label) == label ? label : +label.toFixed(rnd))).attr(txtattr).attr({ "text-anchor": orientation - 1 ? "start" : "end" }));
                label += d;
                Y -= dx;
            }

            if (Math.round(Y + dx - (y - length))) {
                type != "-" && type != " " && (path = path.concat(["M", x - (type == "+" || type == "|" ? dashsize : !(orientation - 1) * dashsize * 2), y - length + .5, "l", dashsize * 2 + 1, 0]));
                text.push(paper.text(x + addon, y - length, (labels && labels[j]) || (Math.round(label) == label ? label : +label.toFixed(rnd))).attr(txtattr).attr({ "text-anchor": orientation - 1 ? "start" : "end" }));
            }
        } else {
            label = f;
            rnd = (i > 0) * i;
            addon = (orientation ? -1 : 1) * (dashsize + 9 + !orientation);

            var X = x,
                dx = length / steps,
                txt = 0,
                prev = 0;

            while (X <= x + length) {
                type != "-" && type != " " && (path = path.concat(["M", X + .5, y - (type == "+" ? dashsize : !!orientation * dashsize * 2), "l", 0, dashsize * 2 + 1]));
                text.push(txt = paper.text(X, y + addon, (labels && labels[j++]) || (Math.round(label) == label ? label : +label.toFixed(rnd))).attr(txtattr));

                var bb = txt.getBBox();

                if (prev >= bb.x - 5) {
                    text.pop(text.length - 1).remove();
                } else {
                    prev = bb.x + bb.width;
                }

                label += d;
                X += dx;
            }

            if (Math.round(X - dx - x - length)) {
                type != "-" && type != " " && (path = path.concat(["M", x + length + .5, y - (type == "+" ? dashsize : !!orientation * dashsize * 2), "l", 0, dashsize * 2 + 1]));
                text.push(paper.text(x + length, y + addon, (labels && labels[j]) || (Math.round(label) == label ? label : +label.toFixed(rnd))).attr(txtattr));
            }
        }

        var res = paper.path(path);

        res.text = text;
        res.all = paper.set([res, text]);
        res.remove = function () {
            this.text.remove();
            this.constructor.prototype.remove.call(this);
        };

        return res;
    },
    
    labelise: function(label, val, total) {
        if (label) {
            return (label + "").replace(/(##+(?:\.#+)?)|(%%+(?:\.%+)?)/g, function (all, value, percent) {
                if (value) {
                    return (+val).toFixed(value.replace(/^#+\.?/g, "").length);
                }
                if (percent) {
                    return (val * 100 / total).toFixed(percent.replace(/^%+\.?/g, "").length) + "%";
                }
            });
        } else {
            return (+val).toFixed(0);
        }
    }
}

+
+
+ +
+
+
+
+ +
+ + + +
+
+ + + + + + + + + +
+

Markdown Cheat Sheet

+ +
+ +
+
+

Format Text

+

Headers

+ 
+# This is an <h1> tag
+## This is an <h2> tag
+###### This is an <h6> tag
+

Text styles

+ 
+*This text will be italic*
+_This will also be italic_
+**This text will be bold**
+__This will also be bold__
+
+*You **can** combine them*
+
+
+
+

Lists

+

Unordered

+ 
+* Item 1
+* Item 2
+  * Item 2a
+  * Item 2b
+

Ordered

+ 
+1. Item 1
+2. Item 2
+3. Item 3
+   * Item 3a
+   * Item 3b
+
+
+

Miscellaneous

+

Images

+ 
+![GitHub Logo](/images/logo.png)
+Format: ![Alt Text](url)
+
+

Links

+ 
+http://github.com - automatic!
+[GitHub](http://github.com)
+

Blockquotes

+ 
+As Kanye West said:
+
+> We're living the future so
+> the present is our past.
+
+
+
+
+ +

Code Examples in Markdown

+
+

Syntax highlighting with GFM

+ 
+```javascript
+function fancyAlert(arg) {
+  if(arg) {
+    $.facebox({div:'#foo'})
+  }
+}
+```
+
+
+

Or, indent your code 4 spaces

+ 
+Here is a Python code example
+without syntax highlighting:
+
+    def foo:
+      if not bar:
+        return true
+
+
+

Inline code for comments

+ 
+I think you should use an
+`<addr>` element here instead.
+
+
+ +
+ + + +
+ +
+

Something went wrong with that request. Please try again. Dismiss

+
+ + + + + + + -- cgit v1.2.3