Simplify arrow rendering and fix 'bar' terminator width

README.md

@@ -175,11 +175,11 @@ Bar -> Baz
 
 ### Simultaneous Actions (Beta!)
 
-<img src="screenshots/SimultaneousActions.png" alt="Simultaneous Actions preview" width="200" align="right" />
-
 This is a work-in-progress feature. There are situations where this can
 lead to [ugly / unreadable overlapping content](https://github.com/davidje13/SequenceDiagram/issues/13).
 
+<img src="screenshots/SimultaneousActions.png" alt="Simultaneous Actions preview" width="200" align="right" />
+
 ```
 begin A, B, C, D
 A -> C

scripts/sequence/components/Connect.js

@@ -74,6 +74,7 @@ define([
 			const config = env.theme.connect;
 			const from = env.agentInfos.get(agentNames[0]);
 
+			const dx = config.arrow.width;
 			const dy = config.arrow.height / 2;
 			const short = getArrowShort(env.theme);
 
@@ -88,7 +89,7 @@ define([
 			const x0 = (
 				lineX +
 				short +
-				config.arrow.width +
+				dx +
 				config.label.padding
 			);
 
@@ -112,12 +113,14 @@ define([
 			);
 			const y1 = y0 + r * 2;
 
+			const space = short + dx / 2;
+
 			env.shapeLayer.appendChild(svg.make('path', Object.assign({
 				'd': (
-					'M ' + (lineX + (options.left ? short : 0)) + ' ' + y0 +
+					'M ' + (lineX + (options.left ? space : 0)) + ' ' + y0 +
 					' L ' + x1 + ' ' + y0 +
 					' A ' + r + ' ' + r + ' 0 0 1 ' + x1 + ' ' + y1 +
-					' L ' + (lineX + (options.right ? short : 0)) + ' ' + y1
+					' L ' + (lineX + (options.right ? space : 0)) + ' ' + y1
 				),
 			}, config.lineAttrs[options.line])));
 
@@ -125,7 +128,7 @@ define([
 				drawHorizontalArrowHead(env.shapeLayer, {
 					x: lineX + short,
 					y: y0,
-					dx: config.arrow.width,
+					dx,
 					dy,
 					attrs: config.arrow.attrs,
 				});
@@ -135,7 +138,7 @@ define([
 				drawHorizontalArrowHead(env.shapeLayer, {
 					x: lineX + short,
 					y: y1,
-					dx: config.arrow.width,
+					dx,
 					dy,
 					attrs: config.arrow.attrs,
 				});
@@ -149,6 +152,7 @@ define([
 			const from = env.agentInfos.get(agentNames[0]);
 			const to = env.agentInfos.get(agentNames[1]);
 
+			const dx = config.arrow.width;
 			const dy = config.arrow.height / 2;
 			const dir = (from.x < to.x) ? 1 : -1;
 			const short = getArrowShort(env.theme);
@@ -174,10 +178,12 @@ define([
 				SVGTextBlockClass: env.SVGTextBlockClass,
 			});
 
+			const space = short + dx / 2;
+
 			env.shapeLayer.appendChild(svg.make('line', Object.assign({
-				'x1': x0 + (options.left ? short : 0) * dir,
+				'x1': x0 + (options.left ? space : 0) * dir,
 				'y1': y,
-				'x2': x1 - (options.right ? short : 0) * dir,
+				'x2': x1 - (options.right ? space : 0) * dir,
 				'y2': y,
 			}, config.lineAttrs[options.line])));
 
@@ -185,7 +191,7 @@ define([
 				drawHorizontalArrowHead(env.shapeLayer, {
 					x: x0 + short * dir,
 					y,
-					dx: config.arrow.width * dir,
+					dx: dx * dir,
 					dy,
 					attrs: config.arrow.attrs,
 				});
@@ -195,7 +201,7 @@ define([
 				drawHorizontalArrowHead(env.shapeLayer, {
 					x: x1 - short * dir,
 					y,
-					dx: -config.arrow.width * dir,
+					dx: -dx * dir,
 					dy,
 					attrs: config.arrow.attrs,
 				});

scripts/sequence/sequence_integration_spec.js

@@ -74,12 +74,12 @@ defineDescribe('Sequence Integration', [
 
 		const content = getSimplifiedContent(renderer);
 		expect(content).toContain(
-			'<svg width="100%" height="100%" viewBox="-5 -5 82 49">'
+			'<svg width="100%" height="100%" viewBox="-5 -5 82 47">'
 		);
 
 		// Agent 1
 		expect(content).toContain(
-			'<line x1="20.5" y1="11" x2="20.5" y2="39" class="agent-1-line"'
+			'<line x1="20.5" y1="11" x2="20.5" y2="37" class="agent-1-line"'
 		);
 		expect(content).toContain(
 			'<rect x="10" y="0" width="21" height="11"'
@@ -90,7 +90,7 @@ defineDescribe('Sequence Integration', [
 
 		// Agent 2
 		expect(content).toContain(
-			'<line x1="51.5" y1="11" x2="51.5" y2="39" class="agent-2-line"'
+			'<line x1="51.5" y1="11" x2="51.5" y2="37" class="agent-2-line"'
 		);
 		expect(content).toContain(
 			'<rect x="41" y="0" width="21" height="11"'
@@ -101,10 +101,10 @@ defineDescribe('Sequence Integration', [
 
 		// Arrow
 		expect(content).toContain(
-			'<line x1="20.5" y1="20" x2="50.29'
+			'<line x1="20.5" y1="19" x2="48.5" y2="19"'
 		);
 		expect(content).toContain(
-			'<polygon points="46.29'
+			'<polygon points="46 14 51 19 46 24"'
 		);
 	});
 

scripts/sequence/themes/Basic.js

@@ -7,7 +7,7 @@ define(['core/ArrayUtilities', 'svg/SVGShapes'], (array, SVGShapes) => {
 		titleMargin: 10,
 		outerMargin: 5,
 		agentMargin: 10,
-		actionMargin: 5,
+		actionMargin: 3,
 		agentLineHighlightRadius: 4,
 
 		agentCap: {
@@ -42,7 +42,9 @@ define(['core/ArrayUtilities', 'svg/SVGShapes'], (array, SVGShapes) => {
 			bar: {
 				attrs: {
 					'fill': '#000000',
-					'height': 5,
+					'stroke': '#000000',
+					'stroke-width': 1,
+					'height': 4,
 				},
 			},
 			none: {
@@ -66,12 +68,12 @@ define(['core/ArrayUtilities', 'svg/SVGShapes'], (array, SVGShapes) => {
 				},
 			},
 			arrow: {
-				width: 4,
-				height: 8,
+				width: 5,
+				height: 10,
 				attrs: {
 					'fill': '#000000',
-					'stroke': '#000000',
-					'stroke-width': 1,
+					'stroke': 'none',
+					'stroke-width': 0,
 					'stroke-linejoin': 'miter',
 				},
 			},