diff --git a/dist/index.html b/dist/index.html
index 5e4c51554..61c6be7ad 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -326,9 +326,6 @@ par this happens in parallel
Alice -->> Bob: Parallel message 1
and
Alice -->> John: Parallel message 2
-end
-loop awesome
-A -> B: foo
end
diff --git a/e2e/spec/__image_snapshots__/sequencediagram-spec-js-sequencediagram-background-rects-should-render-a-single-and-nested-rects-1-snap.png b/e2e/spec/__image_snapshots__/sequencediagram-spec-js-sequencediagram-background-rects-should-render-a-single-and-nested-rects-1-snap.png
new file mode 100644
index 000000000..efb67e099
Binary files /dev/null and b/e2e/spec/__image_snapshots__/sequencediagram-spec-js-sequencediagram-background-rects-should-render-a-single-and-nested-rects-1-snap.png differ
diff --git a/e2e/spec/__image_snapshots__/sequencediagram-spec-js-sequencediagram-background-rects-should-render-rect-around-and-inside-alts-1-snap.png b/e2e/spec/__image_snapshots__/sequencediagram-spec-js-sequencediagram-background-rects-should-render-rect-around-and-inside-alts-1-snap.png
new file mode 100644
index 000000000..ca157f259
Binary files /dev/null and b/e2e/spec/__image_snapshots__/sequencediagram-spec-js-sequencediagram-background-rects-should-render-rect-around-and-inside-alts-1-snap.png differ
diff --git a/e2e/spec/__image_snapshots__/sequencediagram-spec-js-sequencediagram-background-rects-should-render-rect-around-and-inside-loops-1-snap.png b/e2e/spec/__image_snapshots__/sequencediagram-spec-js-sequencediagram-background-rects-should-render-rect-around-and-inside-loops-1-snap.png
new file mode 100644
index 000000000..5dfd62f2e
Binary files /dev/null and b/e2e/spec/__image_snapshots__/sequencediagram-spec-js-sequencediagram-background-rects-should-render-rect-around-and-inside-loops-1-snap.png differ
diff --git a/e2e/spec/__image_snapshots__/sequencediagram-spec-js-sequencediagram-background-rects-should-render-rect-around-and-inside-opts-1-snap.png b/e2e/spec/__image_snapshots__/sequencediagram-spec-js-sequencediagram-background-rects-should-render-rect-around-and-inside-opts-1-snap.png
new file mode 100644
index 000000000..f618cb3c6
Binary files /dev/null and b/e2e/spec/__image_snapshots__/sequencediagram-spec-js-sequencediagram-background-rects-should-render-rect-around-and-inside-opts-1-snap.png differ
diff --git a/e2e/spec/sequencediagram.spec.js b/e2e/spec/sequencediagram.spec.js
index 61572d2d9..73ae8e728 100644
--- a/e2e/spec/sequencediagram.spec.js
+++ b/e2e/spec/sequencediagram.spec.js
@@ -32,4 +32,90 @@ describe('Sequencediagram', () => {
`,
{})
})
+ describe('background rects', async () => {
+ it('should render a single and nested rects', async () => {
+ await imgSnapshotTest(page, `
+ sequenceDiagram
+ participant A
+ participant B
+ participant C
+ participant D
+ participant E
+ participant G
+
+ A ->>+ B: Task 1
+ rect rgb(178, 102, 255)
+ B ->>+ C: Task 2
+ C -->>- B: Return
+ end
+
+ A ->> D: Task 3
+ rect rgb(0, 128, 255)
+ D ->>+ E: Task 4
+ rect rgb(0, 204, 0)
+ E ->>+ G: Task 5
+ G -->>- E: Return
+ end
+ E ->> E: Task 6
+ end
+ D -->> A: Complete
+ `, {})
+ })
+ it('should render rect around and inside loops', async () => {
+ await imgSnapshotTest(page, `
+ sequenceDiagram
+ A ->> B: 1
+ rect rgb(204, 0, 102)
+ loop check C
+ C ->> C: Every 10 seconds
+ end
+ end
+ A ->> B: 2
+ loop check D
+ C ->> D: 3
+ rect rgb(153, 153, 255)
+ D -->> D: 5
+ D --> C: 4
+ end
+ end
+ `, {})
+ })
+ it('should render rect around and inside alts', async () => {
+ await imgSnapshotTest(page, `
+ sequenceDiagram
+ A ->> B: 1
+ rect rgb(204, 0, 102)
+ alt yes
+ C ->> C: 1
+ else no
+ rect rgb(0, 204, 204)
+ C ->> C: 0
+ end
+ end
+ end
+ B ->> A: Return
+ `, {})
+ })
+ it('should render rect around and inside opts', async () => {
+ await imgSnapshotTest(page, `
+ sequenceDiagram
+ A ->> B: 1
+ rect rgb(204, 0, 102)
+ opt maybe
+ C -->> D: Do something
+ rect rgb(0, 204, 204)
+ C ->> C: 0
+ end
+ end
+ end
+
+ opt possibly
+ rect rgb(0, 204, 204)
+ C ->> C: 0
+ end
+ end
+ B ->> A: Return
+ `, {})
+ })
+ })
})
diff --git a/src/diagrams/sequence/parser/sequenceDiagram.jison b/src/diagrams/sequence/parser/sequenceDiagram.jison
index 90e09a0f9..37ec693ec 100644
--- a/src/diagrams/sequence/parser/sequenceDiagram.jison
+++ b/src/diagrams/sequence/parser/sequenceDiagram.jison
@@ -31,7 +31,7 @@
"as" { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
(?:) { this.popState(); this.popState(); return 'NL'; }
"loop" { this.begin('LINE'); return 'loop'; }
-"rect" { this.begin('LINE'); return 'rect'; }
+"rect" { this.begin('LINE'); return 'rect'; }
"opt" { this.begin('LINE'); return 'opt'; }
"alt" { this.begin('LINE'); return 'alt'; }
"else" { this.begin('LINE'); return 'else'; }
diff --git a/src/diagrams/sequence/sequenceDiagram.spec.js b/src/diagrams/sequence/sequenceDiagram.spec.js
index ed0f8047d..2489616a3 100644
--- a/src/diagrams/sequence/sequenceDiagram.spec.js
+++ b/src/diagrams/sequence/sequenceDiagram.spec.js
@@ -369,13 +369,13 @@ describe('when parsing a sequenceDiagram', function () {
expect(messages[0].from).toBe('Alice')
expect(messages[1].from).toBe('Bob')
})
- it('it should handle rect statements', function () {
+ it.only('it should add a rect around sequence', function () {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
%% Comment
- Note right of Bob: Bob thinks
rect rgb(200, 255, 200)
+ Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks
end
`
@@ -386,10 +386,39 @@ describe('when parsing a sequenceDiagram', function () {
actors.Bob.description = 'Bob'
const messages = parser.yy.getMessages()
+ expect(messages[1].type).toEqual(parser.yy.LINETYPE.RECT_START)
+ expect(messages[1].message).toBe('rgb(200, 255, 200)')
+ expect(messages[2].type).toEqual(parser.yy.LINETYPE.NOTE)
+ expect(messages[3].type).toEqual(parser.yy.LINETYPE.DOTTED_OPEN)
+ expect(messages[4].type).toEqual(parser.yy.LINETYPE.RECT_END)
+ })
- expect(messages.length).toBe(5)
- expect(messages[0].from).toBe('Alice')
- expect(messages[1].from).toBe('Bob')
+ it.only('it should allow for nested rects', function () {
+ const str = `
+ sequenceDiagram
+ Alice->Bob: Hello Bob, how are you?
+ %% Comment
+ rect rgb(200, 255, 200)
+ rect rgb(0, 0, 0)
+ Note right of Bob: Bob thinks
+ end
+ Bob-->Alice: I am good thanks
+ end
+ `
+ parser.parse(str)
+ const actors = parser.yy.getActors()
+ expect(actors.Alice.description).toBe('Alice')
+ actors.Bob.description = 'Bob'
+
+ const messages = parser.yy.getMessages()
+ expect(messages[1].type).toEqual(parser.yy.LINETYPE.RECT_START)
+ expect(messages[1].message).toBe('rgb(200, 255, 200)')
+ expect(messages[2].type).toEqual(parser.yy.LINETYPE.RECT_START)
+ expect(messages[2].message).toBe('rgb(0, 0, 0)')
+ expect(messages[3].type).toEqual(parser.yy.LINETYPE.NOTE)
+ expect(messages[4].type).toEqual(parser.yy.LINETYPE.RECT_END)
+ expect(messages[5].type).toEqual(parser.yy.LINETYPE.DOTTED_OPEN)
+ expect(messages[6].type).toEqual(parser.yy.LINETYPE.RECT_END)
})
it('it should handle opt statements', function () {
const str = 'sequenceDiagram\n' +
diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js
index 203ae1398..4e4b0f74d 100644
--- a/src/diagrams/sequence/sequenceRenderer.js
+++ b/src/diagrams/sequence/sequenceRenderer.js
@@ -413,7 +413,7 @@ export const draw = function (text, id) {
case parser.yy.LINETYPE.RECT_START:
bounds.bumpVerticalPos(conf.boxMargin)
bounds.newLoop(undefined, msg.message)
- bounds.bumpVerticalPos(conf.boxMargin + conf.boxTextMargin)
+ bounds.bumpVerticalPos(conf.boxMargin)
break
case parser.yy.LINETYPE.RECT_END:
const rectData = bounds.endLoop()
diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js
index 495150609..c33e470cc 100644
--- a/src/diagrams/sequence/svgDraw.js
+++ b/src/diagrams/sequence/svgDraw.js
@@ -1,6 +1,5 @@
export const drawRect = function (elem, rectData) {
const rectElem = elem.append('rect')
-
rectElem.attr('x', rectData.x)
rectElem.attr('y', rectData.y)
rectElem.attr('fill', rectData.fill)