diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js index f37238a13..37d154073 100644 --- a/src/diagrams/sequence/sequenceRenderer.js +++ b/src/diagrams/sequence/sequenceRenderer.js @@ -340,7 +340,7 @@ export const draw = function (text, id) { activationData.starty = verticalPos - 6 verticalPos += 12 } - svgDraw.drawActivation(diagram, activationData, verticalPos, conf) + svgDraw.drawActivation(diagram, activationData, verticalPos, conf, actorActivations(msg.from.actor).length) bounds.insert(activationData.startx, verticalPos - 10, activationData.stopx, verticalPos) } diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js index 71f527eca..4f0e6bd9d 100644 --- a/src/diagrams/sequence/svgDraw.js +++ b/src/diagrams/sequence/svgDraw.js @@ -101,12 +101,12 @@ export const anchorElement = function (elem) { * @param bounds - activation box bounds * @param verticalPos - precise y cooridnate of bottom activation box edge */ -export const drawActivation = function (elem, bounds, verticalPos) { +export const drawActivation = function (elem, bounds, verticalPos, conf, actorActivations) { const rect = getNoteRect() const g = bounds.anchored rect.x = bounds.startx rect.y = bounds.starty - rect.fill = '#f4f4f4' + rect.class = 'activation' + (actorActivations % 3) // Will evaluate to 0, 1 or 2 rect.width = bounds.stopx - bounds.startx rect.height = verticalPos - bounds.starty drawRect(g, rect) diff --git a/src/themes/dark/index.scss b/src/themes/dark/index.scss index 529eb3f70..579d871b2 100644 --- a/src/themes/dark/index.scss +++ b/src/themes/dark/index.scss @@ -30,6 +30,8 @@ $labelBoxBorderColor: $actorBorder; $labelTextColor: $mainContrastColor; $noteBorderColor: $border2; $noteBkgColor: #fff5ad; +$activationBorderColor: #666; +$activationBkgColor: #f4f4f4; /* Gantt chart variables */ diff --git a/src/themes/default/index.scss b/src/themes/default/index.scss index e98fc0741..2718eb3ef 100644 --- a/src/themes/default/index.scss +++ b/src/themes/default/index.scss @@ -28,6 +28,8 @@ $labelBoxBorderColor: $actorBorder; $labelTextColor: $actorTextColor; $noteBorderColor: $border2; $noteBkgColor: #fff5ad; +$activationBorderColor: #666; +$activationBkgColor: #f4f4f4; /* Gantt chart variables */ diff --git a/src/themes/forest/index.scss b/src/themes/forest/index.scss index f6e1a1dae..c4a712297 100644 --- a/src/themes/forest/index.scss +++ b/src/themes/forest/index.scss @@ -29,6 +29,8 @@ $labelBoxBorderColor: #326932; $labelTextColor: $actorTextColor; $noteBorderColor: $border2; $noteBkgColor: #fff5ad; +$activationBorderColor: #666; +$activationBkgColor: #f4f4f4; /* Gantt chart variables */ diff --git a/src/themes/neutral/index.scss b/src/themes/neutral/index.scss index f0560142f..ea41b9b8c 100644 --- a/src/themes/neutral/index.scss +++ b/src/themes/neutral/index.scss @@ -33,6 +33,8 @@ $labelBoxBorderColor: $actorBorder; $labelTextColor: white; $noteBorderColor: darken($note, 60%); $noteBkgColor: $note; +$activationBorderColor: #666; +$activationBkgColor: #f4f4f4; /* Gantt chart variables */ diff --git a/src/themes/sequence.scss b/src/themes/sequence.scss index 0e5714504..d257888e8 100644 --- a/src/themes/sequence.scss +++ b/src/themes/sequence.scss @@ -73,3 +73,18 @@ text.actor { font-family: 'trebuchet ms', verdana, arial; font-size: 14px; } + +.activation0 { + fill: $activationBkgColor; + stroke: $activationBorderColor; +} + +.activation1 { + fill: $activationBkgColor; + stroke: $activationBorderColor; +} + +.activation2 { + fill: $activationBkgColor; + stroke: $activationBorderColor; +}