Fix reference box render glitches [#33]

lib/sequence-diagram.js

@@ -3936,6 +3936,7 @@ define('sequence/components/BaseComponent',[],() => {
 		render(/*stage, {
 			topY,
 			primaryY,
+			fillLayer,
 			blockLayer,
 			shapeLayer,
 			labelLayer,
@@ -4149,12 +4150,23 @@ define('sequence/components/Block',[
 			const agentInfoL = env.agentInfos.get(left);
 			const agentInfoR = env.agentInfos.get(right);
 
-			blockInfo.hold.appendChild(config.boxRenderer({
+			let shapes = config.boxRenderer({
 				x: agentInfoL.x,
 				y: blockInfo.startY,
 				width: agentInfoR.x - agentInfoL.x,
 				height: env.primaryY - blockInfo.startY,
-			}));
+			});
+			if(!shapes.shape) {
+				shapes = {shape: shapes};
+			}
+
+			blockInfo.hold.appendChild(shapes.shape);
+			if(shapes.fill) {
+				env.fillLayer.appendChild(shapes.fill);
+			}
+			if(shapes.mask) {
+				env.maskLayer.appendChild(shapes.mask);
+			}
 
 			return env.primaryY + config.margin.bottom + env.theme.actionMargin;
 		}
@@ -5686,6 +5698,7 @@ define('sequence/Renderer',[
 				'maskUnits': 'userSpaceOnUse',
 			});
 			this.maskReveal = svg.make('rect', {'fill': '#FFFFFF'});
+			this.backgroundFills = svg.make('g');
 			this.agentLines = svg.make('g', {
 				'mask': 'url(#' + this.namespace + 'LineMask)',
 			});
@@ -5695,6 +5708,7 @@ define('sequence/Renderer',[
 			this.base.appendChild(this.buildMetadata());
 			this.base.appendChild(this.themeDefs);
 			this.base.appendChild(this.defs);
+			this.base.appendChild(this.backgroundFills);
 			this.base.appendChild(this.agentLines);
 			this.base.appendChild(this.blocks);
 			this.base.appendChild(this.actionShapes);
@@ -5900,6 +5914,7 @@ define('sequence/Renderer',[
 			const env = {
 				topY,
 				primaryY: topY + topShift,
+				fillLayer: this.backgroundFills,
 				blockLayer: this.blocks,
 				shapeLayer: this.actionShapes,
 				labelLayer: this.actionLabels,
@@ -6034,6 +6049,7 @@ define('sequence/Renderer',[
 			this.currentHighlight = -1;
 			svg.empty(this.defs);
 			svg.empty(this.mask);
+			svg.empty(this.backgroundFills);
 			svg.empty(this.agentLines);
 			svg.empty(this.blocks);
 			svg.empty(this.actionShapes);
@@ -6611,6 +6627,21 @@ define('sequence/themes/BaseTheme',[
 		}, attrs));
 	};
 
+	BaseTheme.renderRef = (options, position) => {
+		return {
+			shape: SVGShapes.renderBox(Object.assign({}, options, {
+				'fill': 'none',
+			}), position),
+			mask: SVGShapes.renderBox(Object.assign({}, options, {
+				'fill': '#000000',
+				'stroke': 'none',
+			}), position),
+			fill: SVGShapes.renderBox(Object.assign({}, options, {
+				'stroke': 'none',
+			}), position),
+		};
+	};
+
 	BaseTheme.WavePattern = class WavePattern {
 		constructor(width, height) {
 			if(Array.isArray(height)) {
@@ -7063,7 +7094,7 @@ define('sequence/themes/Basic',[
 				top: 0,
 				bottom: 0,
 			},
-			boxRenderer: SVGShapes.renderBox.bind(null, {
+			boxRenderer: BaseTheme.renderRef.bind(null, {
 				'fill': '#FFFFFF',
 				'stroke': '#000000',
 				'stroke-width': 1.5,
@@ -7451,7 +7482,7 @@ define('sequence/themes/Monospace',[
 				top: 0,
 				bottom: 0,
 			},
-			boxRenderer: SVGShapes.renderBox.bind(null, {
+			boxRenderer: BaseTheme.renderRef.bind(null, {
 				'fill': '#FFFFFF',
 				'stroke': '#000000',
 				'stroke-width': 2,
@@ -7839,7 +7870,7 @@ define('sequence/themes/Chunky',[
 				top: 0,
 				bottom: 0,
 			},
-			boxRenderer: SVGShapes.renderBox.bind(null, {
+			boxRenderer: BaseTheme.renderRef.bind(null, {
 				'fill': '#FFFFFF',
 				'stroke': '#000000',
 				'stroke-width': 4,
@@ -8969,7 +9000,7 @@ define('sequence/themes/Sketch',[
 			return shape;
 		}
 
-		renderBox({x, y, width, height}, {fill = null, thick = false} = {}) {
+		boxNodes({x, y, width, height}) {
 			const lT = this.lineNodes(
 				{x, y},
 				{x: x + width, y},
@@ -8991,12 +9022,14 @@ define('sequence/themes/Sketch',[
 				{var1: 0, var2: 0.3, move: false}
 			);
 
-			const shape = svg.make('path', Object.assign({
+			return lT.nodes + lR.nodes + lB.nodes + lL.nodes;
-				'd': lT.nodes + lR.nodes + lB.nodes + lL.nodes,
+		}
+
+		renderBox(position, {fill = null, thick = false} = {}) {
+			return svg.make('path', Object.assign({
+				'd': this.boxNodes(position),
 				'fill': fill || '#FFFFFF',
 			}, thick ? PENCIL.thick : PENCIL.normal));
-
-			return shape;
 		}
 
 		renderNote({x, y, width, height}) {
@@ -9235,18 +9268,26 @@ define('sequence/themes/Sketch',[
 			}, PENCIL.normal));
 		}
 
-		renderRefBlock({x, y, width, height}) {
+		renderRefBlock(position) {
-			return this.renderBox(
+			const nodes = this.boxNodes(position);
-				{x, y, width, height},
+			return {
-				{fill: '#FFFFFF', thick: true}
+				shape: svg.make('path', Object.assign({
-			);
+					'd': nodes,
+					'fill': 'none',
+				}, PENCIL.thick)),
+				mask: svg.make('path', {
+					'd': nodes,
+					'fill': '#000000',
+				}),
+				fill: svg.make('path', {
+					'd': nodes,
+					'fill': '#FFFFFF',
+				}),
+			};
 		}
 
-		renderBlock({x, y, width, height}) {
+		renderBlock(position) {
-			return this.renderBox(
+			return this.renderBox(position, {fill: 'none', thick: true});
-				{x, y, width, height},
-				{fill: 'none', thick: true}
-			);
 		}
 
 		renderTag({x, y, width, height}) {

scripts/sequence/Renderer.js

@@ -125,6 +125,7 @@ define([
 				'maskUnits': 'userSpaceOnUse',
 			});
 			this.maskReveal = svg.make('rect', {'fill': '#FFFFFF'});
+			this.backgroundFills = svg.make('g');
 			this.agentLines = svg.make('g', {
 				'mask': 'url(#' + this.namespace + 'LineMask)',
 			});
@@ -134,6 +135,7 @@ define([
 			this.base.appendChild(this.buildMetadata());
 			this.base.appendChild(this.themeDefs);
 			this.base.appendChild(this.defs);
+			this.base.appendChild(this.backgroundFills);
 			this.base.appendChild(this.agentLines);
 			this.base.appendChild(this.blocks);
 			this.base.appendChild(this.actionShapes);
@@ -339,6 +341,7 @@ define([
 			const env = {
 				topY,
 				primaryY: topY + topShift,
+				fillLayer: this.backgroundFills,
 				blockLayer: this.blocks,
 				shapeLayer: this.actionShapes,
 				labelLayer: this.actionLabels,
@@ -473,6 +476,7 @@ define([
 			this.currentHighlight = -1;
 			svg.empty(this.defs);
 			svg.empty(this.mask);
+			svg.empty(this.backgroundFills);
 			svg.empty(this.agentLines);
 			svg.empty(this.blocks);
 			svg.empty(this.actionShapes);

scripts/sequence/components/BaseComponent.js

@@ -48,6 +48,7 @@ define(() => {
 		render(/*stage, {
 			topY,
 			primaryY,
+			fillLayer,
 			blockLayer,
 			shapeLayer,
 			labelLayer,

scripts/sequence/components/Block.js

@@ -165,12 +165,23 @@ define([
 			const agentInfoL = env.agentInfos.get(left);
 			const agentInfoR = env.agentInfos.get(right);
 
-			blockInfo.hold.appendChild(config.boxRenderer({
+			let shapes = config.boxRenderer({
 				x: agentInfoL.x,
 				y: blockInfo.startY,
 				width: agentInfoR.x - agentInfoL.x,
 				height: env.primaryY - blockInfo.startY,
-			}));
+			});
+			if(!shapes.shape) {
+				shapes = {shape: shapes};
+			}
+
+			blockInfo.hold.appendChild(shapes.shape);
+			if(shapes.fill) {
+				env.fillLayer.appendChild(shapes.fill);
+			}
+			if(shapes.mask) {
+				env.maskLayer.appendChild(shapes.mask);
+			}
 
 			return env.primaryY + config.margin.bottom + env.theme.actionMargin;
 		}

scripts/sequence/test-images/list.js

@@ -5,5 +5,6 @@ define([], [
 	'Asynchronous.svg',
 	'Block.svg',
 	'Reference.svg',
+	'ReferenceLayering.svg',
 	'Markdown.svg',
 ]);

scripts/sequence/themes/BaseTheme.js

@@ -124,6 +124,21 @@ define([
 		}, attrs));
 	};
 
+	BaseTheme.renderRef = (options, position) => {
+		return {
+			shape: SVGShapes.renderBox(Object.assign({}, options, {
+				'fill': 'none',
+			}), position),
+			mask: SVGShapes.renderBox(Object.assign({}, options, {
+				'fill': '#000000',
+				'stroke': 'none',
+			}), position),
+			fill: SVGShapes.renderBox(Object.assign({}, options, {
+				'stroke': 'none',
+			}), position),
+		};
+	};
+
 	BaseTheme.WavePattern = class WavePattern {
 		constructor(width, height) {
 			if(Array.isArray(height)) {

scripts/sequence/themes/Basic.js

@@ -237,7 +237,7 @@ define([
 				top: 0,
 				bottom: 0,
 			},
-			boxRenderer: SVGShapes.renderBox.bind(null, {
+			boxRenderer: BaseTheme.renderRef.bind(null, {
 				'fill': '#FFFFFF',
 				'stroke': '#000000',
 				'stroke-width': 1.5,

scripts/sequence/themes/Chunky.js

@@ -248,7 +248,7 @@ define([
 				top: 0,
 				bottom: 0,
 			},
-			boxRenderer: SVGShapes.renderBox.bind(null, {
+			boxRenderer: BaseTheme.renderRef.bind(null, {
 				'fill': '#FFFFFF',
 				'stroke': '#000000',
 				'stroke-width': 4,

scripts/sequence/themes/Monospace.js

@@ -244,7 +244,7 @@ define([
 				top: 0,
 				bottom: 0,
 			},
-			boxRenderer: SVGShapes.renderBox.bind(null, {
+			boxRenderer: BaseTheme.renderRef.bind(null, {
 				'fill': '#FFFFFF',
 				'stroke': '#000000',
 				'stroke-width': 2,

scripts/sequence/themes/Sketch.js

@@ -546,7 +546,7 @@ define([
 			return shape;
 		}
 
-		renderBox({x, y, width, height}, {fill = null, thick = false} = {}) {
+		boxNodes({x, y, width, height}) {
 			const lT = this.lineNodes(
 				{x, y},
 				{x: x + width, y},
@@ -568,12 +568,14 @@ define([
 				{var1: 0, var2: 0.3, move: false}
 			);
 
-			const shape = svg.make('path', Object.assign({
+			return lT.nodes + lR.nodes + lB.nodes + lL.nodes;
-				'd': lT.nodes + lR.nodes + lB.nodes + lL.nodes,
+		}
+
+		renderBox(position, {fill = null, thick = false} = {}) {
+			return svg.make('path', Object.assign({
+				'd': this.boxNodes(position),
 				'fill': fill || '#FFFFFF',
 			}, thick ? PENCIL.thick : PENCIL.normal));
-
-			return shape;
 		}
 
 		renderNote({x, y, width, height}) {
@@ -812,18 +814,26 @@ define([
 			}, PENCIL.normal));
 		}
 
-		renderRefBlock({x, y, width, height}) {
+		renderRefBlock(position) {
-			return this.renderBox(
+			const nodes = this.boxNodes(position);
-				{x, y, width, height},
+			return {
-				{fill: '#FFFFFF', thick: true}
+				shape: svg.make('path', Object.assign({
-			);
+					'd': nodes,
+					'fill': 'none',
+				}, PENCIL.thick)),
+				mask: svg.make('path', {
+					'd': nodes,
+					'fill': '#000000',
+				}),
+				fill: svg.make('path', {
+					'd': nodes,
+					'fill': '#FFFFFF',
+				}),
+			};
 		}
 
-		renderBlock({x, y, width, height}) {
+		renderBlock(position) {
-			return this.renderBox(
+			return this.renderBox(position, {fill: 'none', thick: true});
-				{x, y, width, height},
-				{fill: 'none', thick: true}
-			);
 		}
 
 		renderTag({x, y, width, height}) {