marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-28 20:56:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

#1295 Styling of start/end nodes, arrows and regular states

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-03-28 13:59:41 +01:00
parent 391dc06013
commit 85f47e1693
8 changed files with 205 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
cypress/platform/current.html
View File

@@ -11,17 +11,17 @@
font-family: 'Arial'; font-family: 'Arial';
} }
h1 { color: white;} h1 { color: white;}
.arrowheadPath {fill: red;}
.edgePath .path {stroke: red;}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
.mermaid-apa #pointEnd {
fill: green !important;
}
</style> </style>
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="mermaid2" style="width: 100%; height: 100%;"> <div class="mermaid2" style="width: 100%; height: 20%;">
flowchart LR flowchart LR
a --> b a --> b
@@ -34,14 +34,30 @@
G-->H G-->H
G-->c G-->c
</div> </div>
<div class="mermaid2" style="width: 100%; height: 100%;"> <div class="mermaid" style="width: 50%; height: 20%;">
flowchart LR flowchart LR
subgraph id1 [Test] subgraph id1 [Test]
b b
end end
a-->id1 a-->id1
</div> </div>
<div class="mermaid" style="width: 100%; height: 100%;"> <div class="mermaid mermaid-apa" style="width: 100%; height: 20%;">
stateDiagram-v2
[*] --> Still
[*] --> Moving
Still --> [*]
Moving --> [*]
</div>
<div class="mermaid2" style="width: 100%; height: 100%;">
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
</div>
<div class="mermaid2" style="width: 100%; height: 100%;">
stateDiagram-v2 stateDiagram-v2
[*]-->TV [*]-->TV

27
src/dagre-wrapper/edges.js
View File

@@ -113,7 +113,7 @@ const intersection = (node, outsidePoint, insidePoint) => {
} }
}; };
export const insertEdge = function(elem, edge, clusterDb) { export const insertEdge = function(elem, edge, clusterDb, diagramType) {
logger.info('\n\n\n\n'); logger.info('\n\n\n\n');
let points = edge.points; let points = edge.points;
if (edge.toCluster) { if (edge.toCluster) {
@@ -219,25 +219,32 @@ export const insertEdge = function(elem, edge, clusterDb) {
// logger.info('arrowType', edge.arrowType); // logger.info('arrowType', edge.arrowType);
switch (edge.arrowType) { switch (edge.arrowType) {
case 'arrow_cross': case 'arrow_cross':
svgPath.attr('marker-end', 'url(' + url + '#' + 'crossEnd' + ')'); svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')');
break; break;
case 'double_arrow_cross': case 'double_arrow_cross':
svgPath.attr('marker-end', 'url(' + url + '#' + 'crossEnd' + ')'); svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')');
svgPath.attr('marker-start', 'url(' + url + '#' + 'crossStart' + ')'); svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-crossStart' + ')');
break; break;
case 'arrow_point': case 'arrow_point':
svgPath.attr('marker-end', 'url(' + url + '#' + 'pointEnd' + ')'); svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-pointEnd' + ')');
break; break;
case 'double_arrow_point': case 'double_arrow_point':
svgPath.attr('marker-end', 'url(' + url + '#' + 'pointEnd' + ')'); svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-pointEnd' + ')');
svgPath.attr('marker-start', 'url(' + url + '#' + 'pointStart' + ')'); svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-pointStart' + ')');
break;
case 'arrow_barb':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-barbEnd' + ')');
break;
case 'double_arrow_barb':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-barnEnd' + ')');
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-barbStart' + ')');
break; break;
case 'arrow_circle': case 'arrow_circle':
svgPath.attr('marker-end', 'url(' + url + '#' + 'circleEnd' + ')'); svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-circleEnd' + ')');
break; break;
case 'double_arrow_circle': case 'double_arrow_circle':
svgPath.attr('marker-end', 'url(' + url + '#' + 'circleEnd' + ')'); svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-circleEnd' + ')');
svgPath.attr('marker-start', 'url(' + url + '#' + 'circleStart' + ')'); svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-circleStart' + ')');
break; break;
default: default:
} }

6
src/dagre-wrapper/index.js
View File

@@ -12,8 +12,8 @@ const translateClusterId = id => {
return id; return id;
}; };
export const render = (elem, graph, markers) => { export const render = (elem, graph, markers, diagramtype, id) => {
insertMarkers(elem, markers); insertMarkers(elem, markers, diagramtype, id);
clusterDb = {}; clusterDb = {};
clearNodes(); clearNodes();
clearEdges(); clearEdges();
@@ -88,7 +88,7 @@ export const render = (elem, graph, markers) => {
const edge = graph.edge(e); const edge = graph.edge(e);
logger.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge); logger.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
insertEdge(edgePaths, edge, clusterDb); insertEdge(edgePaths, edge, clusterDb, diagramtype);
positionEdgeLabel(edge); positionEdgeLabel(edge);
}); });
}; };

105
src/dagre-wrapper/markers.js
View File

@@ -2,18 +2,18 @@
* Setup arrow head and define the marker. The result is appended to the svg. * Setup arrow head and define the marker. The result is appended to the svg.
*/ */
// Only add the number of markers that the diagram needs // Only add the number of markers that the diagram needs
const insertMarkers = (elem, markerArray) => { const insertMarkers = (elem, markerArray, type, id) => {
markerArray.forEach(markerName => { markerArray.forEach(markerName => {
markers[markerName](elem); markers[markerName](elem, type, id);
}); });
}; };
const extension = elem => { const extension = (elem, type, id) => {
elem elem
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', 'extensionStart') .attr('id', 'extensionStart')
.attr('class', 'extension') .attr('class', 'extension ' + type)
.attr('refX', 0) .attr('refX', 0)
.attr('refY', 7) .attr('refY', 7)
.attr('markerWidth', 190) .attr('markerWidth', 190)
@@ -25,7 +25,8 @@ const extension = elem => {
elem elem
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', 'extensionEnd') .attr('id', 'extensionEnd ' + type)
.attr('class', 'extension ' + type)
.attr('refX', 19) .attr('refX', 19)
.attr('refY', 7) .attr('refY', 7)
.attr('markerWidth', 20) .attr('markerWidth', 20)
@@ -35,12 +36,12 @@ const extension = elem => {
.attr('d', 'M 1,1 V 13 L18,7 Z'); // this is actual shape for arrowhead .attr('d', 'M 1,1 V 13 L18,7 Z'); // this is actual shape for arrowhead
}; };
const composition = elem => { const composition = (elem, type, id) => {
elem elem
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', 'compositionStart') .attr('id', 'compositionStart')
.attr('class', 'extension') .attr('class', 'extension ' + type)
.attr('refX', 0) .attr('refX', 0)
.attr('refY', 7) .attr('refY', 7)
.attr('markerWidth', 190) .attr('markerWidth', 190)
@@ -53,6 +54,7 @@ const composition = elem => {
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', 'compositionEnd') .attr('id', 'compositionEnd')
.attr('class', 'extension ' + type)
.attr('refX', 19) .attr('refX', 19)
.attr('refY', 7) .attr('refY', 7)
.attr('markerWidth', 20) .attr('markerWidth', 20)
@@ -61,12 +63,12 @@ const composition = elem => {
.append('path') .append('path')
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z'); .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
}; };
const aggregation = elem => { const aggregation = (elem, type, id) => {
elem elem
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', 'aggregationStart') .attr('id', 'aggregationStart')
.attr('class', 'extension') .attr('class', 'extension ' + type)
.attr('refX', 0) .attr('refX', 0)
.attr('refY', 7) .attr('refY', 7)
.attr('markerWidth', 190) .attr('markerWidth', 190)
@@ -79,6 +81,7 @@ const aggregation = elem => {
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', 'aggregationEnd') .attr('id', 'aggregationEnd')
.attr('class', type)
.attr('refX', 19) .attr('refX', 19)
.attr('refY', 7) .attr('refY', 7)
.attr('markerWidth', 20) .attr('markerWidth', 20)
@@ -87,12 +90,12 @@ const aggregation = elem => {
.append('path') .append('path')
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z'); .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
}; };
const dependency = elem => { const dependency = (elem, type, id) => {
elem elem
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', 'dependencyStart') .attr('id', 'dependencyStart')
.attr('class', 'extension') .attr('class', 'extension ' + type)
.attr('refX', 0) .attr('refX', 0)
.attr('refY', 7) .attr('refY', 7)
.attr('markerWidth', 190) .attr('markerWidth', 190)
@@ -105,6 +108,7 @@ const dependency = elem => {
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', 'dependencyEnd') .attr('id', 'dependencyEnd')
.attr('class', type)
.attr('refX', 19) .attr('refX', 19)
.attr('refY', 7) .attr('refY', 7)
.attr('markerWidth', 20) .attr('markerWidth', 20)
@@ -113,10 +117,11 @@ const dependency = elem => {
.append('path') .append('path')
.attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z'); .attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
}; };
const point = elem => { const point = (elem, type, id) => {
elem elem
.append('marker') .append('marker')
.attr('id', 'pointEnd') .attr('id', type + '-pointEnd')
.attr('class', type)
.attr('viewBox', '0 0 10 10') .attr('viewBox', '0 0 10 10')
.attr('refX', 10) .attr('refX', 10)
.attr('refY', 5) .attr('refY', 5)
@@ -126,12 +131,13 @@ const point = elem => {
.attr('orient', 'auto') .attr('orient', 'auto')
.append('path') .append('path')
.attr('d', 'M 0 0 L 10 5 L 0 10 z') .attr('d', 'M 0 0 L 10 5 L 0 10 z')
.attr('class', 'arrowheadPath') .attr('class', 'arrowMarkerPath')
.style('stroke-width', 1) .style('stroke-width', 1)
.style('stroke-dasharray', '1,0'); .style('stroke-dasharray', '1,0');
elem elem
.append('marker') .append('marker')
.attr('id', 'pointStart') .attr('id', type + '-pointStart')
.attr('class', type)
.attr('viewBox', '0 0 10 10') .attr('viewBox', '0 0 10 10')
.attr('refX', 0) .attr('refX', 0)
.attr('refY', 5) .attr('refY', 5)
@@ -141,14 +147,15 @@ const point = elem => {
.attr('orient', 'auto') .attr('orient', 'auto')
.append('path') .append('path')
.attr('d', 'M 0 5 L 10 10 L 10 0 z') .attr('d', 'M 0 5 L 10 10 L 10 0 z')
.attr('class', 'arrowheadPath') .attr('class', 'arrowMarkerPath')
.style('stroke-width', 1) .style('stroke-width', 1)
.style('stroke-dasharray', '1,0'); .style('stroke-dasharray', '1,0');
}; };
const circle = elem => { const circle = (elem, type, id) => {
elem elem
.append('marker') .append('marker')
.attr('id', 'circleEnd') .attr('id', 'circleEnd')
.attr('class', type)
.attr('viewBox', '0 0 10 10') .attr('viewBox', '0 0 10 10')
.attr('refX', 11) .attr('refX', 11)
.attr('refY', 5) .attr('refY', 5)
@@ -160,13 +167,14 @@ const circle = elem => {
.attr('cx', '5') .attr('cx', '5')
.attr('cy', '5') .attr('cy', '5')
.attr('r', '5') .attr('r', '5')
.attr('class', 'arrowheadPath') .attr('class', 'arrowMarkerPath')
.style('stroke-width', 1) .style('stroke-width', 1)
.style('stroke-dasharray', '1,0'); .style('stroke-dasharray', '1,0');
elem elem
.append('marker') .append('marker')
.attr('id', 'circleStart') .attr('id', 'circleStart')
.attr('class', type)
.attr('viewBox', '0 0 10 10') .attr('viewBox', '0 0 10 10')
.attr('refX', -1) .attr('refX', -1)
.attr('refY', 5) .attr('refY', 5)
@@ -178,14 +186,15 @@ const circle = elem => {
.attr('cx', '5') .attr('cx', '5')
.attr('cy', '5') .attr('cy', '5')
.attr('r', '5') .attr('r', '5')
.attr('class', 'arrowheadPath') .attr('class', 'arrowMarkerPath')
.style('stroke-width', 1) .style('stroke-width', 1)
.style('stroke-dasharray', '1,0'); .style('stroke-dasharray', '1,0');
}; };
const cross = elem => { const cross = (elem, type, id) => {
elem elem
.append('marker') .append('marker')
.attr('id', 'crossEnd') .attr('id', 'crossEnd')
.attr('class', type)
.attr('viewBox', '0 0 11 11') .attr('viewBox', '0 0 11 11')
.attr('refX', 12) .attr('refX', 12)
.attr('refY', 5.2) .attr('refY', 5.2)
@@ -196,13 +205,14 @@ const cross = elem => {
.append('path') .append('path')
.attr('stroke', 'black') .attr('stroke', 'black')
.attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9') .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')
.attr('class', 'arrowheadPath') .attr('class', 'arrowMarkerPath')
.style('stroke-width', 2) .style('stroke-width', 2)
.style('stroke-dasharray', '1,0'); .style('stroke-dasharray', '1,0');
elem elem
.append('marker') .append('marker')
.attr('id', 'crossStart') .attr('id', 'crossStart')
.attr('class', type)
.attr('viewBox', '0 0 11 11') .attr('viewBox', '0 0 11 11')
.attr('refX', -1) .attr('refX', -1)
.attr('refY', 5.2) .attr('refY', 5.2)
@@ -213,11 +223,59 @@ const cross = elem => {
.append('path') .append('path')
.attr('stroke', 'black') .attr('stroke', 'black')
.attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9') .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')
.attr('class', 'arrowheadPath') .attr('class', 'arrowMarkerPath')
.style('stroke-width', 2) .style('stroke-width', 2)
.style('stroke-dasharray', '1,0'); .style('stroke-dasharray', '1,0');
}; };
const barb = (elem, type, id) => {
elem
.append('defs')
.append('marker')
.attr('id', type + '-barbEnd')
.attr('refX', 19)
.attr('refY', 7)
.attr('markerWidth', 20)
.attr('markerHeight', 14)
.attr('markerUnits', 0)
.attr('orient', 'auto')
.append('path')
.attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');
// .append('marker')
// .attr('id', 'barbEnd')
// .attr('class', type)
// .attr('viewBox', '0 0 11 11')
// .attr('refX', 12)
// .attr('refY', 5.2)
// .attr('markerUnits', 'strokeWidth')
// .attr('markerWidth', 7)
// .attr('markerHeight', 7)
// .attr('orient', 'auto')
// .append('path')
// .attr('stroke', 'black')
// .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')
// .attr('class', 'arrowMarkerPath')
// .style('stroke-width', 2)
// .style('stroke-dasharray', '1,0');
// elem
// .append('marker')
// .attr('id', 'barbStart')
// .attr('class', type)
// .attr('viewBox', '0 0 11 11')
// .attr('refX', -1)
// .attr('refY', 5.2)
// .attr('markerUnits', 'strokeWidth')
// .attr('markerWidth', 7)
// .attr('markerHeight', 7)
// .attr('orient', 'auto')
// .append('path')
// .attr('stroke', 'black')
// .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')
// .attr('class', 'arrowMarkerPath')
// .style('stroke-width', 2)
// .style('stroke-dasharray', '1,0');
};
// TODO rename the class diagram markers to something shape descriptive and semanitc free // TODO rename the class diagram markers to something shape descriptive and semanitc free
const markers = { const markers = {
extension, extension,
@@ -226,6 +284,7 @@ const markers = {
dependency, dependency,
point, point,
circle, circle,
cross cross,
barb
}; };
export default insertMarkers; export default insertMarkers;

30
src/dagre-wrapper/nodes.js
View File

@@ -375,6 +375,34 @@ const start = (parent, node) => {
return shapeSvg; return shapeSvg;
}; };
const end = (parent, node) => {
const shapeSvg = parent
.insert('g')
.attr('class', 'node default')
.attr('id', node.id);
const innerCircle = shapeSvg.insert('circle', ':first-child');
const circle = shapeSvg.insert('circle', ':first-child');
circle
.attr('class', 'state-start')
.attr('r', 7)
.attr('width', 14)
.attr('height', 14);
innerCircle
.attr('class', 'state-end')
.attr('r', 5)
.attr('width', 10)
.attr('height', 10);
updateNodeBounds(node, circle);
node.intersect = function(point) {
return intersect.circle(node, point);
};
return shapeSvg;
};
const shapes = { const shapes = {
question, question,
@@ -390,7 +418,7 @@ const shapes = {
rect_right_inv_arrow, rect_right_inv_arrow,
cylinder, cylinder,
start, start,
end: start end
}; };
let nodeElems = {}; let nodeElems = {};

2
src/diagrams/flowchart/flowRenderer-v2.js
View File

@@ -350,7 +350,7 @@ export const draw = function(text, id) {
// Run the renderer. This is what draws the final graph. // Run the renderer. This is what draws the final graph.
const element = d3.select('#' + id + ' g'); const element = d3.select('#' + id + ' g');
render(element, g, ['point', 'circle', 'cross']); render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);
dagre.layout(g); dagre.layout(g);
element.selectAll('g.node').attr('title', function() { element.selectAll('g.node').attr('title', function() {

81
src/diagrams/state/stateRenderer-v2.js
View File

@@ -71,10 +71,8 @@ const setupNode = (g, parent, node) => {
shape: nodeDb[node.id].shape, shape: nodeDb[node.id].shape,
label: node.id, label: node.id,
labelText: nodeDb[node.id].description, labelText: nodeDb[node.id].description,
// label: nodeDb[node.id].description || node.id, rx: 5,
// labelText: nodeDb[node.id].description || node.id, ry: 5,
rx: 0,
ry: 0,
class: 'default', //classStr, class: 'default', //classStr,
style: '', //styles.style, style: '', //styles.style,
id: node.id, id: node.id,
@@ -107,28 +105,17 @@ const setupDoc = (g, parent, doc) => {
setupNode(g, parent, item.state2); setupNode(g, parent, item.state2);
const edgeData = { const edgeData = {
arrowhead: 'normal', arrowhead: 'normal',
arrowType: 'arrow_point', arrowType: 'arrow_barb',
style: 'fill:none', style: 'fill:none',
labelStyle: '', labelStyle: '',
arrowheadStyle: 'fill: #333', arrowheadStyle: 'fill: #333',
labelpos: 'c', labelpos: 'c',
labelType: 'text', labelType: 'text',
label: '', label: ''
// curve: d3.curveNatural,
curve: d3.curveStep
// curve: d3.curveMonotoneX
}; };
let startId = item.state1.id; let startId = item.state1.id;
let endId = item.state2.id; let endId = item.state2.id;
// if (parent && startId === '[*]') {
// startId = parent.id + '_start';
// }
// if (parent && endId === '[*]') {
// startId = parent.id + '_end';
// }
g.setEdge(startId, endId, edgeData, cnt); g.setEdge(startId, endId, edgeData, cnt);
cnt++; cnt++;
} }
@@ -141,7 +128,7 @@ const setupDoc = (g, parent, doc) => {
* @param id * @param id
*/ */
export const draw = function(text, id) { export const draw = function(text, id) {
logger.trace('Drawing state diagram (v2)'); logger.info('Drawing state diagram (v2)', id);
stateDb.clear(); stateDb.clear();
const parser = state.parser; const parser = state.parser;
parser.yy = stateDb; parser.yy = stateDb;
@@ -188,30 +175,48 @@ export const draw = function(text, id) {
// Run the renderer. This is what draws the final graph. // Run the renderer. This is what draws the final graph.
const element = d3.select('#' + id + ' g'); const element = d3.select('#' + id + ' g');
render(element, g, ['point', 'circle', 'cross']); render(element, g, ['barb'], 'statediagram', id);
const padding = 8; const padding = 8;
const svgBounds = svg.node().getBBox(); // const svgBounds = svg.node().getBBox();
const width = svgBounds.width + padding * 2; // const width = svgBounds.width + padding * 2;
const height = svgBounds.height + padding * 2; // const height = svgBounds.height + padding * 2;
logger.debug( // logger.debug(
`new ViewBox 0 0 ${width} ${height}`, // `new ViewBox 0 0 ${width} ${height}`,
`translate(${padding - g._label.marginx}, ${padding - g._label.marginy})` // `translate(${padding + g._label.marginx}, ${padding + g._label.marginy})`
// );
// if (conf.useMaxWidth) {
// svg.attr('width', '100%');
// svg.attr('style', `max-width: ${width}px;`);
// } else {
// svg.attr('height', height);
// svg.attr('width', width);
// }
// svg.attr('viewBox', `0 0 ${width} ${height}`);
// svg
// .select('g')
// .attr('transform', `translate(${padding - g._label.marginx}, ${padding - svgBounds.y})`);
const bounds = svg.node().getBBox();
const width = bounds.width + padding * 2;
const height = bounds.height + padding * 2;
// diagram.attr('height', '100%');
// diagram.attr('style', `width: ${bounds.width * 3 + conf.padding * 2};`);
// diagram.attr('height', height);
// Zoom in a bit
svg.attr('width', width * 1.75);
svg.attr('class', 'statediagram');
// diagram.attr('height', bounds.height * 3 + conf.padding * 2);
svg.attr(
'viewBox',
`${bounds.x - conf.padding} ${bounds.y - conf.padding} ` + width + ' ' + height
); );
if (conf.useMaxWidth) {
svg.attr('width', '100%');
svg.attr('style', `max-width: ${width}px;`);
} else {
svg.attr('height', height);
svg.attr('width', width);
}
svg.attr('viewBox', `0 0 ${width} ${height}`);
svg
.select('g')
.attr('transform', `translate(${padding - g._label.marginx}, ${padding - svgBounds.y})`);
// Add label rects for non html labels // Add label rects for non html labels
if (!conf.htmlLabels) { if (!conf.htmlLabels) {
const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label'); const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label');

8
src/themes/state.scss
View File

@@ -72,3 +72,11 @@ g.stateGroup line {
fill: black; fill: black;
stroke: black; stroke: black;
} }
.node circle.state-end {
fill: black;
stroke: white;
stroke-width: 1.5
}
#statediagram-barbEnd {
fill: $nodeBorder
}