yaroslav
/
SequenceDiagram
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
David Evans 2018-01-11 21:51:04 +00:00
parent 1c7221e6b6
commit 1771a89478
6 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
lib/sequence-diagram.js
View File

@ -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);

2
lib/sequence-diagram.min.js vendored
View File

File diff suppressed because one or more lines are too long

9
scripts/sequence/components/AgentCap.js
View File

@ -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 + ')',
}));

1
scripts/sequence/themes/Basic.js
View File

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

1
scripts/sequence/themes/Chunky.js
View File

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

11
scripts/sequence/themes/Sketch.js
View File

@ -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);