From fb79b133e93784023d1d67c272dc7dc4502a4b02 Mon Sep 17 00:00:00 2001 From: "Bland, Paul" Date: Thu, 16 Aug 2018 13:44:59 -0400 Subject: [PATCH 1/8] added sequence numbers --- src/diagrams/sequence/sequenceRenderer.js | 23 +++++++++++++++++++---- src/diagrams/sequence/svgDraw.js | 18 ++++++++++++++++++ src/mermaidAPI.js | 8 +++++++- src/themes/dark/index.scss | 1 + src/themes/default/index.scss | 1 + src/themes/forest/index.scss | 1 + src/themes/neutral/index.scss | 1 + src/themes/sequence.scss | 8 ++++++++ 8 files changed, 56 insertions(+), 5 deletions(-) diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js index fcf41d28e..e530242d4 100644 --- a/src/diagrams/sequence/sequenceRenderer.js +++ b/src/diagrams/sequence/sequenceRenderer.js @@ -33,7 +33,9 @@ const conf = { activationWidth: 10, // text placement as: tspan | fo | old only text as before - textPlacement: 'tspan' + textPlacement: 'tspan', + + showSequenceNumbers: false } export const bounds = { @@ -203,7 +205,7 @@ const drawNote = function (elem, startx, verticalPos, msg, forceWidth) { * @param txtCenter * @param msg */ -const drawMessage = function (elem, startx, stopx, verticalPos, msg) { +const drawMessage = function (elem, startx, stopx, verticalPos, msg, nodeIndex) { const g = elem.append('g') const txtCenter = startx + (stopx - startx) / 2 @@ -259,6 +261,18 @@ const drawMessage = function (elem, startx, stopx, verticalPos, msg) { if (msg.type === parser.yy.LINETYPE.SOLID_CROSS || msg.type === parser.yy.LINETYPE.DOTTED_CROSS) { line.attr('marker-end', 'url(' + url + '#crosshead)') } + + // add node number + if (conf.showSequenceNumbers) { + line.attr('marker-start', 'url(' + url + '#nodenumber)') + g.append('text') + .attr('x', startx - 4) + .attr('y', verticalPos + 5) + .attr('font-family', 'sans-serif') + .attr('font-size', '16px') + .attr('class', 'nodeNumber') + .text(nodeIndex + 1) + } } export const drawActors = function (diagram, actors, actorKeys, verticalPos) { @@ -331,6 +345,7 @@ export const draw = function (text, id) { // The arrow head definition is attached to the svg once svgDraw.insertArrowHead(diagram) svgDraw.insertArrowCrossHead(diagram) + svgDraw.insertNodeNumber(diagram) function activeEnd (msg, verticalPos) { const activationData = bounds.endActivation(msg) @@ -346,7 +361,7 @@ export const draw = function (text, id) { // const lastMsg // Draw the messages/signals - messages.forEach(function (msg) { + messages.forEach(function (msg, nodeIndex) { let loopData switch (msg.type) { case parser.yy.LINETYPE.NOTE: @@ -440,7 +455,7 @@ export const draw = function (text, id) { stopx = toBounds[toIdx] const verticalPos = bounds.getVerticalPos() - drawMessage(diagram, startx, stopx, verticalPos, msg) + drawMessage(diagram, startx, stopx, verticalPos, msg, nodeIndex) const allBounds = fromBounds.concat(toBounds) bounds.insert(Math.min.apply(null, allBounds), verticalPos, Math.max.apply(null, allBounds), verticalPos) } catch (e) { diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js index 29dbbafba..fc0d21d2d 100644 --- a/src/diagrams/sequence/svgDraw.js +++ b/src/diagrams/sequence/svgDraw.js @@ -181,6 +181,23 @@ export const insertArrowHead = function (elem) { .append('path') .attr('d', 'M 0,0 V 4 L6,2 Z') // this is actual shape for arrowhead } +/** + * Setup node number. The result is appended to the svg. + */ +export const insertNodeNumber = function (elem) { + elem.append('defs').append('marker') + .attr('id', 'nodenumber') + .attr('refX', 15) + .attr('refY', 15) + .attr('markerWidth', 60) + .attr('markerHeight', 40) + .attr('orient', 'auto') + .append('circle') + .attr('cx', 15) + .attr('cy', 15) + .attr('r', 10) + // .style("fill", '#f00'); +} /** * Setup arrow head and define the marker. The result is appended to the svg. */ @@ -307,6 +324,7 @@ export default { drawActivation, drawLoop, insertArrowHead, + insertNodeNumber, insertArrowCrossHead, getTextObj, getNoteRect diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index d40c336c4..52414593b 100644 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -153,7 +153,13 @@ const config = { * **useMaxWidth** - when this flag is set the height and width is set to 100% and is then scaling with the * available space if not the absolute space required is used */ - useMaxWidth: true + useMaxWidth: true, + + /** + * **showSequenceNumbers** - this will show the node numbers + */ + showSequenceNumbers: false + }, /** ### gantt diff --git a/src/themes/dark/index.scss b/src/themes/dark/index.scss index 529eb3f70..c0d5d1257 100644 --- a/src/themes/dark/index.scss +++ b/src/themes/dark/index.scss @@ -30,6 +30,7 @@ $labelBoxBorderColor: $actorBorder; $labelTextColor: $mainContrastColor; $noteBorderColor: $border2; $noteBkgColor: #fff5ad; +$nodeNumberColor: white; /* Gantt chart variables */ diff --git a/src/themes/default/index.scss b/src/themes/default/index.scss index e98fc0741..3d4a0bd1d 100644 --- a/src/themes/default/index.scss +++ b/src/themes/default/index.scss @@ -28,6 +28,7 @@ $labelBoxBorderColor: $actorBorder; $labelTextColor: $actorTextColor; $noteBorderColor: $border2; $noteBkgColor: #fff5ad; +$nodeNumberColor: white; /* Gantt chart variables */ diff --git a/src/themes/forest/index.scss b/src/themes/forest/index.scss index f6e1a1dae..de1164d65 100644 --- a/src/themes/forest/index.scss +++ b/src/themes/forest/index.scss @@ -29,6 +29,7 @@ $labelBoxBorderColor: #326932; $labelTextColor: $actorTextColor; $noteBorderColor: $border2; $noteBkgColor: #fff5ad; +$nodeNumberColor: white; /* Gantt chart variables */ diff --git a/src/themes/neutral/index.scss b/src/themes/neutral/index.scss index f0560142f..8133baf3f 100644 --- a/src/themes/neutral/index.scss +++ b/src/themes/neutral/index.scss @@ -33,6 +33,7 @@ $labelBoxBorderColor: $actorBorder; $labelTextColor: white; $noteBorderColor: darken($note, 60%); $noteBkgColor: $note; +$nodeNumberColor: white; /* Gantt chart variables */ diff --git a/src/themes/sequence.scss b/src/themes/sequence.scss index 780e8ecf5..5a6530a8a 100644 --- a/src/themes/sequence.scss +++ b/src/themes/sequence.scss @@ -29,6 +29,14 @@ text.actor { fill: $signalColor; } +.nodeNumber { + fill: $nodeNumberColor; +} + +#nodenumber { + fill: $signalColor; +} + #crosshead path { fill: $signalColor !important; stroke: $signalColor !important; From 47bad33949a4b0c65bffa55cc8db10cfb5d0ab86 Mon Sep 17 00:00:00 2001 From: "Bland, Paul" Date: Thu, 16 Aug 2018 16:53:30 -0400 Subject: [PATCH 2/8] change all occurences of node number to "sequence number" --- src/diagrams/sequence/sequenceRenderer.js | 6 +++--- src/diagrams/sequence/svgDraw.js | 6 +++--- src/themes/dark/index.scss | 2 +- src/themes/default/index.scss | 2 +- src/themes/forest/index.scss | 2 +- src/themes/neutral/index.scss | 2 +- src/themes/sequence.scss | 6 +++--- 7 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js index e530242d4..8c2e6fdee 100644 --- a/src/diagrams/sequence/sequenceRenderer.js +++ b/src/diagrams/sequence/sequenceRenderer.js @@ -264,13 +264,13 @@ const drawMessage = function (elem, startx, stopx, verticalPos, msg, nodeIndex) // add node number if (conf.showSequenceNumbers) { - line.attr('marker-start', 'url(' + url + '#nodenumber)') + line.attr('marker-start', 'url(' + url + '#sequencenumber)') g.append('text') .attr('x', startx - 4) .attr('y', verticalPos + 5) .attr('font-family', 'sans-serif') .attr('font-size', '16px') - .attr('class', 'nodeNumber') + .attr('class', 'sequenceNumber') .text(nodeIndex + 1) } } @@ -345,7 +345,7 @@ export const draw = function (text, id) { // The arrow head definition is attached to the svg once svgDraw.insertArrowHead(diagram) svgDraw.insertArrowCrossHead(diagram) - svgDraw.insertNodeNumber(diagram) + svgDraw.insertSequenceNumber(diagram) function activeEnd (msg, verticalPos) { const activationData = bounds.endActivation(msg) diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js index fc0d21d2d..fccaa61fd 100644 --- a/src/diagrams/sequence/svgDraw.js +++ b/src/diagrams/sequence/svgDraw.js @@ -184,9 +184,9 @@ export const insertArrowHead = function (elem) { /** * Setup node number. The result is appended to the svg. */ -export const insertNodeNumber = function (elem) { +export const insertSequenceNumber = function (elem) { elem.append('defs').append('marker') - .attr('id', 'nodenumber') + .attr('id', 'sequencenumber') .attr('refX', 15) .attr('refY', 15) .attr('markerWidth', 60) @@ -324,7 +324,7 @@ export default { drawActivation, drawLoop, insertArrowHead, - insertNodeNumber, + insertSequencNumber, insertArrowCrossHead, getTextObj, getNoteRect diff --git a/src/themes/dark/index.scss b/src/themes/dark/index.scss index c0d5d1257..b53d3c77e 100644 --- a/src/themes/dark/index.scss +++ b/src/themes/dark/index.scss @@ -30,7 +30,7 @@ $labelBoxBorderColor: $actorBorder; $labelTextColor: $mainContrastColor; $noteBorderColor: $border2; $noteBkgColor: #fff5ad; -$nodeNumberColor: white; +$sequenceNumberColor: white; /* Gantt chart variables */ diff --git a/src/themes/default/index.scss b/src/themes/default/index.scss index 3d4a0bd1d..6a92bbb3f 100644 --- a/src/themes/default/index.scss +++ b/src/themes/default/index.scss @@ -28,7 +28,7 @@ $labelBoxBorderColor: $actorBorder; $labelTextColor: $actorTextColor; $noteBorderColor: $border2; $noteBkgColor: #fff5ad; -$nodeNumberColor: white; +$sequencNumberColor: white; /* Gantt chart variables */ diff --git a/src/themes/forest/index.scss b/src/themes/forest/index.scss index de1164d65..aa3cd1545 100644 --- a/src/themes/forest/index.scss +++ b/src/themes/forest/index.scss @@ -29,7 +29,7 @@ $labelBoxBorderColor: #326932; $labelTextColor: $actorTextColor; $noteBorderColor: $border2; $noteBkgColor: #fff5ad; -$nodeNumberColor: white; +$sequencNumberColor: white; /* Gantt chart variables */ diff --git a/src/themes/neutral/index.scss b/src/themes/neutral/index.scss index 8133baf3f..637891fa5 100644 --- a/src/themes/neutral/index.scss +++ b/src/themes/neutral/index.scss @@ -33,7 +33,7 @@ $labelBoxBorderColor: $actorBorder; $labelTextColor: white; $noteBorderColor: darken($note, 60%); $noteBkgColor: $note; -$nodeNumberColor: white; +$sequencNumberColor: white; /* Gantt chart variables */ diff --git a/src/themes/sequence.scss b/src/themes/sequence.scss index 5a6530a8a..ae676e9dd 100644 --- a/src/themes/sequence.scss +++ b/src/themes/sequence.scss @@ -29,11 +29,11 @@ text.actor { fill: $signalColor; } -.nodeNumber { - fill: $nodeNumberColor; +.sequencNumber { + fill: $sequencNumberColor; } -#nodenumber { +#sequencnumber { fill: $signalColor; } From 5903b33016f10674cdda7205aa134ee48883207e Mon Sep 17 00:00:00 2001 From: "Bland, Paul" Date: Thu, 16 Aug 2018 16:55:28 -0400 Subject: [PATCH 3/8] typo in word "sequence" --- src/diagrams/sequence/svgDraw.js | 2 +- src/themes/default/index.scss | 2 +- src/themes/forest/index.scss | 2 +- src/themes/neutral/index.scss | 2 +- src/themes/sequence.scss | 6 +++--- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js index fccaa61fd..a2b39e3f7 100644 --- a/src/diagrams/sequence/svgDraw.js +++ b/src/diagrams/sequence/svgDraw.js @@ -324,7 +324,7 @@ export default { drawActivation, drawLoop, insertArrowHead, - insertSequencNumber, + insertSequenceNumber, insertArrowCrossHead, getTextObj, getNoteRect diff --git a/src/themes/default/index.scss b/src/themes/default/index.scss index 6a92bbb3f..968eb8f49 100644 --- a/src/themes/default/index.scss +++ b/src/themes/default/index.scss @@ -28,7 +28,7 @@ $labelBoxBorderColor: $actorBorder; $labelTextColor: $actorTextColor; $noteBorderColor: $border2; $noteBkgColor: #fff5ad; -$sequencNumberColor: white; +$sequenceNumberColor: white; /* Gantt chart variables */ diff --git a/src/themes/forest/index.scss b/src/themes/forest/index.scss index aa3cd1545..b83920ada 100644 --- a/src/themes/forest/index.scss +++ b/src/themes/forest/index.scss @@ -29,7 +29,7 @@ $labelBoxBorderColor: #326932; $labelTextColor: $actorTextColor; $noteBorderColor: $border2; $noteBkgColor: #fff5ad; -$sequencNumberColor: white; +$sequenceNumberColor: white; /* Gantt chart variables */ diff --git a/src/themes/neutral/index.scss b/src/themes/neutral/index.scss index 637891fa5..30f5fb48e 100644 --- a/src/themes/neutral/index.scss +++ b/src/themes/neutral/index.scss @@ -33,7 +33,7 @@ $labelBoxBorderColor: $actorBorder; $labelTextColor: white; $noteBorderColor: darken($note, 60%); $noteBkgColor: $note; -$sequencNumberColor: white; +$sequenceNumberColor: white; /* Gantt chart variables */ diff --git a/src/themes/sequence.scss b/src/themes/sequence.scss index ae676e9dd..01961a238 100644 --- a/src/themes/sequence.scss +++ b/src/themes/sequence.scss @@ -29,11 +29,11 @@ text.actor { fill: $signalColor; } -.sequencNumber { - fill: $sequencNumberColor; +.sequenceNumber { + fill: $sequenceNumberColor; } -#sequencnumber { +#sequencenumber { fill: $signalColor; } From 568c0318be02a8dd271065cef824f6128092728a Mon Sep 17 00:00:00 2001 From: "Bland, Paul" Date: Fri, 17 Aug 2018 09:37:49 -0400 Subject: [PATCH 4/8] centered two-digit sequence numbers --- src/diagrams/sequence/sequenceRenderer.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js index 8c2e6fdee..5ea3de2a5 100644 --- a/src/diagrams/sequence/sequenceRenderer.js +++ b/src/diagrams/sequence/sequenceRenderer.js @@ -266,10 +266,13 @@ const drawMessage = function (elem, startx, stopx, verticalPos, msg, nodeIndex) if (conf.showSequenceNumbers) { line.attr('marker-start', 'url(' + url + '#sequencenumber)') g.append('text') - .attr('x', startx - 4) + .attr('x', startx - 1) .attr('y', verticalPos + 5) .attr('font-family', 'sans-serif') .attr('font-size', '16px') + .attr('text-anchor', 'middle') + .attr('textLength', '16px') + .attr('lengthAdjust', '0') .attr('class', 'sequenceNumber') .text(nodeIndex + 1) } From f87c503d5e0065bf18633009ac6947d4e6425768 Mon Sep 17 00:00:00 2001 From: "Bland, Paul" Date: Fri, 17 Aug 2018 10:25:06 -0400 Subject: [PATCH 5/8] fixed issue where some sequence number would be skipped --- src/diagrams/sequence/sequenceRenderer.js | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js index 5ea3de2a5..0c6827279 100644 --- a/src/diagrams/sequence/sequenceRenderer.js +++ b/src/diagrams/sequence/sequenceRenderer.js @@ -205,7 +205,7 @@ const drawNote = function (elem, startx, verticalPos, msg, forceWidth) { * @param txtCenter * @param msg */ -const drawMessage = function (elem, startx, stopx, verticalPos, msg, nodeIndex) { +const drawMessage = function (elem, startx, stopx, verticalPos, msg, sequenceIndex) { const g = elem.append('g') const txtCenter = startx + (stopx - startx) / 2 @@ -272,9 +272,8 @@ const drawMessage = function (elem, startx, stopx, verticalPos, msg, nodeIndex) .attr('font-size', '16px') .attr('text-anchor', 'middle') .attr('textLength', '16px') - .attr('lengthAdjust', '0') .attr('class', 'sequenceNumber') - .text(nodeIndex + 1) + .text(sequenceIndex) } } @@ -364,7 +363,8 @@ export const draw = function (text, id) { // const lastMsg // Draw the messages/signals - messages.forEach(function (msg, nodeIndex) { + let sequenceIndex = 1; + messages.forEach(function (msg) { let loopData switch (msg.type) { case parser.yy.LINETYPE.NOTE: @@ -458,13 +458,24 @@ export const draw = function (text, id) { stopx = toBounds[toIdx] const verticalPos = bounds.getVerticalPos() - drawMessage(diagram, startx, stopx, verticalPos, msg, nodeIndex) + drawMessage(diagram, startx, stopx, verticalPos, msg, sequenceIndex) const allBounds = fromBounds.concat(toBounds) bounds.insert(Math.min.apply(null, allBounds), verticalPos, Math.max.apply(null, allBounds), verticalPos) } catch (e) { logger.error('error while drawing message', e) } } + // Increment sequence counter if msg.type is a line (and not another event like activation or note, etc) + if ([ + parser.yy.LINETYPE.SOLID_OPEN, + parser.yy.LINETYPE.DOTTED_OPEN, + parser.yy.LINETYPE.SOLID, + parser.yy.LINETYPE.DOTTED, + parser.yy.LINETYPE.SOLID_CROSS, + parser.yy.LINETYPE.DOTTED_CROSS + ].includes(msg.type)) { + sequenceIndex++ + } }) if (conf.mirrorActors) { From 7fcccb4ab219bf280b63a613a1b26d31e4aa6186 Mon Sep 17 00:00:00 2001 From: "Bland, Paul" Date: Fri, 17 Aug 2018 11:07:04 -0400 Subject: [PATCH 6/8] fixing formatting for lint --- src/diagrams/sequence/sequenceRenderer.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js index 0c6827279..f7f8a270b 100644 --- a/src/diagrams/sequence/sequenceRenderer.js +++ b/src/diagrams/sequence/sequenceRenderer.js @@ -363,7 +363,7 @@ export const draw = function (text, id) { // const lastMsg // Draw the messages/signals - let sequenceIndex = 1; + let sequenceIndex = 1 messages.forEach(function (msg) { let loopData switch (msg.type) { @@ -467,11 +467,11 @@ export const draw = function (text, id) { } // Increment sequence counter if msg.type is a line (and not another event like activation or note, etc) if ([ - parser.yy.LINETYPE.SOLID_OPEN, - parser.yy.LINETYPE.DOTTED_OPEN, - parser.yy.LINETYPE.SOLID, - parser.yy.LINETYPE.DOTTED, - parser.yy.LINETYPE.SOLID_CROSS, + parser.yy.LINETYPE.SOLID_OPEN, + parser.yy.LINETYPE.DOTTED_OPEN, + parser.yy.LINETYPE.SOLID, + parser.yy.LINETYPE.DOTTED, + parser.yy.LINETYPE.SOLID_CROSS, parser.yy.LINETYPE.DOTTED_CROSS ].includes(msg.type)) { sequenceIndex++ From 8035572facd49d0b826e9ee425e1eb01d91f9265 Mon Sep 17 00:00:00 2001 From: "Bland, Paul" Date: Fri, 17 Aug 2018 13:37:44 -0400 Subject: [PATCH 7/8] make default node number a little smaller --- src/diagrams/sequence/svgDraw.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js index a2b39e3f7..9bcad1091 100644 --- a/src/diagrams/sequence/svgDraw.js +++ b/src/diagrams/sequence/svgDraw.js @@ -195,7 +195,7 @@ export const insertSequenceNumber = function (elem) { .append('circle') .attr('cx', 15) .attr('cy', 15) - .attr('r', 10) + .attr('r', 7) // .style("fill", '#f00'); } /** From 0fdddfe5481b820bc5a5ee5c96e44a8aa1064e1d Mon Sep 17 00:00:00 2001 From: "Bland, Paul" Date: Thu, 23 Aug 2018 14:30:47 -0400 Subject: [PATCH 8/8] make default sequence numbers a little smaller --- src/diagrams/sequence/sequenceRenderer.js | 6 +++--- src/diagrams/sequence/svgDraw.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js index f7f8a270b..83ec1b998 100644 --- a/src/diagrams/sequence/sequenceRenderer.js +++ b/src/diagrams/sequence/sequenceRenderer.js @@ -266,10 +266,10 @@ const drawMessage = function (elem, startx, stopx, verticalPos, msg, sequenceInd if (conf.showSequenceNumbers) { line.attr('marker-start', 'url(' + url + '#sequencenumber)') g.append('text') - .attr('x', startx - 1) - .attr('y', verticalPos + 5) + .attr('x', startx) + .attr('y', verticalPos + 4) .attr('font-family', 'sans-serif') - .attr('font-size', '16px') + .attr('font-size', '12px') .attr('text-anchor', 'middle') .attr('textLength', '16px') .attr('class', 'sequenceNumber') diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js index 9bcad1091..b1227d8e8 100644 --- a/src/diagrams/sequence/svgDraw.js +++ b/src/diagrams/sequence/svgDraw.js @@ -195,7 +195,7 @@ export const insertSequenceNumber = function (elem) { .append('circle') .attr('cx', 15) .attr('cy', 15) - .attr('r', 7) + .attr('r', 6) // .style("fill", '#f00'); } /**