Skip to content

Commit 675e347

Browse files
author
wout
committed
Added font element
1 parent 7b5c91b commit 675e347

10 files changed

Lines changed: 238 additions & 71 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.DS_Store
22
public/
33
bleed/
4-
obsolete/
4+
obsolete/
5+
test/

‎Rakefile‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
SVGJS_VERSION = '0.1a'
22

33
# all available modules in the correct loading order
4-
ALL = %w[ svg container element group arrange clip doc defs shape rect circle ellipse path image sugar ]
4+
ALL = %w[ svg container element group arrange clip doc defs shape rect circle ellipse path image text sugar ]
55

66
# required modules to make the library operational
7-
CORE = %w[ circle container defs doc element ellipse image path rect shape svg ]
7+
CORE = %w[ circle container defs doc element ellipse image path rect shape svg text ]
88

99
# optional modules
1010
OPTIONAL = %w[ clip group arrange sugar ]
@@ -92,10 +92,10 @@ end
9292
desc "Concatenate source files to build svg.js"
9393
task :concat, [:modules] do |task, args|
9494
modules = args[:modules].to_s.split(':')
95-
to_add, to_exclude = modules.partition {|m| m.sub!(/^(-)?(.+)/, 'src/\2.js'); !$1 }
95+
toattrsdd, to_exclude = modules.partition {|m| m.sub!(/^(-)?(.+)/, 'src/\2.js'); !$1 }
9696

9797
Rake::Task['dist/svg.js'].
98-
remove_prerequisites(to_exclude).enhance(to_add).
98+
remove_prerequisites(to_exclude).enhance(toattrsdd).
9999
invoke
100100
end
101101

‎dist/svg.js‎

Lines changed: 115 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* svg.js 0.1a - svg container element group arrange clip doc defs shape rect circle ellipse path image sugar - svgjs.com/license */
1+
/* svg.js 0.1a - svg container element group arrange clip doc defs shape rect circle ellipse path image text sugar - svgjs.com/license */
22
(function() {
33

44
this.SVG = {
@@ -121,6 +121,10 @@
121121
return this.place(new SVG.Image(), v);
122122
},
123123

124+
text: function(v) {
125+
return this.place(new SVG.Text(), v);
126+
},
127+
124128
place: function(e, v) {
125129
if (v != null) {
126130
if (v.x != null && v.y != null)
@@ -129,11 +133,13 @@
129133
if (v.width != null && v.height != null)
130134
e.size(v.width, v.height);
131135

132-
if (v.data != null)
133-
e.data(v.data);
134-
135-
if (v.src != null)
136-
e.load(v.src);
136+
v.data != null ?
137+
e.data(v.data) :
138+
v.src != null ?
139+
e.load(v.src) :
140+
v.text != null ?
141+
e.text(v.text) :
142+
void 0;
137143
}
138144

139145
this.add(e);
@@ -408,25 +414,23 @@
408414
move: function(x, y) {
409415
this.attrs.x = x;
410416
this.attrs.y = y;
411-
this.center();
412-
413-
return this;
417+
418+
return this.center();
414419
},
415420

416421
// custom size function (no height value here!)
417422
size: function(w) {
418-
this.attr('r', w / 2);
419-
this.center();
420-
421-
return this;
423+
return this.attr('r', w / 2).center();
422424
},
423425

424426
// position element by its center
425427
center: function(x, y) {
426428
var r = this.attrs.r || 0;
427429

428-
this.attr('cx', x || ((this.attrs.x || 0) + r));
429-
this.attr('cy', y || ((this.attrs.y || 0) + r));
430+
return this.attr({
431+
cx: (x || ((this.attrs.x || 0) + r)),
432+
cy: (y || ((this.attrs.y || 0) + r))
433+
});
430434
}
431435

432436
});
@@ -445,24 +449,23 @@
445449
move: function(x, y) {
446450
this.attrs.x = x;
447451
this.attrs.y = y;
448-
this.center();
449-
450-
return this;
452+
453+
return this.center();
451454
},
452455

453456
// custom size function
454457
size: function(w, h) {
455-
this.attr('rx', w / 2);
456-
this.attr('ry', h / 2);
457-
this.center();
458-
459-
return this;
458+
return this.
459+
attr({ rx: w / 2, ry: h / 2 }).
460+
center();
460461
},
461462

462463
// position element by its center
463464
center: function(x, y) {
464-
this.attr('cx', x || ((this.attrs.x || 0) + (this.attrs.rx || 0)));
465-
this.attr('cy', y || ((this.attrs.y || 0) + (this.attrs.ry || 0)));
465+
return this.attr({
466+
cx: (x || ((this.attrs.x || 0) + (this.attrs.rx || 0))),
467+
cy: (y || ((this.attrs.y || 0) + (this.attrs.ry || 0)))
468+
});
466469
}
467470

468471
});
@@ -480,8 +483,7 @@
480483

481484
// set path data
482485
data: function(d) {
483-
this.attr('d', d);
484-
return this;
486+
return this.attr('d', d);
485487
}
486488

487489
});
@@ -491,17 +493,98 @@
491493
};
492494

493495
// inherit from SVG.Element
494-
SVG.Image.prototype = new SVG.Element();
495-
496-
// include the container object
497-
SVG.extend(SVG.Image, SVG.Container);
496+
SVG.Image.prototype = new SVG.Shape();
498497

499498
// Add image-specific functions
500499
SVG.extend(SVG.Image, {
501500

502501
// (re)load image
503502
load: function(u) {
504-
this.attr('href', u, SVG.xlink);
503+
return this.attr('href', u, SVG.xlink);
504+
}
505+
506+
});
507+
508+
SVG.Text = function Text() {
509+
this.constructor.call(this, SVG.create('text'));
510+
511+
this.style = { 'font-size': 16 };
512+
this.leading = 1.2;
513+
};
514+
515+
// inherit from SVG.Element
516+
SVG.Text.prototype = new SVG.Shape();
517+
518+
// Add image-specific functions
519+
SVG.extend(SVG.Text, {
520+
521+
text: function(t) {
522+
this.content = t = t || 'text';
523+
524+
var i,
525+
p = this.parentDoc(),
526+
a = t.split("\n");
527+
528+
while (this.node.hasChildNodes())
529+
this.node.removeChild(this.node.lastChild);
530+
531+
for (i = 0, l = a.length; i < l; i++)
532+
this.node.appendChild(new TSpan().
533+
text(a[i]).
534+
attr('style', this._style()).
535+
attr({ dy: this.style['font-size'] * this.leading, x: (this.attr('x') || 0) }).node );
536+
537+
return this;
538+
},
539+
540+
font: function(o) {
541+
var i, a = ('size family weight stretch variant style').split(' ');
542+
543+
for (i = a.length - 1; i >= 0; i--)
544+
if (o[a[i]] != null)
545+
this.style['font-' + a[i]] = o[a[i]];
546+
547+
a = ('leading kerning anchor').split(' ');
548+
549+
for (i = a.length - 1; i >= 0; i--)
550+
if (o[a[i]] != null)
551+
this[a[i]] = o[a[i]];
552+
553+
return this.text(this.content);
554+
},
555+
556+
_style: function() {
557+
var i, s = '', a = ('size family weight stretch variant style').split(' ');
558+
559+
for (i = a.length - 1; i >= 0; i--)
560+
if (this.style['font-' + a[i]] != null)
561+
s += 'font-' + a[i] + ':' + this.style['font-' + a[i]] + ';';
562+
563+
a = ('leading kerning anchor').split(' ');
564+
565+
for (i = a.length - 1; i >= 0; i--)
566+
if (this[a[i]] != null)
567+
s += a[i] + ':' + this[a[i]] + ';';
568+
569+
return s;
570+
}
571+
572+
});
573+
574+
575+
function TSpan() {
576+
this.constructor.call(this, SVG.create('tspan'));
577+
};
578+
579+
// inherit from SVG.Element
580+
TSpan.prototype = new SVG.Shape();
581+
582+
// include the container object
583+
SVG.extend(TSpan, {
584+
585+
text: function(t) {
586+
this.node.appendChild(document.createTextNode(t));
587+
505588
return this;
506589
}
507590

0 commit comments

Comments
 (0)