#1023 New line in transition labels, basic support

cypress/integration/rendering/stateDiagram.spec.js

@@ -48,6 +48,20 @@ describe('State diagram', () => {
     );
     cy.get('svg');
   });
+  it('should render a transition descrions with new lines', () => {
+    imgSnapshotTest(
+      `
+      stateDiagram
+
+      [*] --> S1
+      S1 --> S2: long line using<br/>should work
+      S1 --> S3: long line using <br>should work
+      S1 --> S4: long line using \\nshould work
+      `,
+      { logLevel: 0 }
+    );
+    cy.get('svg');
+  });
   it('should render a state with a note', () => {
     imgSnapshotTest(
       `

src/diagrams/state/shapes.js

@@ -350,6 +350,12 @@ export const drawState = function(elem, stateDef, graph, doc) {
   return stateInfo;
 };
 
+const getRows = s => {
+  let str = s.replace(/<br\/?>/gi, '#br#');
+  str = str.replace(/\\n/g, '#br#');
+  return str.split('#br#');
+};
+
 let edgeCount = 0;
 export const drawEdge = function(elem, path, relation) {
   const getRelationType = function(type) {
@@ -404,20 +410,49 @@ export const drawEdge = function(elem, path, relation) {
   );
 
   if (typeof relation.title !== 'undefined') {
-    const g = elem.append('g').attr('class', 'stateLabel');
-    const label = g
+    const label = elem.append('g').attr('class', 'stateLabel');
+
+    const { x, y } = utils.calcLabelPosition(path.points);
+
+    const rows = getRows(relation.title);
+
+    console.warn(rows);
+
+    let titleHeight = 0;
+    const titleRows = [];
+    for (let i = 0; i <= rows.length; i++) {
+      const title = label
         .append('text')
         .attr('text-anchor', 'middle')
-      .text(relation.title);
-    const { x, y } = utils.calcLabelPosition(path.points);
-    label.attr('x', x).attr('y', y);
+        .text(rows[i])
+        .attr('x', x)
+        .attr('y', y + titleHeight);
+
+      if (titleHeight === 0) {
+        const titleBox = title.node().getBBox();
+        titleHeight = titleBox.height;
+        console.warn('apa', rows.length * titleHeight);
+      }
+      titleRows.push(title);
+    }
+
+    if (rows.length > 1) {
+    const heightAdj = rows.length * titleHeight * 0.25;
+
+    titleRows.forEach((title, i) => title.attr('y', y + i * titleHeight - heightAdj));
+    }
+
     const bounds = label.node().getBBox();
-    g.insert('rect', ':first-child')
+    label
+      .insert('rect', ':first-child')
       .attr('class', 'box')
       .attr('x', bounds.x - getConfig().state.padding / 2)
       .attr('y', bounds.y - getConfig().state.padding / 2)
       .attr('width', bounds.width + getConfig().state.padding)
       .attr('height', bounds.height + getConfig().state.padding);
+
+    //label.attr('transform', '0 -' + (bounds.y / 2));
+
     // Debug points
     // path.points.forEach(point => {
     //   g.append('circle')

src/diagrams/state/stateRenderer.js

@@ -108,6 +108,14 @@ const getLabelWidth = text => {
   return text ? text.length * conf.fontSizeFactor : 1;
 };
 
+/* TODO: REMOVE DUPLICATION, SEE SHAPES */
+const getRows = s => {
+  if (!s) return 1;
+  let str = s.replace(/<br\/?>/gi, '#br#');
+  str = str.replace(/\\n/g, '#br#');
+  return str.split('#br#');
+};
+
 const renderDoc = (doc, diagram, parentId) => {
   // // Layout graph, Create a new directed graph
   const graph = new graphlib.Graph({
@@ -221,7 +229,7 @@ const renderDoc = (doc, diagram, parentId) => {
     graph.setEdge(relation.id1, relation.id2, {
       relation: relation,
       width: getLabelWidth(relation.title),
-      height: conf.labelHeight,
+      height: conf.labelHeight * getRows(relation.title).length,
       labelpos: 'c'
     });
   });