Merge pull request #720 from paulbland/add-activation-class

Add nested activation classes

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

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)

src/themes/dark/index.scss

@@ -30,6 +30,8 @@ $labelBoxBorderColor: $actorBorder;
 $labelTextColor: $mainContrastColor;
 $noteBorderColor: $border2;
 $noteBkgColor: #fff5ad;
+$activationBorderColor: #666;
+$activationBkgColor: #f4f4f4;
 
 /* Gantt chart variables */
 

src/themes/default/index.scss

@@ -28,6 +28,8 @@ $labelBoxBorderColor: $actorBorder;
 $labelTextColor: $actorTextColor;
 $noteBorderColor: $border2;
 $noteBkgColor: #fff5ad;
+$activationBorderColor: #666;
+$activationBkgColor: #f4f4f4;
 
 /* Gantt chart variables */
 

src/themes/forest/index.scss

@@ -29,6 +29,8 @@ $labelBoxBorderColor: #326932;
 $labelTextColor: $actorTextColor;
 $noteBorderColor: $border2;
 $noteBkgColor: #fff5ad;
+$activationBorderColor: #666;
+$activationBkgColor: #f4f4f4;
 
 /* Gantt chart variables */
 

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 */
 

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