Add group component [#46]

lib/sequence-diagram.js

@@ -871,6 +871,14 @@ define('sequence/CodeMirrorMode',['core/ArrayUtilities'], (array) => {
 			}, connectors)));
 		}
 
+		const group = {type: 'keyword', suggest: true, then: {
+			'': textToEnd,
+			':': {type: 'operator', suggest: true, then: {
+				'': textToEnd,
+			}},
+			'\n': end,
+		}};
+
 		const BASE_THEN = {
 			'title': {type: 'keyword', suggest: true, then: {
 				'': textToEnd,
@@ -922,13 +930,7 @@ define('sequence/CodeMirrorMode',['core/ArrayUtilities'], (array) => {
 				'as': CM_ERROR,
 				'\n': end,
 			}},
-			'if': {type: 'keyword', suggest: true, then: {
+			'if': group,
-				'': textToEnd,
-				':': {type: 'operator', suggest: true, then: {
-					'': textToEnd,
-				}},
-				'\n': end,
-			}},
 			'else': {type: 'keyword', suggest: ['else\n', 'else if: '], then: {
 				'if': {type: 'keyword', suggest: 'if: ', then: {
 					'': textToEnd,
@@ -938,13 +940,8 @@ define('sequence/CodeMirrorMode',['core/ArrayUtilities'], (array) => {
 				}},
 				'\n': end,
 			}},
-			'repeat': {type: 'keyword', suggest: true, then: {
+			'repeat': group,
-				'': textToEnd,
+			'group': group,
-				':': {type: 'operator', suggest: true, then: {
-					'': textToEnd,
-				}},
-				'\n': end,
-			}},
 			'note': {type: 'keyword', suggest: true, then: {
 				'over': {type: 'keyword', suggest: true, then: {
 					'': agentListToText,
@@ -1684,6 +1681,12 @@ define('sequence/Parser',[
 			tag: 'repeat',
 			skip: [],
 		},
+		'group': {
+			type: 'block begin',
+			blockType: 'group',
+			tag: '',
+			skip: [],
+		},
 	};
 
 	const CONNECT = {
@@ -4074,7 +4077,10 @@ define('sequence/components/Block',[
 				SVGTextBlockClass: env.SVGTextBlockClass,
 			});
 
-			const labelHeight = Math.max(tagRender.height, labelRender.height);
+			const labelHeight = Math.max(
+				Math.max(tagRender.height, labelRender.height),
+				config.section.label.minHeight
+			);
 
 			clickable.insertBefore(svg.make('rect', {
 				'x': agentInfoL.x,
@@ -7289,11 +7295,12 @@ define('sequence/themes/Basic',[
 			},
 		},
 		label: {
+			minHeight: 4,
 			padding: {
 				top: 1,
 				left: 5,
 				right: 3,
-				bottom: 0,
+				bottom: 1,
 			},
 			labelAttrs: {
 				'font-family': FONT,
@@ -7684,6 +7691,7 @@ define('sequence/themes/Monospace',[
 			},
 		},
 		label: {
+			minHeight: 8,
 			padding: {
 				top: 2,
 				left: 8,
@@ -8077,11 +8085,12 @@ define('sequence/themes/Chunky',[
 			},
 		},
 		label: {
+			minHeight: 5,
 			padding: {
 				top: 2,
 				left: 5,
 				right: 3,
-				bottom: 0,
+				bottom: 1,
 			},
 			labelAttrs: {
 				'font-family': FONT,
@@ -8889,11 +8898,12 @@ define('sequence/themes/Sketch',[
 			},
 		},
 		label: {
+			minHeight: 6,
 			padding: {
 				top: 2,
 				left: 5,
 				right: 3,
-				bottom: 0,
+				bottom: 1,
 			},
 			labelAttrs: {
 				'font-family': FONT_FAMILY,

scripts/interface/ComponentsLibrary.js

@@ -141,6 +141,20 @@ define([], [
 			'end myRef'
 		),
 	},
+	{
+		title: 'Group',
+		code: (
+			'group {Label}\n' +
+			'  {Agent1} -> {Agent2}\n' +
+			'end'
+		),
+		preview: (
+			'begin A, B\n' +
+			'group Label\n' +
+			'  A -> B\n' +
+			'end'
+		),
+	},
 	{
 		title: 'Note over agent',
 		code: 'note over {Agent1}: {Message}',

scripts/sequence/CodeMirrorMode.js

@@ -268,6 +268,14 @@ define(['core/ArrayUtilities'], (array) => {
 			}, connectors)));
 		}
 
+		const group = {type: 'keyword', suggest: true, then: {
+			'': textToEnd,
+			':': {type: 'operator', suggest: true, then: {
+				'': textToEnd,
+			}},
+			'\n': end,
+		}};
+
 		const BASE_THEN = {
 			'title': {type: 'keyword', suggest: true, then: {
 				'': textToEnd,
@@ -319,13 +327,7 @@ define(['core/ArrayUtilities'], (array) => {
 				'as': CM_ERROR,
 				'\n': end,
 			}},
-			'if': {type: 'keyword', suggest: true, then: {
+			'if': group,
-				'': textToEnd,
-				':': {type: 'operator', suggest: true, then: {
-					'': textToEnd,
-				}},
-				'\n': end,
-			}},
 			'else': {type: 'keyword', suggest: ['else\n', 'else if: '], then: {
 				'if': {type: 'keyword', suggest: 'if: ', then: {
 					'': textToEnd,
@@ -335,13 +337,8 @@ define(['core/ArrayUtilities'], (array) => {
 				}},
 				'\n': end,
 			}},
-			'repeat': {type: 'keyword', suggest: true, then: {
+			'repeat': group,
-				'': textToEnd,
+			'group': group,
-				':': {type: 'operator', suggest: true, then: {
-					'': textToEnd,
-				}},
-				'\n': end,
-			}},
 			'note': {type: 'keyword', suggest: true, then: {
 				'over': {type: 'keyword', suggest: true, then: {
 					'': agentListToText,

scripts/sequence/CodeMirrorMode_spec.js

@@ -239,7 +239,8 @@ defineDescribe('Code Mirror Mode', [
 				'else if another thing\n' +
 				'else\n' +
 				'end\n' +
-				'repeat a few times'
+				'repeat a few times\n' +
+				'group foo\n'
 			);
 
 			expect(getTokens(0)).toEqual([
@@ -272,6 +273,11 @@ defineDescribe('Code Mirror Mode', [
 				{v: ' few', type: 'string'},
 				{v: ' times', type: 'string'},
 			]);
+
+			expect(getTokens(6)).toEqual([
+				{v: 'group', type: 'keyword'},
+				{v: ' foo', type: 'string'},
+			]);
 		});
 
 		it('allows colons in block statements', () => {
@@ -428,6 +434,7 @@ defineDescribe('Code Mirror Mode', [
 			expect(hints).toContain('else\n');
 			expect(hints).toContain('else if: ');
 			expect(hints).toContain('repeat ');
+			expect(hints).toContain('group ');
 			expect(hints).toContain('note ');
 			expect(hints).toContain('state over ');
 			expect(hints).toContain('text ');

scripts/sequence/Parser.js

@@ -30,6 +30,12 @@ define([
 			tag: 'repeat',
 			skip: [],
 		},
+		'group': {
+			type: 'block begin',
+			blockType: 'group',
+			tag: '',
+			skip: [],
+		},
 	};
 
 	const CONNECT = {

scripts/sequence/Parser_spec.js

@@ -749,6 +749,17 @@ defineDescribe('Sequence Parser', ['./Parser'], (Parser) => {
 			]);
 		});
 
+		it('converts group blocks', () => {
+			const parsed = parser.parse('group something');
+			expect(parsed.stages).toEqual([
+				PARSED.blockBegin({
+					blockType: 'group',
+					tag: '',
+					label: 'something',
+				}),
+			]);
+		});
+
 		it('rejects quoted keywords', () => {
 			expect(() => parser.parse('"repeat" until something')).toThrow();
 		});

scripts/sequence/SequenceDiagram_spec.js

@@ -145,11 +145,11 @@ defineDescribe('SequenceDiagram', [
 
 		const content = getSimplifiedContent(diagram);
 
-		expect(content).toContain('<svg viewBox="-5 -5 60 37">');
+		expect(content).toContain('<svg viewBox="-5 -5 60 39">');
 
-		expect(content).toContain('<line x1="20" y1="5" x2="20" y2="27"');
+		expect(content).toContain('<line x1="20" y1="7" x2="20" y2="29"');
-		expect(content).toContain('<line x1="30" y1="5" x2="30" y2="27"');
+		expect(content).toContain('<line x1="30" y1="7" x2="30" y2="29"');
-		expect(content).toContain('<rect x="10" y="0" width="30" height="7"');
+		expect(content).toContain('<rect x="10" y="0" width="30" height="9"');
 		expect(content).toContain('<g class="region collapsed"');
 	});
 

scripts/sequence/components/Block.js

@@ -69,7 +69,10 @@ define([
 				SVGTextBlockClass: env.SVGTextBlockClass,
 			});
 
-			const labelHeight = Math.max(tagRender.height, labelRender.height);
+			const labelHeight = Math.max(
+				Math.max(tagRender.height, labelRender.height),
+				config.section.label.minHeight
+			);
 
 			clickable.insertBefore(svg.make('rect', {
 				'x': agentInfoL.x,

scripts/sequence/themes/Basic.js

@@ -216,11 +216,12 @@ define([
 			},
 		},
 		label: {
+			minHeight: 4,
 			padding: {
 				top: 1,
 				left: 5,
 				right: 3,
-				bottom: 0,
+				bottom: 1,
 			},
 			labelAttrs: {
 				'font-family': FONT,

scripts/sequence/themes/Chunky.js

@@ -227,11 +227,12 @@ define([
 			},
 		},
 		label: {
+			minHeight: 5,
 			padding: {
 				top: 2,
 				left: 5,
 				right: 3,
-				bottom: 0,
+				bottom: 1,
 			},
 			labelAttrs: {
 				'font-family': FONT,

scripts/sequence/themes/Monospace.js

@@ -223,6 +223,7 @@ define([
 			},
 		},
 		label: {
+			minHeight: 8,
 			padding: {
 				top: 2,
 				left: 8,

scripts/sequence/themes/Sketch.js

@@ -200,11 +200,12 @@ define([
 			},
 		},
 		label: {
+			minHeight: 6,
 			padding: {
 				top: 2,
 				left: 5,
 				right: 3,
-				bottom: 0,
+				bottom: 1,
 			},
 			labelAttrs: {
 				'font-family': FONT_FAMILY,