Merge branch 'adamwulf-flow/trapezoid'

mermaid-js · Jun 29, 2019 · 666e587 · 666e587
2 parents 40d10ea + 3e9e5ac
commit 666e587
Show file tree

Hide file tree

Showing 11 changed files with 1,247 additions and 257 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -104,12 +104,21 @@
       sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
       sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
     </div>
+    <div class="mermaid">
+      graph TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[Car]
+    </div>
   <div class="mermaid">
     graph TD
-    A[Christmas] -->|Get money| B(Go shopping)
+    A[/Christmas\]
+    A -->|Get money| B[\Go shopping/]
     B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
-    C -->|One| D[Laptop]
-    C -->|Two| E[iPhone]
+    C -->|One| D[/Laptop/]
+    C -->|Two| E[\iPhone\]
     C -->|Three| F[Car]
   </div>
   <div class="mermaid">

diff --git a/src/diagrams/class/parser/classDiagram.js b/src/diagrams/class/parser/classDiagram.js
diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
@@ -110,6 +110,18 @@ export const addVertices = function (vert, g, svgId) {
       case 'odd':
         _shape = 'rect_left_inv_arrow'
         break
+      case 'lean_right':
+        _shape = 'lean_right'
+        break
+      case 'lean_left':
+        _shape = 'lean_left'
+        break
+      case 'trapezoid':
+        _shape = 'trapezoid'
+        break
+      case 'inv_trapezoid':
+        _shape = 'inv_trapezoid'
+        break
       case 'odd_right':
         _shape = 'rect_left_inv_arrow'
         break
@@ -338,6 +350,90 @@ export const draw = function (text, id) {
     return shapeSvg
   }
 
+  // Add custom shape for box with inverted arrow on left side
+  render.shapes().lean_right = function (parent, bbox, node) {
+    const w = bbox.width
+    const h = bbox.height
+    const points = [
+      { x: -2 * h / 6, y: 0 },
+      { x: w - h / 6, y: 0 },
+      { x: w + 2 * h / 6, y: -h },
+      { x: h / 6, y: -h }
+    ]
+    const shapeSvg = parent.insert('polygon', ':first-child')
+      .attr('points', points.map(function (d) {
+        return d.x + ',' + d.y
+      }).join(' '))
+      .attr('transform', 'translate(' + (-w / 2) + ',' + (h * 2 / 4) + ')')
+    node.intersect = function (point) {
+      return dagreD3.intersect.polygon(node, points, point)
+    }
+    return shapeSvg
+  }
+
+  // Add custom shape for box with inverted arrow on left side
+  render.shapes().lean_left = function (parent, bbox, node) {
+    const w = bbox.width
+    const h = bbox.height
+    const points = [
+      { x: 2 * h / 6, y: 0 },
+      { x: w + h / 6, y: 0 },
+      { x: w - 2 * h / 6, y: -h },
+      { x: -h / 6, y: -h }
+    ]
+    const shapeSvg = parent.insert('polygon', ':first-child')
+      .attr('points', points.map(function (d) {
+        return d.x + ',' + d.y
+      }).join(' '))
+      .attr('transform', 'translate(' + (-w / 2) + ',' + (h * 2 / 4) + ')')
+    node.intersect = function (point) {
+      return dagreD3.intersect.polygon(node, points, point)
+    }
+    return shapeSvg
+  }
+
+  // Add custom shape for box with inverted arrow on left side
+  render.shapes().trapezoid = function (parent, bbox, node) {
+    const w = bbox.width
+    const h = bbox.height
+    const points = [
+      { x: -2 * h / 6, y: 0 },
+      { x: w + 2 * h / 6, y: 0 },
+      { x: w - h / 6, y: -h },
+      { x: h / 6, y: -h }
+    ]
+    const shapeSvg = parent.insert('polygon', ':first-child')
+      .attr('points', points.map(function (d) {
+        return d.x + ',' + d.y
+      }).join(' '))
+      .attr('transform', 'translate(' + (-w / 2) + ',' + (h * 2 / 4) + ')')
+    node.intersect = function (point) {
+      return dagreD3.intersect.polygon(node, points, point)
+    }
+    return shapeSvg
+  }
+
+  // Add custom shape for box with inverted arrow on left side
+  render.shapes().inv_trapezoid = function (parent, bbox, node) {
+    const w = bbox.width
+    const h = bbox.height
+    const points = [
+      { x: h / 6, y: 0 },
+      { x: w - h / 6, y: 0 },
+      { x: w + 2 * h / 6, y: -h },
+      { x: -2 * h / 6, y: -h }
+    ]
+    const shapeSvg = parent.insert('polygon', ':first-child')
+      .attr('points', points.map(function (d) {
+        return d.x + ',' + d.y
+      }).join(' '))
+      .attr('transform', 'translate(' + (-w / 2) + ',' + (h * 2 / 4) + ')')
+    node.intersect = function (point) {
+      return dagreD3.intersect.polygon(node, points, point)
+    }
+    return shapeSvg
+  }
+
   // Add custom shape for box with inverted arrow on right side
   render.shapes().rect_right_inv_arrow = function (parent, bbox, node) {
     const w = bbox.width