From a258eda03515152065b3d429ac1a86c74ff723d0 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 11 Oct 2019 18:12:24 +0200 Subject: [PATCH] #945 Setting up stylesheet, classes and colors --- src/diagrams/state/shapes.js | 12 +++---- src/diagrams/state/stateRenderer.js | 2 +- src/themes/dark/index.scss | 3 ++ src/themes/default/index.scss | 3 ++ src/themes/forest/index.scss | 3 ++ src/themes/mermaid.scss | 6 ++++ src/themes/neutral/index.scss | 3 ++ src/themes/state.scss | 56 +++++++++++++++++++++++++++++ 8 files changed, 81 insertions(+), 7 deletions(-) create mode 100644 src/themes/state.scss diff --git a/src/diagrams/state/shapes.js b/src/diagrams/state/shapes.js index 8430e8a6a..017549e4b 100644 --- a/src/diagrams/state/shapes.js +++ b/src/diagrams/state/shapes.js @@ -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') diff --git a/src/diagrams/state/stateRenderer.js b/src/diagrams/state/stateRenderer.js index 445e4758e..0a62e6911 100644 --- a/src/diagrams/state/stateRenderer.js +++ b/src/diagrams/state/stateRenderer.js @@ -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) { diff --git a/src/themes/dark/index.scss b/src/themes/dark/index.scss index 9855d0e81..c1043f025 100644 --- a/src/themes/dark/index.scss +++ b/src/themes/dark/index.scss @@ -56,4 +56,7 @@ $critBkgColor: #E83737; $taskTextDarkColor: $darkTextColor; $todayLineColor: #DB5757; +/* state colors */ +$labelColor: black; + @import '../mermaid'; diff --git a/src/themes/default/index.scss b/src/themes/default/index.scss index b689325b0..3ef641b50 100644 --- a/src/themes/default/index.scss +++ b/src/themes/default/index.scss @@ -54,4 +54,7 @@ $critBorderColor: #ff8888; $critBkgColor: red; $todayLineColor: red; +/* state colors */ +$labelColor: black; + @import '../mermaid'; diff --git a/src/themes/forest/index.scss b/src/themes/forest/index.scss index 24710ea05..d8d96c923 100644 --- a/src/themes/forest/index.scss +++ b/src/themes/forest/index.scss @@ -55,4 +55,7 @@ $critBorderColor: #ff8888; $critBkgColor: red; $todayLineColor: red; +/* state colors */ +$labelColor: black; + @import '../mermaid'; diff --git a/src/themes/mermaid.scss b/src/themes/mermaid.scss index 0026e2339..adc79fe9d 100644 --- a/src/themes/mermaid.scss +++ b/src/themes/mermaid.scss @@ -4,3 +4,9 @@ @import 'class'; @import 'git'; @import 'pie'; +@import 'state'; + +.composit { + fill: white; + border-bottom: 1px +} diff --git a/src/themes/neutral/index.scss b/src/themes/neutral/index.scss index 87a6d6784..a0faed706 100644 --- a/src/themes/neutral/index.scss +++ b/src/themes/neutral/index.scss @@ -59,4 +59,7 @@ $critBkgColor: $critical; $critBorderColor: darken($critBkgColor, 10%); $todayLineColor: $critBkgColor; +/* state colors */ +$labelColor: black; + @import '../mermaid'; diff --git a/src/themes/state.scss b/src/themes/state.scss new file mode 100644 index 000000000..3cfecf649 --- /dev/null +++ b/src/themes/state.scss @@ -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; +}