highcharts-js-rails 0.1.4 → 0.1.5
Sign up to get free protection for your applications and to get access to all the features.
- data/CHANGELOG.md +4 -0
- data/highcharts-js-rails.gemspec +1 -1
- data/vendor/assets/javascripts/adapters/mootools.js +10 -1
- data/vendor/assets/javascripts/adapters/prototype.js +7 -3
- data/vendor/assets/javascripts/highcharts.js +581 -484
- data/vendor/assets/javascripts/modules/canvas-tools.js +472 -472
- data/vendor/assets/javascripts/modules/exporting.js +7 -4
- metadata +38 -13
@@ -289,7 +289,7 @@ function RGBColor(color_string)
|
|
289
289
|
|
290
290
|
/**
|
291
291
|
* @license canvg.js - Javascript SVG parser and renderer on Canvas
|
292
|
-
* MIT Licensed
|
292
|
+
* MIT Licensed
|
293
293
|
* Gabe Lerner (gabelerner@gmail.com)
|
294
294
|
* http://code.google.com/p/canvg/
|
295
295
|
*
|
@@ -345,13 +345,13 @@ if(!Array.prototype.indexOf){
|
|
345
345
|
canvg(c, div.innerHTML);
|
346
346
|
}
|
347
347
|
return;
|
348
|
-
}
|
348
|
+
}
|
349
349
|
opts = opts || {};
|
350
|
-
|
350
|
+
|
351
351
|
if (typeof target == 'string') {
|
352
352
|
target = document.getElementById(target);
|
353
353
|
}
|
354
|
-
|
354
|
+
|
355
355
|
// reuse class per canvas
|
356
356
|
var svg;
|
357
357
|
if (target.svg == null) {
|
@@ -363,7 +363,7 @@ if(!Array.prototype.indexOf){
|
|
363
363
|
svg.stop();
|
364
364
|
}
|
365
365
|
svg.opts = opts;
|
366
|
-
|
366
|
+
|
367
367
|
var ctx = target.getContext('2d');
|
368
368
|
if (typeof(s.documentElement) != 'undefined') {
|
369
369
|
// load from xml doc
|
@@ -381,10 +381,10 @@ if(!Array.prototype.indexOf){
|
|
381
381
|
|
382
382
|
function build() {
|
383
383
|
var svg = { };
|
384
|
-
|
384
|
+
|
385
385
|
svg.FRAMERATE = 30;
|
386
386
|
svg.MAX_VIRTUAL_PIXELS = 30000;
|
387
|
-
|
387
|
+
|
388
388
|
// globals
|
389
389
|
svg.init = function(ctx) {
|
390
390
|
svg.Definitions = {};
|
@@ -404,14 +404,14 @@ if(!Array.prototype.indexOf){
|
|
404
404
|
if (d != null && typeof(d) == 'number') return d;
|
405
405
|
if (d == 'x') return this.width();
|
406
406
|
if (d == 'y') return this.height();
|
407
|
-
return Math.sqrt(Math.pow(this.width(), 2) + Math.pow(this.height(), 2)) / Math.sqrt(2);
|
407
|
+
return Math.sqrt(Math.pow(this.width(), 2) + Math.pow(this.height(), 2)) / Math.sqrt(2);
|
408
408
|
}
|
409
409
|
});
|
410
410
|
}
|
411
411
|
svg.init();
|
412
|
-
|
412
|
+
|
413
413
|
// images loaded
|
414
|
-
svg.ImagesLoaded = function() {
|
414
|
+
svg.ImagesLoaded = function() {
|
415
415
|
for (var i=0; i<svg.Images.length; i++) {
|
416
416
|
if (!svg.Images[i].loaded) return false;
|
417
417
|
}
|
@@ -420,10 +420,10 @@ if(!Array.prototype.indexOf){
|
|
420
420
|
|
421
421
|
// trim
|
422
422
|
svg.trim = function(s) { return s.replace(/^\s+|\s+$/g, ''); }
|
423
|
-
|
423
|
+
|
424
424
|
// compress spaces
|
425
425
|
svg.compressSpaces = function(s) { return s.replace(/[\s\r\t\n]+/gm,' '); }
|
426
|
-
|
426
|
+
|
427
427
|
// ajax
|
428
428
|
svg.ajax = function(url) {
|
429
429
|
var AJAX;
|
@@ -435,8 +435,8 @@ if(!Array.prototype.indexOf){
|
|
435
435
|
return AJAX.responseText;
|
436
436
|
}
|
437
437
|
return null;
|
438
|
-
}
|
439
|
-
|
438
|
+
}
|
439
|
+
|
440
440
|
// parse xml
|
441
441
|
svg.parseXml = function(xml) {
|
442
442
|
if (window.DOMParser)
|
@@ -444,48 +444,48 @@ if(!Array.prototype.indexOf){
|
|
444
444
|
var parser = new DOMParser();
|
445
445
|
return parser.parseFromString(xml, 'text/xml');
|
446
446
|
}
|
447
|
-
else
|
447
|
+
else
|
448
448
|
{
|
449
449
|
xml = xml.replace(/<!DOCTYPE svg[^>]*>/, '');
|
450
450
|
var xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
|
451
451
|
xmlDoc.async = 'false';
|
452
|
-
xmlDoc.loadXML(xml);
|
452
|
+
xmlDoc.loadXML(xml);
|
453
453
|
return xmlDoc;
|
454
|
-
}
|
454
|
+
}
|
455
455
|
}
|
456
|
-
|
456
|
+
|
457
457
|
svg.Property = function(name, value) {
|
458
458
|
this.name = name;
|
459
459
|
this.value = value;
|
460
|
-
|
460
|
+
|
461
461
|
this.hasValue = function() {
|
462
462
|
return (this.value != null && this.value !== '');
|
463
463
|
}
|
464
|
-
|
464
|
+
|
465
465
|
// return the numerical value of the property
|
466
466
|
this.numValue = function() {
|
467
467
|
if (!this.hasValue()) return 0;
|
468
|
-
|
468
|
+
|
469
469
|
var n = parseFloat(this.value);
|
470
470
|
if ((this.value + '').match(/%$/)) {
|
471
471
|
n = n / 100.0;
|
472
472
|
}
|
473
473
|
return n;
|
474
474
|
}
|
475
|
-
|
475
|
+
|
476
476
|
this.valueOrDefault = function(def) {
|
477
477
|
if (this.hasValue()) return this.value;
|
478
478
|
return def;
|
479
479
|
}
|
480
|
-
|
480
|
+
|
481
481
|
this.numValueOrDefault = function(def) {
|
482
482
|
if (this.hasValue()) return this.numValue();
|
483
483
|
return def;
|
484
484
|
}
|
485
|
-
|
485
|
+
|
486
486
|
/* EXTENSIONS */
|
487
487
|
var that = this;
|
488
|
-
|
488
|
+
|
489
489
|
// color extensions
|
490
490
|
this.Color = {
|
491
491
|
// augment the current color value with the opacity
|
@@ -500,7 +500,7 @@ if(!Array.prototype.indexOf){
|
|
500
500
|
return new svg.Property(that.name, newValue);
|
501
501
|
}
|
502
502
|
}
|
503
|
-
|
503
|
+
|
504
504
|
// definition extensions
|
505
505
|
this.Definition = {
|
506
506
|
// get the definition from the definitions table
|
@@ -508,43 +508,43 @@ if(!Array.prototype.indexOf){
|
|
508
508
|
var name = that.value.replace(/^(url\()?#([^\)]+)\)?$/, '$2');
|
509
509
|
return svg.Definitions[name];
|
510
510
|
},
|
511
|
-
|
511
|
+
|
512
512
|
isUrl: function() {
|
513
513
|
return that.value.indexOf('url(') == 0
|
514
514
|
},
|
515
|
-
|
515
|
+
|
516
516
|
getFillStyle: function(e) {
|
517
517
|
var def = this.getDefinition();
|
518
|
-
|
518
|
+
|
519
519
|
// gradient
|
520
520
|
if (def != null && def.createGradient) {
|
521
521
|
return def.createGradient(svg.ctx, e);
|
522
522
|
}
|
523
|
-
|
523
|
+
|
524
524
|
// pattern
|
525
525
|
if (def != null && def.createPattern) {
|
526
526
|
return def.createPattern(svg.ctx, e);
|
527
527
|
}
|
528
|
-
|
528
|
+
|
529
529
|
return null;
|
530
530
|
}
|
531
531
|
}
|
532
|
-
|
532
|
+
|
533
533
|
// length extensions
|
534
534
|
this.Length = {
|
535
535
|
DPI: function(viewPort) {
|
536
536
|
return 96.0; // TODO: compute?
|
537
537
|
},
|
538
|
-
|
538
|
+
|
539
539
|
EM: function(viewPort) {
|
540
540
|
var em = 12;
|
541
|
-
|
541
|
+
|
542
542
|
var fontSize = new svg.Property('fontSize', svg.Font.Parse(svg.ctx.font).fontSize);
|
543
543
|
if (fontSize.hasValue()) em = fontSize.Length.toPixels(viewPort);
|
544
|
-
|
544
|
+
|
545
545
|
return em;
|
546
546
|
},
|
547
|
-
|
547
|
+
|
548
548
|
// get the length as pixels
|
549
549
|
toPixels: function(viewPort) {
|
550
550
|
if (!that.hasValue()) return 0;
|
@@ -561,7 +561,7 @@ if(!Array.prototype.indexOf){
|
|
561
561
|
return that.numValue();
|
562
562
|
}
|
563
563
|
}
|
564
|
-
|
564
|
+
|
565
565
|
// time extensions
|
566
566
|
this.Time = {
|
567
567
|
// get the time as milliseconds
|
@@ -573,7 +573,7 @@ if(!Array.prototype.indexOf){
|
|
573
573
|
return that.numValue();
|
574
574
|
}
|
575
575
|
}
|
576
|
-
|
576
|
+
|
577
577
|
// angle extensions
|
578
578
|
this.Angle = {
|
579
579
|
// get the angle as radians
|
@@ -587,25 +587,25 @@ if(!Array.prototype.indexOf){
|
|
587
587
|
}
|
588
588
|
}
|
589
589
|
}
|
590
|
-
|
590
|
+
|
591
591
|
// fonts
|
592
592
|
svg.Font = new (function() {
|
593
593
|
this.Styles = ['normal','italic','oblique','inherit'];
|
594
594
|
this.Variants = ['normal','small-caps','inherit'];
|
595
595
|
this.Weights = ['normal','bold','bolder','lighter','100','200','300','400','500','600','700','800','900','inherit'];
|
596
|
-
|
597
|
-
this.CreateFont = function(fontStyle, fontVariant, fontWeight, fontSize, fontFamily, inherit) {
|
596
|
+
|
597
|
+
this.CreateFont = function(fontStyle, fontVariant, fontWeight, fontSize, fontFamily, inherit) {
|
598
598
|
var f = inherit != null ? this.Parse(inherit) : this.CreateFont('', '', '', '', '', svg.ctx.font);
|
599
|
-
return {
|
600
|
-
fontFamily: fontFamily || f.fontFamily,
|
601
|
-
fontSize: fontSize || f.fontSize,
|
602
|
-
fontStyle: fontStyle || f.fontStyle,
|
603
|
-
fontWeight: fontWeight || f.fontWeight,
|
599
|
+
return {
|
600
|
+
fontFamily: fontFamily || f.fontFamily,
|
601
|
+
fontSize: fontSize || f.fontSize,
|
602
|
+
fontStyle: fontStyle || f.fontStyle,
|
603
|
+
fontWeight: fontWeight || f.fontWeight,
|
604
604
|
fontVariant: fontVariant || f.fontVariant,
|
605
|
-
toString: function () { return [this.fontStyle, this.fontVariant, this.fontWeight, this.fontSize, this.fontFamily].join(' ') }
|
606
|
-
}
|
605
|
+
toString: function () { return [this.fontStyle, this.fontVariant, this.fontWeight, this.fontSize, this.fontFamily].join(' ') }
|
606
|
+
}
|
607
607
|
}
|
608
|
-
|
608
|
+
|
609
609
|
var that = this;
|
610
610
|
this.Parse = function(s) {
|
611
611
|
var f = {};
|
@@ -622,7 +622,7 @@ if(!Array.prototype.indexOf){
|
|
622
622
|
return f;
|
623
623
|
}
|
624
624
|
});
|
625
|
-
|
625
|
+
|
626
626
|
// points and paths
|
627
627
|
svg.ToNumberArray = function(s) {
|
628
628
|
var a = svg.trim(svg.compressSpaces((s || '').replace(/,/g, ' '))).split(' ');
|
@@ -630,15 +630,15 @@ if(!Array.prototype.indexOf){
|
|
630
630
|
a[i] = parseFloat(a[i]);
|
631
631
|
}
|
632
632
|
return a;
|
633
|
-
}
|
633
|
+
}
|
634
634
|
svg.Point = function(x, y) {
|
635
635
|
this.x = x;
|
636
636
|
this.y = y;
|
637
|
-
|
637
|
+
|
638
638
|
this.angleTo = function(p) {
|
639
639
|
return Math.atan2(p.y - this.y, p.x - this.x);
|
640
640
|
}
|
641
|
-
|
641
|
+
|
642
642
|
this.applyTransform = function(v) {
|
643
643
|
var xp = this.x * v[0] + this.y * v[2] + v[4];
|
644
644
|
var yp = this.x * v[1] + this.y * v[3] + v[5];
|
@@ -658,20 +658,20 @@ if(!Array.prototype.indexOf){
|
|
658
658
|
}
|
659
659
|
return path;
|
660
660
|
}
|
661
|
-
|
661
|
+
|
662
662
|
// bounding box
|
663
663
|
svg.BoundingBox = function(x1, y1, x2, y2) { // pass in initial points if you want
|
664
664
|
this.x1 = Number.NaN;
|
665
665
|
this.y1 = Number.NaN;
|
666
666
|
this.x2 = Number.NaN;
|
667
667
|
this.y2 = Number.NaN;
|
668
|
-
|
668
|
+
|
669
669
|
this.x = function() { return this.x1; }
|
670
670
|
this.y = function() { return this.y1; }
|
671
671
|
this.width = function() { return this.x2 - this.x1; }
|
672
672
|
this.height = function() { return this.y2 - this.y1; }
|
673
|
-
|
674
|
-
this.addPoint = function(x, y) {
|
673
|
+
|
674
|
+
this.addPoint = function(x, y) {
|
675
675
|
if (x != null) {
|
676
676
|
if (isNaN(this.x1) || isNaN(this.x2)) {
|
677
677
|
this.x1 = x;
|
@@ -680,7 +680,7 @@ if(!Array.prototype.indexOf){
|
|
680
680
|
if (x < this.x1) this.x1 = x;
|
681
681
|
if (x > this.x2) this.x2 = x;
|
682
682
|
}
|
683
|
-
|
683
|
+
|
684
684
|
if (y != null) {
|
685
685
|
if (isNaN(this.y1) || isNaN(this.y2)) {
|
686
686
|
this.y1 = y;
|
@@ -689,15 +689,15 @@ if(!Array.prototype.indexOf){
|
|
689
689
|
if (y < this.y1) this.y1 = y;
|
690
690
|
if (y > this.y2) this.y2 = y;
|
691
691
|
}
|
692
|
-
}
|
692
|
+
}
|
693
693
|
this.addX = function(x) { this.addPoint(x, null); }
|
694
694
|
this.addY = function(y) { this.addPoint(null, y); }
|
695
|
-
|
695
|
+
|
696
696
|
this.addBoundingBox = function(bb) {
|
697
697
|
this.addPoint(bb.x1, bb.y1);
|
698
698
|
this.addPoint(bb.x2, bb.y2);
|
699
699
|
}
|
700
|
-
|
700
|
+
|
701
701
|
this.addQuadraticCurve = function(p0x, p0y, p1x, p1y, p2x, p2y) {
|
702
702
|
var cp1x = p0x + 2/3 * (p1x - p0x); // CP1 = QP0 + 2/3 *(QP1-QP0)
|
703
703
|
var cp1y = p0y + 2/3 * (p1y - p0y); // CP1 = QP0 + 2/3 *(QP1-QP0)
|
@@ -705,25 +705,25 @@ if(!Array.prototype.indexOf){
|
|
705
705
|
var cp2y = cp1y + 1/3 * (p2y - p0y); // CP2 = CP1 + 1/3 *(QP2-QP0)
|
706
706
|
this.addBezierCurve(p0x, p0y, cp1x, cp2x, cp1y, cp2y, p2x, p2y);
|
707
707
|
}
|
708
|
-
|
708
|
+
|
709
709
|
this.addBezierCurve = function(p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) {
|
710
710
|
// from http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html
|
711
711
|
var p0 = [p0x, p0y], p1 = [p1x, p1y], p2 = [p2x, p2y], p3 = [p3x, p3y];
|
712
712
|
this.addPoint(p0[0], p0[1]);
|
713
713
|
this.addPoint(p3[0], p3[1]);
|
714
|
-
|
714
|
+
|
715
715
|
for (i=0; i<=1; i++) {
|
716
|
-
var f = function(t) {
|
716
|
+
var f = function(t) {
|
717
717
|
return Math.pow(1-t, 3) * p0[i]
|
718
718
|
+ 3 * Math.pow(1-t, 2) * t * p1[i]
|
719
719
|
+ 3 * (1-t) * Math.pow(t, 2) * p2[i]
|
720
720
|
+ Math.pow(t, 3) * p3[i];
|
721
721
|
}
|
722
|
-
|
722
|
+
|
723
723
|
var b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i];
|
724
724
|
var a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i];
|
725
725
|
var c = 3 * p1[i] - 3 * p0[i];
|
726
|
-
|
726
|
+
|
727
727
|
if (a == 0) {
|
728
728
|
if (b == 0) continue;
|
729
729
|
var t = -c / b;
|
@@ -733,7 +733,7 @@ if(!Array.prototype.indexOf){
|
|
733
733
|
}
|
734
734
|
continue;
|
735
735
|
}
|
736
|
-
|
736
|
+
|
737
737
|
var b2ac = Math.pow(b, 2) - 4 * c * a;
|
738
738
|
if (b2ac < 0) continue;
|
739
739
|
var t1 = (-b + Math.sqrt(b2ac)) / (2 * a);
|
@@ -748,23 +748,23 @@ if(!Array.prototype.indexOf){
|
|
748
748
|
}
|
749
749
|
}
|
750
750
|
}
|
751
|
-
|
751
|
+
|
752
752
|
this.isPointInBox = function(x, y) {
|
753
753
|
return (this.x1 <= x && x <= this.x2 && this.y1 <= y && y <= this.y2);
|
754
754
|
}
|
755
|
-
|
755
|
+
|
756
756
|
this.addPoint(x1, y1);
|
757
757
|
this.addPoint(x2, y2);
|
758
758
|
}
|
759
|
-
|
759
|
+
|
760
760
|
// transforms
|
761
|
-
svg.Transform = function(v) {
|
761
|
+
svg.Transform = function(v) {
|
762
762
|
var that = this;
|
763
763
|
this.Type = {}
|
764
|
-
|
764
|
+
|
765
765
|
// translate
|
766
766
|
this.Type.translate = function(s) {
|
767
|
-
this.p = svg.CreatePoint(s);
|
767
|
+
this.p = svg.CreatePoint(s);
|
768
768
|
this.apply = function(ctx) {
|
769
769
|
ctx.translate(this.p.x || 0.0, this.p.y || 0.0);
|
770
770
|
}
|
@@ -772,7 +772,7 @@ if(!Array.prototype.indexOf){
|
|
772
772
|
p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]);
|
773
773
|
}
|
774
774
|
}
|
775
|
-
|
775
|
+
|
776
776
|
// rotate
|
777
777
|
this.Type.rotate = function(s) {
|
778
778
|
var a = svg.ToNumberArray(s);
|
@@ -789,9 +789,9 @@ if(!Array.prototype.indexOf){
|
|
789
789
|
p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]);
|
790
790
|
p.applyTransform([Math.cos(a), Math.sin(a), -Math.sin(a), Math.cos(a), 0, 0]);
|
791
791
|
p.applyTransform([1, 0, 0, 1, -this.p.x || 0.0, -this.p.y || 0.0]);
|
792
|
-
}
|
792
|
+
}
|
793
793
|
}
|
794
|
-
|
794
|
+
|
795
795
|
this.Type.scale = function(s) {
|
796
796
|
this.p = svg.CreatePoint(s);
|
797
797
|
this.apply = function(ctx) {
|
@@ -799,9 +799,9 @@ if(!Array.prototype.indexOf){
|
|
799
799
|
}
|
800
800
|
this.applyToPoint = function(p) {
|
801
801
|
p.applyTransform([this.p.x || 0.0, 0, 0, this.p.y || 0.0, 0, 0]);
|
802
|
-
}
|
802
|
+
}
|
803
803
|
}
|
804
|
-
|
804
|
+
|
805
805
|
this.Type.matrix = function(s) {
|
806
806
|
this.m = svg.ToNumberArray(s);
|
807
807
|
this.apply = function(ctx) {
|
@@ -809,44 +809,44 @@ if(!Array.prototype.indexOf){
|
|
809
809
|
}
|
810
810
|
this.applyToPoint = function(p) {
|
811
811
|
p.applyTransform(this.m);
|
812
|
-
}
|
812
|
+
}
|
813
813
|
}
|
814
|
-
|
814
|
+
|
815
815
|
this.Type.SkewBase = function(s) {
|
816
816
|
this.base = that.Type.matrix;
|
817
817
|
this.base(s);
|
818
818
|
this.angle = new svg.Property('angle', s);
|
819
819
|
}
|
820
820
|
this.Type.SkewBase.prototype = new this.Type.matrix;
|
821
|
-
|
821
|
+
|
822
822
|
this.Type.skewX = function(s) {
|
823
823
|
this.base = that.Type.SkewBase;
|
824
824
|
this.base(s);
|
825
825
|
this.m = [1, 0, Math.tan(this.angle.Angle.toRadians()), 1, 0, 0];
|
826
826
|
}
|
827
827
|
this.Type.skewX.prototype = new this.Type.SkewBase;
|
828
|
-
|
828
|
+
|
829
829
|
this.Type.skewY = function(s) {
|
830
830
|
this.base = that.Type.SkewBase;
|
831
831
|
this.base(s);
|
832
832
|
this.m = [1, Math.tan(this.angle.Angle.toRadians()), 0, 1, 0, 0];
|
833
833
|
}
|
834
834
|
this.Type.skewY.prototype = new this.Type.SkewBase;
|
835
|
-
|
835
|
+
|
836
836
|
this.transforms = [];
|
837
|
-
|
837
|
+
|
838
838
|
this.apply = function(ctx) {
|
839
839
|
for (var i=0; i<this.transforms.length; i++) {
|
840
840
|
this.transforms[i].apply(ctx);
|
841
841
|
}
|
842
842
|
}
|
843
|
-
|
843
|
+
|
844
844
|
this.applyToPoint = function(p) {
|
845
845
|
for (var i=0; i<this.transforms.length; i++) {
|
846
846
|
this.transforms[i].applyToPoint(p);
|
847
847
|
}
|
848
848
|
}
|
849
|
-
|
849
|
+
|
850
850
|
var data = svg.trim(svg.compressSpaces(v)).split(/\s(?=[a-z])/);
|
851
851
|
for (var i=0; i<data.length; i++) {
|
852
852
|
var type = data[i].split('(')[0];
|
@@ -855,73 +855,73 @@ if(!Array.prototype.indexOf){
|
|
855
855
|
this.transforms.push(transform);
|
856
856
|
}
|
857
857
|
}
|
858
|
-
|
858
|
+
|
859
859
|
// aspect ratio
|
860
860
|
svg.AspectRatio = function(ctx, aspectRatio, width, desiredWidth, height, desiredHeight, minX, minY, refX, refY) {
|
861
861
|
// aspect ratio - http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute
|
862
862
|
aspectRatio = svg.compressSpaces(aspectRatio);
|
863
863
|
aspectRatio = aspectRatio.replace(/^defer\s/,''); // ignore defer
|
864
864
|
var align = aspectRatio.split(' ')[0] || 'xMidYMid';
|
865
|
-
var meetOrSlice = aspectRatio.split(' ')[1] || 'meet';
|
866
|
-
|
865
|
+
var meetOrSlice = aspectRatio.split(' ')[1] || 'meet';
|
866
|
+
|
867
867
|
// calculate scale
|
868
868
|
var scaleX = width / desiredWidth;
|
869
869
|
var scaleY = height / desiredHeight;
|
870
870
|
var scaleMin = Math.min(scaleX, scaleY);
|
871
871
|
var scaleMax = Math.max(scaleX, scaleY);
|
872
872
|
if (meetOrSlice == 'meet') { desiredWidth *= scaleMin; desiredHeight *= scaleMin; }
|
873
|
-
if (meetOrSlice == 'slice') { desiredWidth *= scaleMax; desiredHeight *= scaleMax; }
|
874
|
-
|
873
|
+
if (meetOrSlice == 'slice') { desiredWidth *= scaleMax; desiredHeight *= scaleMax; }
|
874
|
+
|
875
875
|
refX = new svg.Property('refX', refX);
|
876
876
|
refY = new svg.Property('refY', refY);
|
877
|
-
if (refX.hasValue() && refY.hasValue()) {
|
877
|
+
if (refX.hasValue() && refY.hasValue()) {
|
878
878
|
ctx.translate(-scaleMin * refX.Length.toPixels('x'), -scaleMin * refY.Length.toPixels('y'));
|
879
|
-
}
|
880
|
-
else {
|
879
|
+
}
|
880
|
+
else {
|
881
881
|
// align
|
882
|
-
if (align.match(/^xMid/) && ((meetOrSlice == 'meet' && scaleMin == scaleY) || (meetOrSlice == 'slice' && scaleMax == scaleY))) ctx.translate(width / 2.0 - desiredWidth / 2.0, 0);
|
883
|
-
if (align.match(/YMid$/) && ((meetOrSlice == 'meet' && scaleMin == scaleX) || (meetOrSlice == 'slice' && scaleMax == scaleX))) ctx.translate(0, height / 2.0 - desiredHeight / 2.0);
|
884
|
-
if (align.match(/^xMax/) && ((meetOrSlice == 'meet' && scaleMin == scaleY) || (meetOrSlice == 'slice' && scaleMax == scaleY))) ctx.translate(width - desiredWidth, 0);
|
885
|
-
if (align.match(/YMax$/) && ((meetOrSlice == 'meet' && scaleMin == scaleX) || (meetOrSlice == 'slice' && scaleMax == scaleX))) ctx.translate(0, height - desiredHeight);
|
882
|
+
if (align.match(/^xMid/) && ((meetOrSlice == 'meet' && scaleMin == scaleY) || (meetOrSlice == 'slice' && scaleMax == scaleY))) ctx.translate(width / 2.0 - desiredWidth / 2.0, 0);
|
883
|
+
if (align.match(/YMid$/) && ((meetOrSlice == 'meet' && scaleMin == scaleX) || (meetOrSlice == 'slice' && scaleMax == scaleX))) ctx.translate(0, height / 2.0 - desiredHeight / 2.0);
|
884
|
+
if (align.match(/^xMax/) && ((meetOrSlice == 'meet' && scaleMin == scaleY) || (meetOrSlice == 'slice' && scaleMax == scaleY))) ctx.translate(width - desiredWidth, 0);
|
885
|
+
if (align.match(/YMax$/) && ((meetOrSlice == 'meet' && scaleMin == scaleX) || (meetOrSlice == 'slice' && scaleMax == scaleX))) ctx.translate(0, height - desiredHeight);
|
886
886
|
}
|
887
|
-
|
887
|
+
|
888
888
|
// scale
|
889
889
|
if (align == 'none') ctx.scale(scaleX, scaleY);
|
890
|
-
else if (meetOrSlice == 'meet') ctx.scale(scaleMin, scaleMin);
|
891
|
-
else if (meetOrSlice == 'slice') ctx.scale(scaleMax, scaleMax);
|
892
|
-
|
890
|
+
else if (meetOrSlice == 'meet') ctx.scale(scaleMin, scaleMin);
|
891
|
+
else if (meetOrSlice == 'slice') ctx.scale(scaleMax, scaleMax);
|
892
|
+
|
893
893
|
// translate
|
894
|
-
ctx.translate(minX == null ? 0 : -minX, minY == null ? 0 : -minY);
|
894
|
+
ctx.translate(minX == null ? 0 : -minX, minY == null ? 0 : -minY);
|
895
895
|
}
|
896
|
-
|
896
|
+
|
897
897
|
// elements
|
898
898
|
svg.Element = {}
|
899
|
-
|
900
|
-
svg.Element.ElementBase = function(node) {
|
899
|
+
|
900
|
+
svg.Element.ElementBase = function(node) {
|
901
901
|
this.attributes = {};
|
902
902
|
this.styles = {};
|
903
903
|
this.children = [];
|
904
|
-
|
904
|
+
|
905
905
|
// get or create attribute
|
906
906
|
this.attribute = function(name, createIfNotExists) {
|
907
907
|
var a = this.attributes[name];
|
908
908
|
if (a != null) return a;
|
909
|
-
|
909
|
+
|
910
910
|
a = new svg.Property(name, '');
|
911
911
|
if (createIfNotExists == true) this.attributes[name] = a;
|
912
912
|
return a;
|
913
913
|
}
|
914
|
-
|
914
|
+
|
915
915
|
// get or create style, crawls up node tree
|
916
916
|
this.style = function(name, createIfNotExists) {
|
917
917
|
var s = this.styles[name];
|
918
918
|
if (s != null) return s;
|
919
|
-
|
919
|
+
|
920
920
|
var a = this.attribute(name);
|
921
921
|
if (a != null && a.hasValue()) {
|
922
922
|
return a;
|
923
923
|
}
|
924
|
-
|
924
|
+
|
925
925
|
var p = this.parent;
|
926
926
|
if (p != null) {
|
927
927
|
var ps = p.style(name);
|
@@ -929,20 +929,20 @@ if(!Array.prototype.indexOf){
|
|
929
929
|
return ps;
|
930
930
|
}
|
931
931
|
}
|
932
|
-
|
932
|
+
|
933
933
|
s = new svg.Property(name, '');
|
934
934
|
if (createIfNotExists == true) this.styles[name] = s;
|
935
935
|
return s;
|
936
936
|
}
|
937
|
-
|
937
|
+
|
938
938
|
// base render
|
939
939
|
this.render = function(ctx) {
|
940
940
|
// don't render display=none
|
941
941
|
if (this.style('display').value == 'none') return;
|
942
|
-
|
942
|
+
|
943
943
|
// don't render visibility=hidden
|
944
944
|
if (this.attribute('visibility').value == 'hidden') return;
|
945
|
-
|
945
|
+
|
946
946
|
ctx.save();
|
947
947
|
this.setContext(ctx);
|
948
948
|
// mask
|
@@ -954,56 +954,56 @@ if(!Array.prototype.indexOf){
|
|
954
954
|
var filter = this.style('filter').Definition.getDefinition();
|
955
955
|
if (filter != null) filter.apply(ctx, this);
|
956
956
|
}
|
957
|
-
else this.renderChildren(ctx);
|
957
|
+
else this.renderChildren(ctx);
|
958
958
|
this.clearContext(ctx);
|
959
959
|
ctx.restore();
|
960
960
|
}
|
961
|
-
|
961
|
+
|
962
962
|
// base set context
|
963
963
|
this.setContext = function(ctx) {
|
964
964
|
// OVERRIDE ME!
|
965
965
|
}
|
966
|
-
|
966
|
+
|
967
967
|
// base clear context
|
968
968
|
this.clearContext = function(ctx) {
|
969
969
|
// OVERRIDE ME!
|
970
|
-
}
|
971
|
-
|
970
|
+
}
|
971
|
+
|
972
972
|
// base render children
|
973
973
|
this.renderChildren = function(ctx) {
|
974
974
|
for (var i=0; i<this.children.length; i++) {
|
975
975
|
this.children[i].render(ctx);
|
976
976
|
}
|
977
977
|
}
|
978
|
-
|
978
|
+
|
979
979
|
this.addChild = function(childNode, create) {
|
980
980
|
var child = childNode;
|
981
981
|
if (create) child = svg.CreateElement(childNode);
|
982
982
|
child.parent = this;
|
983
|
-
this.children.push(child);
|
983
|
+
this.children.push(child);
|
984
984
|
}
|
985
|
-
|
985
|
+
|
986
986
|
if (node != null && node.nodeType == 1) { //ELEMENT_NODE
|
987
987
|
// add children
|
988
988
|
for (var i=0; i<node.childNodes.length; i++) {
|
989
989
|
var childNode = node.childNodes[i];
|
990
990
|
if (childNode.nodeType == 1) this.addChild(childNode, true); //ELEMENT_NODE
|
991
991
|
}
|
992
|
-
|
992
|
+
|
993
993
|
// add attributes
|
994
994
|
for (var i=0; i<node.attributes.length; i++) {
|
995
995
|
var attribute = node.attributes[i];
|
996
996
|
this.attributes[attribute.nodeName] = new svg.Property(attribute.nodeName, attribute.nodeValue);
|
997
997
|
}
|
998
|
-
|
998
|
+
|
999
999
|
// add tag styles
|
1000
1000
|
var styles = svg.Styles[node.nodeName];
|
1001
1001
|
if (styles != null) {
|
1002
1002
|
for (var name in styles) {
|
1003
1003
|
this.styles[name] = styles[name];
|
1004
1004
|
}
|
1005
|
-
}
|
1006
|
-
|
1005
|
+
}
|
1006
|
+
|
1007
1007
|
// add class styles
|
1008
1008
|
if (this.attribute('class').hasValue()) {
|
1009
1009
|
var classes = svg.compressSpaces(this.attribute('class').value).split(' ');
|
@@ -1022,7 +1022,7 @@ if(!Array.prototype.indexOf){
|
|
1022
1022
|
}
|
1023
1023
|
}
|
1024
1024
|
}
|
1025
|
-
|
1025
|
+
|
1026
1026
|
// add inline styles
|
1027
1027
|
if (this.attribute('style').hasValue()) {
|
1028
1028
|
var styles = this.attribute('style').value.split(';');
|
@@ -1034,7 +1034,7 @@ if(!Array.prototype.indexOf){
|
|
1034
1034
|
this.styles[name] = new svg.Property(name, value);
|
1035
1035
|
}
|
1036
1036
|
}
|
1037
|
-
}
|
1037
|
+
}
|
1038
1038
|
|
1039
1039
|
// add id
|
1040
1040
|
if (this.attribute('id').hasValue()) {
|
@@ -1044,11 +1044,11 @@ if(!Array.prototype.indexOf){
|
|
1044
1044
|
}
|
1045
1045
|
}
|
1046
1046
|
}
|
1047
|
-
|
1047
|
+
|
1048
1048
|
svg.Element.RenderedElementBase = function(node) {
|
1049
1049
|
this.base = svg.Element.ElementBase;
|
1050
1050
|
this.base(node);
|
1051
|
-
|
1051
|
+
|
1052
1052
|
this.setContext = function(ctx) {
|
1053
1053
|
// fill
|
1054
1054
|
if (this.style('fill').Definition.isUrl()) {
|
@@ -1060,7 +1060,7 @@ if(!Array.prototype.indexOf){
|
|
1060
1060
|
if (this.style('fill-opacity').hasValue()) fillStyle = fillStyle.Color.addOpacity(this.style('fill-opacity').value);
|
1061
1061
|
ctx.fillStyle = (fillStyle.value == 'none' ? 'rgba(0,0,0,0)' : fillStyle.value);
|
1062
1062
|
}
|
1063
|
-
|
1063
|
+
|
1064
1064
|
// stroke
|
1065
1065
|
if (this.style('stroke').Definition.isUrl()) {
|
1066
1066
|
var fs = this.style('stroke').Definition.getFillStyle(this);
|
@@ -1078,49 +1078,49 @@ if(!Array.prototype.indexOf){
|
|
1078
1078
|
|
1079
1079
|
// font
|
1080
1080
|
if (typeof(ctx.font) != 'undefined') {
|
1081
|
-
ctx.font = svg.Font.CreateFont(
|
1082
|
-
this.style('font-style').value,
|
1083
|
-
this.style('font-variant').value,
|
1084
|
-
this.style('font-weight').value,
|
1085
|
-
this.style('font-size').hasValue() ? this.style('font-size').Length.toPixels() + 'px' : '',
|
1081
|
+
ctx.font = svg.Font.CreateFont(
|
1082
|
+
this.style('font-style').value,
|
1083
|
+
this.style('font-variant').value,
|
1084
|
+
this.style('font-weight').value,
|
1085
|
+
this.style('font-size').hasValue() ? this.style('font-size').Length.toPixels() + 'px' : '',
|
1086
1086
|
this.style('font-family').value).toString();
|
1087
1087
|
}
|
1088
|
-
|
1088
|
+
|
1089
1089
|
// transform
|
1090
|
-
if (this.attribute('transform').hasValue()) {
|
1090
|
+
if (this.attribute('transform').hasValue()) {
|
1091
1091
|
var transform = new svg.Transform(this.attribute('transform').value);
|
1092
1092
|
transform.apply(ctx);
|
1093
1093
|
}
|
1094
|
-
|
1094
|
+
|
1095
1095
|
// clip
|
1096
1096
|
if (this.attribute('clip-path').hasValue()) {
|
1097
1097
|
var clip = this.attribute('clip-path').Definition.getDefinition();
|
1098
1098
|
if (clip != null) clip.apply(ctx);
|
1099
1099
|
}
|
1100
|
-
|
1100
|
+
|
1101
1101
|
// opacity
|
1102
1102
|
if (this.style('opacity').hasValue()) {
|
1103
1103
|
ctx.globalAlpha = this.style('opacity').numValue();
|
1104
1104
|
}
|
1105
|
-
}
|
1105
|
+
}
|
1106
1106
|
}
|
1107
1107
|
svg.Element.RenderedElementBase.prototype = new svg.Element.ElementBase;
|
1108
|
-
|
1108
|
+
|
1109
1109
|
svg.Element.PathElementBase = function(node) {
|
1110
1110
|
this.base = svg.Element.RenderedElementBase;
|
1111
1111
|
this.base(node);
|
1112
|
-
|
1112
|
+
|
1113
1113
|
this.path = function(ctx) {
|
1114
1114
|
if (ctx != null) ctx.beginPath();
|
1115
1115
|
return new svg.BoundingBox();
|
1116
1116
|
}
|
1117
|
-
|
1117
|
+
|
1118
1118
|
this.renderChildren = function(ctx) {
|
1119
1119
|
this.path(ctx);
|
1120
1120
|
svg.Mouse.checkPath(this, ctx);
|
1121
1121
|
if (ctx.fillStyle != '') ctx.fill();
|
1122
1122
|
if (ctx.strokeStyle != '') ctx.stroke();
|
1123
|
-
|
1123
|
+
|
1124
1124
|
var markers = this.getMarkers();
|
1125
1125
|
if (markers != null) {
|
1126
1126
|
if (this.style('marker-start').Definition.isUrl()) {
|
@@ -1137,58 +1137,58 @@ if(!Array.prototype.indexOf){
|
|
1137
1137
|
var marker = this.style('marker-end').Definition.getDefinition();
|
1138
1138
|
marker.render(ctx, markers[markers.length-1][0], markers[markers.length-1][1]);
|
1139
1139
|
}
|
1140
|
-
}
|
1140
|
+
}
|
1141
1141
|
}
|
1142
|
-
|
1142
|
+
|
1143
1143
|
this.getBoundingBox = function() {
|
1144
1144
|
return this.path();
|
1145
1145
|
}
|
1146
|
-
|
1146
|
+
|
1147
1147
|
this.getMarkers = function() {
|
1148
1148
|
return null;
|
1149
1149
|
}
|
1150
1150
|
}
|
1151
1151
|
svg.Element.PathElementBase.prototype = new svg.Element.RenderedElementBase;
|
1152
|
-
|
1152
|
+
|
1153
1153
|
// svg element
|
1154
1154
|
svg.Element.svg = function(node) {
|
1155
1155
|
this.base = svg.Element.RenderedElementBase;
|
1156
1156
|
this.base(node);
|
1157
|
-
|
1157
|
+
|
1158
1158
|
this.baseClearContext = this.clearContext;
|
1159
1159
|
this.clearContext = function(ctx) {
|
1160
1160
|
this.baseClearContext(ctx);
|
1161
1161
|
svg.ViewPort.RemoveCurrent();
|
1162
1162
|
}
|
1163
|
-
|
1163
|
+
|
1164
1164
|
this.baseSetContext = this.setContext;
|
1165
1165
|
this.setContext = function(ctx) {
|
1166
1166
|
// initial values
|
1167
1167
|
ctx.strokeStyle = 'rgba(0,0,0,0)';
|
1168
1168
|
ctx.lineCap = 'butt';
|
1169
1169
|
ctx.lineJoin = 'miter';
|
1170
|
-
ctx.miterLimit = 4;
|
1171
|
-
|
1170
|
+
ctx.miterLimit = 4;
|
1171
|
+
|
1172
1172
|
this.baseSetContext(ctx);
|
1173
|
-
|
1173
|
+
|
1174
1174
|
// create new view port
|
1175
1175
|
if (this.attribute('x').hasValue() && this.attribute('y').hasValue()) {
|
1176
1176
|
ctx.translate(this.attribute('x').Length.toPixels('x'), this.attribute('y').Length.toPixels('y'));
|
1177
1177
|
}
|
1178
|
-
|
1178
|
+
|
1179
1179
|
var width = svg.ViewPort.width();
|
1180
1180
|
var height = svg.ViewPort.height();
|
1181
1181
|
if (typeof(this.root) == 'undefined' && this.attribute('width').hasValue() && this.attribute('height').hasValue()) {
|
1182
1182
|
width = this.attribute('width').Length.toPixels('x');
|
1183
1183
|
height = this.attribute('height').Length.toPixels('y');
|
1184
|
-
|
1184
|
+
|
1185
1185
|
var x = 0;
|
1186
1186
|
var y = 0;
|
1187
1187
|
if (this.attribute('refX').hasValue() && this.attribute('refY').hasValue()) {
|
1188
1188
|
x = -this.attribute('refX').Length.toPixels('x');
|
1189
1189
|
y = -this.attribute('refY').Length.toPixels('y');
|
1190
1190
|
}
|
1191
|
-
|
1191
|
+
|
1192
1192
|
ctx.beginPath();
|
1193
1193
|
ctx.moveTo(x, y);
|
1194
1194
|
ctx.lineTo(width, y);
|
@@ -1197,19 +1197,19 @@ if(!Array.prototype.indexOf){
|
|
1197
1197
|
ctx.closePath();
|
1198
1198
|
ctx.clip();
|
1199
1199
|
}
|
1200
|
-
svg.ViewPort.SetCurrent(width, height);
|
1201
|
-
|
1200
|
+
svg.ViewPort.SetCurrent(width, height);
|
1201
|
+
|
1202
1202
|
// viewbox
|
1203
|
-
if (this.attribute('viewBox').hasValue()) {
|
1203
|
+
if (this.attribute('viewBox').hasValue()) {
|
1204
1204
|
var viewBox = svg.ToNumberArray(this.attribute('viewBox').value);
|
1205
1205
|
var minX = viewBox[0];
|
1206
1206
|
var minY = viewBox[1];
|
1207
1207
|
width = viewBox[2];
|
1208
1208
|
height = viewBox[3];
|
1209
|
-
|
1209
|
+
|
1210
1210
|
svg.AspectRatio(ctx,
|
1211
|
-
this.attribute('preserveAspectRatio').value,
|
1212
|
-
svg.ViewPort.width(),
|
1211
|
+
this.attribute('preserveAspectRatio').value,
|
1212
|
+
svg.ViewPort.width(),
|
1213
1213
|
width,
|
1214
1214
|
svg.ViewPort.height(),
|
1215
1215
|
height,
|
@@ -1217,10 +1217,10 @@ if(!Array.prototype.indexOf){
|
|
1217
1217
|
minY,
|
1218
1218
|
this.attribute('refX').value,
|
1219
1219
|
this.attribute('refY').value);
|
1220
|
-
|
1221
|
-
svg.ViewPort.RemoveCurrent();
|
1222
|
-
svg.ViewPort.SetCurrent(viewBox[2], viewBox[3]);
|
1223
|
-
}
|
1220
|
+
|
1221
|
+
svg.ViewPort.RemoveCurrent();
|
1222
|
+
svg.ViewPort.SetCurrent(viewBox[2], viewBox[3]);
|
1223
|
+
}
|
1224
1224
|
}
|
1225
1225
|
}
|
1226
1226
|
svg.Element.svg.prototype = new svg.Element.RenderedElementBase;
|
@@ -1229,7 +1229,7 @@ if(!Array.prototype.indexOf){
|
|
1229
1229
|
svg.Element.rect = function(node) {
|
1230
1230
|
this.base = svg.Element.PathElementBase;
|
1231
1231
|
this.base(node);
|
1232
|
-
|
1232
|
+
|
1233
1233
|
this.path = function(ctx) {
|
1234
1234
|
var x = this.attribute('x').Length.toPixels('x');
|
1235
1235
|
var y = this.attribute('y').Length.toPixels('y');
|
@@ -1239,7 +1239,7 @@ if(!Array.prototype.indexOf){
|
|
1239
1239
|
var ry = this.attribute('ry').Length.toPixels('y');
|
1240
1240
|
if (this.attribute('rx').hasValue() && !this.attribute('ry').hasValue()) ry = rx;
|
1241
1241
|
if (this.attribute('ry').hasValue() && !this.attribute('rx').hasValue()) rx = ry;
|
1242
|
-
|
1242
|
+
|
1243
1243
|
if (ctx != null) {
|
1244
1244
|
ctx.beginPath();
|
1245
1245
|
ctx.moveTo(x + rx, y);
|
@@ -1253,45 +1253,45 @@ if(!Array.prototype.indexOf){
|
|
1253
1253
|
ctx.quadraticCurveTo(x, y, x + rx, y)
|
1254
1254
|
ctx.closePath();
|
1255
1255
|
}
|
1256
|
-
|
1256
|
+
|
1257
1257
|
return new svg.BoundingBox(x, y, x + width, y + height);
|
1258
1258
|
}
|
1259
1259
|
}
|
1260
1260
|
svg.Element.rect.prototype = new svg.Element.PathElementBase;
|
1261
|
-
|
1261
|
+
|
1262
1262
|
// circle element
|
1263
1263
|
svg.Element.circle = function(node) {
|
1264
1264
|
this.base = svg.Element.PathElementBase;
|
1265
1265
|
this.base(node);
|
1266
|
-
|
1266
|
+
|
1267
1267
|
this.path = function(ctx) {
|
1268
1268
|
var cx = this.attribute('cx').Length.toPixels('x');
|
1269
1269
|
var cy = this.attribute('cy').Length.toPixels('y');
|
1270
1270
|
var r = this.attribute('r').Length.toPixels();
|
1271
|
-
|
1271
|
+
|
1272
1272
|
if (ctx != null) {
|
1273
1273
|
ctx.beginPath();
|
1274
|
-
ctx.arc(cx, cy, r, 0, Math.PI * 2, true);
|
1274
|
+
ctx.arc(cx, cy, r, 0, Math.PI * 2, true);
|
1275
1275
|
ctx.closePath();
|
1276
1276
|
}
|
1277
|
-
|
1277
|
+
|
1278
1278
|
return new svg.BoundingBox(cx - r, cy - r, cx + r, cy + r);
|
1279
1279
|
}
|
1280
1280
|
}
|
1281
|
-
svg.Element.circle.prototype = new svg.Element.PathElementBase;
|
1281
|
+
svg.Element.circle.prototype = new svg.Element.PathElementBase;
|
1282
1282
|
|
1283
1283
|
// ellipse element
|
1284
1284
|
svg.Element.ellipse = function(node) {
|
1285
1285
|
this.base = svg.Element.PathElementBase;
|
1286
1286
|
this.base(node);
|
1287
|
-
|
1287
|
+
|
1288
1288
|
this.path = function(ctx) {
|
1289
1289
|
var KAPPA = 4 * ((Math.sqrt(2) - 1) / 3);
|
1290
1290
|
var rx = this.attribute('rx').Length.toPixels('x');
|
1291
1291
|
var ry = this.attribute('ry').Length.toPixels('y');
|
1292
1292
|
var cx = this.attribute('cx').Length.toPixels('x');
|
1293
1293
|
var cy = this.attribute('cy').Length.toPixels('y');
|
1294
|
-
|
1294
|
+
|
1295
1295
|
if (ctx != null) {
|
1296
1296
|
ctx.beginPath();
|
1297
1297
|
ctx.moveTo(cx, cy - ry);
|
@@ -1301,48 +1301,48 @@ if(!Array.prototype.indexOf){
|
|
1301
1301
|
ctx.bezierCurveTo(cx - rx, cy - (KAPPA * ry), cx - (KAPPA * rx), cy - ry, cx, cy - ry);
|
1302
1302
|
ctx.closePath();
|
1303
1303
|
}
|
1304
|
-
|
1304
|
+
|
1305
1305
|
return new svg.BoundingBox(cx - rx, cy - ry, cx + rx, cy + ry);
|
1306
1306
|
}
|
1307
1307
|
}
|
1308
|
-
svg.Element.ellipse.prototype = new svg.Element.PathElementBase;
|
1309
|
-
|
1308
|
+
svg.Element.ellipse.prototype = new svg.Element.PathElementBase;
|
1309
|
+
|
1310
1310
|
// line element
|
1311
1311
|
svg.Element.line = function(node) {
|
1312
1312
|
this.base = svg.Element.PathElementBase;
|
1313
1313
|
this.base(node);
|
1314
|
-
|
1314
|
+
|
1315
1315
|
this.getPoints = function() {
|
1316
1316
|
return [
|
1317
1317
|
new svg.Point(this.attribute('x1').Length.toPixels('x'), this.attribute('y1').Length.toPixels('y')),
|
1318
1318
|
new svg.Point(this.attribute('x2').Length.toPixels('x'), this.attribute('y2').Length.toPixels('y'))];
|
1319
1319
|
}
|
1320
|
-
|
1320
|
+
|
1321
1321
|
this.path = function(ctx) {
|
1322
1322
|
var points = this.getPoints();
|
1323
|
-
|
1323
|
+
|
1324
1324
|
if (ctx != null) {
|
1325
1325
|
ctx.beginPath();
|
1326
1326
|
ctx.moveTo(points[0].x, points[0].y);
|
1327
1327
|
ctx.lineTo(points[1].x, points[1].y);
|
1328
1328
|
}
|
1329
|
-
|
1329
|
+
|
1330
1330
|
return new svg.BoundingBox(points[0].x, points[0].y, points[1].x, points[1].y);
|
1331
1331
|
}
|
1332
|
-
|
1332
|
+
|
1333
1333
|
this.getMarkers = function() {
|
1334
|
-
var points = this.getPoints();
|
1334
|
+
var points = this.getPoints();
|
1335
1335
|
var a = points[0].angleTo(points[1]);
|
1336
1336
|
return [[points[0], a], [points[1], a]];
|
1337
1337
|
}
|
1338
1338
|
}
|
1339
|
-
svg.Element.line.prototype = new svg.Element.PathElementBase;
|
1340
|
-
|
1339
|
+
svg.Element.line.prototype = new svg.Element.PathElementBase;
|
1340
|
+
|
1341
1341
|
// polyline element
|
1342
1342
|
svg.Element.polyline = function(node) {
|
1343
1343
|
this.base = svg.Element.PathElementBase;
|
1344
1344
|
this.base(node);
|
1345
|
-
|
1345
|
+
|
1346
1346
|
this.points = svg.CreatePath(this.attribute('points').value);
|
1347
1347
|
this.path = function(ctx) {
|
1348
1348
|
var bb = new svg.BoundingBox(this.points[0].x, this.points[0].y);
|
@@ -1356,7 +1356,7 @@ if(!Array.prototype.indexOf){
|
|
1356
1356
|
}
|
1357
1357
|
return bb;
|
1358
1358
|
}
|
1359
|
-
|
1359
|
+
|
1360
1360
|
this.getMarkers = function() {
|
1361
1361
|
var markers = [];
|
1362
1362
|
for (var i=0; i<this.points.length - 1; i++) {
|
@@ -1364,15 +1364,15 @@ if(!Array.prototype.indexOf){
|
|
1364
1364
|
}
|
1365
1365
|
markers.push([this.points[this.points.length-1], markers[markers.length-1][1]]);
|
1366
1366
|
return markers;
|
1367
|
-
}
|
1367
|
+
}
|
1368
1368
|
}
|
1369
|
-
svg.Element.polyline.prototype = new svg.Element.PathElementBase;
|
1370
|
-
|
1369
|
+
svg.Element.polyline.prototype = new svg.Element.PathElementBase;
|
1370
|
+
|
1371
1371
|
// polygon element
|
1372
1372
|
svg.Element.polygon = function(node) {
|
1373
1373
|
this.base = svg.Element.polyline;
|
1374
1374
|
this.base(node);
|
1375
|
-
|
1375
|
+
|
1376
1376
|
this.basePath = this.path;
|
1377
1377
|
this.path = function(ctx) {
|
1378
1378
|
var bb = this.basePath(ctx);
|
@@ -1389,7 +1389,7 @@ if(!Array.prototype.indexOf){
|
|
1389
1389
|
svg.Element.path = function(node) {
|
1390
1390
|
this.base = svg.Element.PathElementBase;
|
1391
1391
|
this.base(node);
|
1392
|
-
|
1392
|
+
|
1393
1393
|
var d = this.attribute('d').value;
|
1394
1394
|
// TODO: convert to real lexer based on http://www.w3.org/TR/SVG11/paths.html#PathDataBNF
|
1395
1395
|
d = d.replace(/,/gm,' '); // get rid of all commas
|
@@ -1404,7 +1404,7 @@ if(!Array.prototype.indexOf){
|
|
1404
1404
|
d = svg.trim(d);
|
1405
1405
|
this.PathParser = new (function(d) {
|
1406
1406
|
this.tokens = d.split(' ');
|
1407
|
-
|
1407
|
+
|
1408
1408
|
this.reset = function() {
|
1409
1409
|
this.i = -1;
|
1410
1410
|
this.command = '';
|
@@ -1415,61 +1415,61 @@ if(!Array.prototype.indexOf){
|
|
1415
1415
|
this.points = [];
|
1416
1416
|
this.angles = [];
|
1417
1417
|
}
|
1418
|
-
|
1418
|
+
|
1419
1419
|
this.isEnd = function() {
|
1420
1420
|
return this.i >= this.tokens.length - 1;
|
1421
1421
|
}
|
1422
|
-
|
1422
|
+
|
1423
1423
|
this.isCommandOrEnd = function() {
|
1424
1424
|
if (this.isEnd()) return true;
|
1425
1425
|
return this.tokens[this.i + 1].match(/^[A-Za-z]$/) != null;
|
1426
1426
|
}
|
1427
|
-
|
1427
|
+
|
1428
1428
|
this.isRelativeCommand = function() {
|
1429
1429
|
return this.command == this.command.toLowerCase();
|
1430
1430
|
}
|
1431
|
-
|
1431
|
+
|
1432
1432
|
this.getToken = function() {
|
1433
1433
|
this.i = this.i + 1;
|
1434
1434
|
return this.tokens[this.i];
|
1435
1435
|
}
|
1436
|
-
|
1436
|
+
|
1437
1437
|
this.getScalar = function() {
|
1438
1438
|
return parseFloat(this.getToken());
|
1439
1439
|
}
|
1440
|
-
|
1440
|
+
|
1441
1441
|
this.nextCommand = function() {
|
1442
1442
|
this.previousCommand = this.command;
|
1443
1443
|
this.command = this.getToken();
|
1444
|
-
}
|
1445
|
-
|
1444
|
+
}
|
1445
|
+
|
1446
1446
|
this.getPoint = function() {
|
1447
1447
|
var p = new svg.Point(this.getScalar(), this.getScalar());
|
1448
1448
|
return this.makeAbsolute(p);
|
1449
1449
|
}
|
1450
|
-
|
1450
|
+
|
1451
1451
|
this.getAsControlPoint = function() {
|
1452
1452
|
var p = this.getPoint();
|
1453
1453
|
this.control = p;
|
1454
1454
|
return p;
|
1455
1455
|
}
|
1456
|
-
|
1456
|
+
|
1457
1457
|
this.getAsCurrentPoint = function() {
|
1458
1458
|
var p = this.getPoint();
|
1459
1459
|
this.current = p;
|
1460
|
-
return p;
|
1460
|
+
return p;
|
1461
1461
|
}
|
1462
|
-
|
1462
|
+
|
1463
1463
|
this.getReflectedControlPoint = function() {
|
1464
1464
|
if (this.previousCommand.toLowerCase() != 'c' && this.previousCommand.toLowerCase() != 's') {
|
1465
1465
|
return this.current;
|
1466
1466
|
}
|
1467
|
-
|
1467
|
+
|
1468
1468
|
// reflect point
|
1469
|
-
var p = new svg.Point(2 * this.current.x - this.control.x, 2 * this.current.y - this.control.y);
|
1469
|
+
var p = new svg.Point(2 * this.current.x - this.control.x, 2 * this.current.y - this.control.y);
|
1470
1470
|
return p;
|
1471
1471
|
}
|
1472
|
-
|
1472
|
+
|
1473
1473
|
this.makeAbsolute = function(p) {
|
1474
1474
|
if (this.isRelativeCommand()) {
|
1475
1475
|
p.x = this.current.x + p.x;
|
@@ -1477,7 +1477,7 @@ if(!Array.prototype.indexOf){
|
|
1477
1477
|
}
|
1478
1478
|
return p;
|
1479
1479
|
}
|
1480
|
-
|
1480
|
+
|
1481
1481
|
this.addMarker = function(p, from, priorTo) {
|
1482
1482
|
// if the last angle isn't filled in because we didn't have this point yet ...
|
1483
1483
|
if (priorTo != null && this.angles.length > 0 && this.angles[this.angles.length-1] == null) {
|
@@ -1485,12 +1485,12 @@ if(!Array.prototype.indexOf){
|
|
1485
1485
|
}
|
1486
1486
|
this.addMarkerAngle(p, from == null ? null : from.angleTo(p));
|
1487
1487
|
}
|
1488
|
-
|
1488
|
+
|
1489
1489
|
this.addMarkerAngle = function(p, a) {
|
1490
1490
|
this.points.push(p);
|
1491
1491
|
this.angles.push(a);
|
1492
|
-
}
|
1493
|
-
|
1492
|
+
}
|
1493
|
+
|
1494
1494
|
this.getMarkerPoints = function() { return this.points; }
|
1495
1495
|
this.getMarkerAngles = function() {
|
1496
1496
|
for (var i=0; i<this.angles.length; i++) {
|
@@ -1688,7 +1688,7 @@ if(!Array.prototype.indexOf){
|
|
1688
1688
|
this.getMarkers = function() {
|
1689
1689
|
var points = this.PathParser.getMarkerPoints();
|
1690
1690
|
var angles = this.PathParser.getMarkerAngles();
|
1691
|
-
|
1691
|
+
|
1692
1692
|
var markers = [];
|
1693
1693
|
for (var i=0; i<points.length; i++) {
|
1694
1694
|
markers.push([points[i], angles[i]]);
|
@@ -1697,12 +1697,12 @@ if(!Array.prototype.indexOf){
|
|
1697
1697
|
}
|
1698
1698
|
}
|
1699
1699
|
svg.Element.path.prototype = new svg.Element.PathElementBase;
|
1700
|
-
|
1700
|
+
|
1701
1701
|
// pattern element
|
1702
1702
|
svg.Element.pattern = function(node) {
|
1703
1703
|
this.base = svg.Element.ElementBase;
|
1704
1704
|
this.base(node);
|
1705
|
-
|
1705
|
+
|
1706
1706
|
this.createPattern = function(ctx, element) {
|
1707
1707
|
// render me using a temporary svg element
|
1708
1708
|
var tempSvg = new svg.Element.svg();
|
@@ -1712,28 +1712,28 @@ if(!Array.prototype.indexOf){
|
|
1712
1712
|
tempSvg.attributes['width'] = new svg.Property('width', this.attribute('width').value);
|
1713
1713
|
tempSvg.attributes['height'] = new svg.Property('height', this.attribute('height').value);
|
1714
1714
|
tempSvg.children = this.children;
|
1715
|
-
|
1715
|
+
|
1716
1716
|
var c = document.createElement('canvas');
|
1717
1717
|
c.width = this.attribute('width').Length.toPixels('x');
|
1718
1718
|
c.height = this.attribute('height').Length.toPixels('y');
|
1719
|
-
tempSvg.render(c.getContext('2d'));
|
1719
|
+
tempSvg.render(c.getContext('2d'));
|
1720
1720
|
return ctx.createPattern(c, 'repeat');
|
1721
1721
|
}
|
1722
1722
|
}
|
1723
1723
|
svg.Element.pattern.prototype = new svg.Element.ElementBase;
|
1724
|
-
|
1724
|
+
|
1725
1725
|
// marker element
|
1726
1726
|
svg.Element.marker = function(node) {
|
1727
1727
|
this.base = svg.Element.ElementBase;
|
1728
1728
|
this.base(node);
|
1729
|
-
|
1729
|
+
|
1730
1730
|
this.baseRender = this.render;
|
1731
1731
|
this.render = function(ctx, point, angle) {
|
1732
1732
|
ctx.translate(point.x, point.y);
|
1733
1733
|
if (this.attribute('orient').valueOrDefault('auto') == 'auto') ctx.rotate(angle);
|
1734
1734
|
if (this.attribute('markerUnits').valueOrDefault('strokeWidth') == 'strokeWidth') ctx.scale(ctx.lineWidth, ctx.lineWidth);
|
1735
1735
|
ctx.save();
|
1736
|
-
|
1736
|
+
|
1737
1737
|
// render me using a temporary svg element
|
1738
1738
|
var tempSvg = new svg.Element.svg();
|
1739
1739
|
tempSvg.attributes['viewBox'] = new svg.Property('viewBox', this.attribute('viewBox').value);
|
@@ -1745,7 +1745,7 @@ if(!Array.prototype.indexOf){
|
|
1745
1745
|
tempSvg.attributes['stroke'] = new svg.Property('stroke', this.attribute('stroke').valueOrDefault('none'));
|
1746
1746
|
tempSvg.children = this.children;
|
1747
1747
|
tempSvg.render(ctx);
|
1748
|
-
|
1748
|
+
|
1749
1749
|
ctx.restore();
|
1750
1750
|
if (this.attribute('markerUnits').valueOrDefault('strokeWidth') == 'strokeWidth') ctx.scale(1/ctx.lineWidth, 1/ctx.lineWidth);
|
1751
1751
|
if (this.attribute('orient').valueOrDefault('auto') == 'auto') ctx.rotate(-angle);
|
@@ -1753,99 +1753,99 @@ if(!Array.prototype.indexOf){
|
|
1753
1753
|
}
|
1754
1754
|
}
|
1755
1755
|
svg.Element.marker.prototype = new svg.Element.ElementBase;
|
1756
|
-
|
1756
|
+
|
1757
1757
|
// definitions element
|
1758
1758
|
svg.Element.defs = function(node) {
|
1759
1759
|
this.base = svg.Element.ElementBase;
|
1760
|
-
this.base(node);
|
1761
|
-
|
1760
|
+
this.base(node);
|
1761
|
+
|
1762
1762
|
this.render = function(ctx) {
|
1763
1763
|
// NOOP
|
1764
1764
|
}
|
1765
1765
|
}
|
1766
1766
|
svg.Element.defs.prototype = new svg.Element.ElementBase;
|
1767
|
-
|
1767
|
+
|
1768
1768
|
// base for gradients
|
1769
1769
|
svg.Element.GradientBase = function(node) {
|
1770
1770
|
this.base = svg.Element.ElementBase;
|
1771
1771
|
this.base(node);
|
1772
|
-
|
1772
|
+
|
1773
1773
|
this.gradientUnits = this.attribute('gradientUnits').valueOrDefault('objectBoundingBox');
|
1774
|
-
|
1775
|
-
this.stops = [];
|
1774
|
+
|
1775
|
+
this.stops = [];
|
1776
1776
|
for (var i=0; i<this.children.length; i++) {
|
1777
1777
|
var child = this.children[i];
|
1778
1778
|
this.stops.push(child);
|
1779
|
-
}
|
1780
|
-
|
1779
|
+
}
|
1780
|
+
|
1781
1781
|
this.getGradient = function() {
|
1782
1782
|
// OVERRIDE ME!
|
1783
|
-
}
|
1783
|
+
}
|
1784
1784
|
|
1785
1785
|
this.createGradient = function(ctx, element) {
|
1786
1786
|
var stopsContainer = this;
|
1787
1787
|
if (this.attribute('xlink:href').hasValue()) {
|
1788
1788
|
stopsContainer = this.attribute('xlink:href').Definition.getDefinition();
|
1789
1789
|
}
|
1790
|
-
|
1790
|
+
|
1791
1791
|
var g = this.getGradient(ctx, element);
|
1792
1792
|
for (var i=0; i<stopsContainer.stops.length; i++) {
|
1793
1793
|
g.addColorStop(stopsContainer.stops[i].offset, stopsContainer.stops[i].color);
|
1794
1794
|
}
|
1795
|
-
|
1795
|
+
|
1796
1796
|
if (this.attribute('gradientTransform').hasValue()) {
|
1797
1797
|
// render as transformed pattern on temporary canvas
|
1798
1798
|
var rootView = svg.ViewPort.viewPorts[0];
|
1799
|
-
|
1799
|
+
|
1800
1800
|
var rect = new svg.Element.rect();
|
1801
1801
|
rect.attributes['x'] = new svg.Property('x', -svg.MAX_VIRTUAL_PIXELS/3.0);
|
1802
1802
|
rect.attributes['y'] = new svg.Property('y', -svg.MAX_VIRTUAL_PIXELS/3.0);
|
1803
1803
|
rect.attributes['width'] = new svg.Property('width', svg.MAX_VIRTUAL_PIXELS);
|
1804
1804
|
rect.attributes['height'] = new svg.Property('height', svg.MAX_VIRTUAL_PIXELS);
|
1805
|
-
|
1805
|
+
|
1806
1806
|
var group = new svg.Element.g();
|
1807
1807
|
group.attributes['transform'] = new svg.Property('transform', this.attribute('gradientTransform').value);
|
1808
1808
|
group.children = [ rect ];
|
1809
|
-
|
1809
|
+
|
1810
1810
|
var tempSvg = new svg.Element.svg();
|
1811
1811
|
tempSvg.attributes['x'] = new svg.Property('x', 0);
|
1812
1812
|
tempSvg.attributes['y'] = new svg.Property('y', 0);
|
1813
1813
|
tempSvg.attributes['width'] = new svg.Property('width', rootView.width);
|
1814
1814
|
tempSvg.attributes['height'] = new svg.Property('height', rootView.height);
|
1815
1815
|
tempSvg.children = [ group ];
|
1816
|
-
|
1816
|
+
|
1817
1817
|
var c = document.createElement('canvas');
|
1818
1818
|
c.width = rootView.width;
|
1819
1819
|
c.height = rootView.height;
|
1820
1820
|
var tempCtx = c.getContext('2d');
|
1821
1821
|
tempCtx.fillStyle = g;
|
1822
|
-
tempSvg.render(tempCtx);
|
1822
|
+
tempSvg.render(tempCtx);
|
1823
1823
|
return tempCtx.createPattern(c, 'no-repeat');
|
1824
1824
|
}
|
1825
|
-
|
1826
|
-
return g;
|
1825
|
+
|
1826
|
+
return g;
|
1827
1827
|
}
|
1828
1828
|
}
|
1829
1829
|
svg.Element.GradientBase.prototype = new svg.Element.ElementBase;
|
1830
|
-
|
1830
|
+
|
1831
1831
|
// linear gradient element
|
1832
1832
|
svg.Element.linearGradient = function(node) {
|
1833
1833
|
this.base = svg.Element.GradientBase;
|
1834
1834
|
this.base(node);
|
1835
|
-
|
1835
|
+
|
1836
1836
|
this.getGradient = function(ctx, element) {
|
1837
1837
|
var bb = element.getBoundingBox();
|
1838
|
-
|
1839
|
-
var x1 = (this.gradientUnits == 'objectBoundingBox'
|
1840
|
-
? bb.x() + bb.width() * this.attribute('x1').numValue()
|
1838
|
+
|
1839
|
+
var x1 = (this.gradientUnits == 'objectBoundingBox'
|
1840
|
+
? bb.x() + bb.width() * this.attribute('x1').numValue()
|
1841
1841
|
: this.attribute('x1').Length.toPixels('x'));
|
1842
|
-
var y1 = (this.gradientUnits == 'objectBoundingBox'
|
1842
|
+
var y1 = (this.gradientUnits == 'objectBoundingBox'
|
1843
1843
|
? bb.y() + bb.height() * this.attribute('y1').numValue()
|
1844
1844
|
: this.attribute('y1').Length.toPixels('y'));
|
1845
|
-
var x2 = (this.gradientUnits == 'objectBoundingBox'
|
1845
|
+
var x2 = (this.gradientUnits == 'objectBoundingBox'
|
1846
1846
|
? bb.x() + bb.width() * this.attribute('x2').numValue()
|
1847
1847
|
: this.attribute('x2').Length.toPixels('x'));
|
1848
|
-
var y2 = (this.gradientUnits == 'objectBoundingBox'
|
1848
|
+
var y2 = (this.gradientUnits == 'objectBoundingBox'
|
1849
1849
|
? bb.y() + bb.height() * this.attribute('y2').numValue()
|
1850
1850
|
: this.attribute('y2').Length.toPixels('y'));
|
1851
1851
|
|
@@ -1853,92 +1853,92 @@ if(!Array.prototype.indexOf){
|
|
1853
1853
|
}
|
1854
1854
|
}
|
1855
1855
|
svg.Element.linearGradient.prototype = new svg.Element.GradientBase;
|
1856
|
-
|
1856
|
+
|
1857
1857
|
// radial gradient element
|
1858
1858
|
svg.Element.radialGradient = function(node) {
|
1859
1859
|
this.base = svg.Element.GradientBase;
|
1860
1860
|
this.base(node);
|
1861
|
-
|
1861
|
+
|
1862
1862
|
this.getGradient = function(ctx, element) {
|
1863
1863
|
var bb = element.getBoundingBox();
|
1864
|
-
|
1865
|
-
var cx = (this.gradientUnits == 'objectBoundingBox'
|
1866
|
-
? bb.x() + bb.width() * this.attribute('cx').numValue()
|
1864
|
+
|
1865
|
+
var cx = (this.gradientUnits == 'objectBoundingBox'
|
1866
|
+
? bb.x() + bb.width() * this.attribute('cx').numValue()
|
1867
1867
|
: this.attribute('cx').Length.toPixels('x'));
|
1868
|
-
var cy = (this.gradientUnits == 'objectBoundingBox'
|
1869
|
-
? bb.y() + bb.height() * this.attribute('cy').numValue()
|
1868
|
+
var cy = (this.gradientUnits == 'objectBoundingBox'
|
1869
|
+
? bb.y() + bb.height() * this.attribute('cy').numValue()
|
1870
1870
|
: this.attribute('cy').Length.toPixels('y'));
|
1871
|
-
|
1871
|
+
|
1872
1872
|
var fx = cx;
|
1873
1873
|
var fy = cy;
|
1874
1874
|
if (this.attribute('fx').hasValue()) {
|
1875
|
-
fx = (this.gradientUnits == 'objectBoundingBox'
|
1876
|
-
? bb.x() + bb.width() * this.attribute('fx').numValue()
|
1875
|
+
fx = (this.gradientUnits == 'objectBoundingBox'
|
1876
|
+
? bb.x() + bb.width() * this.attribute('fx').numValue()
|
1877
1877
|
: this.attribute('fx').Length.toPixels('x'));
|
1878
1878
|
}
|
1879
1879
|
if (this.attribute('fy').hasValue()) {
|
1880
|
-
fy = (this.gradientUnits == 'objectBoundingBox'
|
1881
|
-
? bb.y() + bb.height() * this.attribute('fy').numValue()
|
1880
|
+
fy = (this.gradientUnits == 'objectBoundingBox'
|
1881
|
+
? bb.y() + bb.height() * this.attribute('fy').numValue()
|
1882
1882
|
: this.attribute('fy').Length.toPixels('y'));
|
1883
1883
|
}
|
1884
|
-
|
1885
|
-
var r = (this.gradientUnits == 'objectBoundingBox'
|
1884
|
+
|
1885
|
+
var r = (this.gradientUnits == 'objectBoundingBox'
|
1886
1886
|
? (bb.width() + bb.height()) / 2.0 * this.attribute('r').numValue()
|
1887
1887
|
: this.attribute('r').Length.toPixels());
|
1888
|
-
|
1888
|
+
|
1889
1889
|
return ctx.createRadialGradient(fx, fy, 0, cx, cy, r);
|
1890
1890
|
}
|
1891
1891
|
}
|
1892
1892
|
svg.Element.radialGradient.prototype = new svg.Element.GradientBase;
|
1893
|
-
|
1893
|
+
|
1894
1894
|
// gradient stop element
|
1895
1895
|
svg.Element.stop = function(node) {
|
1896
1896
|
this.base = svg.Element.ElementBase;
|
1897
1897
|
this.base(node);
|
1898
|
-
|
1898
|
+
|
1899
1899
|
this.offset = this.attribute('offset').numValue();
|
1900
|
-
|
1900
|
+
|
1901
1901
|
var stopColor = this.style('stop-color');
|
1902
1902
|
if (this.style('stop-opacity').hasValue()) stopColor = stopColor.Color.addOpacity(this.style('stop-opacity').value);
|
1903
1903
|
this.color = stopColor.value;
|
1904
1904
|
}
|
1905
1905
|
svg.Element.stop.prototype = new svg.Element.ElementBase;
|
1906
|
-
|
1906
|
+
|
1907
1907
|
// animation base element
|
1908
1908
|
svg.Element.AnimateBase = function(node) {
|
1909
1909
|
this.base = svg.Element.ElementBase;
|
1910
1910
|
this.base(node);
|
1911
|
-
|
1911
|
+
|
1912
1912
|
svg.Animations.push(this);
|
1913
|
-
|
1913
|
+
|
1914
1914
|
this.duration = 0.0;
|
1915
1915
|
this.begin = this.attribute('begin').Time.toMilliseconds();
|
1916
1916
|
this.maxDuration = this.begin + this.attribute('dur').Time.toMilliseconds();
|
1917
|
-
|
1917
|
+
|
1918
1918
|
this.getProperty = function() {
|
1919
1919
|
var attributeType = this.attribute('attributeType').value;
|
1920
1920
|
var attributeName = this.attribute('attributeName').value;
|
1921
|
-
|
1921
|
+
|
1922
1922
|
if (attributeType == 'CSS') {
|
1923
1923
|
return this.parent.style(attributeName, true);
|
1924
1924
|
}
|
1925
|
-
return this.parent.attribute(attributeName, true);
|
1925
|
+
return this.parent.attribute(attributeName, true);
|
1926
1926
|
};
|
1927
|
-
|
1927
|
+
|
1928
1928
|
this.initialValue = null;
|
1929
|
-
this.removed = false;
|
1929
|
+
this.removed = false;
|
1930
1930
|
|
1931
1931
|
this.calcValue = function() {
|
1932
1932
|
// OVERRIDE ME!
|
1933
1933
|
return '';
|
1934
1934
|
}
|
1935
|
-
|
1936
|
-
this.update = function(delta) {
|
1935
|
+
|
1936
|
+
this.update = function(delta) {
|
1937
1937
|
// set initial value
|
1938
1938
|
if (this.initialValue == null) {
|
1939
1939
|
this.initialValue = this.getProperty().value;
|
1940
1940
|
}
|
1941
|
-
|
1941
|
+
|
1942
1942
|
// if we're past the end time
|
1943
1943
|
if (this.duration > this.maxDuration) {
|
1944
1944
|
// loop for indefinitely repeating animations
|
@@ -1953,49 +1953,49 @@ if(!Array.prototype.indexOf){
|
|
1953
1953
|
else {
|
1954
1954
|
return false; // no updates made
|
1955
1955
|
}
|
1956
|
-
}
|
1956
|
+
}
|
1957
1957
|
this.duration = this.duration + delta;
|
1958
|
-
|
1958
|
+
|
1959
1959
|
// if we're past the begin time
|
1960
1960
|
var updated = false;
|
1961
1961
|
if (this.begin < this.duration) {
|
1962
1962
|
var newValue = this.calcValue(); // tween
|
1963
|
-
|
1963
|
+
|
1964
1964
|
if (this.attribute('type').hasValue()) {
|
1965
1965
|
// for transform, etc.
|
1966
1966
|
var type = this.attribute('type').value;
|
1967
1967
|
newValue = type + '(' + newValue + ')';
|
1968
1968
|
}
|
1969
|
-
|
1969
|
+
|
1970
1970
|
this.getProperty().value = newValue;
|
1971
1971
|
updated = true;
|
1972
1972
|
}
|
1973
|
-
|
1973
|
+
|
1974
1974
|
return updated;
|
1975
1975
|
}
|
1976
|
-
|
1976
|
+
|
1977
1977
|
// fraction of duration we've covered
|
1978
1978
|
this.progress = function() {
|
1979
1979
|
return ((this.duration - this.begin) / (this.maxDuration - this.begin));
|
1980
|
-
}
|
1980
|
+
}
|
1981
1981
|
}
|
1982
1982
|
svg.Element.AnimateBase.prototype = new svg.Element.ElementBase;
|
1983
|
-
|
1983
|
+
|
1984
1984
|
// animate element
|
1985
1985
|
svg.Element.animate = function(node) {
|
1986
1986
|
this.base = svg.Element.AnimateBase;
|
1987
1987
|
this.base(node);
|
1988
|
-
|
1988
|
+
|
1989
1989
|
this.calcValue = function() {
|
1990
1990
|
var from = this.attribute('from').numValue();
|
1991
1991
|
var to = this.attribute('to').numValue();
|
1992
|
-
|
1992
|
+
|
1993
1993
|
// tween value linearly
|
1994
|
-
return from + (to - from) * this.progress();
|
1994
|
+
return from + (to - from) * this.progress();
|
1995
1995
|
};
|
1996
1996
|
}
|
1997
1997
|
svg.Element.animate.prototype = new svg.Element.AnimateBase;
|
1998
|
-
|
1998
|
+
|
1999
1999
|
// animate color element
|
2000
2000
|
svg.Element.animateColor = function(node) {
|
2001
2001
|
this.base = svg.Element.AnimateBase;
|
@@ -2004,7 +2004,7 @@ if(!Array.prototype.indexOf){
|
|
2004
2004
|
this.calcValue = function() {
|
2005
2005
|
var from = new RGBColor(this.attribute('from').value);
|
2006
2006
|
var to = new RGBColor(this.attribute('to').value);
|
2007
|
-
|
2007
|
+
|
2008
2008
|
if (from.ok && to.ok) {
|
2009
2009
|
// tween color linearly
|
2010
2010
|
var r = from.r + (to.r - from.r) * this.progress();
|
@@ -2016,26 +2016,26 @@ if(!Array.prototype.indexOf){
|
|
2016
2016
|
};
|
2017
2017
|
}
|
2018
2018
|
svg.Element.animateColor.prototype = new svg.Element.AnimateBase;
|
2019
|
-
|
2019
|
+
|
2020
2020
|
// animate transform element
|
2021
2021
|
svg.Element.animateTransform = function(node) {
|
2022
2022
|
this.base = svg.Element.animate;
|
2023
2023
|
this.base(node);
|
2024
2024
|
}
|
2025
2025
|
svg.Element.animateTransform.prototype = new svg.Element.animate;
|
2026
|
-
|
2026
|
+
|
2027
2027
|
// font element
|
2028
2028
|
svg.Element.font = function(node) {
|
2029
2029
|
this.base = svg.Element.ElementBase;
|
2030
2030
|
this.base(node);
|
2031
2031
|
|
2032
|
-
this.horizAdvX = this.attribute('horiz-adv-x').numValue();
|
2033
|
-
|
2032
|
+
this.horizAdvX = this.attribute('horiz-adv-x').numValue();
|
2033
|
+
|
2034
2034
|
this.isRTL = false;
|
2035
2035
|
this.isArabic = false;
|
2036
2036
|
this.fontFace = null;
|
2037
2037
|
this.missingGlyph = null;
|
2038
|
-
this.glyphs = [];
|
2038
|
+
this.glyphs = [];
|
2039
2039
|
for (var i=0; i<this.children.length; i++) {
|
2040
2040
|
var child = this.children[i];
|
2041
2041
|
if (child.type == 'font-face') {
|
@@ -2056,46 +2056,46 @@ if(!Array.prototype.indexOf){
|
|
2056
2056
|
this.glyphs[child.unicode] = child;
|
2057
2057
|
}
|
2058
2058
|
}
|
2059
|
-
}
|
2059
|
+
}
|
2060
2060
|
}
|
2061
2061
|
svg.Element.font.prototype = new svg.Element.ElementBase;
|
2062
|
-
|
2062
|
+
|
2063
2063
|
// font-face element
|
2064
2064
|
svg.Element.fontface = function(node) {
|
2065
2065
|
this.base = svg.Element.ElementBase;
|
2066
|
-
this.base(node);
|
2067
|
-
|
2066
|
+
this.base(node);
|
2067
|
+
|
2068
2068
|
this.ascent = this.attribute('ascent').value;
|
2069
2069
|
this.descent = this.attribute('descent').value;
|
2070
|
-
this.unitsPerEm = this.attribute('units-per-em').numValue();
|
2070
|
+
this.unitsPerEm = this.attribute('units-per-em').numValue();
|
2071
2071
|
}
|
2072
2072
|
svg.Element.fontface.prototype = new svg.Element.ElementBase;
|
2073
|
-
|
2073
|
+
|
2074
2074
|
// missing-glyph element
|
2075
2075
|
svg.Element.missingglyph = function(node) {
|
2076
2076
|
this.base = svg.Element.path;
|
2077
|
-
this.base(node);
|
2078
|
-
|
2077
|
+
this.base(node);
|
2078
|
+
|
2079
2079
|
this.horizAdvX = 0;
|
2080
2080
|
}
|
2081
2081
|
svg.Element.missingglyph.prototype = new svg.Element.path;
|
2082
|
-
|
2082
|
+
|
2083
2083
|
// glyph element
|
2084
2084
|
svg.Element.glyph = function(node) {
|
2085
2085
|
this.base = svg.Element.path;
|
2086
|
-
this.base(node);
|
2087
|
-
|
2086
|
+
this.base(node);
|
2087
|
+
|
2088
2088
|
this.horizAdvX = this.attribute('horiz-adv-x').numValue();
|
2089
2089
|
this.unicode = this.attribute('unicode').value;
|
2090
2090
|
this.arabicForm = this.attribute('arabic-form').value;
|
2091
2091
|
}
|
2092
2092
|
svg.Element.glyph.prototype = new svg.Element.path;
|
2093
|
-
|
2093
|
+
|
2094
2094
|
// text element
|
2095
2095
|
svg.Element.text = function(node) {
|
2096
2096
|
this.base = svg.Element.RenderedElementBase;
|
2097
2097
|
this.base(node);
|
2098
|
-
|
2098
|
+
|
2099
2099
|
if (node != null) {
|
2100
2100
|
// add children
|
2101
2101
|
this.children = [];
|
@@ -2109,21 +2109,21 @@ if(!Array.prototype.indexOf){
|
|
2109
2109
|
}
|
2110
2110
|
}
|
2111
2111
|
}
|
2112
|
-
|
2112
|
+
|
2113
2113
|
this.baseSetContext = this.setContext;
|
2114
2114
|
this.setContext = function(ctx) {
|
2115
2115
|
this.baseSetContext(ctx);
|
2116
2116
|
if (this.style('dominant-baseline').hasValue()) ctx.textBaseline = this.style('dominant-baseline').value;
|
2117
2117
|
if (this.style('alignment-baseline').hasValue()) ctx.textBaseline = this.style('alignment-baseline').value;
|
2118
2118
|
}
|
2119
|
-
|
2119
|
+
|
2120
2120
|
this.renderChildren = function(ctx) {
|
2121
2121
|
var textAnchor = this.style('text-anchor').valueOrDefault('start');
|
2122
2122
|
var x = this.attribute('x').Length.toPixels('x');
|
2123
2123
|
var y = this.attribute('y').Length.toPixels('y');
|
2124
2124
|
for (var i=0; i<this.children.length; i++) {
|
2125
2125
|
var child = this.children[i];
|
2126
|
-
|
2126
|
+
|
2127
2127
|
if (child.attribute('x').hasValue()) {
|
2128
2128
|
child.x = child.attribute('x').Length.toPixels('x');
|
2129
2129
|
}
|
@@ -2131,7 +2131,7 @@ if(!Array.prototype.indexOf){
|
|
2131
2131
|
if (child.attribute('dx').hasValue()) x += child.attribute('dx').Length.toPixels('x');
|
2132
2132
|
child.x = x;
|
2133
2133
|
}
|
2134
|
-
|
2134
|
+
|
2135
2135
|
var childLength = child.measureText(ctx);
|
2136
2136
|
if (textAnchor != 'start' && (i==0 || child.attribute('x').hasValue())) { // new group?
|
2137
2137
|
// loop through rest of children
|
@@ -2144,33 +2144,33 @@ if(!Array.prototype.indexOf){
|
|
2144
2144
|
child.x -= (textAnchor == 'end' ? groupLength : groupLength / 2.0);
|
2145
2145
|
}
|
2146
2146
|
x = child.x + childLength;
|
2147
|
-
|
2147
|
+
|
2148
2148
|
if (child.attribute('y').hasValue()) {
|
2149
2149
|
child.y = child.attribute('y').Length.toPixels('y');
|
2150
2150
|
}
|
2151
2151
|
else {
|
2152
2152
|
if (child.attribute('dy').hasValue()) y += child.attribute('dy').Length.toPixels('y');
|
2153
2153
|
child.y = y;
|
2154
|
-
}
|
2154
|
+
}
|
2155
2155
|
y = child.y;
|
2156
|
-
|
2156
|
+
|
2157
2157
|
child.render(ctx);
|
2158
2158
|
}
|
2159
2159
|
}
|
2160
2160
|
}
|
2161
2161
|
svg.Element.text.prototype = new svg.Element.RenderedElementBase;
|
2162
|
-
|
2162
|
+
|
2163
2163
|
// text base
|
2164
2164
|
svg.Element.TextElementBase = function(node) {
|
2165
2165
|
this.base = svg.Element.RenderedElementBase;
|
2166
2166
|
this.base(node);
|
2167
|
-
|
2167
|
+
|
2168
2168
|
this.getGlyph = function(font, text, i) {
|
2169
2169
|
var c = text[i];
|
2170
2170
|
var glyph = null;
|
2171
2171
|
if (font.isArabic) {
|
2172
2172
|
var arabicForm = 'isolated';
|
2173
|
-
if ((i==0 || text[i-1]==' ') && i<text.length-2 && text[i+1]!=' ') arabicForm = 'terminal';
|
2173
|
+
if ((i==0 || text[i-1]==' ') && i<text.length-2 && text[i+1]!=' ') arabicForm = 'terminal';
|
2174
2174
|
if (i>0 && text[i-1]!=' ' && i<text.length-2 && text[i+1]!=' ') arabicForm = 'medial';
|
2175
2175
|
if (i>0 && text[i-1]!=' ' && (i == text.length-1 || text[i+1]==' ')) arabicForm = 'initial';
|
2176
2176
|
if (typeof(font.glyphs[c]) != 'undefined') {
|
@@ -2184,7 +2184,7 @@ if(!Array.prototype.indexOf){
|
|
2184
2184
|
if (glyph == null) glyph = font.missingGlyph;
|
2185
2185
|
return glyph;
|
2186
2186
|
}
|
2187
|
-
|
2187
|
+
|
2188
2188
|
this.renderChildren = function(ctx) {
|
2189
2189
|
var customFont = this.parent.style('font-family').Definition.getDefinition();
|
2190
2190
|
if (customFont != null) {
|
@@ -2192,7 +2192,7 @@ if(!Array.prototype.indexOf){
|
|
2192
2192
|
var fontStyle = this.parent.style('font-style').valueOrDefault(svg.Font.Parse(svg.ctx.font).fontStyle);
|
2193
2193
|
var text = this.getText();
|
2194
2194
|
if (customFont.isRTL) text = text.split("").reverse().join("");
|
2195
|
-
|
2195
|
+
|
2196
2196
|
var dx = svg.ToNumberArray(this.parent.attribute('dx').value);
|
2197
2197
|
for (var i=0; i<text.length; i++) {
|
2198
2198
|
var glyph = this.getGlyph(customFont, text, i);
|
@@ -2206,8 +2206,8 @@ if(!Array.prototype.indexOf){
|
|
2206
2206
|
if (fontStyle == 'italic') ctx.transform(1, 0, -.4, 1, 0, 0);
|
2207
2207
|
ctx.lineWidth = lw;
|
2208
2208
|
ctx.scale(1/scale, -1/scale);
|
2209
|
-
ctx.translate(-this.x, -this.y);
|
2210
|
-
|
2209
|
+
ctx.translate(-this.x, -this.y);
|
2210
|
+
|
2211
2211
|
this.x += fontSize * (glyph.horizAdvX || customFont.horizAdvX) / customFont.fontFace.unitsPerEm;
|
2212
2212
|
if (typeof(dx[i]) != 'undefined' && !isNaN(dx[i])) {
|
2213
2213
|
this.x += dx[i];
|
@@ -2215,15 +2215,15 @@ if(!Array.prototype.indexOf){
|
|
2215
2215
|
}
|
2216
2216
|
return;
|
2217
2217
|
}
|
2218
|
-
|
2218
|
+
|
2219
2219
|
if (ctx.strokeStyle != '') ctx.strokeText(svg.compressSpaces(this.getText()), this.x, this.y);
|
2220
2220
|
if (ctx.fillStyle != '') ctx.fillText(svg.compressSpaces(this.getText()), this.x, this.y);
|
2221
2221
|
}
|
2222
|
-
|
2222
|
+
|
2223
2223
|
this.getText = function() {
|
2224
2224
|
// OVERRIDE ME
|
2225
2225
|
}
|
2226
|
-
|
2226
|
+
|
2227
2227
|
this.measureText = function(ctx) {
|
2228
2228
|
var customFont = this.parent.style('font-family').Definition.getDefinition();
|
2229
2229
|
if (customFont != null) {
|
@@ -2241,10 +2241,10 @@ if(!Array.prototype.indexOf){
|
|
2241
2241
|
}
|
2242
2242
|
return measure;
|
2243
2243
|
}
|
2244
|
-
|
2244
|
+
|
2245
2245
|
var textToMeasure = svg.compressSpaces(this.getText());
|
2246
2246
|
if (!ctx.measureText) return textToMeasure.length * 10;
|
2247
|
-
|
2247
|
+
|
2248
2248
|
ctx.save();
|
2249
2249
|
this.setContext(ctx);
|
2250
2250
|
var width = ctx.measureText(textToMeasure).width;
|
@@ -2253,12 +2253,12 @@ if(!Array.prototype.indexOf){
|
|
2253
2253
|
}
|
2254
2254
|
}
|
2255
2255
|
svg.Element.TextElementBase.prototype = new svg.Element.RenderedElementBase;
|
2256
|
-
|
2257
|
-
// tspan
|
2256
|
+
|
2257
|
+
// tspan
|
2258
2258
|
svg.Element.tspan = function(node) {
|
2259
2259
|
this.base = svg.Element.TextElementBase;
|
2260
2260
|
this.base(node);
|
2261
|
-
|
2261
|
+
|
2262
2262
|
this.text = node.nodeType == 3 ? node.nodeValue : // text
|
2263
2263
|
node.childNodes.length > 0 ? node.childNodes[0].nodeValue : // element
|
2264
2264
|
node.text;
|
@@ -2267,34 +2267,34 @@ if(!Array.prototype.indexOf){
|
|
2267
2267
|
}
|
2268
2268
|
}
|
2269
2269
|
svg.Element.tspan.prototype = new svg.Element.TextElementBase;
|
2270
|
-
|
2270
|
+
|
2271
2271
|
// tref
|
2272
2272
|
svg.Element.tref = function(node) {
|
2273
2273
|
this.base = svg.Element.TextElementBase;
|
2274
2274
|
this.base(node);
|
2275
|
-
|
2275
|
+
|
2276
2276
|
this.getText = function() {
|
2277
2277
|
var element = this.attribute('xlink:href').Definition.getDefinition();
|
2278
2278
|
if (element != null) return element.children[0].getText();
|
2279
2279
|
}
|
2280
2280
|
}
|
2281
|
-
svg.Element.tref.prototype = new svg.Element.TextElementBase;
|
2282
|
-
|
2281
|
+
svg.Element.tref.prototype = new svg.Element.TextElementBase;
|
2282
|
+
|
2283
2283
|
// a element
|
2284
2284
|
svg.Element.a = function(node) {
|
2285
2285
|
this.base = svg.Element.TextElementBase;
|
2286
2286
|
this.base(node);
|
2287
|
-
|
2287
|
+
|
2288
2288
|
this.hasText = true;
|
2289
2289
|
for (var i=0; i<node.childNodes.length; i++) {
|
2290
2290
|
if (node.childNodes[i].nodeType != 3) this.hasText = false;
|
2291
2291
|
}
|
2292
|
-
|
2292
|
+
|
2293
2293
|
// this might contain text
|
2294
2294
|
this.text = this.hasText ? node.childNodes[0].nodeValue : '';
|
2295
2295
|
this.getText = function() {
|
2296
2296
|
return this.text;
|
2297
|
-
}
|
2297
|
+
}
|
2298
2298
|
|
2299
2299
|
this.baseRenderChildren = this.renderChildren;
|
2300
2300
|
this.renderChildren = function(ctx) {
|
@@ -2302,7 +2302,7 @@ if(!Array.prototype.indexOf){
|
|
2302
2302
|
// render as text element
|
2303
2303
|
this.baseRenderChildren(ctx);
|
2304
2304
|
var fontSize = new svg.Property('fontSize', svg.Font.Parse(svg.ctx.font).fontSize);
|
2305
|
-
svg.Mouse.checkBoundingBox(this, new svg.BoundingBox(this.x, this.y - fontSize.Length.toPixels('y'), this.x + this.measureText(ctx), this.y));
|
2305
|
+
svg.Mouse.checkBoundingBox(this, new svg.BoundingBox(this.x, this.y - fontSize.Length.toPixels('y'), this.x + this.measureText(ctx), this.y));
|
2306
2306
|
}
|
2307
2307
|
else {
|
2308
2308
|
// render as temporary group
|
@@ -2312,37 +2312,37 @@ if(!Array.prototype.indexOf){
|
|
2312
2312
|
g.render(ctx);
|
2313
2313
|
}
|
2314
2314
|
}
|
2315
|
-
|
2315
|
+
|
2316
2316
|
this.onclick = function() {
|
2317
2317
|
window.open(this.attribute('xlink:href').value);
|
2318
2318
|
}
|
2319
|
-
|
2319
|
+
|
2320
2320
|
this.onmousemove = function() {
|
2321
2321
|
svg.ctx.canvas.style.cursor = 'pointer';
|
2322
2322
|
}
|
2323
2323
|
}
|
2324
|
-
svg.Element.a.prototype = new svg.Element.TextElementBase;
|
2325
|
-
|
2324
|
+
svg.Element.a.prototype = new svg.Element.TextElementBase;
|
2325
|
+
|
2326
2326
|
// image element
|
2327
2327
|
svg.Element.image = function(node) {
|
2328
2328
|
this.base = svg.Element.RenderedElementBase;
|
2329
2329
|
this.base(node);
|
2330
|
-
|
2330
|
+
|
2331
2331
|
svg.Images.push(this);
|
2332
2332
|
this.img = document.createElement('img');
|
2333
2333
|
this.loaded = false;
|
2334
2334
|
var that = this;
|
2335
2335
|
this.img.onload = function() { that.loaded = true; }
|
2336
2336
|
this.img.src = this.attribute('xlink:href').value;
|
2337
|
-
|
2337
|
+
|
2338
2338
|
this.renderChildren = function(ctx) {
|
2339
2339
|
var x = this.attribute('x').Length.toPixels('x');
|
2340
2340
|
var y = this.attribute('y').Length.toPixels('y');
|
2341
|
-
|
2341
|
+
|
2342
2342
|
var width = this.attribute('width').Length.toPixels('x');
|
2343
|
-
var height = this.attribute('height').Length.toPixels('y');
|
2343
|
+
var height = this.attribute('height').Length.toPixels('y');
|
2344
2344
|
if (width == 0 || height == 0) return;
|
2345
|
-
|
2345
|
+
|
2346
2346
|
ctx.save();
|
2347
2347
|
ctx.translate(x, y);
|
2348
2348
|
svg.AspectRatio(ctx,
|
@@ -2352,18 +2352,18 @@ if(!Array.prototype.indexOf){
|
|
2352
2352
|
height,
|
2353
2353
|
this.img.height,
|
2354
2354
|
0,
|
2355
|
-
0);
|
2356
|
-
ctx.drawImage(this.img, 0, 0);
|
2355
|
+
0);
|
2356
|
+
ctx.drawImage(this.img, 0, 0);
|
2357
2357
|
ctx.restore();
|
2358
2358
|
}
|
2359
2359
|
}
|
2360
2360
|
svg.Element.image.prototype = new svg.Element.RenderedElementBase;
|
2361
|
-
|
2361
|
+
|
2362
2362
|
// group element
|
2363
2363
|
svg.Element.g = function(node) {
|
2364
2364
|
this.base = svg.Element.RenderedElementBase;
|
2365
2365
|
this.base(node);
|
2366
|
-
|
2366
|
+
|
2367
2367
|
this.getBoundingBox = function() {
|
2368
2368
|
var bb = new svg.BoundingBox();
|
2369
2369
|
for (var i=0; i<this.children.length; i++) {
|
@@ -2378,21 +2378,21 @@ if(!Array.prototype.indexOf){
|
|
2378
2378
|
svg.Element.symbol = function(node) {
|
2379
2379
|
this.base = svg.Element.RenderedElementBase;
|
2380
2380
|
this.base(node);
|
2381
|
-
|
2381
|
+
|
2382
2382
|
this.baseSetContext = this.setContext;
|
2383
|
-
this.setContext = function(ctx) {
|
2383
|
+
this.setContext = function(ctx) {
|
2384
2384
|
this.baseSetContext(ctx);
|
2385
|
-
|
2385
|
+
|
2386
2386
|
// viewbox
|
2387
|
-
if (this.attribute('viewBox').hasValue()) {
|
2387
|
+
if (this.attribute('viewBox').hasValue()) {
|
2388
2388
|
var viewBox = svg.ToNumberArray(this.attribute('viewBox').value);
|
2389
2389
|
var minX = viewBox[0];
|
2390
2390
|
var minY = viewBox[1];
|
2391
2391
|
width = viewBox[2];
|
2392
2392
|
height = viewBox[3];
|
2393
|
-
|
2393
|
+
|
2394
2394
|
svg.AspectRatio(ctx,
|
2395
|
-
this.attribute('preserveAspectRatio').value,
|
2395
|
+
this.attribute('preserveAspectRatio').value,
|
2396
2396
|
this.attribute('width').Length.toPixels('x'),
|
2397
2397
|
width,
|
2398
2398
|
this.attribute('height').Length.toPixels('y'),
|
@@ -2400,17 +2400,17 @@ if(!Array.prototype.indexOf){
|
|
2400
2400
|
minX,
|
2401
2401
|
minY);
|
2402
2402
|
|
2403
|
-
svg.ViewPort.SetCurrent(viewBox[2], viewBox[3]);
|
2403
|
+
svg.ViewPort.SetCurrent(viewBox[2], viewBox[3]);
|
2404
2404
|
}
|
2405
|
-
}
|
2405
|
+
}
|
2406
2406
|
}
|
2407
|
-
svg.Element.symbol.prototype = new svg.Element.RenderedElementBase;
|
2408
|
-
|
2407
|
+
svg.Element.symbol.prototype = new svg.Element.RenderedElementBase;
|
2408
|
+
|
2409
2409
|
// style element
|
2410
|
-
svg.Element.style = function(node) {
|
2410
|
+
svg.Element.style = function(node) {
|
2411
2411
|
this.base = svg.Element.ElementBase;
|
2412
2412
|
this.base(node);
|
2413
|
-
|
2413
|
+
|
2414
2414
|
// text, or spaces then CDATA
|
2415
2415
|
var css = node.childNodes[0].nodeValue + (node.childNodes.length > 1 ? node.childNodes[1].nodeValue : '');
|
2416
2416
|
css = css.replace(/(\/\*([^*]|[\r\n]|(\*+([^*\/]|[\r\n])))*\*+\/)|(^[\s]*\/\/.*)/gm, ''); // remove comments
|
@@ -2457,60 +2457,60 @@ if(!Array.prototype.indexOf){
|
|
2457
2457
|
}
|
2458
2458
|
}
|
2459
2459
|
svg.Element.style.prototype = new svg.Element.ElementBase;
|
2460
|
-
|
2461
|
-
// use element
|
2460
|
+
|
2461
|
+
// use element
|
2462
2462
|
svg.Element.use = function(node) {
|
2463
2463
|
this.base = svg.Element.RenderedElementBase;
|
2464
2464
|
this.base(node);
|
2465
|
-
|
2465
|
+
|
2466
2466
|
this.baseSetContext = this.setContext;
|
2467
2467
|
this.setContext = function(ctx) {
|
2468
2468
|
this.baseSetContext(ctx);
|
2469
2469
|
if (this.attribute('x').hasValue()) ctx.translate(this.attribute('x').Length.toPixels('x'), 0);
|
2470
2470
|
if (this.attribute('y').hasValue()) ctx.translate(0, this.attribute('y').Length.toPixels('y'));
|
2471
2471
|
}
|
2472
|
-
|
2472
|
+
|
2473
2473
|
this.getDefinition = function() {
|
2474
2474
|
var element = this.attribute('xlink:href').Definition.getDefinition();
|
2475
2475
|
if (this.attribute('width').hasValue()) element.attribute('width', true).value = this.attribute('width').value;
|
2476
2476
|
if (this.attribute('height').hasValue()) element.attribute('height', true).value = this.attribute('height').value;
|
2477
2477
|
return element;
|
2478
2478
|
}
|
2479
|
-
|
2479
|
+
|
2480
2480
|
this.path = function(ctx) {
|
2481
2481
|
var element = this.getDefinition();
|
2482
2482
|
if (element != null) element.path(ctx);
|
2483
2483
|
}
|
2484
|
-
|
2484
|
+
|
2485
2485
|
this.renderChildren = function(ctx) {
|
2486
2486
|
var element = this.getDefinition();
|
2487
2487
|
if (element != null) element.render(ctx);
|
2488
2488
|
}
|
2489
2489
|
}
|
2490
2490
|
svg.Element.use.prototype = new svg.Element.RenderedElementBase;
|
2491
|
-
|
2491
|
+
|
2492
2492
|
// mask element
|
2493
2493
|
svg.Element.mask = function(node) {
|
2494
2494
|
this.base = svg.Element.ElementBase;
|
2495
2495
|
this.base(node);
|
2496
|
-
|
2496
|
+
|
2497
2497
|
this.apply = function(ctx, element) {
|
2498
|
-
// render as temp svg
|
2498
|
+
// render as temp svg
|
2499
2499
|
var x = this.attribute('x').Length.toPixels('x');
|
2500
2500
|
var y = this.attribute('y').Length.toPixels('y');
|
2501
2501
|
var width = this.attribute('width').Length.toPixels('x');
|
2502
2502
|
var height = this.attribute('height').Length.toPixels('y');
|
2503
|
-
|
2503
|
+
|
2504
2504
|
// temporarily remove mask to avoid recursion
|
2505
2505
|
var mask = element.attribute('mask').value;
|
2506
2506
|
element.attribute('mask').value = '';
|
2507
|
-
|
2507
|
+
|
2508
2508
|
var cMask = document.createElement('canvas');
|
2509
2509
|
cMask.width = x + width;
|
2510
2510
|
cMask.height = y + height;
|
2511
2511
|
var maskCtx = cMask.getContext('2d');
|
2512
2512
|
this.renderChildren(maskCtx);
|
2513
|
-
|
2513
|
+
|
2514
2514
|
var c = document.createElement('canvas');
|
2515
2515
|
c.width = x + width;
|
2516
2516
|
c.height = y + height;
|
@@ -2519,25 +2519,25 @@ if(!Array.prototype.indexOf){
|
|
2519
2519
|
tempCtx.globalCompositeOperation = 'destination-in';
|
2520
2520
|
tempCtx.fillStyle = maskCtx.createPattern(cMask, 'no-repeat');
|
2521
2521
|
tempCtx.fillRect(0, 0, x + width, y + height);
|
2522
|
-
|
2522
|
+
|
2523
2523
|
ctx.fillStyle = tempCtx.createPattern(c, 'no-repeat');
|
2524
2524
|
ctx.fillRect(0, 0, x + width, y + height);
|
2525
|
-
|
2525
|
+
|
2526
2526
|
// reassign mask
|
2527
|
-
element.attribute('mask').value = mask;
|
2527
|
+
element.attribute('mask').value = mask;
|
2528
2528
|
}
|
2529
|
-
|
2529
|
+
|
2530
2530
|
this.render = function(ctx) {
|
2531
2531
|
// NO RENDER
|
2532
2532
|
}
|
2533
2533
|
}
|
2534
2534
|
svg.Element.mask.prototype = new svg.Element.ElementBase;
|
2535
|
-
|
2535
|
+
|
2536
2536
|
// clip element
|
2537
2537
|
svg.Element.clipPath = function(node) {
|
2538
2538
|
this.base = svg.Element.ElementBase;
|
2539
2539
|
this.base(node);
|
2540
|
-
|
2540
|
+
|
2541
2541
|
this.apply = function(ctx) {
|
2542
2542
|
for (var i=0; i<this.children.length; i++) {
|
2543
2543
|
if (this.children[i].path) {
|
@@ -2546,7 +2546,7 @@ if(!Array.prototype.indexOf){
|
|
2546
2546
|
}
|
2547
2547
|
}
|
2548
2548
|
}
|
2549
|
-
|
2549
|
+
|
2550
2550
|
this.render = function(ctx) {
|
2551
2551
|
// NO RENDER
|
2552
2552
|
}
|
@@ -2557,9 +2557,9 @@ if(!Array.prototype.indexOf){
|
|
2557
2557
|
svg.Element.filter = function(node) {
|
2558
2558
|
this.base = svg.Element.ElementBase;
|
2559
2559
|
this.base(node);
|
2560
|
-
|
2560
|
+
|
2561
2561
|
this.apply = function(ctx, element) {
|
2562
|
-
// render as temp svg
|
2562
|
+
// render as temp svg
|
2563
2563
|
var bb = element.getBoundingBox();
|
2564
2564
|
var x = this.attribute('x').Length.toPixels('x');
|
2565
2565
|
var y = this.attribute('y').Length.toPixels('y');
|
@@ -2573,55 +2573,55 @@ if(!Array.prototype.indexOf){
|
|
2573
2573
|
width = bb.width();
|
2574
2574
|
height = bb.height();
|
2575
2575
|
}
|
2576
|
-
|
2576
|
+
|
2577
2577
|
// temporarily remove filter to avoid recursion
|
2578
2578
|
var filter = element.style('filter').value;
|
2579
2579
|
element.style('filter').value = '';
|
2580
|
-
|
2580
|
+
|
2581
2581
|
// max filter distance
|
2582
2582
|
var extraPercent = .20;
|
2583
2583
|
var px = extraPercent * width;
|
2584
2584
|
var py = extraPercent * height;
|
2585
|
-
|
2585
|
+
|
2586
2586
|
var c = document.createElement('canvas');
|
2587
2587
|
c.width = width + 2*px;
|
2588
2588
|
c.height = height + 2*py;
|
2589
2589
|
var tempCtx = c.getContext('2d');
|
2590
2590
|
tempCtx.translate(-x + px, -y + py);
|
2591
2591
|
element.render(tempCtx);
|
2592
|
-
|
2592
|
+
|
2593
2593
|
// apply filters
|
2594
2594
|
for (var i=0; i<this.children.length; i++) {
|
2595
2595
|
this.children[i].apply(tempCtx, 0, 0, width + 2*px, height + 2*py);
|
2596
2596
|
}
|
2597
|
-
|
2597
|
+
|
2598
2598
|
// render on me
|
2599
2599
|
ctx.drawImage(c, 0, 0, width + 2*px, height + 2*py, x - px, y - py, width + 2*px, height + 2*py);
|
2600
|
-
|
2600
|
+
|
2601
2601
|
// reassign filter
|
2602
|
-
element.style('filter', true).value = filter;
|
2602
|
+
element.style('filter', true).value = filter;
|
2603
2603
|
}
|
2604
|
-
|
2604
|
+
|
2605
2605
|
this.render = function(ctx) {
|
2606
2606
|
// NO RENDER
|
2607
|
-
}
|
2607
|
+
}
|
2608
2608
|
}
|
2609
2609
|
svg.Element.filter.prototype = new svg.Element.ElementBase;
|
2610
|
-
|
2610
|
+
|
2611
2611
|
svg.Element.feGaussianBlur = function(node) {
|
2612
2612
|
this.base = svg.Element.ElementBase;
|
2613
|
-
this.base(node);
|
2614
|
-
|
2613
|
+
this.base(node);
|
2614
|
+
|
2615
2615
|
function make_fgauss(sigma) {
|
2616
|
-
sigma = Math.max(sigma, 0.01);
|
2617
|
-
var len = Math.ceil(sigma * 4.0) + 1;
|
2618
|
-
mask = [];
|
2619
|
-
for (var i = 0; i < len; i++) {
|
2620
|
-
mask[i] = Math.exp(-0.5 * (i / sigma) * (i / sigma));
|
2621
|
-
}
|
2622
|
-
return mask;
|
2623
|
-
}
|
2624
|
-
|
2616
|
+
sigma = Math.max(sigma, 0.01);
|
2617
|
+
var len = Math.ceil(sigma * 4.0) + 1;
|
2618
|
+
mask = [];
|
2619
|
+
for (var i = 0; i < len; i++) {
|
2620
|
+
mask[i] = Math.exp(-0.5 * (i / sigma) * (i / sigma));
|
2621
|
+
}
|
2622
|
+
return mask;
|
2623
|
+
}
|
2624
|
+
|
2625
2625
|
function normalize(mask) {
|
2626
2626
|
var sum = 0;
|
2627
2627
|
for (var i = 1; i < mask.length; i++) {
|
@@ -2633,34 +2633,34 @@ if(!Array.prototype.indexOf){
|
|
2633
2633
|
}
|
2634
2634
|
return mask;
|
2635
2635
|
}
|
2636
|
-
|
2636
|
+
|
2637
2637
|
function convolve_even(src, dst, mask, width, height) {
|
2638
2638
|
for (var y = 0; y < height; y++) {
|
2639
2639
|
for (var x = 0; x < width; x++) {
|
2640
2640
|
var a = imGet(src, x, y, width, height, 3)/255;
|
2641
|
-
for (var rgba = 0; rgba < 4; rgba++) {
|
2641
|
+
for (var rgba = 0; rgba < 4; rgba++) {
|
2642
2642
|
var sum = mask[0] * (a==0?255:imGet(src, x, y, width, height, rgba)) * (a==0||rgba==3?1:a);
|
2643
2643
|
for (var i = 1; i < mask.length; i++) {
|
2644
2644
|
var a1 = imGet(src, Math.max(x-i,0), y, width, height, 3)/255;
|
2645
2645
|
var a2 = imGet(src, Math.min(x+i, width-1), y, width, height, 3)/255;
|
2646
|
-
sum += mask[i] *
|
2647
|
-
((a1==0?255:imGet(src, Math.max(x-i,0), y, width, height, rgba)) * (a1==0||rgba==3?1:a1) +
|
2646
|
+
sum += mask[i] *
|
2647
|
+
((a1==0?255:imGet(src, Math.max(x-i,0), y, width, height, rgba)) * (a1==0||rgba==3?1:a1) +
|
2648
2648
|
(a2==0?255:imGet(src, Math.min(x+i, width-1), y, width, height, rgba)) * (a2==0||rgba==3?1:a2));
|
2649
2649
|
}
|
2650
2650
|
imSet(dst, y, x, height, width, rgba, sum);
|
2651
|
-
}
|
2651
|
+
}
|
2652
2652
|
}
|
2653
2653
|
}
|
2654
|
-
}
|
2654
|
+
}
|
2655
2655
|
|
2656
2656
|
function imGet(img, x, y, width, height, rgba) {
|
2657
2657
|
return img[y*width*4 + x*4 + rgba];
|
2658
2658
|
}
|
2659
|
-
|
2659
|
+
|
2660
2660
|
function imSet(img, x, y, width, height, rgba, val) {
|
2661
2661
|
img[y*width*4 + x*4 + rgba] = val;
|
2662
2662
|
}
|
2663
|
-
|
2663
|
+
|
2664
2664
|
function blur(ctx, width, height, sigma)
|
2665
2665
|
{
|
2666
2666
|
var srcData = ctx.getImageData(0, 0, width, height);
|
@@ -2671,15 +2671,15 @@ if(!Array.prototype.indexOf){
|
|
2671
2671
|
convolve_even(tmp, srcData.data, mask, height, width);
|
2672
2672
|
ctx.clearRect(0, 0, width, height);
|
2673
2673
|
ctx.putImageData(srcData, 0, 0);
|
2674
|
-
}
|
2675
|
-
|
2674
|
+
}
|
2675
|
+
|
2676
2676
|
this.apply = function(ctx, x, y, width, height) {
|
2677
2677
|
// assuming x==0 && y==0 for now
|
2678
2678
|
blur(ctx, width, height, this.attribute('stdDeviation').numValue());
|
2679
2679
|
}
|
2680
2680
|
}
|
2681
2681
|
svg.Element.filter.prototype = new svg.Element.feGaussianBlur;
|
2682
|
-
|
2682
|
+
|
2683
2683
|
// title element, do nothing
|
2684
2684
|
svg.Element.title = function(node) {
|
2685
2685
|
}
|
@@ -2688,15 +2688,15 @@ if(!Array.prototype.indexOf){
|
|
2688
2688
|
// desc element, do nothing
|
2689
2689
|
svg.Element.desc = function(node) {
|
2690
2690
|
}
|
2691
|
-
svg.Element.desc.prototype = new svg.Element.ElementBase;
|
2692
|
-
|
2691
|
+
svg.Element.desc.prototype = new svg.Element.ElementBase;
|
2692
|
+
|
2693
2693
|
svg.Element.MISSING = function(node) {
|
2694
2694
|
console.log('ERROR: Element \'' + node.nodeName + '\' not yet implemented.');
|
2695
2695
|
}
|
2696
2696
|
svg.Element.MISSING.prototype = new svg.Element.ElementBase;
|
2697
|
-
|
2697
|
+
|
2698
2698
|
// element factory
|
2699
|
-
svg.CreateElement = function(node) {
|
2699
|
+
svg.CreateElement = function(node) {
|
2700
2700
|
var className = node.nodeName.replace(/^[^:]+:/,''); // remove namespace
|
2701
2701
|
className = className.replace(/\-/g,''); // remove dashes
|
2702
2702
|
var e = null;
|
@@ -2710,20 +2710,20 @@ if(!Array.prototype.indexOf){
|
|
2710
2710
|
e.type = node.nodeName;
|
2711
2711
|
return e;
|
2712
2712
|
}
|
2713
|
-
|
2713
|
+
|
2714
2714
|
// load from url
|
2715
2715
|
svg.load = function(ctx, url) {
|
2716
2716
|
svg.loadXml(ctx, svg.ajax(url));
|
2717
2717
|
}
|
2718
|
-
|
2718
|
+
|
2719
2719
|
// load from xml
|
2720
2720
|
svg.loadXml = function(ctx, xml) {
|
2721
2721
|
svg.loadXmlDoc(ctx, svg.parseXml(xml));
|
2722
2722
|
}
|
2723
|
-
|
2723
|
+
|
2724
2724
|
svg.loadXmlDoc = function(ctx, dom) {
|
2725
2725
|
svg.init(ctx);
|
2726
|
-
|
2726
|
+
|
2727
2727
|
var mapXY = function(p) {
|
2728
2728
|
var e = ctx.canvas;
|
2729
2729
|
while (e) {
|
@@ -2735,7 +2735,7 @@ if(!Array.prototype.indexOf){
|
|
2735
2735
|
if (window.scrollY) p.y += window.scrollY;
|
2736
2736
|
return p;
|
2737
2737
|
}
|
2738
|
-
|
2738
|
+
|
2739
2739
|
// bind mouse
|
2740
2740
|
if (svg.opts['ignoreMouse'] != true) {
|
2741
2741
|
ctx.canvas.onclick = function(e) {
|
@@ -2747,16 +2747,16 @@ if(!Array.prototype.indexOf){
|
|
2747
2747
|
svg.Mouse.onmousemove(p.x, p.y);
|
2748
2748
|
};
|
2749
2749
|
}
|
2750
|
-
|
2750
|
+
|
2751
2751
|
var e = svg.CreateElement(dom.documentElement);
|
2752
2752
|
e.root = true;
|
2753
|
-
|
2753
|
+
|
2754
2754
|
// render loop
|
2755
2755
|
var isFirstRender = true;
|
2756
2756
|
var draw = function() {
|
2757
2757
|
svg.ViewPort.Clear();
|
2758
2758
|
if (ctx.canvas.parentNode) svg.ViewPort.SetCurrent(ctx.canvas.parentNode.clientWidth, ctx.canvas.parentNode.clientHeight);
|
2759
|
-
|
2759
|
+
|
2760
2760
|
if (svg.opts['ignoreDimensions'] != true) {
|
2761
2761
|
// set canvas size
|
2762
2762
|
if (e.style('width').hasValue()) {
|
@@ -2770,21 +2770,21 @@ if(!Array.prototype.indexOf){
|
|
2770
2770
|
}
|
2771
2771
|
var cWidth = ctx.canvas.clientWidth || ctx.canvas.width;
|
2772
2772
|
var cHeight = ctx.canvas.clientHeight || ctx.canvas.height;
|
2773
|
-
svg.ViewPort.SetCurrent(cWidth, cHeight);
|
2774
|
-
|
2773
|
+
svg.ViewPort.SetCurrent(cWidth, cHeight);
|
2774
|
+
|
2775
2775
|
if (svg.opts != null && svg.opts['offsetX'] != null) e.attribute('x', true).value = svg.opts['offsetX'];
|
2776
2776
|
if (svg.opts != null && svg.opts['offsetY'] != null) e.attribute('y', true).value = svg.opts['offsetY'];
|
2777
2777
|
if (svg.opts != null && svg.opts['scaleWidth'] != null && svg.opts['scaleHeight'] != null) {
|
2778
2778
|
var xRatio = 1, yRatio = 1;
|
2779
2779
|
if (e.attribute('width').hasValue()) xRatio = e.attribute('width').Length.toPixels('x') / svg.opts['scaleWidth'];
|
2780
2780
|
if (e.attribute('height').hasValue()) yRatio = e.attribute('height').Length.toPixels('y') / svg.opts['scaleHeight'];
|
2781
|
-
|
2781
|
+
|
2782
2782
|
e.attribute('width', true).value = svg.opts['scaleWidth'];
|
2783
|
-
e.attribute('height', true).value = svg.opts['scaleHeight'];
|
2783
|
+
e.attribute('height', true).value = svg.opts['scaleHeight'];
|
2784
2784
|
e.attribute('viewBox', true).value = '0 0 ' + (cWidth * xRatio) + ' ' + (cHeight * yRatio);
|
2785
2785
|
e.attribute('preserveAspectRatio', true).value = 'none';
|
2786
2786
|
}
|
2787
|
-
|
2787
|
+
|
2788
2788
|
// clear and render
|
2789
2789
|
if (svg.opts['ignoreClear'] != true) {
|
2790
2790
|
ctx.clearRect(0, 0, cWidth, cHeight);
|
@@ -2793,88 +2793,88 @@ if(!Array.prototype.indexOf){
|
|
2793
2793
|
if (isFirstRender) {
|
2794
2794
|
isFirstRender = false;
|
2795
2795
|
if (svg.opts != null && typeof(svg.opts['renderCallback']) == 'function') svg.opts['renderCallback']();
|
2796
|
-
}
|
2796
|
+
}
|
2797
2797
|
}
|
2798
|
-
|
2798
|
+
|
2799
2799
|
var waitingForImages = true;
|
2800
2800
|
if (svg.ImagesLoaded()) {
|
2801
2801
|
waitingForImages = false;
|
2802
2802
|
draw();
|
2803
2803
|
}
|
2804
|
-
svg.intervalID = setInterval(function() {
|
2804
|
+
svg.intervalID = setInterval(function() {
|
2805
2805
|
var needUpdate = false;
|
2806
|
-
|
2806
|
+
|
2807
2807
|
if (waitingForImages && svg.ImagesLoaded()) {
|
2808
2808
|
waitingForImages = false;
|
2809
2809
|
needUpdate = true;
|
2810
2810
|
}
|
2811
|
-
|
2811
|
+
|
2812
2812
|
// need update from mouse events?
|
2813
2813
|
if (svg.opts['ignoreMouse'] != true) {
|
2814
2814
|
needUpdate = needUpdate | svg.Mouse.hasEvents();
|
2815
2815
|
}
|
2816
|
-
|
2816
|
+
|
2817
2817
|
// need update from animations?
|
2818
2818
|
if (svg.opts['ignoreAnimation'] != true) {
|
2819
2819
|
for (var i=0; i<svg.Animations.length; i++) {
|
2820
2820
|
needUpdate = needUpdate | svg.Animations[i].update(1000 / svg.FRAMERATE);
|
2821
2821
|
}
|
2822
2822
|
}
|
2823
|
-
|
2823
|
+
|
2824
2824
|
// need update from redraw?
|
2825
2825
|
if (svg.opts != null && typeof(svg.opts['forceRedraw']) == 'function') {
|
2826
2826
|
if (svg.opts['forceRedraw']() == true) needUpdate = true;
|
2827
2827
|
}
|
2828
|
-
|
2828
|
+
|
2829
2829
|
// render if needed
|
2830
2830
|
if (needUpdate) {
|
2831
|
-
draw();
|
2831
|
+
draw();
|
2832
2832
|
svg.Mouse.runEvents(); // run and clear our events
|
2833
2833
|
}
|
2834
2834
|
}, 1000 / svg.FRAMERATE);
|
2835
2835
|
}
|
2836
|
-
|
2836
|
+
|
2837
2837
|
svg.stop = function() {
|
2838
2838
|
if (svg.intervalID) {
|
2839
2839
|
clearInterval(svg.intervalID);
|
2840
2840
|
}
|
2841
2841
|
}
|
2842
|
-
|
2842
|
+
|
2843
2843
|
svg.Mouse = new (function() {
|
2844
2844
|
this.events = [];
|
2845
2845
|
this.hasEvents = function() { return this.events.length != 0; }
|
2846
|
-
|
2846
|
+
|
2847
2847
|
this.onclick = function(x, y) {
|
2848
|
-
this.events.push({ type: 'onclick', x: x, y: y,
|
2848
|
+
this.events.push({ type: 'onclick', x: x, y: y,
|
2849
2849
|
run: function(e) { if (e.onclick) e.onclick(); }
|
2850
2850
|
});
|
2851
2851
|
}
|
2852
|
-
|
2852
|
+
|
2853
2853
|
this.onmousemove = function(x, y) {
|
2854
2854
|
this.events.push({ type: 'onmousemove', x: x, y: y,
|
2855
2855
|
run: function(e) { if (e.onmousemove) e.onmousemove(); }
|
2856
2856
|
});
|
2857
|
-
}
|
2858
|
-
|
2857
|
+
}
|
2858
|
+
|
2859
2859
|
this.eventElements = [];
|
2860
|
-
|
2860
|
+
|
2861
2861
|
this.checkPath = function(element, ctx) {
|
2862
2862
|
for (var i=0; i<this.events.length; i++) {
|
2863
2863
|
var e = this.events[i];
|
2864
2864
|
if (ctx.isPointInPath && ctx.isPointInPath(e.x, e.y)) this.eventElements[i] = element;
|
2865
2865
|
}
|
2866
2866
|
}
|
2867
|
-
|
2867
|
+
|
2868
2868
|
this.checkBoundingBox = function(element, bb) {
|
2869
2869
|
for (var i=0; i<this.events.length; i++) {
|
2870
2870
|
var e = this.events[i];
|
2871
2871
|
if (bb.isPointInBox(e.x, e.y)) this.eventElements[i] = element;
|
2872
|
-
}
|
2872
|
+
}
|
2873
2873
|
}
|
2874
|
-
|
2874
|
+
|
2875
2875
|
this.runEvents = function() {
|
2876
2876
|
svg.ctx.canvas.style.cursor = '';
|
2877
|
-
|
2877
|
+
|
2878
2878
|
for (var i=0; i<this.events.length; i++) {
|
2879
2879
|
var e = this.events[i];
|
2880
2880
|
var element = this.eventElements[i];
|
@@ -2882,33 +2882,33 @@ if(!Array.prototype.indexOf){
|
|
2882
2882
|
e.run(element);
|
2883
2883
|
element = element.parent;
|
2884
2884
|
}
|
2885
|
-
}
|
2886
|
-
|
2885
|
+
}
|
2886
|
+
|
2887
2887
|
// done running, clear
|
2888
|
-
this.events = [];
|
2888
|
+
this.events = [];
|
2889
2889
|
this.eventElements = [];
|
2890
2890
|
}
|
2891
2891
|
});
|
2892
|
-
|
2892
|
+
|
2893
2893
|
return svg;
|
2894
2894
|
}
|
2895
2895
|
})();
|
2896
2896
|
|
2897
2897
|
if (CanvasRenderingContext2D) {
|
2898
2898
|
CanvasRenderingContext2D.prototype.drawSvg = function(s, dx, dy, dw, dh) {
|
2899
|
-
canvg(this.canvas, s, {
|
2900
|
-
ignoreMouse: true,
|
2901
|
-
ignoreAnimation: true,
|
2902
|
-
ignoreDimensions: true,
|
2903
|
-
ignoreClear: true,
|
2904
|
-
offsetX: dx,
|
2905
|
-
offsetY: dy,
|
2906
|
-
scaleWidth: dw,
|
2899
|
+
canvg(this.canvas, s, {
|
2900
|
+
ignoreMouse: true,
|
2901
|
+
ignoreAnimation: true,
|
2902
|
+
ignoreDimensions: true,
|
2903
|
+
ignoreClear: true,
|
2904
|
+
offsetX: dx,
|
2905
|
+
offsetY: dy,
|
2906
|
+
scaleWidth: dw,
|
2907
2907
|
scaleHeight: dh
|
2908
2908
|
});
|
2909
2909
|
}
|
2910
2910
|
}/**
|
2911
|
-
* @license Highcharts JS v2.2.
|
2911
|
+
* @license Highcharts JS v2.2.2 (2012-04-26)
|
2912
2912
|
* CanVGRenderer Extension module
|
2913
2913
|
*
|
2914
2914
|
* (c) 2011-2012 Torstein Hønsi, Erik Olsson
|