diff --git a/cypress/platform/current.html b/cypress/platform/current.html index 87cd7a4b9..d3468a5c2 100644 --- a/cypress/platform/current.html +++ b/cypress/platform/current.html @@ -18,35 +18,24 @@

info below

-
- flowchart LR - a --> b +
+ stateDiagram-v2 - subgraph b [Test] - c --> d -->e - end + [*] --> S1 + state "Some long name\nwith an even longer next row" as S1
-
- flowchart LR - a --> b - - subgraph id1 [Test] - a --apa--> c - b - c-->b - b-->H - end - G-->H - G-->c +
+flowchart TD + cr((Create Request)) --label this is--> server[REST Server]
-
+
flowchart LR A{{A}}-- apa -->B{{B}}; click A callback "Tooltip" click B "http://www.github.com" "This is a link"
-
+
graph LR A{{A}}--apa-->B{{B}}; diff --git a/src/dagre-wrapper/createLabel.js b/src/dagre-wrapper/createLabel.js index bacb34a9c..055f6cfb5 100644 --- a/src/dagre-wrapper/createLabel.js +++ b/src/dagre-wrapper/createLabel.js @@ -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('' + label + ''); + const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel'; + div.html('' + label + ''); 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, '
'); + logger.info('vertexText' + vertexText); const node = { + isNode, label: vertexText.replace( /fa[lrsb]?:fa-[\w-]+/g, s => `` diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js index c66f02be9..93fea5bf9 100644 --- a/src/dagre-wrapper/nodes.js +++ b/src/dagre-wrapper/nodes.js @@ -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('
'), node.labelStyle, true)); + .appendChild(createLabel(textRows.join('
'), 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; diff --git a/src/dagre-wrapper/shapes/util.js b/src/dagre-wrapper/shapes/util.js index 36107fd20..0d4055554 100644 --- a/src/dagre-wrapper/shapes/util.js +++ b/src/dagre-wrapper/shapes/util.js @@ -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();