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

Fix reference box render glitches [#33]

This commit is contained in:
David Evans 2018-02-03 12:45:48 +00:00
parent 37fb6b9139
commit ec24433366
13 changed files with 134 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
lib/sequence-diagram.js
View File

@ -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({
'd': lT.nodes + lR.nodes + lB.nodes + lL.nodes,
return 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}) {
return this.renderBox(
{x, y, width, height},
{fill: '#FFFFFF', thick: true}
);
renderRefBlock(position) {
const nodes = this.boxNodes(position);
return {
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}) {
return this.renderBox(
{x, y, width, height},
{fill: 'none', thick: true}
);
renderBlock(position) {
return this.renderBox(position, {fill: 'none', thick: true});
}
renderTag({x, y, width, height}) {

2
lib/sequence-diagram.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
scripts/sequence/Renderer.js
View File

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

1
scripts/sequence/components/BaseComponent.js
View File

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

15
scripts/sequence/components/Block.js
View File

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

4
scripts/sequence/test-images/Reference.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 14 KiB

8
scripts/sequence/test-images/ReferenceLayering.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

1
scripts/sequence/test-images/list.js
View File

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

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

@ -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)) {

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

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

2
scripts/sequence/themes/Chunky.js
View File

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

2
scripts/sequence/themes/Monospace.js
View File

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

40
scripts/sequence/themes/Sketch.js
View File

@ -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({
'd': lT.nodes + lR.nodes + lB.nodes + lL.nodes,
return 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}) {
return this.renderBox(
{x, y, width, height},
{fill: '#FFFFFF', thick: true}
);
renderRefBlock(position) {
const nodes = this.boxNodes(position);
return {
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}) {
return this.renderBox(
{x, y, width, height},
{fill: 'none', thick: true}
);
renderBlock(position) {
return this.renderBox(position, {fill: 'none', thick: true});
}
renderTag({x, y, width, height}) {