Improve rendering of overlapping blocks, add click regions [#21]

lib/sequence-diagram.js

@@ -3263,7 +3263,6 @@ define('sequence/components/BaseComponent',[],() => {
 			topY,
 			primaryY,
 			blockLayer,
-			sectionLayer,
 			shapeLayer,
 			labelLayer,
 			theme,
@@ -3341,12 +3340,13 @@ define('sequence/components/Block',[
 			const config = env.theme.block;
 			const agentInfoL = env.agentInfos.get(left);
 			const agentInfoR = env.agentInfos.get(right);
+			const {hold} = env.state.blocks.get(left);
 
 			let y = env.primaryY;
 
 			if(!first) {
 				y += config.section.padding.bottom;
-				env.sectionLayer.appendChild(svg.make('line', Object.assign({
+				hold.appendChild(svg.make('line', Object.assign({
 					'x1': agentInfoL.x,
 					'y1': y,
 					'x2': agentInfoR.x,
@@ -3354,14 +3354,16 @@ define('sequence/components/Block',[
 				}, config.separator.attrs)));
 			}
 
+			const clickable = env.makeRegion();
+
 			const modeRender = SVGShapes.renderBoxedText(mode, {
 				x: agentInfoL.x,
 				y,
 				padding: config.section.mode.padding,
 				boxAttrs: config.section.mode.boxAttrs,
 				labelAttrs: config.section.mode.labelAttrs,
-				boxLayer: env.blockLayer,
-				labelLayer: env.labelLayer,
+				boxLayer: hold,
+				labelLayer: clickable,
 				SVGTextBlockClass: env.SVGTextBlockClass,
 			});
 
@@ -3372,14 +3374,21 @@ define('sequence/components/Block',[
 				boxAttrs: {'fill': '#000000'},
 				labelAttrs: config.section.label.labelAttrs,
 				boxLayer: env.maskLayer,
-				labelLayer: env.labelLayer,
+				labelLayer: clickable,
 				SVGTextBlockClass: env.SVGTextBlockClass,
 			});
 
-			return y + (
-				Math.max(modeRender.height, labelRender.height) +
-				config.section.padding.top
-			);
+			const labelHeight = Math.max(modeRender.height, labelRender.height);
+
+			clickable.insertBefore(svg.make('rect', {
+				'x': agentInfoL.x,
+				'y': y,
+				'width': agentInfoR.x - agentInfoL.x,
+				'height': labelHeight,
+				'fill': 'transparent',
+			}), clickable.firstChild);
+
+			return y + labelHeight + config.section.padding.top;
 		}
 	}
 
@@ -3405,10 +3414,15 @@ define('sequence/components/Block',[
 		}
 
 		render(stage, env) {
+			const hold = svg.make('g');
+			env.blockLayer.appendChild(hold);
+
 			env.state.blocks.set(stage.left, {
+				hold,
 				mode: stage.mode,
 				startY: env.primaryY,
 			});
+
 			return super.render(stage, env, true);
 		}
 	}
@@ -3428,12 +3442,11 @@ define('sequence/components/Block',[
 		render({left, right}, env) {
 			const config = env.theme.block;
 
-			const {startY, mode} = env.state.blocks.get(left);
-
 			const agentInfoL = env.agentInfos.get(left);
 			const agentInfoR = env.agentInfos.get(right);
+			const {hold, startY, mode} = env.state.blocks.get(left);
 			const configMode = config.modes[mode] || config.modes[''];
-			env.blockLayer.appendChild(svg.make('rect', Object.assign({
+			hold.appendChild(svg.make('rect', Object.assign({
 				'x': agentInfoL.x,
 				'y': startY,
 				'width': agentInfoR.x - agentInfoL.x,
@@ -4741,13 +4754,11 @@ define('sequence/Renderer',[
 				'mask': 'url(#' + this.namespace + 'LineMask)',
 			});
 			this.blocks = svg.make('g');
-			this.sections = svg.make('g');
 			this.actionShapes = svg.make('g');
 			this.actionLabels = svg.make('g');
 			this.base.appendChild(this.defs);
 			this.base.appendChild(this.agentLines);
 			this.base.appendChild(this.blocks);
-			this.base.appendChild(this.sections);
 			this.base.appendChild(this.actionShapes);
 			this.base.appendChild(this.actionLabels);
 			this.title = new this.SVGTextBlockClass(this.base);
@@ -4944,7 +4955,6 @@ define('sequence/Renderer',[
 				topY,
 				primaryY: topY + topShift,
 				blockLayer: this.blocks,
-				sectionLayer: this.sections,
 				shapeLayer: this.actionShapes,
 				labelLayer: this.actionLabels,
 				maskLayer: this.mask,
@@ -5065,7 +5075,6 @@ define('sequence/Renderer',[
 			svg.empty(this.mask);
 			svg.empty(this.agentLines);
 			svg.empty(this.blocks);
-			svg.empty(this.sections);
 			svg.empty(this.actionShapes);
 			svg.empty(this.actionLabels);
 			this.mask.appendChild(this.maskReveal);

scripts/sequence/Renderer.js

@@ -115,13 +115,11 @@ define([
 				'mask': 'url(#' + this.namespace + 'LineMask)',
 			});
 			this.blocks = svg.make('g');
-			this.sections = svg.make('g');
 			this.actionShapes = svg.make('g');
 			this.actionLabels = svg.make('g');
 			this.base.appendChild(this.defs);
 			this.base.appendChild(this.agentLines);
 			this.base.appendChild(this.blocks);
-			this.base.appendChild(this.sections);
 			this.base.appendChild(this.actionShapes);
 			this.base.appendChild(this.actionLabels);
 			this.title = new this.SVGTextBlockClass(this.base);
@@ -318,7 +316,6 @@ define([
 				topY,
 				primaryY: topY + topShift,
 				blockLayer: this.blocks,
-				sectionLayer: this.sections,
 				shapeLayer: this.actionShapes,
 				labelLayer: this.actionLabels,
 				maskLayer: this.mask,
@@ -439,7 +436,6 @@ define([
 			svg.empty(this.mask);
 			svg.empty(this.agentLines);
 			svg.empty(this.blocks);
-			svg.empty(this.sections);
 			svg.empty(this.actionShapes);
 			svg.empty(this.actionLabels);
 			this.mask.appendChild(this.maskReveal);

scripts/sequence/components/BaseComponent.js

@@ -45,7 +45,6 @@ define(() => {
 			topY,
 			primaryY,
 			blockLayer,
-			sectionLayer,
 			shapeLayer,
 			labelLayer,
 			theme,

scripts/sequence/components/Block.js

@@ -35,12 +35,13 @@ define([
 			const config = env.theme.block;
 			const agentInfoL = env.agentInfos.get(left);
 			const agentInfoR = env.agentInfos.get(right);
+			const {hold} = env.state.blocks.get(left);
 
 			let y = env.primaryY;
 
 			if(!first) {
 				y += config.section.padding.bottom;
-				env.sectionLayer.appendChild(svg.make('line', Object.assign({
+				hold.appendChild(svg.make('line', Object.assign({
 					'x1': agentInfoL.x,
 					'y1': y,
 					'x2': agentInfoR.x,
@@ -48,14 +49,16 @@ define([
 				}, config.separator.attrs)));
 			}
 
+			const clickable = env.makeRegion();
+
 			const modeRender = SVGShapes.renderBoxedText(mode, {
 				x: agentInfoL.x,
 				y,
 				padding: config.section.mode.padding,
 				boxAttrs: config.section.mode.boxAttrs,
 				labelAttrs: config.section.mode.labelAttrs,
-				boxLayer: env.blockLayer,
-				labelLayer: env.labelLayer,
+				boxLayer: hold,
+				labelLayer: clickable,
 				SVGTextBlockClass: env.SVGTextBlockClass,
 			});
 
@@ -66,14 +69,21 @@ define([
 				boxAttrs: {'fill': '#000000'},
 				labelAttrs: config.section.label.labelAttrs,
 				boxLayer: env.maskLayer,
-				labelLayer: env.labelLayer,
+				labelLayer: clickable,
 				SVGTextBlockClass: env.SVGTextBlockClass,
 			});
 
-			return y + (
-				Math.max(modeRender.height, labelRender.height) +
-				config.section.padding.top
-			);
+			const labelHeight = Math.max(modeRender.height, labelRender.height);
+
+			clickable.insertBefore(svg.make('rect', {
+				'x': agentInfoL.x,
+				'y': y,
+				'width': agentInfoR.x - agentInfoL.x,
+				'height': labelHeight,
+				'fill': 'transparent',
+			}), clickable.firstChild);
+
+			return y + labelHeight + config.section.padding.top;
 		}
 	}
 
@@ -99,10 +109,15 @@ define([
 		}
 
 		render(stage, env) {
+			const hold = svg.make('g');
+			env.blockLayer.appendChild(hold);
+
 			env.state.blocks.set(stage.left, {
+				hold,
 				mode: stage.mode,
 				startY: env.primaryY,
 			});
+
 			return super.render(stage, env, true);
 		}
 	}
@@ -122,12 +137,11 @@ define([
 		render({left, right}, env) {
 			const config = env.theme.block;
 
-			const {startY, mode} = env.state.blocks.get(left);
-
 			const agentInfoL = env.agentInfos.get(left);
 			const agentInfoR = env.agentInfos.get(right);
+			const {hold, startY, mode} = env.state.blocks.get(left);
 			const configMode = config.modes[mode] || config.modes[''];
-			env.blockLayer.appendChild(svg.make('rect', Object.assign({
+			hold.appendChild(svg.make('rect', Object.assign({
 				'x': agentInfoL.x,
 				'y': startY,
 				'width': agentInfoR.x - agentInfoL.x,