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

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

@@ -1,4 +1,5 @@
import { select } from 'd3';
import { logger } from '../logger'; // eslint-disable-line
// let vertexNode;
// if (getConfig().flowchart.htmlLabels) {
// // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
@@ -63,7 +64,8 @@ function addHtmlLabel(node) {
const div = fo.append('xhtml:div');
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);
div.style('display', 'inline-block');
@@ -73,10 +75,14 @@ function addHtmlLabel(node) {
return fo.node();
}
const createLabel = (vertexText, style, isTitle) => {
const createLabel = (_vertexText, style, isTitle, isNode) => {
let vertexText = _vertexText || '';
if (getConfig().flowchart.htmlLabels) {
// TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
vertexText = vertexText.replace(/\\n|\n/g, '<br />');
logger.info('vertexText' + vertexText);
const node = {
isNode,
label: vertexText.replace(
/fa[lrsb]?:fa-[\w-]+/g,
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 { logger } from '../logger'; // eslint-disable-line
import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util';
import { getConfig } from '../config';
import createLabel from './createLabel';
import note from './shapes/note';
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 h = bbox.height + node.padding;
@@ -28,7 +29,7 @@ const question = (parent, node) => {
};
const hexagon = (parent, node) => {
const { shapeSvg, bbox } = labelHelper(parent, node);
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
const f = 4;
const h = bbox.height + node.padding;
@@ -53,7 +54,7 @@ const hexagon = (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 h = bbox.height + node.padding;
@@ -75,7 +76,7 @@ const rect_left_inv_arrow = (parent, node) => {
return shapeSvg;
};
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 h = bbox.height + node.padding;
@@ -97,7 +98,7 @@ const lean_right = (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 h = bbox.height + node.padding;
@@ -119,7 +120,7 @@ const lean_left = (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 h = bbox.height + node.padding;
@@ -140,7 +141,7 @@ const 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 h = bbox.height + node.padding;
@@ -160,7 +161,7 @@ const inv_trapezoid = (parent, node) => {
return shapeSvg;
};
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 h = bbox.height + node.padding;
@@ -181,7 +182,7 @@ const rect_right_inv_arrow = (parent, node) => {
return shapeSvg;
};
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 rx = w / 2;
@@ -248,7 +249,7 @@ const cylinder = (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);
// add the rect
@@ -296,12 +297,20 @@ const rectWithTitle = (parent, node) => {
const text2 = node.labelText.flat();
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);
let titleBox = text.getBBox();
const descr = label
.node()
.appendChild(createLabel(textRows.join('<br/>'), node.labelStyle, true));
.appendChild(createLabel(textRows.join('<br/>'), node.labelStyle, true, true));
logger.info(descr);
const halfPadding = node.padding / 2;
@@ -309,7 +318,7 @@ const rectWithTitle = (parent, node) => {
// Get the size of the label
// Bounding box for title and text
const bbox = label.node().getBBox();
bbox = label.node().getBBox();
// Center the label
label.attr(
@@ -341,7 +350,7 @@ const rectWithTitle = (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 w = bbox.width + h / 4 + node.padding;
@@ -365,7 +374,7 @@ const stadium = (parent, node) => {
return shapeSvg;
};
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');
// center the circle around its coordinate
@@ -386,7 +395,7 @@ const circle = (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 h = bbox.height + node.padding;

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

@@ -1,7 +1,7 @@
import createLabel from '../createLabel';
import { getConfig } from '../../config';
import { select } from 'd3';
export const labelHelper = (parent, node, _classes) => {
export const labelHelper = (parent, node, _classes, isNode) => {
let classes;
if (!_classes) {
classes = 'node default';
@@ -17,7 +17,9 @@ export const labelHelper = (parent, node, _classes) => {
// Create the label and insert it after the rect
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
let bbox = text.getBBox();