yaroslav
/
SequenceDiagram
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use SVG mask to allow transparent background behind text and improve rendering of fade cap

This commit is contained in:
David Evans 2017-11-05 21:57:59 +00:00
parent 0fd7d84958
commit 5b6cbd518e
5 changed files with 45 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
scripts/sequence/Renderer.js
View File

@ -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);
});

26
scripts/sequence/components/AgentCap.js
View File

@ -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,
};
}

4
scripts/sequence/components/Connect.js
View File

@ -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,

16
scripts/sequence/sequence_integration_spec.js
View File

@ -44,7 +44,13 @@ defineDescribe('Sequence Integration', [
renderer.render(sequence);
expect(getSimplifiedContent(renderer)).toEqual(
'<svg width="100%" height="100%" viewBox="-5 -5 10 10">' +
'<defs></defs>' +
'<defs>' +
'<mask id="lineMask" maskUnits="userSpaceOnUse">' +
'<rect fill="#FFFFFF" x="-5" y="-5" width="10" height="10">' +
'</rect>' +
'</mask>' +
'</defs>' +
'<g mask="url(#lineMask)"></g>' +
'</svg>'
);
});
@ -56,7 +62,13 @@ defineDescribe('Sequence Integration', [
expect(getSimplifiedContent(renderer)).toEqual(
'<svg width="100%" height="100%" viewBox="-11.5 -16 23 21">' +
'<defs></defs>' +
'<defs>' +
'<mask id="lineMask" maskUnits="userSpaceOnUse">' +
'<rect fill="#FFFFFF" x="-11.5" y="-16" width="23" height="21">' +
'</rect>' +
'</mask>' +
'</defs>' +
'<g mask="url(#lineMask)"></g>' +
'<text' +
' x="0"' +
' font-family="sans-serif"' +

15
scripts/sequence/themes/Basic.js
View File

@ -48,14 +48,8 @@ define(['core/ArrayUtilities', 'svg/SVGShapes'], (array, SVGShapes) => {
},
},
fade: {
width: 5,
height: 6,
colVisible: '#000000',
colHidden: 'rgba(0, 0, 0, 0)',
attrs: {
'fill': 'none',
'stroke-width': 1,
'stroke-linecap': 'round',
},
},
none: {
height: 10,
@ -82,7 +76,6 @@ define(['core/ArrayUtilities', 'svg/SVGShapes'], (array, SVGShapes) => {
height: 10,
attrs: {
'fill': '#000000',
'stroke': 'none',
'stroke-width': 0,
'stroke-linejoin': 'miter',
},
@ -109,9 +102,6 @@ define(['core/ArrayUtilities', 'svg/SVGShapes'], (array, SVGShapes) => {
right: 3,
bottom: 1,
},
maskAttrs: {
'fill': '#FFFFFF',
},
},
},
@ -161,9 +151,6 @@ define(['core/ArrayUtilities', 'svg/SVGShapes'], (array, SVGShapes) => {
right: 3,
bottom: 0,
},
maskAttrs: {
'fill': '#FFFFFF',
},
labelAttrs: {
'font-family': 'sans-serif',
'font-size': 8,