Skip to content

Load Daniel font before rendering, provide default styling using inline css #128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 9 commits into from
Closed

Load Daniel font before rendering, provide default styling using inline css #128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2aef59a
Moved WebFont.load to theme-snap.js so the font will be loaded right …
StefRave Aug 18, 2015
1aa57c2
Close html div tag correctly
StefRave Aug 19, 2015
8570c5f
Added embeded stylesheet in the diagram, so that custom styling is
StefRave Aug 22, 2015
2aec779
Added change on typing, and selecting themes to test.html
StefRave Aug 22, 2015
7c45efc
Don't wobble that close to beginning/end of line for correct marker d…
StefRave Aug 23, 2015
7d6380c
Add a hidden element to the html page to make the browser load the font.
StefRave Aug 23, 2015
e03dc21
Merge remote-tracking branch 'upstream/svg' into bramp/svg
StefRave Aug 29, 2015
96379be
Removed webfontloader. The SVG now rendered after the body.load event
StefRave Aug 29, 2015
431896f
Remove unneeded , from bower.json
StefRave Aug 29, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,7 @@
"dependencies": {
"underscore": "~1.4.x",
"raphael": "~2.1.x",
"snap.svg": "~0.4.1",
"bower-webfontloader": "~1.5.16"
"snap.svg": "~0.4.1"
},
"devDependencies": {
"qunit": "1.11.x",
Expand Down
4 changes: 3 additions & 1 deletion fonts/daniel/daniel_700.font.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
* License information:
* http://creativecommons.org/licenses/by-nd/3.0/
*/
if (typeof Raphael !== "undefined") {
Copy link
Owner

@bramp bramp Aug 19, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, I was being lazy :)

Raphael.registerFont({
"w": 327,
"face": {
Expand Down Expand Up @@ -989,4 +990,5 @@ Raphael.registerFont({
"w": 263
}
}
});
});
}
4 changes: 2 additions & 2 deletions src/theme-raphael.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/
/*global Diagram, Raphael, _ */

if (Raphael) {
if (typeof Raphael !== "undefined") (function () {

var LINE = {
'stroke': '#000000',
Expand Down Expand Up @@ -240,4 +240,4 @@ if (Raphael) {

registerTheme("oldSimple", RaphaelTheme);
registerTheme("oldHand", RaphaelHandTheme);
}
})();
47 changes: 34 additions & 13 deletions src/theme-snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,14 @@
*/
/*global Diagram, Snap, _ */
// TODO Move defintion of font onto the <svg>, so it can easily be override at each level
if (Snap) {
if (typeof Snap !== "undefined") (function () {
var xmlns = "http://www.w3.org/2000/svg";

var LINE = {
'stroke': '#000000',
'stroke-width': 2
};

var RECT = _.extend(LINE, {
'fill': "#fff"
});

/******************
Expand All @@ -28,8 +26,8 @@ if (Snap) {
var wobble = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)) / 25;

// Distance along line
var r1 = Math.random();
var r2 = Math.random();
var r1 = 0.05 + Math.random() * 0.9;
var r2 = 0.05 + Math.random() * 0.9;

var xfactor = Math.random() > 0.5 ? wobble : -wobble;
var yfactor = Math.random() > 0.5 ? wobble : -wobble;
Expand Down Expand Up @@ -103,10 +101,26 @@ if (Snap) {
svg.appendChild(desc);
},

add_style: function (svg) {
var style = document.createElementNS(xmlns, 'style');
style.type = 'text/css';
style.appendChild(document.createTextNode(
"\n" +
".sequence { font-size: 16px; font-family: 'Daniel'; }\n" +
".sequence line { stroke: #000000; }\n" +
".sequence rect { stroke: #000000; fill: #ffffff;}\n" +
".sequence path { stroke: #000000; fill: #ffffff;}\n"));
svg.appendChild(style);
},

init_paper: function (container) {
if (typeof container === "string") {
container = document.getElementById(container);
}
var svg = document.createElementNS(xmlns, 'svg');
container.appendChild(svg);
$(container).prepend(svg);

this.add_style(svg);
this.add_description(svg, this.diagram.title || '');

this._paper = Snap(svg);
Expand All @@ -116,11 +130,11 @@ if (Snap) {
this.clear_group();

var a = this.arrow_markers = {};
var arrow = this._paper.path("M 0 0 L 5 2.5 L 0 5 z");
var arrow = this._paper.path("M 0 0 L 5 2.5 L 0 5 z").attr({ style: "fill: #000000" });
a[ARROWTYPE.FILLED] = arrow.marker(0, 0, 5, 5, 5, 2.5)
.attr({ id: "markerArrowBlock" });

arrow = this._paper.path("M 9.6,8 1.92,16 0,13.7 5.76,8 0,2.286 1.92,0 9.6,8 z");
arrow = this._paper.path("M 9.6,8 1.92,16 0,13.7 5.76,8 0,2.286 1.92,0 9.6,8 z").attr({ style: "fill: #000000"});
a[ARROWTYPE.OPEN] = arrow.marker(0, 0, 9.6, 16, 9.6, 8)
.attr({ markerWidth: "4", id: "markerArrowOpen" });
},
Expand Down Expand Up @@ -214,7 +228,7 @@ if (Snap) {
// draw a rect behind it
if (background) {
var r = paper.rect(x, y, bb.width, bb.height);
r.attr(RECT).attr({'stroke': 'none'});
r.attr(RECT).attr({'style': 'stroke: none;'});
this.push_to_stack(r);
}

Expand Down Expand Up @@ -270,8 +284,8 @@ if (Snap) {
_.extend(SnapHandTheme.prototype, SnapTheme.prototype, {
init_font : function() {
this._font = {
'font-size': 16,
'font-family': 'daniel'
//'font-size': 16,
//'font-family': 'daniel'
};
},

Expand All @@ -293,5 +307,12 @@ if (Snap) {
});

registerTheme("simple", SnapTheme);
registerTheme("hand", SnapHandTheme);
}
registerTheme("hand", SnapHandTheme);

if(typeof document !== "undefined") {
var element = document.createElement("div");
element.style.cssText = "font-family: Daniel; position: absolute;top:-1000px;";
element.innerHTML = 'js-sequence: This is inserted to make sure the font is loaded. This should be invisible in the page';
document.body.insertBefore(element, document.body.firstChild);
}
})();
117 changes: 58 additions & 59 deletions test/test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
Expand All @@ -15,54 +15,55 @@
src: local('Daniel'), url('../fonts/daniel/daniel.otf') format('opentype');
}

.sequence.hand {
/* Override Snap defaults examples */
/*override the default font for the "hand" theme*/
/*.sequence.hand {
font-size: 16px;
font-family: 'Daniel';
}
.signal rect {
opacity: 0;
}
.signal text {
fill: #000000;
}
font-family: 'Consolas';
}*/

.note rect,
.note path {
/* override background color of note */
/*.sequence .note rect,
.sequence .note path {
fill: #ffff00;
}
.title rect,
.title path,
.actor rect,
.actor path {
fill: #ffffff
}
.signal text:hover {
fill: #aaaaaa
}*/

/* hover signal text color */
.sequence .signal line:hover,
.sequence .signal path:hover {
stroke: #777777;
fill: #777777;
}
</style>
</head>
<body>
<textarea id="language" rows="10" cols="50">
<textarea id="language" rows="10" cols="50">
#Note left of A: Note to the\n left of A
#Note right of A: Note to the\n right of A
#Note over A: Note over A
Note over A,B: Note over A,B
</textarea>
<button id="parse" type="button">Click Me!</button>
A -> B: hello
A -->> B: bye
</textarea>
<div style="display: inline-block">
<label style="display: block"><input type="checkbox" name="themeChoice" value="hand" checked="checked">SVG hand</label>
<label style="display: block"><input type="checkbox" name="themeChoice" value="simple" checked="checked">SVG simple</label>
<label style="display: block"><input type="checkbox" name="themeChoice" value="oldHand">Raphaël hand</label>
<label style="display: block"><input type="checkbox" name="themeChoice" value="oldSimple">Raphaël simple</label>
</div>

<svg id="diagram"></svg>
<div id="diagram"></div>

<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>-->
<script src="../bower_components/jquery/jquery.min.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>-->
<script src="../bower_components/jquery/jquery.min.js"></script>

Copy link
Owner

@bramp bramp Aug 19, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opening div tag, but closing svg tag...

<script src="../bower_components/underscore/underscore-min.js"></script>
<script src="../bower_components/lodash/lodash.min.js"></script>
<script src="../bower_components/snap.svg/dist/snap.svg.js"></script>
<script src="../bower_components/bower-webfontloader/webfont.js"></script>
<script src="../bower_components/raphael/raphael-min.js"></script>
<script src="../bower_components/underscore/underscore-min.js"></script>
<script src="../bower_components/lodash/lodash.min.js"></script>
<script src="../bower_components/snap.svg/dist/snap.svg.js"></script>
<script src="../bower_components/raphael/raphael-min.js"></script>

<!--

<!--
<script src="../build/diagram-grammar.js"></script>
<script src="../src/theme.js"></script>
<script src="../src/theme-snap.js"></script>
Expand All @@ -72,34 +73,32 @@
<script src="../src/sequence-diagram.js"></script>
<script src="../src/jquery-plugin.js"></script>
-->
<!--script src="../build/sequence-diagram.js"></script-->

<!--script src="../build/sequence-diagram.js"></script-->

<script src="../build/sequence-diagram-min.js"></script>
<script>
$(document).ready(function(){
$('#parse').click(_.throttle( function() {
<script src="../build/sequence-diagram-min.js"></script>
<script>
$(window).load(function () {
function draw() {
$("#diagram").empty();

//try {
var diagram = Diagram.parse($('#language').val());
console.log(diagram);

WebFont.load({
custom: {
families: ['Daniel']
},
active: function () {
diagram.drawSVG('#diagram', {theme: 'hand'});
}
$($('input[name=themeChoice]:checked').get().reverse()).each(function () {
diagram.drawSVG('diagram', { theme: $(this).val() });
});
//} catch (e) {
// console.log(e);
//}
}, 100));
});
</script>
</body>
</html>


}

draw();

$('input[name=themeChoice]').on("change", function() { draw() });
$('#language').on("change input paste", _.throttle(function () {
//try {
draw();
//} catch (e) {
// console.log(e);
//}
}, 100));
});
</script>
</body>
</html>