#945 Setting up stylesheet, classes and colors
This commit is contained in:
parent
7c125cf9d6
commit
a258eda035
|
@ -41,6 +41,7 @@ export const drawSimpleState = (g, stateDef) => {
|
|||
.attr('x', 2 * getConfig().state.padding)
|
||||
.attr('y', getConfig().state.textHeight + 2 * getConfig().state.padding)
|
||||
.attr('font-size', getConfig().state.fontSize)
|
||||
.attr('class', 'state-title')
|
||||
.text(stateDef.id);
|
||||
|
||||
const classBox = state.node().getBBox();
|
||||
|
@ -90,7 +91,6 @@ export const drawDescrState = (g, stateDef) => {
|
|||
getConfig().state.dividerMargin +
|
||||
getConfig().state.textHeight
|
||||
)
|
||||
.attr('fill', 'white')
|
||||
.attr('class', 'state-description');
|
||||
|
||||
let isFirst = true;
|
||||
|
@ -163,7 +163,7 @@ export const addIdAndBox = (g, stateDef) => {
|
|||
g.insert('rect', ':first-child')
|
||||
.attr('x', graphBox.x)
|
||||
.attr('y', lineY)
|
||||
.attr('style', 'fill: white; border-bottom: 1px')
|
||||
.attr('class', 'composit')
|
||||
.attr('width', graphBox.width + getConfig().state.padding)
|
||||
.attr(
|
||||
'height',
|
||||
|
@ -293,7 +293,7 @@ const _drawLongText = (_text, x, y, g) => {
|
|||
*/
|
||||
|
||||
export const drawNote = (text, g) => {
|
||||
g.attr('class', 'note');
|
||||
g.attr('class', 'state-note');
|
||||
const note = g
|
||||
.append('rect')
|
||||
.attr('x', 0)
|
||||
|
@ -327,7 +327,7 @@ export const drawState = function(elem, stateDef, graph, doc) {
|
|||
const g = elem
|
||||
.append('g')
|
||||
.attr('id', id)
|
||||
.attr('class', 'classGroup');
|
||||
.attr('class', 'stateGroup');
|
||||
|
||||
if (stateDef.type === 'start') drawStartState(g);
|
||||
if (stateDef.type === 'end') drawEndState(g);
|
||||
|
@ -382,7 +382,7 @@ export const drawEdge = function(elem, path, relation) {
|
|||
.append('path')
|
||||
.attr('d', lineFunction(lineData))
|
||||
.attr('id', 'edge' + edgeCount)
|
||||
.attr('class', 'relation');
|
||||
.attr('class', 'transition');
|
||||
let url = '';
|
||||
if (getConfig().state.arrowMarkerAbsolute) {
|
||||
url =
|
||||
|
@ -401,7 +401,7 @@ export const drawEdge = function(elem, path, relation) {
|
|||
);
|
||||
|
||||
if (typeof relation.title !== 'undefined') {
|
||||
const g = elem.append('g').attr('class', 'classLabel');
|
||||
const g = elem.append('g').attr('class', 'stateLabel');
|
||||
const label = g
|
||||
.append('text')
|
||||
.attr('class', 'label')
|
||||
|
|
|
@ -166,7 +166,7 @@ const renderDoc = (doc, diagram, parentId) => {
|
|||
let sub = diagram
|
||||
.append('g')
|
||||
.attr('id', stateDef.id)
|
||||
.attr('class', 'classGroup');
|
||||
.attr('class', 'stateGroup');
|
||||
node = renderDoc(stateDef.doc, sub, stateDef.id);
|
||||
|
||||
if (first) {
|
||||
|
|
|
@ -56,4 +56,7 @@ $critBkgColor: #E83737;
|
|||
$taskTextDarkColor: $darkTextColor;
|
||||
$todayLineColor: #DB5757;
|
||||
|
||||
/* state colors */
|
||||
$labelColor: black;
|
||||
|
||||
@import '../mermaid';
|
||||
|
|
|
@ -54,4 +54,7 @@ $critBorderColor: #ff8888;
|
|||
$critBkgColor: red;
|
||||
$todayLineColor: red;
|
||||
|
||||
/* state colors */
|
||||
$labelColor: black;
|
||||
|
||||
@import '../mermaid';
|
||||
|
|
|
@ -55,4 +55,7 @@ $critBorderColor: #ff8888;
|
|||
$critBkgColor: red;
|
||||
$todayLineColor: red;
|
||||
|
||||
/* state colors */
|
||||
$labelColor: black;
|
||||
|
||||
@import '../mermaid';
|
||||
|
|
|
@ -4,3 +4,9 @@
|
|||
@import 'class';
|
||||
@import 'git';
|
||||
@import 'pie';
|
||||
@import 'state';
|
||||
|
||||
.composit {
|
||||
fill: white;
|
||||
border-bottom: 1px
|
||||
}
|
||||
|
|
|
@ -59,4 +59,7 @@ $critBkgColor: $critical;
|
|||
$critBorderColor: darken($critBkgColor, 10%);
|
||||
$todayLineColor: $critBkgColor;
|
||||
|
||||
/* state colors */
|
||||
$labelColor: black;
|
||||
|
||||
@import '../mermaid';
|
||||
|
|
|
@ -0,0 +1,56 @@
|
|||
g.stateGroup text {
|
||||
fill: $nodeBorder;
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 10px;
|
||||
|
||||
}
|
||||
g.stateGroup .state-title {
|
||||
font-weight: bolder;
|
||||
fill: $labelColor;
|
||||
}
|
||||
|
||||
g.stateGroup rect {
|
||||
fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
}
|
||||
|
||||
g.stateGroup line {
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.transition {
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.stateGroup .composit {
|
||||
fill: white;
|
||||
border-bottom: 1px
|
||||
}
|
||||
|
||||
.state-note {
|
||||
stroke: $noteBorderColor;
|
||||
fill: $noteBkgColor;
|
||||
|
||||
text {
|
||||
fill: black;
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.stateLabel .box {
|
||||
stroke: none;
|
||||
stroke-width: 0;
|
||||
fill: $nodeBkg;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.stateLabel .label {
|
||||
fill: $labelColor;
|
||||
font-size: 10px;
|
||||
}
|
Loading…
Reference in New Issue