#530 Started adding some tests around how flowchart shapes are rendered in SVG

src/diagrams/flowchart/flowChartShapes.js

@@ -0,0 +1,162 @@
+import dagreD3 from 'dagre-d3-renderer';
+
+export function addToRender(render) {
+  render.shapes().question = function(parent, bbox, node) {
+    const w = bbox.width;
+    const h = bbox.height;
+    const s = (w + h) * 0.9;
+    const points = [
+      { x: s / 2, y: 0 },
+      { x: s, y: -s / 2 },
+      { x: s / 2, y: -s },
+      { x: 0, y: -s / 2 }
+    ];
+    const shapeSvg = insertPolygonShape(parent, s, s, points);
+    node.intersect = function(point) {
+      return dagreD3.intersect.polygon(node, points, point);
+    };
+    return shapeSvg;
+  };
+
+  render.shapes().hexagon = function(parent, bbox, node) {
+    const f = 4;
+    const h = bbox.height;
+    const m = h / f;
+    const w = bbox.width + 2 * m;
+    const points = [
+      { x: m, y: 0 },
+      { x: w - m, y: 0 },
+      { x: w, y: -h / 2 },
+      { x: w - m, y: -h },
+      { x: m, y: -h },
+      { x: 0, y: -h / 2 }
+    ];
+    const shapeSvg = insertPolygonShape(parent, w, h, points);
+    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().rect_left_inv_arrow = function(parent, bbox, node) {
+    const w = bbox.width;
+    const h = bbox.height;
+    const points = [
+      { x: -h / 2, y: 0 },
+      { x: w, y: 0 },
+      { x: w, y: -h },
+      { x: -h / 2, y: -h },
+      { x: 0, y: -h / 2 }
+    ];
+    const shapeSvg = insertPolygonShape(parent, w, h, points);
+    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_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 = insertPolygonShape(parent, w, h, points);
+    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 = insertPolygonShape(parent, w, h, points);
+    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 = insertPolygonShape(parent, w, h, points);
+    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 = insertPolygonShape(parent, w, h, points);
+    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;
+    const h = bbox.height;
+    const points = [
+      { x: 0, y: 0 },
+      { x: w + h / 2, y: 0 },
+      { x: w, y: -h / 2 },
+      { x: w + h / 2, y: -h },
+      { x: 0, y: -h }
+    ];
+    const shapeSvg = insertPolygonShape(parent, w, h, points);
+    node.intersect = function(point) {
+      return dagreD3.intersect.polygon(node, points, point);
+    };
+    return shapeSvg;
+  };
+}
+
+function insertPolygonShape(parent, w, h, points) {
+  return parent
+    .insert('polygon', ':first-child')
+    .attr(
+      'points',
+      points
+        .map(function(d) {
+          return d.x + ',' + d.y;
+        })
+        .join(' ')
+    )
+    .attr('transform', 'translate(' + -w / 2 + ',' + h / 2 + ')');
+}
+
+export default {
+  addToRender
+};