diff --git a/scripts/sequence/Renderer.js b/scripts/sequence/Renderer.js
index 0632c6a..11ca9ee 100644
--- a/scripts/sequence/Renderer.js
+++ b/scripts/sequence/Renderer.js
@@ -111,15 +111,18 @@ define([
});
this.defs = svg.make('defs');
- this.agentLines = svg.make('g');
- this.mask = svg.make('g');
+ this.mask = svg.make('mask', {
+ 'id': 'lineMask',
+ 'maskUnits': 'userSpaceOnUse',
+ });
+ this.maskReveal = svg.make('rect', {'fill': '#FFFFFF'});
+ this.agentLines = svg.make('g', {'mask': 'url(#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.mask);
this.base.appendChild(this.blocks);
this.base.appendChild(this.sections);
this.base.appendChild(this.actionShapes);
@@ -323,7 +326,7 @@ define([
x: agentInfoL.x + modeRender.width,
y: this.currentY,
padding: config.section.label.padding,
- boxAttrs: config.section.label.maskAttrs,
+ boxAttrs: {'fill': '#000000'},
labelAttrs: config.section.label.labelAttrs,
boxLayer: this.mask,
labelLayer: this.actionLabels,
@@ -501,6 +504,11 @@ define([
const y0 = titleY - margin;
const y1 = stagesHeight + margin;
+ this.maskReveal.setAttribute('x', x0);
+ this.maskReveal.setAttribute('y', y0);
+ this.maskReveal.setAttribute('width', x1 - x0);
+ this.maskReveal.setAttribute('height', y1 - y0);
+
this.base.setAttribute('viewBox', (
x0 + ' ' + y0 + ' ' +
(x1 - x0) + ' ' + (y1 - y0)
@@ -522,12 +530,14 @@ define([
_reset() {
this.knownDefs.clear();
svg.empty(this.defs);
- svg.empty(this.agentLines);
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);
+ this.defs.appendChild(this.mask);
this.components.forEach((component) => {
component.resetState(this.state);
});
diff --git a/scripts/sequence/components/AgentCap.js b/scripts/sequence/components/AgentCap.js
index 642d798..b6efea9 100644
--- a/scripts/sequence/components/AgentCap.js
+++ b/scripts/sequence/components/AgentCap.js
@@ -166,27 +166,27 @@ define([
'y2': isBegin ? '0%' : '100%',
});
grad.appendChild(svg.make('stop', {
- 'offset': '0%',
- 'stop-color': config.colVisible,
+ 'offset': (100 * 1 / 12) + '%',
+ 'stop-color': '#FFFFFF',
}));
grad.appendChild(svg.make('stop', {
- 'offset': '100%',
- 'stop-color': config.colHidden,
+ 'offset': (100 * 11 / 12) + '%',
+ 'stop-color': '#000000',
}));
return grad;
});
- env.shapeLayer.appendChild(svg.make('line', Object.assign({
- 'x1': x,
- 'y1': y,
- 'x2': x + 0.0001, // Chrome bug
- 'y2': y + config.height,
- 'stroke': 'url(#' + gradID + ')',
- }, config.attrs)));
+ env.maskLayer.appendChild(svg.make('rect', {
+ 'x': x - config.width / 2,
+ 'y': y - config.height * 0.1,
+ 'width': config.width,
+ 'height': config.height * 1.2,
+ 'fill': 'url(#' + gradID + ')',
+ }));
return {
- lineTop: 0,
- lineBottom: config.height,
+ lineTop: config.height,
+ lineBottom: 0,
height: config.height,
};
}
diff --git a/scripts/sequence/components/Connect.js b/scripts/sequence/components/Connect.js
index 91a0cc9..3ed83c6 100644
--- a/scripts/sequence/components/Connect.js
+++ b/scripts/sequence/components/Connect.js
@@ -97,7 +97,7 @@ define([
x: x0 - config.mask.padding.left,
y: y0 - height + config.label.margin.top,
padding: config.mask.padding,
- boxAttrs: config.mask.maskAttrs,
+ boxAttrs: {'fill': '#000000'},
labelAttrs: config.label.loopbackAttrs,
boxLayer: env.maskLayer,
labelLayer: env.labelLayer,
@@ -171,7 +171,7 @@ define([
x: (x0 + x1) / 2,
y: y - height + config.label.margin.top,
padding: config.mask.padding,
- boxAttrs: config.mask.maskAttrs,
+ boxAttrs: {'fill': '#000000'},
labelAttrs: config.label.attrs,
boxLayer: env.maskLayer,
labelLayer: env.labelLayer,
diff --git a/scripts/sequence/sequence_integration_spec.js b/scripts/sequence/sequence_integration_spec.js
index 8775e08..87d5a17 100644
--- a/scripts/sequence/sequence_integration_spec.js
+++ b/scripts/sequence/sequence_integration_spec.js
@@ -44,7 +44,13 @@ defineDescribe('Sequence Integration', [
renderer.render(sequence);
expect(getSimplifiedContent(renderer)).toEqual(
''
);
});
@@ -56,7 +62,13 @@ defineDescribe('Sequence Integration', [
expect(getSimplifiedContent(renderer)).toEqual(
'