Skip to content

Commit 5ee0c32

Browse files
ZechyWZechyW
committed
Demo: Pre-load fonts so that SVG Text dimensions are accurate
- Demo: Use the Web Font Loader library to ensure that the fonts used for the demo are loaded before the visualisation is drawn. Should fix issues with minor visual glitches and inconsistencies caused by late font loading. - Links: Labels can now be moved by either their textual baselines or their absolute vertical centres. Their background rectangles are now slightly bigger (to follow the Text elements' BBoxes) - Config: Increased the Link slot interval and inter-Row padding defaults
1 parent b3b1b91 commit 5ee0c32

File tree

12 files changed

+121
-51
lines changed

12 files changed

+121
-51
lines changed

‎demo/demo.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/demo.min.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/demo.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@
1313
-- `demo.scss`.
1414
-->
1515
<link href="demo.min.css" rel="stylesheet">
16+
17+
<!-- In particular, we use the Web Font Loader library to ensure that the fonts we are using for the demo are
18+
-- available (so that our width/height calculations for Text elements are accurate)
19+
-->
20+
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
1621
</head>
1722
<body>
1823
<div class="container py-5">

‎demo/src/demo.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,25 @@ window.jQuery = $;
4141

4242
// Main function
4343
$(async () => {
44+
// -----
45+
// Fonts
46+
// -----
47+
// Because the demo uses an externally-loaded font, we use the Web Font
48+
// Loader to ensure that it is available before initialisation (so that we
49+
// can calculate the dimensions of SVG Text elements accurately)
50+
const fontLoadPromise = new Promise((resolve, reject) => {
51+
WebFont.load({
52+
google: {
53+
families: ["Nunito:600,700"]
54+
},
55+
active: () => {
56+
resolve();
57+
}
58+
});
59+
});
60+
61+
await fontLoadPromise;
62+
4463
// -------------
4564
// Basic example
4665
// -------------

‎demo/src/demo.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,7 @@
6363
}
6464

6565
// Fonts used in the visualisation
66-
@import url("https://fonts.googleapis.com/css?family=Nunito:400,600,700");
67-
66+
// The actual loading of the font happens at the start of `demo.js` via the Web Font Loader
6867
svg, svg text {
6968
font-family: Nunito, futura, helvetica, arial, sans-serif;
7069
font-weight: 600;

‎dist/tag/css/tag.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/tag/js/tag.js‎

Lines changed: 47 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -40195,30 +40195,27 @@ function () {
4019540195

4019640196
/** @type svgjs.Text */
4019740197

40198-
this.svgText = this.svg.text(text).leading(1).addClass("tag-element").addClass("link-text").addClass(addClass); // Transform the text based on its font-size so that we can position it
40199-
// relative to its baseline (with a bit of a fudge factor)
40198+
this.svgText = this.svg.plain(text).addClass("tag-element").addClass("link-text").addClass(addClass); // Calculate the y-interval between the Text element's top edge and
40199+
// baseline, so that we can transform the background / move the Label
40200+
// around accordingly.
40201+
// Svg.js has actually already done this for us -- the value of `.y()`
40202+
// is the top edge, and `.attr("y")` is the baseline
4020040203

40201-
this.fontSize = parseInt($(this.svgText.node).css("font-size"));
40202-
this.svgText.transform({
40203-
y: -this.fontSize + 1
40204-
});
40205-
this.svgTextBbox = this.svgText.bbox(); // Background (rectangle)
40204+
this.svgTextBbox = this.svgText.bbox();
40205+
this.ascent = this.svgText.attr("y") - this.svgText.y();
40206+
this.baselineYOffset = this.ascent - this.svgTextBbox.h / 2; // Background (rectangle)
4020640207

40207-
this.svgBackground = this.svg.rect(this.svgTextBbox.width + 2, this.fontSize + 2).addClass("tag-element").addClass("link-text-bg").addClass(addClass).radius(2.5).back(); // Transform the rectangle to sit nicely behind the label
40208+
this.svgBackground = this.svg.rect(this.svgTextBbox.width + 2, this.svgTextBbox.height).addClass("tag-element").addClass("link-text-bg").addClass(addClass).radius(2.5).back(); // Transform the rectangle to sit nicely behind the label
4020840209

4020940210
this.svgBackground.transform({
4021040211
x: -this.svgTextBbox.width / 2 - 1,
40211-
y: -this.fontSize + 2.5
40212+
y: -this.ascent
4021240213
}); // // Background (text)
4021340214
// this.svgBackground = this.svg.text(text)
4021440215
// .addClass("tag-element")
4021540216
// .addClass("link-text-bg")
4021640217
// .addClass(addClass)
4021740218
// .back();
40218-
// // Transform the background to sit nicely behind the label
40219-
// this.svgBackground.transform({
40220-
// y: -this.fontSize
40221-
// });
4022240219
// Click events
4022340220

4022440221
this.svgText.node.oncontextmenu = function (e) {
@@ -40270,18 +40267,34 @@ function () {
4027040267
this.svgText.hide();
4027140268
}
4027240269
/**
40273-
* Moves the Label text elements to the given coordinates
40270+
* Moves the centre of the baseline of the Label text elements to the given
40271+
* coordinates
4027440272
* (N.B.: SVG Text elements are positioned horizontally by their centres,
40275-
* by default)
40276-
* @param x
40277-
* @param y
40273+
* by default. Also, setting the y-attribute directly allows us to move
40274+
* the Text element directly by its baseline, rather than its top edge)
40275+
* @param x - New horizontal centre of the Label
40276+
* @param y - New baseline of the Label
4027840277
*/
4027940278

4028040279
}, {
4028140280
key: "move",
4028240281
value: function move(x, y) {
4028340282
this.svgBackground.move(x, y);
40284-
this.svgText.move(x, y);
40283+
this.svgText.attr({
40284+
x: x,
40285+
y: y
40286+
});
40287+
}
40288+
/**
40289+
* Centres the Label elements horizontally and vertically on the given point
40290+
* @param x - New horizontal centre of the Label
40291+
* @param y - New vertical centre of the Label
40292+
*/
40293+
40294+
}, {
40295+
key: "centre",
40296+
value: function centre(x, y) {
40297+
return this.move(x, y + this.baselineYOffset);
4028540298
}
4028640299
/**
4028740300
* Returns the length (i.e., width) of the main label
@@ -40292,6 +40305,20 @@ function () {
4029240305
key: "length",
4029340306
value: function length() {
4029440307
return this.svgText.length();
40308+
} // =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
40309+
// Debug functions
40310+
40311+
/**
40312+
* Draws the outline of the text element's bounding box
40313+
*/
40314+
40315+
}, {
40316+
key: "drawTextBbox",
40317+
value: function drawTextBbox() {
40318+
var bbox = this.svgText.bbox();
40319+
this.svg.polyline([[bbox.x, bbox.y], [bbox.x2, bbox.y], [bbox.x2, bbox.y2], [bbox.x, bbox.y2], [bbox.x, bbox.y]]).fill("none").stroke({
40320+
width: 1
40321+
});
4029540322
}
4029640323
}]);
4029740324
return Label;
@@ -42321,7 +42348,7 @@ var Config = function Config() {
4232142348
// Padding on the left/right edges of each Row
4232242349
this.rowEdgePadding = 10; // Padding on the top/bottom of each Row
4232342350

42324-
this.rowVerticalPadding = 10; // Extra padding on Row top for Link labels
42351+
this.rowVerticalPadding = 20; // Extra padding on Row top for Link labels
4232542352
// (Labels for top Links are drawn above their line, and it is not
4232642353
// trivial to get a good value for how high they are, so we use a
4232742354
// pre-configured value here)
@@ -42347,7 +42374,7 @@ var Config = function Config() {
4234742374
// Drawing options for Links in the visualisation
4234842375
// Vertical distance between each Link slot (for crossing/overlapping Links)
4234942376

42350-
this.linkSlotInterval = 35; // Vertical padding between Link arrowheads and their anchors
42377+
this.linkSlotInterval = 40; // Vertical padding between Link arrowheads and their anchors
4235142378

4235242379
this.linkHandlePadding = 2; // Corner curve width for Links
4235342380

‎dist/tag/js/tag.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/css/tag.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
}
8383

8484
.link-text-bg {
85-
fill: #ffffff;
85+
fill: #fff;
8686
}
8787

8888
.link.syntax-link {

0 commit comments

Comments
 (0)