Skip to content

Commit db36564

Browse files
brampbramp
committedNov 1, 2015
Added a whole host of changes, so many I lost track.
·
v2.0.1v2.0.0
1 parent 572dbff commit db36564

12 files changed

+279
-168
lines changed
 

‎Makefile

+25-12
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@
33
NODE_MODULES := node_modules/.bin
44
BOWER_COMPONENTS := bower_components
55

6-
all: node_modules lint build/sequence-diagram-min.js test
6+
all: lint build/sequence-diagram-min.js test
7+
#
8+
# Copy minified file to site
9+
#
10+
cp build/sequence-diagram*-min.js* _site/
711

812
node_modules: package.json
913
#
@@ -69,30 +73,39 @@ build/grammar.js: src/grammar.jison
6973
$@.tmp -o $@ \
7074
--comments all --compress --beautify
7175

76+
#
77+
# Compiling grammar
78+
#
7279
build/diagram-grammar.js: src/diagram.js build/grammar.js
73-
#
74-
# Compiling grammar
75-
#
7680
$(NODE_MODULES)/preprocess $< . > $@
7781

82+
# Combine all javascript files together (Raphael and Snap.svg)
7883
build/sequence-diagram.js: src/main.js build/diagram-grammar.js src/jquery-plugin.js src/sequence-diagram.js src/theme.js src/theme-snap.js src/theme-raphael.js fonts/daniel/daniel_700.font.js
79-
#
80-
# Finally combine all javascript files together
81-
#
82-
$(NODE_MODULES)/preprocess $< . > $@
84+
$(NODE_MODULES)/preprocess $< . -SNAP=true -RAPHAEL=true > $@
85+
86+
# Combine just Raphael theme
87+
build/sequence-diagram-raphael.js: src/main.js build/diagram-grammar.js src/jquery-plugin.js src/sequence-diagram.js src/theme.js src/theme-raphael.js fonts/daniel/daniel_700.font.js
88+
$(NODE_MODULES)/preprocess $< . -RAPHAEL=true > $@
89+
90+
# Combine just Snap.svg theme
91+
build/sequence-diagram-snap.js: src/main.js build/diagram-grammar.js src/jquery-plugin.js src/sequence-diagram.js src/theme.js src/theme-snap.js
92+
$(NODE_MODULES)/preprocess $< . -SNAP=true > $@
93+
94+
# Minify the final combined javascript (both Raphael and Snap.svg)
95+
#build/sequence-diagram-raphael-min.js build/sequence-diagram-raphael-min.js.map: build/sequence-diagram-raphael.js
96+
#build/sequence-diagram-snap-min.js build/sequence-diagram-snap-min.js.map: build/sequence-diagram-snap.js
8397

84-
build/sequence-diagram-min.js build/sequence-diagram-min.js.map: build/sequence-diagram.js
98+
build/sequence-diagram-min.js build/sequence-diagram-min.js.map: build/sequence-diagram.js
8599
#
86100
# Please ignore the warnings below (these are in combined js code)
87101
#
88102
$(NODE_MODULES)/uglifyjs \
89-
build/sequence-diagram.js \
90-
-o build/sequence-diagram-min.js \
103+
$< -o $@ \
91104
--compress --comments --lint \
92105
--source-map build/sequence-diagram-min.js.map \
93106
--source-map-url sequence-diagram-min.js.map
94107

95108
#
96109
# Copy minified file to site
97110
#
98-
cp build/sequence-diagram-min.js* _site/
111+
cp build/sequence-diagram*-min.js* _site/

‎bower.json

+4-3
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,14 @@
2222
"dependencies": {
2323
"underscore": "~1.4.x",
2424
"raphael": "~2.1.x",
25-
"snap.svg": "~0.4.1",
26-
"bower-webfontloader": "~1.5.16"
25+
"snap.svg": "~0.4.x",
26+
"bower-webfontloader": "~1.6.x"
2727
},
2828
"devDependencies": {
2929
"qunit": "1.11.x",
3030
"lodash": "3.8.x",
31-
"jquery": "1.8.x"
31+
"jquery": "1.8.x",
32+
"seedrandom": "2.4.x"
3233
},
3334
"scripts": {
3435
"test": "make test"

‎src/jquery-plugin.js

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
* (c) 2012-2013 Andrew Brampton (bramp.net)
44
* Simplified BSD license.
55
*/
6+
/*global jQuery */
67
if (typeof jQuery != 'undefined') {
78
(function( $ ) {
89
$.fn.sequenceDiagram = function( options ) {

‎src/main.js

+7
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,16 @@
1010
// The following are included by preprocessor */
1111
// #include "build/diagram-grammar.js"
1212
// #include "src/theme.js"
13+
14+
// #ifdef SNAP
1315
// #include "src/theme-snap.js"
16+
// #endif
17+
18+
// #ifdef RAPHAEL
1419
// #include "src/theme-raphael.js"
1520
// #include "fonts/daniel/daniel_700.font.js"
21+
// #endif
22+
1623
// #include "src/sequence-diagram.js"
1724
// #include "src/jquery-plugin.js"
1825

‎src/sequence-diagram.js

+27-6
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,44 @@
33
* (c) 2012-2013 Andrew Brampton (bramp.net)
44
* Simplified BSD license.
55
*/
6-
/*global Diagram, SnapTheme, SnapHandTheme */
6+
/*global Diagram, _ */
77

8-
Diagram.themes = themes;
8+
if (typeof Raphael == 'undefined' && typeof Snap == 'undefined') {
9+
throw new Error("Raphael or Snap.svg is required to be included.");
10+
}
911

10-
// Draws the diagram. Creates a SVG inside the container
12+
if (_.isEmpty(Diagram.themes)) {
13+
// If you are using stock js-sequence-diagrams you should never see this. This only
14+
// happens if you have removed the built in themes.
15+
throw new Error("No themes were registered. Please call registerTheme(...).");
16+
}
17+
18+
// TODO If only oldHand and oldSimple registered, rename them to hand/simple
19+
20+
21+
/* Draws the diagram. Creates a SVG inside the container
22+
* container (HTMLElement|string) DOM element or its ID to draw on
23+
* options (Object)
24+
*/
1125
Diagram.prototype.drawSVG = function (container, options) {
1226
var default_options = {
1327
theme: 'hand'
1428
};
1529

1630
options = _.defaults(options || {}, default_options);
1731

18-
if (!(options.theme in themes))
32+
if (!(options.theme in Diagram.themes)) {
1933
throw new Error("Unsupported theme: " + options.theme);
34+
}
35+
36+
// TODO Write tests for this check
37+
div = _.isString(container) ? document.getElementById(container) : container;
38+
if (div === null || !div.tagName) {
39+
throw new Error("Invalid container: " + container);
40+
}
2041

21-
var drawing = new themes[options.theme](this);
22-
drawing.draw(container);
42+
var drawing = new Diagram.themes[options.theme](this);
43+
drawing.draw(div);
2344

2445
}; // end of drawSVG
2546

‎src/theme-raphael.js

+3-49
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*/
66
/*global Diagram, Raphael, _ */
77

8-
if (Raphael) {
8+
if (typeof Raphael != 'undefined') {
99

1010
var LINE = {
1111
'stroke': '#000000',
@@ -24,52 +24,6 @@ if (Raphael) {
2424
return this.path("M{0},{1} L{2},{3}", x1, y1, x2, y2).attr(LINE);
2525
};
2626

27-
Raphael.fn.wobble = function(x1, y1, x2, y2) {
28-
assert(_.all([x1,x2,y1,y2], _.isFinite), "x1,x2,y1,y2 must be numeric");
29-
30-
var wobble = Math.sqrt( (x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)) / 25;
31-
32-
// Distance along line
33-
var r1 = Math.random();
34-
var r2 = Math.random();
35-
36-
var xfactor = Math.random() > 0.5 ? wobble : -wobble;
37-
var yfactor = Math.random() > 0.5 ? wobble : -wobble;
38-
39-
var p1 = {
40-
x: (x2 - x1) * r1 + x1 + xfactor,
41-
y: (y2 - y1) * r1 + y1 + yfactor
42-
};
43-
44-
var p2 = {
45-
x: (x2 - x1) * r2 + x1 - xfactor,
46-
y: (y2 - y1) * r2 + y1 - yfactor
47-
};
48-
49-
return "C" + p1.x + "," + p1.y +
50-
" " + p2.x + "," + p2.y +
51-
" " + x2 + "," + y2;
52-
};
53-
54-
/**
55-
* Draws a wobbly (hand drawn) rect
56-
*/
57-
Raphael.fn.handRect = function (x, y, w, h) {
58-
assert(_.all([x, y, w, h], _.isFinite), "x, y, w, h must be numeric");
59-
return this.path("M" + x + "," + y +
60-
this.wobble(x, y, x + w, y) +
61-
this.wobble(x + w, y, x + w, y + h) +
62-
this.wobble(x + w, y + h, x, y + h) +
63-
this.wobble(x, y + h, x, y));
64-
};
65-
66-
/**
67-
* Draws a wobbly (hand drawn) line
68-
*/
69-
Raphael.fn.handLine = function (x1, y1, x2, y2) {
70-
assert(_.all([x1,x2,y1,y2], _.isFinite), "x1,x2,y1,y2 must be numeric");
71-
return this.path("M" + x1 + "," + y1 + this.wobble(x1, y1, x2, y2));
72-
};
7327

7428
/******************
7529
* RaphaelTheme
@@ -227,7 +181,7 @@ if (Raphael) {
227181
},
228182

229183
draw_line : function(x1, y1, x2, y2, linetype, arrowhead) {
230-
var line = this._paper.handLine(x1, y1, x2, y2).attr(LINE);
184+
var line = this._paper.path(handLine(x1, y1, x2, y2)).attr(LINE);
231185
if (arrowhead !== undefined) {
232186
line.attr('arrow-end', this.arrow_types[arrowhead] + '-wide-long');
233187
}
@@ -238,7 +192,7 @@ if (Raphael) {
238192
},
239193

240194
draw_rect : function(x, y, w, h) {
241-
return this._paper.handRect(x, y, w, h).attr(RECT);
195+
return this._paper.path(handRect(x, y, w, h)).attr(RECT);
242196
}
243197
});
244198

‎src/theme-snap.js

+43-59
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,14 @@
33
* (c) 2012-2015 Andrew Brampton (bramp.net)
44
* Simplified BSD license.
55
*/
6-
/*global Diagram, Snap, _ */
6+
/*global Diagram, Snap, WebFont _ */
77
// TODO Move defintion of font onto the <svg>, so it can easily be override at each level
8-
if (Snap) {
8+
if (typeof Snap != 'undefined') {
9+
10+
if (typeof WebFont == 'undefined') {
11+
throw new Error("WebFont is required (https://github.com/typekit/webfontloader).");
12+
}
13+
914
var xmlns = "http://www.w3.org/2000/svg";
1015

1116
var LINE = {
@@ -22,52 +27,7 @@ if (Snap) {
2227
******************/
2328
Snap.plugin(function (Snap, Element, Paper, global, Fragment) {
2429

25-
Element.prototype.wobble = function (x1, y1, x2, y2) {
26-
assert(_.all([x1,x2,y1,y2], _.isFinite), "x1,x2,y1,y2 must be numeric");
27-
28-
var wobble = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)) / 25;
29-
30-
// Distance along line
31-
var r1 = Math.random();
32-
var r2 = Math.random();
33-
34-
var xfactor = Math.random() > 0.5 ? wobble : -wobble;
35-
var yfactor = Math.random() > 0.5 ? wobble : -wobble;
36-
37-
var p1 = {
38-
x: (x2 - x1) * r1 + x1 + xfactor,
39-
y: (y2 - y1) * r1 + y1 + yfactor
40-
};
41-
42-
var p2 = {
43-
x: (x2 - x1) * r2 + x1 - xfactor,
44-
y: (y2 - y1) * r2 + y1 - yfactor
45-
};
46-
47-
return "C" + p1.x + "," + p1.y +
48-
" " + p2.x + "," + p2.y +
49-
" " + x2 + "," + y2;
50-
};
5130

52-
/**
53-
* Draws a wobbly (hand drawn) rect
54-
*/
55-
Element.prototype.handRect = function (x, y, w, h) {
56-
assert(_.all([x, y, w, h], _.isFinite), "x, y, w, h must be numeric");
57-
return this.path("M" + x + "," + y +
58-
this.wobble(x, y, x + w, y) +
59-
this.wobble(x + w, y, x + w, y + h) +
60-
this.wobble(x + w, y + h, x, y + h) +
61-
this.wobble(x, y + h, x, y));
62-
};
63-
64-
/**
65-
* Draws a wobbly (hand drawn) line
66-
*/
67-
Element.prototype.handLine = function (x1, y1, x2, y2) {
68-
assert(_.all([x1,x2,y1,y2], _.isFinite), "x1,x2,y1,y2 must be numeric");
69-
return this.path("M" + x1 + "," + y1 + this.wobble(x1, y1, x2, y2));
70-
};
7131
});
7232

7333

@@ -104,6 +64,7 @@ if (Snap) {
10464
},
10565

10666
init_paper: function (container) {
67+
// Container must be a SVG element. We assume it's a div, so lets create a SVG and insert
10768
var svg = document.createElementNS(xmlns, 'svg');
10869
container.appendChild(svg);
10970

@@ -113,8 +74,9 @@ if (Snap) {
11374
this._paper.addClass("sequence");
11475
this._paper.addClass(this._css_class);
11576

116-
this.clear_group();
77+
this.begin_group();
11778

79+
// TODO Perhaps only include the markers if we actually use them.
11880
var a = this.arrow_markers = {};
11981
var arrow = this._paper.path("M 0 0 L 5 2.5 L 0 5 z");
12082
a[ARROWTYPE.FILLED] = arrow.marker(0, 0, 5, 5, 5, 2.5)
@@ -143,22 +105,26 @@ if (Snap) {
143105
text_bbox: function(text, font) {
144106
var t = this.create_text(text, font);
145107
var bb = t.getBBox();
108+
console.log(bb);
146109
t.remove();
147110
return bb;
148111
},
149112

113+
// For each drawn element, push onto the stack, so it can be wrapped in a single outer element
150114
push_to_stack: function(element) {
151115
this._stack.push(element);
152116
return element;
153117
},
154118

155-
clear_group: function() {
119+
// Begin a group of elements
120+
begin_group: function() {
156121
this._stack = [];
157122
},
158123

124+
// Finishes the group, and returns the <group> element
159125
finish_group: function() {
160126
var g = this._paper.group.apply(this._paper, this._stack);
161-
this.clear_group();
127+
this.begin_group(); // Reset the group
162128
return g;
163129
},
164130

@@ -202,7 +168,6 @@ if (Snap) {
202168
* align (string) ALIGN_LEFT or ALIGN_CENTER
203169
*/
204170
draw_text : function (x, y, text, font, background, align) {
205-
var paper = this._paper;
206171
var t = this.create_text(text, font);
207172
var bb = t.getBBox();
208173

@@ -213,6 +178,7 @@ if (Snap) {
213178

214179
// draw a rect behind it
215180
if (background) {
181+
var paper = this._paper;
216182
var r = paper.rect(x, y, bb.width, bb.height);
217183
r.attr(RECT).attr({'stroke': 'none'});
218184
this.push_to_stack(r);
@@ -228,31 +194,31 @@ if (Snap) {
228194
},
229195

230196
draw_title : function() {
231-
this.clear_group();
197+
this.begin_group();
232198
BaseTheme.prototype.draw_title.call(this);
233199
return this.finish_group().addClass('title');
234200
},
235201

236202
draw_actor : function (actor, offsetY, height) {
237-
this.clear_group();
203+
this.begin_group();
238204
BaseTheme.prototype.draw_actor.call(this, actor, offsetY, height);
239205
return this.finish_group().addClass('actor');
240206
},
241207

242208
draw_signal : function (signal, offsetY) {
243-
this.clear_group();
209+
this.begin_group();
244210
BaseTheme.prototype.draw_signal.call(this, signal, offsetY);
245211
return this.finish_group().addClass('signal');
246212
},
247213

248214
draw_self_signal : function(signal, offsetY) {
249-
this.clear_group();
215+
this.begin_group();
250216
BaseTheme.prototype.draw_self_signal.call(this, signal, offsetY);
251217
return this.finish_group().addClass('signal');
252218
},
253219

254220
draw_note : function (note, offsetY) {
255-
this.clear_group();
221+
this.begin_group();
256222
BaseTheme.prototype.draw_note.call(this, note, offsetY);
257223
return this.finish_group().addClass('note');
258224
},
@@ -268,15 +234,33 @@ if (Snap) {
268234

269235
// Take the standard SnapTheme and make all the lines wobbly
270236
_.extend(SnapHandTheme.prototype, SnapTheme.prototype, {
237+
238+
draw : function(container) {
239+
var that = this;
240+
WebFont.load({
241+
custom: {
242+
families: ['daniel'] // TODO replace this with somethign that reads the css
243+
},
244+
classes: false, // No need to place classes on the DOM, just use JS Events
245+
active: function() {
246+
SnapTheme.prototype.draw.call(that, container);
247+
},
248+
inactive: function() {
249+
// If we fail to fetch the font, still continue.
250+
SnapTheme.prototype.draw.call(that, container);
251+
},
252+
});
253+
},
254+
271255
init_font : function() {
272-
this._font = {
256+
this._font = { // TODO is this needed? CSS should handle?
273257
'font-size': 16,
274258
'font-family': 'daniel'
275259
};
276260
},
277261

278262
draw_line : function(x1, y1, x2, y2, linetype, arrowhead) {
279-
var line = this._paper.handLine(x1, y1, x2, y2).attr(LINE);
263+
var line = this._paper.path(handLine(x1, y1, x2, y2)).attr(LINE);
280264
if (arrowhead !== undefined) {
281265
line.attr('markerEnd', this.arrow_markers[arrowhead]);
282266
}
@@ -287,7 +271,7 @@ if (Snap) {
287271
},
288272

289273
draw_rect : function(x, y, w, h) {
290-
var rect = this._paper.handRect(x, y, w, h).attr(RECT);
274+
var rect = this._paper.path(handRect(x, y, w, h)).attr(RECT);
291275
return this.push_to_stack(rect);
292276
},
293277
});

‎src/theme.js

+62-9
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,9 @@ if (!String.prototype.trim) {
5858
};
5959
}
6060

61-
var themes = {};
61+
Diagram.themes = {};
6262
function registerTheme(name, theme) {
63-
themes[name] = theme;
63+
Diagram.themes[name] = theme;
6464
}
6565

6666
/******************
@@ -75,6 +75,56 @@ function getCenterY(box) {
7575
return box.y + box.height / 2;
7676
}
7777

78+
/******************
79+
* SVG Path extras
80+
******************/
81+
82+
function wobble (x1, y1, x2, y2) {
83+
assert(_.all([x1,x2,y1,y2], _.isFinite), "x1,x2,y1,y2 must be numeric");
84+
85+
var factor = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)) / 25;
86+
87+
// Distance along line
88+
var r1 = Math.random();
89+
var r2 = Math.random();
90+
91+
var xfactor = Math.random() > 0.5 ? factor : -factor;
92+
var yfactor = Math.random() > 0.5 ? factor : -factor;
93+
94+
var p1 = {
95+
x: (x2 - x1) * r1 + x1 + xfactor,
96+
y: (y2 - y1) * r1 + y1 + yfactor
97+
};
98+
99+
var p2 = {
100+
x: (x2 - x1) * r2 + x1 - xfactor,
101+
y: (y2 - y1) * r2 + y1 - yfactor
102+
};
103+
104+
return "C" + p1.x + "," + p1.y +
105+
" " + p2.x + "," + p2.y +
106+
" " + x2 + "," + y2;
107+
}
108+
109+
/**
110+
* Draws a wobbly (hand drawn) rect
111+
*/
112+
function handRect(x, y, w, h) {
113+
assert(_.all([x, y, w, h], _.isFinite), "x, y, w, h must be numeric");
114+
return "M" + x + "," + y +
115+
wobble(x, y, x + w, y) +
116+
wobble(x + w, y, x + w, y + h) +
117+
wobble(x + w, y + h, x, y + h) +
118+
wobble(x, y + h, x, y);
119+
}
120+
121+
/**
122+
* Draws a wobbly (hand drawn) line
123+
*/
124+
function handLine(x1, y1, x2, y2) {
125+
assert(_.all([x1,x2,y1,y2], _.isFinite), "x1,x2,y1,y2 must be numeric");
126+
return "M" + x1 + "," + y1 + wobble(x1, y1, x2, y2);
127+
}
78128

79129
/******************
80130
* BaseTheme
@@ -186,6 +236,7 @@ _.extend(BaseTheme.prototype, {
186236
s.height += (SIGNAL_MARGIN + SIGNAL_PADDING) * 2;
187237

188238
if (s.isSelf()) {
239+
// TODO Self signals need a min height
189240
a = s.actorA.index;
190241
b = a + 1;
191242
s.width += SELF_SIGNAL_WIDTH;
@@ -261,7 +312,8 @@ _.extend(BaseTheme.prototype, {
261312
return this;
262313
},
263314

264-
// TODO Instead of one text_bbox, create a layout_title, layout_actor, etc that returns it's bounding box
315+
// TODO Instead of one text_bbox function, create a function for each element type, e.g
316+
// layout_title, layout_actor, etc that returns it's bounding box
265317
text_bbox: function(text, font) {},
266318

267319
draw_title : function() {
@@ -296,6 +348,7 @@ _.extend(BaseTheme.prototype, {
296348
draw_signals : function (offsetY) {
297349
var y = offsetY;
298350
_.each(this.diagram.signals, function(s) {
351+
// TODO Add debug mode, that draws padding/margin box
299352
if (s.type == "Signal") {
300353
if (s.isSelf()) {
301354
this.draw_self_signal(s, y);
@@ -318,12 +371,12 @@ _.extend(BaseTheme.prototype, {
318371
var aX = getCenterX(signal.actorA);
319372

320373
var x = aX + SELF_SIGNAL_WIDTH + SIGNAL_PADDING;
321-
var y = offsetY + signal.height / 2;
374+
var y = offsetY + SIGNAL_PADDING + signal.height / 2 + text_bb.y;
322375

323376
this.draw_text(x, y, signal.message, this._font, true, ALIGN_LEFT);
324377

325-
var y1 = offsetY + SIGNAL_MARGIN;
326-
var y2 = y1 + signal.height - SIGNAL_MARGIN;
378+
var y1 = offsetY + SIGNAL_MARGIN + SIGNAL_PADDING;
379+
var y2 = y1 + signal.height - 2*SIGNAL_MARGIN - SIGNAL_PADDING;
327380

328381
// Draw three lines, the last one with a arrow
329382
this.draw_line(aX, y1, aX + SELF_SIGNAL_WIDTH, y1, signal.linetype);
@@ -333,7 +386,7 @@ _.extend(BaseTheme.prototype, {
333386

334387
draw_signal : function (signal, offsetY) {
335388
var aX = getCenterX(signal.actorA);
336-
var bX = getCenterX( signal.actorB );
389+
var bX = getCenterX(signal.actorB);
337390

338391
// Mid point between actors
339392
var x = (bX - aX) / 2 + aX;
@@ -369,9 +422,9 @@ _.extend(BaseTheme.prototype, {
369422
}
370423
break;
371424
default:
372-
throw new Error("Unhandled note placement:" + note.placement);
425+
throw new Error("Unhandled note placement: " + note.placement);
373426
}
374-
this.draw_text_box(note, note.message, NOTE_MARGIN, NOTE_PADDING, this._font, ALIGN_LEFT);
427+
return this.draw_text_box(note, note.message, NOTE_MARGIN, NOTE_PADDING, this._font, ALIGN_LEFT);
375428
},
376429

377430
/**

‎test/font_test.html

+67-9
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,29 @@
22
<head>
33
<title>Raphael Font Test</title>
44
<style type="text/css">
5-
#canvas_container {
5+
.container {
66
width: 1600px;
7-
height: 1200px;
7+
height: 700px;
88
border: 1px solid #aaa;
99
}
10+
11+
@font-face {
12+
font-family: 'daniel';
13+
src: url('../fonts/daniel/danielbd.woff2') format('woff2'),
14+
url('../fonts/daniel/danielbd.woff') format('woff'),
15+
url('../fonts/daniel/danielbd.otf') format('opentype');
16+
font-weight: normal;
17+
font-style: normal;
18+
}
19+
1020
</style>
1121

12-
<script src="../bower_components/raphael/raphael-min.js"></script>
22+
<script src="../bower_components/raphael/raphael.js"></script>
1323
<script src="../fonts/daniel/daniel_700.font.js"></script>
1424

25+
<script src="../bower_components/snap.svg/dist/snap.svg.js"></script>
26+
<script src="../bower_components/bower-webfontloader/webfont.js"></script>
27+
1528
<script type="text/javascript">
1629

1730
/**
@@ -35,8 +48,9 @@
3548
//return path.transform("t" + dx + "," + dy);
3649
};
3750

38-
window.onload = function() {
51+
var font_obj;
3952

53+
function drawRaphaelChart(container, font_name) {
4054
var cols = 32;
4155
var x_spacing = 48;
4256
var y_spacing = 84;
@@ -47,9 +61,9 @@
4761
//'font-family': 'daniel'
4862
};
4963

50-
var canvas = document.getElementById('canvas_container')
64+
var canvas = document.getElementById(container)
5165
var paper = new Raphael(canvas);
52-
var font_obj = paper.getFont('daniel');
66+
font_obj = paper.getFont(font_name); // Store this outside our scope, to use the glyth names in the drawSnap...
5367

5468
/*
5569
// Print all chars in range
@@ -70,16 +84,60 @@
7084
var x = (i % cols) * x_spacing + x_spacing/2;
7185
var y = Math.floor(i / cols) * y_spacing + y_spacing/2;
7286

73-
var t = paper.text(x, y, c);
74-
t.attr(font);
87+
// Normal font
88+
paper.text(x, y, c).attr(font);
7589

90+
// Hand drawn font
7691
paper.print_center(x, y + y_gap, c, font_obj, font['font-size']);
7792
}
93+
}
94+
95+
function drawSnapChart(container, font_name) {
96+
var cols = 32;
97+
var x_spacing = 48;
98+
var y_spacing = 84;
99+
var y_gap = 38;
100+
101+
var font = {
102+
'font-size': 32,
103+
};
78104

105+
var font2 = {
106+
'font-size': 32,
107+
'font-family': font_name
108+
};
109+
110+
var canvas = document.getElementById(container)
111+
var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
112+
canvas.appendChild(svg);
113+
114+
var paper = Snap(svg);
115+
paper.addClass("container");
116+
117+
// Print all chars supported by font
118+
keys = Object.keys(font_obj.glyphs).sort();
119+
for (var i = 0; i < keys.length; i++) {
120+
var c = keys[i];
121+
var x = (i % cols) * x_spacing + x_spacing/2;
122+
var y = Math.floor(i / cols) * y_spacing + y_spacing/2;
123+
124+
// Normal font
125+
paper.text(x, y, c).attr(font);
126+
127+
// Hand drawn font
128+
//paper.print_center(x, y + y_gap, c, font_obj, font['font-size']);
129+
paper.text(x, y + y_gap, c).attr(font2);
130+
}
131+
}
132+
133+
window.onload = function() {
134+
drawRaphaelChart('raphael_container', 'daniel');
135+
drawSnapChart('snap_container', 'daniel')
79136
}
80137
</script>
81138
</head>
82139
<body>
83-
<div id="canvas_container"></div>
140+
<div id="raphael_container" class="container"></div>
141+
<div id="snap_container" class="container"></div>
84142
</body>
85143
</html>

‎test/gallery.html

+17
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,22 @@
88
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
99
<title></title>
1010
<style type="text/css">
11+
/*
1112
@font-face {
1213
font-family: 'Daniel';
1314
font-style: normal;
1415
font-weight: normal;
1516
src: local('Daniel'), url('../fonts/daniel/daniel.otf') format('opentype');
1617
}
18+
*/
19+
@font-face {
20+
font-family: 'daniel';
21+
src: url('../fonts/daniel/danielbd.woff2') format('woff2'),
22+
url('../fonts/daniel/danielbd.woff') format('woff'),
23+
url('../fonts/daniel/danielbd.otf') format('opentype');
24+
font-weight: normal;
25+
font-style: normal;
26+
}
1727

1828
.signal rect {
1929
opacity: 0.5;
@@ -37,11 +47,15 @@
3747
<body bgcolor="#eeeeee">
3848
<textarea class="language" rows="10" cols="35">
3949
Title: Here is a title
50+
A->B:
51+
B->C:
52+
C->C:
4053
A->B: Normal line
4154
B-->C: Dashed line
4255
C->>D: Open arrow
4356
D-->>A: Dashed open arrow
4457
D->D: Self
58+
D->D: Many\nLines
4559
</textarea>
4660
<textarea class="language" rows="10" cols="35">
4761
# Example of a comment.
@@ -59,6 +73,8 @@
5973

6074
<table id="results"></table>
6175

76+
<script src="../bower_components/seedrandom/seedrandom.min.js"></script>
77+
6278
<script src="../bower_components/jquery/jquery.min.js"></script>
6379

6480
<!--script src="../bower_components/underscore/underscore-min.js"></script-->
@@ -117,6 +133,7 @@
117133
_.each(themes, function(value, theme) {
118134
var container = containers[i++];
119135
container.innerHTML = "";
136+
Math.seedrandom('');
120137
diagram.drawSVG(container, {
121138
theme: theme
122139
});

‎test/test.html

+11-21
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,16 @@
99
<title></title>
1010
<style type="text/css">
1111
@font-face {
12-
font-family: 'Daniel';
13-
font-style: normal;
14-
font-weight: normal;
15-
src: local('Daniel'), url('../fonts/daniel/daniel.otf') format('opentype');
12+
font-family: 'danielbd';
13+
src: url('../fonts/daniel/danielbd.woff2') format('woff2'),
14+
url('../fonts/daniel/danielbd.woff') format('woff');
15+
font-weight: normal;
16+
font-style: normal;
1617
}
1718

1819
.sequence.hand {
19-
font-size: 16px;
20-
font-family: 'Daniel';
20+
font-size: 32px;
21+
font-family: 'danielbd';
2122
}
2223
.signal rect {
2324
opacity: 0;
@@ -50,7 +51,7 @@
5051
</textarea>
5152
<button id="parse" type="button">Click Me!</button>
5253

53-
<svg id="diagram"></svg>
54+
<div id="diagram"></div>
5455

5556
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>-->
5657
<script src="../bower_components/jquery/jquery.min.js"></script>
@@ -59,10 +60,8 @@
5960
<script src="../bower_components/lodash/lodash.min.js"></script>
6061
<script src="../bower_components/snap.svg/dist/snap.svg.js"></script>
6162
<script src="../bower_components/bower-webfontloader/webfont.js"></script>
62-
<script src="../bower_components/raphael/raphael-min.js"></script>
63+
<!--script src="../bower_components/raphael/raphael-min.js"></script-->
6364

64-
65-
<!--
6665
<script src="../build/diagram-grammar.js"></script>
6766
<script src="../src/theme.js"></script>
6867
<script src="../src/theme-snap.js"></script>
@@ -71,11 +70,9 @@
7170

7271
<script src="../src/sequence-diagram.js"></script>
7372
<script src="../src/jquery-plugin.js"></script>
74-
-->
7573

7674
<!--script src="../build/sequence-diagram.js"></script-->
77-
78-
<script src="../build/sequence-diagram-min.js"></script>
75+
<!--script src="../build/sequence-diagram-min.js"></script-->
7976
<script>
8077
$(document).ready(function(){
8178
$('#parse').click(_.throttle( function() {
@@ -84,14 +81,7 @@
8481
var diagram = Diagram.parse($('#language').val());
8582
console.log(diagram);
8683

87-
WebFont.load({
88-
custom: {
89-
families: ['Daniel']
90-
},
91-
active: function () {
92-
diagram.drawSVG('#diagram', {theme: 'hand'});
93-
}
94-
});
84+
diagram.drawSVG('diagram', {theme: 'hand'});
9585
//} catch (e) {
9686
// console.log(e);
9787
//}

‎test/webfont-mock.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// Mock WebFont, so we don't need to include the real one (when it's not used during testing)
2+
(function () {
3+
"use strict";
4+
this.WebFont = {
5+
load: function(config){
6+
if (config.active) {
7+
// If we have a callback, call it soon
8+
setTimeout(config.active, 1);
9+
}
10+
},
11+
};
12+
}).call(this);

0 commit comments

Comments
 (0)
Please sign in to comment.