Fix fade terminator not always covering line in sketch theme [#18]

lib/sequence-diagram.js

@@ -3787,6 +3787,7 @@ define('sequence/components/AgentCap',[
 
 		render(y, {x, label}, env, isBegin) {
 			const config = env.theme.agentCap.fade;
+			const ratio = config.height / (config.height + config.extend);
 
 			const gradID = env.addDef(isBegin ? 'FadeIn' : 'FadeOut', () => {
 				const grad = svg.make('linearGradient', {
@@ -3796,11 +3797,11 @@ define('sequence/components/AgentCap',[
 					'y2': isBegin ? '0%' : '100%',
 				});
 				grad.appendChild(svg.make('stop', {
-					'offset': (100 * 1 / 12) + '%',
+					'offset': '0%',
 					'stop-color': '#FFFFFF',
 				}));
 				grad.appendChild(svg.make('stop', {
-					'offset': (100 * 11 / 12) + '%',
+					'offset': (100 * ratio).toFixed(3) + '%',
 					'stop-color': '#000000',
 				}));
 				return grad;
@@ -3808,9 +3809,9 @@ define('sequence/components/AgentCap',[
 
 			env.maskLayer.appendChild(svg.make('rect', {
 				'x': x - config.width / 2,
-				'y': y - config.height * 0.1,
+				'y': y - (isBegin ? config.extend : 0),
 				'width': config.width,
-				'height': config.height * 1.2,
+				'height': config.height + config.extend,
 				'fill': 'url(#' + gradID + ')',
 			}));
 
@@ -5469,6 +5470,7 @@ define('sequence/themes/Basic',[
 			fade: {
 				width: 5,
 				height: 6,
+				extend: 1,
 			},
 			none: {
 				height: 10,
@@ -5773,6 +5775,7 @@ define('sequence/themes/Chunky',[
 			fade: {
 				width: 5,
 				height: 10,
+				extend: 1,
 			},
 			none: {
 				height: 10,
@@ -6461,12 +6464,10 @@ define('sequence/themes/Sketch',[
 ) => {
 	'use strict';
 
-	// TODO:
-	// * fade starter/terminator sometimes does not fully cover line
-
 	const FONT = Handlee.name;
-	const FONT_FAMILY = '"' + FONT + '",cursive';
+	const FONT_FAMILY = '\'' + FONT + '\',cursive';
 	const LINE_HEIGHT = 1.5;
+	const MAX_CHAOS = 5;
 
 	const PENCIL = {
 		'stroke': 'rgba(0,0,0,0.7)',
@@ -6516,8 +6517,9 @@ define('sequence/themes/Sketch',[
 				render: null,
 			},
 			fade: {
-				width: 8,
+				width: Math.ceil(MAX_CHAOS * 2 + 2),
 				height: 6,
+				extend: Math.ceil(MAX_CHAOS * 0.3 + 1),
 			},
 			none: {
 				height: 10,
@@ -6837,7 +6839,7 @@ define('sequence/themes/Sketch',[
 				(p2.x - p1.x) * (p2.x - p1.x) +
 				(p2.y - p1.y) * (p2.y - p1.y)
 			);
-			const rough = Math.min(Math.sqrt(length) * 0.2, 5);
+			const rough = Math.min(Math.sqrt(length) * 0.2, MAX_CHAOS);
 			const x1 = p1.x + this.vary(var1 * varX * rough);
 			const y1 = p1.y + this.vary(var1 * varY * rough);
 			const x2 = p2.x + this.vary(var2 * varX * rough);

scripts/sequence/components/AgentCap.js

@@ -174,6 +174,7 @@ define([
 
 		render(y, {x, label}, env, isBegin) {
 			const config = env.theme.agentCap.fade;
+			const ratio = config.height / (config.height + config.extend);
 
 			const gradID = env.addDef(isBegin ? 'FadeIn' : 'FadeOut', () => {
 				const grad = svg.make('linearGradient', {
@@ -183,11 +184,11 @@ define([
 					'y2': isBegin ? '0%' : '100%',
 				});
 				grad.appendChild(svg.make('stop', {
-					'offset': (100 * 1 / 12) + '%',
+					'offset': '0%',
 					'stop-color': '#FFFFFF',
 				}));
 				grad.appendChild(svg.make('stop', {
-					'offset': (100 * 11 / 12) + '%',
+					'offset': (100 * ratio).toFixed(3) + '%',
 					'stop-color': '#000000',
 				}));
 				return grad;
@@ -195,9 +196,9 @@ define([
 
 			env.maskLayer.appendChild(svg.make('rect', {
 				'x': x - config.width / 2,
-				'y': y - config.height * 0.1,
+				'y': y - (isBegin ? config.extend : 0),
 				'width': config.width,
-				'height': config.height * 1.2,
+				'height': config.height + config.extend,
 				'fill': 'url(#' + gradID + ')',
 			}));
 

scripts/sequence/themes/Basic.js

@@ -60,6 +60,7 @@ define([
 			fade: {
 				width: 5,
 				height: 6,
+				extend: 1,
 			},
 			none: {
 				height: 10,

scripts/sequence/themes/Chunky.js

@@ -66,6 +66,7 @@ define([
 			fade: {
 				width: 5,
 				height: 10,
+				extend: 1,
 			},
 			none: {
 				height: 10,

scripts/sequence/themes/Sketch.js

@@ -11,12 +11,10 @@ define([
 ) => {
 	'use strict';
 
-	// TODO:
-	// * fade starter/terminator sometimes does not fully cover line
-
 	const FONT = Handlee.name;
-	const FONT_FAMILY = '"' + FONT + '",cursive';
+	const FONT_FAMILY = '\'' + FONT + '\',cursive';
 	const LINE_HEIGHT = 1.5;
+	const MAX_CHAOS = 5;
 
 	const PENCIL = {
 		'stroke': 'rgba(0,0,0,0.7)',
@@ -66,8 +64,9 @@ define([
 				render: null,
 			},
 			fade: {
-				width: 8,
+				width: Math.ceil(MAX_CHAOS * 2 + 2),
 				height: 6,
+				extend: Math.ceil(MAX_CHAOS * 0.3 + 1),
 			},
 			none: {
 				height: 10,
@@ -387,7 +386,7 @@ define([
 				(p2.x - p1.x) * (p2.x - p1.x) +
 				(p2.y - p1.y) * (p2.y - p1.y)
 			);
-			const rough = Math.min(Math.sqrt(length) * 0.2, 5);
+			const rough = Math.min(Math.sqrt(length) * 0.2, MAX_CHAOS);
 			const x1 = p1.x + this.vary(var1 * varX * rough);
 			const y1 = p1.y + this.vary(var1 * varY * rough);
 			const x2 = p2.x + this.vary(var2 * varX * rough);