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

Add monospace theme [#30]

This commit is contained in:
David Evans 2018-01-14 15:29:46 +00:00
parent 4469c91dcd
commit 2b5f7eea2b
9 changed files with 648 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

315
lib/sequence-diagram.js
View File

@ -5825,6 +5825,314 @@ define('sequence/themes/Basic',[
};
});
define('sequence/themes/Monospace',[
'./BaseTheme',
'svg/SVGUtilities',
'svg/SVGShapes',
], (
BaseTheme,
svg,
SVGShapes
) => {
'use strict';
const FONT = 'monospace';
const LINE_HEIGHT = 1.3;
const WAVE = new BaseTheme.WavePattern(6, [
+0,
-0.25,
-0.5,
-0.25,
+0,
+0.25,
+0.5,
+0.25,
]);
const SETTINGS = {
titleMargin: 8,
outerMargin: 4,
agentMargin: 12,
actionMargin: 12,
minActionMargin: 4,
agentLineHighlightRadius: 4,
agentCap: {
box: {
padding: {
top: 4,
left: 8,
right: 8,
bottom: 4,
},
arrowBottom: 12,
boxAttrs: {
'fill': '#FFFFFF',
'stroke': '#000000',
'stroke-width': 1,
},
labelAttrs: {
'font-family': FONT,
'font-size': 12,
'line-height': LINE_HEIGHT,
'text-anchor': 'middle',
},
},
cross: {
size: 16,
render: BaseTheme.renderCross.bind(null, {
'fill': 'none',
'stroke': '#000000',
'stroke-width': 1,
}),
},
bar: {
height: 4,
render: SVGShapes.renderBox.bind(null, {
'fill': '#000000',
'stroke': '#000000',
'stroke-width': 1,
}),
},
fade: {
width: 5,
height: 8,
extend: 1,
},
none: {
height: 8,
},
},
connect: {
loopbackRadius: 4,
line: {
'solid': {
attrs: {
'fill': 'none',
'stroke': '#000000',
'stroke-width': 1,
},
renderFlat: BaseTheme.renderFlatConnector.bind(null, null),
renderRev: BaseTheme.renderRevConnector.bind(null, null),
},
'dash': {
attrs: {
'fill': 'none',
'stroke': '#000000',
'stroke-width': 1,
'stroke-dasharray': '4, 4',
},
renderFlat: BaseTheme.renderFlatConnector.bind(null, null),
renderRev: BaseTheme.renderRevConnector.bind(null, null),
},
'wave': {
attrs: {
'fill': 'none',
'stroke': '#000000',
'stroke-width': 1,
},
renderFlat: BaseTheme.renderFlatConnector.bind(null, WAVE),
renderRev: BaseTheme.renderRevConnector.bind(null, WAVE),
},
},
arrow: {
'single': {
width: 4,
height: 8,
render: BaseTheme.renderHorizArrowHead,
attrs: {
'fill': '#000000',
'stroke-width': 0,
'stroke-linejoin': 'miter',
},
},
'double': {
width: 3,
height: 6,
render: BaseTheme.renderHorizArrowHead,
attrs: {
'fill': 'none',
'stroke': '#000000',
'stroke-width': 1,
'stroke-linejoin': 'miter',
},
},
},
label: {
padding: 4,
margin: {top: 2, bottom: 1},
attrs: {
'font-family': FONT,
'font-size': 8,
'line-height': LINE_HEIGHT,
'text-anchor': 'middle',
},
loopbackAttrs: {
'font-family': FONT,
'font-size': 8,
'line-height': LINE_HEIGHT,
},
},
mask: {
padding: {
top: 0,
left: 3,
right: 3,
bottom: 1,
},
},
},
titleAttrs: {
'font-family': FONT,
'font-size': 20,
'line-height': LINE_HEIGHT,
'text-anchor': 'middle',
'class': 'title',
},
agentLineAttrs: {
'fill': 'none',
'stroke': '#000000',
'stroke-width': 1,
},
};
const SHARED_BLOCK_SECTION = {
padding: {
top: 3,
bottom: 2,
},
mode: {
padding: {
top: 2,
left: 4,
right: 4,
bottom: 2,
},
boxRenderer: BaseTheme.renderTag.bind(null, {
'fill': '#FFFFFF',
'stroke': '#000000',
'stroke-width': 1,
'rx': 3,
'ry': 3,
}),
labelAttrs: {
'font-family': FONT,
'font-weight': 'bold',
'font-size': 9,
'line-height': LINE_HEIGHT,
'text-anchor': 'left',
},
},
label: {
padding: {
top: 2,
left: 8,
right: 8,
bottom: 2,
},
labelAttrs: {
'font-family': FONT,
'font-size': 8,
'line-height': LINE_HEIGHT,
'text-anchor': 'left',
},
},
};
const BLOCKS = {
'ref': {
margin: {
top: 0,
bottom: 0,
},
boxRenderer: SVGShapes.renderBox.bind(null, {
'fill': '#FFFFFF',
'stroke': '#000000',
'stroke-width': 2,
}),
section: SHARED_BLOCK_SECTION,
},
'': {
margin: {
top: 0,
bottom: 0,
},
boxRenderer: SVGShapes.renderBox.bind(null, {
'fill': 'none',
'stroke': '#000000',
'stroke-width': 2,
}),
section: SHARED_BLOCK_SECTION,
sepRenderer: SVGShapes.renderLine.bind(null, {
'stroke': '#000000',
'stroke-width': 2,
'stroke-dasharray': '8, 4',
}),
},
};
const NOTE_ATTRS = {
'font-family': FONT,
'font-size': 8,
'line-height': LINE_HEIGHT,
};
const NOTES = {
'text': {
margin: {top: 0, left: 8, right: 8, bottom: 0},
padding: {top: 4, left: 4, right: 4, bottom: 4},
overlap: {left: 8, right: 8},
boxRenderer: SVGShapes.renderBox.bind(null, {
'fill': '#FFFFFF',
}),
labelAttrs: NOTE_ATTRS,
},
'note': {
margin: {top: 0, left: 8, right: 8, bottom: 0},
padding: {top: 8, left: 8, right: 8, bottom: 8},
overlap: {left: 8, right: 8},
boxRenderer: SVGShapes.renderNote.bind(null, {
'fill': '#FFFFFF',
'stroke': '#000000',
'stroke-width': 1,
}, {
'fill': 'none',
'stroke': '#000000',
'stroke-width': 1,
}),
labelAttrs: NOTE_ATTRS,
},
'state': {
margin: {top: 0, left: 8, right: 8, bottom: 0},
padding: {top: 8, left: 8, right: 8, bottom: 8},
overlap: {left: 8, right: 8},
boxRenderer: SVGShapes.renderBox.bind(null, {
'fill': '#FFFFFF',
'stroke': '#000000',
'stroke-width': 1,
'rx': 8,
'ry': 8,
}),
labelAttrs: NOTE_ATTRS,
},
};
return class MonospaceTheme extends BaseTheme {
constructor() {
super({
name: 'monospace',
settings: SETTINGS,
blocks: BLOCKS,
notes: NOTES,
});
}
};
});
define('sequence/themes/Chunky',[
'./BaseTheme',
'svg/SVGUtilities',
@ -6759,7 +7067,7 @@ define('sequence/themes/Sketch',[
},
label: {
padding: {
top: 1,
top: 2,
left: 5,
right: 3,
bottom: 0,
@ -6801,7 +7109,7 @@ define('sequence/themes/Sketch',[
const NOTES = {
'text': {
margin: {top: 0, left: 2, right: 2, bottom: 0},
margin: {top: 0, left: 6, right: 6, bottom: 0},
padding: {top: 2, left: 2, right: 2, bottom: 2},
overlap: {left: 10, right: 10},
boxRenderer: SVGShapes.renderBox.bind(null, {
@ -7402,6 +7710,7 @@ define('sequence/SequenceDiagram',[
'./Exporter',
'./themes/BaseTheme',
'./themes/Basic',
'./themes/Monospace',
'./themes/Chunky',
'./themes/Sketch',
], (
@ -7412,6 +7721,7 @@ define('sequence/SequenceDiagram',[
Exporter,
BaseTheme,
BasicTheme,
MonospaceTheme,
ChunkyTheme,
SketchTheme
) => {
@ -7420,6 +7730,7 @@ define('sequence/SequenceDiagram',[
const themes = [
new BasicTheme(),
new MonospaceTheme(),
new ChunkyTheme(),
new SketchTheme(SketchTheme.RIGHT),
new SketchTheme(SketchTheme.LEFT),

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

File diff suppressed because one or more lines are too long

1
library.htm
View File

@ -263,6 +263,7 @@ end Another thing
<h4>Available themes</h4>
<ul>
<li>basic</li>
<li>monospace</li>
<li>chunky</li>
<li>sketch</li>
<li>sketch left handed</li>

9
scripts/editor.js
View File

@ -199,15 +199,20 @@
code: 'title {Title}',
preview: 'headers box\ntitle Title\nA -> B',
},
{
title: 'Monospace theme',
code: 'theme monospace',
preview: 'headers box\ntitle mono\ntheme monospace\nA -> B',
},
{
title: 'Chunky theme',
code: 'theme chunky',
preview: 'headers box\ntheme chunky\nA -> B',
preview: 'headers box\ntitle chunky\ntheme chunky\nA -> B',
},
{
title: 'Sketch theme',
code: 'theme sketch',
preview: 'headers box\ntheme sketch\nA -> B',
preview: 'headers box\ntitle sketch\ntheme sketch\nA -> B',
},
{
title: 'Cross terminators',

3
scripts/sequence/SequenceDiagram.js
View File

@ -7,6 +7,7 @@ define([
'./Exporter',
'./themes/BaseTheme',
'./themes/Basic',
'./themes/Monospace',
'./themes/Chunky',
'./themes/Sketch',
], (
@ -17,6 +18,7 @@ define([
Exporter,
BaseTheme,
BasicTheme,
MonospaceTheme,
ChunkyTheme,
SketchTheme
) => {
@ -25,6 +27,7 @@ define([
const themes = [
new BasicTheme(),
new MonospaceTheme(),
new ChunkyTheme(),
new SketchTheme(SketchTheme.RIGHT),
new SketchTheme(SketchTheme.LEFT),

307
scripts/sequence/themes/Monospace.js Normal file
View File

@ -0,0 +1,307 @@
define([
'./BaseTheme',
'svg/SVGUtilities',
'svg/SVGShapes',
], (
BaseTheme,
svg,
SVGShapes
) => {
'use strict';
const FONT = 'monospace';
const LINE_HEIGHT = 1.3;
const WAVE = new BaseTheme.WavePattern(6, [
+0,
-0.25,
-0.5,
-0.25,
+0,
+0.25,
+0.5,
+0.25,
]);
const SETTINGS = {
titleMargin: 8,
outerMargin: 4,
agentMargin: 12,
actionMargin: 12,
minActionMargin: 4,
agentLineHighlightRadius: 4,
agentCap: {
box: {
padding: {
top: 4,
left: 8,
right: 8,
bottom: 4,
},
arrowBottom: 12,
boxAttrs: {
'fill': '#FFFFFF',
'stroke': '#000000',
'stroke-width': 1,
},
labelAttrs: {
'font-family': FONT,
'font-size': 12,
'line-height': LINE_HEIGHT,
'text-anchor': 'middle',
},
},
cross: {
size: 16,
render: BaseTheme.renderCross.bind(null, {
'fill': 'none',
'stroke': '#000000',
'stroke-width': 1,
}),
},
bar: {
height: 4,
render: SVGShapes.renderBox.bind(null, {
'fill': '#000000',
'stroke': '#000000',
'stroke-width': 1,
}),
},
fade: {
width: 5,
height: 8,
extend: 1,
},
none: {
height: 8,
},
},
connect: {
loopbackRadius: 4,
line: {
'solid': {
attrs: {
'fill': 'none',
'stroke': '#000000',
'stroke-width': 1,
},
renderFlat: BaseTheme.renderFlatConnector.bind(null, null),
renderRev: BaseTheme.renderRevConnector.bind(null, null),
},
'dash': {
attrs: {
'fill': 'none',
'stroke': '#000000',
'stroke-width': 1,
'stroke-dasharray': '4, 4',
},
renderFlat: BaseTheme.renderFlatConnector.bind(null, null),
renderRev: BaseTheme.renderRevConnector.bind(null, null),
},
'wave': {
attrs: {
'fill': 'none',
'stroke': '#000000',
'stroke-width': 1,
},
renderFlat: BaseTheme.renderFlatConnector.bind(null, WAVE),
renderRev: BaseTheme.renderRevConnector.bind(null, WAVE),
},
},
arrow: {
'single': {
width: 4,
height: 8,
render: BaseTheme.renderHorizArrowHead,
attrs: {
'fill': '#000000',
'stroke-width': 0,
'stroke-linejoin': 'miter',
},
},
'double': {
width: 3,
height: 6,
render: BaseTheme.renderHorizArrowHead,
attrs: {
'fill': 'none',
'stroke': '#000000',
'stroke-width': 1,
'stroke-linejoin': 'miter',
},
},
},
label: {
padding: 4,
margin: {top: 2, bottom: 1},
attrs: {
'font-family': FONT,
'font-size': 8,
'line-height': LINE_HEIGHT,
'text-anchor': 'middle',
},
loopbackAttrs: {
'font-family': FONT,
'font-size': 8,
'line-height': LINE_HEIGHT,
},
},
mask: {
padding: {
top: 0,
left: 3,
right: 3,
bottom: 1,
},
},
},
titleAttrs: {
'font-family': FONT,
'font-size': 20,
'line-height': LINE_HEIGHT,
'text-anchor': 'middle',
'class': 'title',
},
agentLineAttrs: {
'fill': 'none',
'stroke': '#000000',
'stroke-width': 1,
},
};
const SHARED_BLOCK_SECTION = {
padding: {
top: 3,
bottom: 2,
},
mode: {
padding: {
top: 2,
left: 4,
right: 4,
bottom: 2,
},
boxRenderer: BaseTheme.renderTag.bind(null, {
'fill': '#FFFFFF',
'stroke': '#000000',
'stroke-width': 1,
'rx': 3,
'ry': 3,
}),
labelAttrs: {
'font-family': FONT,
'font-weight': 'bold',
'font-size': 9,
'line-height': LINE_HEIGHT,
'text-anchor': 'left',
},
},
label: {
padding: {
top: 2,
left: 8,
right: 8,
bottom: 2,
},
labelAttrs: {
'font-family': FONT,
'font-size': 8,
'line-height': LINE_HEIGHT,
'text-anchor': 'left',
},
},
};
const BLOCKS = {
'ref': {
margin: {
top: 0,
bottom: 0,
},
boxRenderer: SVGShapes.renderBox.bind(null, {
'fill': '#FFFFFF',
'stroke': '#000000',
'stroke-width': 2,
}),
section: SHARED_BLOCK_SECTION,
},
'': {
margin: {
top: 0,
bottom: 0,
},
boxRenderer: SVGShapes.renderBox.bind(null, {
'fill': 'none',
'stroke': '#000000',
'stroke-width': 2,
}),
section: SHARED_BLOCK_SECTION,
sepRenderer: SVGShapes.renderLine.bind(null, {
'stroke': '#000000',
'stroke-width': 2,
'stroke-dasharray': '8, 4',
}),
},
};
const NOTE_ATTRS = {
'font-family': FONT,
'font-size': 8,
'line-height': LINE_HEIGHT,
};
const NOTES = {
'text': {
margin: {top: 0, left: 8, right: 8, bottom: 0},
padding: {top: 4, left: 4, right: 4, bottom: 4},
overlap: {left: 8, right: 8},
boxRenderer: SVGShapes.renderBox.bind(null, {
'fill': '#FFFFFF',
}),
labelAttrs: NOTE_ATTRS,
},
'note': {
margin: {top: 0, left: 8, right: 8, bottom: 0},
padding: {top: 8, left: 8, right: 8, bottom: 8},
overlap: {left: 8, right: 8},
boxRenderer: SVGShapes.renderNote.bind(null, {
'fill': '#FFFFFF',
'stroke': '#000000',
'stroke-width': 1,
}, {
'fill': 'none',
'stroke': '#000000',
'stroke-width': 1,
}),
labelAttrs: NOTE_ATTRS,
},
'state': {
margin: {top: 0, left: 8, right: 8, bottom: 0},
padding: {top: 8, left: 8, right: 8, bottom: 8},
overlap: {left: 8, right: 8},
boxRenderer: SVGShapes.renderBox.bind(null, {
'fill': '#FFFFFF',
'stroke': '#000000',
'stroke-width': 1,
'rx': 8,
'ry': 8,
}),
labelAttrs: NOTE_ATTRS,
},
};
return class MonospaceTheme extends BaseTheme {
constructor() {
super({
name: 'monospace',
settings: SETTINGS,
blocks: BLOCKS,
notes: NOTES,
});
}
};
});

13
scripts/sequence/themes/Monospace_spec.js Normal file
View File

@ -0,0 +1,13 @@
defineDescribe('Monospace Theme', ['./Monospace'], (MonospaceTheme) => {
'use strict';
const theme = new MonospaceTheme();
it('has a name', () => {
expect(theme.name).toEqual('monospace');
});
it('contains settings for the theme', () => {
expect(theme.outerMargin).toEqual(4);
});
});

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

@ -182,7 +182,7 @@ define([
},
label: {
padding: {
top: 1,
top: 2,
left: 5,
right: 3,
bottom: 0,
@ -224,7 +224,7 @@ define([
const NOTES = {
'text': {
margin: {top: 0, left: 2, right: 2, bottom: 0},
margin: {top: 0, left: 6, right: 6, bottom: 0},
padding: {top: 2, left: 2, right: 2, bottom: 2},
overlap: {left: 10, right: 10},
boxRenderer: SVGShapes.renderBox.bind(null, {

1
scripts/specs.js
View File

@ -13,6 +13,7 @@ define([
'sequence/Generator_spec',
'sequence/Renderer_spec',
'sequence/themes/Basic_spec',
'sequence/themes/Monospace_spec',
'sequence/themes/Chunky_spec',
'sequence/themes/Sketch_spec',
'sequence/components/AgentCap_spec',