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

#1418 Adding support for htmlLabels in stateDiagram (v2)

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-05-27 20:41:59 +02:00
parent 39bdf261c6
commit 4ea6c98f43
4 changed files with 46 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
cypress/platform/current.html
View File

@@ -18,35 +18,24 @@
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="mermaid2" style="width: 100%; height: 20%;"> <div class="mermaid" style="width: 100%; height: 20%;">
flowchart LR stateDiagram-v2
a --> b
subgraph b [Test] [*] --> S1
c --> d -->e state "Some long name\nwith an even longer next row" as S1
end
</div> </div>
<div class="mermaid2" style="width: 100%; height: 20%;"> <div class="mermaid" style="width: 100%; height: 20%;">
flowchart LR flowchart TD
a --> b cr((Create Request)) --label this is--> server[REST Server]
subgraph id1 [Test]
a --apa--> c
b
c-->b
b-->H
end
G-->H
G-->c
</div> </div>
<div class="mermaid" style="width: 50%; height: 20%;"> <div class="mermaid2" style="width: 50%; height: 20%;">
flowchart LR flowchart LR
A{{A}}-- apa -->B{{B}}; A{{A}}-- apa -->B{{B}};
click A callback "Tooltip" click A callback "Tooltip"
click B "http://www.github.com" "This is a link" click B "http://www.github.com" "This is a link"
</div> </div>
<div class="mermaid" style="width: 50%; height: 20%;"> <div class="mermaid2" style="width: 50%; height: 20%;">
graph LR graph LR
A{{A}}--apa-->B{{B}}; A{{A}}--apa-->B{{B}};

10
src/dagre-wrapper/createLabel.js
View File

@@ -1,4 +1,5 @@
import { select } from 'd3'; import { select } from 'd3';
import { logger } from '../logger'; // eslint-disable-line
// let vertexNode; // let vertexNode;
// if (getConfig().flowchart.htmlLabels) { // if (getConfig().flowchart.htmlLabels) {
// // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that? // // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
@@ -63,7 +64,8 @@ function addHtmlLabel(node) {
const div = fo.append('xhtml:div'); const div = fo.append('xhtml:div');
const label = node.label; const label = node.label;
div.html('<span class="edgeLabel">' + label + '</span>'); const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
div.html('<span class="' + labelClass + '">' + label + '</span>');
applyStyle(div, node.labelStyle); applyStyle(div, node.labelStyle);
div.style('display', 'inline-block'); div.style('display', 'inline-block');
@@ -73,10 +75,14 @@ function addHtmlLabel(node) {
return fo.node(); return fo.node();
} }
const createLabel = (vertexText, style, isTitle) => { const createLabel = (_vertexText, style, isTitle, isNode) => {
let vertexText = _vertexText || '';
if (getConfig().flowchart.htmlLabels) { if (getConfig().flowchart.htmlLabels) {
// TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that? // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
vertexText = vertexText.replace(/\\n|\n/g, '<br />');
logger.info('vertexText' + vertexText);
const node = { const node = {
isNode,
label: vertexText.replace( label: vertexText.replace(
/fa[lrsb]?:fa-[\w-]+/g, /fa[lrsb]?:fa-[\w-]+/g,
s => `<i class='${s.replace(':', ' ')}'></i>` s => `<i class='${s.replace(':', ' ')}'></i>`

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

@@ -2,11 +2,12 @@ import intersect from './intersect/index.js';
import { select } from 'd3'; import { select } from 'd3';
import { logger } from '../logger'; // eslint-disable-line import { logger } from '../logger'; // eslint-disable-line
import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util'; import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util';
import { getConfig } from '../config';
import createLabel from './createLabel'; import createLabel from './createLabel';
import note from './shapes/note'; import note from './shapes/note';
const question = (parent, node) => { const question = (parent, node) => {
const { shapeSvg, bbox } = labelHelper(parent, node); const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
const w = bbox.width + node.padding; const w = bbox.width + node.padding;
const h = bbox.height + node.padding; const h = bbox.height + node.padding;
@@ -28,7 +29,7 @@ const question = (parent, node) => {
}; };
const hexagon = (parent, node) => { const hexagon = (parent, node) => {
const { shapeSvg, bbox } = labelHelper(parent, node); const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
const f = 4; const f = 4;
const h = bbox.height + node.padding; const h = bbox.height + node.padding;
@@ -53,7 +54,7 @@ const hexagon = (parent, node) => {
}; };
const rect_left_inv_arrow = (parent, node) => { const rect_left_inv_arrow = (parent, node) => {
const { shapeSvg, bbox } = labelHelper(parent, node); const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
const w = bbox.width + node.padding; const w = bbox.width + node.padding;
const h = bbox.height + node.padding; const h = bbox.height + node.padding;
@@ -75,7 +76,7 @@ const rect_left_inv_arrow = (parent, node) => {
return shapeSvg; return shapeSvg;
}; };
const lean_right = (parent, node) => { const lean_right = (parent, node) => {
const { shapeSvg, bbox } = labelHelper(parent, node); const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
const w = bbox.width + node.padding; const w = bbox.width + node.padding;
const h = bbox.height + node.padding; const h = bbox.height + node.padding;
@@ -97,7 +98,7 @@ const lean_right = (parent, node) => {
}; };
const lean_left = (parent, node) => { const lean_left = (parent, node) => {
const { shapeSvg, bbox } = labelHelper(parent, node); const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
const w = bbox.width + node.padding; const w = bbox.width + node.padding;
const h = bbox.height + node.padding; const h = bbox.height + node.padding;
@@ -119,7 +120,7 @@ const lean_left = (parent, node) => {
}; };
const trapezoid = (parent, node) => { const trapezoid = (parent, node) => {
const { shapeSvg, bbox } = labelHelper(parent, node); const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
const w = bbox.width + node.padding; const w = bbox.width + node.padding;
const h = bbox.height + node.padding; const h = bbox.height + node.padding;
@@ -140,7 +141,7 @@ const trapezoid = (parent, node) => {
}; };
const inv_trapezoid = (parent, node) => { const inv_trapezoid = (parent, node) => {
const { shapeSvg, bbox } = labelHelper(parent, node); const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
const w = bbox.width + node.padding; const w = bbox.width + node.padding;
const h = bbox.height + node.padding; const h = bbox.height + node.padding;
@@ -160,7 +161,7 @@ const inv_trapezoid = (parent, node) => {
return shapeSvg; return shapeSvg;
}; };
const rect_right_inv_arrow = (parent, node) => { const rect_right_inv_arrow = (parent, node) => {
const { shapeSvg, bbox } = labelHelper(parent, node); const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
const w = bbox.width + node.padding; const w = bbox.width + node.padding;
const h = bbox.height + node.padding; const h = bbox.height + node.padding;
@@ -181,7 +182,7 @@ const rect_right_inv_arrow = (parent, node) => {
return shapeSvg; return shapeSvg;
}; };
const cylinder = (parent, node) => { const cylinder = (parent, node) => {
const { shapeSvg, bbox } = labelHelper(parent, node); const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
const w = bbox.width + node.padding; const w = bbox.width + node.padding;
const rx = w / 2; const rx = w / 2;
@@ -248,7 +249,7 @@ const cylinder = (parent, node) => {
}; };
const rect = (parent, node) => { const rect = (parent, node) => {
const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes); const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);
logger.trace('Classes = ', node.classes); logger.trace('Classes = ', node.classes);
// add the rect // add the rect
@@ -296,12 +297,20 @@ const rectWithTitle = (parent, node) => {
const text2 = node.labelText.flat(); const text2 = node.labelText.flat();
logger.info('Label text', text2[0]); logger.info('Label text', text2[0]);
const text = label.node().appendChild(createLabel(text2[0], node.labelStyle, true)); const text = label.node().appendChild(createLabel(text2[0], node.labelStyle, true, true));
let bbox;
if (getConfig().flowchart.htmlLabels) {
const div = text.children[0];
const dv = select(text);
bbox = div.getBoundingClientRect();
dv.attr('width', bbox.width);
dv.attr('height', bbox.height);
}
const textRows = text2.slice(1, text2.length); const textRows = text2.slice(1, text2.length);
let titleBox = text.getBBox(); let titleBox = text.getBBox();
const descr = label const descr = label
.node() .node()
.appendChild(createLabel(textRows.join('<br/>'), node.labelStyle, true)); .appendChild(createLabel(textRows.join('<br/>'), node.labelStyle, true, true));
logger.info(descr); logger.info(descr);
const halfPadding = node.padding / 2; const halfPadding = node.padding / 2;
@@ -309,7 +318,7 @@ const rectWithTitle = (parent, node) => {
// Get the size of the label // Get the size of the label
// Bounding box for title and text // Bounding box for title and text
const bbox = label.node().getBBox(); bbox = label.node().getBBox();
// Center the label // Center the label
label.attr( label.attr(
@@ -341,7 +350,7 @@ const rectWithTitle = (parent, node) => {
}; };
const stadium = (parent, node) => { const stadium = (parent, node) => {
const { shapeSvg, bbox } = labelHelper(parent, node); const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
const h = bbox.height + node.padding; const h = bbox.height + node.padding;
const w = bbox.width + h / 4 + node.padding; const w = bbox.width + h / 4 + node.padding;
@@ -365,7 +374,7 @@ const stadium = (parent, node) => {
return shapeSvg; return shapeSvg;
}; };
const circle = (parent, node) => { const circle = (parent, node) => {
const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node); const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);
const circle = shapeSvg.insert('circle', ':first-child'); const circle = shapeSvg.insert('circle', ':first-child');
// center the circle around its coordinate // center the circle around its coordinate
@@ -386,7 +395,7 @@ const circle = (parent, node) => {
}; };
const subroutine = (parent, node) => { const subroutine = (parent, node) => {
const { shapeSvg, bbox } = labelHelper(parent, node); const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
const w = bbox.width + node.padding; const w = bbox.width + node.padding;
const h = bbox.height + node.padding; const h = bbox.height + node.padding;

6
src/dagre-wrapper/shapes/util.js
View File

@@ -1,7 +1,7 @@
import createLabel from '../createLabel'; import createLabel from '../createLabel';
import { getConfig } from '../../config'; import { getConfig } from '../../config';
import { select } from 'd3'; import { select } from 'd3';
export const labelHelper = (parent, node, _classes) => { export const labelHelper = (parent, node, _classes, isNode) => {
let classes; let classes;
if (!_classes) { if (!_classes) {
classes = 'node default'; classes = 'node default';
@@ -17,7 +17,9 @@ export const labelHelper = (parent, node, _classes) => {
// Create the label and insert it after the rect // Create the label and insert it after the rect
const label = shapeSvg.insert('g').attr('class', 'label'); const label = shapeSvg.insert('g').attr('class', 'label');
const text = label.node().appendChild(createLabel(node.labelText, node.labelStyle)); const text = label
.node()
.appendChild(createLabel(node.labelText, node.labelStyle, false, isNode));
// Get the size of the label // Get the size of the label
let bbox = text.getBBox(); let bbox = text.getBBox();