bramp / js-sequence-diagrams

Draws simple SVG sequence diagrams from textual representation of the diagram
https://bramp.github.io/js-sequence-diagrams/
BSD 2-Clause "Simplified" License
7.81k stars 1.08k forks source link

Add actor specific class name #177

Open kawikao opened 7 years ago

kawikao commented 7 years ago

Allows CSS attributes to override individual actors.

Example to be used in sequence-diagram.css:

.actor0 text {
    fill: blue;
}
.actor0 rect, .actor0 path {
    fill: #9f9;
}
.actor1 rect, .actor1 path {
    fill: #f9f;
}
screen shot 2017-06-04 at 2 48 33 pm screen shot 2017-06-04 at 2 50 23 pm
bramp commented 7 years ago

Very nice idea. Should we use "actorVistor" instead of "actor0"? I guess number based has fewer pitfalls.

I wonder if the CSS nth select would have worked without your change, for example:

.actor rect:nth-child(1), .actor path:nth-child(1) {
    fill: #f9f;
}

Well either way I'll review your changes shortly.

kawikao commented 7 years ago

I couldn't get .actor:nth-child() or .actor:nth-of-type() to work but I did get it to work with group. One nice side-effect is it's possible to address each box seperately (e.g. top and bottom of the same actor). The downside is having to set both boxes.

Uses group

g:nth-of-type(2) rect

Or a more specific call to group.class

g.actor:nth-of-type(2) rect